Contributions Card

A GitHub-style contributions heat grid - 53 weeks of activity cells with intensity steps, month labels, and a swappable accent color family (nine palettes) so it matches any dashboard theme.

Contributions this year

Provided data

+14.8%

9BLifetime tokens562.7MPeak tokens12h 54mLongest task62 daysTop streak

Activity

Contributions this year: illustrative source-shaped fixture data
Category	Value
Jan 1	0
Jan 11	0
Jan 21	23
Jan 31	3
Feb 10	1
Feb 19	0
Mar 1	10
Mar 11	3
Mar 21	12
Mar 31	0
Apr 10	4
Apr 20	2
Apr 30	12
May 9	2
May 19	13
May 29	0
Jun 8	6
Jun 18	20
Jun 28	1
Jul 8	6
Jul 18	4
Jul 27	9
Aug 6	0
Aug 16	0
Aug 26	0
Sep 5	3
Sep 15	13
Sep 25	0
Oct 5	2
Oct 14	0
Oct 24	4
Nov 3	19
Nov 13	0
Nov 23	0
Dec 3	11
Dec 13	6
Dec 23	9
Jan 2	0
Jan 12	0
Jan 22	36
Feb 1	4
Feb 11	3
Feb 21	1
Mar 3	3
Mar 13	0
Mar 22	6
Apr 1	0
Apr 11	9
Apr 21	0
May 1	9
May 11	0
May 21	3
May 31	3
Jun 9	3
Jun 19	10
Jun 29	13
Jul 9	18
Jul 19	9
Jul 29	2
Aug 8	3
Aug 18	1
Aug 27	4
Sep 6	0
Sep 16	6
Sep 26	0
Oct 6	0
Oct 16	1
Oct 26	8
Nov 5	0
Nov 14	24
Nov 24	0
Dec 4	11
Dec 14	0
Dec 24	0
Jan 4	0
Jan 14	0
Jan 24	1
Feb 2	1
Feb 12	20
Feb 22	19
Mar 4	6
Mar 14	0
Mar 24	0
Apr 3	26
Apr 13	6
Apr 22	2
May 2	0
May 12	9
May 22	1
Jun 1	3
Jun 11	2
Jun 21	2
Jul 1	0
Jul 10	21
Jul 20	9
Jul 30	3
Aug 9	21
Aug 19	22
Aug 29	4
Sep 8	9
Sep 18	13
Sep 27	15
Oct 7	29
Oct 17	6
Oct 27	0
Nov 6	0
Nov 16	6
Nov 26	30
Dec 6	1
Dec 15	10
Dec 25	27
Jan 5	0
Jan 15	6
Jan 25	0
Feb 4	6
Feb 14	6
Feb 24	38
Mar 5	15
Mar 15	4
Mar 25	9
Apr 4	3
Apr 14	6
Apr 24	0
May 4	10
May 14	34
May 23	3
Jun 2	0
Jun 12	1
Jun 22	0
Jul 2	0
Jul 12	6
Jul 22	9
Aug 1	0
Aug 11	1
Aug 20	1
Aug 30	6
Sep 9	2
Sep 19	1
Sep 29	1
Oct 9	4
Oct 19	16
Oct 29	6
Nov 7	1
Nov 17	2
Nov 27	11
Dec 7	14
Dec 17	0
Dec 27	21
Jan 7	6
Jan 17	0
Jan 26	14
Feb 5	6
Feb 15	10
Feb 25	1
Mar 7	9
Mar 17	6
Mar 27	34
Apr 6	9
Apr 15	13
Apr 25	2
May 5	3
May 15	6
May 25	6
Jun 4	17
Jun 14	0
Jun 24	33
Jul 3	6
Jul 13	0
Jul 23	6
Aug 2	2
Aug 12	0
Aug 22	9
Sep 1	9
Sep 11	0
Sep 20	1
Sep 30	12
Oct 10	2
Oct 20	9
Oct 30	2
Nov 9	0
Nov 19	4
Nov 29	12
Dec 8	0
Dec 18	0
Dec 28	6
Jan 8	3
Jan 18	0
Jan 28	4
Feb 7	6
Feb 17	9
Feb 26	2
Mar 8	9
Mar 18	2
Mar 28	12
Apr 7	0
Apr 17	14
Apr 27	6
May 7	3
May 16	3
May 26	6
Jun 5	0
Jun 15	15
Jun 25	0
Jul 5	0
Jul 15	24
Jul 25	1
Aug 3	0
Aug 13	3
Aug 23	4
Sep 2	6
Sep 12	3
Sep 22	4
Oct 2	3
Oct 12	0
Oct 21	0
Oct 31	6
Nov 10	2
Nov 20	3
Nov 30	15
Dec 10	14
Dec 20	9
Dec 30	4
Jan 9	15
Jan 19	0
Jan 29	0
Feb 8	15
Feb 18	6
Feb 28	11
Mar 10	0
Mar 20	10
Mar 29	6
Apr 8	23
Apr 18	35
Apr 28	12
May 8	9
May 18	0
May 28	6
Jun 7	0
Jun 16	11
Jun 26	6
Jul 6	33
Jul 16	11
Jul 26	1
Aug 5	6
Aug 15	2
Aug 25	0
Sep 3	13
Sep 13	9
Sep 23	21
Oct 3	0
Oct 13	4
Oct 23	6
Nov 2	12
Nov 12	3
Nov 21	3
Dec 1	10
Dec 11	15
Dec 21	0
Dec 31	2

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="contributions-card"/>;}

Advanced playground, API and recovery states ↗

Contributions Card

A GitHub-style contributions heat grid - 53 weeks of activity cells with intensity steps, month labels, and a swappable accent color family (nine palettes) so it matches any dashboard theme.

Contributions this year

Provided data

+14.8%

9BLifetime tokens562.7MPeak tokens12h 54mLongest task62 daysTop streak

Activity

Contributions this year: illustrative source-shaped fixture data
Category	Value
Jan 1	0
Jan 11	0
Jan 21	23
Jan 31	3
Feb 10	1
Feb 19	0
Mar 1	10
Mar 11	3
Mar 21	12
Mar 31	0
Apr 10	4
Apr 20	2
Apr 30	12
May 9	2
May 19	13
May 29	0
Jun 8	6
Jun 18	20
Jun 28	1
Jul 8	6
Jul 18	4
Jul 27	9
Aug 6	0
Aug 16	0
Aug 26	0
Sep 5	3
Sep 15	13
Sep 25	0
Oct 5	2
Oct 14	0
Oct 24	4
Nov 3	19
Nov 13	0
Nov 23	0
Dec 3	11
Dec 13	6
Dec 23	9
Jan 2	0
Jan 12	0
Jan 22	36
Feb 1	4
Feb 11	3
Feb 21	1
Mar 3	3
Mar 13	0
Mar 22	6
Apr 1	0
Apr 11	9
Apr 21	0
May 1	9
May 11	0
May 21	3
May 31	3
Jun 9	3
Jun 19	10
Jun 29	13
Jul 9	18
Jul 19	9
Jul 29	2
Aug 8	3
Aug 18	1
Aug 27	4
Sep 6	0
Sep 16	6
Sep 26	0
Oct 6	0
Oct 16	1
Oct 26	8
Nov 5	0
Nov 14	24
Nov 24	0
Dec 4	11
Dec 14	0
Dec 24	0
Jan 4	0
Jan 14	0
Jan 24	1
Feb 2	1
Feb 12	20
Feb 22	19
Mar 4	6
Mar 14	0
Mar 24	0
Apr 3	26
Apr 13	6
Apr 22	2
May 2	0
May 12	9
May 22	1
Jun 1	3
Jun 11	2
Jun 21	2
Jul 1	0
Jul 10	21
Jul 20	9
Jul 30	3
Aug 9	21
Aug 19	22
Aug 29	4
Sep 8	9
Sep 18	13
Sep 27	15
Oct 7	29
Oct 17	6
Oct 27	0
Nov 6	0
Nov 16	6
Nov 26	30
Dec 6	1
Dec 15	10
Dec 25	27
Jan 5	0
Jan 15	6
Jan 25	0
Feb 4	6
Feb 14	6
Feb 24	38
Mar 5	15
Mar 15	4
Mar 25	9
Apr 4	3
Apr 14	6
Apr 24	0
May 4	10
May 14	34
May 23	3
Jun 2	0
Jun 12	1
Jun 22	0
Jul 2	0
Jul 12	6
Jul 22	9
Aug 1	0
Aug 11	1
Aug 20	1
Aug 30	6
Sep 9	2
Sep 19	1
Sep 29	1
Oct 9	4
Oct 19	16
Oct 29	6
Nov 7	1
Nov 17	2
Nov 27	11
Dec 7	14
Dec 17	0
Dec 27	21
Jan 7	6
Jan 17	0
Jan 26	14
Feb 5	6
Feb 15	10
Feb 25	1
Mar 7	9
Mar 17	6
Mar 27	34
Apr 6	9
Apr 15	13
Apr 25	2
May 5	3
May 15	6
May 25	6
Jun 4	17
Jun 14	0
Jun 24	33
Jul 3	6
Jul 13	0
Jul 23	6
Aug 2	2
Aug 12	0
Aug 22	9
Sep 1	9
Sep 11	0
Sep 20	1
Sep 30	12
Oct 10	2
Oct 20	9
Oct 30	2
Nov 9	0
Nov 19	4
Nov 29	12
Dec 8	0
Dec 18	0
Dec 28	6
Jan 8	3
Jan 18	0
Jan 28	4
Feb 7	6
Feb 17	9
Feb 26	2
Mar 8	9
Mar 18	2
Mar 28	12
Apr 7	0
Apr 17	14
Apr 27	6
May 7	3
May 16	3
May 26	6
Jun 5	0
Jun 15	15
Jun 25	0
Jul 5	0
Jul 15	24
Jul 25	1
Aug 3	0
Aug 13	3
Aug 23	4
Sep 2	6
Sep 12	3
Sep 22	4
Oct 2	3
Oct 12	0
Oct 21	0
Oct 31	6
Nov 10	2
Nov 20	3
Nov 30	15
Dec 10	14
Dec 20	9
Dec 30	4
Jan 9	15
Jan 19	0
Jan 29	0
Feb 8	15
Feb 18	6
Feb 28	11
Mar 10	0
Mar 20	10
Mar 29	6
Apr 8	23
Apr 18	35
Apr 28	12
May 8	9
May 18	0
May 28	6
Jun 7	0
Jun 16	11
Jun 26	6
Jul 6	33
Jul 16	11
Jul 26	1
Aug 5	6
Aug 15	2
Aug 25	0
Sep 3	13
Sep 13	9
Sep 23	21
Oct 3	0
Oct 13	4
Oct 23	6
Nov 2	12
Nov 12	3
Nov 21	3
Dec 1	10
Dec 11	15
Dec 21	0
Dec 31	2

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="contributions-card"/>;}

Advanced playground, API and recovery states ↗

Contributions Card

Contributions this year

Installation

Search Helios UI

Contributions Card

Contributions this year

Installation

Search Helios UI