Steps

A component that displays a list of steps in a wizard-like format.

First - Contact Info

Installation


pnpm dlx shadcn@latest add @shark-ui/steps

Usage


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


<Steps>
  <StepsList>
    <StepsItem index={0}>
      <StepsTrigger>Step 1</StepsTrigger>
    </StepsItem>
  </StepsList>
 
  <StepsContent index={0}>Content 1</StepsContent>
 
  <StepsCompletedContent>Completed Content</StepsCompletedContent>
 
  <StepsNext>Next</StepsNext>
  <StepsPrevious>Previous</StepsPrevious>
</Steps>

Examples

Default

First - Contact Info

On This Page

Installation Usage Examples Default