Ravox KitSurfaces
Item
The row of every dashboard list: icon, photo or thumbnail, title, description and actions at the end. Groups with dividers between items, separates with labels, and can be clickable as a whole without putting buttons inside a link.
Contrato-clinica-sorriso.pdf
Enviado por Marina Rocha · 2,4 MB · ontem às 18:40
Settings
Toggles
Examples
Team members, with dividers
MR
Marina Rocha
marina@sorriso.com.br
Dona
CN
Caio Nunes
caio@sorriso.com.br
Editor
LP
Lia Prado
Convite enviado há 2 dias
Pendente
Clickable rows, with separator
Thumbnail and two actions
Aurora Em revisão
Landing · enviada hoje às 09:12
Subtle and compact
Mercado Pago
Pix e cartão · conectado
Stripe
Cartão internacional · conectado
Installation
The command creates components/ui/item.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add itemProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "subtle" | "default" | No frame (for use inside a card), with its own border, or a light background (Item). |
| size | "md" | "compact" | "md" | Row spacing (Item). |
| variant (mídia) | "icon" | "box" | "image" | "avatar" | "icon" | Plain icon, icon in a neutral box, square thumbnail or round photo (ItemMedia). |
| dividers | boolean | false | Divider line between items; without it, items have a 4px gap (ItemGroup, which becomes role="list"). |
| ItemSeparator | ComponentProps<"div"> | — | Divider between groups, with an optional label as a child ("Pinned", "Yesterday"). |
| ItemContent / ItemTitle / ItemDescription | ComponentProps<"div"> | — | The middle column. The title is truncated with an ellipsis; the description wraps up to 2 lines. |
| ItemActions | ComponentProps<"div"> | — | Buttons or a badge at the end. They sit above the link and stay clickable. |
| ItemLink | ComponentProps<"a"> & { asChild } | — | On the title, makes the whole row clickable; focus outlines the entire row. |