Introduction

Fortune Kit is a Vue 3 component library designed specifically for iGaming applications — casinos, slots, poker, sports betting, and similar platforms.

Why Fortune Kit?

The Problem

Building iGaming UIs comes with unique challenges:

• Result feedback patterns — Win/Lose states need distinct, accessible visual treatments
• High-frequency updates — Leaderboards, live scores, jackpots update rapidly
• Trust & transparency — Users need to understand odds, outcomes, and fairness
• Animations that matter — Spin physics, card flips, celebration effects aren't decorative

Generic UI libraries don't solve these problems. You end up with a patchwork of custom components, inconsistent tokens, and no shared patterns.

The Solution

Fortune Kit provides:

Layer	Package	Purpose
Tokens	@fortune-kit/tokens	Design system source of truth
Headless	@fortune-kit/headless	Game logic without UI
Components	@fortune-kit/components	Ready-to-use Vue components

Architecture Principles

Headless-First

Game engines (wheel, quiz, slots) live in @fortune-kit/headless. They expose state and methods via Vue composables, but render nothing. This lets you:

• Use your own visuals while keeping battle-tested logic
• Test game mechanics without DOM
• Share logic across different UI implementations

Tokens as Source of Truth

Colors, typography, spacing, and motion timing are defined once in @fortune-kit/tokens and exported as:

• CSS custom properties (--fk-color-win-DEFAULT)
• TypeScript types for type-safe usage
• Tailwind preset (coming soon)

Storybook as API Contract

Every component has comprehensive Storybook stories covering:

• All visual states (default, hover, focus, disabled, loading)
• Accessibility testing (a11y addon)
• Stress testing (100+ items in lists)
• Theme toggling (light/dark, custom tokens)

When to Use Fortune Kit

✅ Good fit:

• Casino / slots games
• Sports betting platforms
• Quiz / trivia games with prizes
• Loyalty / gamification features

❌ Not a fit:

• General purpose web apps (use shadcn/ui, Radix)
• Non-gaming dashboards
• Content-heavy websites