Layout

Separator

Visual or semantic divider between content sections.

Preview

import { Separator } from '@brika/clay/components/separator';

/** Horizontal separator dividing two content blocks. */
export default function SeparatorDefaultDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <p className="text-sm font-medium">Billing</p>
      <Separator />
      <p className="text-muted-foreground text-sm">Manage your subscription and payment methods.</p>
    </div>
  );
}

01 Installation

Install

Pull Separator from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Separator } from "@brika/clay";

tsxGranular1 line

import { Separator } from "@brika/clay/components/separator";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxSeparator.tsx12 lines

import { Separator } from '@brika/clay/components/separator';

/** Horizontal separator dividing two content blocks. */
export default function SeparatorDefaultDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <p className="text-sm font-medium">Billing</p>
      <Separator />
      <p className="text-muted-foreground text-sm">Manage your subscription and payment methods.</p>
    </div>
  );
}

03 Examples

Separator, every way

Labelled

Labelled horizontal separator, useful for sign-in "or continue with" patterns.

GitHub

import { Separator } from '@brika/clay/components/separator';

/** Labelled horizontal separator, useful for sign-in "or continue with" patterns. */
export default function SeparatorLabelledDemo() {
  return (
    <div className="w-64 flex items-center gap-3">
      <Separator className="flex-1" />
      <span className="text-muted-foreground text-xs shrink-0">or continue with</span>
      <Separator className="flex-1" />
    </div>
  );
}

Nav

Vertical separator in a navigation link row.

GitHub

import { Separator } from '@brika/clay/components/separator';

/** Vertical separator in a navigation link row. */
export default function SeparatorNavDemo() {
  return (
    <div className="flex h-5 items-center gap-3">
      <a href="https://example.com" className="text-sm hover:underline">Docs</a>
      <Separator orientation="vertical" />
      <a href="https://example.com" className="text-sm hover:underline">API</a>
      <Separator orientation="vertical" />
      <a href="https://example.com" className="text-sm hover:underline">GitHub</a>
    </div>
  );
}

Vertical

Vertical separator between inline elements.

GitHub

import { Separator } from '@brika/clay/components/separator';

/** Vertical separator between inline elements. */
export default function SeparatorVerticalDemo() {
  return (
    <div className="flex h-5 items-center gap-3">
      <span className="text-muted-foreground text-sm">Jan 2025</span>
      <Separator orientation="vertical" />
      <span className="text-muted-foreground text-sm">v1.4.2</span>
      <Separator orientation="vertical" />
      <span className="text-muted-foreground text-sm">MIT</span>
    </div>
  );
}

04 Accessibility

Accessibility

Renders <hr> with role="separator", meaningful to AT when it divides distinct content sections.
Pass aria-orientation="vertical" when used as a vertical divider between inline items.
Purely decorative separators should carry aria-hidden="true".

05 Tokens 3 theme-overridable

Theme tokens

Every CSS variable Separator reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Separator without touching component code.

Separator tokens

3 tokens

ColorFill, border, and text colors.1

--separator-colorcolorvar(--border)
components.separator.color
Separator line color.

BorderBorder width and style.2

--separator-widthborder-width1px
components.separator.width
Separator line thickness.
--separator-styleborder-stylesolid
components.separator.style
Separator line style (`solid`, `dashed`, `double`).

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.separator, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "separator": {
      "color": "var(--border)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-separator-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Separator. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

No wrapper-specific props, all attributes pass through to the underlying primitive.