Skip to content

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

Free

Accordion with Subtitle and Plus/Minus Toggle for Svelte

Help topics with a title, a muted subtitle, and a plus that turns into a minus. Getting started is open.

UI library: Ark UI

Getting started, Billing, Integrations, and Security. Each trigger stacks a title over a muted subtitle, with a plus on the right that turns into a minus. Getting started starts open.

Use it when both a summary and a plain toggle matter. If people compare sections side by side, use Tabs. In Svelte, Ark UI does not remember which topic was open.

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="w-full max-w-md -space-y-px" defaultValue={["getting-started"]}>{#each items as item (item.value)}<AccordionItem class="overflow-hidden border bg-background px-4 first:rounded-t-lg last:rounded-b-lg" value={item.value}><AccordionTrigger class="hover:no-underline **:data-[slot=accordion-trigger-icon]:hidden"><span class="flex w-full items-center justify-between gap-3"><span class="flex flex-col items-start text-start"><span>{item.title}</span><span class="text-muted-foreground text-sm">{item.subtitle}</span></span><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></AccordionTrigger><AccordionContent><p class="text-muted-foreground">{item.content}</p></AccordionContent></AccordionItem>{/each}</Accordion>

FAQ

How is the subtitle marked up?

Each item stores a subtitle under its title. They stack in flex flex-col items-start text-start, and the subtitle is text-sm text-muted-foreground.

How does the plus turn into a minus?

**:data-[slot=accordion-trigger-icon]:hidden on AccordionTrigger hides the built-in chevron. PlusIcon and MinusIcon share one relative size-4 box, and group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200. Both icons are aria-hidden and text-muted-foreground.

Why does Getting started start open?

defaultValue={["getting-started"]} opens Getting started 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.

How do the row borders meet?

-space-y-px on Accordion pulls the rows together so neighboring borders share one line. Each AccordionItem has border, px-4, first:rounded-t-lg and last:rounded-b-lg.

Where does the answer sit?

AccordionItem has px-4, and AccordionContent adds no padding class of its own, so the paragraph lines up with the title. justify-between on the trigger row keeps the plus and minus at the end.

API Reference

Accordion

Sets defaultValue={["getting-started"]} and value={item.value}. The rest is on the Accordion page.

All 21 accordion examples