Separator
Horizontal or vertical rule built on the Base UI Separator primitive.
Preview
Design tokens
Extracted colour, typography and spacing.
Component library
12 components, token-contracted and brand-ready.
Installation
bash
npx shadcn@latest add @layout/separatorUsage
tsx
import { Separator } from "@/components/ui/separator"Examples
Vertical
DocsComponentsThemes
Semantic (decorative=false)
Section A
Section B
Guidelines for AI agents
Divide groups of related content. Decorative by default; pass decorative={false} when it conveys structure to assistive tech.
Never
- Neverbuild dividers from bordered empty divs; use Separator so the token and semantics stay consistent
Tokens consumed
--layout-border