Ravox KitBásicos
Progresso
Barra de progresso com rótulo e valor ligados a ela. Sem valor, fica indeterminada enquanto não se sabe quanto falta. A variante em etapas mostra onde a pessoa está num cadastro, checkout ou importação.
Armazenamento usado
Ajustes
Tipo
Espessura
Cor
Exemplos
Envio de arquivos
Enviando fotos do produto
Cadastro em etapas
Etapa 2 de 4: Loja
- Conta (concluída)
- Loja (atual)
- Pagamento
- Revisão
Sem saber quanto falta
Conectando ao banco
Metas no painel
Vendas de setembro
Vagas do workshop
Backup de hoje
Instalação
O shadcn cria components/ui/progresso.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/progresso.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| valor | number | null | — | De 0 a max. Sem valor (ou null), a barra é indeterminada. |
| max | number | 100 | Valor que enche a barra (ex.: total de arquivos). |
| rotulo | ReactNode | — | Texto em cima da barra, que vira o nome dela para leitores de tela. |
| mostrarValor | boolean | false | Mostra o valor à direita do rótulo. |
| formatar | (valor, max) => string | 42% | Texto do valor, também usado no aria-valuetext ("3 de 8 arquivos"). |
| espessura | "fino" | "medio" | "grosso" | "medio" | 4, 8 ou 12px. |
| cor | "padrao" | "rosa" | "amarelo" | "lima" | "azul" | "padrao" | Cor do preenchimento. Padrão é a cor do texto. |
| ProgressoEtapas etapas / atual | string[] / number | — | Nomes em ordem e o índice da etapa atual (0 é a primeira; etapas.length = tudo feito). |
| ProgressoEtapas mostrarNomes | boolean | true | Nome de cada etapa embaixo. No espaço estreito sai só "Etapa 2 de 4: Pagamento". |