Separator

Study details

CT Chest, 14 series

Images

Report

History

import { Separator } from '@/registry/qure/ui/separator'export default function SeparatorDemo() {  return (    <div className="w-full max-w-xs">      <div className="text-sm font-semibold">Study details</div>      <p className="text-sm text-muted-foreground">CT Chest, 14 series</p>      <Separator className="my-4" />      <div className="flex h-5 items-center gap-3 text-sm">        Images <Separator orientation="vertical" /> Report <Separator orientation="vertical" /> History      </div>    </div>  )}

Installation

npx shadcn@latest add https://qure-ui.qure.ai/r/separator.json

Usage

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

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

A separator is a line and nothing else — 1px of --border-base-default, no margin of its own. Space it from the parent (my-4, or the flex gap) so the same component can sit tight between toolbar buttons and loose between page sections.

Reach for it when two groups of content are genuinely different in kind. When they are the same kind repeated — rows of a worklist, items of a list — whitespace is usually enough, and a rule between every pair turns a list into a ledger.

Orientation

Study details

CT Chest, 14 series

Images

Report

History

import { Separator } from '@/registry/qure/ui/separator'export default function SeparatorDemo() {  return (    <div className="w-full max-w-xs">      <div className="text-sm font-semibold">Study details</div>      <p className="text-sm text-muted-foreground">CT Chest, 14 series</p>      <Separator className="my-4" />      <div className="flex h-5 items-center gap-3 text-sm">        Images <Separator orientation="vertical" /> Report <Separator orientation="vertical" /> History      </div>    </div>  )}

Horizontal fills its parent's width. Vertical takes its height from the row it sits in, so the parent needs a height or items-stretch; a vertical separator in an items-center row with no height collapses to nothing, which is the single most common way this component appears not to work.

Between sections of a card

ACC-482913

ModalityCT

Body partChest

Series14

Prior12 Mar 2025

import { Card, CardContent, CardHeader, CardTitle } from '@/registry/qure/ui/card'import { Separator } from '@/registry/qure/ui/separator'const rows = [  ['Modality', 'CT'],  ['Body part', 'Chest'],  ['Series', '14'],  ['Prior', '12 Mar 2025'],]export default function SeparatorCard() {  return (    <Card className="w-full max-w-sm">      <CardHeader>        <CardTitle>ACC-482913</CardTitle>      </CardHeader>      <CardContent className="grid gap-3 text-sm">        {rows.map(([label, value], i) => (          <div key={label} className="grid gap-3">            {i > 0 ? <Separator /> : null}            <div className="flex justify-between">              <span className="text-muted-foreground">{label}</span>              <span>{value}</span>            </div>          </div>        ))}      </CardContent>    </Card>  )}

Metadata rows where each line is a different fact. The separators sit inside CardContent and therefore stop at its padding — for rules that reach the card's edges, drop the padded parts and put the padding on each row instead, as the Accordion in a card does.

import { Button } from '@/registry/qure/ui/button'import { Separator } from '@/registry/qure/ui/separator'export default function SeparatorToolbar() {  return (    <div className="flex h-9 items-center gap-2 rounded-lg border p-1">      <Button size="xs" variant="ghost">Window</Button>      <Button size="xs" variant="ghost">Zoom</Button>      <Separator orientation="vertical" className="my-1" />      <Button size="xs" variant="ghost">Measure</Button>      <Button size="xs" variant="ghost">Annotate</Button>      <Separator orientation="vertical" className="my-1" />      <Button size="xs" variant="ghost">Compare prior</Button>    </div>  )}

Vertical rules grouping a viewer's tools by what they do. Two groups of three read faster than six buttons in a line, and the rule costs nothing to scan past.

A toolbar wants role="toolbar" and roving focus, which a bare flex row does not give you. This example is about the separator; use the Toolbar component for the real thing.

Decorative by default

Base UI marks it aria-hidden unless you say otherwise, which is right nearly always — a line between two paragraphs is not information, and announcing it is one more thing to page past. When the divide carries meaning, such as between two groups in a menu, make it announced:

<Separator aria-hidden={false} role="separator" />

API Reference

Everything Base UI's Separator accepts. We set one default:

Prop

Type