Separator

When to use

A separator draws the line between groups of content or controls: sections inside a card, entries in a menu, inline metadata in a toolbar. Use it when the boundary is visual only. When the divider needs a label, use Marker; when blocks just need air between them, use margin rather than a line.

Platform notes

It paints bg-border, the same --border token as card edges and table rules, so a separator inside a bordered surface aligns with the surface exactly. decorative defaults to true, which hides it from assistive tech: pass decorative={false} only when the line truly divides two independent regions, and prefer a heading or a section when the split is structural. Vertical orientation is a 1px full-height element, so it collapses to nothing unless the parent resolves a height (the demo wraps it in flex h-5 items-center). Do not use a separator as a stand-in for elevation: elevation here is border-border plus bg-card, and extra rules stacked inside a dense screen only add noise.

Install

npx shadcn@latest add separator

Code

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

export function SeparatorDemo() {
  return (
    <div className="max-w-sm">
      <div className="space-y-1">
        <h4 className="text-sm font-medium">Platform Foundations</h4>
        <p className="text-sm text-muted-foreground">Theme, conventions, docs, showcase.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <span>Frontend</span>
        <Separator orientation="vertical" />
        <span>Backend</span>
        <Separator orientation="vertical" />
        <span>Docs</span>
      </div>
    </div>
  );
}

Full API

ui.shadcn.com/docs/components/separator