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
Leaderboard extends the native <div> element.
classNamestringLeaderboardAction
LeaderboardAction extends the native <div> element.
classNamestringLeaderboardContent
LeaderboardContent extends the native <ul> element.
classNamestringLeaderboardEnd
LeaderboardEnd extends the native <div> element.
classNamestringLeaderboardHeader
LeaderboardHeader extends the native <div> element.
classNamestringLeaderboardItem
LeaderboardItem extends the React Aria Components <ProgressBar> component.
classNamestringonAction() => voidLeaderboardStart
LeaderboardStart extends the React Aria Components <Label> component.
classNamestringLeaderboardTitle
LeaderboardTitle extends the native <div> element.
classNamestringSee the React Aria for the full API reference.
