Components
Accordion
A vertically stacked set of interactive headings that reveal content.
Preview
Yes. It follows the WAI-ARIA accordion pattern through Bits UI.
Yes. Every part accepts Tailwind classes and native element props.
Yes. Set the root type to multiple and bind to a string array.
accordion.demo.svelte
<script lang="ts"> import * as Accordion from '$lib/components/ui/accordion';</script><Accordion.Root type="single" value="item-1" class="w-full max-w-lg"> <Accordion.Item value="item-1"> <Accordion.Trigger>Is it accessible?</Accordion.Trigger> <Accordion.Content >Yes. It follows the WAI-ARIA accordion pattern through Bits UI.</Accordion.Content > </Accordion.Item> <Accordion.Item value="item-2"> <Accordion.Trigger>Can I style it?</Accordion.Trigger> <Accordion.Content >Yes. Every part accepts Tailwind classes and native element props.</Accordion.Content > </Accordion.Item> <Accordion.Item value="item-3"> <Accordion.Trigger>Can multiple items open?</Accordion.Trigger> <Accordion.Content >Yes. Set the root type to multiple and bind to a string array.</Accordion.Content > </Accordion.Item></Accordion.Root>Installation
Install directly from the hosted registry with the shadcn-svelte CLI.
Terminal
npx shadcn-svelte@latest add https://ui.akcodeworks.com/r/accordion.jsonTerminal
pnpm dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/accordion.jsonTerminal
yarn dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/accordion.jsonTerminal
bun x shadcn-svelte@latest add https://ui.akcodeworks.com/r/accordion.jsonUsage
Compose Root, Item, Trigger, and Content. Every item needs a stable value.
API reference
| Prop | Type | Default |
|---|---|---|
| type | single | multiple | required |
| value | string | string[] | — |
| disabled | boolean | false |
| orientation | vertical | horizontal | vertical |
Source
These files are included in the registry item and copied into the consuming project.
accordion.svelte
<script lang="ts"> import { Accordion as AccordionPrimitive } from 'bits-ui'; import { cw } from '$lib/utils'; let { ref = $bindable(null), value = $bindable(), class: className, ...restProps }: AccordionPrimitive.RootProps = $props();</script><AccordionPrimitive.Root bind:ref bind:value={value as never} data-slot="accordion" class={cw('flex w-full flex-col', className)} {...restProps}/>accordion-item.svelte
<script lang="ts"> import { Accordion as AccordionPrimitive } from 'bits-ui'; import { cw } from '$lib/utils'; let { ref = $bindable(null), class: className, ...restProps }: AccordionPrimitive.ItemProps = $props();</script><AccordionPrimitive.Item bind:ref data-slot="accordion-item" class={cw('border-b border-border last:border-b-0', className)} {...restProps}/>accordion-trigger.svelte
<script lang="ts"> import type { Snippet } from 'svelte'; import { Accordion as AccordionPrimitive } from 'bits-ui'; import { cw } from '$lib/utils'; let { ref = $bindable(null), class: className, children, ...restProps }: Omit<AccordionPrimitive.TriggerProps, 'child'> & { children?: Snippet } = $props();</script><AccordionPrimitive.Header class="flex"> <AccordionPrimitive.Trigger bind:ref data-slot="accordion-trigger" class={cw( 'group flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className )} {...restProps} > {@render children?.()} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 text-muted-foreground transition-transform duration-200" aria-hidden="true" > <path d="m6 9 6 6 6-6" /> </svg> </AccordionPrimitive.Trigger></AccordionPrimitive.Header>accordion-content.svelte
<script lang="ts"> import type { Snippet } from 'svelte'; import { Accordion as AccordionPrimitive } from 'bits-ui'; import { cw } from '$lib/utils'; let { ref = $bindable(null), class: className, children, ...restProps }: Omit<AccordionPrimitive.ContentProps, 'child'> & { children?: Snippet } = $props();</script><AccordionPrimitive.Content bind:ref data-slot="accordion-content" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" {...restProps}> <div class={cw('pt-0 pb-4 text-muted-foreground', className)}>{@render children?.()}</div></AccordionPrimitive.Content>index.ts
import Root from './accordion.svelte';import Item from './accordion-item.svelte';import Trigger from './accordion-trigger.svelte';import Content from './accordion-content.svelte';export { Root, Item, Trigger, Content };export { Root as Accordion, Item as AccordionItem, Trigger as AccordionTrigger, Content as AccordionContent};