shadcn registry

Brio UI is a shadcn 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.

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.

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:

{
  "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:

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:

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