shadcn.io is not affiliated with official shadcn/ui
Backstage Pass Music Block for Radix UI
A drawn lanyard pass with name, role, valid dates and a QR code, an access-level group that rewrites the badge and the code, and a venue floor plan where each level's zones read Access or No access.
Installation
Overview
Show who can go where at a venue, with this backstage pass for React with Radix UI. Lanyardly, a pass app, draws one pass in a hairline frame with a plus mark on each corner: a lanyard card with initials, a name, a role, the access level as a badge, the valid dates with "Valid for 2 more days" worked out from a fixed date, and a QR Code of a typed payload. A Segment Group (General, Crew, VIP, All areas) rewrites the badge and the code, and a drawn floor plan of Harbourlight Arena shows five zones (Stage, Pit, Backstage, Green room, Load-in): the zones the level may enter are solid and say "Access", the others are hatched and say "No access". "Print pass" opens the browser's print dialog. Nothing is scanned or issued. It's built from Segment Group, QR Code, Button and Guides, with a CSS entrance only. For festivals, venues and crew apps.
FAQ
How do I change the levels and zones?
Edit LEVELS (an id, a name and the zones that level may enter, by id) and ZONES (an id, a name and its box on the plan in a 100 by 70 grid). The badge, the count ("3 of 5 zones"), the plan and the code payload are all drawn from those. The holder, the role and the dates are the constants HOLDER, ROLE, VALID_FROM and VALID_TO.
How are the days of validity worked out?
From two ISO dates and a fixed "now" (AS_OF), using whole days since 1970 from Date.UTC, so it reads the same on the server and in the browser and never reads the clock. A pass issued for real would compare against the scanner's clock instead.
Is the QR code real?
It encodes a typed text (lanyardly:pass:LY-0412:all:2026-10-14) with the level in it, so it changes when you pick another level, and any QR reader can show you that text. Nothing scans it and nothing signs it: a real pass would carry a server-signed token that a scanner checks.
What does Print pass do?
It calls window.print(), which opens the browser's print dialog for the page. The page has no print stylesheet, so a real project would add one that prints only the pass. Nothing is issued or sent, and the status line says so.
How does the plan read without colour?
By weight and words: an allowed zone is solid with light text and the word "Access", a closed one is hatched with the word "No access". The plan is a list, so a screen reader hears each zone with its word. The plan stays left to right in a right-to-left page, because a floor plan is a drawing.