Stepper

The macOS 26 Stepper: a small vertical up/down increment control. A number readout (the kit's Text Field look) sits beside a two-button stack in a bezel — a chevron-up button over a chevron-down button, split by a hairline divider. Geometry is lifted from the Apple macOS 26 UI Kit; colors flip light/dark via the Acrylic theme tokens. It is a controlled custom component (no Radix dependency).

Installation

npx shadcn add https://acrylic-ui.vercel.app/r/stepper.json

Usage

"use client"import { Stepper } from "@/registry/acrylic/stepper"export default function StepperDemo() {  return (    <div className="flex w-full items-center justify-center text-foreground">      <Stepper defaultValue={3} min={0} max={10} />    </div>  )}

import { Stepper } from "@/components/acrylic/stepper"

<Stepper defaultValue={3} min={0} max={10} />

Examples

A basic stepper, one with a custom step, and a disabled stepper.

"use client"import * as React from "react"import { Stepper } from "@/registry/acrylic/stepper"// The Stepper from the Apple macOS 26 UI Kit Steppers page: a number readout plus// an up/down button stack in the kit's bezel. Shows a basic stepper, a custom// step, and a disabled stepper.export default function StepperShowcase() {  const [value, setValue] = React.useState(5)  return (    <div className="flex flex-col gap-4 text-foreground">      <div className="flex items-center gap-3">        <span className="w-16 shrink-0 text-xs text-muted-foreground">basic</span>        <Stepper value={value} onValueChange={setValue} min={0} max={20} />      </div>      <div className="flex items-center gap-3">        <span className="w-16 shrink-0 text-xs text-muted-foreground">step 5</span>        <Stepper defaultValue={30} min={0} max={60} step={5} />      </div>      <div className="flex items-center gap-3">        <span className="w-16 shrink-0 text-xs text-muted-foreground">disabled</span>        <Stepper defaultValue={3} disabled />      </div>    </div>  )}

Props

• value / defaultValue — controlled and uncontrolled current value.
• min / max — clamp bounds (default unbounded); the arrows auto-disable at the edges.
• step — increment per press / keypress (default 1).
• onValueChange(value) — fired when the value changes.
• disabled — disables the whole control.
• size — the five macOS control sizes: mini · small · medium (default) · large · xl.

Notes

• The bezel geometry (W×H 13×16 / 17×20 / 20×24 / 23×28 / 30×36, radius 4 / 5 / 6 / 7 / 9) is lifted from the kit. Radius is uniform ~height ÷ 4 — never capsule, matching the Text Field.
• The bezel uses --acr-control / --acr-control-border; each arrow half hovers to --acr-hover and presses to --acr-chip; the divider is --acr-control-border; the chevron glyph is currentColor — all theme-aware.
• Keyboard: focus the control and press ↑ / ↓ to increment / decrement. It exposes role="spinbutton" with aria-valuenow/min/max.