A circular progress indicator with rounded ends and a percentage that counts up with the ring.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/progress-ring.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
A circular progress indicator. The ring fills clockwise from 12 o'clock with a rounded end while the percentage counts up alongside it. The default slot replaces the center content.
<script setup lang="ts">
import ProgressRing from '~/components/ui/progress-ring/ProgressRing.vue';
</script>
<template>
<ProgressRing :value="72" label="Storage" color="var(--chart-1)" />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Progress from 0 to 100 |
size | number | 120 | Diameter in pixels |
thickness | number | 10 | Ring thickness in pixels |
color | string | 'var(--chart-1)' | Any CSS color |
track-color | string | 'var(--muted)' | Color of the unfilled track |
label | string | '' | Caption under the percentage |
aria-label | string | derived | Defaults to the label and value |
Motion respects prefers-reduced-motion: the chart jumps to its final state instead of animating.
Every chart imports its engine from one file, components/ui/chart/chart-backend.ts. The default engine is a small, dependency-free SVG renderer whose API matches TanStack Charts 1.x exactly, so chart definitions are valid TanStack definitions.
To switch, install TanStack Charts and replace the exports in that file:
pnpm add @tanstack/charts@^1.1.0 @tanstack/vue-charts@^1.1.0
// components/ui/chart/chart-backend.ts
export { Chart } from '@tanstack/vue-charts';
export { areaY, defineChart, lineY } from '@tanstack/charts';
export { pie, polar, radialArc } from '@tanstack/charts/polar';
export { scaleLinear } from '@tanstack/charts/scales/linear';
export { scalePoint } from '@tanstack/charts/scales/point';
No component code changes. Verified against TanStack Charts 1.1.0, the first stable line with a compatibility promise for its public API.