Leaderboard
Installation
Install the component via the CLI in one command.
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 install react-aria-components tailwind-merge
Examples
Currency
Format values as monetary amounts.
Percentage
Display values as percentages for progress tracking.
With header
Add a header to provide context and structure.
With icon
Include icons alongside entries for visual clarity.
Controlled
Manage leaderboard data programmatically for dynamic updates.
Component API
Leaderboard
The Leaderboard component displays ranked items.
| Prop | Type | Default |
|---|---|---|
className | string | - |
LeaderboardAction
The LeaderboardAction component places actions in the leaderboard header.
| Prop | Type | Default |
|---|---|---|
className | string | - |
LeaderboardContent
The LeaderboardContent component contains leaderboard rows.
| Prop | Type | Default |
|---|---|---|
className | string | - |
LeaderboardEnd
The LeaderboardEnd component renders trailing content for a leaderboard row.
| Prop | Type | Default |
|---|---|---|
className | string | - |
LeaderboardHeader
The LeaderboardHeader component groups the leaderboard title and actions.
| Prop | Type | Default |
|---|---|---|
className | string | - |
LeaderboardItem
The LeaderboardItem component represents one ranked leaderboard row.
| Prop | Type | Default |
|---|---|---|
className | string | - |
onAction | () => void | - |
LeaderboardStart
The LeaderboardStart component renders leading content for a leaderboard row.
| Prop | Type | Default |
|---|---|---|
className | string | - |
LeaderboardTitle
The LeaderboardTitle component renders the leaderboard heading.
| Prop | Type | Default |
|---|---|---|
className | string | - |
See the React Aria for the full API reference.
