dotUI

Accordion

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

Docs
Overview
Examples

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

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="w-full 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
boolean
Iterable<Key>
Iterable<Key>
ReactNode | function

On this page

Last updated on 1/13/2026

On this page

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.