Disclosure

Yes. Every component is built on React Aria and follows WAI-ARIA patterns.

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

const faqs = [
  {
    id: "a11y",
    q: "Is it accessible?",
    a: "Yes. Every component is built on React Aria and follows WAI-ARIA patterns.",
  },
  {
    id: "shadcn",
    q: "Does it work with shadcn/ui?",
    a: "Yes. It uses the same tokens and installs with the shadcn CLI.",
  },
  {
    id: "themes",
    q: "Can I change the theme?",
    a: "Change the CSS variables. Every component reads from them.",
  },
];

export default function DisclosureDemo() {
  return (
    <DisclosureGroup className="max-w-md" defaultExpandedKeys={["a11y"]}>
      {faqs.map((f) => (
        <Disclosure key={f.id} id={f.id}>
          <DisclosureTrigger>{f.q}</DisclosureTrigger>
          <DisclosurePanel>{f.a}</DisclosurePanel>
        </Disclosure>
      ))}
    </DisclosureGroup>
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/disclosure

The CLI installs dependencies and any other components this one uses.

Usage

tsx

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

tsx

<DisclosureGroup>
  <Disclosure id="shipping">
    <DisclosureTrigger>Shipping</DisclosureTrigger>
    <DisclosurePanel>Free on orders over $50.</DisclosurePanel>
  </Disclosure>
  <Disclosure id="returns">
    <DisclosureTrigger>Returns</DisclosureTrigger>
    <DisclosurePanel>Return unworn items within 30 days.</DisclosurePanel>
  </Disclosure>
</DisclosureGroup>

A DisclosureGroup is an accordion: by default, opening one item closes the others. A Disclosure also works on its own, without a group.

When to use

Disclosure — optional or secondary content users can skip: FAQs, advanced settings, details on a product page, filter groups.
Tabs — switch between peer views where exactly one is visible and none should be hidden by default.
Dialog or Popover — content that needs focus or shouldn't push the page down.
Don't hide content most users need; long pages with clear headings are often easier to scan than a stack of collapsed sections.

Anatomy

tsx

<DisclosureGroup>             {/* optional: accordion, sets the variant */}
  <Disclosure>                {/* one section */}
    <DisclosureTrigger>       {/* <h3> › <button> with label and indicator */}
      <Icon />
      Label
    </DisclosureTrigger>
    <DisclosurePanel>         {/* collapsible content */}
      …
    </DisclosurePanel>
  </Disclosure>
</DisclosureGroup>

Part	Renders	Notes
`DisclosureGroup`	`<div>`	Manages which items are expanded and passes `variant` to its items.
`Disclosure`	`<div>`	One section. Needs an `id` inside a group for `expandedKeys`. Has the `group/disclosure` class.
`DisclosureTrigger`	`<h3>` › `<button slot="trigger">`	Full-width button with the children on the left and the indicator on the right.
Indicator	`<svg>`	Chevron (rotates 180°) or plus (rotates 45° into a ×). `aria-hidden`.
`DisclosurePanel`	`<div role="group">` › `<div>`	The collapsible region. The outer element animates its height; the inner one gets the variant's padding.

Examples

Card

variant="card" wraps the whole group in one bordered card with dividers, and tints the open item's trigger. Icons in the trigger are sized to 16px and muted.

Invite people to the workspace and choose what they can access.

import { CreditCardIcon, KeyRoundIcon, UsersIcon } from "lucide-react";
import {
  Disclosure,
  DisclosureGroup,
  DisclosurePanel,
  DisclosureTrigger,
} from "@/components/ui/disclosure";

export default function DisclosureCard() {
  return (
    <DisclosureGroup
      variant="card"
      className="max-w-md"
      defaultExpandedKeys={["members"]}
    >
      <Disclosure id="members">
        <DisclosureTrigger>
          <UsersIcon /> Members
        </DisclosureTrigger>
        <DisclosurePanel>
          Invite people to the workspace and choose what they can access.
        </DisclosurePanel>
      </Disclosure>
      <Disclosure id="keys">
        <DisclosureTrigger>
          <KeyRoundIcon /> API keys
        </DisclosureTrigger>
        <DisclosurePanel>
          Create keys for CI and server-side scripts. Keys inherit the
          permissions of the member who created them.
        </DisclosurePanel>
      </Disclosure>
      <Disclosure id="billing">
        <DisclosureTrigger>
          <CreditCardIcon /> Billing
        </DisclosureTrigger>
        <DisclosurePanel>
          Change your plan, update the card on file and download invoices.
        </DisclosurePanel>
      </Disclosure>
    </DisclosureGroup>
  );
}

Separated

variant="separated" gives each item its own card with a gap between them. The open item gets a slightly stronger shadow. Suits FAQs and marketing pages.

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

const faqs = [
  {
    id: "included",
    q: "What's included in the Pro plan?",
    a: "Unlimited projects, 1 TB of bandwidth, preview deployments for every branch and email support.",
  },
  {
    id: "cancel",
    q: "Can I cancel anytime?",
    a: "Yes. Cancel from Billing settings and you keep Pro features until the end of the current period.",
  },
  {
    id: "refunds",
    q: "Do you offer refunds?",
    a: "We refund annual plans in full within 14 days of purchase. Contact support and we'll handle it within one business day.",
  },
];

export default function DisclosureSeparated() {
  return (
    <DisclosureGroup variant="separated" className="max-w-md">
      {faqs.map((f) => (
        <Disclosure key={f.id} id={f.id}>
          <DisclosureTrigger indicator="plus">{f.q}</DisclosureTrigger>
          <DisclosurePanel>{f.a}</DisclosurePanel>
        </Disclosure>
      ))}
    </DisclosureGroup>
  );
}

Indicators

indicator="chevron" (default) rotates to point up when open. indicator="plus" turns into a × and reads well in FAQ lists.

Free on orders over $50. Ships in 1–2 days.

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

export default function DisclosureIndicators() {
  return (
    <div className="grid w-full max-w-2xl gap-6 sm:grid-cols-2">
      {(["chevron", "plus"] as const).map((indicator) => (
        <DisclosureGroup
          key={indicator}
          variant="card"
          defaultExpandedKeys={["shipping"]}
        >
          <Disclosure id="shipping">
            <DisclosureTrigger indicator={indicator}>
              Shipping
            </DisclosureTrigger>
            <DisclosurePanel>
              Free on orders over $50. Ships in 1–2 days.
            </DisclosurePanel>
          </Disclosure>
          <Disclosure id="returns">
            <DisclosureTrigger indicator={indicator}>Returns</DisclosureTrigger>
            <DisclosurePanel>
              Return unworn items within 30 days.
            </DisclosurePanel>
          </Disclosure>
        </DisclosureGroup>
      ))}
    </div>
  );
}

Multiple expanded

allowsMultipleExpanded lets users open several items at once. Use it when items are independent and users may compare them, like product details or filters.

Over-ear wireless headphones with active noise cancelling and 40 hours of battery life.

Recycled aluminium frame, protein-leather cushions. Wipe with a dry cloth.

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

export default function DisclosureMultiple() {
  return (
    <DisclosureGroup
      allowsMultipleExpanded
      defaultExpandedKeys={["details", "materials"]}
      className="max-w-md"
    >
      <Disclosure id="details">
        <DisclosureTrigger>Product details</DisclosureTrigger>
        <DisclosurePanel>
          Over-ear wireless headphones with active noise cancelling and 40 hours
          of battery life.
        </DisclosurePanel>
      </Disclosure>
      <Disclosure id="materials">
        <DisclosureTrigger>Materials and care</DisclosureTrigger>
        <DisclosurePanel>
          Recycled aluminium frame, protein-leather cushions. Wipe with a dry
          cloth.
        </DisclosurePanel>
      </Disclosure>
      <Disclosure id="warranty">
        <DisclosureTrigger>Warranty</DisclosureTrigger>
        <DisclosurePanel>
          Two-year limited warranty covering manufacturing defects.
        </DisclosurePanel>
      </Disclosure>
    </DisclosureGroup>
  );
}

Rich trigger

The trigger's children are laid out in a row with gap-2, so icons, monospace labels and Badges line up. Keep interactive elements out of the trigger; it's already a button.

1 of 4 instances failing health checks since 09:42 UTC

import { DatabaseIcon, GlobeIcon, ServerIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
  Disclosure,
  DisclosureGroup,
  DisclosurePanel,
  DisclosureTrigger,
} from "@/components/ui/disclosure";

const services = [
  {
    id: "web",
    name: "web",
    icon: GlobeIcon,
    status: "Healthy",
    tone: "success",
    detail: "3 instances · p95 142 ms · last deploy 12 minutes ago",
  },
  {
    id: "api",
    name: "api",
    icon: ServerIcon,
    status: "Degraded",
    tone: "warning",
    detail: "1 of 4 instances failing health checks since 09:42 UTC",
  },
  {
    id: "db",
    name: "postgres",
    icon: DatabaseIcon,
    status: "Healthy",
    tone: "success",
    detail: "Primary in us-east-1 · 2 read replicas · 38% storage used",
  },
] as const;

export default function DisclosureRichTrigger() {
  return (
    <DisclosureGroup
      variant="card"
      className="max-w-md"
      defaultExpandedKeys={["api"]}
    >
      {services.map((s) => (
        <Disclosure key={s.id} id={s.id}>
          <DisclosureTrigger>
            <s.icon />
            <span className="font-mono">{s.name}</span>
            <Badge variant="dot" color={s.tone} size="sm">
              {s.status}
            </Badge>
          </DisclosureTrigger>
          <DisclosurePanel>{s.detail}</DisclosurePanel>
        </Disclosure>
      ))}
    </DisclosureGroup>
  );
}

Standalone

A single Disclosure without a group uses the line styles. It draws a bottom border by default; remove it with border-b-0 when it isn't part of a list.

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

export default function DisclosureSingle() {
  return (
    <Disclosure className="w-full max-w-md border-b-0">
      <DisclosureTrigger>Show system requirements</DisclosureTrigger>
      <DisclosurePanel>
        macOS 13+, Windows 11 or a recent Linux distribution. 8 GB RAM
        recommended.
      </DisclosurePanel>
    </Disclosure>
  );
}

Disabled

isDisabled on a Disclosure stops it from toggling and dims its trigger. isDisabled on DisclosureGroup disables every item. Explain why in the trigger text or nearby.

import { LockIcon } from "lucide-react";
import {
  Disclosure,
  DisclosureGroup,
  DisclosurePanel,
  DisclosureTrigger,
} from "@/components/ui/disclosure";

export default function DisclosureDisabled() {
  return (
    <DisclosureGroup variant="card" className="max-w-md">
      <Disclosure id="general">
        <DisclosureTrigger>General</DisclosureTrigger>
        <DisclosurePanel>
          Workspace name, URL and default language.
        </DisclosurePanel>
      </Disclosure>
      <Disclosure id="sso" isDisabled>
        <DisclosureTrigger>
          <LockIcon /> Single sign-on (Enterprise)
        </DisclosureTrigger>
        <DisclosurePanel>SAML and OIDC configuration.</DisclosurePanel>
      </Disclosure>
    </DisclosureGroup>
  );
}

Pass expandedKeys and onExpandedChange to DisclosureGroup to own the state, for example for Expand all and Collapse all buttons. For a single Disclosure, use isExpanded and onExpandedChange.

npm install -g @acme/cli

import { useState } from "react";
import type { Key } from "react-aria-components";
import { Button } from "@/components/ui/button";
import {
  Disclosure,
  DisclosureGroup,
  DisclosurePanel,
  DisclosureTrigger,
} from "@/components/ui/disclosure";

const sections = [
  {
    id: "install",
    title: "1. Install the CLI",
    body: "npm install -g @acme/cli",
  },
  {
    id: "login",
    title: "2. Log in",
    body: "Run acme login and follow the browser prompt.",
  },
  {
    id: "deploy",
    title: "3. Deploy",
    body: "Run acme deploy from your project root.",
  },
];

export default function DisclosureControlled() {
  const [expanded, setExpanded] = useState<Set<Key>>(new Set(["install"]));
  const allOpen = expanded.size === sections.length;

  return (
    <div className="grid w-full max-w-md gap-2">
      <Button
        variant="ghost"
        size="sm"
        className="justify-self-end"
        onPress={() =>
          setExpanded(allOpen ? new Set() : new Set(sections.map((s) => s.id)))
        }
      >
        {allOpen ? "Collapse all" : "Expand all"}
      </Button>
      <DisclosureGroup
        variant="card"
        allowsMultipleExpanded
        expandedKeys={expanded}
        onExpandedChange={setExpanded}
      >
        {sections.map((s) => (
          <Disclosure key={s.id} id={s.id}>
            <DisclosureTrigger>{s.title}</DisclosureTrigger>
            <DisclosurePanel>{s.body}</DisclosurePanel>
          </Disclosure>
        ))}
      </DisclosureGroup>
    </div>
  );
}

Custom trigger

DisclosureTrigger always renders a heading and a full-width button. For a different layout, put any React Aria button with slot="trigger" inside the Disclosure, such as a link-style Button below a preview. It gets aria-expanded and aria-controls automatically, and group-data-expanded/disclosure: classes can react to the state.

src/app/page.tsx
src/app/layout.tsx
src/components/checkout-form.tsx

import { ChevronDownIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Disclosure, DisclosurePanel } from "@/components/ui/disclosure";

const files = [
  "src/app/page.tsx",
  "src/app/layout.tsx",
  "src/components/checkout-form.tsx",
  "src/lib/stripe.ts",
  "src/lib/retry.ts",
  "tests/checkout.spec.ts",
];

export default function DisclosureCustomTrigger() {
  const [isExpanded, setExpanded] = useState(false);

  return (
    <Disclosure
      isExpanded={isExpanded}
      onExpandedChange={setExpanded}
      className="w-full max-w-sm border-b-0"
    >
      <ul className="grid gap-1 font-mono text-xs">
        {files.slice(0, 3).map((f) => (
          <li key={f}>{f}</li>
        ))}
      </ul>
      <DisclosurePanel>
        <ul className="grid gap-1 pt-1 font-mono text-foreground text-xs">
          {files.slice(3).map((f) => (
            <li key={f}>{f}</li>
          ))}
        </ul>
      </DisclosurePanel>
      <Button slot="trigger" variant="link" size="sm" className="mt-2">
        {isExpanded ? "Show less" : `Show ${files.length - 3} more files`}
        <ChevronDownIcon className="transition-transform group-data-expanded/disclosure:rotate-180" />
      </Button>
    </Disclosure>
  );
}

Recipes

FAQ section

A two-column FAQ with a heading, a Link to contact support, and plus indicators.

Frequently asked questions

Can't find what you're looking for? Talk to our team.

You get every Pro feature for 14 days. We don't ask for a card up front, and you can pick a plan at any point during the trial.

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

const faqs = [
  {
    id: "trial",
    q: "How does the free trial work?",
    a: "You get every Pro feature for 14 days. We don't ask for a card up front, and you can pick a plan at any point during the trial.",
  },
  {
    id: "seats",
    q: "What counts as a seat?",
    a: "Anyone who can sign in to your workspace. Guests with view-only access to shared links are free.",
  },
  {
    id: "security",
    q: "Where is my data stored?",
    a: "In AWS regions of your choice (US, EU or APAC), encrypted at rest with AES-256 and in transit with TLS 1.3.",
  },
  {
    id: "migrate",
    q: "Can you help us migrate?",
    a: "Yes. Teams on annual plans get a migration engineer and import tools for the most common alternatives.",
  },
];

export default function DisclosureRecipeFaq() {
  return (
    <section className="grid w-full max-w-3xl gap-8 md:grid-cols-[1fr_1.6fr]">
      <div className="grid content-start gap-2">
        <h2 className="font-semibold text-xl tracking-tight">
          Frequently asked questions
        </h2>
        <p className="text-muted-foreground text-sm">
          Can't find what you're looking for?{" "}
          <Link href="#">Talk to our team</Link>.
        </p>
      </div>
      <DisclosureGroup defaultExpandedKeys={["trial"]}>
        {faqs.map((f) => (
          <Disclosure key={f.id} id={f.id}>
            <DisclosureTrigger indicator="plus">{f.q}</DisclosureTrigger>
            <DisclosurePanel>{f.a}</DisclosurePanel>
          </Disclosure>
        ))}
      </DisclosureGroup>
    </section>
  );
}

Filter groups in a shop sidebar, each a disclosure containing a CheckboxGroup. Multiple groups can be open at once.

import { Button } from "@/components/ui/button";
import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox";
import {
  Disclosure,
  DisclosureGroup,
  DisclosurePanel,
  DisclosureTrigger,
} from "@/components/ui/disclosure";

const filters = [
  {
    id: "category",
    label: "Category",
    options: ["Headphones", "Speakers", "Microphones", "Accessories"],
  },
  {
    id: "brand",
    label: "Brand",
    options: ["Aurora", "Northwind", "Sonic Labs"],
  },
  {
    id: "price",
    label: "Price",
    options: ["Under $100", "$100 – $250", "$250 – $500", "Over $500"],
  },
];

export default function DisclosureRecipeFilters() {
  return (
    <aside className="w-full max-w-64 rounded-lg border bg-card px-4 py-2">
      <div className="flex items-center justify-between border-b py-2">
        <h3 className="font-medium text-sm">Filters</h3>
        <Button variant="link" size="sm">
          Clear all
        </Button>
      </div>
      <DisclosureGroup
        allowsMultipleExpanded
        defaultExpandedKeys={["category", "price"]}
      >
        {filters.map((f) => (
          <Disclosure key={f.id} id={f.id}>
            <DisclosureTrigger>{f.label}</DisclosureTrigger>
            <DisclosurePanel>
              <CheckboxGroup
                aria-label={f.label}
                defaultValue={f.id === "category" ? ["Headphones"] : []}
              >
                {f.options.map((o) => (
                  <Checkbox key={o} value={o}>
                    {o}
                  </Checkbox>
                ))}
              </CheckboxGroup>
            </DisclosurePanel>
          </Disclosure>
        ))}
      </DisclosureGroup>
    </aside>
  );
}

Order summary

A standalone disclosure for a checkout summary on mobile: the total stays visible in the trigger and the line items expand below.

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

const items = [
  { name: "Studio Pro Wireless", qty: 1, price: 349 },
  { name: "Travel case", qty: 1, price: 29 },
  { name: "USB-C cable (2 m)", qty: 2, price: 12 },
];

const subtotal = items.reduce((sum, i) => sum + i.qty * i.price, 0);
const shipping = 0;
const tax = Math.round(subtotal * 0.08 * 100) / 100;
const usd = (n: number) =>
  n.toLocaleString("en-US", { style: "currency", currency: "USD" });

export default function DisclosureRecipeOrderSummary() {
  return (
    <div className="w-full max-w-sm rounded-lg border bg-card px-4">
      <Disclosure className="border-b-0">
        <DisclosureTrigger>
          <ShoppingBagIcon />
          Order summary
          <span className="ml-2 font-semibold tabular-nums">
            {usd(subtotal + shipping + tax)}
          </span>
        </DisclosureTrigger>
        <DisclosurePanel>
          <ul className="grid gap-2 border-t pt-3">
            {items.map((i) => (
              <li key={i.name} className="flex justify-between gap-4">
                <span>
                  {i.name}
                  {i.qty > 1 && <span className="text-xs"> × {i.qty}</span>}
                </span>
                <span className="text-foreground tabular-nums">
                  {usd(i.qty * i.price)}
                </span>
              </li>
            ))}
          </ul>
          <dl className="mt-3 grid gap-1.5 border-t pt-3">
            <div className="flex justify-between">
              <dt>Subtotal</dt>
              <dd className="text-foreground tabular-nums">{usd(subtotal)}</dd>
            </div>
            <div className="flex justify-between">
              <dt>Shipping</dt>
              <dd className="text-foreground">Free</dd>
            </div>
            <div className="flex justify-between">
              <dt>Estimated tax</dt>
              <dd className="text-foreground tabular-nums">{usd(tax)}</dd>
            </div>
          </dl>
        </DisclosurePanel>
      </Disclosure>
    </div>
  );
}

Accessibility

Each trigger is a <button> with aria-expanded and aria-controls pointing at its panel, inside an <h3> so sections appear in the heading outline.
The panel has role="group" by default and is labelled by its trigger. Pass role="region" to DisclosurePanel for important sections that should be landmarks; use it sparingly.
Collapsed panels use hidden="until-found" where the browser supports it, so find-in-page can reveal and expand them.
The height animation is disabled when the user prefers reduced motion.
Triggers use their text as the accessible name; icons and indicators are decorative.

Keyboard

Key	Action
`Tab` / `Shift`+`Tab`	Moves between triggers and focusable content in open panels
`Space` / `Enter`	Expands or collapses the focused section

Styling

Data attributes

Attribute	On	Present when
`data-expanded`	`Disclosure`	The section is open
`data-disabled`	`Disclosure`, `DisclosureGroup`	Disabled
`data-focus-visible-within`	`Disclosure`, `DisclosurePanel`	Something inside has keyboard focus
`data-hovered` / `data-pressed`	trigger button	Hovered / being pressed
`data-focus-visible`	trigger button	Focused with the keyboard

Each Disclosure has the group/disclosure class, so any child can react to its state with group-data-expanded/disclosure:…, as the indicator does.

Slots

`data-slot`	Element
`disclosure-group`	Group root
`disclosure`	Each item
`disclosure-panel`	Each panel (outer element)

Animation

The panel animates height to the --disclosure-panel-height variable that React Aria sets when it opens and closes (h-(--disclosure-panel-height) overflow-hidden transition-[height] duration-200). Reuse the same classes on your own DisclosurePanel from React Aria to get the same motion.

Customizing

className on DisclosureGroup, Disclosure and DisclosurePanel accepts a string or a function of their render props.
className on DisclosureTrigger goes to the button, e.g. className="py-2 text-xs" for denser lists.
The panel's padding and text color come from the variant and are on its inner element. Override them with a child wrapper or [&>div]:… on DisclosurePanel.

API Reference

DisclosureGroup

Prop

Type

Also accepts every prop of React Aria's DisclosureGroup.

Disclosure

Prop

Type

Also accepts every prop of React Aria's Disclosure.

DisclosureTrigger

Prop

Type

DisclosureTrigger takes only these props. It renders an <h3>; for another heading level or other button props, use a custom trigger with slot="trigger".

DisclosurePanel

Prop

Type

Tabs — switch between views, one at a time.
Sidebar — uses a Disclosure for collapsible submenus.
Checkbox — common content for filter panels.
Card — a container for a standalone disclosure.

Is it accessible?

Does it work with shadcn/ui?

Can I change the theme?

Members

API keys

Billing

What's included in the Pro plan?

Can I cancel anytime?

Do you offer refunds?

Shipping

Returns

Shipping

Returns

Product details

Materials and care

Warranty

webHealthy

apiDegraded

postgresHealthy

Show system requirements

General

Single sign-on (Enterprise)

1. Install the CLI

2. Log in

3. Deploy

Frequently asked questions

How does the free trial work?

What counts as a seat?

Where is my data stored?

Can you help us migrate?

Order summary$434.16