Disclosure Group

Component 9

About

An accessible group of collapsible disclosure sections for building FAQs and expandable content panels, with single or multiple expanded items.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Disclosure Group to your project and fits it to your theme.

Code

How Disclosure Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function DisclosureGroupDemo() {
  return (
    <div className="mx-auto w-full max-w-lg px-4">
      <DisclosureGroup defaultExpandedKeys={[1]}>
        <Disclosure id={1}>
          <DisclosureTrigger>What is a VPS?</DisclosureTrigger>
          <DisclosurePanel>
            A VPS is a Virtual Private Server, which provides dedicated
            resources on a server shared with other users, offering more control
            and customization than shared hosting.
          </DisclosurePanel>
        </Disclosure>
        <Disclosure id={2}>
          <DisclosureTrigger>What is cloud hosting?</DisclosureTrigger>
          <DisclosurePanel>
            Cloud hosting utilizes multiple servers to balance load and maximize
            uptime. Instead of being hosted on a single server, your data and
            resources are spread across multiple servers.
          </DisclosurePanel>
        </Disclosure>
        <Disclosure id={3}>
          <DisclosureTrigger>What is shared hosting?</DisclosureTrigger>
          <DisclosurePanel>
            Shared hosting is a type of web hosting where multiple websites
            share the same server and its resources. It's an affordable option,
            but may have limitations on performance and customization.
          </DisclosurePanel>
        </Disclosure>
        <Disclosure id={4}>
          <DisclosureTrigger>What is dedicated hosting?</DisclosureTrigger>
          <DisclosurePanel>
            Dedicated hosting means your website is hosted on a single server
            exclusively reserved for your site. This provides maximum
            performance and customization, but at a higher cost.
          </DisclosurePanel>
        </Disclosure>
      </DisclosureGroup>
    </div>
  );
}