Goals with Progress Bars

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature153.tsx instead.

Usage

The file also exports feature153Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature153, feature153Demo } from "@/components/blocks/feature/feature153";

export default function Page() {
  return <Feature153 {...feature153Demo} />;
}

Props

Types

interface Feature153Goal {
  label: string;
  percent: number; // 0-100, static snapshot value
  detail?: string;
}

Behavior notes

• Fully static server component, no click or hover interaction anywhere in this block.
• Each progress bar's fill is a plain <div> with a fixed inline `width: {percent}%` style computed once from the static `percent` prop, it does not animate or count up.
• The percent value is clamped to 0-100 before being used for both the label and the bar width, so an out-of-range input can't overflow the bar.
• Each bar carries role="progressbar" with aria-valuenow/min/max for screen readers, since the visual fill alone conveys no accessible value.