remold/ui

Quantity stepper

An add-to-cart button that becomes a quantity stepper: the count rolls up and down, and at one the minus becomes a bin, so the next press folds it back into Add.

Base UIMorph

iPhone 17 Pro256 GB · Deep Blue · £1,099

Things to try

  • Press Add. The button stretches into minus, count and plus.
  • Count up and down. The number rolls like a counter.
  • Go back to one. The minus becomes a bin; press it and the stepper folds back into Add.

Install

npx shadcn@latest add https://your-docs-site/r/quantity-stepper.json

Dependencies

The install command adds these for you. If you copy the code by hand, install them yourself.

npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motion

How it works

  • Built on Base UI. NumberField gives increment, decrement, the arrow keys and the min and max.
  • The button becomes the stepper. Both share a Motion layoutId. The minus reshapes into the bin with Remold.Icon, and the count rolls with the Odometer.
The product picture is an illustration.

Tag input

A tag field where the words you type become the tags: press comma or Enter and the chip forms around the text right where you typed it, with existing tags suggested as you go.

Stepper slider

A number control that's a stepper for small nudges and a slider for big changes. Press − or + to move a step at a time, or drag the number sideways and the stepper stretches into a slider, then folds back when you let go.

On this page

Things to tryInstallDependenciesHow it works