@fortune-kit/components

Vue 3 UI components for iGaming applications.

Installation

pnpm add @fortune-kit/components

Exports

// Components
import {
  FkResultWin,
  FkResultLose,
  FkResultInfo,
  FkLeaderboard
} from '@fortune-kit/components'

// Re-exports from tokens
import { colors, motion, spacing } from '@fortune-kit/components'

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

// Styles
import '@fortune-kit/components/styles'

Components

FkResultWin

Win state display.

<FkResultWin
  title="You Won!"
  :amount="1000"
  currency="$"
  subtitle="Congratulations!"
/>

Prop	Type	Default
title	string	'You Won!'
amount	number	—
currency	string	—
subtitle	string	—

FkResultLose

Lose state display.

<FkResultLose
  title="No Win"
  subtitle="Better luck next time!"
/>

Prop	Type	Default
title	string	'No Win'
subtitle	string	—

FkResultInfo

Info state display.

<FkResultInfo
  title="Processing..."
  subtitle="Please wait"
/>

Prop	Type	Default
title	string	'Info'
subtitle	string	—

FkLeaderboard

Ranked player list.

<FkLeaderboard
  :entries="players"
  highlight-id="current-user-id"
  show-change
  :max-visible="50"
/>

Prop	Type	Default
entries	LeaderboardEntry[]	Required
highlightId	string	—
showChange	boolean	false
maxVisible	number	—

interface LeaderboardEntry {
  id: string
  rank: number
  name: string
  score: number
  avatar?: string
  change?: 'up' | 'down' | 'same'
}

Plugin Usage

Register all components globally:

import { createApp } from 'vue'
import FortuneKit from '@fortune-kit/components'

const app = createApp(App)
app.use(FortuneKit)