Accordion

A vertically stacked set of collapsible panels.

Yes. It follows the WAI-ARIA accordion pattern out of the box.

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

export default function AccordionDemo() {
  return (
    <Accordion defaultValue={['item-1']} className="w-full max-w-md">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It follows the WAI-ARIA accordion pattern out of the box.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>Yes. It comes with restrained default styles matching the rest of the site.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>Yes. Panels expand and collapse with a short height transition.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/accordion.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Accordion imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<Accordion defaultValue={['item-1']}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It follows the WAI-ARIA accordion pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Multiple open at once

Yes, pass the `multiple` prop to the root to allow several open at once.

No, each item opens and closes independently.

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

export default function AccordionMultiple() {
  return (
    <Accordion multiple defaultValue={['item-1', 'item-2']} className="w-full max-w-md">
      <AccordionItem value="item-1">
        <AccordionTrigger>Can multiple items be open?</AccordionTrigger>
        <AccordionContent>Yes, pass the `multiple` prop to the root to allow several open at once.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Does closing one affect the others?</AccordionTrigger>
        <AccordionContent>No, each item opens and closes independently.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

API Reference

Name	Type	Default	Description
defaultValue	unknown[]	—	Initially expanded item value(s) (uncontrolled).
value	unknown[]	—	Controlled expanded item value(s).
onValueChange	(value: unknown[]) => void	—	Called when an item is expanded or collapsed.
multiple	boolean	false	Whether more than one item can be open at the same time.