Leaderboard Table
Rank entries by a score or measured value.
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" },
{ label: "Carol", value: 2150, delta: "-30" },
{ label: "Dave", value: 1980, delta: "+200", highlight: true },
{ label: "Eve", value: 1870, delta: "+10" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | LeaderboardRow[] | — | — |
valueLabel | string | — | — |
title | string | — | — |
showMedals | boolean | true | Show medal icons for top 3. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-card | Radius card |
--s-border-style | Border style |
--s-border | Border |
--s-surface | Surface |
--s-shadow-sm | Shadow sm |
--s-text | Text |
--s-text-muted | Text muted |
--s-duration-fast | Duration fast |
--s-primary-muted | Primary muted |
--s-surface-elevated | Surface elevated |
--s-font-mono | Font mono |
--s-success | Success |