Separator

A one pixel rule that divides content, with color token support.

There is no orientation prop: the rule is h-px w-full, so a vertical one is a className away — see Vertical below.

Trivela UI

An open source component library.

Usage

separator-demo.tsx

import { Separator } from 'trivela-ui';

export function Example() {
  return <Separator />;
}

The default: a full width rule for splitting stacked content.

Trivela UI

An open source component library.

Built with Tailwind and design tokens.

Swap the axis with className — w-px h-full instead of h-px w-full.

Docs

Source

Registry

The color token sets the rule at the 200 step — light enough to divide without competing with the content.

neutral

primary

secondary

success

warning

danger

info

Add role=separator when the rule carries meaning, or leave it out when it is purely decorative.

Section one

Section two

Prop	Type	Default	Description
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'neutral'	Color scale for the rule.
className	string	—	Merged with the generated classes via cn().
...props	HTMLAttributes<HTMLDivElement>	—	All native attributes are forwarded to the root element.