InteractiveLiquid Glass
Collapsible
Standalone expand/collapse panel and file-tree layout. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add collapsibleFile tree
Nested folders with compact tree layout.
About this component
Collapsible is part of Interactive. Standalone expand/collapse panel and file-tree layout.
Install with npx @intellihelper/cli@latest add collapsible. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Collapsible
Use when
- Use Collapsible when standalone expand/collapse panel and file-tree layout.
- Accordions, sliders, toggles, carousels, and steppers for progressive disclosure.
- Settings that benefit from compact, interactive chrome.
Avoid when
- Critical content that must be fully visible without interaction.
- Carousels for SEO-critical copy (prefer static lists).
Accessibility notes
- Ensure slider values are announced; provide keyboard alternatives.
- Accordion triggers need expanded/collapsed state for assistive tech.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- One primary interaction pattern per region to avoid competing controls.
- Pair steppers with clear next/back actions.