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/reactnpm install @sprawlify/primitives @sprawlify/reactyarn add @sprawlify/primitives @sprawlify/reactbun add @sprawlify/primitives @sprawlify/react
Add the following files to your project:
1"use client";23import * as React from "react";4import { Accordion as AccordionPrimitive } from "@sprawlify/react/accordion";5import { cn } from "@/lib/utils";6import { ChevronDownIcon } from "lucide-react";78function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {9 return (10 <AccordionPrimitive.Root11 data-slot="accordion"12 className={cn("flex w-full flex-col", className)}13 {...props}14 />15 );16}1718function AccordionItem({19 className,20 ...props21}: React.ComponentProps<typeof AccordionPrimitive.Item>) {22 return (23 <AccordionPrimitive.Item24 data-slot="accordion-item"25 className={cn("group not-last:border-b", className)}26 {...props}27 />28 );29}3031function AccordionTrigger({32 className,33 children,34 ...props35}: React.ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {36 return (37 <AccordionPrimitive.ItemTrigger38 data-slot="accordion-trigger"39 className={cn(40 "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",41 className,42 )}43 {...props}44 >45 {children}46 <AccordionPrimitive.ItemIndicator className="ml-2 transition-transform duration-200 data-[state=open]:rotate-180">47 <ChevronDownIcon48 data-slot="accordion-trigger-icon"49 className="pointer-events-none shrink-0"50 />51 </AccordionPrimitive.ItemIndicator>52 </AccordionPrimitive.ItemTrigger>53 );54}5556function AccordionContent({57 className,58 children,59 ...props60}: React.ComponentProps<typeof AccordionPrimitive.ItemContent>) {61 return (62 <AccordionPrimitive.ItemContent63 data-slot="accordion-content"64 className="data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up text-sm overflow-hidden"65 {...props}66 >67 <div68 className={cn(69 "pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",70 className,71 )}72 >73 {children}74 </div>75 </AccordionPrimitive.ItemContent>76 );77}7879export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };80Update 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,