Docs › Components › Separator

Shadcn Separator

The shadcn/ui Separator draws a thin dividing line between content or controls, styled with Tailwind CSS v4. Built on accessible primitives, it is decorative by default and supports horizontal and vertical orientation. Separators structure menus, toolbars, and sections across ShadcnStore blocks.

Key features

• Horizontal or vertical orientation via the orientation prop.
• Decorative by default, so it is hidden from assistive tech.
• One line of markup; styles fully with Tailwind.
• No state or dependency.

Installation

npx shadcn@latest add separator

Usage

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

export function Example() {
  return (
    <div>
      <h4 className="font-medium">shadcn/ui</h4>
      <p className="text-muted-foreground text-sm">An open-source UI library.</p>
      <Separator className="my-4" />
      <p className="text-sm">Docs · Source · Blog</p>
    </div>
  )
}

Vertical separator

<div className="flex h-5 items-center gap-3">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
</div>

Props

Prop	Type	Default	Description
orientation	horizontal | vertical	horizontal	Direction of the line.
decorative	boolean	true	Hide from assistive tech when purely visual.

Accessibility

• Keep decorative true when the line is purely visual, so screen readers skip it.
• Set decorative to false only when the separation carries meaning that is not otherwise conveyed.
• Do not use a separator to add spacing; use margin utilities for that.

When to use the Separator

Use a Separator to divide unrelated groups of content or controls: between sections of a menu, items in a toolbar, or blocks in a settings panel. For spacing alone, use margins. For a titled section break, a heading is clearer than a bare line.

Used in these blocks

• App shells: nav and toolbar dividers.
• Footer sections: column dividers.
• Pricing sections: feature-list dividers.

Related components

A Separator divides items in a Dropdown Menu or Card, and sits between Tabs panels or toolbar Buttons.

FAQ

What is the shadcn separator used for?

The Separator draws a thin line to divide content or groups of controls, horizontally or vertically.

How do I make a vertical separator?

Set orientation to vertical and give the separator a height, usually inside a flex row.

Is the separator announced by screen readers?

By default it is decorative and hidden from assistive tech. Set decorative to false only if the divide carries real meaning.

How do I add space instead of a line?

Use Tailwind margin or gap utilities. A Separator is for a visible divide, not for spacing.