# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/docs/installation. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
Getting started

* [Introduction](/docs)
* [Installation](/docs/installation)
* [shadcn CLI](/docs/cli)

Customization

* [Theming](/docs/theming)

AI

* [MCP server](/docs/mcp)

About

* [Pricing & Pro](/docs/pricing)

Documentation menu

Getting started

* [Introduction](/docs)
* [Installation](/docs/installation)
* [shadcn CLI](/docs/cli)

Customization

* [Theming](/docs/theming)

AI

* [MCP server](/docs/mcp)

About

* [Pricing & Pro](/docs/pricing)

# 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

![](https://oud.pics/sm/l/npm.svg)npm

$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](/docs/cli).

`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](https://ui.shadcn.com/docs/installation).

## 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

![](https://oud.pics/sm/l/npm.svg)npm

\# 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

![](https://oud.pics/sm/l/npm.svg)npm

\# 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](/blocks) 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

![](https://oud.pics/sm/l/npm.svg)npm

$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](/account). New here? [See Pricing & Pro](/docs/pricing).

## 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](/docs/mcp) and ask for the UI you want in plain language; your agent searches the catalog and installs the right block.

[ PreviousIntroduction](/docs)[Next shadcn CLI](/docs/cli)

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.