Disclosure

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>

Installation

npx shadcn@latest add @dotui/disclosure

Anatomy

import {
  Disclosure,
  DisclosurePanel,
  DisclosureTrigger,
} from '@/components/ui/disclosure'

DisclosureTrigger renders the heading, button, and chevron; DisclosurePanel holds the collapsible content.

<Disclosure>
  <DisclosureTrigger>What is dotUI?</DisclosureTrigger>
  <DisclosurePanel>dotUI is a design system platform.</DisclosurePanel>
</Disclosure>

For full control over the trigger, compose the header from Heading and Button yourself.

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 slot="trigger">
      What is dotUI?
      <ChevronDownIcon />
    </Button>
  </Heading>
  <DisclosurePanel>dotUI is a design system platform.</DisclosurePanel>
</Disclosure>

Open state

Use defaultExpanded for uncontrolled state, or isExpanded with onExpandedChange to control it.

const [isExpanded, setExpanded] = React.useState(false)

<Disclosure isExpanded={isExpanded} onExpandedChange={setExpanded}>
  <DisclosureTrigger>System requirements</DisclosureTrigger>
  <DisclosurePanel>...</DisclosurePanel>
</Disclosure>

Examples

Basic Disclosure

Advanced Composition

FAQ Section

Frequently asked questions

Feature Details

Edge Functions

Run code closer to your users with zero cold starts.

$20/mo

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.

PropType
ReactNode | function
boolean
Key
boolean
boolean

DisclosureTrigger

A DisclosureTrigger provides the trigger for a disclosure.

PropType
ReactNode | function
boolean
boolean

DisclosurePanel

A DisclosurePanel provides the content for a disclosure.

PropType
ReactNode
ElementType

Last updated on 7/9/2026