dotUI

Accordion

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

const items = /* ... */;

<Accordion className="max-w-md">
  {items.map((item) => (
    <Disclosure key={item.question}>
      <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>

Playground

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

<Accordion className="max-w-2xl">
  <Disclosure id="getting-started">
    <DisclosureTrigger>How do I get started with DotUI?</DisclosureTrigger>
    <DisclosurePanel>
      Getting started is simple! Install the package using your preferred package manager, then import the components you need.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="free-to-use">
    <DisclosureTrigger>Is DotUI free to use?</DisclosureTrigger>
    <DisclosurePanel>
      Yes, DotUI is completely free and open source. You can use it in any project, whether personal or commercial.
    </DisclosurePanel>
  </Disclosure>
  <Disclosure id="customization">
    <DisclosureTrigger>Can I customize the components?</DisclosureTrigger>
    <DisclosurePanel>
      Absolutely! All components use Tailwind Variants for styling, making it easy to customize colors, sizes, and other visual properties.
    </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/3/2026