Accordion

Yes. It follows the WAI-ARIA accordion pattern.

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

export function AccordionDemo() {
  return (
    <Accordion className="max-w-md" defaultValue={["item-1"]}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionPanel>
          Yes. It follows the WAI-ARIA accordion pattern.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionPanel>
          Yes, with Tailwind classes you can override through `className`.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Installation

pnpm dlx shadcn@latest add https://components.sudarshandhakal.com.np/r/accordion.json

Usage

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

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes. It follows the WAI-ARIA accordion pattern.
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionPanel>
      Yes, with Tailwind classes you can override through `className`.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Examples

Multiple

Allow more than one item to be open at the same time.

<Accordion multiple defaultValue={["item-1", "item-2"]}>
  {/* ... */}
</Accordion>

Controlled

const [value, setValue] = React.useState<string[]>(["item-1"])

<Accordion value={value} onValueChange={setValue}>
  {/* ... */}
</Accordion>

Reference

Each part accepts all props from the matching part of the Base UI Accordion. The most common ones are listed below.

Accordion

Prop	Type	Default
defaultValue	`string[]`	`[]`
value	`string[]`	—
onValueChange	`(value: string[]) => void`	—
multiple	`boolean`	`false`
disabled	`boolean`	`false`

AccordionItem

Prop	Type	Default
value	`string`	—
disabled	`boolean`	`false`

AccordionTrigger

Renders a button inside an h3 header, with a chevron that rotates when the panel is open. Accepts all button props.

AccordionPanel

The collapsible content area. Height is animated using the --accordion-panel-height CSS variable. AccordionContent is exported as an alias.

Migrating from Radix

type="single" collapsible is gone. Single-open is the default, and an open item can always be closed.
defaultValue and value are arrays, even in single mode.
AccordionContent is now AccordionPanel (the old name still works as an alias).
The open state is exposed as data-panel-open on the trigger, not data-state="open".