Leaderboard 3 - Compact card with progress bars and your rankPro
A narrow leaderboard card showing the top five with avatars, scores and relative progress bars, plus a pinned "You" row at the bottom showing your own rank and the gap to the next spot. Use it in an app sidebar, course dashboard or fitness app where space is tight.
About Leaderboard 3
A narrow leaderboard card showing the top five with avatars, scores and relative progress bars, plus a pinned "You" row at the bottom showing your own rank and the gap to the next spot. Use it in an app sidebar, course dashboard or fitness app where space is tight.
Leaderboard 3 is a pro leaderboard block for React, built on shadcn/ui and Tailwind CSS. It ships as 107 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- leaderboard
- card
- compact
- sidebar
- progress
- gamification
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/leaderboard-03Dependencies installed automatically: lucide-react.
Uses: avatar, reveal, utils.
Usage
import Leaderboard03 from "@/components/blocks/leaderboard-03"
export default function Page() {
return <Leaderboard03 />
}