Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelogv2.8.1
  • YouTube
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • Gemini CLI
Components
  • Alert
  • Autocomplete
  • Badge
  • CascaderCascader keeps a saved selection's full path, popup open or closed
  • Code Block
  • Color Picker
  • Data GridData Grid works in apps that run React Compiler, with resizing, edits and callbacks kept live
  • Date SelectorDate Selector keeps its year list and Today button current in apps that run React Compiler
  • Emoji Picker
  • Event CalendarEvent Calendar keeps today and the agenda current in apps that run React Compiler
  • File TypeFile Type knows 171 formats, .env and Dockerfile included
  • File Upload
  • Filters
  • Frame
  • GanttGantt keeps its Today button and tooltip current in apps that run React Compiler
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Signature Pad
  • Sortable
  • Stepper
  • Time Picker
  • Timeline
  • Tree

Registry

PreviousNext

Learn how to use the ReUI Registry with shadcn/ui.

The ReUI Registry serves every ReUI item from a single @reui namespace: free primitives and c-* components, paid blocks and paid icons. The shadcn CLI resolves the full alias suffix into the registry URL, so ReUI items install as @reui/<name> and ReUI handles access rules on the server. Stock shadcn/ui components are not ReUI items and install by their bare name, for example npx shadcn@latest add button. Templates are not registry items either: each one is a download from its page in Templates.

@reui is a registry namespace, not an npm scope

There is no ReUI npm package to install. Running npm i @reui/data-grid asks npm's own @reui scope, which belongs to an unrelated publisher, so it either fails or installs a package that is not ours. ReUI items are installed only with the shadcn CLI, which resolves @reui/<name> against the registry URL in your components.json.

Setup ReUI Registry

Add the ReUI registry namespace to your components.json. Learn more about registry config from shadcn registry docs.

{
  "registries": {
    "@reui": "https://reui.io/r/{style}/{name}.json"
  }
}

Style Values

{style} is not free-form. The shadcn CLI substitutes it with the style value from your components.json, which ReUI reads as <base>-<variant>: the base picks the primitive library the code is built on, the variant picks the visual style. Every pairing of the two lists below is served, so base-nova (the default), radix-lyra and base-sera are all valid. A {style} outside these lists is not served and the install fails as not found.

<base>Primitive library
baseBase UI
radixRadix UI
<variant>Look
vegaClean, neutral, and familiar
novaReduced padding and margins
maiaRounded, with generous spacing
lyraBoxy and sharp. For mono fonts
miraMade for compact interfaces
lumaFluid, luminous, and soft
seraEditorial and typographic
rheaLike Luma but compact

Class Merging

ReUI items that merge classes use cn, a compiled drop-in for clsx plus tailwind-merge, imported as a package:

import { cn } from "cn"

The CLI installs it for you: any item that imports it lists cn in its dependencies, so shadcn add adds it to your package.json on the first such install and skips it after that.

This follows shadcn, which moved every component onto the package in its September 2026 cn release: one dependency instead of two, and no local helper to maintain.

Earlier ReUI releases imported cn from your own @/lib/utils. Items already in your project keep working, and your @/lib/utils is untouched.

To drop clsx and tailwind-merge from your own project, run the upstream migration:

pnpm dlx shadcn@latest migrate cn

If you had customized cn in @/lib/utils, rebuild it with createCn from cn/config. Newly installed ReUI items import the package directly, so they no longer route through that file.

Free Components

Free component examples use the c-* naming pattern and can be installed without a license key.

pnpm dlx shadcn@latest add @reui/c-alert-1

Some free c-* items pull shared @reui/* primitives such as @reui/alert or @reui/data-grid as registry dependencies. Those supporting files remain publicly accessible so free component installs keep working.

Paid Blocks And Icons

Premium blocks and icons use the same @reui namespace, but they require a valid license key. Templates are not installed through the registry: download them from their page in Templates.

If you want the full premium setup flow with a visible account key state, copy-ready snippets, and install examples in one place, see the License Setup guide.

  1. Add your license key to .env.local.
REUI_LICENSE_KEY=your-license-key
  1. Change the registry entry to the authenticated object form.
{
  "registries": {
    "@reui": {
      "url": "https://reui.io/r/{style}/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REUI_LICENSE_KEY}"
      }
    }
  }
}
  1. Install premium items from the same namespace.
pnpm dlx shadcn@latest add @reui/cta-1
npx shadcn@latest add @reui/icons/default/solid/all

Free items keep working with the authenticated config too, so you do not need a second registry namespace.

StylingMCP Server

On This Page

Setup ReUI RegistryStyle ValuesClass MergingFree ComponentsPaid Blocks And Icons

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K