Sleep Score Card

The sleep score ring from the medical dashboard - a segmented arc gauge where hovering a metric row focuses its segment, with duration, quality, and consistency sub-scores below.

Sleep score

Provided data

Sleep score: illustrative source-shaped fixture data
Category	Value
Duration: 7h 50m	49
Bedtime: 20m earlier	29
Interruptions: 5m wake up	20

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

Advanced playground, API and recovery states ↗

Sleep Score Card

Sleep score

Installation

Search Helios UI

Sleep Score Card

Sleep score

Installation

Search Helios UI