shadcn.io is not affiliated with official shadcn/ui
Visitor Pass Contact Block for Radix UI
A visitor pre-registration for an office building: pick a host from a directory, a weekday on a calendar and an arrival window, and get a check-in pass with a QR code.
Installation
Overview
A visitor pre-registration for React with Radix UI. A centred header sits over a card in card, a muted shell with + marks on its corners around a raised panel. The form picks a host from the building's directory (a searchable list whose rows show initials, the company and the floor), a visit date on a calendar that closes weekends and days already gone, an arrival window, and the guest's name and email. Sending replaces the form, in the same space, with a visitor pass: a QR code, the guest, the host, the date, the arrival window and where to go, with "Show this at reception". A line under the card gives reception's phone. It's built from Combobox, Date Picker, Select, Field, Input, Qr Code, Guides, Shine Button and Button.
FAQ
Where does the registration go?
Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the pass. Replace that timer in submit with a call to your visitor system: details holds the host, date, arrival window and the guest's name and email. The QR code encodes the example address in passUrl: point it at whatever your front desk scans.
How does the calendar know today?
It asks the browser after the page has loaded, so the server's HTML never depends on a clock. Until then every day is open; after it, weekends and days before today are unavailable on the calendar and can't be picked. A date typed into the field is checked when you submit, so a typed Saturday is turned away with a message. Reception's days live in closed at the top of the file.
How does the host list work?
It is a directory: typing filters it by name, and the host has to be one of the people listed, so a half-typed name is a problem on submit ("Choose who you are visiting from the list"). The people are fictional; replace HOSTS with your tenants.
The list is a Base UI Combobox over an array of people.
What does the pass say, and who hears it?
It repeats the guest, host, date, arrival window and company with floor, beside a QR code that is dark on light in any theme because scanners need it. It is a status region that takes focus when it appears, so a screen reader reads it at once, and "Register another guest" brings back an empty form and puts focus on its heading. It doesn't promise anything a server would have to keep.