---
title: shadcn registry
description: Install Brio UI components with the shadcn CLI from the Brio UI registry, by URL or through the @brio and @brio-pro namespaces.
---

# shadcn registry

Brio UI is a [shadcn registry](https://ui.shadcn.com/docs/registry). Every component is a registry item, so the shadcn CLI can install it into any project that has a `components.json`: Next.js, Vite, Remix, Astro or anything else shadcn supports.

| What | URL |
| --- | --- |
| Free component | `https://brioui.com/r/<slug>.json` |
| Index of free components (every listed item installs; `free.json` is the same list) | `https://brioui.com/r/registry.json` |
| Index of every component (Pro items carry `meta.tier: "premium"`, metadata only) | `https://brioui.com/r/all.json` |
| Pro component (needs a licence key) | `https://brioui.com/api/r/<slug>.json` |

## Install a free component by URL

The shadcn CLI needs a `components.json` in the project. If there isn't one yet, run `npx shadcn@latest init -d` first, or use `npx brio-ui add faq`, which needs no setup.

```bash
npx shadcn@latest add https://brioui.com/r/faq.json
```

The file lands next to your other UI components (`components/ui/faq.tsx` with the default aliases) and shadcn installs `motion` if it is missing. The docs' examples import from `@/components/brio/<slug>`, the `brio-ui` CLI's folder; with shadcn, import from `@/components/ui/<slug>` instead.

## Add the namespaces once

For shorter commands, and for Pro components, add both registries to `components.json`:

```json
{
  "registries": {
    "@brio": "https://brioui.com/r/{name}.json",
    "@brio-pro": {
      "url": "https://brioui.com/api/r/{name}.json",
      "headers": { "Authorization": "Bearer ${BRIO_LICENSE_KEY}" }
    }
  }
}
```

Then:

```bash
npx shadcn@latest add @brio/faq
npx shadcn@latest add @brio-pro/site-footer
```

shadcn reads `${BRIO_LICENSE_KEY}` from the environment, so put the key in a git-ignored `.env.local` or your CI's secret store. Never commit it. Free components never need a key; asking `@brio-pro` for a free one redirects to its public item.

## Update a component

Run the same command with `--overwrite` to replace your copy with the latest version:

```bash
npx shadcn@latest add @brio-pro/site-footer --overwrite
```

This replaces the whole file. If you changed the component, commit first and review the diff, or keep your changes in a wrapper component instead of the Brio file.

## Pro components in public repositories

A Pro licence lets you ship Pro components in your product, but not publish their source. If the repository is public, keep the Pro files out of git and pull them during the build:

1. Add the Pro components' folder (for example `components/brio/`) to `.gitignore`.
2. Store `BRIO_LICENSE_KEY` as a secret in your host (Vercel, Netlify, CI).
3. Run the pull before the build, for example `"prebuild": "npx shadcn@latest add @brio-pro/site-footer @brio-pro/cta-band --overwrite --yes"`.

Each pull is watermarked for your licence and logged. Make a separate key for every machine, CI pipeline or agent so you can revoke one without touching the others.

## Errors

| Status | Meaning |
| --- | --- |
| 401 | The key is missing, wrong or revoked. Check `BRIO_LICENSE_KEY`. |
| 403 | Your licence doesn't include that component. The response links to where you can buy it. |
| 404 | No component has that name. The index lists every slug. |
| 429 | Too many requests. Wait for the `Retry-After` seconds. |