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

Frequently Asked Questions