Progress Steps

Display

Linear step progress bar with step labels and size variants.

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 current={50} orientation="horizontal" size="sm" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`steps*`	`ProgressStep[]`	—	Array de { label, description?, status? }
`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
`style`	`CSSProperties`	—	Estilos inline pro container

Voltar para Display

Carregando…

Progress Steps

Progress Steps

Orientation

Completed state

Orientation

Completed state