Docs
Accordion
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
<script lang="ts">
import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>
<Accordion.Root type="single" 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 type="single" 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@next add accordion
Install bits-ui
npm i bits-ui
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>
<Accordion.Root type="single">
<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>
On This Page