components / display
Separator
Separate content with a horizontal or vertical line.
284 B gzip runs on the server · 0 JS
cd/ui
lightweight components on Base UI.
docscomponentsgithub
separator-default.tsx
import { Separator } from "@/components/ui/separator";
export default function SeparatorDefault() {
return (
<div className="w-full max-w-xs text-sm">
<p className="font-medium">cd/ui</p>
<p className="text-muted-foreground">lightweight components on Base UI.</p>
<Separator className="my-4" />
<div className="flex h-5 items-center gap-4 text-muted-foreground">
<span>docs</span>
<Separator orientation="vertical" />
<span>components</span>
<Separator orientation="vertical" />
<span>github</span>
</div>
</div>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/separator.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Separator } from "@/components/ui/separator"
<Separator />API
Separator
1px line. Server component.
| prop | type | default |
|---|---|---|
orientationLine direction. | "horizontal" | "vertical" | "horizontal" |
decorativeIf | boolean | true |
classNameExtra classes, merged with | string | - |