

<InteractiveDemo name="disclosure" engine="source" controls="[&#x22;isDisabled&#x22;]" />

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @dotui/disclosure
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @dotui/disclosure
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @dotui/disclosure
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @dotui/disclosure
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Anatomy [#anatomy]

```tsx
import { Disclosure, DisclosureHeading, DisclosurePanel } from "@/components/ui/disclosure";
```

```tsx
<Disclosure>
	<DisclosureHeading>What is dotUI?</DisclosureHeading>
	<DisclosurePanel>dotUI is a design system platform.</DisclosurePanel>
</Disclosure>
```

for more advanced composition, you can use this structure

```tsx
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";
```

```tsx
<Disclosure>
	<Heading>
		<Button>
			What is dotUI?
			<ChevronDownIcon />
		</Button>
	</Heading>
	<DisclosurePanel>dotUI is a design system platform.</DisclosurePanel>
</Disclosure>
```

## Examples [#examples]

<Examples>
  <Example name="disclosure/demos/basic" description="Basic disclosure" />

  <Example name="disclosure/demos/default-expanded" description="Default expanded disclosure" />

  <Example name="disclosure/demos/disabled" description="Disabled disclosure" />

  <Example name="disclosure/demos/controlled" description="Controlled disclosure" />

  <Example name="disclosure/demos/advanced-composition" description="Advanced composition" />
</Examples>

## API Reference [#api-reference]

### Disclosure [#disclosure]

<Reference name="disclosure" />

### DisclosureTrigger [#disclosuretrigger]

<Reference name="disclosure-trigger" />

### DisclosurePanel [#disclosurepanel]

<Reference name="disclosure-panel" />
