Streak Widget

Daily login/activity streak tracker.

Daily Login Streak

Keep logging in to earn rewards!

4day streak

🏆 Best: 12 days

Features

• Day markers — Visual day-by-day progress
• Current day highlight — Shows today's position
• Reward indicators — Mark reward milestones
• Best streak — Display personal best

Usage

<script setup>
import { FkStreak } from '@fortune-kit/components'

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

<template>
  <FkStreak
    :days="days"
    :current-streak="4"
    :longest-streak="12"
    title="Daily Login Streak"
    subtitle="Keep logging in to earn rewards!"
  />
</template>

Props

Prop	Type	Default	Description
days	StreakDay[]	Required	Array of days
currentStreak	number	Required	Current streak count
longestStreak	number	0	Personal best
title	string	'Daily Streak'	Widget title
subtitle	string	—	Additional text

Day Type

interface StreakDay {
  day: number
  completed: boolean
  isCurrent?: boolean
  reward?: string  // Emoji or text
}

Events

Event	Payload	Description
day-click	StreakDay	When day is clicked