Components

Run of Show

Keep event timing, owners, and live operating status in one timeline.

Tournament morning

  1. Gates and registration open

    OpsDone

  2. Captain meeting

    Rules, weather plan, and field assignments

    BenHappening now

  3. Pool play begins

    FieldsUpcoming

  4. Bracket lock

    Confirm seeds before publishing

    ScoringUpcoming

A shared timeline for the people running the event. Each row answers four things quickly: when, what, who owns it, and whether it is done, active, or upcoming.

Install#

npx shadcn@latest add https://benhof.ai/r/run-of-show.json

import { RunOfShow } from "@/components/run-of-show"

;<RunOfShow
  title="Tournament morning"
  items={[
    {
      id: "captains",
      time: "8:15 AM",
      title: "Captain meeting",
      owner: "Ben",
      status: "active",
      note: "Rules, weather plan, and field assignments",
    },
  ]}
/>

Props#

PropTypeDefaultDescription
itemsRunOfShowItem[]-Timeline rows with time, title, owner, note, and status.
titlestring"Run of show"Timeline heading.

The active row is emphasized, completed work is muted, and owner labels stay compact enough for a phone.