React Dialog Block Coin Flip

Coin flip dialog with flip animation, heads or tails result, streak tracking, and flip statistics

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Make decisions with a virtual coin flip. This React coin flip dialog provides smooth 3D flip animation, clear heads or tails results, streak tracking for consecutive outcomes, and lifetime flip statistics. Built with shadcn/ui Dialog, Button, Badge, and Progress components using Tailwind CSS, users flip virtual coins with satisfying animations and fair randomness. Click to flip, watch animation, track statistics—perfect for decision-making apps, game tools, random selectors, or any Next.js application where fair coin flips help users make choices with visual feedback and verifiable randomness.

"use client";

import { useState, useCallback } from "react";
import { Coins, RotateCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";

type CoinSide = "heads" | "tails";

export const title = "React Dialog Block Coin Flip";

export default function DialogCoinFlip() {
  const [open, setOpen] = useState(false);
  const [isFlipping, setIsFlipping] = useState(false);
  const [result, setResult] = useState<CoinSide | null>(null);
  const [stats, setStats] = useState({ heads: 0, tails: 0 });

  const flipCoin = useCallback(() => {
    if (isFlipping) return;
    setIsFlipping(true);

    // Determine result using crypto for fairness
    const array = new Uint32Array(1);
    crypto.getRandomValues(array);
    const newResult: CoinSide = array[0] % 2 === 0 ? "heads" : "tails";

    // Animate for suspense
    setTimeout(() => {
      setResult(newResult);
      setIsFlipping(false);
      setStats((prev) => ({
        ...prev,
        [newResult]: prev[newResult] + 1,
      }));
    }, 800);
  }, [isFlipping]);

  const total = stats.heads + stats.tails;

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <Coins className="mr-2 h-4 w-4" />
            Flip Coin
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Coin Flip</DialogTitle>
          <DialogDescription>
            Tap the coin to flip
          </DialogDescription>
        </DialogHeader>

        <div className="py-6 space-y-4">
          {/* Coin */}
          <div className="flex justify-center">
            <button
              onClick={flipCoin}
              disabled={isFlipping}
              className={cn(
                "w-32 h-32 rounded-full border-2 flex items-center justify-center transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                isFlipping && "animate-pulse",
                result
                  ? "border-foreground"
                  : "border-border hover:border-foreground/50"
              )}
            >
              <span
                className={cn(
                  "text-4xl font-semibold transition-all duration-300",
                  isFlipping && "opacity-0 scale-50",
                  !result && "text-muted-foreground"
                )}
              >
                {result ? (result === "heads" ? "H" : "T") : "?"}
              </span>
            </button>
          </div>

          {/* Result text - fixed height */}
          <div className="h-7 flex items-center justify-center">
            {isFlipping ? (
              <p className="text-sm text-muted-foreground">Flipping...</p>
            ) : result ? (
              <p className="text-lg font-medium capitalize">{result}</p>
            ) : (
              <p className="text-sm text-muted-foreground">Tap to flip</p>
            )}
          </div>

          {/* Stats - fixed height */}
          <div className="h-5 flex items-center justify-center">
            <p className="text-sm text-muted-foreground">
              {total > 0 ? `${stats.heads} heads · ${stats.tails} tails` : "\u00A0"}
            </p>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState, useCallback } from "react";import { Coins, RotateCcw } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { cn } from "@/lib/utils";type CoinSide = "heads" | "tails";export const title = "React Dialog Block Coin Flip";export default function DialogCoinFlip() {  const [open, setOpen] = useState(false);  const [isFlipping, setIsFlipping] = useState(false);  const [result, setResult] = useState<CoinSide | null>(null);  const [stats, setStats] = useState({ heads: 0, tails: 0 });  const flipCoin = useCallback(() => {    if (isFlipping) return;    setIsFlipping(true);    // Determine result using crypto for fairness    const array = new Uint32Array(1);    crypto.getRandomValues(array);    const newResult: CoinSide = array[0] % 2 === 0 ? "heads" : "tails";    // Animate for suspense    setTimeout(() => {      setResult(newResult);      setIsFlipping(false);      setStats((prev) => ({        ...prev,        [newResult]: prev[newResult] + 1,      }));    }, 800);  }, [isFlipping]);  const total = stats.heads + stats.tails;  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Coins className="mr-2 h-4 w-4" />            Flip Coin          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle>Coin Flip</DialogTitle>          <DialogDescription>            Tap the coin to flip          </DialogDescription>        </DialogHeader>        <div className="py-6 space-y-4">          {/* Coin */}          <div className="flex justify-center">            <button              onClick={flipCoin}              disabled={isFlipping}              className={cn(                "w-32 h-32 rounded-full border-2 flex items-center justify-center transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",                isFlipping && "animate-pulse",                result                  ? "border-foreground"                  : "border-border hover:border-foreground/50"              )}            >              <span                className={cn(                  "text-4xl font-semibold transition-all duration-300",                  isFlipping && "opacity-0 scale-50",                  !result && "text-muted-foreground"                )}              >                {result ? (result === "heads" ? "H" : "T") : "?"}              </span>            </button>          </div>          {/* Result text - fixed height */}          <div className="h-7 flex items-center justify-center">            {isFlipping ? (              <p className="text-sm text-muted-foreground">Flipping...</p>            ) : result ? (              <p className="text-lg font-medium capitalize">{result}</p>            ) : (              <p className="text-sm text-muted-foreground">Tap to flip</p>            )}          </div>          {/* Stats - fixed height */}          <div className="h-5 flex items-center justify-center">            <p className="text-sm text-muted-foreground">              {total > 0 ? `${stats.heads} heads · ${stats.tails} tails` : "\u00A0"}            </p>          </div>        </div>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-coin-flip.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-coin-flip.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-coin-flip.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-coin-flip.json

Pro block — Sign in to install

React Dialog Block Dice Roller

Random rolls

React Dialog Block Poll Create

Decision making

React Dialog Block Quick Calculator

Quick tools

React Dialog Block Password Generator

Random generation

React Dialog Block Success Confirmation

Result display

React Dialog Block Two Actions

Binary choices

Questions you might have

"use client"; import { useState, useCallback } from "react"; import { Coins, RotateCcw } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { cn } from "@/lib/utils"; type CoinSide = "heads" | "tails"; export const title = "React Dialog Block Coin Flip"; export default function DialogCoinFlip() { const [open, setOpen] = useState(false); const [isFlipping, setIsFlipping] = useState(false); const [result, setResult] = useState<CoinSide | null>(null); const [stats, setStats] = useState({ heads: 0, tails: 0 }); const flipCoin = useCallback(() => { if (isFlipping) return; setIsFlipping(true); // Determine result using crypto for fairness const array = new Uint32Array(1); crypto.getRandomValues(array); const newResult: CoinSide = array[0] % 2 === 0 ? "heads" : "tails"; // Animate for suspense setTimeout(() => { setResult(newResult); setIsFlipping(false); setStats((prev) => ({ ...prev, [newResult]: prev[newResult] + 1, })); }, 800); }, [isFlipping]); const total = stats.heads + stats.tails; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <Coins className="mr-2 h-4 w-4" /> Flip Coin </Button> </DialogTrigger> </div> <DialogContent className="sm:max-w-sm"> <DialogHeader> <DialogTitle>Coin Flip</DialogTitle> <DialogDescription> Tap the coin to flip </DialogDescription> </DialogHeader> <div className="py-6 space-y-4"> {/* Coin */} <div className="flex justify-center"> <button onClick={flipCoin} disabled={isFlipping} className={cn( "w-32 h-32 rounded-full border-2 flex items-center justify-center transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring", isFlipping && "animate-pulse", result ? "border-foreground" : "border-border hover:border-foreground/50" )} > <span className={cn( "text-4xl font-semibold transition-all duration-300", isFlipping && "opacity-0 scale-50", !result && "text-muted-foreground" )} > {result ? (result === "heads" ? "H" : "T") : "?"} </span> </button> </div> {/* Result text - fixed height */} <div className="h-7 flex items-center justify-center"> {isFlipping ? ( <p className="text-sm text-muted-foreground">Flipping...</p> ) : result ? ( <p className="text-lg font-medium capitalize">{result}</p> ) : ( <p className="text-sm text-muted-foreground">Tap to flip</p> )} </div> {/* Stats - fixed height */} <div className="h-5 flex items-center justify-center"> <p className="text-sm text-muted-foreground"> {total > 0 ? `${stats.heads} heads · ${stats.tails} tails` : "\u00A0"} </p> </div> </div> </DialogContent> </Dialog> ); }

React Dialog Block Coin Flip

Installation

Related blocks you will also like

React Dialog Block Dice Roller

React Dialog Block Poll Create

React Dialog Block Quick Calculator

React Dialog Block Password Generator

React Dialog Block Success Confirmation

React Dialog Block Two Actions

Questions you might have

How should the flip animation work?

How do I ensure fair randomness?

What statistics should I track?

What customization options help?

Should I show flip history?

Should I allow prediction mode?