stepper

Component

About

stepper onboarding UI

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds stepper to your project and fits it to your theme.

Code

How stepper is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { Stepper, StepperItem, StepperContent, StepperNavigation } from "@/components/ui/stepper"
import { useState } from "react"

export default function StepperDemo() {
  const [step, setStep] = useState(1)
  return (
    <div className="flex items-center justify-center min-h-screen bg-background p-8">
      <div className="w-full max-w-md">
        <Stepper value={step} onChange={setStep}>
          <div className="flex justify-between mb-8">
            <StepperItem step={1} title="Account" />
            <StepperItem step={2} title="Profile" />
            <StepperItem step={3} title="Review" />
          </div>
          <StepperContent step={1}><p className="text-sm text-muted-foreground py-4">Enter your email and password.</p></StepperContent>
          <StepperContent step={2}><p className="text-sm text-muted-foreground py-4">Fill in your profile details.</p></StepperContent>
          <StepperContent step={3}><p className="text-sm text-muted-foreground py-4">Review and confirm your details.</p></StepperContent>
          <StepperNavigation />
        </Stepper>
      </div>
    </div>
  )
}