Goal rings

Up to three concentric goal rings with glowing heads; progress past the goal laps the ring in a brighter tint and throws sparks.

View as Markdown

<hf-rings>· loading

Playground

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

Loading <hf-rings>

Props

ringslive

<HfRings rings="Messages:36/50,Tokens:410/900,Agents:13/10" />

Installation

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

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-rings.json

Usage

import { HfRings } from "@/components/lumesec/hf-rings";

export function Example() {
  return (
    <HfRings rings="Messages:36/50,Tokens:410/900,Agents:13/10" />
  );
}

Behaviour

Three progress rings with glowing heads. Going past the goal laps the ring in a brighter colour and throws sparks at the top. Hover a ring or a legend row to isolate it.

API reference

Attributes

ringsReact propringsTypestringDefaultMessages:36/50,Tokens:410/900,Agents:13/10

Comma-separated Name:current/goal entries; only the first three are used. Observed: changes rebuild the legend and animate the rings.

Properties

items (read-only)TypeArray<{ name: string, cur: number, goal: number }>

Rings parsed from the attribute.

Accessibility

The canvas has role="img" and an aria-label giving each ring as a percentage of its goal, for example Messages 72%, Tokens 46%, Agents 130%.
The legend shows each current value and goal as text.
Isolating a ring works by pointer hover only; legend rows are not focusable.
Reduced motion: the rings show their final progress without the staggered fill and no sparks are drawn; the hover dimming still fades.

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 and --ui-muted.

Notes

Rings use the accent, ok and warn colours from the outside in.
Progress is drawn up to twice the goal; the second lap uses a brighter tint.
The canvas is fixed at 172 × 172 px.

<hf-progress>

Progresshf-progress

<hf-context>

Context windowhf-context

<hf-gauge>

Gaugehf-gauge

<hf-status>

Uptimehf-status

Was this page helpful?

Related