Separator

Desyne

Accessible React components with shadcn tokens.

Docs

Components

Templates

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

export default function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm">
      <div className="flex flex-col gap-1">
        <h4 className="font-medium text-sm">Desyne</h4>
        <p className="text-muted-foreground text-sm">
          Accessible React components with shadcn tokens.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Components</span>
        <Separator orientation="vertical" />
        <span>Templates</span>
      </div>
    </div>
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/separator

The CLI installs dependencies and any other components this one uses.

Usage

tsx

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

tsx

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

When to use

Separator: to divide groups of content that belong to the same surface, such as sections of a form, groups in a toolbar or items in a breadcrumb-like row.
Spacing alone is often enough. Reach for a separator when whitespace doesn't make the grouping clear.
Card: when the groups need their own surface. CardHeader has its own separator prop.
Inside menus, use MenuSeparator; between list rows, use ItemSeparator.

Anatomy

A separator is a single element. The labelled version draws the two lines with ::before and ::after.

tsx

<Separator />                 {/* <hr> */}
<Separator orientation="vertical" />   {/* <div role="separator"> */}
<Separator label="or" />      {/* line · label · line */}

Part	Renders	Notes
`Separator` (horizontal)	`<hr>`	1px tall, full width.
`Separator` (vertical)	`<div role="separator">`	1px wide, stretches to the parent's height (`self-stretch`). Has `aria-orientation="vertical"`.
`Separator` with `label`	`<div role="separator">`	Horizontal only. A flex row with the label between two lines.

Examples

Vertical

orientation="vertical" stretches to the height of a flex parent. Use it between groups in toolbars, nav rows and stat strips; add margin with mx-* and trim the height with my-*.

import { BoldIcon, ItalicIcon, LinkIcon, ListIcon } from "lucide-react";
import { Toolbar } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";

export default function SeparatorVertical() {
  return (
    <Toolbar
      aria-label="Formatting"
      className="flex h-9 items-center gap-1 rounded-lg border bg-card px-1"
    >
      <Button variant="ghost" size="icon-sm" aria-label="Bold">
        <BoldIcon />
      </Button>
      <Button variant="ghost" size="icon-sm" aria-label="Italic">
        <ItalicIcon />
      </Button>
      <Separator orientation="vertical" className="mx-1 my-2" />
      <Button variant="ghost" size="icon-sm" aria-label="Bulleted list">
        <ListIcon />
      </Button>
      <Separator orientation="vertical" className="mx-1 my-2" />
      <Button variant="ghost" size="icon-sm" aria-label="Insert link">
        <LinkIcon />
      </Button>
    </Toolbar>
  );
}

label puts text in the line, for "or" dividers, dates in a feed or section titles. labelPosition moves it to the start, center (default) or end; the short side is 16px long. Labels only apply to horizontal separators.

Start

or continue with

End

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

export default function SeparatorLabel() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Separator label="Start" labelPosition="start" />
      <Separator label="or continue with" />
      <Separator label="End" labelPosition="end" />
    </div>
  );
}

Dashed

variant="dashed" draws a dashed line in either orientation, with or without a label. It reads as lighter than a solid rule, which suits drafts, timelines and optional sections.

Today

Draft

Review

Published

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

export default function SeparatorDashed() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Separator variant="dashed" />
      <Separator variant="dashed" label="Today" />
      <div className="flex h-10 items-center justify-center gap-4 text-muted-foreground text-sm">
        <span>Draft</span>
        <Separator orientation="vertical" variant="dashed" />
        <span>Review</span>
        <Separator orientation="vertical" variant="dashed" />
        <span>Published</span>
      </div>
    </div>
  );
}

Recipes

The classic "or continue with" divider between social sign-in buttons and an email form.

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { TextField } from "@/components/ui/text-field";

export default function SeparatorRecipeSignIn() {
  return (
    <form
      className="flex w-full max-w-sm flex-col gap-4"
      onSubmit={(e) => e.preventDefault()}
    >
      <div className="grid grid-cols-2 gap-2">
        <Button variant="outline">GitHub</Button>
        <Button variant="outline">Google</Button>
      </div>
      <Separator label="or continue with email" />
      <TextField label="Email" type="email" placeholder="you@company.com" />
      <Button type="submit" className="w-full">
        Send magic link
      </Button>
    </form>
  );
}

Stat strip

Vertical separators between equal-width stats. They stretch to the row's height automatically.

Requests1.2M

Error rate0.04%

p95 latency182 ms

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

const stats = [
  { label: "Requests", value: "1.2M" },
  { label: "Error rate", value: "0.04%" },
  { label: "p95 latency", value: "182 ms" },
];

export default function SeparatorRecipeStats() {
  return (
    <div className="flex w-full max-w-md items-stretch rounded-xl border bg-card py-4">
      {stats.map((s, i) => (
        <div key={s.label} className="contents">
          {i > 0 && <Separator orientation="vertical" />}
          <div className="flex flex-1 flex-col items-center gap-1">
            <span className="text-muted-foreground text-xs">{s.label}</span>
            <span className="font-semibold text-xl tabular-nums">
              {s.value}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}

Accessibility

A horizontal separator renders a native <hr>, which screen readers announce as a separator.
A vertical separator renders a <div> with role="separator" and aria-orientation="vertical", as <hr> is always horizontal.
A labelled separator is a <div role="separator">. Screen readers generally don't read the content of a separator, so don't put essential information only in the label; "or" and dates are fine because the surrounding content carries the meaning.
Separators aren't focusable. Inside a React Aria Toolbar, arrow-key navigation skips them.
React Aria only forwards a filtered set of DOM props (ids, aria-label / aria-labelledby / aria-describedby, data-* and global attributes), so aria-hidden isn't passed through on an unlabelled separator (a labelled one forwards every prop). If a line is purely decorative, draw it with a border-* class on a neighboring element instead.

Styling

Data attributes

Attribute	Present when
`data-slot="separator"`	Always
`data-orientation`	`"horizontal"` or `"vertical"`. Always `"horizontal"` on labelled separators.

Customizing

The line color is bg-border. Change it with a bg-* class, e.g. bg-foreground/20.
Change thickness with h-* (horizontal) or w-* (vertical).
For labelled separators, className goes on the flex row: change the label's text style there (text-sm text-foreground), or the line color with before:bg-* after:bg-*.

API Reference

Separator

Prop

Type

Without a label, also accepts the props of React Aria's Separator: aria-label, aria-labelledby, aria-describedby, data-* attributes, dir, lang, hidden and mouse, pointer and touch event handlers. With a label, the separator is a plain <div role="separator"> and every other prop (id, style, aria-*, data-*, event handlers, and so on) is forwarded to it unfiltered; only elementType, slot and render are dropped.

Card: CardHeader has a built-in inset separator.
Menu: MenuSeparator between groups of menu items.
Item: ItemSeparator between list rows.
Toggle Button Group: grouped toolbar controls.