Glass Stepper

Component

About

A capsule-shaped numeric stepper with rolling odometer-style digits, hold-to-accelerate increment/decrement buttons and a shake animation when hitting the min or max limit.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Stepper to your project and fits it to your theme.

Code

How Glass Stepper is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { GlassStepper } from "@/components/ui/glass-stepper";

export default function GlassStepperDemo() {
  const [quantity, setQuantity] = React.useState(2);

  return (
    <div className="flex min-h-[320px] w-full items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-10">
      <GlassStepper
        value={quantity}
        onValueChange={setQuantity}
        min={0}
        max={10}
        label="Quantity"
      />
    </div>
  );
}