A collapsible section of content with a heading trigger that can be expanded or collapsed.
<Disclosure>
<DisclosureTrigger>System requirements</DisclosureTrigger>
<DisclosurePanel>
Details about system requirements go here. Describes the minimum and recommended hardware and software needed.
</DisclosurePanel>
</Disclosure>npx shadcn@latest add @dotui/disclosureimport {
Disclosure,
DisclosureHeading,
DisclosurePanel,
} from "@/components/ui/disclosure";<Disclosure>
<DisclosureHeading>What is dotUI?</DisclosureHeading>
<DisclosurePanel>
dotUI is a design system platform.
</DisclosurePanel>
</Disclosure>for more advanced composition, you can use this structure
import { Disclosure, DisclosurePanel } from "@/components/ui/disclosure";
import { Button } from "@/components/ui/button";
import { Heading } from "@/components/ui/heading";
import { ChevronDownIcon } from "your-icon-library";<Disclosure>
<Heading>
<Button>
What is dotUI?
<ChevronDownIcon />
</Button>
</Heading>
<DisclosurePanel>
dotUI is a design system platform.
</DisclosurePanel>
</Disclosure>Use the controls below to experiment with different disclosure props and see the live preview and code update.
<Disclosure>
<DisclosureTrigger>System requirements</DisclosureTrigger>
<DisclosurePanel>
Details about system requirements go here. Describes the minimum and recommended hardware and software needed.
</DisclosurePanel>
</Disclosure>A disclosure is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.
| Prop | Type | Default | |
|---|---|---|---|
Key | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
ReactNode | function | — | ||
A DisclosureTrigger provides the trigger for a disclosure.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
boolean | — | ||
ReactNode | function | — | ||
A DisclosurePanel provides the content for a disclosure.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.