Consent Dock

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Northwind CoffeeShopSubscriptionsJournal

New this week

Fresh roasts,
every Monday.

Single-origin beans, roasted on Sunday and at your door the next day.

The cookie banner every site needs, without the nag. Choose, and the banner drains into a small button in the corner; customise, and the switches fall in a domino run before it closes. The button is a physical thing: throw it and it flies to whichever corner you aimed at, the way a picture-in-picture video does on iPhone, and it stretches if you pull it off the edge. Tap it to grow the preferences back out of it. Arrow keys move it between corners, and the choice can be saved to localStorage. It records the choice and hands it to onChange; it does not load or block any scripts itself, so wire onChange to your analytics. Until you touch it, it plays through a choice and a few throws on its own.

Corner

Heading

Choose and throw by itself

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
contained	boolean	false	Sits inside a box of its own, with children as the page behind, instead of over the whole window.
corner	"bl" \| "br" \| "tl" \| "tr"	"bl"	The corner the button docks to.
storageKey	string	—	Remembers the choice in localStorage under this key. A remembered choice starts docked.
title	string	"Cookies, your call."	The banner heading.
text	string	—	The banner text.
autoplay	boolean	false	Plays through a choice and a few throws by itself until the first interaction.
onChange	(consent: Consent) => void	—	Called with { necessary: true, analytics, marketing, personalisation } when a choice is made.
children	ReactNode	—	The page behind the banner, in contained mode.
className	string	—	Extra classes for the outer wrapper.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Consent Dock is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Pro
New
Liquid Send
Pro
New
Folder Tree
Pro
New
Context Menu
Pro
New
Liquid Pagination

Consent Dock, animated React component

Play with it

Fresh roasts,
every Monday.

Cookies, your call.

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Consent Dock, animated React component

Play with it

Fresh roasts,every Monday.

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls

Fresh roasts,
every Monday.