Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tab-Style Accordion with Left Plus Trigger for Vue

Integration questions as separate rounded cards, with a plus before the title that turns into a minus.

UI library: Ark 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 Vue, Ark UI does not connect an integration.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Accordion anatomy: root, item, item trigger, item content, item indicator

Usage

<Accordion class="flex w-full max-w-md flex-col gap-2" :defaultValue='["available"]'>
  <AccordionItem
    v-for="item in items"
    class="overflow-hidden rounded-lg border bg-background px-4"
    :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 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.

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.

Is keyboard navigation built in?

Yes. Each trigger is a button with aria-expanded and aria-controls, and Enter or Space toggles it. The arrow keys move between triggers, and Home and End jump to the first and last.

API Reference

Accordion

Sets defaultValue="[available]", v-for="item in items", key="item.value" and value="item.value". The rest is on the Accordion page.

All 21 accordion examples