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 Svelte, 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">{#each details as detail (detail.label)}<div class="flex flex-col gap-1 p-4"><dt class="font-medium text-sm">{detail.label}</dt><dd class="text-muted-foreground text-sm">{detail.value}</dd></div>{/each}</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.
