Separator

A rule between sections, horizontal or vertical, optionally with a label set into it.

src/components/ui/separator.tsx

Install

npx astralyx-ui add separator

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

<Separator />
<Separator label="or" />

Change the props and the source below follows.

Props

orientation

label

decorative

tsx

<Separator label="or" />

tsx

<Separator />

tsx

<Separator label="or" />

tsx

<Separator orientation="vertical" />

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	Direction of the rule. Vertical stretches to its container.
label	ReactNode	—	Text set into the rule, e.g. "or". Horizontal only.
decorative	boolean	true	Hidden from assistive tech, which is right for a purely visual rule. Set false when it separates genuinely distinct regions.