Collapsible

An interactive component that expands and collapses a section of content.

#Installation

npx @dinachi/cli@latest add collapsible

tsx

import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from '@/components/ui/collapsible'

A basic collapsible section

Collapsible with controlled open state and status display

State: Closed

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the collapsible
defaultOpen	boolean	false	The initial open state when uncontrolled
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes
disabled	boolean	false	When true, prevents the user from interacting with the collapsible