Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
1<script lang="ts">
2import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
3</script>
4
Installation
pnpm dlx sprawlify@latest add accordionnpx sprawlify@latest add accordionyarn sprawlify@latest add accordionbunx --bun sprawlify@latest add accordion
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1<script lang="ts">
2import { Accordion as AccordionPrimitive } from "@sprawlify/svelte/accordion"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof AccordionPrimitive.ItemContent> {}
7
8let { children, class: className, ...rest }: Props = $props()
9</script>
10
11<AccordionPrimitive.ItemContent
12 data-slot="accordion-content"
13 class="data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up text-sm overflow-hidden"
14 {...rest}
15>
16 <div class={cn(
17 "pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
18 className
19 )}>
20 {@render children?.()}
21 </div>
22</AccordionPrimitive.ItemContent>1<script lang="ts">
2import { Accordion as AccordionPrimitive } from "@sprawlify/svelte/accordion"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof AccordionPrimitive.Item> {}
7
8let { children, class: className, ...rest }: Props = $props()
9</script>
10
11<AccordionPrimitive.Item
12 data-slot="accordion-item"
13 class={cn("group not-last:border-b", className)}
14 {...rest}
15>
16 {@render children?.()}
17</AccordionPrimitive.Item>1<script lang="ts">
2import { Accordion as AccordionPrimitive } from "@sprawlify/svelte/accordion"
3import { cn } from "@/lib/utils"
4import { ChevronDown } from "lucide-svelte"
5import type { ComponentProps } from "svelte"
6
7interface Props extends ComponentProps<typeof AccordionPrimitive.ItemTrigger> {}
8
9let { children, class: className, ...rest }: Props = $props()
10</script>
11
12<AccordionPrimitive.ItemTrigger
13 data-slot="accordion-trigger"
14 class={cn(
15 "w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
16 className
17 )}
18 {...rest}
19>
20 {@render children?.()}
21 <AccordionPrimitive.ItemIndicator class="ml-2 transition-transform duration-200 data-[state=open]:rotate-180">
22 <ChevronDown data-slot="accordion-trigger-icon" class="pointer-events-none shrink-0 size-4" />
23 </AccordionPrimitive.ItemIndicator>
24</AccordionPrimitive.ItemTrigger>1<script lang="ts">
2import { Accordion as AccordionPrimitive } from "@sprawlify/svelte/accordion"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof AccordionPrimitive.Root> {}
7
8let { children, class: className, ...rest }: Props = $props()
9</script>
10
11<AccordionPrimitive.Root
12 data-slot="accordion"
13 class={cn("flex w-full flex-col", className)}
14 {...rest}
15>
16 {@render children?.()}
17</AccordionPrimitive.Root>1export { default as Accordion } from "./accordion.svelte";2export { default as AccordionItem } from "./accordion-item.svelte";3export { default as AccordionTrigger } from "./accordion-trigger.svelte";4export { default as AccordionContent } from "./accordion-content.svelte";5Update the import paths to match your project setup.
Usage
1import {
2 Accordion,
3 AccordionContent,
4 AccordionItem,
5 AccordionTrigger
6} from "@/components/ui/accordion"1<Accordion collapsible defaultValue={["item-1"]}>
2 <AccordionItem value="item-1">
3 <AccordionTrigger>Is it accessible?</AccordionTrigger>
4 <AccordionContent>
5 Yes. It adheres to the WAI-ARIA design pattern.
6 </AccordionContent>
7 </AccordionItem>
8</Accordion>Examples
Basic
A basic accordion that shows one item at a time. The first item is open by default.
1<script lang="ts">
2import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
3
4const items = [
Borders
Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.
1<script lang="ts">
2import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
3
4const items = [
Card
Wrap the Accordion in a Card component.
1<script lang="ts">
2import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
3import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
4
Disabled
Use the disabled prop on AccordionItem to disable individual items.
1<script lang="ts">
2import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
3</script>
4
Multiple
Use multiple to allow multiple items to be open at the same time.
1<script lang="ts">
2import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
3
4const items = [