shadcn.io is not affiliated with official shadcn/ui
Cookies Disabled Error Block for React
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 Base 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 don't move between headers here: use Tab. 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.
Related
- Pro
Browser Unsupported Error
Browser and deviceA 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.
- Pro
Storage Full Error
Browser and deviceA 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
Camera Denied Error
Browser and deviceA 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
Notification Denied Error
Browser and deviceA panel for blocked push notifications: two channel cells, Push (its state and the one-line fix, read from the browser) and Email instead, plus what the digest brings.
- Pro
Offline Error
NetworkA 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
Clipboard Denied Error
Browser and deviceA 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.