Installation

Requirements

• Node.js 20+
• Vue 3.5+
• Package manager: pnpm (recommended), npm, or yarn

Quick Start

Install the core packages:

pnpm add @fortune-kit/components @fortune-kit/tokens

Import tokens CSS and start using components:

<script setup>
import { FkResultWin, FkLeaderboard } from '@fortune-kit/components'
import '@fortune-kit/tokens/css'
</script>

<template>
  <FkResultWin title="Jackpot!" :amount="50000" currency="$" />
</template>

Package Overview

@fortune-kit/tokens

Design tokens only. Zero runtime dependencies.

pnpm add @fortune-kit/tokens

import { colors, motion, spacing } from '@fortune-kit/tokens'
import '@fortune-kit/tokens/css' // CSS variables

@fortune-kit/headless

Game logic composables. Peer dependency on Vue.

pnpm add @fortune-kit/headless

import { useWheel, useQuiz } from '@fortune-kit/headless'

@fortune-kit/components

Full component library. Depends on tokens and headless.

pnpm add @fortune-kit/components

TypeScript

All packages ship with TypeScript declarations. No additional @types/* packages needed.

import type { WheelSegment, QuizQuestion } from '@fortune-kit/headless'
import type { Colors, Motion } from '@fortune-kit/tokens'

Tree Shaking

All packages use ES modules and are fully tree-shakeable. Only import what you use:

// ✅ Good - only FkResultWin is bundled
import { FkResultWin } from '@fortune-kit/components'

// ❌ Avoid - pulls in everything
import FortuneKit from '@fortune-kit/components'