Skip to content

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

Free

Full Featured Accordion for Svelte

Workspace rows with a category icon, a title, a muted subtitle, and a plus that turns into a minus.

UI library: Ark UI

Each trigger has an icon, a title, a muted subtitle, and a plus that turns into a minus. The sections are Documents, Projects, Workspace settings, and Team members, and Documents starts open.

Use it on a dense workspace home where every cue helps. If the list is one topic deep, a Collapsible is enough. In Svelte, Ark UI does not provide the icons or the subtitles.

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={["documents"]}>{#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 items-center gap-3"><item.icon aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" /><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><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 class="ps-7"><p class="text-muted-foreground">{item.content}</p></AccordionContent></AccordionItem>{/each}</Accordion>

FAQ

What is inside each trigger?

A gap-3 row holds the category icon and a stack of the title over the subtitle. justify-between pushes the plus and minus to the end. The icon is FileTextIcon, FolderIcon, SettingsIcon or UsersIcon, at size-4 with aria-hidden.

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.

How is the subtitle marked up?

The subtitle is text-sm text-muted-foreground under the title, in flex flex-col items-start text-start. Documents uses Contracts, invoices and briefs.

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 Documents start open?

defaultValue={["documents"]} opens Documents 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={["documents"]} and value={item.value}. The rest is on the Accordion page.

All 21 accordion examples