Throughput gauge

Playground#

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

<PxGauge max={200} />

Installation#

pnpm dlx shadcn@latest add @lumesec/px-gauge

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

npx shadcn@latest add https://elements.lumesec.ai/r/px-gauge.json

Usage#

import { PxGauge } from "@/components/lumesec/px-gauge";

export function Example() {
  return (
    <PxGauge />
  );
}

Behaviour#

Tokens per second on four rings of pixels, with amber and red zones. The needle is a spring, so it overshoots and settles, and a peak marker hangs at the high point before sliding back.

API reference#

Attributes#

Properties#

Keyboard#

Accessibility#

• The dial (canvas and reading) has role="meter", aria-label="Output speed in tokens per second" and aria-valuemin="0".
• aria-valuenow, aria-valuemax and aria-valuetext ("72 tokens per second") are updated about twice per second; the visible reading is text inside the meter.
• The "Hold to boost" button is a native button with aria-pressed reflecting the boost state.
• Reduced motion: the needle tracks the value directly without spring overshoot and the red zone stops flickering.

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 --destructive, --foreground, --lumesec and --muted-foreground.

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

Notes#

• The reading is simulated demo data: it idles around 36% of max with noise and climbs to about 93% while boosted. There is no attribute for feeding a real value.
• Pressing and holding the button or the gauge itself boosts it; the amber zone starts at 70% of max and the red zone at 86%.
• The reading is set in the monospace font, scales with the dial and turns red in the red zone.
• The canvas is 180px tall.