Shadcn.io is not affiliated with official shadcn/ui
Dashed Separator
A dashed horizontal React separator using a transparent background and border-dashed so the line pattern is visible
Soften a hard rule. This React Separator drops the default fill, paints a dashed top border, and zeros the data-orientation height so the border is the only stroke. Built with shadcn/ui and Radix UI. Perfect for optional sections, draft blocks, and informal groupings.
Dashed Separator preview
Scroll to load preview
Installation
Related Components
Dotted Separator
Dotted line pattern
Horizontal Separator
Solid line separator
Thick Separator
Bold 4px separator
Gradient Separator
Fade effect separator
Card
Card with borders
Section Divider
Separator between sections
FAQ
Was this page helpful?
Sign in to leave feedback.