Primitive / Atomstable

Separator

Visual divider for grouping content with orientation support.

@glinui/uiComponent: separator

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add separator

Usage$

Drop a Separator between content sections to create visual hierarchy. Horizontal is the default; use orientation="vertical" inside flex containers.

Section A

Section B

TSX

1import { Separator } from "@glinui/ui"
2
3export function SeparatorBasicDemo() {
4return (
5  <div className="space-y-3">
6    <p className="text-sm">Section A</p>
7    <Separator />
8    <p className="text-sm">Section B</p>
9  </div>
10)
11}

Examples$

Variants$

TSX

1import { Separator } from "@glinui/ui"
2
3export function SeparatorVariantDemo() {
4return (
5  <div className="space-y-4">
6    <Separator variant="default" />
7    <Separator variant="glass" />
8    <Separator variant="outline" />
9    <Separator variant="ghost" />
10  </div>
11)
12}

Vertical$

Render inside a flex container with an explicit height to display a vertical divider.

LeftRight

TSX

1import { Separator } from "@glinui/ui"
2
3export function SeparatorVerticalDemo() {
4return (
5  <div className="flex h-8 items-center gap-4">
6    <span className="text-sm">Left</span>
7    <Separator orientation="vertical" />
8    <span className="text-sm">Right</span>
9  </div>
10)
11}

Sizes$

TSX

1import { Separator } from "@glinui/ui"
2
3export function SeparatorSizeDemo() {
4return (
5  <div className="space-y-4">
6    <Separator size="sm" />
7    <Separator size="md" />
8    <Separator size="lg" />
9  </div>
10)
11}

Decorative vs Semantic$

By default separators are decorative (aria-hidden). Set decorative={false} for separators that carry structural meaning for assistive technology.

decorative (default)

semantic

TSX

1import { Separator } from "@glinui/ui"
2
3export function SeparatorDecorativeDemo() {
4return (
5  <div className="space-y-4">
6    <div className="space-y-2">
7      <p className="text-xs text-neutral-500 dark:text-neutral-400">decorative (default)</p>
8      <Separator decorative />
9    </div>
10    <div className="space-y-2">
11      <p className="text-xs text-neutral-500 dark:text-neutral-400">semantic</p>
12      <Separator decorative={false} />
13    </div>
14  </div>
15)
16}

Accessibility$

Decorative separators default to aria-hidden="true".
Use decorative={false} for separators that convey structural meaning.
Use orientation="vertical" for column-like content splits.

Reduced Motion$

Separator is a static element and does not use motion.

API Reference$

Prop	Type	Required	Default	Description
`decorative`	`boolean`	No	`true`	When true the element is purely visual (default). When false, role="separator" is applied.
`icon`	`React.ReactNode`	No	`-`	Icon node rendered centred on the separator line. Overrides label when both are provided.
`label`	`string`	No	`-`	Text label rendered centred on the separator line.
`orientation`	`"horizontal" \| "vertical"`	No	`"horizontal"`	Variant option from lineVariants.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from lineVariants.
`variant`	`"default" \| "glass" \| "gradient" \| "dashed" \| "dotted" \| "outline" \| "ghost"`	No	`"default"`	Variant option from lineVariants.

Source$

TSX

1import { Separator } from "@glinui/ui"

packages/ui/src/components/separator.tsx

packages/ui/src/tests/separator.test.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/separator.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

SeparatorProps

`SeparatorProps`

Prop	Type	Required	Default	Description
`decorative`	`boolean`	No	`true`	When true the element is purely visual (default). When false, role="separator" is applied.
`icon`	`React.ReactNode`	No	`-`	Icon node rendered centred on the separator line. Overrides label when both are provided.
`label`	`string`	No	`-`	Text label rendered centred on the separator line.
`orientation`	`"horizontal" \| "vertical"`	No	`"horizontal"`	Variant option from lineVariants.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from lineVariants.
`variant`	`"default" \| "glass" \| "gradient" \| "dashed" \| "dotted" \| "outline" \| "ghost"`	No	`"default"`	Variant option from lineVariants.