Activity Rings Card

Apple Watch-style concentric goal rings - move, exercise, and running progress with hoverable ring focus and stat tiles below. Pairs with the Most Active Days card to show any selected day.

Activity

Provided data

Activity: illustrative source-shaped fixture data
Category	Value
Move	1,592 kcal
Exercise	1h 45m
Running	5.2 km

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

Advanced playground, API and recovery states ↗

Activity Rings Card

Activity

Installation

Search Helios UI

Activity Rings Card

Activity

Installation

Search Helios UI