Team Progress Bar

When to use

Reach for TeamProgressBar in a team-board header to answer one question at a glance: how far is our team through the journey? It shows a single, always-visible, read-only bar of this team's milestone-completion % — built for competence (SDT) without tipping into comparison. It is cooperative and team-scoped by design: no other team's bar, no ranking, no per-member split — ever.

Two input modes

• milestones — the component computes done / total, enabling tick marks and the "fraction" readout.
• value — a direct 0–100 number for the simplest drop-in. If both are supplied, value wins (and dev-warns).

Basic example

import { TeamProgressBar } from "@/components/team-progress-bar"

export function BoardHeader({ team }) {
  return (
    <TeamProgressBar
      team={{ id: team.id, name: team.name }}
      milestones={team.milestones}   // % = done / total
      showTicks
      labelFormat="fraction"          // "5 / 8 milestones"
      onEvent={(e) => analytics.track(e.type, e)} // host adds the envelope
    />
  )
}

Compose a lighter version

It ships as a light shadcn-style compound. Drop the parts you don't need — a bar-only header tree-shakes the label away:

import {
  TeamProgressBarRoot, TeamProgressBarTrack,
} from "@/components/team-progress-bar"

<TeamProgressBarRoot team={{ id: "T-001" }} milestones={team.milestones}>
  <TeamProgressBarTrack showTicks />   {/* no Label part */}
</TeamProgressBarRoot>

Notes

• Always visible. No milestones yet (total === 0) renders a 0% bar, never nothing.
• Telemetry is a feature-view. onEvent emits progress-bar.checked once per mount, on first in-viewport reveal — not on every render. Omit onEvent and no observer is created.
• Accessible. The bar is a role="progressbar" with aria-valuenow/min/max; ticks are decorative-but-labelled; the fill transition respects prefers-reduced-motion.
• Portable. No next/*, no app context, no other registry import — only the shadcn progress primitive.