AI Tools
A quick guide to adding ReUI components to your application.
This guide walks you through the essential steps to seamlessly integrate ReUI into your shadcn project.
ReUI is built on the latest React 19 and . Ensure your project is set up with these technologies before proceeding. We recommend following the and setup to prepare your environment.
Add the ReUI registry namespace to your components.json and set your component library and style.
Learn more about registry config from .
{
...
"style": "base-nova",
...
"registries": {
"@reui": "https://reui.io/r/{style}/{name}.json"
}
}Free 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 and send your as a Bearer header.
c-*REUI_LICENSE_KEYSome 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.
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.
Use the license key from your ReUI account:
Create or update .env.local in the root of your project:
REUI_LICENSE_KEY=your-license-key-hereKeep 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}"
}
}
}
}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/allFree 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.
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.
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.
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.
ReUI is designed from the ground up to be AI-friendly, making it easier for language models to understand and modify your UI.