Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Dashed Separator for React

A dashed horizontal line between Optional extras and Add-on services, on a transparent track.

Optional extras sits above a dashed horizontal line, and Add-on services sits below it. The line is a dashed stroke, not a solid fill.

Use a dash for an optional or secondary break. Keep a solid line, or a Card boundary, when the break is a real section. In React, Base UI draws the line and not the space around it.

Preview

Preview width

Optional extras

Add-on services

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Separator anatomy: horizontal, vertical

Usage

<div className="flex w-full max-w-sm flex-col gap-4">
  <p className="text-sm">Optional extras</p>
  <Separator className="border-t border-dashed bg-transparent data-horizontal:h-0" />
  <p className="text-sm">Add-on services</p>
</div>

FAQ

When should I use a dashed separator?

For informal or optional boundaries: draft content, suggested groupings, secondary breaks. Keep a solid line for the structural sections of a page.

Why border-dashed instead of a background?

A background can't be dashed. The example clears the fill with bg-transparent, adds border-t border-dashed and sets the line's height to zero, so you don't get a one-pixel box plus a one-pixel border. The height uses the component's orientation variant, data-horizontal:h-0, so it replaces the default.

Can I control dash length?

Not with border-dashed: the browser draws the pattern. Use an SVG or a repeating gradient background if you need a custom dash.

How do I change the dash color?

With border color utilities such as border-primary or border-muted-foreground/40: the color lives on the border, not the background.

Are dashed separators as accessible as solid ones?

They're exposed the same way, but they're harder to see. If the line is the only cue for a boundary, make sure the dash color has at least 3:1 contrast against the page.

Do dashed separators print well?

They print, but can come out faint. Switch to a solid border in a print stylesheet for anything that must survive on paper.

API Reference

Separator

No extra props in this demo. The rest is on the Separator page.

All 20 separator examples