Live leaderboard

Live leaderboard: scores tick up, overtaking rows slide past each other with trails, ranks roll and the leader gets a ring.

View as Markdown

<hf-leaderboard>· loading

Trywatch for an overtake, or press Live to pause.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-leaderboard>

Props

labelremounts

<HfLeaderboard label="Merged PRs this quarter" />

Installation

pnpm dlx shadcn@latest add @lumesec/hf-leaderboard

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-leaderboard.json

Usage

import { HfLeaderboard } from "@/components/lumesec/hf-leaderboard";

export function Example() {
  return (
    <HfLeaderboard />
  );
}

Behaviour

Scores tick up live; when a team overtakes another, rows slide past each other with green and red trails and the ranks roll. The leader gets a gold ring.

API reference

Attributes

labelReact proplabelTypestringDefaultMerged PRs this quarter

Heading text. Read once on connect.

Accessibility

Rows are role="listitem" elements in a role="list", each with an aria-label such as 1. Platform, 182.
Rank changes are not announced; there is no live region.
The Live button is a toggle with aria-pressed, and its text switches between Live and Paused.
Bars, trails and the leader ring are drawn on an aria-hidden canvas.
Reduced motion: scores and ranks keep updating, but rows move without sliding, ranks and scores change without rolling, bars resize without easing, and there are no trails, sheen or leader ring.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --lumesec, --lumesec-success and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-muted and --ui-ok.

Notes

Six built-in demo teams receive random score increases every 1.7 s. Updates pause while the element is off-screen or Live is off.
Rows are 40px apart and the list fills the width.

<hf-area>

<hf-donut>

<hf-stat>

<hf-funnel>

Was this page helpful?

Related