shadcn.io is an independent project built on shadcn/ui
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 Svelte, Ark UI draws the line and not the space around it.
Installation
Anatomy
Usage
<div class="flex w-full max-w-sm flex-col gap-4"><p class="text-sm">Optional extras</p><Separator class="border-t border-dashed bg-transparent data-horizontal:h-0" /><p class="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.
API Reference
Separator
No extra props in this demo. The rest is on the Separator page.
