shadcn.io is not affiliated with official shadcn/ui
Collapsible examples · Card
Nested Card Content Collapsible for React
A Product Details card that expands to its dimensions, weight and material in divided rows.
A card that keeps product specifications out of the way until they're wanted. The Product Details header opens to three rows, Dimensions, Weight and Material, divided by lines and written as a description list. Use it on product pages, order details and spec sheets.
Preview
Installation
FAQ
Where is the chevron on Product Details?
At the end of the header row: the trigger is justify-between, and the chevron turns over while the card is open. 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 are Dimensions, Weight, and Material separated?
They are a dl with divide-y, which draws a line between rows. Each row is a div with p-4 holding a dt for the label and a dd for the muted value.
How do I add another spec?
Add an entry to the details list at the top of the file. Each entry has a label and a value, and the list renders one row per entry.
Related
- Card CollapsibleA card with a Features header that
- Card with Icon Header CollapsibleA card whose header has an icon tile, a
- Card with Badge CollapsibleA card whose Premium Features header
- Standard Accordion with ChevronA bordered accordion of three questions
- With Description CheckboxA checkbox with a label and a line of
- FAQ Item CollapsibleAn FAQ question with a plus that turns