Components

Roster Check-In

Track player arrival and waiver readiness before first pitch.

Roster check-in

Backyard Bombers

1 / 4 ready

PlayerArrivedWaiver

  • Riley Chen

    #7

  • Marcus Hill

    #12

  • Eli Brooks

    #4

  • Noah Patel

    #21

A small registration-desk surface for the two questions that slow down first pitch: is the player here, and is the waiver complete? A player counts as ready only when both are true.

Install#

npx shadcn@latest add https://benhof.ai/r/roster-check-in.json

import { RosterCheckIn } from "@/components/roster-check-in"

;<RosterCheckIn
  team="Backyard Bombers"
  players={players}
  onPlayerChange={(id, changes) => updatePlayer(id, changes)}
/>

Props#

PropTypeDefaultDescription
teamstring-Team label in the header.
playersRosterCheckInPlayer[]-Controlled roster with arrival and waiver booleans.
onPlayerChange(id, changes) => void-Handles one status change. Omit for a read-only board.

Status controls use pressed-button semantics, keyboard focus rings, and a polite ready-count announcement for assistive technology.