SepOctNovDecJanFebMarAprMayJunJulAugSep
995 activities last year
LessMore

Streak grid

A yearly activity grid for visualizing streaks and daily progress.

Installation

npx shadcn@latest add qubydev/bunui/streak-grid

How to use

demo.tsx
import { StreakGrid } from "@/components/ui/streak-grid"
import { TooltipProvider } from "@/components/ui/tooltip"


const activity = [
  { date: "2026-09-01", count: 2 },
  { date: "2026-09-02", count: 6 },
  { date: "2026-09-03", count: 0 },
]


export function Demo() {
  return (
    <TooltipProvider>
      <StreakGrid
        data={activity}
        itemLabel="activities"
        weekStartsOn={1}
      />
    </TooltipProvider>
  )
}

Props

Options you can pass to customize this component.

Prop
Type
Description
data*
StreakGridDay[]

Daily activity entries with a date, count, and optional label or explicit intensity level.

weekStartsOn
01

Choose Sunday (0) or Monday (1) as the first day of the week.

itemLabel
string

Text shown after the total count in the summary.

showLegend
boolean

Shows the Less-to-More intensity legend.

showSummary
boolean

Shows the total activity count beneath the grid.

showMonthLabels
boolean

Shows month labels above multi-week views.

cellSize
number

Cell size in pixels. Values are clamped between 8 and 28.

gap
number

Gap between cells in pixels. Values are clamped between 1 and 12.

formatTooltip
(day: StreakGridResolvedDay) => React.ReactNode

Optional custom tooltip renderer for pointer and keyboard users.

formatSelection
(day: StreakGridResolvedDay) => React.ReactNode

Optional custom summary content shown for three seconds after clicking or tapping a day.

className
string

Extra classes merged onto the component root.

Dependencies

tooltip

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Bun UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.