Shadcn Separator Components

Shadcn Separator Component

The Shadcn Separator is a thin line that divides content into groups. It looks like the simplest component in any UI kit, but it does a lot of work: it separates menu groups, splits toolbar actions, frames "or continue with" sections on login pages and gives dense layouts a clear rhythm without adding boxes and borders everywhere.

Social login dividers with a Continue with label, vertical dividers between side by side options, fading gradient edges and double lines for section headings are the highlights of this set. Each shadcn separator is styled with shadcn/ui, React and Tailwind CSS on the Radix UI Separator primitive, which has a Base UI equivalent.

What is the Shadcn Separator Component?

A separator renders a one pixel line in the border color from your theme. Set orientation to horizontal (the default) for a full width line between stacked blocks, or to vertical for a line that stretches to the height of a row, such as between links in a footer. By default it is decorative, which hides it from assistive technology because the line is purely visual.

Use a separator when a visual break is enough and the content does not need its own container. When each group needs a background, padding or a title, a Card is the better choice. Inside menus, the dedicated separator parts of Dropdown Menu and Context Menu already handle spacing, and for joined buttons the Button Group has its own separator.

Anatomy of the Shadcn Separator

16 Shadcn Separator Variants

Each separator variant listed here is previewed live at the top of this page, together with its source code and install command.

• Horizontal and vertical: Vertical lines between Blog, Docs and Source links in a row, and horizontal lines between the same items stacked in a column.
• Horizontal with text: A Continue with label with the line on the left, on the right or on both sides, the classic social login divider.
• Vertical with text: A vertical divider with an or label at the top, the bottom or the middle, for side by side login options.
• With icon: A centered icon between two lines, available in horizontal and vertical orientation.
• Gradient border: Lines that fade out toward the edges with Tailwind CSS mask utilities, around an icon or a small uppercase label.
• Double line: Two stacked lines on each side of an uppercase label for a section heading look, with or without faded edges.
• Colored: A separator and label that use a custom accent color instead of the default border color.

How to Install the Shadcn Separator Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a separator variant by its name:

npx shadcn@latest add @shadcnuikit/separator1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Separator Component

Import Separator and place it between blocks. For a vertical line, give the parent a height or use flex so the separator can stretch.

import { Separator } from "@/components/ui/separator"

export function ProfileHeader() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm font-medium">shadcn/ui kit</h4>
        <p className="text-muted-foreground text-sm">
          Components, blocks and templates.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <span>Blog</span>
        <Separator orientation="vertical" />
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Source</span>
      </div>
    </div>
  )
}

Why Use the Shadcn Separator Component

• Lightweight: A single element with a background color, so it adds no layout cost and no extra markup.
• Theme aware: The line uses the border color variable, so it matches cards, inputs and tables in light and dark mode.
• Both orientations: One prop switches between a full width horizontal line and a full height vertical line.
• Correct semantics: Decorative by default, and a real separator role when you turn decorative off for meaningful divisions.
• Easy to style: Color, thickness, spacing and fading edges are regular Tailwind CSS classes.

Common Separator Use Cases

• Login and sign up forms: An or continue with divider between the email form and social login buttons.
• Navigation and footers: Vertical lines between inline links and breadcrumbs.
• Toolbars: Divide groups of icon buttons in editors and dashboard headers.
• Cards and panels: Separate a card header, body and footer without extra borders.
• Section headings: A labelled divider that introduces a new section in long pages or lists.

Customizing the Shadcn Separator

Change the spacing with margin classes like my-4 or mx-2, the color with a bg-* class and the thickness with data-horizontal:h-0.5 or data-vertical:w-0.5, which override the one pixel default for each orientation. For a line that fades out, apply a mask utility such as mask-r-from-50%, as the gradient variants on this page do. Keep colors on theme tokens so the line follows your palette; the free Theme Generator can create one.

For example, a labelled divider with both edges fading out:

<div className="flex items-center gap-2">
  <Separator className="flex-1 mask-l-from-50%" />
  <span className="text-muted-foreground text-xs">or</span>
  <Separator className="flex-1 mask-r-from-50%" />
</div>

Separator Accessibility

Separators are decorative by default, so they render with role="none" and screen readers skip them. That is right for most lines, which only support the visual layout. When the line marks a real boundary between sections, set decorative={false}: the element then gets role="separator" and, when vertical, aria-orientation="vertical".

A separator is not focusable and has no keyboard interaction. Text next to it, such as "or", is still read normally, so keep it short and meaningful. Make sure the line color has enough contrast when it carries meaning, since the default border color is intentionally subtle.

Separator Best Practices

• Use separators sparingly; spacing alone is often enough to group content.
• Keep the default border color so lines stay consistent with the rest of the interface.
• Give vertical separators a parent with a fixed height or flex layout so they are visible.
• Leave decorative on for visual lines and turn it off only for meaningful section breaks.
• Use short labels such as or and Continue with in text dividers.
• Use the separator parts of Dropdown Menu inside menus instead of this component.

Components Related to Separator

Shadcn Separator FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.