shadcn.io is not affiliated with official shadcn/ui
Cookie Consent Notification Block for Solid
A news site's corner cookie card: Reject all and Accept all as equal buttons, a Customize that opens a switch for each optional kind with the cookies it sets, and a one-line receipt you can change.
Installation
Overview
Ask for cookies without nudging, with this cookie consent card for Solid with Ark UI. It's an article on the Ostleby Courier, a news site, drawn in greys inside a hairline frame with a plus mark on each corner, with a small card (22 rem at most) at the stage's foot start that never blocks the page. Two sentences say what the optional cookies do and that none is on until you choose; Reject all and Accept all are two Shine Buttons of the same size, the same outline and the same row, so neither is nudged. Customize opens, in place and growing upward from the card's foot, a Switch for each optional kind (preferences, analytics, marketing) with the names of the cookies it sets in mono, and Essential shown as always on. A choice folds the card into one line, "You chose: essential and analytics", with a Change button, and the page's own Privacy choices link in the drawn footer opens it again. It's built from Switch, Collapsible, Shine Button, Button and Guides, with CSS motion only. For news sites, shops and any page that sets cookies.
FAQ
Is anything written to cookies or storage?
No. Choosing only changes the card and the line it writes ("You chose: essential and analytics. Nothing was stored in this demo."), so a reload asks again. In your app, write the choice (and the date and the version of your policy it applies to) in a first-party cookie or in your own storage, and set only the cookies of the kinds that are on.
Why are Reject all and Accept all the same?
So the easy answer isn't the one you want people to give: they have the same size, variant, row and order of weight, Reject first. Both are Shine Buttons with the outline variant, so the light that sweeps across on hover is the same too. There is no filled button on the card at all.
How does Customize work?
The trigger is a real button with aria-expanded; the kinds sit in a list inside a Collapsible, unseen and out of the tab order while it is closed. Each optional kind has a switch named "Analytics cookies" and so on, and its cookies in mono under it (_oc_ab, _oc_reach); Essential is shown "On" with no switch, since refusing it would break the page. The switches change a draft; Save choices keeps it, and Reject all and Accept all keep their own answers whatever the switches say.
What is the receipt, and how do I change my mind?
After any choice the card becomes one line, "You chose: essential and analytics." or "essential only" or "all cookies", and focus moves to Change. Change, or Privacy choices in the page's footer, reopens the card with the switches as you left them and focus on Customize. The block says "The cookie card is already open" if you press the footer link while it is.
How is this different from the cookie dialog?
dialog-cookie-consent is the two-button question in a non-modal popover from the page header; this is the corner card with the granular choice inline, the cookie names, the receipt and the footer link, with no dialog and no header trigger. Pick this one when you want the choice to live on the page.
Is it accessible?
The card is a named section, not a modal: the page stays readable and usable beside it and nothing takes focus on load. Every control is a real button or switch with a name, the switches' labels are written out, and one polite status line says what each press did. On a phone the explanatory line under each kind is kept for screen readers and the cookie names stay visible, so the card fits the stage.