Carregando…Carregando…Carregando…Carregando…Step indicator with horizontal/vertical orientation, status icons and content per step.
$ npx kikitocn add stepperimport { Stepper } from "@/components/ui/cn/stepper/Stepper";
export function StepperExample() {
return (
<Stepper orientation="horizontal">
Stepper
</Stepper>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
steps* | StepDef[] | — | Array de { label, description?, content?, optional?, status? } |
activeStep | number | — | Índice do passo atual (controlado) |
defaultStep | number | 0 | Passo inicial (não-controlado) |
onStepChange | (step: number) => void | — | Callback ao mudar de passo |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientação do stepper |
clickable | boolean | false | Permite navegar clicando nos passos |
className | string | — | Classes CSS extras |
children | React.ReactNode | — | Conteúdo extra abaixo do stepper |
Horizontal step indicator with navigation
Vertical orientation
Order placed
We received your order
Payment (optional)
Optional invoice details
Shipping issue
Address could not be verified
Delivered
Package arrives
Code Stepper — passos estáticos numerados com bloco de código
1
npx create-react-app my-app2
cd my-app3
npm start4
npm run build