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 Vue, Ark UI does not remember that the specs were open.
Installation
Anatomy
Usage
<Collapsible class="w-full max-w-lg rounded-lg border bg-card text-card-foreground shadow-sm">
<CollapsibleTrigger class="group flex w-full items-center justify-between p-4 font-medium hover:bg-muted/50">
Product Details<ChevronDownIcon aria-hidden="true" class="size-4 transition-transform duration-200 group-aria-expanded:rotate-180" />
</CollapsibleTrigger>
<CollapsibleContent class="border-t">
<dl class="divide-y">
<div v-for="detail in details" class="flex flex-col gap-1 p-4" :key="detail.label">
<dt class="font-medium text-sm">{{ detail.label }}</dt>
<dd class="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.
