Disclosure

An expand/collapse component using Disclosure.Trigger and Disclosure.Content to show and hide content.

Basic

A rich, visually polished disclosure with a gradient trigger and a grid of features inside.

Multiple disclosures styled as a FAQ section.

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the disclosure is expanded (controlled).
`defaultOpen`	`boolean`	`false`	The initial expanded state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Called when the expanded state changes.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

open

boolean

Whether the disclosure is expanded (controlled).

defaultOpenfalse

boolean

The initial expanded state (uncontrolled).

onOpenChange

(open: boolean) => void

Called when the expanded state changes.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}