Disclosure

Copy MarkdownOpen

Example

Features

Disclosures can be built with the <details> and <summary> HTML elements, but this can be difficult to style, especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. Disclosure helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy.

• Flexible - Structured such that it can be used standalone or combined with other disclosures to form a DisclosureGroup
• Keyboard Interaction - When focused, a disclosure's visibility can be toggled with either the Enter or Space key, and the appropriate ARIA attributes are automatically applied.
• Accessible - Uses hidden="until-found" in supported browsers, enabling find-in-page search support and improved search engine visibility for collapsed content
• Styleable - Keyboard focus, disabled and expanded states are provided for easy styling. These states only apply when interacting with an appropriate input device, unlike CSS pseudo classes.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add disclosure

Anatomy

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

<Disclosure>
  <DisclosureTrigger>Title belongs here</DisclosureTrigger>
  <DisclosureContent>Content belongs here</DisclosureContent>
</Disclosure>

import { Button } from "react-aria-components";
import { Menu } from "lucide-react";

<DisclosureTrigger asChild>
  <Button>
    <Menu />
    Open Disclosure
  </Button>
</DisclosureTrigger>;

Another Example

Disclosure Card

A flexible UI pattern that uses the Disclosure component to reveal additional content on hover, demonstrating its versatility beyond traditional accordion usage. The image background dynamically scales and blurs on hover, while the disclosure panel smoothly reveals contextual information. Ideal for showcasing media details or creating rich, interactive preview cards.

Props

Loading types…