Ravox KitBasics
Separator
The thin line between groups, horizontal or vertical, solid or dashed. With text inside, the label sits in the middle ("or", "Today") or at the start of the line.
ou com e-mail
Settings
Toggles
Examples
Toolbar
Days in a conversation
O pedido 4821 já saiu?
Hoje
Saiu às 9h, chega amanhã.
Section title
Conta
thiago@ravoxlabs.com
Zona de perigo
Inline metadata
v2.4.0Atualizado há 3 diasMIT
Installation
The command creates components/ui/separator.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add separatorProps
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | When vertical, stretches to the parent's height (use it in a flex container). |
| children | ReactNode | — | Label in the middle of the line. Still read by screen readers. |
| align | "start" | "center" | "end" | "center" | Where the label sits on the line. |
| dashed | boolean | false | Dashed line. |
| decorative | boolean | true | Visual only. With false, it becomes role="separator" with aria-orientation (a text label becomes its name). |
| ...props | ComponentProps<"div"> | — | Everything a <div> accepts. |