shadcn.io is an independent project built on shadcn/ui
Four shipping questions in a bordered stack. The chevron sits before the title, and When will my order ship? starts open. The answers line up under the titles.
Use it when the toggle should lead, like a tree. A single question can be a Collapsible. In React, Ark UI opens one question at a time in this demo.
Installation
Anatomy
Usage
<Accordion
className="w-full max-w-md -space-y-px"
defaultValue={["shipping"]}
>
{items.map((item) => (
<AccordionItem
className="overflow-hidden border bg-background first:rounded-t-lg last:rounded-b-lg"
key={item.value}
value={item.value}
>
<AccordionTrigger className="flex-row-reverse gap-3 px-4 py-3 hover:no-underline">
<span className="flex-1 text-start">{item.title}</span>
</AccordionTrigger>
<AccordionContent className="px-4 ps-11 pb-4">
<p className="text-muted-foreground">{item.content}</p>
</AccordionContent>
</AccordionItem>
))}
</Accordion>FAQ
How does the chevron move to the start of the row?
flex-row-reverse on AccordionTrigger places the built-in chevron before the title, with gap-3 between them. The title sits in flex-1 text-start, and the trigger also sets px-4 py-3 and hover:no-underline.
Why does the answer use ps-11?
ps-11 lines the answer up under the title: the trigger padding, the chevron, and gap-3. px-4 on AccordionContent sets the end padding, ps-11 sets the start, and pb-4 pads the bottom.
Why does the shipping question start open?
defaultValue={["shipping"]} opens the shipping question on first render. The string matches that item's value.
How do I let several items stay open at once?
One open item is the default. Add multiple to Accordion to let several stay open, and list every item that should start open in the defaultValue array.
API Reference
Accordion
Sets defaultValue={["shipping"]} and value={item.value}. The rest is on the Accordion page.
