Question 1

What is a shadcn separator?

Accepted Answer

A shadcn separator is the visual divider between sections of related content — a thin horizontal line between settings groups, a vertical line between toolbar sections, an "or" divider between auth options. Built on Radix UI's Separator primitive (which renders semantically with `role="separator"` for orientation-aware screen reader announcements) and styled with shadcn/ui as a 1px line.

Question 2

Are these separator examples free?

Accepted Answer

Yes, every separator example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Why use Separator instead of just <hr> or a border?

Accepted Answer

Three reasons. (1) Semantic correctness — `role="separator"` (with `aria-orientation`) is announced by screen readers more clearly than a bare `

`. (2) Reusability — one Separator component, themed via Tailwind tokens, used everywhere. (3) Vertical support — `

` is horizontal-only; Separator handles vertical too with proper aria-orientation. For one-off horizontal lines, a plain `border-t` is fine; for any reused divider, use Separator.

Question 4

When should I use a separator versus just spacing?

Accepted Answer

Spacing alone if the content groups are already obvious (cards inside a grid, paragraphs of text). Separator when the groups are subtle and need an explicit visual break — settings sections in a long form, sidebar nav groups, footer link clusters. Don't overuse: a separator between every paragraph is noise. Use the lightest visual treatment that conveys the grouping.

Question 5

How do I add text inside a separator ("or", "or continue with")?

Accepted Answer

Use the with-text variant. Render a flex container: separator on the left, text in the middle (`or`), separator on the right. Common pattern: auth pages between social login buttons and email login form. The two separator halves visually connect through the text without breaking the visual line.

Question 6

How do I make a vertical separator (toolbar dividers)?

Accepted Answer

Pass `orientation="vertical"` to Separator and parent it inside a flex-row container with a defined height (the parent's height drives the vertical separator's height). Common in toolbars (`Bold | Italic | Underline`), kbd combos (`⌘ + S`), and sidebar widget rows. Set explicit `h-4` on the separator if the parent's height is variable.

Question 7

How do I style separators (dashed, gradient, colored)?

Accepted Answer

Pass className overrides. `className="border-dashed"` for a dashed line. `className="h-px bg-gradient-to-r from-transparent via-border to-transparent"` for a fading gradient (great for elegant section breaks). `className="bg-primary"` for a brand-colored divider. The styled variant in this gallery shows several treatments — keep them subtle so the separator stays visual chrome, not a feature.

Question 8

How do I install a separator example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/separator/…`, plus the shadcn/ui Separator primitive (and its Radix dependency) if you don't already have it.

Question 9

How do I tune the spacing around the separator?

Accepted Answer

Add `my-4` (vertical) or `mx-2` (horizontal) margins for default breathing room. Adjust per context: dense settings rows want `my-2`, hero-style section breaks want `my-12`. Pair the spacing with the surrounding content's rhythm — separators should feel like punctuation, not interruption.

Question 10

Can I use Separator decoratively (no semantic role)?

Accepted Answer

Yes — pass `decorative` to Separator. Radix sets `aria-hidden="true"` and removes the role so screen readers skip it. Use this when the separator is purely visual and the content groups are obvious from headings / spacing alone (e.g. a thin line under a section heading is decorative — the heading does the semantic work). The default is `decorative=false` (semantic).

Question 11

Which libraries do separator examples depend on?

Accepted Answer

Radix UI Separator (the primitive — semantic role, aria-orientation), shadcn/ui Separator (the styled wrapper generated into your project), Tailwind CSS. React 19 baseline. No state library — separators are pure render. With-text variants add no dependencies; just text + flex layout.

Question 12

Are separator examples accessible for screen reader users?

Accepted Answer

Yes. Radix Separator sets `role="separator"` with `aria-orientation` matching the orientation prop. Screen readers announce "separator" between content groups, helping users sense the structure of the page. For decorative separators, pass `decorative` and Radix removes the semantic role + adds `aria-hidden="true"` so SR users skip it cleanly.

Question 13

Can I use these separator examples with React Server Components?

Accepted Answer

Yes — Separator is pure render with no client state. Works cleanly as a Server Component. With-text and styled variants are also pure render (just CSS). The only client wrapper you'd need is for a Separator that animates its width or color in response to user interaction — rare.

React Separator Examples for shadcn/ui

Browse every separator example

Every separator example. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions

Stop piecing primitives together. Ship full sections.

Pick any block

Own the code

Ship today

Card

Badge

Breadcrumb

Menubar

Navigation Menu

Dropdown Menu

Item

Tabs