Install with the CLI

Add Leaderboard to your Roblox project in one command. Requires Node 18+ and a Roblox project — run robloxui init first if you don't have one yet. See the docs.

bashnpx robloxui add leaderboard

First time? Start with the documentation.

Import

tsx

import { Leaderboard } from "./src/client/ui/components/leaderboard";

Usage

tsx

local LeaderboardService = require(script.Parent.LeaderboardService)
LeaderboardService:SetEntries({
  { name = "Alice", score = 980, ping = 24 },
  { name = "Bob", score = 1240, ping = 38 },
})

Leaderboard

TSX + LuauFree

Server-synced ranked list with deterministic tiebreakers (score desc → ping asc → name). LeaderboardService.SetEntries sorts and assigns ranks; LeaderboardView renders a titled panel with medal-colored top-3 rows and muted rest. Plug any backend (ordered-backup or RemoteEvent) into SetEntries.

by RobloxUI Team

View Source

Details

Author	RobloxUI Team
Framework	Roblox-TS + React-Luau
Category	Systems
Dependencies	@rbxts/react
Theme Tokens	colors.primary, colors.primaryLight, colors.primaryDark, colors.secondary, colors.secondaryLight, colors.secondaryDark, colors.accent, colors.accentLight, colors.accentDark, colors.bg, colors.bgSecondary, colors.bgTertiary, colors.surface, colors.border, colors.borderLight, colors.glow, colors.text, colors.textPrimary, colors.textSecondary, colors.textMuted, colors.success, colors.successLight, colors.error, colors.errorLight, colors.warning, colors.info, colors.gold, colors.goldLight, gradients.primary, gradients.gold, gradients.health, gradients.mana, gradients.purple, gradients.card, gradients.surface, gradients.surfaceLight, spacing.3xs, spacing.2xs, spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl, radius.sm, radius.md, radius.lg, radius.xl

Leaderboard — RobloxUI