InteractiveLiquid Glass
Stepper
Ordered steps with completed, active, and upcoming states. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add stepperOnboarding steps
About this component
Stepper is part of Interactive. Ordered steps with completed, active, and upcoming states.
Install with npx @intellihelper/cli@latest add stepper. 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 Stepper
Use when
- Use Stepper when ordered steps with completed, active, and upcoming states.
- 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.