Ravox KitBasics
Empty
What appears when the list, the search or the folder has nothing: says what is missing, why, and offers the next step. Normal or compact (inside cards and menus), with a dashed border for drop areas.
Nenhum pedido ainda
Quando alguém comprar na sua loja, o pedido aparece aqui com o status do pagamento e da entrega.
Settings
Toggles
Examples
Search with no results
Nada encontrado para “camiseta verde”
Confira a grafia ou tire um dos filtros ativos.
File drop area
Solte a planilha de clientes aqui
CSV ou XLSX até 10 MB. A primeira linha precisa ter os nomes das colunas.
First use
Chame o seu time
Cada pessoa recebe um convite por e-mail e entra com o papel que você escolher.
Inside a card
Notificações
Tudo lido
Avisamos aqui quando chegar algo novo.
Installation
The command creates components/ui/empty.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add emptyProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Required. Short and direct: "No orders yet". |
| description | ReactNode | — | The why and what to do. One or two sentences. |
| actions | ReactNode | — | One or two buttons. The first is the main action. |
| icon | ReactNode | false | — | Icon for the context. If not passed, the empty box is shown; false removes it. |
| size | "default" | "compact" | "default" | Compact for use inside cards, menus and small tables. |
| outline | boolean | false | Dashed border around it (file drop area, board column). |
| headingLevel | "h2" | "h3" | "h4" | "p" | "h3" | The title's tag, to follow the page hierarchy. |
| ...props | ComponentProps<"div"> | — | Everything a <div> accepts. The children go after the actions (a help link, for example). |