Visualizations
Leaderboard
Display ranked data in a clean vertical layout ideal for presenting metrics scores and performance indicators clearly and consistently at a glance across dashboards
Basic
A simple leaderboard displaying ranked items with values.
Loading...
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/leaderboard
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm
pnpm
yarn
bun
npm install react-aria-components
Currency
Format values as monetary amounts.
Loading...
Percentage
Display values as percentages for progress tracking.
Loading...
With header
Add a header to provide context and structure.
Loading...
With icon
Include icons alongside entries for visual clarity.
Loading...
Controlled
Manage leaderboard data programmatically for dynamic updates.
Loading...
Intent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.