Fuelex Leaderboard

Premium Discord Leaderboard UI Package

High-quality, customizable leaderboard image generator for Discord bots

✨ Features

• 🎨 Premium Black & Yellow Theme - Sleek, modern design with neon glow effects
• 🏆 Tier-based Rank Styling - Gold, Silver, Bronze gradients for top 3
• 📊 Multiple Stat Types - Voice, XP, Messages, Invites, Economy, Levels
• ⚡ High Performance - Built with @napi-rs/canvas for native speed
• 🔧 Fully Customizable - Easy to configure and extend
• 📱 Discord Optimized - Perfect dimensions for embeds and messages

📦 Installation

npm install fuelex-leaderboard

🚀 Quick Start

const { LeaderboardCard } = require('fuelex-leaderboard');
const fs = require('fs');

// Create a voice leaderboard
const leaderboard = new LeaderboardCard({
    type: 'voice',
    title: 'Voice Leaderboard',
    users: [
        { rank: 1, userId: '123', username: 'DragonSlayer', value: 43200, isActive: true },
        { rank: 2, userId: '456', username: 'NightWolf', value: 38500, isActive: true },
        { rank: 3, userId: '789', username: 'PhoenixRider', value: 32100, isActive: false },
        // ... more users
    ],
    rowCount: 10,
    footer: 'fuelex-bot.dev'
});

// Generate the image
const buffer = await leaderboard.render();
fs.writeFileSync('leaderboard.png', buffer);

📋 Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | type | string | 'xp' | Leaderboard type: voice, xp, messages, invites, economy, levels | | title | string | Auto-generated | Custom title for the leaderboard | | users | Array | [] | Array of user objects | | rowCount | number | 10 | Number of rows to display (5, 10, 15, 20) | | footer | string | null | Optional footer text | | showHeader | boolean | true | Whether to show the header section | | showAvatars | boolean | true | Whether to display user avatars |

👤 User Object

{
    rank: 1,              // User's rank position (1-indexed)
    userId: '123456789',  // Unique identifier
    username: 'Player1',  // Display name
    value: 12345,         // Stat value (formatted based on type)
    avatar: 'https://...', // Optional avatar URL
    isActive: true        // Optional status indicator
}

🎨 Stat Types

| Type | Icon | Value Format | |------|------|--------------| | voice | 🔊 Speaker | Duration (12h 34m) | | xp | ⭐ Star | Number with XP suffix | | messages | 💬 Message | Plain number | | invites | 👥 User | Plain number | | economy | 💰 Coin | Currency format ($1,234) | | levels | 🏆 Trophy | Level prefix (Lv. 50) |

🖼️ Output Formats

// PNG (default, best for Discord)
const pngBuffer = await leaderboard.render();

// JPEG (smaller file size)
const jpegBuffer = await leaderboard.renderJPEG(90); // quality: 0-100

🎯 Discord.js Integration

const { AttachmentBuilder } = require('discord.js');
const { LeaderboardCard } = require('fuelex-leaderboard');

async function sendLeaderboard(interaction) {
    const leaderboard = new LeaderboardCard({
        type: 'voice',
        users: await fetchTopUsers(),
        rowCount: 10
    });
    
    const buffer = await leaderboard.render();
    const attachment = new AttachmentBuilder(buffer, { name: 'leaderboard.png' });
    
    await interaction.reply({ files: [attachment] });
}

🎨 Color Palette

| Element | Color | Hex | |---------|-------|-----| | Background | Deep Matte Black | #0A0A0A | | Card | Charcoal | #1A1A1A | | Neon Yellow | Primary Accent | #FFEA00 | | Gold (#1) | Gradient | #FFD700 → #FFA500 | | Silver (#2) | Muted | #C0C0C0 | | Bronze (#3) | Warm | #CD7F32 |

📁 Project Structure

fuelex-leaderboard/
├── src/
│   ├── index.js           # Main entry point
│   ├── core/
│   │   └── theme.js       # Colors, constants, utilities
│   ├── components/
│   │   ├── LeaderboardCard.js
│   │   ├── RankBadge.js
│   │   ├── StatIcon.js
│   │   └── UserRow.js
│   └── utils/
│       ├── effects.js     # Glow, shadows, gradients
│       └── fonts.js       # Font management
├── examples/
│   └── basic.js           # Usage examples
├── output/                 # Generated images
├── package.json
└── README.md

🔗 Links

• Website: fuelex-bot.dev
• Discord: Join Server
• GitHub: fuelex/fuelex-leaderboard

Built with 💛 by the Fuelex Team