Installation

Add a component

npx shadcn@latest add @qure/button

That is the whole installation — the same command whether it is your first component or your fortieth.

✔ Created 4 files:
  - src/lib/utils.ts
  - src/components/ui/qure-tokens.css
  - src/components/ui/button.tsx
  - src/components/ui/button.css
- Updating src/app/globals.css

Four things happened.

button.tsx. Yours from now on.
button.css beside it. Not an extra — a component here carries no colours or sizes of its own, so the two files are halves of one thing. The .tsx imports it.
qure-tokens.css. The 516 values every stylesheet points at, copied in once. Each component imports it from JavaScript, so however many you install, the bundle contains one copy.
Your stylesheet gained an @theme block, which is what makes text-body-small, rounded-md and the rest exist as utilities. It has to live in the file that imports Tailwind, and that file is yours, so the CLI writes it there.

Everything after the first component is skipped as already present. There is nothing to paste and nothing to npm install.

One thing the CLI cannot do for you — set the mode on your root element:

<html data-theme="light">

Before the first install

One file, and it is shadcn's own rather than ours. If your project already uses shadcn you have it; if not, npx shadcn@latest init writes it.

The registry is a set of JSON files in a private repository, so the entry carries a token. How to get one is on the Agents page, which also covers pointing Claude Code at the same registry.

components.json

{
  "registries": {
    "@qure": {
      "url": "https://raw.githubusercontent.com/qureai/persona-ui-component-library-frontend/main/public/r/{name}.json",
      "headers": { "Authorization": "Bearer ${QURE_UI_TOKEN}" }
    }
  }
}

The namespace is not optional, and skipping it fails in a way that looks like success. Registry dependencies are written @qure/toggle; installed by bare URL, with no @qure configured, the CLI has nowhere to resolve them — and a bare name would resolve against ui.shadcn.com, which has a toggle of its own, and install an upstream Radix component into your project without saying so.

Prerequisites

React 19, Tailwind v4, and @base-ui/react. The CLI installs the last one for you.

Checking it worked

getComputedStyle(document.documentElement).getPropertyValue('--background-brand-default')
// → " rgb(0,130,128)"   empty means qure-tokens.css did not load

If a component renders with the right shape but no colour, that is this — the stylesheet arrived and the values it points at did not.

Customising

Three levels, and all three are edits to files you own. Nothing here lives in node_modules.

Change a value everywhere by editing qure-tokens.css, or by redeclaring the token after it loads. Every component follows, because none of them contain a colour:

:root {
  --background-brand-default: rgb(12, 74, 110);
}

Change one usage with className. Component CSS sits in @layer components and Tailwind's utilities sit in @layer utilities, so a utility wins regardless of specificity:

<Button className="h-11 rounded-full" />

Change a component throughout your app by editing its .css. It is your file.

The cost of owning all of it: re-running shadcn add for something you have edited will offer to overwrite your version. The CLI asks rather than clobbering, and a token change published here reaches you when you re-run it — not before.

Tokens carry their units: var(--radius-200) is 8px, var(--space-400) is 16px. Use them directly in your own CSS.

Add a component

Before the first install

Prerequisites

Checking it worked

Customising

On this page