Disclosure

A collapsible section of content with a heading trigger that can be expanded or collapsed.

isDisabled

<Disclosure>
  <DisclosureTrigger>System requirements</DisclosureTrigger>
  <DisclosurePanel>
    Details about system requirements go here. Describes the minimum and recommended hardware and software needed.
  </DisclosurePanel>
</Disclosure>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/disclosure

Anatomy

import { 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>

Examples

Details about system requirements go here. Describes the minimum and recommended hardware and software needed.

Expanded: false

API Reference

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
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`Key`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"div", DisclosureRenderProps>`	`—`

DisclosureTrigger

A DisclosureTrigger provides the trigger for a disclosure.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"button", ButtonRenderProps>`	`—`

DisclosurePanel

A DisclosurePanel provides the content for a disclosure.

Prop	Type	Default
	`ReactNode`	`—`
	`ElementType`	`'label'`
	`DOMRenderFunction<"div", DisclosurePanelRenderProps>`	`—`

Last updated on 6/4/2026