Collapsible Component
Capsule-styled collapsible panels with smooth expand/collapse animations and orbit hover effects.
Basic Collapsible
Settings Panel
A realistic settings interface with multiple collapsible sections.
JD
John Doe
john.doe@example.com
Member Since
January 2023
Plan
Pro Active
Order Tracking
Track shipment progress with collapsible order details.
Order #ORB-2024-1234
Placed on December 15, 2024
Ordered
Shipped
In Transit
4
DeliveredFAQ / Documentation
Accordion-style FAQ with multiple sections.
Welcome to Orbit Capsule! This design system emphasizes modular independence with pill-shaped elements and solid ink strokes. Every component floats on the canvas with consistent styling.
Nested Collapsible
API Reference
Based on @radix-ui/react-collapsible
Collapsible
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state |
| onOpenChange | (open: boolean) => void | - | Callback when open state changes |
| defaultOpen | boolean | false | Initial open state when uncontrolled |
| disabled | boolean | false | Disable the collapsible |
| className | string | - | CSS class name |
CollapsibleTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Render as child element |
| className | string | - | CSS class name |
CollapsibleContent
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | CSS class name |