Layout
Separator
Semantic horizontal or vertical divider. Renders as hr with role=separator.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/separator
Examples
List
Horizontal separators between list items.
- Item 1
- Value 1
- Item 2
- Value 2
- Item 3
- Value 3
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
codefast/ui
الأساس لنظام التصميم الخاص بك
مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.
Vertical
Use orientation='vertical' for a vertical separator.
Blog
Docs
Source
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Separator } from "@codefast/ui/separator";
<Separator /> // horizontal
<Separator orientation="vertical" /> // vertical
API reference
Props for each part of the component. All native element props are also forwarded.
Separator
A semantic divider.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the rule. Give vertical separators a height. |
| decorative | boolean | false | When true, it’s hidden from assistive tech (purely visual). |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Renders with role=separator so structure is announced.
- Set decorative when the line is purely visual and adds no meaning.
- Give vertical separators an explicit height (e.g. h-3).
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use to group and separate related sections.
- Keep separators subtle — they organise, not decorate.
Don’t
- Don’t overuse separators where spacing alone would do.
- Don’t forget a height on vertical separators, or they won’t show.