Circular Gauge

Feedback

An animated ring gauge with an aqua glow.

Example

72 Focus

<script lang="ts">
	import { CircularGauge } from '$lib/components/ui/circular-gauge';
	import { Droplets } from '@lucide/svelte';
</script>

<CircularGauge value={72} label="Focus">
	<Droplets class="size-5 text-primary" />
</CircularGauge>

Installation

npx shadcn-svelte@latest add https://mizu-ui.com/r/circular-gauge.json