Skip to main content
View source

Accordion

Stack of toolbar-style headers; the open item drops into a darker code-block panel.

Usage

svelte 
<script lang="ts">
  import { Accordion } from "@milandekruijf/ui/svelte";

  let value = $state("theming");
  const items = [
    {
      value: "theming",
      title: "Does it support dark mode?",
      content: "Yes — surfaces use the slate tokens, so both themes swap automatically.",
    },
    {
      value: "motion",
      title: "Is the motion optional?",
      content: "The panel skips its slide when prefers-reduced-motion is on.",
    },
  ];
</script>

<Accordion {items} bind:value />

Examples

Questions and answers

A 2px gap sits under every item, open or closed — under an open item it shows below the panel.

<script lang="ts">
  import { Accordion } from "@milandekruijf/ui/svelte";

  let value = $state("gap");

  const items = [
    {
      value: "gap",
      title: "How are items separated?",
      content:
        "A 2px gap sits under every item, open or closed — under an open item it shows below the panel.",
    },
    {
      value: "surface",
      title: "What surface does the open panel use?",
      content:
        "The darker slate.2 code surface, so an open item reads like a code block.",
    },
    {
      value: "single",
      title: "Can several items be open at once?",
      content:
        "No — one item stays open at a time, and picking the open item closes it again.",
    },
  ];
</script>

<Accordion {items} bind:value />

Props

PropTypeDefaultDescription
itemsAccordionItem[]—
Rows to render: `{ value, title, content }`.
value?string""
Bindable value of the open item (`bind:value`); `""` leaves every item closed.
headingLevel?1 | 2 | 3 | 4 | 5 | 63
`aria-level` of the item headers; lower it when the accordion sits under a higher heading.
class?string—
Extra classes merged on the accordion root.

Styled after the code block: header rows take the toolbar surface, the open item drops into the darker code panel, and a 2px transparent rule (a gap showing the background) keeps every item separated — including the open one. A single item stays open at a time; picking the open item closes it.