## Leaderboard (S—178)

A ranked list that re-sorts with FLIP motion when the period changes; rank changes show as small up / down marks.

- URL: https://sundaeui.dev/components/leaderboard
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/leaderboard.json`
- Tags: leaderboard, ranking, sort, list, gamification, flip

Switching between This week, This month and All time re-ranks the rows and each row glides to its new place, so you can follow who moved. A ▲3 / ▼1 mark shows the change.
Your own row stays highlighted and pinned at the bottom if it falls out of the top list.

### Usage

```tsx
import { Leaderboard } from '@/components/sundae/leaderboard'

<Leaderboard />
```

### Props

- `data` (`Record<string, { id: string; name: string; score: number }[]>`, required): Rows per period.
- `meId` (`string`): Your row id.
- `top` (`number`, default `5`): Rows shown.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Gamified apps, sales dashboards, community rankings.

### When not to use

- Contexts where ranking people would demotivate them.

### Accessibility

- Period is a radiogroup; the list is an ordered list whose items say rank, name, score and change.
- Reduced motion removes the movement and keeps every state change.