shadcn.io is not affiliated with official shadcn/ui
Cookies Disabled Error Block for Radix UI
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.
Installation
Overview
Say plainly what cookies do and how to turn them on, with this cookies disabled page for React with Radix UI. It's the screen Harvestbay, a farm marketplace, shows when the browser blocks them: 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. The first ruled row is the browser check: the result in words with a shape ("Cookies are blocked here" or "Cookies are on here"), the Shine Button "Check again", and a Switch that is a demo control, "Pretend cookies are off", on when the page opens. The check reads whether cookies are enabled and writes nothing, not even a test cookie. The second row says what Harvestbay's four cookies hold (session, basket, preferences, a security token) with an outline Badge, Essential, on each. The third is the steps for Chrome, Safari and Firefox in an Accordion that always keeps one open. For shops, sign-in and any site that needs a session.
FAQ
What is real here, and what stays in the page?
The result is a real, read-only check of navigator.cookieEnabled, made in an effect after the page loads (so the server render is stable). No cookie is written, and nothing is sent. The four cookies listed are typed in KEPT; replace them with yours, and keep only essential ones on a page like this. The steps are typed text for three browsers.
What does the Pretend cookies are off switch do?
It is a demo control and it is on when the page opens, so the error is what you see. Turn it off and the page follows your browser: cookies off if the browser really has them off, on otherwise. In your app remove the switch and render the page when your own check says cookies are blocked.
Is navigator.cookieEnabled a full test?
No. It says whether the browser allows cookies at all, but a site can still be on a block list, a privacy extension can drop them, and a frame can have them blocked. For a firm test, set a harmless cookie from your server and look for it on the next request; this block deliberately doesn't write one.
Which keys work in the steps?
Tab reaches each browser's header and Enter or Space opens it; one is always open, so pressing the open one does nothing. The arrow keys, Home and End also move between the headers. All three panels are the same height, so opening one never moves the page.
Will the steps match my browser's menus?
They name the settings a browser uses today (Privacy and security, Third-party cookies, Block all cookies, Enhanced Tracking Protection), but browsers rename and move menu items between versions, so check each against the version you support and edit the text.
What changes on a phone?
The button is full width under the result, the mark is hidden, the cookie cells show a short line each with Essential read aloud rather than shown, and the status line is one line (two on the narrowest phones). The state change keeps the page's height: both headings, both sentences and both results share one cell.