Accordion Card 5 - Card with Icon Tile

Pro

Card accordion with a leading icon tile that fills when its item opens.

Shadcn Accordion Card 5 component

Component data

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

Accordion Card 5 component design & features

Each card starts with a square icon tile. When the item opens, the tile switches to the foreground colour, and the answer is indented to line up with the title.

Icon tiles help settings and feature lists where each section has a clear category.