casino-ui

A reusable React component library for casino game frontends. Built with React 19, Tailwind CSS v4, and Radix UI primitives.

Installation

1. Add the dependency

Add it as npm package:

pnpm add casino-ui

Add it locally:

In your project's package.json, add casino-ui using a relative file path:

{
  "dependencies": {
    "casino-ui": "file:../../../packages/casino-ui"
  }
}

Adjust the relative path based on your project's location relative to packages/casino-ui.

Then install:

pnpm install

2. Install peer dependencies [If you don't have it already]

casino-ui requires the following peer dependencies:

pnpm add react react-dom tailwindcss

| Peer Dependency | Version | | --------------- | ------- | | react | >= 19 | | react-dom | >= 19 | | tailwindcss | >= 4 |

Usage

Importing components

All components are exported from the package root:

import {
  Button,
  Chip,
  ChipRack,
  PokerCard,
  CardShoe,
  CardTable,
  CardScoreBadge,
  ResultBadge,
  Icon,
  GameFooter,
  GameInfoDialog,
  SwitchTableDialog,
  BetPanelRoot,
  BetPanelInput,
  BetPanelActions,
  BetPanelChips,
  BetPanelTimer,
  BetPanelFoldingInfo,
} from "casino-ui";

Toast system

import { CasinoToastContainer, toast } from "casino-ui";

// Add the container to your app root
function App() {
  return (
    <>
      <YourApp />
      <CasinoToastContainer position="bottom-left" />
    </>
  );
}

// Show toasts anywhere
toast.info("Card dealt");
toast.success("You win!");
toast.status.error("Insufficient balance");
toast.action({
  title: "Switch Table?",
  message: "You will leave the current game.",
  actions: [
    { label: "Cancel", onClick: () => {} },
    { label: "Confirm", onClick: handleSwitch, highlight: true },
  ],
});

UI Primitives

Dialog, Drawer, and DropdownMenu primitives (built on Radix UI / Vaul) are also exported:

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  Drawer,
  DrawerContent,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "casino-ui";

Utilities

import { cn, formatAmountDirect } from "casino-ui";
import type { CoinInfo, ChipDenomination } from "casino-ui";

Components

| Component | Description | | ---------------------- | --------------------------------------------------------------------------- | | Button | Action button with primary, secondary, tertiary, grey_pure variants | | Chip | Casino chip with denomination colors, hover/selected effects | | ChipRack | Stacked chip display tray | | PokerCard | Playing card (front/back, all suits & ranks, multiple sizes) | | CardShoe | Card shoe with stacked backs | | CardTable | SVG blackjack table surface | | CardScoreBadge | Score overlay badge for card hands | | ResultBadge | Win/Lose/Bust/Push/Blackjack result display | | Icon | SVG icon system (settings, share, check, sound, etc.) | | GameFooter | Footer bar with settings, game info, invite friends | | GameInfoDialog | Responsive dialog/drawer for game rules & info | | SwitchTableDialog | Dialog for switching multiplayer tables | | BetPanel* | Composable betting panel (root, input, chips, actions, timer) | | CasinoToastContainer | Toast notification container |

Build & Deploy

Build the library

cd packages/casino-ui
pnpm install
pnpm build

This produces:

• dist/*.js + dist/*.d.ts — compiled TypeScript with declarations
• dist/assets/ — SVG assets (card-back, card-shoe-overlay)
• dist/styles/ — CSS stylesheets

Development

Watch mode for TypeScript compilation:

pnpm dev

Storybook

Launch the component explorer:

pnpm storybook

Build a static Storybook site:

pnpm build-storybook

Project structure

packages/casino-ui/
  src/
    index.ts              # Barrel exports
    types.ts              # Shared types (CoinInfo)
    lib/utils.ts          # cn() utility
    utils/format-amount.ts
    components/           # All React components
      ui/                 # Radix/Vaul primitives (dialog, drawer, dropdown)
    styles/               # CSS (design tokens, component styles, toast)
    assets/               # SVG assets
    stories/              # Storybook stories
  dist/                   # Build output
  .storybook/             # Storybook configuration