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 Vue, Ark UI does not mark a step complete.
Installation
Anatomy
Usage
<Accordion class="w-full max-w-md -space-y-px" :defaultValue='["workspace"]'>
<AccordionItem
v-for="item in items"
class="overflow-hidden border bg-background px-4 first:rounded-t-lg last:rounded-b-lg"
:key="item.value"
:value="item.value"
>
<AccordionTrigger class="hover:no-underline **:data-[slot=accordion-trigger-icon]:hidden">
<span class="flex w-full items-center gap-3">
<span class="relative size-4 shrink-0">
<PlusIcon
aria-hidden="true"
class="absolute inset-0 size-4 text-muted-foreground transition-opacity duration-200 group-aria-expanded/accordion-trigger:opacity-0"
/>
<MinusIcon
aria-hidden="true"
class="absolute inset-0 size-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-aria-expanded/accordion-trigger:opacity-100"
/>
</span>
<span class="flex-1 text-start">{{ item.title }}</span>
</span>
</AccordionTrigger>
<AccordionContent class="ps-7">
<p class="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]", v-for="item in items", key="item.value" and value="item.value". The rest is on the Accordion page.
