caliper uidocs
DemoSign inGet Pro

Separator

Free

A 1px divider in the toolbar's own hairline, with a labelled form for “or continue with email”. Decoration unless you say otherwise.

Installs components/ui/separator.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/separator.json

Billing

Members

or continue with email

When to use #

Use it for

  • Between rows of a list, groups in a toolbar or areas of a panel.
  • A form that offers two ways in.

Skip it when

  • Spacing; use gap. A line every few pixels turns a page into a ledger.

Decisions #

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Decorative by default
A divider hidden from assistive technology says nothing a heading or list would not. Pass decorative={false} only when it divides regions people move between.

Styling

One hairline, two weights
The default is the border colour every surface uses; strong is for areas that are unrelated. There is no thicker line.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/separator.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

export function SeparatorDemo() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="inline-flex items-center gap-1.5 justify-self-start rounded-surface border border-border bg-elevated p-1" role="toolbar" aria-label="Draft">
        <Button variant="ghost" size="sm">Draft</Button>
        <Separator orientation="vertical" />
        <Button variant="ghost" size="sm">History</Button>
        <Separator orientation="vertical" />
        <Button size="sm">Share</Button>
      </div>
      <div className="overflow-hidden rounded-surface border border-border bg-elevated py-3">
        <p className="px-4 text-sm">Billing</p>
        <Separator inset className="my-3" />
        <p className="px-4 text-sm">Members</p>
      </div>
      <Separator label="or continue with email" />
      <Field label="Email">{(control) => <Input {...control} type="email" placeholder="you@halden.app" />}</Field>
    </div>
  );
}

API reference #

Separator

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"
decorativebooleantrueDecoration only: hidden from assistive technology. Set false when the line divides regions people navigate between.
strongboolean—A darker line, for dividing unrelated areas.
insetboolean—Indents a horizontal line from both edges, to sit between rows of a list.
labelReactNode—Text in the line, such as "or continue with email". Horizontal only.

Accessibility #

It exposes separator semantics, with aria-orientation kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.