Steps Card

The weekly steps bar chart from the medical dashboard - seven day bars with a week-range switcher, a count-up step total, and a hover outline on the active bar.

Steps

Provided data

total steps

Steps: illustrative source-shaped fixture data
Category	Value
Mon	5,600
Tue	2,200
Wed	1,900
Thu	6,300
Fri	7,100
Sat	5,300
Sun	3,200

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="steps-card"/>;}

Advanced playground, API and recovery states ↗

Steps Card

Steps

Installation

Search Helios UI

Steps Card

Steps

Installation

Search Helios UI