Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Separator examples · Styled

Dashed Separator for React

A dashed horizontal separator drawn with a top border on a transparent line.

Framework
UI library

Soften a hard rule. This React Separator drops its fill with bg-transparent, draws a dashed top border and sets its own height to zero, so the border is the only stroke. Use it for optional sections, draft blocks and informal groupings.

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

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.

All 20 separator examples