shadcn.io is not affiliated with official shadcn/ui
Browser Unsupported Error Block for React Aria
A full-screen update-your-browser page with five real feature checks in a table (ES modules, CSS grid, :has(), WebGL, structuredClone), a Switch to pretend, and the browsers that have all five.
Installation
Overview
Tell people exactly what their browser lacks, with this browser unsupported page for React with React Aria. It's the screen Brickplane, a 3D editor, shows to a browser it can't run in: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. A centred header holds the mark, the heading and one sentence, then the summary ("3 of 5 missing") with the Shine Button "Check again" and a Switch that is a demo control, "Pretend this is an old browser", on when the page opens. Below is a table of five real checks run in this browser (ES modules, CSS grid, the :has() selector, WebGL and structuredClone), each saying Supported or Missing with an outline Badge in a shape and a word; the switch forces three of them to Missing. A last row lists the browsers that have all five, with the first version of each. For editors, games, dashboards and any app with a hard requirement.
FAQ
What is real here, and what stays in the page?
The five checks are real and read-only, run in an effect after the page loads (so the server render is stable): noModule on a script element for ES modules, CSS.supports for grid and :has(), structuredClone as a function, and a WebGL context that is made and released at once, never drawn on. Nothing is installed, stored or sent. The browser list and its versions are typed in BROWSERS.
What does the Pretend this is an old browser switch do?
It is a demo control and it is on when the page opens. While it is on, :has(), WebGL and structuredClone read Missing whatever your browser has; turn it off and every row shows the real result (a modern browser then passes all five and the heading changes). A feature your browser really lacks reads Missing either way.
Where do the browser versions come from?
They are the first versions of each browser that have all five features: :has() is the last to arrive in each (Chrome and Edge 105, Safari 15.4, Firefox 121). They are typed, not detected, and a different feature list means different versions: check the compatibility tables for the features you actually require before you publish yours.
Does the WebGL check draw anything?
No. It asks an off-screen canvas for a context, then asks the browser to release it. A browser or a device with graphics acceleration turned off can fail this check even when the browser is new; the page says Missing, and the fix is in the system's graphics settings rather than an update.
Is the table accessible?
It is a real table with a caption, column headers and the feature as each row's header, inside a scrolling region you can focus. Each result is a word as well as a shape, and Check again says in a polite status line how many features passed. On a phone the short descriptions are read aloud but not shown, so the rows stay one line each.