Question 1

What is a separator?

Accepted Answer

A thin line between groups of content: settings sections, links in a header, the OR between two sign-in options. shadcn.io's Separator draws a one-pixel line in the `border` color, horizontal or vertical. It comes for React on Base UI, React Aria, Ark UI and Radix UI, and for Vue, Svelte and Solid on Ark UI.

Question 2

Are these separator examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

Why use Separator instead of an hr or a border?

Accepted Answer

One component draws both orientations with the same theme color, and it tells assistive tech it's a separator where that matters. A border on a neighbor is fine for a one-off edge that's only visual.

Question 4

When should I use a separator rather than spacing?

Accepted Answer

When the groups are related but distinct and spacing alone is ambiguous, like sections of a long settings form. Skip it where cards or headings already show the structure; a line between every paragraph is noise.

Question 5

How do I put text in a separator, like OR?

Accepted Answer

Make a flex row with `items-center` and `gap-2`: a `Separator` with `flex-1`, the short text, and another `Separator` with `flex-1`. Drop one of the lines to pin the text to the start or the end.

Question 6

How do I make a vertical separator?

Accepted Answer

Set `orientation="vertical"` and place it in a flex row with a height, such as `h-5`. The line stretches to the row's height.

Question 7

How do I make it dashed, dotted, thicker or a gradient?

Accepted Answer

With classes. Dashed and dotted lines use a top border with `border-dashed` or `border-dotted` on a transparent line. A gradient replaces the fill with `bg-linear-to-r from-transparent via-border to-transparent`. A thicker line overrides the height with the component's orientation variant, such as `data-horizontal:h-1` (`[:is(hr)]:h-1` on React Aria, where the horizontal line is an `hr`).

Question 8

How do I install a separator example?

Accepted Answer

Sign in with a free account, open the example and run the install command it shows. It adds the example and the Separator component to your project, for your framework and UI library.

Question 9

How do I set the space around a separator?

Accepted Answer

Put it in a flex column and use `gap`: `gap-1` for dense lists, `gap-4` for most sections, `gap-8` for major breaks. A margin on the separator, such as `my-6`, works when the parent isn't a flex container.

Question 10

Is the line announced by screen readers?

Accepted Answer

It depends on the library. On Radix UI, `decorative` is true by default, so the line is hidden from assistive tech; set it to false when the break means something. On Base UI, React Aria, Ark UI, Vue, Svelte and Solid, the line is exposed as a separator.

Question 11

Which libraries do separator examples use?

Accepted Answer

shadcn.io's Separator, built on Base UI, React Aria, Ark UI or Radix UI in React and on Ark UI in Vue, Svelte and Solid, styled with Tailwind CSS.

Question 12

Are separator examples accessible?

Accepted Answer

The line never takes focus, so keyboard users move straight between links and controls. Let headings carry the structure and use the line as a visual aid, and check that the `border` color contrasts enough with the background.

Question 13

Do the examples work in Vue, Svelte and Solid?

Accepted Answer

Yes. Each example looks the same on every target. Only a few class names differ where the libraries render different elements, such as the `hr` on React Aria.

Separator Examples

Horizontal Separator

In Navigation

List Separator

Menu Separator

Section Divider

Simple Line

Vertical Separator

Inset Separator

Default Spacing

Tight Spacing

Wide Spacing

With Margins

More component examples

Accordion

Aspect Ratio

Card

Collapsible

Scroll Area

Sheet

Skeleton

Slider

Separator examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every separator example. One prompt away.