Stat Cards

Installation

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

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeStatCardsExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeStatCardsExample/></NativeScope>}

Variants

Two looks via the variant prop. plain (the default) is the compact card from the dashboard templates - neutral icon tile, label, value, and a delta chip. footer leads with a tinted gradient icon tile beside the label, sets the value at display size, and moves the comparison into a footer band with a white delta pill whose glyph follows deltaColor.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="stat-cards" id="variants"/>}

Bring your own data

Pass stats to replace the demo metrics. The footer variant reads three extra optional fields per stat: tone tints the icon tile (blue, orange, purple, pink, sky, or emerald), caption swaps the footer text, and hint adds an info glyph with a tooltip.

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeStatCards} from '@helios-ui/react';
export function Example(){
function MetricIcon({className}:{className?:string}){return <svg className={className}viewBox='0 0 24 24'aria-hidden><path fill='currentColor'd='M4 12h4v8H4zm6-6h4v14h-4zm6-4h4v18h-4z'/></svg>}
return <NativeScope><NativeStatCards variant="footer"stats={[{icon:MetricIcon,label:"Customers",value:"1,284",delta:"8%",deltaColor:"lime",tone:"blue",caption:"From last month",hint:"New customers in the current month."}]}/></NativeScope>;
}