l8componentsSeparator
Horizontal
shadcn/ui
The Foundation for your Design System
A set of beautifully designed components that you can customize, extend, and build on.
Vertical
Blog
Docs
Source
Vertical Menu
SettingsManage preferences
AccountProfile & security
HelpSupport & docs
In List
- Item 1
- Value 1
- Item 2
- Value 2
- Item 3
- Value 3
Official documentation: ui.shadcn.com
Installation
npx shadcn@latest add @l8/separatorSource
"use client"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "cn"
function Separator({
className,
orientation = "horizontal",
...props
}: SeparatorPrimitive.Props) {
return (
<SeparatorPrimitive
data-slot="separator"
orientation={orientation}
className={cn(
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
className
)}
{...props}
/>
)
}
export { Separator }