Separator

Separates related regions with a 1px horizontal or vertical rule.

Preview

Above the line.

Below it.

In action

Rule

Above the fold.

Below it. One hairline.

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