shadcn.io is not affiliated with official shadcn/ui

Shadcn Accordion for React

Open one panel or many. For FAQs, settings, and other disclosure UI.

PreviewCode

We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/accordion.json

npx shadcn@latest add https://kit.dev/r/base/accordion.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/accordion.json

yarn shadcn@latest add https://kit.dev/r/base/accordion.json

Install the following dependencies:

bun add @base-ui/react lucide-react

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

Copy and paste the following code into your project.

components/ui/accordion.tsx

"use client";

import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import { cn } from "@/lib/utils";

const accordionRootClassName = cn(
  "cn-accordion group/accordion flex w-full flex-col"
);

export const Accordion = (props: AccordionPrimitive.Root.Props) => {
  const { className, ...rest } = props;

  return (
    <AccordionPrimitive.Root
      className={cn(accordionRootClassName, className)}
      data-slot="accordion"
      {...rest}

Update the import paths to match your project setup.

Anatomy

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

<Accordion className="w-full max-w-sm" defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>What are your shipping options?</AccordionTrigger>
    <AccordionContent>
      We offer standard (5-7 days), express (2-3 days), and overnight
      shipping. Free shipping on international orders.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger>What is your return policy?</AccordionTrigger>
    <AccordionContent>
      Returns accepted within 30 days. Items must be unused and in original
      packaging. Refunds processed within 5-7 business days.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="support">
    <AccordionTrigger>How can I contact customer support?</AccordionTrigger>
    <AccordionContent>
      Reach us via email, live chat, or phone. We respond within 24 hours
      during business days.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.
`ArrowDown`	Move to the next item when `orientation` is `"vertical"`.
`ArrowUp`	Move to the previous item when `orientation` is `"vertical"`.
`ArrowRight`	Move to the next item.
`ArrowLeft`	Move to the previous item.
`Home`	Move to the first item.
`End`	Move to the last item.

Demos

Basic

A basic accordion that shows one item at a time. The first item is open by default.

PreviewCode

Multiple

Use the multiple prop to allow multiple items to be open at the same time.

PreviewCode

Disabled

Use the disabled prop on AccordionItem to disable individual items.

PreviewCode

Borders

Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

PreviewCode

Card

Wrap the Accordion in a Card component.

PreviewCode

RTL

Right-to-left accordion. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Accordion

div

PropType

value?AccordionValue<Value>

defaultValue?AccordionValue<Value>

onValueChange?(value: AccordionValue<Value>, eventDetails: AccordionRootChangeEventDetails) → void

disabled?boolean

hiddenUntilFound?boolean

keepMounted?boolean

loopFocus?boolean

multiple?boolean

orientation?Orientation

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"accordion"

data-scope"accordion"

data-part"root"

data-orientationstring

AccordionItem

div

PropType

onOpenChange?(open: boolean, eventDetails: AccordionItem.ChangeEventDetails) → void

value?any

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"accordion-item"

data-scope"accordion"

data-part"item"

data-disabled?string

data-focus?string

data-orientationstring

data-state"open" | "closed"

AccordionTrigger

button

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"accordion-trigger"

data-scope"accordion"

data-part"trigger"

AccordionContent

div

PropType

hiddenUntilFound?boolean

keepMounted?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"accordion-content"

data-scope"accordion"

data-part"panel"

CSS variableType

--accordion-panel-heightstring