Accordion Card 4 - Card Inset Group

Pro

Accordion inside one bordered container where the open item gets a tinted inset background.

Shadcn Accordion Card 4 component

Component data

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

Accordion Card 4 component design & features

All items share a single rounded, bordered container with a small inner padding. There are no dividers; the open item is marked by a muted rounded background inset from the edge.

An inset group suits settings popovers and help panels where the accordion should read as one card.