Accordion Card 7 - Card with Dashed Border

Pro

Card accordion with dashed borders that turn solid on the open item.

Shadcn Accordion Card 7 component

Component data

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

Accordion Card 7 component design & features

Closed items sit in dashed outlines. Opening one switches its border to solid and adds a faint muted fill.

The dashed-to-solid change works for draft, optional or secondary content where the closed state should feel light.