shadcn.io is not affiliated with official shadcn/ui
403 Forbidden Error Block for Radix UI
A full-screen 403 page for a team wiki: a door drawn as the zero of 403, the heading 'Ask someone who can say yes', the three workspace admins in a framed list with a Copy email button each, and a way back to the wiki.
Installation
Overview
Send people to someone who can open the door, with this 403 error page for React with Radix UI. It's the error screen of Nooklane, a team wiki: a whole screen with the page's rails and one band across it, everything centred. The status code is display text with a door drawn in place of the zero, a keyhole and a handle in greyscale, over the heading "Ask someone who can say yes" and one sentence that says you're signed in but the Engineering handbook is for workspace admins. The three admins stand in a framed list ruled by Guides: an Avatar with initials, a name, an address, their role and when they were last active, and a Copy Button that writes the address to the clipboard. A Shine Button takes the visitor back to the wiki, and on a phone it is pinned to the foot of the screen. It's built from Avatar, Copy Button, Shine Button and Guides, with a CSS entrance only. For any app with roles.
FAQ
Does Copy email really copy, and what does it say?
Yes: it writes the admin's address to the clipboard, and a polite status line under the list says "Copied thessaly@nooklane.example. Nothing was sent." If the browser refuses (a page not served over HTTPS, or no permission) the line says so and asks you to select the address by hand. The button's own announcement is turned off so the page says it once. Nothing is emailed: the visitor pastes the address into their own mail.
Where do the admins come from?
From the typed constant ADMINS: a name, an address, initials and the last day each was active. "Active today", "Active yesterday" and "Active 5 days ago" are counted from the typed AS_OF date in UTC, never from the clock, so the page reads the same on the server and in every time zone. In your app, list the admins of the workspace the visitor tried to open, and think about whether each admin has agreed to be contacted this way; a short list of people who have is kinder than every admin there is.
What is the door, and is it accessible?
The "403" is decoration (hidden from assistive technology) and the door, drawn in place of the zero, is a small greyscale SVG with no focusable parts. The sentence under the heading says "Error 403" in words and says what is wrong, so nothing depends on the picture.
Does this return a 403 status to browsers and search engines?
No: a component can't. Send the real HTTP status from your server or framework, so crawlers, monitors and API clients see a 403 and not a 200 with an error drawn on it. Use 401 instead when the visitor isn't signed in at all.
Why is Back to the wiki pinned on a phone?
Because the list is tall on a small screen and the way out should stay in reach. The button sits in a foot that is sticky at the bottom of the screen below the small breakpoint and falls back into the flow from there up, so the page has the one coloured button in both layouts, never two.