Separator
A visual divider between content sections.
Installation
$
Usage
import { Separator } from "@/components/ui/separator"Examples
Default
A divider between two blocks of content. It ships no margin, so the space around it comes from the class you give it or from the container's own gap.
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"
// @use-when a divider between items inside a component.
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 }