Collapsible

Ready

An expandable/collapsible container component for hiding and revealing content.

Basic Collapsible

Simple collapsible with text trigger

Settings Panel

Multiple collapsible sections with icons

Controlled State

Collapsible with external state control

Status:
Closed

API Reference

Props and configuration options

PropTypeDefaultDescription
triggerReactNoderequiredContent to display in the trigger button
childrenReactNoderequiredContent to show/hide
defaultOpenbooleanfalseInitial open state (uncontrolled)
openboolean-Controlled open state
onOpenChangefunction-Callback when state changes
disabledbooleanfalseDisable the collapsible
classNamestring-Additional CSS classes for container
triggerClassNamestring-Additional CSS classes for trigger
contentClassNamestring-Additional CSS classes for content

Usage Example

How to use the Collapsible component

import { Collapsible } from '@/components/ui/collapsible'
import { Settings } from 'lucide-react'

// Basic uncontrolled
<Collapsible
  trigger={<span>Click to expand</span>}
  defaultOpen={false}
>
  <div className="p-4">
    Content goes here
  </div>
</Collapsible>

// With icon and title
<Collapsible
  trigger={
    <div className="flex items-center gap-3">
      <Settings className="w-5 h-5" />
      <div>
        <h3 className="font-semibold">Settings</h3>
        <p className="text-xs">Configure your preferences</p>
      </div>
    </div>
  }
>
  <div className="p-4">
    Settings content
  </div>
</Collapsible>

// Controlled
const [isOpen, setIsOpen] = useState(false)

<Collapsible
  trigger={<span>Profile</span>}
  open={isOpen}
  onOpenChange={setIsOpen}
>
  <div className="p-4">
    Profile content
  </div>
</Collapsible>