Daily Rewards
Pro
A 7-day reward calendar where today's tile pulses, and claiming it pops the tile with a burst of coins.
Daily rewards
Day 3 of 7
- Day 1×100, collected
- Day 2×150, collected
- Day 4×250, locked
- Day 5×10, locked
- Day 6×500, locked
- Day 7Mystery chest, locked
Customize
3
#ff784f
Installation
Daily Rewards is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy daily-rewards.tsx into components/ui and run npm install motion.
Usage
import { DailyRewards } from "@/components/ui/daily-rewards";
<DailyRewards
day={user.loginDay}
rewards={[
{ kind: "coins", amount: 100 },
{ kind: "gems", amount: 5 },
// …seven in total
]}
onClaim={(day, reward) => grant(reward)}
/>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| rewards | DailyReward[] | 7 sample rewards | Rewards with kind (coins, gems or chest), amount and an optional label. |
| day | number | 1 | Today, counted from 1. Earlier days show as collected, later days as locked. |
| onClaim | (day: number, reward: DailyReward) => void | — | Called when today's reward is claimed. |
| color | string | "#ff784f" | Highlight color for today's tile. |
| className | string | — | Extra classes for the panel. |
Dependencies: motion