InteractiveLiquid Glass
Accordion
Expandable chrome panels with rotating chevron. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add accordionExpandable panels
About this component
Accordion is part of Interactive. Expandable chrome panels with rotating chevron.
Install with npx @intellihelper/cli@latest add accordion. 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 Accordion
Use when
- Use Accordion when expandable chrome panels with rotating chevron.
- 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.