Contribution Graph
GitHub-style year heatmap for daily activity counts — months, weekdays, legend, and intensity levels.
Basic Usage
Pass a map of
Y-m-d => count
. By default the graph covers the
last 12 months ending today.
1,440 contributions in the last year
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Less
More
<neura::contribution-graph :data="[
'2026-01-15' => 3,
'2026-01-16' => 8,
'2026-03-02' => 1,
]" />Colors
Use the GitHub-like
green
palette, or brand
primary
/
emerald
.
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Less
More
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Less
More
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Less
More
<neura::contribution-graph :data="$data" color="green" />
<neura::contribution-graph :data="$data" color="primary" />
<neura::contribution-graph :data="$data" color="emerald" />Sizes
Cell density:
sm
,
md
(default),
lg
.
Small
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Less
More
Large
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Less
More
<neura::contribution-graph :data="$data" size="sm" />
<neura::contribution-graph :data="$data" size="lg" />Custom range & thresholds
Bound the calendar with
from
/
to
,
and tune intensity steps with
thresholds
(floors for levels
1–4).
Last 3 months
Jun
Jul
Aug
Sep
Less
More
<neura::contribution-graph
:data="$data"
from="2026-04-01"
to="2026-07-28"
:thresholds="[1, 2, 4, 8]"
heading="Last 3 months"
/>Props
| Property | Type | Default | Description |
|---|---|---|---|
| data | array | [] |
Y-m-d => count
or list of
{ date, count }
|
| from / to | string | null | Inclusive date bounds. Defaults to the last year ending today. |
| color | string | green | green · primary · emerald
|
| size | string | md | sm · md · lg
|
| thresholds | array | [1, 3, 6, 10] | Count floors for intensity levels 1–4 |
| heading | string | null | Override the auto total label |
| showTotal | bool | true | Show the contributions heading |
| showMonths | bool | true | Month labels above the grid |
| showWeekdays | bool | true | Mon / Wed / Fri labels |
| showLegend | bool | true | Less → More color scale |
| actions | slot | — | Optional content aligned opposite the heading (e.g. settings) |