Stepper

import { Stepper } from '@kivora/react';

const steps = [
  { label: 'Account', description: 'Create your account' },
  { label: 'Profile', description: 'Fill profile details' },
  { label: 'Done', description: 'Review and confirm' },
];

<Stepper steps={steps} active={1} />

<Stepper 
  steps={steps} 
  active={1} 
  orientation="vertical"
/>

const stepsWithIcons = [
  { 
    label: 'Account', 
    description: 'Create account',
    icon: <UserIcon className="size-4" />
  },
  { 
    label: 'Payment', 
    description: 'Billing info',
    icon: <CreditCardIcon className="size-4" />
  },
  { 
    label: 'Complete',
    icon: <CheckIcon className="size-4" />
  },
];

<Stepper steps={stepsWithIcons} active={0} />

{/* Small */}
<Stepper steps={steps} active={1} size="sm" />

{/* Medium (default) */}
<Stepper steps={steps} active={1} size="md" />

{/* Large */}
<Stepper steps={steps} active={1} size="lg" />

const [activeStep, setActiveStep] = useState(0);

<Stepper 
  steps={steps} 
  active={activeStep}
  allowStepSelect
  onStepClick={setActiveStep}
/>

import { useState } from 'react';
import { Stepper, Button } from '@kivora/react';

function OnboardingFlow() {
  const [activeStep, setActiveStep] = useState(0);

  const steps = [
    { label: 'Welcome', description: 'Getting started' },
    { label: 'Profile', description: 'Basic information' },
    { label: 'Preferences', description: 'Customize your experience' },
    { label: 'Complete', description: 'Ready to go!' },
  ];

  const next = () => setActiveStep((s) => Math.min(s + 1, steps.length - 1));
  const prev = () => setActiveStep((s) => Math.max(s - 1, 0));

  return (
    <div className="max-w-2xl mx-auto p-6">
      <Stepper 
        steps={steps} 
        active={activeStep}
        allowStepSelect
        onStepClick={setActiveStep}
      />
      
      <div className="mt-8">
        {/* Step content here */}
        <div className="min-h-48 p-6 bg-muted rounded-lg">
          {steps[activeStep].description}
        </div>
      </div>

      <div className="mt-6 flex gap-3 justify-between">
        <Button onClick={prev} disabled={activeStep === 0}>
          Previous
        </Button>
        <Button onClick={next} disabled={activeStep === steps.length - 1}>
          Next
        </Button>
      </div>
    </div>
  );
}