# 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/theming. 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)

# Theming

Beste assets are styled entirely with shadcn/ui theme tokens, so they inherit your theme automatically. Change your variables and every block updates with you.

## CSS variables, not hardcoded colors

shadcn/ui themes with CSS variables. Instead of literal colors, components reference semantic tokens like `bg-background`, `text-foreground`, and `border-border`. The variables live in your global stylesheet (usually `app/globals.css`) and are exposed to Tailwind via the `@theme inline` directive. Because Beste assets only use these tokens, they match your brand the moment you drop them in.

## The background / foreground convention

Tokens come in pairs. The base name is the surface color; the `-foreground` variant is the text and icon color that sits on that surface. So `--primary` is a button background and `--primary-foreground` is its label. The main tokens:

* `--background` / `--foreground` — the page surface and its text.
* `--card`, `--popover` — elevated surfaces (each with a `-foreground`).
* `--primary`, `--secondary`, `--accent`, `--muted` — emphasis levels.
* `--destructive`, `--border`, `--input`, `--ring` — states and controls.
* `--radius` — the base corner radius the whole system derives from.

## What the tokens look like

shadcn defines them in `:root` and overrides them under `.dark`. Modern themes use the OKLCH color space for perceptually even colors across light and dark:

globals.css Copy

```
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  /* ...card, popover, secondary, accent, destructive, input, ring... */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* same tokens, dark values */
}
```

## Customizing

Two dials cover most needs. Change `--primary` (and its `-foreground`) to recolor accents across every block, and change `--radius` to make the whole UI sharper or rounder. To add a brand token, define it under `:root` and `.dark`, expose it with `@theme inline`, and a matching utility (like `bg-brand`) becomes available. The [shadcn theming guide](https://ui.shadcn.com/docs/theming) covers this in depth, and [the color reference](https://ui.shadcn.com/colors) lists every token.

## Dark mode

There is nothing extra to do. Dark mode is just the `.dark` token overrides, so every Beste block is dark-ready as long as your app toggles the `dark` class (for example with `next-themes`). Many asset pages also include a live theme picker so you can preview a block against different tokens before installing.

## Tones

Some Beste pieces and components expose a `tone` prop (for example `neutral`) that swaps a small set of token classes so the same component can read as quiet or prominent without new CSS. Where a tone picker exists, you will see it in the preview on the asset page.

[ Previousshadcn CLI](/docs/cli)[Next MCP server](/docs/mcp)

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