Event registration

A React block (a whole screen) in Beamline's SaaS admin app.

An event's page with its registration and ticket. The event: artwork, host, title, the date and times in the event's own time zone (named beside them), the venue and address, and about; on a phone the picture and essentials come first, then the registration, then about. Registration follows the host's availability: open (Register), approval (Request to join, said that a ticket comes only once approved), waitlist (Join the waitlist), or sold out and closed with the reason and no form; ticket types as cards with price or Free and sold-out ones said; name, email and the host's questions, a failure keeping every entry. The outcome is a status in words: requested and waiting with no ticket, on the waitlist with the place, not approved, or going; a visitor who registered before is told so. Only a confirmed registration shows its ticket: the event, its time, an entry code labelled by event and ticket type (never by the code itself) and a short reference to read out, the attendee and type; Add to wallet saves a pass with the same reference; a revoked ticket blurs its code and says the door won't take it even where a saved pass still shows it; an event change is said with the ticket still working; offline it says this is the copy on the device and the door checks it online; a ticket that can't load says the registration still stands, with Retry.

Use it for

A public event page where people register, request to join or join a waitlist, then see their ticket.
Showing an attendee's ticket with its entry code, reference and wallet pass.

Not for

Staff checking a ticket's validity, payment and entry (issued-ticket).
Setting up ticket types against seats (ticket-setup).
Booking a resource or appointment (resource-booking).

Anatomy

event: artwork, hosted by, title, when with the time zone, where, about
registration: approval or waitlist note, ticket type cards, name, email, questions, the submit button named for what it does
outcome: the status in words, what happens next, registered as
ticket: event and time, entry code, reference, attendee and type, Add to wallet or the saved pass, revoked, changed and offline notes

States

registration: open, approval, waitlist, sold out, closed, details missing, sending, failed
outcome: requested, going, on the waitlist, not approved, already registered
ticket: loading, valid, wallet saved, wallet failed, revoked, event changed, offline, can't load with Retry

Keyboard

Ticket types are a radio group; the form fields and buttons follow in reading order
The outcome is a status announced when it arrives

Motion

The entry code's own loading sheen while the ticket loads. Nothing runs at rest.

Props

Prop	Type	Default	Description
`event` (required)	`EventInfo`	—
`availability` (required)	`Availability`	—
`onRegister` (required)	`(form: RegistrationForm) => Promise<Registration>`	—	Sends the registration; resolve with its status (pending for approval, waitlisted, confirmed).
`registration`	`Registration \| null`	—	This visitor's registration from before; the page says they already registered.
`onLoadTicket` (required)	`(registrationId: string) => Promise<Ticket>`	—	Loads a confirmed registration's ticket.
`onAddToWallet`	`((ticketId: string) => Promise<unknown>)`	—	Adds the ticket to the visitor's wallet; offered when `walletAvailable`.
`walletAvailable`	`boolean`	—
`defaultWalletSaved`	`boolean`	—
`offline`	`boolean`	—	The page is shown without a connection (the ticket is the copy on this device).
`change`	`EventChange`	—	A change to the event since registering.
`defaultForm`	`Partial<RegistrationForm>`	—
`locale`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

radio-cards
input
button
qr-code

Dependencies

lucide-react

Import

import { EventRegistration } from "@beamline/event-registration";

Get it

Event registration is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent