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.
Controls
const items = /* ... */;
<Accordion className="max-w-sm">
{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 '@/ui/accordion'
import { Disclosure, DisclosurePanel, DisclosureTrigger } from '@/ui/disclosure'<Accordion>
<Disclosure>
<DisclosureTrigger>Disclosure Heading</DisclosureTrigger>
<DisclosurePanel>Disclosure Panel</DisclosurePanel>
</Disclosure>
<Disclosure>
<DisclosureTrigger>Disclosure Heading</DisclosureTrigger>
<DisclosurePanel>Disclosure Panel</DisclosurePanel>
</Disclosure>
</Accordion>Open state
Expanded items are tracked by each Disclosure's id. Give the group defaultExpandedKeys for uncontrolled state, or expandedKeys with onExpandedChange to control it — both are a Set of ids. Pass allowsMultipleExpanded to let the set hold more than one id at a time.
<Accordion defaultExpandedKeys={['getting-started']}>
<Disclosure id="getting-started">
<DisclosureTrigger>How do I get started?</DisclosureTrigger>
<DisclosurePanel>…</DisclosurePanel>
</Disclosure>
</Accordion>Examples
FAQ
Getting started is simple! Install the package using your preferred package manager, then import the components you need. All components are built on React Aria Components and follow accessibility best practices out of the box.
Yes, DotUI is completely free and open source. You can use it in any project, whether personal or commercial, without any restrictions or licensing fees.
Absolutely! All components use Tailwind Variants for styling, making it easy to customize colors, sizes, and other visual properties. You can pass custom className props or extend the default variants to match your design system.
Yes, DotUI is built with TypeScript and provides full type definitions for all components. This ensures type safety and excellent developer experience with autocomplete and IntelliSense support in your IDE.
Product Features
- Real-time multiplayer editing
- Inline comments and mentions
- Shared workspaces with roles
- Custom workflow triggers
- Scheduled tasks and reminders
- Webhooks for any event
- SSO and SCIM provisioning
- Granular access controls
- Audit logs and data export
Settings Panel
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 7/28/2026