Counter

Plus/minus buttons flank an animated number display. SlidingNumber handles the digit transitions. Framer spring physics for layout changes, scale animations on press (1.05x hover, 0.95x tap) for satisfying feedback. Controlled via number and setNumber props. Dark-mode ready pill container. Perfect for quantity selectors, settings panels, or survey inputs.

Installation

npx shadcn@latest add https://www.shadcn.io/r/counter.json

npx shadcn@latest add https://www.shadcn.io/r/counter.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/counter.json

bunx shadcn@latest add https://www.shadcn.io/r/counter.json

Related Components

FAQ