Separator
Visually or semantically separates content. A thin, accessible divider built on Radix UI.
$cookest-ui add separator
Horizontal
Default orientation — separates content above and below.
Cookest UI
A food-grade design system.
ComponentsTokensExamples
Vertical
Use orientation='vertical' to separate inline content side by side.
BreakfastLunchDinnerSnacks
In Recipe Card
Use Separator to structure recipe metadata cleanly.
Pasta Carbonara
Classic Roman pasta with eggs and guanciale
🕐 25 min🍽 4 servings⚡ 640 kcal
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Direction of the separator line. |
decorative | boolean | true | When true, the separator is hidden from screen readers (purely visual). |
className | string | — | Custom CSS classes to override spacing, colour, or size. |