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

Default

Section A

Section B

TSX

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

Gradient

Section A

Section B

TSX

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

With Label

Continue with provider

TSX

1import { Separator } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-4">
6      <p className="text-sm">Login with email</p>
7      <Separator label="OR" />
8      <p className="text-sm">Continue with provider</p>
9    </div>
10  )
11}

Dashed

Section A

Section B

TSX

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

Dotted

Section A

Section B

TSX

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

Accessibility

Uses `role="separator"` when not decorative.
Set `decorative={false}` for semantic separators.

ARIA Attributes

`role="separator"` when not decorative
`aria-orientation`
`aria-hidden` when decorative

Reduced Motion

No animation dependencies.

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "gradient" \| "dashed" \| "dotted" \| "outline" \| "ghost"`	No	`default`	Visual treatment.
`orientation`	`"horizontal" \| "vertical"`	No	`horizontal`	Divider direction.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Thickness.
`label`	`string`	No	`-`	Centered text label displayed on the separator.
`icon`	`React.ReactNode`	No	`-`	Centered icon displayed on the separator.
`decorative`	`boolean`	No	`true`	When true, sets aria-hidden.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Separator } from "@glinui/ui"

Source Files

separator.tsx

separator.test.tsxtest

Dependencies

@glinui/ui

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.