Team Challenge

When to use

Reach for TeamChallenge when a team app wants a safe-by-design cooperative challenge — one shared goal, collective progress, and a whole-team reward, with a penalty-free opt-in. It is the Relatedness surface of the gamification pack. The single rule it exists to protect: never-forced — opting in is a deliberate team choice, refusing is cost-free and neutral, and the reward belongs to the whole team equally, never an individual.

Basic example

import { TeamChallenge } from "@/components/team-challenge"

export function TeamChallengeZone({ challenge, team }) {
  return (
    <TeamChallenge
      challenge={challenge}   // { label, optedIn, progress, reward, done }
      team={team}             // { name, members }
      onOptInChange={(optedIn) => persistOptIn(team.id, challenge.id, optedIn)}
      onEvent={(e) => analytics.track(e.type, e)} // host adds the envelope
    />
  )
}

Controlled opt-in (never forced)

challenge.optedIn is the value — the host owns it. Joining is a prominent invite; leaving is one click, no confirm, no guilt. Omit onOptInChange and the control hides entirely — a read-only progress + reward card falls out for free.

Compose a lighter version

It ships as a light shadcn-style compound. Drop the card chrome and keep only the penalty-free toggle (or the bare avatar pile):

import { OptInToggle, TeamMemberStack } from "@/components/team-challenge"

// A context-free toggle, droppable on any surface:
<OptInToggle optedIn={challenge.optedIn} onOptInChange={join} />

// …or just the identity pile:
<TeamMemberStack members={team.members} />

Notes

• Collective progress only. One bar + current / target — never a per-member breakdown or ranking. The avatar stack is identity, not a progress display.
• Whole-team reward. The reward reads as the team earns / earned — never first-person, never per-member.
• Done is a lightweight inline ack. A Completed together pill (non-blocking, no modal). The heavy celebration overlay is team-feedback-loop (E6) — compose it alongside; neither triggers the other.
• Telemetry. onEvent emits challenge.opened once on first mount (StrictMode-safe) and challenge.opt-in on toggle. No SDK, no next/*.
• Portable. Own types.ts slice, no other registry import — only the shadcn progress, avatar, button, badge, and skeleton primitives.