Disclosure

The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.

The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.

Examples

npx shadcn@latest add "https://components.dylanwlim.com/c/disclosure.json"

Prop	Type	Default	Description
open	boolean	false	Controls the visibility of the content.
onOpenChange	(open: boolean) => void		Callback function to handle changes in the open state.
children	ReactNode		The content to be toggled, typically includes `DisclosureTrigger` and `DisclosureContent`.
className	string		Additional CSS classes for the container.
variants	`{ expanded: Variant; collapsed: Variant }`		Custom animation variants for expanded and collapsed states.
transition	`Transition`		Custom transition settings for the motion animations.

Prop	Type	Default	Description
children	ReactNode		The trigger element that will toggle the disclosure.
className	string		Additional CSS classes for the trigger element.

Prop	Type	Default	Description
children	ReactNode		The content that will be shown or hidden by the disclosure.
className	string		Additional CSS classes for the content container.

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.