Accordion

A vertical stack of collapsible sections. Single mode opens one at a time; multiple allows any combination.

Yes. The trigger is a real button with `aria-expanded` and `aria-controls`, and the content has `role="region"`.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add accordion

Usage

Import the Accordion components and use them:

import * as Accordion from '$lib/sivir/components/accordion';

<Accordion.Root type="single">
  <Accordion.Item value="a">
    <Accordion.Trigger>Trigger</Accordion.Trigger>
    <Accordion.Content>Content</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Examples

Single mode

Multiple mode

Anatomy

Accordion.Root - Groups collapsible sections.

Accordion.Item - Defines a collapsible section.

Accordion.Trigger - Toggles its item.

Accordion.Content - Contains an item's collapsible content.