dotUI

Accordion

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

const items = /* ... */;

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

Installation

npx 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>

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
ReactNode | function
Iterable<Key>
Iterable<Key>
boolean
DOMRenderFunction<"div", DisclosureGroupRenderProps>

Last updated on 6/4/2026