Atoms

Stepper

A multi-step wizard component with validation.

FormanceCustom component built for Formance products.

Configure your account settings and preferences.

Installation#

npx shadcn@latest add @formance/stepper

Install the following dependencies:

npm install lucide-react radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Stepper,
  StepperContent,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperList,
  StepperNextTrigger,
  StepperPrevTrigger,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from '@/components/ui/stepper'

<Stepper defaultValue="account">
  <StepperList>
    <StepperItem value="account">
      <StepperTrigger>
        <StepperIndicator />
        <StepperTitle>Account</StepperTitle>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
    <StepperItem value="ledger">
      <StepperTrigger>
        <StepperIndicator />
        <StepperTitle>Create Ledger</StepperTitle>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
    <StepperItem value="review">
      <StepperTrigger>
        <StepperIndicator />
        <StepperTitle>Review</StepperTitle>
      </StepperTrigger>
    </StepperItem>
  </StepperList>

  <StepperContent value="account">Configure your account.</StepperContent>
  <StepperContent value="ledger">Create your first ledger.</StepperContent>
  <StepperContent value="review">Review and confirm.</StepperContent>
</Stepper>

Compound Components

Compose the pieces you need:

<Stepper />Root provider with value, orientation, and validation.

<StepperList />Tab list container for step triggers.

<StepperItem />Individual step with value, completed, and disabled state.

<StepperTrigger />Clickable trigger for a step.

<StepperIndicator />Step number or check icon, styled by state.

<StepperTitle />Label text for a step.

<StepperDescription />Secondary text below the step title.

<StepperSeparator />Line between steps, colored by completion state.

<StepperContent />Panel content shown for the active step.

<StepperPrevTrigger />Button to navigate to the previous step.

<StepperNextTrigger />Button to navigate to the next step (runs validation).

Command Menu