Separator

Visually or semantically separates content. Renders as a 1px line in horizontal or vertical orientation.

Built on Radix UI.

✓Horizontal (default) and vertical orientations
✓Decorative mode (default) — renders as role="none" to avoid unnecessary ARIA noise
✓Semantic mode — set decorative={false} to render with role="separator" for meaningful dividers
✓1px bg-border line by default, fully overridable via className
✓Forwards ref to the underlying Radix Separator root

Aether UI

A copy-paste component library.

Components

Accessible, composable, unstyled primitives.

import { Separator }from "@aetherstack/ui"

separator.tsx

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

export function SeparatorDemo() {
  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <p className="text-sm font-medium">Aether UI</p>
        <p className="text-sm text-muted-foreground">A copy-paste component library.</p>
      </div>
      <Separator />
      <div className="space-y-1">
        <p className="text-sm font-medium">Components</p>
        <p className="text-sm text-muted-foreground">Accessible, composable primitives.</p>
      </div>
    </div>
  )
}

Usage

Horizontal

The default orientation. Renders a full-width 1px horizontal line.

Above the separator

Below the separator

Vertical

Set orientation="vertical" and place the separator inside a flex row to divide elements side by side.

Blog

Docs

API

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Controls the axis of the separator line. Use "vertical" inside flex rows.
decorative	boolean	true	When true, the separator is purely visual (role="none"). Set to false for semantic separators that should be announced by screen readers.
className	string	—	Additional class names to override color, thickness, or margins.
...props	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>	—	All Radix Separator Root props are forwarded.

* Required props

Accessibility

→Decorative separators (decorative={true}, the default) render with role="none" — they are invisible to screen readers, which is correct for purely visual dividers.
→Set decorative={false} only when the separator conveys meaningful structure (e.g. separating distinct sections in a navigation landmark). This renders role="separator" and announces the divider.
→Vertical separators inside flex rows do not need explicit height — they inherit the parent's height via h-full.