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

The Disclosure component wraps a collapsible content item.

DisclosureGroup

The DisclosureGroup component groups related disclosure items.

DisclosureIndicator

The DisclosureIndicator component renders the disclosure expand icon.

DisclosurePanel

The DisclosurePanel component contains collapsible disclosure content.

DisclosureTrigger

The DisclosureTrigger component toggles a disclosure item.

See the React Aria for the full API reference.