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.
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
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