Shadcn Separator
React separator for menus, forms, and list rows. Built with TypeScript and Tailwind CSS for Next.js using Base UI — horizontal or vertical, decorative by default.
A separator is a 1px rule between two blocks. Default is horizontal; orientation="vertical" stands it up in a row. Use it between form groups, menu items, and list rows — not as a substitute for a heading.
Looking for a neobrutalism version for shadcn?
Same separator, thicker borders. The NeoBrutalism separator is the kit if you want that look.
Usage
import { Separator } from "@/components/ui/separator"<Separator />orientation="vertical" for a row. Leave decorative on unless the line itself is the structure.
Composition
Vertical
orientation="vertical" in a row that already has a height. The primitive is h-full when vertical, so the parent owns the size.
Menu
Vertical rules between labeled items. Hide the last pair on small screens if the row wraps.
List
A horizontal rule between each key-value row.
RTL
Wrap with DirectionProvider and dir="rtl". The line is the same; the copy flips.
API
Prop
Type
Notes
Don't fight the data-orientation height
The primitive sets data-[orientation=horizontal]:h-px. A bare h-1 loses. Override with the same variant, or put the height on the parent — the vertical demo uses h-5 on the row, not on the line.
decorative defaults to true, so screen readers skip it. Prefer a heading when the break is a real section.
With other components
Crumbs in a trail
Dropdown MenuDivide item groups
Button GroupSplit button rule
CardHeader from the body
FieldBreak between groups
ItemRows in a list
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Select
React select for theme, status, and timezone pickers. Built with TypeScript and Tailwind CSS for Next.js using Base UI — grouped options and typeahead search.
Sheet
React sheet for settings, filters, and side panels. Built with TypeScript and Tailwind CSS for Next.js using Base UI — slides from any edge with a focus trap.