Separator

Variants

Omitted `variant` follows the ambient style: an engraved glinr hairline, a flat plain line, or glass.

import { Separator } from "@glinui/ui"
<Separator />
<Separator variant="plain" />

import { Separator } from "@glinui/ui"


<Separator />
<Separator variant="plain" />
<Separator variant="hairline" />
<Separator variant="dashed" />

Variants

import { Separator } from "@glinui/ui"

export function SeparatorVariantDemo() {
  return (
    <div className="space-y-4">
      <Separator variant="default" />
      <Separator variant="glass" />
      <Separator variant="outline" />
      <Separator variant="ghost" />
    </div>
  )
}

Vertical

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

import { Separator } from "@glinui/ui"

export function SeparatorVerticalDemo() {
  return (
    <div className="flex h-8 items-center gap-4">
      <span className="text-sm">Left</span>
      <Separator orientation="vertical" />
      <span className="text-sm">Right</span>
    </div>
  )
}

Sizes

import { Separator } from "@glinui/ui"

export function SeparatorSizeDemo() {
  return (
    <div className="space-y-4">
      <Separator size="sm" />
      <Separator size="md" />
      <Separator size="lg" />
    </div>
  )
}

Decorative vs Semantic

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

import { Separator } from "@glinui/ui"

export function SeparatorDecorativeDemo() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <p className="text-xs text-neutral-500 dark:text-neutral-400">decorative (default)</p>
        <Separator decorative />
      </div>
      <div className="space-y-2">
        <p className="text-xs text-neutral-500 dark:text-neutral-400">semantic</p>
        <Separator decorative={false} />
      </div>
    </div>
  )
}

Hairline

A 1px divider that fades out at both ends, lit from the top.

import { Separator } from "@glinui/ui"

export function Demo() {
  return <Separator variant="hairline" />
}

ARIA Attributes

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