Theme

Stepper

navigation @dryui/ui Compound

Step-by-step progress indicator

stepswizardprogressworkflow

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Stepper } from '@dryui/ui';
</script>

<Stepper.Root bind:activeStep={activeStep}>
  <Stepper.List>
    <Stepper.Step step={0}>Account</Stepper.Step>
    <Stepper.Separator step={0} />
    <Stepper.Step step={1}>Profile</Stepper.Step>
    <Stepper.Separator step={1} />
    <Stepper.Step step={2}>Review</Stepper.Step>
  </Stepper.List>
</Stepper.Root>

Import options

Root package

ts
import { Stepper } from '@dryui/ui'

Per-component subpath

ts
import { Stepper } from '@dryui/ui/stepper'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

3-Step Stepper

  1. Account
  2. Profile
  3. Review
svelte
<script lang="ts">
  let activeStep = $state(1);
</script>

<Stepper.Root {activeStep}>
  <Stepper.List>
    <Stepper.Step step={1}>Account</Stepper.Step>
    <Stepper.Separator step={1} />
    <Stepper.Step step={2}>Profile</Stepper.Step>
    <Stepper.Separator step={2} />
    <Stepper.Step step={3}>Review</Stepper.Step>
  </Stepper.List>
</Stepper.Root>

Vertical Stepper

  1. Account setup
  2. Profile information
  3. Review and submit
svelte
<Stepper.Root activeStep={2} orientation="vertical">
  <Stepper.List>
    <Stepper.Step step={1}>Account setup</Stepper.Step>
    <Stepper.Separator step={1} />
    <Stepper.Step step={2}>Profile information</Stepper.Step>
    <Stepper.Separator step={2} />
    <Stepper.Step step={3}>Review and submit</Stepper.Step>
  </Stepper.List>
</Stepper.Root>

Structure

Compound components always start with Stepper.Root. Use this structure block to understand required wrappers before you wire state or styling.

Stepper.Root
  Stepper.List
    Stepper.Step
    Stepper.Separator

Stepper.List wraps Stepper.Step and Stepper.Separator. Bind activeStep on Root when controlling the current step.

Stepper.Root Stepper.ListStepper.StepStepper.Separator

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with Stepper.Root, then add only the parts you need.

Stepper.ListStepper.StepStepper.Separator

Stepper.Root

Prop Type Default Required Bindable
activeStep
number Bindable current step index for controlled multi-step flows.
 0 — ✓
orientation
horizontalvertical
 — — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

Stepper.List

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <ol> attributes via rest props. Common examples: id, style, aria-labelledby.

Stepper.Step

Prop Type Default Required Bindable
step
number
— ✓ —
clickable
boolean
— — —
error
boolean
— — —
onclick
(index: number) => void
— — —
children
Snippet
— ✓ —

Forwards <li> attributes via rest props. Common examples: id, role, value. Omitted: onclick.

Stepper.Separator

Prop Type Default Required Bindable
step
number
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.