Daily Rewards

Track daily login streaks with milestone rewards and progress indicators.

Daily Login Bonus

Your Streak

Log in every day for bigger rewards!

3day streak

🏆 Best: 12 days

Weekly Progress42.857142857142854 / 100

🎁

🎁

🏆

Day 3

Day 6

Day 7

Features Demonstrated

• Streak tracking - Visual day-by-day progress
• Milestone rewards - Special rewards at milestones
• Progress bar - Shows progress to next milestone
• Current day highlight - Clear indication of today
• Reward reveal - Animated reward discovery

Code

<script setup lang="ts">
import { ref } from 'vue'
import { FkStreak, FkProgress, FkRewardReveal } from '@fortune-kit/components'

const days = [
  { day: 1, completed: true },
  { day: 2, completed: true },
  { day: 3, completed: true, reward: '🎁' },
  { day: 4, completed: false, isCurrent: true },
  { day: 5, completed: false },
  { day: 6, completed: false },
  { day: 7, completed: false, reward: '🏆' }
]

const currentStreak = ref(3)
const longestStreak = ref(12)
</script>

<template>
  <FkStreak
    :days="days"
    :current-streak="currentStreak"
    :longest-streak="longestStreak"
    title="Daily Login Bonus"
    subtitle="Log in every day for rewards!"
  />
</template>