REACT COMPONENT

Contributions

Reusable React exports, live props, and complete source.

Reference ↗

Contributions

Illustrative data

371Recorded days23Peak activity12Daily average

Inspect data and series

Current period

Week 1 · Mon: 0

Accessible data table

Contributions — Yearly, full illustrative dataset
Day	Current
Week 1 · Mon	0
Week 1 · Tue	10
Week 1 · Wed	20
Week 1 · Thu	6
Week 1 · Fri	16
Week 1 · Sat	11
Week 1 · Sun	21
Week 2 · Mon	7
Week 2 · Tue	17
Week 2 · Wed	3
Week 2 · Thu	22
Week 2 · Fri	8
Week 2 · Sat	18
Week 2 · Sun	4
Week 3 · Mon	14
Week 3 · Tue	9
Week 3 · Wed	19
Week 3 · Thu	5
Week 3 · Fri	15
Week 3 · Sat	1
Week 3 · Sun	20
Week 4 · Mon	6
Week 4 · Tue	16
Week 4 · Wed	2
Week 4 · Thu	12
Week 4 · Fri	7
Week 4 · Sat	17
Week 4 · Sun	3
Week 5 · Mon	13
Week 5 · Tue	23
Week 5 · Wed	18
Week 5 · Thu	4
Week 5 · Fri	14
Week 5 · Sat	0
Week 5 · Sun	10
Week 6 · Mon	5
Week 6 · Tue	15
Week 6 · Wed	1
Week 6 · Thu	11
Week 6 · Fri	21
Week 6 · Sat	16
Week 6 · Sun	2
Week 7 · Mon	12
Week 7 · Tue	22
Week 7 · Wed	8
Week 7 · Thu	3
Week 7 · Fri	13
Week 7 · Sat	23
Week 7 · Sun	9
Week 8 · Mon	19
Week 8 · Tue	14
Week 8 · Wed	0
Week 8 · Thu	10
Week 8 · Fri	20
Week 8 · Sat	6
Week 8 · Sun	1
Week 9 · Mon	11
Week 9 · Tue	21
Week 9 · Wed	7
Week 9 · Thu	17
Week 9 · Fri	12
Week 9 · Sat	22
Week 9 · Sun	8
Week 10 · Mon	18
Week 10 · Tue	4
Week 10 · Wed	23
Week 10 · Thu	9
Week 10 · Fri	19
Week 10 · Sat	5
Week 10 · Sun	15
Week 11 · Mon	10
Week 11 · Tue	20
Week 11 · Wed	6
Week 11 · Thu	16
Week 11 · Fri	2
Week 11 · Sat	21
Week 11 · Sun	7
Week 12 · Mon	17
Week 12 · Tue	3
Week 12 · Wed	13
Week 12 · Thu	8
Week 12 · Fri	18
Week 12 · Sat	4
Week 12 · Sun	14
Week 13 · Mon	0
Week 13 · Tue	19
Week 13 · Wed	5
Week 13 · Thu	15
Week 13 · Fri	1
Week 13 · Sat	11
Week 13 · Sun	6
Week 14 · Mon	16
Week 14 · Tue	2
Week 14 · Wed	12
Week 14 · Thu	22
Week 14 · Fri	17
Week 14 · Sat	3
Week 14 · Sun	13
Week 15 · Mon	23
Week 15 · Tue	9
Week 15 · Wed	4
Week 15 · Thu	14
Week 15 · Fri	0
Week 15 · Sat	10
Week 15 · Sun	20
Week 16 · Mon	15
Week 16 · Tue	1
Week 16 · Wed	11
Week 16 · Thu	21
Week 16 · Fri	7
Week 16 · Sat	2
Week 16 · Sun	12
Week 17 · Mon	22
Week 17 · Tue	8
Week 17 · Wed	18
Week 17 · Thu	13
Week 17 · Fri	23
Week 17 · Sat	9
Week 17 · Sun	19
Week 18 · Mon	5
Week 18 · Tue	0
Week 18 · Wed	10
Week 18 · Thu	20
Week 18 · Fri	6
Week 18 · Sat	16
Week 18 · Sun	11
Week 19 · Mon	21
Week 19 · Tue	7
Week 19 · Wed	17
Week 19 · Thu	3
Week 19 · Fri	22
Week 19 · Sat	8
Week 19 · Sun	18
Week 20 · Mon	4
Week 20 · Tue	14
Week 20 · Wed	9
Week 20 · Thu	19
Week 20 · Fri	5
Week 20 · Sat	15
Week 20 · Sun	1
Week 21 · Mon	20
Week 21 · Tue	6
Week 21 · Wed	16
Week 21 · Thu	2
Week 21 · Fri	12
Week 21 · Sat	7
Week 21 · Sun	17
Week 22 · Mon	3
Week 22 · Tue	13
Week 22 · Wed	23
Week 22 · Thu	18
Week 22 · Fri	4
Week 22 · Sat	14
Week 22 · Sun	0
Week 23 · Mon	10
Week 23 · Tue	5
Week 23 · Wed	15
Week 23 · Thu	1
Week 23 · Fri	11
Week 23 · Sat	21
Week 23 · Sun	16
Week 24 · Mon	2
Week 24 · Tue	12
Week 24 · Wed	22
Week 24 · Thu	8
Week 24 · Fri	3
Week 24 · Sat	13
Week 24 · Sun	23
Week 25 · Mon	9
Week 25 · Tue	19
Week 25 · Wed	14
Week 25 · Thu	0
Week 25 · Fri	10
Week 25 · Sat	20
Week 25 · Sun	6
Week 26 · Mon	1
Week 26 · Tue	11
Week 26 · Wed	21
Week 26 · Thu	7
Week 26 · Fri	17
Week 26 · Sat	12
Week 26 · Sun	22
Week 27 · Mon	8
Week 27 · Tue	18
Week 27 · Wed	4
Week 27 · Thu	23
Week 27 · Fri	9
Week 27 · Sat	19
Week 27 · Sun	5
Week 28 · Mon	15
Week 28 · Tue	10
Week 28 · Wed	20
Week 28 · Thu	6
Week 28 · Fri	16
Week 28 · Sat	2
Week 28 · Sun	21
Week 29 · Mon	7
Week 29 · Tue	17
Week 29 · Wed	3
Week 29 · Thu	13
Week 29 · Fri	8
Week 29 · Sat	18
Week 29 · Sun	4
Week 30 · Mon	14
Week 30 · Tue	0
Week 30 · Wed	19
Week 30 · Thu	5
Week 30 · Fri	15
Week 30 · Sat	1
Week 30 · Sun	11
Week 31 · Mon	6
Week 31 · Tue	16
Week 31 · Wed	2
Week 31 · Thu	12
Week 31 · Fri	22
Week 31 · Sat	17
Week 31 · Sun	3
Week 32 · Mon	13
Week 32 · Tue	23
Week 32 · Wed	9
Week 32 · Thu	4
Week 32 · Fri	14
Week 32 · Sat	0
Week 32 · Sun	10
Week 33 · Mon	20
Week 33 · Tue	15
Week 33 · Wed	1
Week 33 · Thu	11
Week 33 · Fri	21
Week 33 · Sat	7
Week 33 · Sun	2
Week 34 · Mon	12
Week 34 · Tue	22
Week 34 · Wed	8
Week 34 · Thu	18
Week 34 · Fri	13
Week 34 · Sat	23
Week 34 · Sun	9
Week 35 · Mon	19
Week 35 · Tue	5
Week 35 · Wed	0
Week 35 · Thu	10
Week 35 · Fri	20
Week 35 · Sat	6
Week 35 · Sun	16
Week 36 · Mon	11
Week 36 · Tue	21
Week 36 · Wed	7
Week 36 · Thu	17
Week 36 · Fri	3
Week 36 · Sat	22
Week 36 · Sun	8
Week 37 · Mon	18
Week 37 · Tue	4
Week 37 · Wed	14
Week 37 · Thu	9
Week 37 · Fri	19
Week 37 · Sat	5
Week 37 · Sun	15
Week 38 · Mon	1
Week 38 · Tue	20
Week 38 · Wed	6
Week 38 · Thu	16
Week 38 · Fri	2
Week 38 · Sat	12
Week 38 · Sun	7
Week 39 · Mon	17
Week 39 · Tue	3
Week 39 · Wed	13
Week 39 · Thu	23
Week 39 · Fri	18
Week 39 · Sat	4
Week 39 · Sun	14
Week 40 · Mon	0
Week 40 · Tue	10
Week 40 · Wed	5
Week 40 · Thu	15
Week 40 · Fri	1
Week 40 · Sat	11
Week 40 · Sun	21
Week 41 · Mon	16
Week 41 · Tue	2
Week 41 · Wed	12
Week 41 · Thu	22
Week 41 · Fri	8
Week 41 · Sat	3
Week 41 · Sun	13
Week 42 · Mon	23
Week 42 · Tue	9
Week 42 · Wed	19
Week 42 · Thu	14
Week 42 · Fri	0
Week 42 · Sat	10
Week 42 · Sun	20
Week 43 · Mon	6
Week 43 · Tue	1
Week 43 · Wed	11
Week 43 · Thu	21
Week 43 · Fri	7
Week 43 · Sat	17
Week 43 · Sun	12
Week 44 · Mon	22
Week 44 · Tue	8
Week 44 · Wed	18
Week 44 · Thu	4
Week 44 · Fri	23
Week 44 · Sat	9
Week 44 · Sun	19
Week 45 · Mon	5
Week 45 · Tue	15
Week 45 · Wed	10
Week 45 · Thu	20
Week 45 · Fri	6
Week 45 · Sat	16
Week 45 · Sun	2
Week 46 · Mon	21
Week 46 · Tue	7
Week 46 · Wed	17
Week 46 · Thu	3
Week 46 · Fri	13
Week 46 · Sat	8
Week 46 · Sun	18
Week 47 · Mon	4
Week 47 · Tue	14
Week 47 · Wed	0
Week 47 · Thu	19
Week 47 · Fri	5
Week 47 · Sat	15
Week 47 · Sun	1
Week 48 · Mon	11
Week 48 · Tue	6
Week 48 · Wed	16
Week 48 · Thu	2
Week 48 · Fri	12
Week 48 · Sat	22
Week 48 · Sun	17
Week 49 · Mon	3
Week 49 · Tue	13
Week 49 · Wed	23
Week 49 · Thu	9
Week 49 · Fri	4
Week 49 · Sat	14
Week 49 · Sun	0
Week 50 · Mon	10
Week 50 · Tue	20
Week 50 · Wed	15
Week 50 · Thu	1
Week 50 · Fri	11
Week 50 · Sat	21
Week 50 · Sun	7
Week 51 · Mon	2
Week 51 · Tue	12
Week 51 · Wed	22
Week 51 · Thu	8
Week 51 · Fri	18
Week 51 · Sat	13
Week 51 · Sun	23
Week 52 · Mon	9
Week 52 · Tue	19
Week 52 · Wed	5
Week 52 · Thu	0
Week 52 · Fri	10
Week 52 · Sat	20
Week 52 · Sun	6
Week 53 · Mon	16
Week 53 · Tue	11
Week 53 · Wed	21
Week 53 · Thu	7
Week 53 · Fri	17
Week 53 · Sat	3
Week 53 · Sun	22

Source file

'use client';
import {useState} from 'react';
import {ModernChart} from '@helios-ui/react';
import '@helios-ui/react/styles.css';
export default function Example(){const [state,setState]=useState<'ready'|'loading'|'empty'|'error'>("ready");return <ModernChart id="contributions-card" state={state} onRetry={()=>setState('ready')} disabled={false} shape="curved" variant="default" mono={false} limit={4} bubble={true}/>;}

Customize this example

State

Monochrome chart

Use in your React app

Download the local package, install its React peers, then import the export and stylesheet. This package is not published to npm.

npm install react@^19 react-dom@^19 ./helios-ui-react-0.1.0.tgz

Download React package ↓Download all source (JSON) ↓

The Code tab renders the same exports used in this preview. Source files include typed props, behavior, styles, and dependency details.

Props

Generated from the TypeScript export ModernChart. Configure this example with the preview controls above.

Prop	Type / behavior
`state`	FamilyState \| undefined
`onRetry`	(() => void) \| undefined
`disabled`	boolean \| undefined
`size`	"sm" \| "md" \| "lg" \| undefined
`id`	string
`presentation`	"interactive" \| "source" \| undefined
`periodPresentation`	"segmented" \| "date" \| undefined
`sourceDefaultLayout`	boolean \| undefined
`data`	(ChartDatum \| ChartInputDatum)[] \| undefined
`series`	ChartSeries[] \| undefined
`bar`	ChartSeries \| undefined
`line`	ChartSeries \| undefined
`stages`	ChartStage[] \| undefined
`items`	ChartStage[] \| undefined
`tabs`	ChartListTab[] \| undefined
`rows`	ChartMatrixRow[] \| undefined
`columns`	string[] \| undefined
`nodes`	ChartFlowNode[] \| undefined
`links`	ChartFlowLink[] \| undefined
`max`	number \| undefined
`color`	string \| undefined
`metric`	"value" \| "share" \| undefined
`tiles`	boolean \| undefined
`showIcons`	boolean \| undefined
`ranges`	ChartRange[] \| undefined
`range`	string \| undefined
`defaultRange`	string \| undefined
`onRangeChange`	((id: string, range: ChartRange) => void) \| undefined
`tab`	string \| undefined
`defaultTab`	string \| undefined
`onTabChange`	((id: string) => void) \| undefined
`headline`	string \| number \| undefined
`delta`	number \| undefined
`onSelect`	((row: ChartDatum, index: number) => void) \| undefined
`title`	string \| undefined
`unit`	ChartUnit \| undefined
`shape`	"curved" \| "sharp" \| undefined
`compact`	boolean \| undefined
`variant`	ChartVariant \| undefined
`mono`	boolean \| undefined
`limit`	number \| undefined
`bubble`	boolean \| undefined
`axisLabels`	[string, string] \| undefined
`defaultSelected`	number \| undefined

Explore composed examples

Built from the same components

Forms, tables, charts and composers share Button, Input, Select, Checkbox, Tabs and Dialog.

Composition state

Team members

Fictional records · client-side sorting, selection and export

12 members

Filter by role

Filter by status

Example team members
Select visible rows
Select Aarav Shah	Aarav Shahaarav@example.com	Status for Aarav Shah	Designer	₹1,250
Select Diya Rao	Diya Raodiya@example.com	Status for Diya Rao	Developer	₹2,500
Select Ishaan Patel	Ishaan Patelishaan@example.com	Status for Ishaan Patel	Admin	₹3,750
Select Kavya Nair	Kavya Nairkavya@example.com	Status for Kavya Nair	Designer	₹5,000
Select Rohan Mehta	Rohan Mehtarohan@example.com	Status for Rohan Mehta	Developer	₹6,250

Revenue overview

Illustrative INR data · totals match the visible period

Chart period

₹33,800Show revenue series

Jan: ₹4,200

Accessible data table

Revenue in INR
Month	Revenue
Jan	₹4,200
Feb	₹5,100
Mar	₹4,600
Apr	₹6,800
May	₹5,900
Jun	₹7,200

Keyboard and motion

Tab reaches controls; Space and Enter activate buttons. Native Select supports keyboard selection and mobile pickers. Tabs use arrows, Home and End. Dialog contains focus, closes with Escape, and restores focus. Data tables expose sort and selection state. Reduced motion removes spinners and chart transitions.

Primary labels adapt to the chosen accent for contrast. This accessibility adjustment differs from Figma’s white-on-cyan example. The Select example uses a React Aria popover with rich option content and keyboard typeahead. Native Select remains available for simple platform-picker integrations.

REACT COMPONENT

Contributions

Reusable React exports, live props, and complete source.

Reference ↗

Contributions

Illustrative data

371Recorded days23Peak activity12Daily average

Inspect data and series

Current period

Week 1 · Mon: 0

Accessible data table

Contributions — Yearly, full illustrative dataset
Day	Current
Week 1 · Mon	0
Week 1 · Tue	10
Week 1 · Wed	20
Week 1 · Thu	6
Week 1 · Fri	16
Week 1 · Sat	11
Week 1 · Sun	21
Week 2 · Mon	7
Week 2 · Tue	17
Week 2 · Wed	3
Week 2 · Thu	22
Week 2 · Fri	8
Week 2 · Sat	18
Week 2 · Sun	4
Week 3 · Mon	14
Week 3 · Tue	9
Week 3 · Wed	19
Week 3 · Thu	5
Week 3 · Fri	15
Week 3 · Sat	1
Week 3 · Sun	20
Week 4 · Mon	6
Week 4 · Tue	16
Week 4 · Wed	2
Week 4 · Thu	12
Week 4 · Fri	7
Week 4 · Sat	17
Week 4 · Sun	3
Week 5 · Mon	13
Week 5 · Tue	23
Week 5 · Wed	18
Week 5 · Thu	4
Week 5 · Fri	14
Week 5 · Sat	0
Week 5 · Sun	10
Week 6 · Mon	5
Week 6 · Tue	15
Week 6 · Wed	1
Week 6 · Thu	11
Week 6 · Fri	21
Week 6 · Sat	16
Week 6 · Sun	2
Week 7 · Mon	12
Week 7 · Tue	22
Week 7 · Wed	8
Week 7 · Thu	3
Week 7 · Fri	13
Week 7 · Sat	23
Week 7 · Sun	9
Week 8 · Mon	19
Week 8 · Tue	14
Week 8 · Wed	0
Week 8 · Thu	10
Week 8 · Fri	20
Week 8 · Sat	6
Week 8 · Sun	1
Week 9 · Mon	11
Week 9 · Tue	21
Week 9 · Wed	7
Week 9 · Thu	17
Week 9 · Fri	12
Week 9 · Sat	22
Week 9 · Sun	8
Week 10 · Mon	18
Week 10 · Tue	4
Week 10 · Wed	23
Week 10 · Thu	9
Week 10 · Fri	19
Week 10 · Sat	5
Week 10 · Sun	15
Week 11 · Mon	10
Week 11 · Tue	20
Week 11 · Wed	6
Week 11 · Thu	16
Week 11 · Fri	2
Week 11 · Sat	21
Week 11 · Sun	7
Week 12 · Mon	17
Week 12 · Tue	3
Week 12 · Wed	13
Week 12 · Thu	8
Week 12 · Fri	18
Week 12 · Sat	4
Week 12 · Sun	14
Week 13 · Mon	0
Week 13 · Tue	19
Week 13 · Wed	5
Week 13 · Thu	15
Week 13 · Fri	1
Week 13 · Sat	11
Week 13 · Sun	6
Week 14 · Mon	16
Week 14 · Tue	2
Week 14 · Wed	12
Week 14 · Thu	22
Week 14 · Fri	17
Week 14 · Sat	3
Week 14 · Sun	13
Week 15 · Mon	23
Week 15 · Tue	9
Week 15 · Wed	4
Week 15 · Thu	14
Week 15 · Fri	0
Week 15 · Sat	10
Week 15 · Sun	20
Week 16 · Mon	15
Week 16 · Tue	1
Week 16 · Wed	11
Week 16 · Thu	21
Week 16 · Fri	7
Week 16 · Sat	2
Week 16 · Sun	12
Week 17 · Mon	22
Week 17 · Tue	8
Week 17 · Wed	18
Week 17 · Thu	13
Week 17 · Fri	23
Week 17 · Sat	9
Week 17 · Sun	19
Week 18 · Mon	5
Week 18 · Tue	0
Week 18 · Wed	10
Week 18 · Thu	20
Week 18 · Fri	6
Week 18 · Sat	16
Week 18 · Sun	11
Week 19 · Mon	21
Week 19 · Tue	7
Week 19 · Wed	17
Week 19 · Thu	3
Week 19 · Fri	22
Week 19 · Sat	8
Week 19 · Sun	18
Week 20 · Mon	4
Week 20 · Tue	14
Week 20 · Wed	9
Week 20 · Thu	19
Week 20 · Fri	5
Week 20 · Sat	15
Week 20 · Sun	1
Week 21 · Mon	20
Week 21 · Tue	6
Week 21 · Wed	16
Week 21 · Thu	2
Week 21 · Fri	12
Week 21 · Sat	7
Week 21 · Sun	17
Week 22 · Mon	3
Week 22 · Tue	13
Week 22 · Wed	23
Week 22 · Thu	18
Week 22 · Fri	4
Week 22 · Sat	14
Week 22 · Sun	0
Week 23 · Mon	10
Week 23 · Tue	5
Week 23 · Wed	15
Week 23 · Thu	1
Week 23 · Fri	11
Week 23 · Sat	21
Week 23 · Sun	16
Week 24 · Mon	2
Week 24 · Tue	12
Week 24 · Wed	22
Week 24 · Thu	8
Week 24 · Fri	3
Week 24 · Sat	13
Week 24 · Sun	23
Week 25 · Mon	9
Week 25 · Tue	19
Week 25 · Wed	14
Week 25 · Thu	0
Week 25 · Fri	10
Week 25 · Sat	20
Week 25 · Sun	6
Week 26 · Mon	1
Week 26 · Tue	11
Week 26 · Wed	21
Week 26 · Thu	7
Week 26 · Fri	17
Week 26 · Sat	12
Week 26 · Sun	22
Week 27 · Mon	8
Week 27 · Tue	18
Week 27 · Wed	4
Week 27 · Thu	23
Week 27 · Fri	9
Week 27 · Sat	19
Week 27 · Sun	5
Week 28 · Mon	15
Week 28 · Tue	10
Week 28 · Wed	20
Week 28 · Thu	6
Week 28 · Fri	16
Week 28 · Sat	2
Week 28 · Sun	21
Week 29 · Mon	7
Week 29 · Tue	17
Week 29 · Wed	3
Week 29 · Thu	13
Week 29 · Fri	8
Week 29 · Sat	18
Week 29 · Sun	4
Week 30 · Mon	14
Week 30 · Tue	0
Week 30 · Wed	19
Week 30 · Thu	5
Week 30 · Fri	15
Week 30 · Sat	1
Week 30 · Sun	11
Week 31 · Mon	6
Week 31 · Tue	16
Week 31 · Wed	2
Week 31 · Thu	12
Week 31 · Fri	22
Week 31 · Sat	17
Week 31 · Sun	3
Week 32 · Mon	13
Week 32 · Tue	23
Week 32 · Wed	9
Week 32 · Thu	4
Week 32 · Fri	14
Week 32 · Sat	0
Week 32 · Sun	10
Week 33 · Mon	20
Week 33 · Tue	15
Week 33 · Wed	1
Week 33 · Thu	11
Week 33 · Fri	21
Week 33 · Sat	7
Week 33 · Sun	2
Week 34 · Mon	12
Week 34 · Tue	22
Week 34 · Wed	8
Week 34 · Thu	18
Week 34 · Fri	13
Week 34 · Sat	23
Week 34 · Sun	9
Week 35 · Mon	19
Week 35 · Tue	5
Week 35 · Wed	0
Week 35 · Thu	10
Week 35 · Fri	20
Week 35 · Sat	6
Week 35 · Sun	16
Week 36 · Mon	11
Week 36 · Tue	21
Week 36 · Wed	7
Week 36 · Thu	17
Week 36 · Fri	3
Week 36 · Sat	22
Week 36 · Sun	8
Week 37 · Mon	18
Week 37 · Tue	4
Week 37 · Wed	14
Week 37 · Thu	9
Week 37 · Fri	19
Week 37 · Sat	5
Week 37 · Sun	15
Week 38 · Mon	1
Week 38 · Tue	20
Week 38 · Wed	6
Week 38 · Thu	16
Week 38 · Fri	2
Week 38 · Sat	12
Week 38 · Sun	7
Week 39 · Mon	17
Week 39 · Tue	3
Week 39 · Wed	13
Week 39 · Thu	23
Week 39 · Fri	18
Week 39 · Sat	4
Week 39 · Sun	14
Week 40 · Mon	0
Week 40 · Tue	10
Week 40 · Wed	5
Week 40 · Thu	15
Week 40 · Fri	1
Week 40 · Sat	11
Week 40 · Sun	21
Week 41 · Mon	16
Week 41 · Tue	2
Week 41 · Wed	12
Week 41 · Thu	22
Week 41 · Fri	8
Week 41 · Sat	3
Week 41 · Sun	13
Week 42 · Mon	23
Week 42 · Tue	9
Week 42 · Wed	19
Week 42 · Thu	14
Week 42 · Fri	0
Week 42 · Sat	10
Week 42 · Sun	20
Week 43 · Mon	6
Week 43 · Tue	1
Week 43 · Wed	11
Week 43 · Thu	21
Week 43 · Fri	7
Week 43 · Sat	17
Week 43 · Sun	12
Week 44 · Mon	22
Week 44 · Tue	8
Week 44 · Wed	18
Week 44 · Thu	4
Week 44 · Fri	23
Week 44 · Sat	9
Week 44 · Sun	19
Week 45 · Mon	5
Week 45 · Tue	15
Week 45 · Wed	10
Week 45 · Thu	20
Week 45 · Fri	6
Week 45 · Sat	16
Week 45 · Sun	2
Week 46 · Mon	21
Week 46 · Tue	7
Week 46 · Wed	17
Week 46 · Thu	3
Week 46 · Fri	13
Week 46 · Sat	8
Week 46 · Sun	18
Week 47 · Mon	4
Week 47 · Tue	14
Week 47 · Wed	0
Week 47 · Thu	19
Week 47 · Fri	5
Week 47 · Sat	15
Week 47 · Sun	1
Week 48 · Mon	11
Week 48 · Tue	6
Week 48 · Wed	16
Week 48 · Thu	2
Week 48 · Fri	12
Week 48 · Sat	22
Week 48 · Sun	17
Week 49 · Mon	3
Week 49 · Tue	13
Week 49 · Wed	23
Week 49 · Thu	9
Week 49 · Fri	4
Week 49 · Sat	14
Week 49 · Sun	0
Week 50 · Mon	10
Week 50 · Tue	20
Week 50 · Wed	15
Week 50 · Thu	1
Week 50 · Fri	11
Week 50 · Sat	21
Week 50 · Sun	7
Week 51 · Mon	2
Week 51 · Tue	12
Week 51 · Wed	22
Week 51 · Thu	8
Week 51 · Fri	18
Week 51 · Sat	13
Week 51 · Sun	23
Week 52 · Mon	9
Week 52 · Tue	19
Week 52 · Wed	5
Week 52 · Thu	0
Week 52 · Fri	10
Week 52 · Sat	20
Week 52 · Sun	6
Week 53 · Mon	16
Week 53 · Tue	11
Week 53 · Wed	21
Week 53 · Thu	7
Week 53 · Fri	17
Week 53 · Sat	3
Week 53 · Sun	22

Source file

'use client';
import {useState} from 'react';
import {ModernChart} from '@helios-ui/react';
import '@helios-ui/react/styles.css';
export default function Example(){const [state,setState]=useState<'ready'|'loading'|'empty'|'error'>("ready");return <ModernChart id="contributions-card" state={state} onRetry={()=>setState('ready')} disabled={false} shape="curved" variant="default" mono={false} limit={4} bubble={true}/>;}

Customize this example

State

Monochrome chart

Use in your React app

Download the local package, install its React peers, then import the export and stylesheet. This package is not published to npm.

npm install react@^19 react-dom@^19 ./helios-ui-react-0.1.0.tgz

Download React package ↓Download all source (JSON) ↓

The Code tab renders the same exports used in this preview. Source files include typed props, behavior, styles, and dependency details.

Props

Generated from the TypeScript export ModernChart. Configure this example with the preview controls above.

Prop	Type / behavior
`state`	FamilyState \| undefined
`onRetry`	(() => void) \| undefined
`disabled`	boolean \| undefined
`size`	"sm" \| "md" \| "lg" \| undefined
`id`	string
`presentation`	"interactive" \| "source" \| undefined
`periodPresentation`	"segmented" \| "date" \| undefined
`sourceDefaultLayout`	boolean \| undefined
`data`	(ChartDatum \| ChartInputDatum)[] \| undefined
`series`	ChartSeries[] \| undefined
`bar`	ChartSeries \| undefined
`line`	ChartSeries \| undefined
`stages`	ChartStage[] \| undefined
`items`	ChartStage[] \| undefined
`tabs`	ChartListTab[] \| undefined
`rows`	ChartMatrixRow[] \| undefined
`columns`	string[] \| undefined
`nodes`	ChartFlowNode[] \| undefined
`links`	ChartFlowLink[] \| undefined
`max`	number \| undefined
`color`	string \| undefined
`metric`	"value" \| "share" \| undefined
`tiles`	boolean \| undefined
`showIcons`	boolean \| undefined
`ranges`	ChartRange[] \| undefined
`range`	string \| undefined
`defaultRange`	string \| undefined
`onRangeChange`	((id: string, range: ChartRange) => void) \| undefined
`tab`	string \| undefined
`defaultTab`	string \| undefined
`onTabChange`	((id: string) => void) \| undefined
`headline`	string \| number \| undefined
`delta`	number \| undefined
`onSelect`	((row: ChartDatum, index: number) => void) \| undefined
`title`	string \| undefined
`unit`	ChartUnit \| undefined
`shape`	"curved" \| "sharp" \| undefined
`compact`	boolean \| undefined
`variant`	ChartVariant \| undefined
`mono`	boolean \| undefined
`limit`	number \| undefined
`bubble`	boolean \| undefined
`axisLabels`	[string, string] \| undefined
`defaultSelected`	number \| undefined

Explore composed examples

Built from the same components

Forms, tables, charts and composers share Button, Input, Select, Checkbox, Tabs and Dialog.

Composition state

Team members

Fictional records · client-side sorting, selection and export

12 members

Filter by role

Filter by status

Example team members
Select visible rows
Select Aarav Shah	Aarav Shahaarav@example.com	Status for Aarav Shah	Designer	₹1,250
Select Diya Rao	Diya Raodiya@example.com	Status for Diya Rao	Developer	₹2,500
Select Ishaan Patel	Ishaan Patelishaan@example.com	Status for Ishaan Patel	Admin	₹3,750
Select Kavya Nair	Kavya Nairkavya@example.com	Status for Kavya Nair	Designer	₹5,000
Select Rohan Mehta	Rohan Mehtarohan@example.com	Status for Rohan Mehta	Developer	₹6,250

Revenue overview

Illustrative INR data · totals match the visible period

Chart period

₹33,800Show revenue series

Jan: ₹4,200

Accessible data table

Revenue in INR
Month	Revenue
Jan	₹4,200
Feb	₹5,100
Mar	₹4,600
Apr	₹6,800
May	₹5,900
Jun	₹7,200

Contributions

Contributions

Customize this example

Use in your React app

Props

Built from the same components

Personal information

Team members

Team member

Revenue overview

Team conversation

Keyboard and motion

Search Helios UI

Contributions

Contributions

Customize this example

Use in your React app

Props

Built from the same components

Personal information

Team members

Team member

Revenue overview

Team conversation

Keyboard and motion

Search Helios UI