Quantity stepperforms

Minus and plus stepper with a value display, contextual labels, live announcements, min/max clamp, optional typed entry and 44px hit areas.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/quantity-stepper

의존 아이템button locale style

Default

Adults: 2

quantity-stepper-demo.tsx

"use client";
import * as React from "react";import { QuantityStepper } from "@/components/ui/quantity-stepper";
export default function QuantityStepperDemo() {  const [adults, setAdults] = React.useState(2);  return (    <div className="flex flex-col gap-2">      <QuantityStepper label="adults" value={adults} onValueChange={setAdults} min={1} max={6} name="adults" />      <p className="text-sm text-muted-foreground">Adults: {adults}</p>    </div>  );}