Separator

"use client";import { Separator } from "@/registry/okibi/ui/separator";export default function SeparatorDemo() {  return (    <div className="w-72 max-w-full space-y-4">      <p className="text-sm text-muted-foreground">        Primary uplink stable. Carrier locked to grid reference.      </p>      <Separator label="SEC" />      <p className="text-sm text-muted-foreground">        Secondary channel armed. Standing by for handshake.      </p>    </div>  );}

Installation

npm install @radix-ui/react-separator

Usage

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

<Separator />
<Separator orientation="vertical" />

Examples

Pulse

Set pulse to energize the rule with a live signal current — a periodic pulse travels along its length (horizontal or vertical), so a section break reads as a charged bus under load. Reduced motion freezes it back to a plain hairline.

import { Separator } from "@/registry/okibi/ui/separator";export default function SeparatorPulseDemo() {  return (    <div className="flex w-full max-w-md flex-col gap-6">      <Separator pulse />      <Separator pulse label="CHANNEL // 0x4A2" />    </div>  );}

API Reference

Separator

Accessibility

• Wraps Radix Separator; decorative defaults to true, so by default the rule exposes no role and is skipped by assistive tech.
• Set decorative={false} to announce it as a real separator — every branch (plain, labelled, pulsed) now honors the flag and emits role='separator' only then.
• A non-decorative vertical rule reports aria-orientation='vertical'; horizontal is the implicit default and needs no attribute.
• The labelled flanks and the traveling pulse rail are decorative chrome — each is aria-hidden — so only the mono micro-label text is read.
• The pulse current is CSS-keyframe motion, neutralized by the global reduced-motion rule, so it freezes to a static hairline when motion is reduced.

Guidelines

Do

• Default to decorative — most rules are visual grouping, and a silent divider keeps the reading order clean.
• Reach for decorative={false} only when the line is the sole cue separating two distinct regions.
• Use label for HUD-style section breaks; keep the micro-label to a short uppercase token.

Don't

• Do not expect label on a vertical separator — the labelled branch only renders for orientation='horizontal'.
• Do not lean on pulse to carry meaning; it is purely decorative and disappears under reduced motion.
• Do not stack separators to fake spacing — use layout gap or padding instead.