Disclosure

PreviousNext

A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.

Docs API Reference 

import { Disclosure, DisclosureHeader, DisclosurePanel } from "../ui/disclosure"

export function DisclosureDemo() {
  return (
    <Disclosure className="min-w-66">
      <DisclosureHeader>System Requirements</DisclosureHeader>
      <DisclosurePanel>Details about system requirements here.</DisclosurePanel>
    </Disclosure>
  )
}

Installation

pnpm dlx shadcn@latest add disclosure

Usage

import {
  Disclosure,
  DisclosureHeader,
  DisclosurePanel,
} from "@/components/ui/disclosure"
<Disclosure>
  <DisclosureHeader>Open</DisclosureHeader>
  <DisclosurePanel>Place content for the disclosure here.</DisclosurePanel>
</Disclosure>