Gauge

Notch-based radial or linear gauge with optional center label, patterns, and optional gradients

Installation

terminal

pnpm dlx layro-cli add @bklit/gauge

npx layro-cli add @bklit/gauge

npx layro-cli add @bklit/gauge

bunx layro-cli add @bklit/gauge

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import NumberFlow from "@number-flow/react";
import { type ReactNode, useEffect, useMemo, useState } from "react";
import { cn } from "@/lib/utils";

/** Subset of `Intl.NumberFormatOptions` supported by NumberFlow */
export interface ChartStatFlowFormat {
  notation?: "standard" | "compact";
  compactDisplay?: "short" | "long";
  minimumFractionDigits?: number;
  maximumFractionDigits?: number;
  minimumIntegerDigits?: number;
  minimumSignificantDigits?: number;