Steps

Steps in a wizard-like format.

Step 1

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/steps.json

Usage


import {
  Steps,
  StepsList,
  StepsItem,
  StepsTrigger,
  StepsSeparator,
  StepsIndicator,
  StepsTitle,
  StepsDescription,
  StepsContent,
  StepsCompletedContent,
  StepsNext,
  StepsPrevious
} from "@/components/ui/steps";


<Steps>
  <StepsList>
    <StepsItem>
      <StepsTrigger>
        <StepsIndicator />
        <StepsTitle />
      </StepsTrigger>
      <StepsSeparator />
    </StepsItem>
  </StepsList>
  <StepsContent />
  <StepsCompletedContent />
  <StepsPrevious />
  <StepsNext />
</Steps>

Examples

Title

Use <StepsTitle /> to display a description for each step.

Description

Use <StepsDescription /> to display a description for each step.

Vertical

Use orientation="vertical" for a vertical layout.

Personal

Loading

Controlled

Use the step and onStepChange props to control the active step programmatically.

Please provide your name and email address.

Custom Icon

API Reference

Steps

Root component. Manages step state and connectors.

Prop	Type	Default
`count`	`number`	`-`
`step`	`number`	`-`
`defaultStep`	`number`	`-`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`linear`	`boolean`	`false`
`onStepChange`	`(details: StepChangeDetails) => void`	`-`
`onStepComplete`	`() => void`	`-`

StepsList

Wraps the list of steps. Handles connector layout.

Attribute	Default
`--steps-gutter`	`--spacing(2)`
`--steps-icon-size`	`--spacing(4)`
`--steps-size`	`--spacing(8)`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Examples Title Description Vertical Loading Controlled Custom Icon API Reference Steps StepsList