Components

Separator / Divider

A quiet boundary, horizontal or vertical.

Preview

Account

Profile

Settings

Usage

import { Separator } from '@fwenthehunter/friendly-ui';

<Separator />
<div className="flex items-center gap-4">
  <span>Profile</span>
  <Separator orientation="vertical" />
  <span>Settings</span>
</div>
<Separator decorative={false} />

Separator and Divider are aliases. Decorative by default, so screen readers ignore the line. Set decorative=false for a semantic separator. A vertical separator stretches in a flex parent; give it an explicit height when using it elsewhere.

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.

Prop	Type	Default
`orientation`	horizontal \| vertical	horizontal
`decorative`	boolean	true