Components

Collapsible

A lightweight disclosure primitive for revealing supporting content inline without leaving the current screen.

Version 0.4 ships six new primitives for native and web.

Keep this area for optional details, release notes, or inspector copy.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add collapsible to your project.

watermelon add collapsible

Import Collapsible from your local UI registry output.

Import

import { Collapsible } from "@/components/ui/collapsible";

import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";

Use Collapsible when the user should stay on the same surface while revealing optional context.

Version 0.4 ships six new primitives for native and web.

Keep this area for optional details, release notes, or inspector copy.

prop	type	default	description
defaultOpen	boolean	false	Sets the initial open state for uncontrolled usage.
open	boolean	-	Controls the collapsible state externally.
onOpenChange	(open: boolean) => void	-	Called whenever the open state changes.
asChild	boolean	false	Lets the trigger forward press handling into an existing child component.