Carregando…

Stepper

Display

Step indicator with horizontal/vertical orientation, status icons, content, dot and progress variants.

Dot Stepper

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/dot-stepper

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/progress-steps

Instalação via CLI

$ npx kikitocn add stepper

Exemplo de uso

StepperExample.tsx

import { Stepper } from "@/components/ui/cn/stepper/Stepper";

export function StepperExample() {
  return (
    <Stepper />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`steps*`	`StepDef[]`	—	Array de { label, description, content, 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

Carregando…