Separator
A visual divider between content sections.
Installation
$
Usage
import { Separator } from "@/components/ui/separator"Examples
Default
Above
Below
Vertical
Vertical separators need an explicit height from their container (here a flex h-5 row).
DocsComponentsSettings
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the divider. Vertical separators need an explicit height from their container. |
"use client"
import * as React from "react"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "@/registry/lib/utils"
function Separator({
className,
orientation = "horizontal",
...props
}: React.ComponentProps<typeof SeparatorPrimitive>) {
return (
<SeparatorPrimitive
data-slot="separator"
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
)}
{...props}
/>
)
}
export { Separator }