Accordion

Variant

Palette

Size

Elevation

Rounded

What is this design system?

A collection of reusable Svelte 5 components built with a token-based theming system. Every component supports palette and variant customization.

How do I customize the theme?

Which palettes are available?

Disabled item

Usage

Svelte

<Accordion variant="ghost" palette="tone">
    <AccordionHeader label="What is this design system?">
        <p>A collection of reusable Svelte components
        built with a token-based theming system.</p>
    </AccordionHeader>
    <AccordionHeader label="How do I install it?">
        <p>Clone the repository and run npm install.</p>
    </AccordionHeader>
</Accordion> 

API

Prop	Type	Default
variant	`"flat" \| "outlined" \| "ghost"`	`"ghost"`
palette	`"accent" \| "tone" \| "neutral" \| "error" \| "warning" \| "success" \| "info"`	`"tone"`
size	`"sm" \| "md" \| "lg"`	`"md"`
elevation	`"none" \| "subtle" \| "hard"`	`"none"`
rounded	`boolean`	`false`
children	`Snippet`	`—`

Prop variant

Type "flat" | "outlined" | "ghost"

Default "ghost"

Prop palette

Default "tone"

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop elevation

Type "none" | "subtle" | "hard"

Default "none"

Prop rounded

Type boolean

Default false

Prop children

Type Snippet

Default —

AccordionHeader

Prop	Type	Default
label	`string`	`—`
icon	`Snippet`	`undefined`
open	`boolean`	`false`
disabled	`boolean`	`false`
children	`Snippet`	`—`

Prop label

Type string

Default —

Prop icon

Type Snippet

Default undefined

Prop open

Type boolean

Default false

Prop disabled

Type boolean

Default false

Prop children

Type Snippet

Default —