Componentticket-stub

SlotMachine

Three-reel slot machine with staggered spinning reels, a pulling lever and payline highlight on stop.

Preview

Live Preview

★

◆

BAR

★

◆

BAR

★

◆

BAR

★

◆

BAR

★

◆

BAR

★

◆

BAR

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add slot-machine

Or install the full npm package:

npm install bigbullui

Usage

import { SlotMachine } from "@/components/ui/slot-machine";

<SlotMachine onResult={(r) => console.log(r)} autoPlay />

Source code

slot-machine.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface SlotMachineProps {
  onResult?: (result: string[]) => void;
  autoPlay?: boolean;
}

export function SlotMachine({ onResult, autoPlay = false }: SlotMachineProps) {
  const symbols = ["★", "◆", "7", "BAR"];

  return (
    <div
      className={cn(
        "relative size-48 flex items-end justify-end rounded-md border border-border bg-card p-4 motion-reduce:transition-none",
        "group"
      )}
    >
      <div className="flex gap-2">
        {Array.from({ length: 3 }, (_, reelIndex) => (
          <div
            key={reelIndex}
            className="h-24 w-4 rounded-md border border-border/50 bg-border/50 overflow-hidden"
          >
            {Array.from({ length: 8 }, (_, slotIndex) => (
              <div key={slotIndex} className="p-1 text-center font-mono text-[12px]">
                {symbols[slotIndex % symbols.length]}
              </div>
            )).map((el) => el)}
          </div>
        ))}
      </div>
    </div>
  );
}

Props

Prop	Type	Description
autoPlay	boolean	Spin automatically on mount.
onResult	(result: string[]) => void	Called with the three stopped symbols.
className	string	Additional classes.