Col
–
Libraries

ReUI

reui.io

React components and patterns for shadcn/ui projects, with Base UI and Radix UI variants.

Free + paid. The open source components are free under MIT; premium blocks, icons, and templates require a paid license. Pricing

Registry setup

Use a React 19 project with Tailwind CSS v4 and shadcn/ui initialized. Merge the @reui registry into components.json. Its style must be a supported base/variant pairing, such as base-nova or radix-lyra; choose the pairing that matches the project's primitives before installing.

npx shadcn@latest init

Install

npx shadcn@latest init

Getting started

  1. The current setup guide targets React 19 and Tailwind CSS v4. Initialize shadcn/ui if needed, then configure the @reui registry without replacing other components.json settings.

  2. ReUI resolves `{style}` from components.json. Supported styles pair `base` or `radix` with a documented variant, for example `base-nova` or `radix-lyra`. See reui.io/docs/registry before selecting a style.

  3. Install through the shadcn CLI, for example `npx shadcn@latest add @reui/data-grid`. The @reui namespace is a registry alias, not an npm package scope for this library.

  4. Use the documentation for the selected primitive variant. Data Grid's Base UI page is reui.io/docs/components/base/data-grid; its generated files and dependencies must match the documented API.

  5. Merge ReUI's additional semantic CSS tokens using reui.io/docs/styling. Free components need no license key; paid registry items require the authenticated configuration documented at reui.io/docs/license-setup.

Agent setup prompt

Paste this into a coding agent to set ReUI up in an existing project.

Add ReUI (https://reui.io) to this existing React project.

ReUI distributes editable components through the shadcn registry, with Base UI and Radix UI variants. The @reui alias is not the library's npm scope.

Prerequisites:
- React 19, Tailwind CSS v4, and shadcn/ui configured with components.json.
- Inspect existing primitives, style, aliases, and CSS tokens before selecting a ReUI variant.

Steps:
1. Read https://reui.io/docs/get-started, https://reui.io/docs/registry, and https://reui.io/docs/styling. Find the requested component in the official catalog or https://reui.io/llms.txt.
2. Initialize shadcn/ui only if missing. Merge "@reui": "https://reui.io/r/{style}/{name}.json" into the existing registries object.
3. Select a documented style pairing matching the app's primitives, such as base-nova or radix-lyra. Keep the rest of components.json intact and assess existing components before changing its style.
4. Add the requested item through shadcn, for example npx shadcn@latest add @reui/data-grid. Do not npm install @reui/data-grid. Inspect the generated files and installed dependencies before importing them.
5. Use the component docs for the same Base UI or Radix variant. Merge the required CSS tokens and integrate with the app's state and data types. Run typecheck and build.

Free c-* components and their supporting primitives are publicly available. Use paid blocks or icons only when the project has the required license, following https://reui.io/docs/license-setup. Keep secrets out of source files.