Back to components
Goal Progress Ring React component

What is this?

A white goal card: a label, the amount reached, the target, and a closed ring with the percent in its center. When the card comes into view, the green ring draws around to the percent and the amount counts up with it. Swap the label, value, goal, prefix, and caption, then drop it into a revenue dashboard, a fundraising page, or a goals feature block.

Component

Goal Progress Ring

A white goal card: a label, the amount reached, the target, and a closed ring with the percent in its center. When the card comes into view, the green ring draws around to the percent and the amount counts up with it. Swap the label, value, goal, prefix, and caption, then drop it into a revenue dashboard, a fundraising page, or a goals feature block.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS

Version 1.0.0