Collapsible
An interactive component which expands and collapses content.
Import
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@retents/ui/collapsible"Usage Guidelines
When to use
- For a single section of content that can be toggled open or closed (e.g., "Show more", advanced options, additional details).
- When you need programmatic control over the open/close state.
When NOT to use
- For multiple collapsible sections stacked together — use Accordion instead.
- For switching between views — use Tabs instead.
- For overlay content — use Dialog, Sheet, or Popover.
Preview
3 items tagged
@retents/ui
Usage
<Collapsible>
<CollapsibleTrigger>Toggle</CollapsibleTrigger>
<CollapsibleContent>
Hidden content revealed on toggle.
</CollapsibleContent>
</Collapsible>