Separator

Displays a divider to organize content visually or contextually.

separator-demo.tsx
import Link from "next/link"
 
import { Separator } from "@/components/ui/separator"
 
export function SeparatorDemo() {
	return (
		<div>
			<p>
				Based-ui is a component library for building modern web applications –
				forked from{" "}
				<Link href="https://9ui.dev" className="underline underline-offset-2">
					9ui
				</Link>{" "}
				and built off of <Link href="https://base-ui.com">Base UI</Link>.
			</p>
			<Separator className="my-2.5" />
			<div className="flex gap-2.5">
				<p>Website</p>
				<Separator orientation="vertical" />
				<p>Documentation</p>
				<Separator orientation="vertical" />
				<p>Community</p>
			</div>
		</div>
	)
}

Installation

npx shadcn@latest add https://ui.fldr.zip/r/separator.json

Usage

Imports
import { Separator } from "@/components/ui/separator"
Anatomy
<Separator />