GitHub

Steps

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

Docs API
First - Contact Info

Installation

pnpm dlx shadcn@latest add https://shark-ui.vercel.app/r/steps.json

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>