dotUI

Accordion

A grouping of related disclosures that supports both single and multiple expanded items.

Docs

const faq = /** ... **/;

<Accordion className="w-full max-w-2xl">
  {faq.map((item) => (
    <Disclosure key={item.question}>
      <DisclosureTrigger>{item.question}</DisclosureTrigger>
      <DisclosurePanel>{item.answer}</DisclosurePanel>
    </Disclosure>
  ))}
</Accordion>

Installation

pnpm dlx shadcn@latest add @dotui/accordion

Anatomy

import { Accordion } from "@/components/ui/accordion";
import {
  Disclosure,
  DisclosurePanel,
  DisclosureTrigger
} from "@/components/ui/disclosure";
<Accordion>
  <Disclosure>
    <DisclosureTrigger>Disclosure Heading</DisclosureTrigger>
    <DisclosurePanel>Disclosure Panel</DisclosurePanel>
  </Disclosure>
  <Disclosure>
    <DisclosureTrigger>Disclosure Heading</DisclosureTrigger>
    <DisclosurePanel>Disclosure Panel</DisclosurePanel>
  </Disclosure>
</Accordion>

Playground

Use the controls below to experiment with different accordion props and see the live preview and code update.

API Reference

Accordion

A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion. It supports both single and multiple expanded items.

PropType
boolean
boolean
Iterable<Key>
Iterable<Key>
ReactNode | function

On this page

On this page

Last updated on 12/21/2025

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.