Radial gauge
A 240° radial gauge with a self-drawing arc, a sweeping needle whose tip is a lens glint dot, tick marks around the dial, a count-up score, and a label with a delta beneath.
Preview
Resize it, switch the theme, replay the entrance — or read the source.
Installation
Add the block to a project that already uses shadcn/ui.
npx shadcn@latest add https://prequelui.terravidhal.me/r/radial-gauge.jsonRequires a project that already uses shadcn/ui on React and Tailwind CSS v4. The block is copied into your project as a single file you own and can edit.
Usage
Import the named export and render it with your own data.
Every prop is optional and ships with deterministic demo data, so a bare render shows the block at its default. Pass props to plug in your own data and formatters.
import { RadialGauge } from "@/components/prequel/radial-gauge/radial-gauge";
export default function DashboardPage() {
return <RadialGauge />;
}import { RadialGauge } from "@/components/prequel/radial-gauge/radial-gauge";
export default function DashboardPage() {
return <RadialGauge />;
}Props
Every prop is optional and ships with demo-data defaults.
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes merged onto the root element. |
value | number | Score, clamped to [0, max]. |
max | number | Denominator of the score. Defaults to 100. |
label | string | Caption shown under the number, e.g. "Health score". |
delta | number | Signed change, e.g. 4.2 for "+4.2". 0 renders a neutral badge. |
deltaSuffix | string | Unit after the delta, e.g. " pts" or "%". Defaults to " pts". |
deltaDecimals | number | Decimals on the delta value. Defaults to 1. |
deltaLabel | string | Context after the delta badge, e.g. "vs last month". |
goodWhenDown | boolean | When true a negative delta is good (e.g. churn going down). |
tone | number | Chart colour token 1–5. Defaults to 1. |
formatValue | (value: number) => string | — |
formatDelta | (delta: number) => string | — |
Accessibility
The rules every PrequelUI block follows, verified against this block's source.
Charts and graphics expose a text summary via role="img" and an aria-label describing the data.
Interactive charts respond to arrow keys, Home and End, and show tooltips on keyboard focus.
Every button carries a visible focus ring so keyboard users can always see where they are.
The block honours prefers-reduced-motion: animations are skipped and content is fully visible.
Live updates run on timers inside effects and pause when the block is off-screen or hovered.