Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Collapsible - Dashed Outline
A React collapsible with border-dashed outline creating subtle visual definition for optional or secondary expandable configuration sections using shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Collapsible - 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
React Collapsible - Nested Sidebar Items
A React nested sidebar navigation with multi-level collapsible sections using ChevronRight indicators and Circle bullets for hierarchical menu structure with shadcn/ui