Disclosure

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

On this page

Props

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`	`—`

DisclosureTrigger

A DisclosureTrigger provides the trigger for a disclosure.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`boolean`	`—`
	`boolean`	`—`

DisclosurePanel

A DisclosurePanel provides the content for a disclosure.

Prop	Type	Default
	`ReactNode`	`—`
	`ElementType`	`'label'`

Last updated on 6/16/2026