shadcn.io is an independent project built on shadcn/ui
Four integration questions, each a rounded card. A plus sits before the title and turns into a minus. Which integrations are available? starts open.
Use it for a setup FAQ where each answer stands alone. If the integrations are a catalog, list them in a Card. In React, Ark UI does not connect an integration.
Installation
Anatomy
Usage
<Accordion
className="flex w-full max-w-md flex-col gap-2"
defaultValue={["available"]}
>
{items.map((item) => (
<AccordionItem
className="overflow-hidden rounded-lg border bg-background px-4"
key={item.value}
value={item.value}
>
<AccordionTrigger className="hover:no-underline **:data-[slot=accordion-trigger-icon]:hidden">
<span className="flex w-full items-center gap-3">
<span className="relative size-4 shrink-0">
<PlusIcon
aria-hidden="true"
className="absolute inset-0 size-4 text-muted-foreground transition-opacity duration-200 group-aria-expanded/accordion-trigger:opacity-0"
/>
<MinusIcon
aria-hidden="true"
className="absolute inset-0 size-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-aria-expanded/accordion-trigger:opacity-100"
/>
</span>
<span className="flex-1 text-start">{item.title}</span>
</span>
</AccordionTrigger>
<AccordionContent className="ps-7">
<p className="text-muted-foreground">{item.content}</p>
</AccordionContent>
</AccordionItem>
))}
</Accordion>FAQ
How are the sections separated?
Accordion is flex flex-col gap-2. Each AccordionItem has its own rounded-lg border and px-4.
How does the plus end up before the title?
The plus and minus sit in a relative size-4 box, the first child of a gap-3 row, with the title after it in flex-1 text-start. **:data-[slot=accordion-trigger-icon]:hidden hides the built-in chevron. group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200, and both icons are aria-hidden.
Why is the answer indented?
ps-7 on AccordionContent matches the 16px icon plus the 12px gap-3, so the answer lines up under the title.
Why does the integrations question start open?
defaultValue={["available"]} opens the integrations question on first render. The string matches that item's value.
API Reference
Accordion
Sets defaultValue={["available"]} and value={item.value}. The rest is on the Accordion page.
