Bento

Bento Gauge

Pronew

A speedometer whose needle sweeps to a value over a tick ring, with a readout that counts up.

0.0%

faster time to build

Build faster

Incremental builds and a warm cache cut the wait between a save and a preview.

Installation

npx shadcn@latest add @blank-pro/bento-gauge

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoGauge } from "@/components/ui/bento-gauge"

<BentoGauge value={46.9} label="faster time to build" />

value is read against max (100 by default) and printed with as many decimals as you pass, followed by unit (% by default).

The arc, the lit ticks and the needle's glow use the card's --bento-light, and fall back to the ink. Set it on the card, not on BentoLight, so the light and the dial share it:

<BentoCard className="[--bento-light:var(--warning-primary)]">