Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

Browser Unsupported Error Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Tell people exactly what their browser lacks, with this browser unsupported page for React with Base UI. 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.

Should I block the app for these browsers?

Block only what truly can't work, and say why, as this page does. Prefer feature checks like these to reading the browser's name, which lies, and keep a way for people to carry on at their own risk when the missing feature is not essential.

  • Pro

    Cookies Disabled Error

    Browser and device

    A full-screen page for a browser with cookies off: a check that reads the browser and writes nothing, what four essential cookies hold, and the steps for three browsers in an accordion.

  • Pro

    Storage Full Error

    Browser and device

    A full-screen page for a device that is out of room: a meter, a Check this browser button that reads the real storage estimate, and five steps for making room, with the shortcut as words for Mac or Windows.

  • Pro

    Version Mismatch Ruler Error

    Maintenance

    A full-height page for a web app tab running a retired version: a ruler of five releases with the supported range shaded and You are here marked, a radio group to read each release, three changes in 5.0 and a reload button.

  • Pro

    Offline Error

    Network

    A full-screen offline page that listens to the browser's real online and offline events: a signal figure, a Check connection button, a Switch to pretend, and what stays available without a network.

  • Pro

    Camera Denied Error

    Browser and device

    A full-screen page for a blocked camera and microphone: what the app can use, a Check again that reads the permission state, a drawn address bar with its popover, and the steps for three browsers in tabs.

  • Pro

    Clipboard Denied Error

    Browser and device

    A panel for when the browser blocks copying: a read-only box that selects itself, Select all text, a Copy button that really tries the clipboard, the keys as words for Mac or Windows, and steps to allow it.

All 100 error blocks