Quantity

Component 12

About

A composable quantity stepper with animated value transitions and min/max limits for e-commerce product controls.

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

Code

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

Usage.tsx

"use client";

import {
  QuantityDecrease,
  QuantityIncrease,
  QuantityValue,
} from "@/components/ui/quantity";
import { useState } from "react";

export default function QuantityDemo() {
  const [value, setValue] = useState(1);

  const increase = () => {
    setValue((prev) => prev + 1);
  };

  const decrease = () => {
    setValue((prev) => Math.max(1, prev - 1));
  };

  return (
    <div className="flex size-full min-h-[320px] items-center justify-center bg-background p-10">
      <div className="grid max-w-min grid-cols-[repeat(3,max-content)] rounded-md border items-center">
        <QuantityDecrease
          className="rounded-[7px]"
          onClick={decrease}
          value={value}
        />
        <QuantityValue>{value}</QuantityValue>
        <QuantityIncrease
          className="rounded-[7px]"
          onClick={increase}
          max={10}
          value={value}
        />
      </div>
    </div>
  );
}