Components
Separator
A visual or semantic divider between content.
The Separator primitive wraps Radix Separator — a thin divider between
sections or inline items. It renders horizontally by default; pass
orientation="vertical" for a vertical rule inside a flex row. It is
decorative by default (hidden from assistive tech); set decorative={false}
when the divide carries meaning.
Preview
Radix Primitives
An open-source UI component library.
BlogDocsSource
import { Separator } from '@web/components/ui/separator';export default function SeparatorDemo() { return ( <div className="w-full max-w-sm"> <div className="space-y-1"> <h4 className="text-sm font-medium leading-none">Radix Primitives</h4> <p className="text-sm text-muted-foreground"> An open-source UI component library. </p> </div> <Separator className="my-4" /> <div className="flex h-5 items-center gap-4 text-sm"> <span>Blog</span> <Separator orientation="vertical" /> <span>Docs</span> <Separator orientation="vertical" /> <span>Source</span> </div> </div> );}Import
import { Separator } from "@/components/ui/separator";Props
Separator accepts all props of Radix Separator.Root — orientation
("horizontal" | "vertical", default "horizontal") and decorative
(default true) — plus className.