Carregando…Carregando…Carregando…Carregando…Dot-based step progress indicator with variant and click navigation.
$ npx kikitocn add dot-stepperimport { DotStepper } from "@/components/ui/cn/dot-stepper/DotStepper";
export function DotStepperExample() {
return (
<DotStepper steps={50} current={50} variant="dot" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
steps* | number | — | Número total de passos |
current* | number | — | Índice do passo atual |
onChange | (index: number) => void | — | Callback ao clicar em um dot |
variant | 'dot' | 'dash' | 'progress' | 'dot' | Estilo do indicador |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
Dot (default)
Dash
Progress bar