Progress Steps

Display

Linear step progress bar with step labels and size variants.

🚧

Demo coming soon

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

Instalação via CLI

$ npx kikitocn add progress-steps

Exemplo de uso

Progress StepsExample.tsx

import { ProgressSteps } from "@/components/ui/cn/progress-steps/ProgressSteps";

export function ProgressStepsExample() {
  return (
    <ProgressSteps />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`steps*`	`ProgressStep[]`	—	Array de { label, description? }
`current*`	`number`	—	Índice do passo atual (0-based)
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientação
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho dos indicadores
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…