Get Started

This guide walks you through the essential steps to seamlessly integrate ReUI into your shadcn project.

Prerequisites

ReUI is built on the latest React 19 and Tailwind CSS v4. Ensure your project is set up with these technologies before proceeding. We recommend following the Official shadcn/ui Installation Guide and shadcn/create setup to prepare your environment.

Setup ReUI Registry

Add the ReUI registry namespace to your components.json and set your component library and style. Learn more about registry config from shadcn registry docs.

{
  ...
  "style": "base-nova",
  ...
  "registries": {
    "@reui": "https://reui.io/r/{style}/{name}.json"
  }
}

Free c-* components can be installed with this config as-is. If you want to install paid blocks, icons, or templates, switch the registry entry to the authenticated object form shown in the Registry Guide and send your REUI_LICENSE_KEY as a Bearer header.

Some free c-* installs also pull shared @reui/* primitives as dependencies. Those supporting registry items remain publicly accessible so the free component flow keeps working without a license.

License Key for Premium Items

If you plan to install premium blocks, icons, or templates with the shadcn CLI, add your license key once and keep using the same @reui namespace.

For the full dedicated walkthrough, see License Setup.

Your License Key

Use the license key from your ReUI account:

1. Add your license key for paid installs

Create or update .env.local in the root of your project:

REUI_LICENSE_KEY=your-license-key-here

2. Switch the registry to the authenticated form

Keep the same namespace, but add the authorization header to components.json:

{
"registries": {
  "@reui": {
    "url": "https://reui.io/r/{style}/{name}.json",
    "headers": {
      "Authorization": "Bearer ${REUI_LICENSE_KEY}"
    }
  }
}
}

3. Install premium registry items

You can now install premium entries from the same namespace:

npx shadcn@latest add @reui/banner-1
npx shadcn@latest add @reui/icons/default/solid/all

Free c-* components keep working with the authenticated config, so you do not need a second registry namespace. For more registry details, see the Registry Guide.

Components

You can integrate ReUI components using the shadcn CLI for automation or by manual installation for full control. Both methods support our entire collection of Component Docs and Components.

Styling

ReUI extends the official shadcn/ui theming system with additional semantic tokens that enable precise, context-aware UI states:

• --destructive-foreground: Used for high-contrast destructive actions and error states.
• --info & --info-foreground: Semantic colors for informational alerts and badges.
• --success & --success-foreground: Semantic colors for success indicators and positive states.
• --warning & --warning-foreground: Semantic colors for cautionary callouts and warnings.
• --invert & --invert-foreground: Semantic colors for inverse states.

This setup our custom color tokens, see the Styling Guide.

Base UI and Radix UI Support

We understand that different projects have different needs. ReUI is built to be primitive-agnostic, offering both Base UI and Radix UI versions for each entry in our registry. This allows you to maintain consistency while choosing the library that best fits your technical requirements.

AI-Enhanced Workflow

ReUI is designed from the ground up to be AI-friendly, making it easier for language models to understand and modify your UI.

• llms.txt: Access our llms.txt file for a structured map of our documentation and architecture optimized for AI agents.
• Copy Markdown: Every page includes a Copy Markdown feature, allowing you to instantly feed documentation or code into your AI-driven development workflows.