Accordion

A collapsible component used to organize content into toggleable sections. It's an ideal solution for FAQs, progressive disclosure, or compacting complex information.

Props

Prop	Type	Default	Description
`variant`	`string`	`''`	Custom CSS class to apply to the accordion wrapper.
`header`	`Snippet<[{ isExpanded: boolean }]>`	`required`	Snippet for the toggleable header content.
`body`	`Snippet`	`required`	Snippet for the collapsible body content.
`transitionFunction`	`function`	`slide`	Svelte transition function for the expansion animation.
`transitionDuration`	`number`	`250`	Duration of the expansion animation in ms.

Samples

Standard Accordion

The default look with chevron indicators.

<Accordion>

  {#snippet header({ isExpanded })}

    <Text>Title</Text>

    <Icon icon={isExpanded ? 'up' : 'down'} />

  {/snippet}

  {#snippet body()}

    <Text>Hidden content</Text>

  {/snippet}

</Accordion>

Custom Transition

Using different Svelte transitions and durations.

import { fade } from 'svelte/transition';

<Accordion transitionFunction={fade} transitionDuration={500}>

...

</Accordion>