Pro

Quantity pill

Add to an order in one press. Add opens sideways into a − count + pill, the count rolls as it changes, and the minus turns into a bin at one. Focus moves to plus after adding and back to Add after the last one is removed.

Pro

pnpm dlx shadcn@latest add @caliper/quantity-pill

Harbour Coffee

Pickup in about 10 minutes

Oat flat whiteDouble shot · £4.20
Cardamom bunBaked this morning · £3.60
2
Sourdough toastCultured butter, sea salt · £5.50

Total£7.20

Installs components/ui/quantity-pill.tsxDepends on lucide-reactMotion none in component source

When to use

Use it for

Menus, carts and shop listings where most people add one and some add a few.
Tight rows where a full number field would crowd the line.

Skip it when

Large quantities typed exactly; use the number field.
Settings with a range; use a slider.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Focus never drops: When Add becomes the pill, focus lands on plus; when the pill becomes Add, focus returns to it.
Every button names the item: "One more Oat flat white" and "Remove Oat flat white", so a list of pills is clear out of context.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/quantity-pill

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { QuantityPill } from "@/components/ui/quantity-pill"

The worked example comes with Pro

The 42-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

QuantityPill

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

item *string—What is being counted, for every button's name: "Oat flat white".

valuenumber—

onValueChange((value: number) => void)—

maxnumber99

addLabelstring"Add"The button before anything is added.

It exposes group semantics, with aria-label, aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.