Skip to content
txbrendan/ui

Check-in Code

beta

An event's check-in code, for a host's phone or a tablet at the door. Faces arrive under it as people scan, and the count opens who is not in yet.

Preview

Workshop

Tue 6 Oct · 19:00 · Engineering · Room 1

Scan with your phone camera to check in

Or enter the code482 719

Workshop

Tue 6 Oct · 19:00 · Engineering · Room 1

Scan with your phone camera to check in

Or enter the code482 719

New hire training

Sat 10 Oct · 09:30

Scan with your phone camera to check in

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

  2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the component.

    npx shadcn@latest add @txbrendan/check-in-code

Use it for

  • On a host's phone or a tablet at the door, as people arrive for a workshop or a meeting.
  • Pass value, usually the event's check-in link. The code is drawn on the device, so it shows without signal.
  • Pass code too, a short one to type, so nothing is camera-only. Digits are easiest on a phone keypad.
  • Pass checkedIn, oldest first, and expected. The count rolls and is read out, and reads All 23 checked in, in green, once everyone is in.
  • Pass notYet and onCheckIn, and each Not yet row in the count's peek gets Check in, for anyone without a phone or with a flat battery. Their face arrives at once, Undo takes it back for 8 seconds, and onCheckIn runs once the window ends.
  • Change value to rotate the code. The new one fades in.
  • Use layout="side" on a wide screen, with the code on the left and the details on the right.

Avoid it for

  • A toast for each check-in. The face arriving and the row turning to Checked in already say it.
  • Telling people the count by color alone. All 23 checked in says it in words.

Props

  • value

    What the code opens, usually the event's check-in link.

    string

  • title

    The event, like "Workshop". It names the code and the peek.

    string

  • meta

    When and where, like "Tue 6 Oct · 19:00 · Room 1".

    string

  • hint

    What to do with the code.

    string · default "Scan with your phone camera to check in"

  • code

    A short code to type instead, like "482 719".

    string

  • checkedIn

    Who has checked in, oldest first.

    { person: string; photo?: string; at?: string | Date }[]

  • expected

    How many are expected.

    number

  • notYet

    Who has not checked in yet, for the peek.

    { person: string; photo?: string; meta?: string }[]

  • onCheckIn

    Adds Check in to each Not yet row in the peek. It runs once the undo window ends.

    (person: { person: string; photo?: string }) => void | Promise<unknown>

  • peek

    More PeekCard props for the count's peek, like actions: [{ label: "Remind 9" }].

    Partial<PeekCardProps>

  • size

    The code's size: 120, 160, or 240px. Use "lg" on a tablet at the door, so it scans from further off.

    "sm" | "md" | "lg" · default "md"

  • layout

    The code in the middle, or the code left and the details right.

    "stack" | "side" · default "stack"

  • className

    Extra classes. Later classes win.

    string

Accessibility

  • The code is an image named "Check-in code for" and the title.
  • The short code is text, so people can read it out or type it.
  • The count is a peek trigger. Hover, focus, or a tap opens who is not in yet, then who is in, and Esc closes it.
  • A polite live region reads the count each time it changes, like "15 of 23 checked in".
  • The faces are hidden from screen readers. The count and the peek say who is in.
  • Check in is a native button that slips to Checked in, with Undo, and says so once.
  • All 23 checked in is green text in the success tone's soft text, which the theme holds to 4.5:1, and the words say it too.

Examples

Large code, with a code to type and the count

<Card className="items-center">
  <CheckInCode
    size="lg"
    value="https://example.com/in/team/482719"
    title="Workshop"
    meta="Tue 6 Oct · 19:00 · Engineering · Room 1"
    code="482 719"
    checkedIn={ins}
    expected={23}
    notYet={outs}
    onCheckIn={checkIn}
  />
</Card>