Leaderboard Table
A ranked leaderboard table with medals for top 3, delta indicators, and row highlighting.
Preview
Import
import { LeaderboardTable } from "@sigil-ui/components";Usage
<LeaderboardTable
title="Top Contributors"
valueLabel="Points"
rows={[
{ label: "Alice", value: 2480, delta: "+120" },
{ label: "Bob", value: 2310, delta: "+85" },
]}
showMedals
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | LeaderboardRow[] | — | Ranked entries with label, value, delta |
valueLabel | string | "Score" | Column header for values |
title | string | — | Optional header title |
showMedals | boolean | true | Show medal emoji for top 3 |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary-muted | Highlighted row background |
--s-success | Positive delta color |
--s-error | Negative delta color |
--s-border | Table borders |
--s-surface | Background |
--s-surface-elevated | Row hover |
--s-text | Names and values |
--s-text-muted | Rank numbers, column headers |
--s-font-mono | Values, ranks, deltas font |
--s-radius-card | Container radius |
--s-shadow-sm | Container shadow |
--s-border-style | Border style |
--s-duration-fast | Hover transition |