Pro
Dice roll
Dice that tumble and land. Roll and each die spins through several turns, hops and settles face up on its number, one just after another; the total is announced when they have all landed.
pnpm dlx shadcn@latest add @caliper/dice-rollWhen to use
Use it for
- Games, random picks and icebreakers.
- Playful moments: who goes first, a random reward.
Skip it when
- Anything where the result must be auditable; use a server-side draw and show its result.
- More than three dice; use numbers.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Lands on its number
- The tumble is whole turns plus the turn that shows the rolled face, so the die settles exactly on its number.
Styling
- A real die
- Opposite faces add up to seven, as on real dice.
Installation
pnpm dlx shadcn@latest add @caliper/dice-roll
Adds its 3 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.
import { DiceRoll } from "@/components/ui/dice-roll"
The worked example comes with Pro
The 23-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
DiceRoll
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes img semantics, with aria-label 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
- Spin wheelA 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.
- Slot textText whose characters roll like a slot machine when the value changes.
- Card dealerA card table with a face-down deck, a fanned hand and a discard pile. Dealt cards arc off the deck and turn over in flight, played cards arc to the pile, sorting makes the hand's cards hop over each other into order, and collecting sweeps everything back.