Pro
Spin wheel
A prize wheel you flick or spin. It keeps the speed you gave it and slows with friction while a flexible pointer ticks against each peg. The prize is drawn by weight before the wheel slows, so the odds are honest however it is spun.
pnpm dlx shadcn@latest add @caliper/spin-wheelWhen to use
Use it for
- Referral rewards, promotions and launch-day giveaways.
- Team rituals: who presents, who picks lunch.
Skip it when
- Anything where the outcome matters to someone's money or access without clear, published odds.
- Choices people should make themselves; use a list.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Drawn first, then landed
- The result is picked by weight when the spin starts, and the wheel is steered to land inside that wedge, never on a peg.
- A pointer that flexes
- Each peg that passes kicks the pointer back and it springs upright, so speed is heard in the rhythm of the ticks.
Usage
- One button
- Spin works from the keyboard and the prize is announced; the wheel is an image named with every prize.
Installation
pnpm dlx shadcn@latest add @caliper/spin-wheel
Adds its 4 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. It is built from SpinWheel and pickWeighted.
import { SpinWheel, pickWeighted } from "@/components/ui/spin-wheel"
The worked example comes with Pro
The 34-line example behind the preview opens here, ready to copy.
- 602 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
API reference
SpinWheel
component
Also accepts the native props of its root element and a ref.
pickWeighted
component
No props of its own; it accepts the native props of its root element.
Accessibility
It exposes img 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 checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Celebration burstOne small burst of confetti when a real milestone completes: the first deploy, a finished setup, a paid invoice. Skipped under reduced motion; the words say what happened.
- Arc pickerChoose a value by moving along an arc.
- Slot textText whose characters roll like a slot machine when the value changes.