Accordion

Collapsible panels with 3 variants, 5 animations, multiple-open mode, icons, and disabled state.

Import

ts 
import Accordion from '$lib/components/Accordion.svelte';

Usage

Ambar UI is a component library built with Svelte 5 and Tailwind CSS v4. Zero external dependencies, built-in animations, and full accessibility support.

Copy components into $lib/components and import them.

import Accordion from '$lib/components/Accordion.svelte';
svelte 
<script lang="ts">
  import Accordion from '$lib/components/Accordion.svelte';
</script>

{#snippet answerOne()}
  <p>Ambar UI is a Svelte 5 component library with zero dependencies.</p>
{/snippet}
{#snippet answerTwo()}
  <p>Copy components into $lib/components and import them directly.</p>
{/snippet}

<Accordion items={[
  { value: 'q1', title: 'What is Ambar UI?', children: answerOne },
  { value: 'q2', title: 'How do I install it?', children: answerTwo },
]} />

Variants

Three layouts: default (bordered list), card (separate cards), flush (borderless for FAQ pages).

Default

Single open — opening one panel closes the others.

Ambar UI is a component library built with Svelte 5 and Tailwind CSS v4. Zero external dependencies, built-in animations, and full accessibility support.

Copy components into $lib/components and import them.

import Accordion from '$lib/components/Accordion.svelte';

Edit CSS custom properties in app.css. Changing the --accent and --card tokens customizes the entire theme.

Card

Separate cards with multiple open enabled.

  • 5 videos/month
  • 720p quality
  • Analytics
  • Unlimited videos
  • 4K quality
  • Analytics dashboard
  • Priority support
  • Everything in Pro
  • Team accounts
  • API access
  • Custom white-labeling

Flush

Borderless — ideal for FAQ pages.

Content is updated daily. Trending videos refresh every hour, recommendations every 6 hours.

Go to Settings → Account → Delete Account. Deletion is permanent and cannot be undone.

Click the "Forgot Password" link on the login screen. A reset link will be sent to your email.

svelte 
<!-- Default: single open, bordered -->
<Accordion variant="default" {items} />

<!-- Card: each item is its own card, supports multiple -->
<Accordion variant="card" multiple {items} />

<!-- Flush: no borders, ideal for FAQ sections -->
<Accordion variant="flush" {items} />

Multiple Open

Set multiple to allow several panels to be open simultaneously. Use defaultOpen to pre-expand items by value.

svelte 
<Accordion multiple defaultOpen={['q1', 'q2']} {items} />

Animations

Five animation presets. Toggle between them below to compare.

Smooth animation is achieved without JavaScript height calculations using the grid-template-rows: 0fr → 1fr CSS trick.

Each animation uses a different cubic-bezier curve. Snappy is recommended for drag-and-drop actions, bounce for celebration screens.

<Accordion animation="spring" ... />
svelte 
<Accordion animation="smooth"  {items} />
<Accordion animation="snappy"  {items} />
<Accordion animation="spring"  {items} />
<Accordion animation="elastic" {items} />
<Accordion animation="bounce"  {items} />

Disabled Items

Set disabled: true on any item to prevent it from being opened.

svelte 
<Accordion items={[
  { value: 'a', title: 'Active item',   children: content },
  { value: 'b', title: 'Disabled item', disabled: true, children: content },
]} />

API Reference

The Item type: { value: string; title: string; hint?: string; icon?: Snippet; disabled?: boolean; children: Snippet }

PropTypeDefaultDescription
items *Item[]—Array of accordion items. Each item has value, title, and children (Snippet).
multiple booleanfalseWhen true, multiple panels can be open at the same time.
variant 'default' | 'card' | 'flush''default'Visual style of the accordion.
animation 'smooth' | 'spring' | 'snappy' | 'elastic' | 'bounce''smooth'Open/close animation preset.
defaultOpen string[][]Array of item values that are open on initial render.