Activity Rings
Concentric progress rings that draw in on mount and lap past 100% with a second shadowed loop.
activity-rings.tsxactivity-rings.css
Checking access…
Overview
Three goals in one glance, each with its value and target beside the rings.
Over-achieving draws a second lap on top of the first with a soft shadow, the way fitness apps do.
When to use
- Goal tracking: fitness, habits, savings, sales targets.
When not to use
- Comparing values across items: a bar chart is easier to read.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/activity-rings.json$
npx shadcn@latest add https://sundaeui.dev/r/activity-rings.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/activity-rings.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/activity-rings.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy activity-rings.tsx and activity-rings.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ActivityRings } from '@/components/sundae/activity-rings'
<ActivityRings rings={[
{ label: 'Move', value: 380, goal: 480, unit: 'kcal', color: '#fb7185' },
{ label: 'Exercise', value: 34, goal: 30, unit: 'min', color: '#a3e635' },
]} />Props
| Prop | Type | Default |
|---|---|---|
rings*Label, value, goal, unit and colour. | Ring[] | — |
sizeDiameter, px. | number | 124 |
titleCaption. | string | 'Today' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The SVG is role="img" with a label listing every ring’s percentage.
- Values are also real text in the caption.
- Reduced motion skips the draw-in.
Customization
- Every colour is a CSS custom property on the root class; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Activity Rings free?
- Activity Rings is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Activity Rings?
- Run npx shadcn@latest add https://sundaeui.dev/r/activity-rings.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Activity Rings support keyboard and screen readers?
- The SVG is role="img" with a label listing every ring’s percentage. Values are also real text in the caption.
- Does Activity Rings respect reduced motion?
- Reduced motion skips the draw-in.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Heatmap Grid
Data · Understated - Pro
Scatter Plot
Data · Refined - Pro
Histogram
Data · Refined OKR Tracker
Data · Refined