Stepper

Shows the current and completed steps in a sequence.

Completed: Details
Review
Complete

stepper-basic-demo.tsx

import { Stepper } from "@/components/vip-ui/stepper";export function StepperBasicDemo() {  return (    <Stepper      steps={[{ label: "Details" }, { label: "Review" }, { label: "Complete" }]}      currentStep={1}      aria-label="Project setup progress"      className="w-full max-w-xl"    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-stepper.json

Controlled step

DetailsAdd the essentials
ReviewCheck your choices
CompleteReady to submit

stepper-demo.tsx

"use client";import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Stepper } from "@/components/vip-ui/stepper";const steps = [  { label: "Details", description: "Add the essentials" },  { label: "Review", description: "Check your choices" },  { label: "Complete", description: "Ready to submit" },];export function StepperDemo() {  const [currentStep, setCurrentStep] = useState(0);  return (    <div className="grid w-full max-w-xl gap-4">      <Stepper        steps={steps}        currentStep={currentStep}        aria-label="Project setup progress"      />      <div className="flex justify-end gap-2 border-t border-border pt-4">        <Button          size="sm"          variant="outline"          isDisabled={currentStep === 0}          onPress={() => setCurrentStep((step) => step - 1)}        >          <CaretLeftIcon aria-hidden="true" /> Back        </Button>        <Button          size="sm"          isDisabled={currentStep === steps.length - 1}          onPress={() => setCurrentStep((step) => step + 1)}        >          Next <CaretRightIcon aria-hidden="true" />        </Button>      </div>    </div>  );}

API reference

steps: readonly { label: string; description?: string }[]Required: Steps in display order. Keep labels short. If the steps do not fit, the list scrolls and keeps the current step in view.
currentStep: number (zero-based)Required: Index of the current step. Earlier steps show as complete. Set it to steps.length to show all steps as complete.