v0.1.0

<hf-stat>Custom elementDataFree

Stat tile

Stat tile whose number counts up over a shimmer of dots; hovering the sparkline shows the value under the pointer.

View as Markdown

<hf-stat>· loading

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-stat>

Props

valuelive

decimalsremounts

prefixremounts

suffixremounts

labelremounts

deltaremounts

dataremounts

<HfStat
  value={48210}
  decimals={0}
  label="Messages this month"
  delta="+12.4%"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-stat

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-stat.json

Usage

import { HfStat } from "@/components/lumesec/hf-stat";

export function Example() {
  return (
    <HfStat label="Messages this month" value={48210} delta="+12.4%" />
  );
}

Behaviour

The number counts up over a shimmer of dots; hovering the sparkline swaps it for the value under the pointer.

API reference

Attributes

valueReact propvalueTypenumberDefault48210

Displayed value. Observed: a change counts up from the number currently shown.

decimalsReact propdecimalsTypenumberDefault0

Decimal places. With 0 the number uses en-US thousands separators.

prefixReact propprefixTypestring

Text before the number.

suffixReact propsuffixTypestring

Text after the number.

labelReact proplabelTypestringDefaultMessages this month

Caption above the number, set once on connect; the live region re-reads it on each value change.

deltaReact propdeltaTypestringDefault+12.4%

Badge text. Green, or red when it starts with - or −. An empty value hides it. Read once on connect.

dataReact propdataTypestring

Comma-separated sparkline values. Needs at least three numbers; otherwise a generated 24-point series is shown.

Properties

valueTypenumber

Setting it writes the attribute and counts to the new value.

series (read-only)Typenumber[]

Sparkline values, from data or the generated series.

Accessibility

The number is text in the monospace font with tabular figures. It changes on every frame while counting, so it is aria-hidden, as is the sparkline canvas; the live region below carries the value.
A visually hidden aria-live="polite" region holds the label and final formatted value, for example Messages this month: 48,210, updated on each change.
Sparkline hover values are pointer-only.
Reduced motion: the number and sparkline appear at once without counting or the shimmer behind the number.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --lumesec and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-mono and --ui-muted.

Notes

Hovering the sparkline shows the raw series value rounded to one decimal, without prefix or suffix.

<hf-area>

<hf-donut>

<hf-funnel>

<hf-barlist>

Was this page helpful?

Related