@dancingteeth/rep-leaderboards-ui

Public npm package: REP Leaderboards reference screen (RepLeaderboardsScreen) aligned with Figma REP_WEB_ASSETS_SOURCE and **@dancingteeth/rep-design** (rep-cmp-*, rep-type-*).

Install

npm install @dancingteeth/rep-leaderboards-ui @dancingteeth/rep-design

Peer: React 19 (react, react-dom). Tailwind v4 is expected where you use the design-system CSS.

Bundler: repLeaderboardAssets comes from @dancingteeth/rep-design and uses new URL(…, import.meta.url) per file — the usual pattern for Vite, Webpack 5, Rspack, Turbopack, and similar bundlers so binaries land in your app’s build output with stable URLs. Next.js App Router or other setups without that behavior: copy node_modules/@dancingteeth/rep-design/src/assets/rep-leaderboards/* into public/rep-leaderboards/ and point img src at /rep-leaderboards/... instead of importing leaderboard-assets (see @dancingteeth/rep-design/AGENTS.md).

What you get

• **RepLeaderboardsScreen** — full-screen demo layout (sidebar + main + table).
• **repLeaderboardAssets** — URLs from @dancingteeth/rep-design (import.meta.url asset URLs under src/assets/rep-leaderboards/*); this package re-exports the map for compatibility.
• **figmaTraceAttrs** — optional data-* trace on the screen root.

Assets (shipped with @dancingteeth/rep-design)

Leaderboards raster/SVG live in @dancingteeth/rep-design (src/assets/rep-leaderboards/). You do not need a duplicate under public/rep-leaderboards/ when your bundler resolves import.meta.url static assets from dependencies (typical Vite / Webpack 5 setups).

Refreshing from Figma (maintainers, monorepo): canonical exports stay in apps/web/public/rep-leaderboards/. Then run from repo root:

pnpm rep-design:sync-leaderboard-assets

CSS

Import the same chain as the example app (Tailwind v4 + REP tokens + layout utilities), for example:

• @import "@dancingteeth/rep-design/rep-design-system.css";
• @import "@dancingteeth/rep-design/rep-components.css";
• @source / @import paths so Tailwind scans this package’s src (see examples/rep-leaderboards-vite/src/index.css).

Runnable reference (stakeholders)

In this repository:

pnpm install
pnpm dev:leaderboards-example

Opens http://localhost:5174 (Vite example that depends on this package from the workspace).

v0: Stakeholders can import the monorepo via v0 Git Import and work from the repo root (full tree so apps/web/public/rep-leaderboards/ exists for predev). Then **pnpm dev:leaderboards-example. Details: **examples/rep-leaderboards-vite/README.md → Share with stakeholders (v0).

Publish (maintainers)

Primary path (same as @dancingteeth/rep-design): run pnpm changeset at the repo root, include **@dancingteeth/rep-leaderboards-ui**, merge to main. The Release workflow uses **secrets.NPM_TOKEN**, verifies this package, then **changeset publish** to https://registry.npmjs.org (see .github/workflows/release.yml).

Manual / dry run (local):

pnpm verify:rep-leaderboards-ui
pnpm rep-leaderboards-ui:publish:dry
pnpm -C packages/rep-leaderboards-ui publish --access public

prepublishOnly runs the verify script. Keep **@dancingteeth/rep-design** within the semver range in this package’s dependencies before publishing.

Changelog

See CHANGELOG.md.

Backend integration

For integrating real backend logic while keeping Figma-first pixel parity with this layout, see:

• BACKEND_INTEGRATION.md (package-local)
• docs/LEADERBOARDS_BACKEND_INTEGRATION.md (full repo playbook)