Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Accordion · Use

Accordion

Choose a configuration and copy the result.

Color, type, spacing, shape, elevation, motion and icons flow into this recipe.
State

Markup

<script lang="ts">
	import { Accordion } from '@ark-ui/svelte';
	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
</script>

<Accordion.Root defaultValue={['first']} collapsible class="accordion-root">
	<Accordion.Item value="first" class="accordion-item">
		<Accordion.ItemTrigger class="accordion-item-trigger">
			Foundation tokens
			<Accordion.ItemIndicator class="accordion-item-indicator"
				><ChevronDownIcon /></Accordion.ItemIndicator
			>
		</Accordion.ItemTrigger>
		<Accordion.ItemContent class="accordion-item-content">
			Color, type, spacing, shape, elevation, motion and icons flow into this recipe.
		</Accordion.ItemContent>
	</Accordion.Item>
</Accordion.Root>