Accordion Style 2 - Hard Shadow

Pro

Bordered accordion cards with a hard offset shadow that presses in when an item opens.

Shadcn Accordion Style 2 component

Component data

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

Accordion Style 2 component design & features

Each card has a thick foreground border and a solid offset shadow. Opening an item moves the card into its shadow, like a pressed button, and fills the square indicator.

Hard shadows suit playful developer tools and documentation sites with a bold, flat look.