Docs
Accordion
Accordion
A set of collapsible panels with headings.
Installation
Copy and paste the following code into your project.
"use client"
import * as React from "react"
import { Accordion as AccordionPrimitive } from "@base-ui-components/react/accordion"
import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"
const Accordion = AccordionPrimitive.Root
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b border-border", className)}
{...props}
/>
))
AccordionItem.displayName = "AccordionItem"
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-semibold transition-all data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&[data-panel-open]>svg]:rotate-180",
className,
)}
{...props}
>
{children}
<ChevronDown
aria-hidden="true"
className="size-4 shrink-0 transition-transform duration-200"
/>
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
const AccordionPanel = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Panel>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Panel>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Panel
ref={ref}
className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] data-[ending-style]:h-0 data-[starting-style]:h-0"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Panel>
))
AccordionPanel.displayName = AccordionPrimitive.Panel.displayName
export { Accordion, AccordionItem, AccordionTrigger, AccordionPanel }
Update the import paths to match your project setup.
Usage
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionPanel>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionPanel>
</AccordionItem>
</Accordion>