Separator

Those thin lines that split up your content? That's what separators do. They're like the periods of UI design - simple, essential, and you don't notice them until they're missing. Whether you're building breadcrumbs, dividing form sections, or just need some visual breathing room, separators keep things organized.

Basic usage

Clean horizontal and vertical lines:

import { Separator } from "@/components/ui/separator"export default function SeparatorDemo() {  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="max-w-md space-y-4">        <div className="space-y-1">          <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>          <p className="text-muted-foreground text-sm">            An open-source UI component library.          </p>        </div>        <Separator className="my-4" />        <div className="flex h-5 items-center space-x-4 text-sm">          <div>Blog</div>          <Separator orientation="vertical" />          <div>Docs</div>          <Separator orientation="vertical" />          <div>Source</div>        </div>      </div>    </div>  )}

"use client"import * as React from "react"import * as SeparatorPrimitive from "@radix-ui/react-separator"import { cn } from "@/lib/utils"function Separator({  className,  orientation = "horizontal",  decorative = true,  ...props}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {  return (    <SeparatorPrimitive.Root      data-slot="separator"      decorative={decorative}      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 }

Built on Radix UI Separator with proper ARIA semantics. This free open source React component handles both decorative and semantic separation, making your layouts cleaner and more accessible.

npx shadcn@latest add separator

Why separators matter

Good separators are invisible until you need them:

• Visual hierarchy - Break up dense content into digestible chunks
• Navigation clarity - Perfect for breadcrumbs and menu items
• Section divisions - Organize forms, settings, and content areas
• Flexible orientation - Horizontal lines and vertical dividers
• Semantic markup - Screen readers understand the content structure
• Zero bloat - Just a line, styled exactly how you want

Perfect for content organization

Works great anywhere you need visual separation - forms, dashboards, navigation, content areas. The kind of subtle UI element that makes interfaces feel polished and organized.

Drops right into Next.js projects. Full TypeScript support. Styled with Tailwind CSS to match the shadcn design system.

Built on Radix UI

Uses Radix UI Separator under the hood, which handles the accessibility:

• Semantic roles - Screen readers understand content structure
• ARIA compliance - Follows separator role requirements
• Decorative mode - For purely visual separators
• Flexible markup - Works as hr element or div with role
• RTL support - Works with any text direction

API Reference

Separator

The separator line element.

Data attributes:

• [data-orientation]: "horizontal" | "vertical"

Orientation Options

Common Patterns

Design tips for better separators

Keep these in mind when using separators:

• Don't overuse - Too many lines create visual clutter
• Match the context - Subtle for content, more prominent for navigation
• Consider spacing - Margin around separators creates breathing room
• Test contrast - Should be visible but not distracting
• Group logically - Separate related content, not random elements
• Vertical spacing - Horizontal separators need top/bottom margin
• Text overlays - Background color prevents line showing through text