Disclosure

Collapsible section of content.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report

Disclosure example
import {
  Disclosure,
  DisclosureHeader,
  DisclosurePanel,
} from "@/shim-ui/disclosure";

export default () => (
  <Disclosure>
    <DisclosureHeader>What is your refund policy?</DisclosureHeader>
    <DisclosurePanel>
      We offer a 30-day no-questions-asked refund policy.
    </DisclosurePanel>
  </Disclosure>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add disclosure
Name
John Doe
Role
Designer
Email
john@doe.com
Status
Active
Disclosure example
import {
  Disclosure,
  DisclosureHeader,
  DisclosurePanel,
} from "@/shim-ui/disclosure";

export default () => (
  <Disclosure>
    <DisclosureHeader>What is your refund policy?</DisclosureHeader>
    <DisclosurePanel>
      We offer a 30-day no-questions-asked refund policy.
    </DisclosurePanel>
  </Disclosure>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add disclosure

Size

Use the size prop to adjust the size of the disclosure.

Size example
"use client";
import {
  Disclosure,
  DisclosureHeader,
  DisclosurePanel,
} from "@/shim-ui/disclosure";

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <Disclosure key={size} size={size}>
      <DisclosureHeader>Size {size}</DisclosureHeader>
      <DisclosurePanel>Size {size} content</DisclosurePanel>
    </Disclosure>
  ));