Separator

A thin line between groups of content.

Code

import { Separator } from "@/components/ui/separator"

<Separator />

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', null,
    h('div', { style: { fontWeight: 600 } }, 'Account settings'), h('div', { className: 'pui-muted' }, 'Profile, security and notifications.'),
    h(P.Separator, { style: { margin: '12px 0' } }),
    h('div', { className: 'pui-row', style: { height: 20 } }, 'Profile', h(P.Separator, { orientation: 'vertical' }), 'Security', h(P.Separator, { orientation: 'vertical' }), 'Notifications')));

Usage

What you provide

orientation: horizontal (default) | vertical. Margins come from the parent layout (my-4, gap-4).
Prefer space (gap-6) over lines. Use a Separator when space alone doesn't separate the groups.

Accessibility

A separator is decorative by default and hidden from screen readers. Structure comes from headings, lists and landmarks, not from lines.
Use decorative={false} only when the line separates groups whose boundary isn't conveyed any other way.

Adapted from Magoo 1.6.0 by Marcelo Sales: Page regions (regioes-pagina). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add separator

<Separator />

Separator

Name	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
Direction of the line.
`decorative`	`boolean`	`true`
Hidden from screen readers. Set `false` only when the line is the only boundary between groups.