Accordion Style 3 - Dashed

Pro

Accordion with chunky dashed borders that turn solid colour when an item opens.
Shadcn Accordion Style 3 component

Component data

ID
accordion/accordion-style-3
Access
pro
Created
Oct 30, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Accordion Style 3 component design & features

Every item has a thick dashed border in a muted tone. The open item's border switches to the foreground colour so it stands out without a fill.

Dashed borders work for draft, form and onboarding contexts where a sketchy, in-progress feel fits.