Liquid Stepper

50%

Installation

npx shadcn@latest add https://liquidcomponents.xyz/r/liquid-stepper.json

Usage

import { LiquidStepper } from "@/components/ui/liquid-stepper"

export function Guests() {
  const [guests, setGuests] = useState(2)
  return <LiquidStepper value={guests} onValueChange={setGuests} min={0} max={10} aria-label="Guests" />
}

Hold a button and it repeats. The value pops on every change, and the buttons disable at min and max. Use step for bigger jumps, format to label the value and showValue={false} for the compact iOS form.

Examples

Quantity

AirPods Pro$129 each

Total$129

<LiquidStepper value={quantity} onValueChange={setQuantity} min={1} max={9} aria-label="Quantity" />

Settings

Font sizeApplies to reading view

17 pt

SnoozeMinutes between alarms

ZoomCompact, no value

<LiquidStepper defaultValue={17} min={12} max={28} format={(value) => `${value} pt`} aria-label="Font size" />
<LiquidStepper defaultValue={1} min={0} showValue={false} aria-label="Zoom" />

API

Prop	Type	Default
`value`	`number`	none
`defaultValue`	`number`	`0`
`onValueChange`	`(value: number) => void`	none
`min`	`number`	`-Infinity`
`max`	`number`	`Infinity`
`step`	`number`	`1`
`format`	`(value: number) => ReactNode`	none
`showValue`	`boolean`	`true`
`disabled`	`boolean`	`false`
`aria-label`	`string`	`"Value"`

Keyboard

Tab moves between the two buttons, and Enter or Space steps once. Holding the pointer down repeats.