Leaderboard Showcase

A complete leaderboard example with live updates, highlighting, and rank change indicators.

Show rank changes

Highlight player:NoneProGamer99LuckyDragonWheelMasterJackpotHunterCasinoKingSlotQueenBigWinner2024FortuneSeekerGoldenAceLuckyCharm

Max visible:AllTop 3Top 5Top 10

#PlayerScore

🥇ProGamer99–125,000

🥈LuckyDragon▲98,500

🥉WheelMaster▼87,200

4JackpotHunter▲76,100

5CasinoKing–65,400

6SlotQueen▼54,300

7BigWinner2024▲43,200

8FortuneSeeker–32,100

9GoldenAce▼28,700

10LuckyCharm▲21,500

10Players

125,000Top Score

Features Demonstrated

• Rank medals - Gold, silver, bronze for top 3
• Rank change indicators - Up, down, same arrows
• Player highlighting - Highlight current user
• Score formatting - Locale-aware number formatting
• Scrollable list - Handles large player lists

Code

<script setup lang="ts">
import { ref } from 'vue'
import { FkLeaderboard } from '@fortune-kit/components'

const entries = ref([
  { id: '1', rank: 1, name: 'ProGamer99', score: 125000, change: 'same' },
  { id: '2', rank: 2, name: 'LuckyDragon', score: 98500, change: 'up' },
  { id: '3', rank: 3, name: 'WheelMaster', score: 87200, change: 'down' },
  // ... more entries
])

const currentUserId = ref('4')
</script>

<template>
  <FkLeaderboard
    :entries="entries"
    :highlight-id="currentUserId"
    show-change
  />
</template>

Try It

Use the controls above to:

• Toggle rank change indicators
• Select different players to highlight
• Add new players to the list
• Simulate score updates