Access codehospitality
Entry code display with grouped digits, copy with live announcement, reveal toggle, validity window and QR slot.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/access-codeDefault
access-code-demo.tsx
import { AccessCode } from "@/components/ui/access-code";
const from = Date.parse("2026-07-20T15:00:00Z");const until = Date.parse("2026-07-22T11:00:00Z");const now = Date.parse("2026-07-20T09:00:00Z");
function renderQr(code: string) { return <div className="flex size-24 items-center justify-center rounded border text-xs">QR {code.length}</div>;}
export default function AccessCodeDemo() { return <AccessCode code="482915" masked validFrom={from} validUntil={until} now={now} timeZone="UTC" qr={renderQr} />;}