Components · v0.1 · Stable
Separator
A one-pixel semantic divider — the quietest primitive in the system. Use it to segment ideas, not to decorate them.
Example
A horizontal divider between two blocks of text.
Account
Billing
Installation
Install and import.
tsx
npx @novix-ui/cli add separatortsx
import { Separator } from "@novix-ui/react";When to use
Use it for
- Menu groupings
- Setting sections inside a Card
- Toolbars — grouping related IconButtons
Skip it when
- Whitespace already communicates the group boundary
- Between Cards — the elevation is already the separator
Orientation
HomeDocsBlog
API
Prop
Type
Default
Description
orientation"horizontal" | "vertical""horizontal"Layout direction.decorativebooleantrueWhen true, hides from assistive tech (recommended when adjacent content already implies a boundary).
Accessibility
Design guidelines
Prefer whitespace first
If a 24px gap already tells the story, the line is noise.
Vertical needs a container height
Separators inherit height from the flex row. Give the row a fixed height (e.g. h-6).
Never full opacity
The line lives at 6–10% of the foreground. Nova ships this pre-tuned.
Common mistakes
- Using a Separator inside every list — density becomes a picket fence. Group in threes.
- Rendering vertical without height. It collapses to a dot.