Collapsible
An interactive component which expands/collapses a panel. Enhanced Pro version with 5 style variants, 4 animation modes, loading states, persistence, analytics tracking, and enterprise-grade features.
Unlock Advanced Collapsible Features
Get access to powerful pro features that enhance your collapsible component with advanced capabilities, premium styling options, and optimized performance.
Pro Features
Unlock advanced capabilities with the Pro version
Premium Style Variants
5 distinctive styles including bordered, elevated, gradient, glassmorphism, and card variants
Advanced Animations
4 animation modes: smooth, spring physics, bounce, and fade for perfect transitions
Smart Features
Auto-collapse timer, state persistence, lazy loading, and keyboard shortcuts support
Enterprise Features
Built-in analytics tracking, progress indicators, badges, and loading states
Installation
Install via CLI
moonui add collapsibleUsage
Basic Usage
Pro Usage
Examples
Basic Usage
Simple collapsible with controlled state.
With Icons
Collapsible with custom icons and styling.
Nested Collapsible
Collapsible components nested inside each other.
Style Variants
Different visual styles for various use cases.
Animation Modes
Different animation styles for transitions.
Advanced Features
Badges, shortcuts, auto-collapse, and persistence.
Size Variations
Multiple size options from xs to xl.