Collapsible
An interactive component which expands/collapses a panel. Enhanced Pro version with 6 style variants, 5 animation modes, loading states, persistence, analytics tracking, and enterprise-grade features.
Pro features
What the Pro version adds to this component.
Premium Style Variants
6 style variants: default, bordered, elevated, gradient, glassmorphism, and card
Advanced Animations
5 animation modes: smooth, spring physics, bounce, fade, and slide 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
npx @moontra/moonui-cli 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.