Shim

Disclosure

Collapsible section of content.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Install
pnpm dlx @kkga/shim add disclosure

import { Disclosure } from "@/shim-ui/disclosure";

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

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add disclosure

Variant

Use the variant prop to change the visual style of the disclosure.

import { Disclosure } from "@/shim-ui/disclosure";

export default () =>
  (["soft", "surface", "ghost"] as const).map((variant) => (
    <Disclosure key={variant} title={`Variant: ${variant}`} variant={variant}>
      Disclosure content
    </Disclosure>
  ));

Size

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

import { Disclosure } from "@/shim-ui/disclosure";

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