Glass StepperGlassmorphism numeric stepper with spring number flip, notification-style tinted buttons, and configurable min/max/step.

Add to your project

One command adds this component to your project.

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About Glass Stepper

Glass Stepper is a numeric input with a Motion-driven spring flip on the number itself, notification-style tinted plus and minus buttons, and configurable min, max, and step values. The glassmorphism container picks up whatever sits behind it so the stepper integrates into any UI. Use it for cart quantity, attendee counts, room-night pickers, model-parameter inputs, and any setting that takes a small bounded number rather than a free-form value.

Built with

Frequently asked questions

Is Glass Stepper free to use?

Yes. Glass Stepper is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Glass Stepper?

One command: npx shadcn@latest add https://aicanvas.me/r/glass-stepper.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Stepper for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Glass Stepper built with?

Glass Stepper is built with React and TypeScript, using Motion and Tailwind CSS.

Where would I use Glass Stepper?

Common uses include Settings, E-commerce, and Forms. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Glass Stepper with AI?

Yes. Glass Stepper ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections