Streak Card
A consistency card showing a current streak count, an inline SVG week-row of filled and empty day cells, and supporting stats.
A consistency card showing a current streak count, an inline SVG week-row of filled and empty day cells, and supporting stats.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Streak Card shows a 14-day deploy streak, defined as at least one successful deploy per day, with a week-row of seven inline SVG day cells, Mon through Sun Jun 9 to Jun 15 2026, the first five filled and the weekend pair empty. A supporting dl carries Best streak 22 days, Deploys this week 5, and Success rate 30d 98.6%. The honest nudge at the bottom reads plainly: streaks are a nudge, not a KPI, missing a day is fine.
The week-day array drives both the SVG fill and the accessible aria-label on each cell. The stat rows below the SVG give the streak a denominator so a 14-day run reads against the 22-day best.
Reach for this block on any developer or team activity dashboard where consistent behavior matters more than raw volume. Wire the streak count and weekDays array to your activity log and update the definition line to match what your product tracks.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the daily deploy consistency card. Other streak surfaces:
Tip: always show the best streak beside the current one; a 14-day current streak reads differently against a 22-day best than against a 3-day best.