Rule
Above the fold.
Below it. One hairline.
Separator
Separates related regions with a 1px horizontal or vertical rule.
Preview
In action
When to use
Use it for
- A hairline between groups in a stack or a row.
- orientation="vertical" between inline items.
Not for
- Between every list row; rows carry their own rules.
- As spacing; use the grid.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Separator } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/separator.
2. Vendor the source
npx @noorddev/vlak-cli add separator
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/separator.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Separator } from "@noorddev/vlak-react";
<Separator />
<Separator orientation="vertical" style={{ height: 16 }} />Props
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |
Also accepts HTMLAttributes<HTMLElement>.
Accessibility
- Horizontal renders an <hr>; vertical renders role="separator" with aria-orientation="vertical". Neither takes focus.
Markup
<hr class="rs-sep" />
Classes
.rs-sep.rs-sep-v