Yami

Stepper

A multi-step progress and navigation control.

Enter your account details.

Installation

Add the stepper component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/stepper.json

Usage

import { Button } from "@/components/ui/button"
import {
  Stepper,
  StepperContent,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperList,
  StepperNext,
  StepperPrev,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "@/components/ui/stepper"

<Stepper defaultValue="account">
  <StepperList>
    <StepperItem value="account">
      <StepperTrigger>
        <StepperIndicator />
        <StepperTitle>Account</StepperTitle>
        <StepperDescription>Your details</StepperDescription>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
  </StepperList>
  <StepperContent value="account">Enter your account details.</StepperContent>
  <StepperPrev asChild><Button variant="outline">Back</Button></StepperPrev>
  <StepperNext asChild><Button>Next</Button></StepperNext>
</Stepper>

Examples

Default

Enter your account details.

Code

import { Button } from "@/components/ui/button"
import {
  Stepper,
  StepperContent,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperList,
  StepperNext,
  StepperPrev,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "@/components/ui/stepper"

<Stepper defaultValue="account">
  <StepperList>
    <StepperItem value="account">
      <StepperTrigger>
        <StepperIndicator />
        <StepperTitle>Account</StepperTitle>
        <StepperDescription>Your details</StepperDescription>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
  </StepperList>
  <StepperContent value="account">Enter your account details.</StepperContent>
  <StepperPrev asChild><Button variant="outline">Back</Button></StepperPrev>
  <StepperNext asChild><Button>Next</Button></StepperNext>
</Stepper>