Ravox KitBásicos
Vazio
O que aparece quando a lista, a busca ou a pasta não tem nada: diz o que falta, por que, e oferece o próximo passo. Normal ou compacto (dentro de card e menu), com borda tracejada para área de soltar.
Nenhum pedido ainda
Quando alguém comprar na sua loja, o pedido aparece aqui com o status do pagamento e da entrega.
Ajustes
Tamanho
Exemplos
Busca sem resultado
Nada encontrado para “camiseta verde”
Confira a grafia ou tire um dos filtros ativos.
Área de soltar arquivo
Solte a planilha de clientes aqui
CSV ou XLSX até 10 MB. A primeira linha precisa ter os nomes das colunas.
Primeiro uso
Chame o seu time
Cada pessoa recebe um convite por e-mail e entra com o papel que você escolher.
Dentro de um card
Notificações
Tudo lido
Avisamos aqui quando chegar algo novo.
Instalação
O shadcn cria components/ui/vazio.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/vazio.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| titulo | ReactNode | — | Obrigatório. Curto e direto: "Nenhum pedido ainda". |
| descricao | ReactNode | — | O porquê e o que fazer. Uma ou duas frases. |
| acoes | ReactNode | — | Um ou dois botões. O primeiro é a ação principal. |
| icone | ReactNode | false | — | Ícone do contexto. Sem passar, sai a caixa vazia; false tira. |
| tamanho | "padrao" | "compacto" | "padrao" | Compacto para dentro de card, menu e tabela pequena. |
| contorno | boolean | false | Borda tracejada em volta (área de soltar arquivo, coluna de quadro). |
| nivel | "h2" | "h3" | "h4" | "p" | "h3" | A tag do título, para seguir a hierarquia da página. |
| ...props | ComponentProps<"div"> | — | Tudo o que um <div> aceita. O children entra depois das ações (um link de ajuda, por exemplo). |