Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
1import {2 Accordion,3 AccordionContent,4 AccordionItem,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/solidnpm install @sprawlify/primitives @sprawlify/solidyarn add @sprawlify/primitives @sprawlify/solidbun add @sprawlify/primitives @sprawlify/solid
Add the following files to your project:
1import { Accordion as AccordionPrimitive } from "@sprawlify/solid/accordion";2import { cn } from "@/lib/utils";3import { ChevronDownIcon } from "lucide-solid";4import { splitProps, type ComponentProps } from "solid-js";56function Accordion(props: ComponentProps<typeof AccordionPrimitive.Root>) {7 const [local, others] = splitProps(props, ["class"]);89 return (10 <AccordionPrimitive.Root11 data-slot="accordion"12 class={cn("flex w-full flex-col", local.class)}13 {...others}14 />15 );16}1718function AccordionItem(props: ComponentProps<typeof AccordionPrimitive.Item>) {19 const [local, others] = splitProps(props, ["class"]);2021 return (22 <AccordionPrimitive.Item23 data-slot="accordion-item"24 class={cn("group not-last:border-b", local.class)}25 {...others}26 />27 );28}2930function AccordionTrigger(props: ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {31 const [local, others] = splitProps(props, ["class", "children"]);3233 return (34 <AccordionPrimitive.ItemTrigger35 data-slot="accordion-trigger"36 class={cn(37 "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",38 local.class,39 )}40 {...others}41 >42 {local.children}43 <AccordionPrimitive.ItemIndicator class="ml-2 transition-transform duration-200 data-[state=open]:rotate-180">44 <ChevronDownIcon data-slot="accordion-trigger-icon" class="pointer-events-none shrink-0" />45 </AccordionPrimitive.ItemIndicator>46 </AccordionPrimitive.ItemTrigger>47 );48}4950function AccordionContent(props: ComponentProps<typeof AccordionPrimitive.ItemContent>) {51 const [local, others] = splitProps(props, ["class", "children"]);5253 return (54 <AccordionPrimitive.ItemContent55 data-slot="accordion-content"56 class="data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up text-sm overflow-hidden"57 {...others}58 >59 <div60 class={cn(61 "pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",62 local.class,63 )}64 >65 {local.children}66 </div>67 </AccordionPrimitive.ItemContent>68 );69}7071export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };72Update 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.
1import {2 Accordion,3 AccordionContent,4 AccordionItem,Borders
Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.
1import {2 Accordion,3 AccordionContent,4 AccordionItem,Card
Wrap the Accordion in a Card component.
1import {2 Accordion,3 AccordionContent,4 AccordionItem,Disabled
Use the disabled prop on AccordionItem to disable individual items.
1import {2 Accordion,3 AccordionContent,4 AccordionItem,Multiple
Use multiple to allow multiple items to be open at the same time.
1import {2 Accordion,3 AccordionContent,4 AccordionItem,