Disclosure

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/disclosure-group

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react tailwind-merge

Anatomy

import { Disclosure, DisclosurePanel, DisclosureTrigger } from "@/components/ui/disclosure-group";

<Disclosure>
  <DisclosureTrigger>
    Trigger
  </DisclosureTrigger>
  <DisclosurePanel>
    Content
  </DisclosurePanel>
</Disclosure>

Examples

Disabled

You can disable all disclosure by setting the isDisabled prop.

Controlled

You can control the disclosure by using the isExpanded prop.

Accordion

If you're looking for a more advanced accordion, check out the Disclosure Group component.

Component API

Disclosure

DisclosureGroup

DisclosureIndicator

DisclosurePanel

DisclosureTrigger