On this page
Getting started is simple! Install the package using your preferred package manager, then import the components you need.
Yes, DotUI is completely free and open source. You can use it in any project, whether personal or commercial.
Absolutely! All components use Tailwind Variants for styling, making it easy to customize colors, sizes, and other visual properties.
Props
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
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/accordionAnatomy
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.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
ReactNode | function | — | ||
Iterable<Key> | — | ||
Iterable<Key> | — | ||
boolean | — | ||
Last updated on 6/16/2026