Accordion Style 1 - Soft Inset

Pro

Accordion inside a muted tray where the open item lifts onto the background colour.
Shadcn Accordion Style 1 component

Component data

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

Accordion Style 1 component design & features

The accordion sits in a rounded muted container and each item is a rounded inset row. The open item switches to the background colour with a faint shadow.

The soft inset style fits settings sheets and sidebars that already use muted surfaces.