Disclosure Group

Basic

A disclosure group, also known as an accordion, is a set of collapsible sections that help organize content in a structured, easy-to-navigate format. Users can expand or collapse each section as needed, improving readability and making it easier to browse large amounts of information.

Installation

npx shadcn@latest add @intentui/disclosure

Manual installation

npm i react-aria-components @intentui/icons

Anatomy

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

<DisclosureGroup defaultExpandedKeys={["x"]}>
  <Disclosure id="x">
    <DisclosureTrigger>Q1</DisclosureTrigger>
    <DisclosurePanel>A1</DisclosurePanel>
  </Disclosure>
  <Disclosure id="y">
    <DisclosureTrigger>Q2</DisclosureTrigger>
    <DisclosurePanel>A2</DisclosurePanel>
  </Disclosure>
  <Disclosure id="z">
    <DisclosureTrigger>Q3</DisclosureTrigger>
    <DisclosurePanel>A3</DisclosurePanel>
  </Disclosure>
</DisclosureGroup>

CSS Variables

You need to add this snippet to your main.css or global.css to enable the animation.

@theme inline {
  --animate-disclosure-collapsed: disclosure-collapsed 0.2s ease-out;
  --animate-disclosure-expanded: disclosure-expanded 0.2s ease-out;

  @keyframes disclosure-collapsed {
    from {
      height: var(--disclosure-height);
    }
    to {
      height: 0;
    }
  }

  @keyframes disclosure-expanded {
    from {
      height: 0
    }
    to {
      height: var(--disclosure-height)
    }
  }
}

Default expanded

Set the initially expanded sections by providing an array of keys to the defaultExpandedKeys prop. These keys can be either numbers or strings.

Allow multiple expanded

Allow multiple sections to be expanded at once by using the allowsMultipleExpanded prop.

Nested

Disclosure Groups can be nested to create a hierarchy of sections. Use the DisclosurePanel component to add content to each nested group. To ensure a polished appearance, make sure the trigger within the nested group includes a span, as shown below:

<DisclosurePanel className="bg-muted">
  <DisclosureGroup allowsMultipleExpanded>
    {item.children.map((child, childIndex) => (
      <Disclosure key={childIndex} id={childIndex}>
        <DisclosureTrigger>
          <span>

Check out the example below to see it in action.

With icon

You can add icons to the disclosure group to make it more visually appealing.

Hide border

To remove the border between sections, simply apply standard Tailwind CSS classes.

Hide indicator

To remove the visual indicator (arrow), use standard Tailwind CSS classes.

Hide everything

If you want to hide both the border and the indicator, use the hideBorder and hideIndicator props.

Disabled

Disable specific sections by adding the isDisabled prop to the corresponding item.