Docs
Accordion
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Loading...
<script lang="ts">
import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>
<Accordion.Root class="w-full sm:max-w-[70%]">
<Accordion.Item value="item-1">
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
<Accordion.Content
>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content
>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Is it styled?</Accordion.Trigger>
<Accordion.Content>
Yes. It comes with default styles that matches the other components'
aesthetic.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Is it animated?</Accordion.Trigger>
<Accordion.Content>
Yes. It's animated by default, but you can disable it if you prefer.
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<script lang="ts">
import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>
<Accordion.Root class="w-full sm:max-w-[70%]">
<Accordion.Item value="item-1">
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
<Accordion.Content
>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content
>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Is it styled?</Accordion.Trigger>
<Accordion.Content>
Yes. It comes with default styles that matches the other components'
aesthetic.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Is it animated?</Accordion.Trigger>
<Accordion.Content>
Yes. It's animated by default, but you can disable it if you prefer.
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
Installation
npx shadcn-svelte@latest add accordion
Usage
<script lang="ts">
import * as Accordion from "$lib/components/ui/accordion";
</script>
<Accordion.Root>
<Accordion.Item value="item-1">
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
<Accordion.Content>
Yes. It adheres to the WAI-ARIA design pattern.
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>