shadcn.io is an independent project built on shadcn/ui
A heading asks how to get started, with a plus that turns into a cross when the answer opens. A bottom border separates this row from the next.
Stack a few for a light FAQ. When only one answer should be open, use an Accordion. In Svelte, Ark UI does not coordinate that list.
Installation
Anatomy
Usage
<Collapsible class="w-full max-w-lg border-b pb-4"><h3><CollapsibleTrigger class="group flex w-full items-start justify-between gap-4 text-start font-medium text-sm">How do I get started with this product?<PlusIcon aria-hidden="true" class="mt-0.5 size-4 shrink-0 transition-transform duration-200 group-aria-expanded:rotate-45" /></CollapsibleTrigger></h3><CollapsibleContent class="pt-2 text-muted-foreground text-sm">Getting started is easy! Simply sign up for an account, verify your email, and follow our interactive onboarding guide. You'll be up and running in just a few minutes.</CollapsibleContent></Collapsible>FAQ
Why is the question an h3?
The h3 wraps CollapsibleTrigger, so the question is a heading in the page outline and the trigger inside it is still the button. Pick the heading level that fits your page.
Does the Plus icon change when the answer opens?
Yes, it turns 45 degrees into a cross. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-45 on PlusIcon turns it, eased by transition-transform duration-200.
What do items-start, gap-4, and text-start do on the trigger?
items-start keeps the plus level with the first line when the question wraps, gap-4 keeps it clear of the text, and text-start lines the question up with the start edge instead of centering it.
How do I separate the next question?
Each item has border-b pb-4, so stacking them draws a line under each answer. Give the list a gap-4 or a top margin on each item for space above the next question.
When is a stack of these an Accordion?
Each Collapsible opens on its own. When several sit in one list and only one should be open at a time, with arrow keys between the headers, use an Accordion.
API Reference
Collapsible
No extra props in this demo. The rest is on the Collapsible page.
