Documentation menu

Installation

Beste UI installs through the standard shadcn CLI. If your project already uses shadcn/ui, you can skip straight to installing a block.

Prerequisites

Beste assets are built for React 19, Tailwind CSS v4, and the shadcn/ui primitives. They are plain React components, so they run in any React setup: Next.js, Astro, TanStack Start, Remix, React Router, or a plain Vite app.

1. Initialize shadcn/ui

If you are starting fresh (or your project is not shadcn-initialized yet), run the shadcn init once. It creates a components.json, wires up your Tailwind theme variables, and adds the cn() helper.

Terminal
npx shadcn@latest init

The initializer asks which primitive layer to use. shadcn now supports two: pass -b base for Base UI (the new default) or -b radix for Radix. You can also target a framework with -t, for example npx shadcn@latest init -t vite. Full flag list is in the CLI reference.

components.json is where shadcn records your choices: the style, the base color for theme tokens (Neutral, Stone, Zinc, and so on), whether to use CSS variables for theming, and your import aliases. For the canonical reference, see the shadcn installation docs.

2. Install a block

Every asset page has a copy-ready install command. It is just the shadcn add command pointed at a Beste registry URL. The default /r-base/ URL installs the Base UI variant; use /r/ for Radix.

Terminal
# Base UI (default)
npx shadcn@latest add "https://ui.beste.co/r-base/hero7.json"
# Radix
npx shadcn@latest add "https://ui.beste.co/r/hero7.json"

The CLI writes the component into your project (under components/beste/… by default), pulls in any shadcn primitives it needs, and installs npm dependencies. From that point the code is yours; edit it freely.

Or add the whole registry once

Beste UI is also published in shadcn’s registry. Add it once and install by a short namespaced name instead of a full URL.

Terminal
# Add the Beste UI registry (once)
npx shadcn@latest registry add @beste-ui
# Then install any block by name
npx shadcn@latest add @beste-ui/hero7
Work in progress. The namespace currently resolves to the Radix variant, so it is only correct for Radix projects for now. shadcn does not tell a registry which primitive layer the consuming project uses (Base UI vs Radix), so making this Base UI-aware is still being figured out. On a Base UI project, use the copy command on any block page in the meantime — it lets you pick the flavor.

3. Pro blocks

Pro assets require a license. Add your account email and license key as query params to the install URL and the CLI will fetch the real source:

Terminal
npx shadcn@latest add "https://ui.beste.co/r-base/hero7.json?email=you@example.com&license_key=YOUR_LICENSE_KEY"

Signed-in Pro users get this exact command pre-filled on every block page. Your email and key live on your Account page. New here? See Pricing & Pro.

Prefer an AI agent?

If you use Cursor, Claude Code, Windsurf, or VS Code, you can skip the copy-paste entirely. Connect the Beste MCP server and ask for the UI you want in plain language; your agent searches the catalog and installs the right block.