Installing Pro components

The three ways to install Pro components and templates — free while you are signed in during the launch campaign, license key configuration, and short-lived install links.

Free components need no configuration at all: npx shadcn@latest add https://webberui.com/r/split-text.json and it is installed. Pro components and full-page templates require you to prove you have access first — this page is about how to do that.

I got a 401 error

Something went wrong. You are not authorized to access the item at
https://webberui.com/r/card-stack-scroll.json

That means this is a Pro item and your command did not carry any credentials. Pick one of the approaches below.

During the launch campaign: sign up and install, no payment

All 211 Pro items are currently open to every registered user for the duration of the campaign — no payment, no credit card required. Sign in on the site, open any component page, and hit "Copy install command"; the link you get already carries credentials (see "Approach A" below).

Pricing returns once the campaign ends, but the components you installed into your project during the campaign are yours forever — once installed, a component is just code in your repo: it does not talk to our servers, there is no runtime validation, and there is no expiry mechanism.

Approach A: copy the install command from the site (fastest, nothing to configure)

Sign in at webberui.com (one-click sign-up with Google and GitHub is supported).
Open the page of the component you want and press "Copy install command".
Paste it into your terminal and run it.

What you copy is a URL carrying a short-lived token:

npx shadcn@latest add "https://webberui.com/r/card-stack-scroll.json?t=<token>"

That token expires after 15 minutes and is bound to this one resource only. It is designed that way so you can paste the whole command straight to an AI agent (Cursor, Claude Code, and so on) to run, without handing over a long-lived license key — once a key goes into a query string, it ends up written into server and CDN access logs.

Approach B: license key + namespace (for teams and CI)

To use it long-term in a project, or to let CI install too, configure components.json once:

components.json

{
  "registries": {
    "@webberui": {
      "url": "https://webberui.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${WEBBERUI_KEY}" }
    }
  }
}

Then put the key in an environment variable (do not hard-code it in components.json — that file goes into version control):

export WEBBERUI_KEY=<your license key>
npx shadcn@latest add @webberui/card-stack-scroll

Once that is set up, free components can be installed with the same short name too, no key required:

npx shadcn@latest add @webberui/split-text

`${WEBBERUI_KEY}` goes into the JSON verbatim

That ${...} is expanded by the shadcn CLI itself, not by the shell. The JSON file literally contains "Bearer ${WEBBERUI_KEY}", and the CLI reads the value from the environment variable when it sends the request.

Where to keep the key:

Situation	Recommended approach
Local development	`~/.zshrc` or the project's `.env.local` (make sure `.env*` is in `.gitignore`)
GitHub Actions	Repository secrets → in the workflow, `env: WEBBERUI_KEY: ${{ secrets.WEBBERUI_KEY }}`
Vercel / Cloudflare	Environment Variables in the project settings

Approach C: full-page templates and assembled pages

Templates and the full pages produced by the "section composer" use the same licensing:

# A single template
npx shadcn@latest add https://webberui.com/r/restaurant-bistro.json

# A full page from the composer (sections can be picked and ordered freely)
npx shadcn@latest add "https://webberui.com/api/compose?s=<list of section ids>"

Again it is one of two options: "sign in and copy the command from the site", or "set up the Authorization header". Copy the composer URL directly from /en/composer rather than typing it by hand — section ids are checked against an allowlist.

After installation

The component source lands in your components/ui/ (templates land in app/) and is entirely your code, free to modify however you like.
Every component depends on motion, which the CLI installs for you automatically.
The shared cn() utility lives in lib/utils.ts, which the CLI also creates. If you copy a component by hand, remember to add it yourself:

lib/utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Still not installing?

Symptom	Cause and fix
`Unknown registry "@webberui"`	`registries` has not been configured in `components.json` — see Approach B, or use the full URL form instead
`404 not found`	The component name is misspelled. Check the correct slug in the component overview
`401 pro_license_required`	This is a Pro item but the command carried no credentials — see Approach A or B
The token link has expired	The short-lived token only lives 15 minutes; go back to the site and copy it again
No `components.json`	Run `npx shadcn@latest init` once in your project first

If you are still stuck, email official@teyrallc.com and include the full command you ran along with the error message.