The Separator component provides a simple line to visually divide content. It’s built on Base UI’s Separator primitive and supports horizontal and vertical orientations.
Installation
npx shadcn@latest add @eo-n/separator
Copy the component code
Copy and paste the Separator component code into your project at components/ui/separator.tsx.components/ui/separator.tsx
import * as React from "react";
import { Separator as SeparatorPrimitive } from "@base-ui/react";
import { cn } from "@/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 };
Update imports
Update the import paths to match your project setup.
Usage
Import the Separator component:
import { Separator } from "@/components/ui/separator";
Component API
Separator
orientation
'horizontal' | 'vertical'
default:"horizontal"
The orientation of the separator.
Additional CSS classes to apply to the separator.
Examples
Horizontal Separator
The default orientation creates a horizontal dividing line:
<div>
<p>Content above</p>
<Separator />
<p>Content below</p>
</div>
Vertical Separator
Use the orientation prop for vertical separation:
<div className="flex h-20 items-center">
<span>Left content</span>
<Separator orientation="vertical" className="mx-4" />
<span>Right content</span>
</div>
Custom Styling
Apply custom styles using the className prop:
<Separator className="my-8 bg-primary" />
<div className="space-y-2">
<MenuItem>Profile</MenuItem>
<MenuItem>Settings</MenuItem>
<Separator className="my-2" />
<MenuItem>Logout</MenuItem>
</div>
Accessibility
The Separator component is built on Base UI’s accessible Separator primitive, which:
- Uses the appropriate ARIA
separator role
- Properly communicates orientation to assistive technologies
- Follows WAI-ARIA best practices for separators
For more details, see the Base UI Separator documentation. 