gauge-default
"use client"
import { Gauge } from "@/components/ui/common/gauge"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<Gauge value={63} />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/gauge-default.json"gauge-tickmark
"use client"
import { Gauge } from "@/components/ui/common/gauge"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<Gauge
value={81}
size={200}
gradient={true}
primary="success"
tickMarks={true}
label="Progress"
transition={{ length: 1200, delay: 200 }}
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/gauge-tickmark.json"gauge-rings
"use client"
import { Gauge } from "@/components/ui/common/gauge"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<Gauge
value={8}
size={200}
multiRing={{
enabled: true,
rings: [
{ value: 90 * 0.6, color: "#fff200" },
{ value: 63 * 0.6, color: "#10b981" },
],
}}
transition={{ length: 1000, delay: 300 }}
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/gauge-rings.json"gauge-half
"use client"
import { Gauge } from "@/components/ui/common/gauge"
export function Component() {
return (
<div className="flex h-full w-full items-center justify-center">
<Gauge
value={46}
size={200}
gaugeType="half"
primary={{
0: "danger",
30: "warning",
70: "success",
}}
thresholds={[
{ value: 30, color: "#f59e0b" },
{ value: 70, color: "#22c55e" },
]}
label="Speed"
unit=" mph"
max={120}
transition={{ length: 1800, delay: 0 }}
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/gauge-half.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/gauge.json
Usage
import { Gauge } from "@/components/ui/gauge"<Awards
variant="award"
title="WINNER"
subtitle="A Design Award & Competetion"
recipient="Ali Imam"
date="June 2025"
level="gold"
/>API Reference
Gauge
A flexible, animated gauge component with support for full, half, and quarter circle types, gradients, multi-rings, thresholds, tick marks, and glow effects.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | – | Current value to display on the gauge. |
size | number | string | 150 | Size of the SVG gauge. |
gapPercent | number | 5 | Gap between primary and secondary strokes (as a percentage). |
strokeWidth | number | 10 | Stroke thickness of the gauge arc. |
equal | boolean | false | Makes primary and secondary arcs equal in length. |
showValue | boolean | true | Whether to display the numeric value inside the gauge. |
showPercentage | boolean | false | Whether to append the unit (e.g., %) next to the value. |
primary | "danger" | "warning" | "success" | "info" | string | { [key: number]: string } | – | Primary stroke color or threshold-based mapping. |
secondary | "danger" | "warning" | "success" | "info" | string | { [key: number]: string } | – | Secondary stroke color or threshold-based mapping. |
gradient | boolean | false | Applies a gradient fill to the primary stroke. |
multiRing | { enabled: boolean; rings?: Array<{ value: number; color: string; strokeWidth?: number; opacity?: number }> } | – | Renders multiple concentric rings around the gauge. |
thresholds | Array<{ value: number; color: string; label?: string }> | – | Threshold markers with color indicators. |
gaugeType | "full" | "half" | "quarter" | "full" | Shape of the gauge arc. |
transition | { length?: number; step?: number; delay?: number } | { length: 1000, step: 200, delay: 0 } | Transition settings for animation. |
className | string | | – | Tailwind/CSS classes for styling different gauge elements. |
label | string | – | Label text displayed under the gauge value. |
unit | string | "%" | Unit appended to the value when showPercentage is true. |
min | number | 0 | Minimum value of the gauge. |
max | number | 100 | Maximum value of the gauge. |
tickMarks | boolean | false | Displays tick marks along the arc. |
glowEffect | boolean | false | Applies a glow effect to the gauge stroke. |