Shadcn.io is not affiliated with official shadcn/ui
Dashed Outline
A React collapsible with border-dashed outline creating subtle visual definition for optional or secondary expandable configuration sections using shadcn/ui
Dashed borders whisper where solid borders shout. This React collapsible uses border-2 border-dashed creating gentle visual definition for optional content. Built with shadcn/ui and Radix UI featuring text-based expand indicator and key-value settings display. The dashed border signals this is supplementary—not core functionality but available if needed. The lighter visual weight compared to solid outlines makes sections feel less imposing—perfect for optional settings, advanced configurations, secondary features, developer options, or anywhere expandable content is useful but not essential to primary workflow.
Dashed Outline preview
Installation
Related Components
Outlined Collapsible
Solid border-2 for prominent sections
Subtle Card Dashed
Dashed card with code display
Standard Collapsible
Minimal collapsible without borders
Info Box Outline
Semantic colored outlined info boxes
Accordion
Multiple expandable sections
FAQ Item
Border-bottom FAQ pattern
FAQ
Was this page helpful?
Sign in to leave feedback.
Numbered FAQ
A React FAQ with numbered badge indicators providing sequential question ordering using shadcn/ui circular number badges
Info Box Outline
A React collapsible with blue informational theme featuring Info icon and semantic color borders for expandable notices using shadcn/ui and dark mode support