Project Progress Card

Report a project's progress with a counting percentage, a glowing gradient track, collaborator portraits and a details link.

Dependencies: No extra packages
Size: 325 lines
Controls: 9 controls

example.tsx

1import { ProjectProgressCard } from "@/components/onycx/project-progress-card";23export default function Example() {4  return (5    <ProjectProgressCard6      title={"Project Progress"}7      tag={"Onboarding prototype"}8      value={65}9      due={"Due July 28"}10      ctaLabel={"More details"}11      fromColor={"#c6ff5a"}12      toColor={"#5ff6e4"}13      duration={1600}14      spin15    />16  );17}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/project-progress-card.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/project-progress-card.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the project-progress-card.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
title / tag	string	"Project Progress" / "Onboarding prototype"	Heading (h3) and the pill beside it. Empty tag hides the pill.
value	number	65	0–100; clamped. The pill never shrinks below its own height.
due	string	"Due July 28"	Text in the free end of the track. Empty hides it.
collaboratorsLabel / collaborators	string / Collaborator[]	"Collaborators" / 3 people	{ name, image? }. Without an image a drawn portrait is used; the count follows the list.
ctaLabel / ctaHref	string	"More details" / "#"	Glass link pill. Empty label hides it.
fromColor / toColor	string	"#c6ff5a" / "#5ff6e4"	Fill gradient; the glow uses the end colour.
duration	number	1600	Fill and count-up time in ms on first view.
spin	boolean	true	Turns the loader icon in eight steps every 1.8s.
width	number	600	Maximum width in px.