Disclosure

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

Examples

npx motion-primitives@latest add disclosure

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.