shadcn.io is an independent project built on shadcn/ui
A Product Details header on a card. It opens to Dimensions 24 x 18 x 12 in, Weight 5.2 lbs, and Material Premium plastic.
Use it on a product page when specs can stay closed. If shoppers need them at once, keep the rows in a Card. In React, Ark UI does not remember that the specs were open.
Installation
Anatomy
Usage
<Collapsible className="w-full max-w-lg rounded-lg border bg-card text-card-foreground shadow-sm">
<CollapsibleTrigger className="group flex w-full items-center justify-between p-4 font-medium hover:bg-muted/50">
Product Details
<ChevronDownIcon
aria-hidden="true"
className="size-4 transition-transform duration-200 group-aria-expanded:rotate-180"
/>
</CollapsibleTrigger>
<CollapsibleContent className="border-t">
<dl className="divide-y">
{details.map((detail) => (
<div className="flex flex-col gap-1 p-4" key={detail.label}>
<dt className="font-medium text-sm">{detail.label}</dt>
<dd className="text-muted-foreground text-sm">{detail.value}</dd>
</div>
))}
</dl>
</CollapsibleContent>
</Collapsible>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.
API Reference
Collapsible
No extra props in this demo. The rest is on the Collapsible page.
