Progress Stepper

import { Stepper, Step } from '@/components/ui/stepper'

export default function App() {
  const [currentStep, setCurrentStep] = React.useState(0)
  
  return (
    <Stepper 
      steps={[
        { label: 'Account', description: 'Personal information' },
        { label: 'Address', description: 'Shipping address' },
        { label: 'Payment', description: 'Payment details' },
        { label: 'Review', description: 'Review your order' }
      ]} 
      currentStep={currentStep} 
    />
  )
}

import { Stepper, Step } from '@/components/ui/stepper'

export default function CheckoutPage() {
  const [currentStep, setCurrentStep] = React.useState(0)
  
  return (
    <Stepper 
      steps={[
        { label: 'Account', description: 'Personal information' },
        { label: 'Address', description: 'Shipping address' },
        { label: 'Payment', description: 'Payment details' },
        { label: 'Review', description: 'Review your order' }
      ]} 
      currentStep={currentStep} 
    />
  )
}