Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

React Dialog Block Dice Roller

Dice roller dialog with multiple dice types, quantity selection, roll animation, history log, and total calculation

Roll the dice with satisfying animations. This React dice roller dialog provides multiple dice types (D4, D6, D8, D10, D12, D20), quantity selection, smooth roll animations, roll history logging, and automatic total calculation. Built with shadcn/ui Dialog, Button, Badge, Select, and ScrollArea components using Tailwind CSS, users roll virtual dice with visual feedback and statistical tracking. Select dice, set quantity, roll with animation—perfect for tabletop gaming apps, RPG companions, board game tools, or any Next.js application where random dice rolling adds excitement and fair chance mechanics.

React Dialog Block Dice Roller preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ