shadcn.io is an independent project built on shadcn/ui
Four onboarding steps in a bordered stack. A plus sits before each title and turns into a minus. Create your workspace starts open.
Use it for a checklist where the toggle should lead. If the steps are just a sequence, a Card per step can be clearer. In React, Base UI does not mark a step complete.
Installation
Anatomy
Usage
<Accordion
className="w-full max-w-md -space-y-px"
defaultValue={["workspace"]}
>
{items.map((item) => (
<AccordionItem
className="overflow-hidden border bg-background px-4 first:rounded-t-lg last:rounded-b-lg"
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 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 workspace step start open?
defaultValue={["workspace"]} opens the workspace step 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={["workspace"]} and value={item.value}. The rest is on the Accordion page.
