shadcn.io is not affiliated with official shadcn/ui
Collapsible examples · Card
Card Collapsible for React
A card with a Features header that expands to a list of three features, with a chevron that turns when it opens.
A card whose header hides the details until someone asks for them. The Features header is the trigger, with a chevron that turns over when it opens, and the content is a bulleted list under a top border. Use it for feature lists, order summaries and settings that don't need to be open all the time.
Preview
Installation
FAQ
Which classes make this a card?
Collapsible carries rounded-lg border bg-card text-card-foreground shadow-sm. The trigger is the full-width Features row with p-4, and CollapsibleContent adds border-t px-4 py-3 so the list sits under a divider.
Does the chevron turn when Features opens?
Yes. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-180 on ChevronDownIcon turns it, eased by transition-transform duration-200.
How do I change the height animation?
CollapsibleContent animates its height as it opens and closes, and skips the animation for people who ask for reduced motion. Set disableAnimation on it to open and close at once.
How do I open the card from the keyboard?
Tab reaches the trigger, a button named Features, and Space or Enter toggles the list.
What if I stack several cards like this?
Each Collapsible opens on its own. When several sit in one list and only one should be open at a time, with arrow keys between the headers, use an Accordion.
Related
- Card with Icon Header CollapsibleA card whose header has an icon tile, a
- Nested Card Content CollapsibleA Product Details card that expands to
- Card with Badge CollapsibleA card whose Premium Features header
- Standard Accordion with ChevronA bordered accordion of three questions
- FAQ Item CollapsibleAn FAQ question with a plus that turns
- Simple CollapsibleA ghost Toggle button with a chevron that