Accordion Card 1 - Card

Pro

Accordion with each item as a separate bordered card and a plus indicator that morphs to minus.

Shadcn Accordion Card 1 component

Component data

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

Accordion Card 1 component design & features

Each item sits in its own rounded card with a gap between them, and the open card picks up a muted background. The AccordionIndicator plus collapses its vertical bar to become a minus when the item opens.

Separate cards work well for short FAQ lists in a sidebar or help panel, where each question needs to read as its own unit.