# Live leaderboard
> Live leaderboard: scores tick up, overtaking rows slide past each other with trails, ranks roll and the leader gets a ring.
- Element: `<hf-leaderboard>`
- React: `import { HfLeaderboard } from "@/components/lumesec/hf-leaderboard"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-leaderboard.json
- Page: https://elements.lumesec.ai/components/pixel-hd/leaderboard



Live preview: https://elements.lumesec.ai/view/hf-leaderboard

```html
<hf-leaderboard></hf-leaderboard>
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/hf-leaderboard
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-leaderboard.json
```

## Usage

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-leaderboard.js"></script>

<hf-leaderboard></hf-leaderboard>
```

## 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

| Attribute | React prop | Type     | Default                   | Description                         |
| --------- | ---------- | -------- | ------------------------- | ----------------------------------- |
| `label`   | `label`    | `string` | `Merged 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](/docs/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.