Spin Wheel

NewPro

A prize wheel that spins with a long, realistic slowdown, ticks its pointer and lands on a random segment.

Press spin to try your luck

Customize

Segments8

Duration4.5s

Installation

Spin Wheel is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy spin-wheel.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { SpinWheel } from "@/components/ui/spin-wheel";

<SpinWheel
  segments={[
    { label: "100", color: "#ff784f" },
    { label: "Gem", color: "#171412" },
    { label: "x2", color: "#ffc24a" },
  ]}
  duration={4.5}
  onResult={(segment) => grant(segment.label)}
/>

Props

4 properties

Property	Type	Default	Description
segments	{ label: string; color: string }[]	8 sample prizes	Wheel segments, clockwise from the top.
duration	number	4.5	Spin length in seconds.
onResult	(segment: WheelSegment, index: number) => void	—	Called with the winning segment once the wheel stops.
className	string	—	Extra classes for the wrapper.

Dependencies: motion