shadcn.io is not affiliated with official shadcn/ui
Cookie Consent Multi-Action Banner Block for Solid
A cookie prompt for an online shop: one split card with a stack of three equal-width choices, Accept all, Reject non-essential and Manage preferences.
Installation
Overview
A cookie prompt for Solid with Ark UI, for a visitor who should be able to say no as easily as yes. Boltstead's card sits between the page's solid rails and is split by a solid divider: at the start a cookie icon, a heading and two sentences about what each kind of cookie does, and at the end a stack of three choices of the same width and height: a Shine Button "Accept all", an outline "Reject non-essential" and a ghost link "Manage preferences". Accepting or rejecting folds the whole block away with a CSS height transition and a polite line says what was saved. It is a labelled region with real buttons, never a dialog, so nothing is trapped. It's built from Guides and Button with your theme's tokens for every colour. For online shops, publishers and any site that needs a one-step cookie decision with a way into the details.
FAQ
Is this a dialog? Can it be pinned to the screen?
It is not a dialog: it is a section named by its heading, in the flow of the page, and it never traps focus. To pin it, put fixed inset-x-4 bottom-4 z-50 on the card's outer element (the one with max-w-2xl) and remove the py-8 md:py-12 padding on the wrapper above it; add pb-[env(safe-area-inset-bottom)] where phones have a home bar. Pinned or not, people can tab past it and keep reading.
Are the choices really equal?
Accept all and Reject non-essential are the same size and width and sit next to each other, and Reject is one press like Accept. The difference is colour: Accept is the Shine Button. If your regulator reads colour as weight, make both outline buttons and drop the Shine Button, so neither choice stands out.
What does Manage preferences do?
It is a link, not a button, because it leaves the prompt: point its href at your preferences page, or at the granular consent card (banner-multi-action-consent-granular) on a page of its own. It doesn't fold the prompt, so a visitor who changes their mind still has the choices in front of them when they come back.
Where is the choice stored?
Nowhere in this block: it forgets on purpose so the preview always shows it. In the two handlers, acceptAll and reject, write a first-party cookie such as boltstead-cookies=all or necessary, notify your tag manager, and have the server skip the card when the cookie exists. Reading storage after the first paint would show the card and then fold it away, moving the page.
Where does keyboard focus go after a choice?
The buttons can't keep focus once the card is folded and inert, so focus moves to a visually hidden line at the same spot that says "Cookie preferences saved: all cookies allowed." or "…only necessary cookies allowed.", which screen readers read. The next Tab carries on from there.