Vertical Stepper

Displays a sequence of steps that the user can navigate through.
1
Create account
2
Invite team
3
Start building
Properties
No properties to configure

Installation

Usage

Example
Source Code
"use client";

import React from "react";
import { VerticalStepper } from "@/ui/components/VerticalStepper";

function VerticalStepperExample() {
  return (
    <VerticalStepper>
      <VerticalStepper.Step
        variant="completed"
        stepNumber="1"
        label="Create account"
        firstStep={true}
      />
      <VerticalStepper.Step
        variant="active"
        stepNumber="2"
        label="Invite team"
        firstStep={false}
      />
      <VerticalStepper.Step
        stepNumber="3"
        label="Start building"
        lastStep={true}
      />
    </VerticalStepper>
  );
}

export default VerticalStepperExample;

Props

Vertical Stepper Props
Step Props
Prop
Type
Default value
Notes
children
React.ReactNode

Examples

Variants

First and last step

Use firstStep and lastStep props to indicate the first and last steps.