ReUI | Design-forward shadcn/ui platform with MCP fluency for agents.

---

About ReUI

ReUI is a free, open-source component library for the shadcn/ui ecosystem. Explore 1,000+ production-ready components across 68 categories, each shown inside realistic dashboard layouts—not isolated demos—and copy them directly into your React projects.

Why ReUI?

• 17 In-House component primitives not in default shadcn/ui — Data Grid, Kanban, Filters, Sortable, Timeline, Stepper, Tree, and more, built for real-world dashboard requirements
• 1000+ registry components — Reusable examples composed from shadcn/ui primitives into real-world product flows
• Dual Component library support — Radix UI and Base UI versions for all 16 in-house components
• Compatible with Shadcn Create styles and settings — Vega, Nova, Maia, Lyra & Mira.

---

Key Features

• 1,000+ free examples — Production-ready, copy-paste layouts for dashboards, forms, tables, and more
• 17 In-house Components — Custom in-house components not found in base shadcn/ui
• Copy-and-Own Model — No npm package, no lock-in. Own the source code in your repo
• Dual API — Radix UI and Base UI versions for all in-house components
• Shadcn Compatible — Built on shadcn primitives and Tailwind CSS
• All Shadcn Create Themes — Works with New York, Default, and all color token customizations
• TypeScript — Fully typed components and registry blocks
• MIT License — Free and open-source forever

---

Custom In-House Components

ReUI provides in total: 17 custom in-house components not found in base shadcn/ui.

In-House Components (17)

Custom-built, shadcn-compatible components not available in base shadcn/ui. Each is maintained by the Keenthemes team, ships full component API documentation, props reference, and usage examples, and is available in both Radix UI and Base UI flavors at reui.io/docs.

Component	#	Description	Preview	Radix UI Docs	Base UI Docs
Alert	10	Contextual notifications with severity variants and dismissible states	Preview	Radix UI	Base UI
Autocomplete	8	Searchable input with async filtering and keyboard navigation	Preview	Radix UI	Base UI
Badge	16	Status indicators with multiple styles, sizes, and dot variants	Preview	Radix UI	Base UI
Data Grid	29	Advanced table powered by TanStack Table + Virtual with DnD, pinning, resizing, and infinite scroll	Preview	Radix UI	Base UI
Date Selector	9	Flexible date range picker with calendar UI and preset ranges	Preview	Radix UI	Base UI
Filters	9	URL-state filter panel with TanStack Table integration, Zod validation, and multi-field types	Preview	Radix UI	Base UI
File Upload	10	Advanced file upload with multi-file upload and dropzone support	Preview	Radix UI	Base UI
Frame	8	Card-like wrapper for panels and content areas	Preview	Radix UI	Base UI
Kanban	5	Drag-and-drop task boards built on DnD Kit with dynamic overlays and composable cards	Preview	Radix UI	Base UI
Number Field	8	Numeric input with increment/decrement controls and formatting	Preview	Radix UI	Base UI
Phone Input	7	International phone number input with country selector and formatting	Preview	Radix UI	Base UI
Rating	8	Star and icon-based rating with half-star, read-only, and custom icon support	Preview	Radix UI	Base UI
Scrollspy	6	Auto-highlighting navigation that tracks scroll position across sections	Preview	Radix UI	Base UI
Sortable	7	Drag-and-drop list reordering with DnD Kit — vertical, grid, and nested layouts	Preview	Radix UI	Base UI
Stepper	15	Multi-step forms and onboarding wizards with React Hook Form per-step validation	Preview	Radix UI	Base UI
Timeline	12	Sequential event display — deployment logs, activity feeds, milestones, and order trackers	Preview	Radix UI	Base UI
Tree	9	Hierarchical data display built on Headless Tree with expand/collapse and keyboard navigation	Preview	Radix UI	Base UI

Shadcn components with example library (52)

All standard shadcn/ui primitives are included with many composed examples:

Component	Examples	Use case	Link
Accordion	13	Collapsible FAQ sections, nested content groups	Accordion examples →
Alert Dialog	7	Confirm destructive actions, critical warnings	Alert Dialog examples →
Aspect Ratio	4	Fixed-dimension image and video containers	Aspect Ratio examples →
Avatar	12	User profile images with fallbacks and status badges	Avatar examples →
Breadcrumb	9	Navigation hierarchy and path indicators	Breadcrumb examples →
Button	61	Primary actions — the largest example set in ReUI	Button examples →
Calendar	8	Date selection with single, range, and multi-select modes	Calendar examples →
Card	21	Content containers for dashboards and layouts	Card examples →
Carousel	11	Image galleries and content sliders	Carousel examples →
Chart	25	Data visualization — bar, area, line, pie, radar, and more with Recharts	Chart examples →
Checkbox	10	Multi-select form inputs	Checkbox examples →
Collapsible	5	Expand/collapse content sections	Collapsible examples →
Combobox	12	Searchable dropdown selection	Combobox examples →
Command	8	Command palettes and search interfaces	Command examples →
Context Menu	6	Right-click menus with actions	Context Menu examples →
Data Table	14	Sortable, filterable structured data display	Data Table examples →
Date Picker	12	Calendar-based date selection	Date Picker examples →
Dialog	13	Modal windows and overlays	Dialog examples →
Drawer	8	Slide-out side panels	Drawer examples →
Dropdown Menu	15	Action menus and navigation dropdowns	Dropdown Menu examples →
File Upload	10	Drag-and-drop and click-to-upload interfaces	File Upload examples →
Form	17	Complete form layouts with React Hook Form and Zod validation	Form examples →
Hover Card	5	Preview popovers on hover	Hover Card examples →
Input	17	Text input fields with variants and addons	Input examples →
Input OTP	7	One-time password input fields	Input OTP examples →
Label	4	Form field labels	Label examples →
Menubar	5	Application-level menu bars	Menubar examples →
Navigation Menu	10	Primary site navigation with mega menus	Navigation Menu examples →
Pagination	11	Page navigation for lists and data tables	Pagination examples →
Popover	7	Floating content panels	Popover examples →
Progress	9	Progress bars and loading indicators	Progress examples →
Radio Group	10	Exclusive option selection inputs	Radio Group examples →
Resizable	5	Draggable resizable panel layouts	Resizable examples →
Scroll Area	6	Custom-styled scrollable containers	Scroll Area examples →
Select	12	Dropdown selection fields	Select examples →
Separator	4	Visual dividers and section separators	Separator examples →
Sheet	8	Slide-in panels and drawers	Sheet examples →
Skeleton	10	Loading placeholder screens	Skeleton examples →
Slider	10	Range and value sliders	Slider examples →
Sonner	8	Toast notification system	Sonner examples →
Switch	10	Toggle switches	Switch examples →
Table	9	HTML table layouts	Table examples →
Tabs	13	Tabbed navigation and content panels	Tabs examples →
Textarea	8	Multi-line text inputs with autosize and character count	Textarea examples →
Toast	7	Toast notification banners	Toast examples →
Toggle	7	Toggle button states	Toggle examples →
Toggle Group	7	Grouped toggle buttons	Toggle Group examples →
Tooltip	7	Hover tooltips and contextual hints	Tooltip examples →

---

Getting Started

Installation

ReUI follows the shadcn CLI approach — add blocks from the registry directly into your project (registry items use the c- prefix):

npx shadcn@latest add @reui/c-button-10
npx shadcn@latest add @reui/c-data-grid-9
npx shadcn@latest add @reui/c-filters-5

Quick Start

1. Browse the catalog — Visit reui.io/components to explore 1,000+ composed examples (c-* blocks)
2. Copy code — Each example includes a ready-to-use code snippet
3. Customize — Modify with your Tailwind CSS tokens and design system
4. Own it — The code lives in your repo, not a package

ReUI builds on @tanstack/react-table, @dnd-kit/core, recharts, react-hook-form, zod, and other best-in-class React libraries.

Requirements

• React 18+
• Tailwind CSS 3+

---

Documentation

• ReUI Docs — reui.io/docs
• Component catalog — reui.io/components — legacy /patterns URLs redirect here
• GitHub — github.com/keenthemes/reui

Each component page includes live examples, copy-paste snippets, CLI installation guides, TypeScript types, prop documentation, and accessibility notes.

---

ReUI Pro

ReUI's MCP Server and Agent Skill are free for everyone — they make any AI coding agent genuinely good at building with ReUI. A one-time license then unlocks the premium catalog on the same shadcn/ui foundation, with lifetime source ownership — Pro for the block library, Ultimate for Motion Icons and templates.

Feature	Access	Description	Live preview & docs
485+ Pro Blocks	Pro	Full-page sections across Application, Solutions, eCommerce, Data Grid, and Marketing	Blocks · Application · Solutions · eCommerce · Data Grid · Marketing
562 Motion Icons	Ultimate	Hand-crafted icons in 4 styles (Outline, Solid, Duotone, Filled) with hover animation — 2,248 variants	Icons catalog
MCP Server	Free	Connect any coding agent (Claude, Codex, Cursor, v0, Lovable, Replit, OpenCode, VS Code, Zed) to the ReUI registry for live scored search, inline component APIs, and one-command shadcn installs	MCP Server docs
Agent Skill	Free	One command teaches your agent the ReUI workflow — search → install → read the real API → adapt by reuse → audit; agent-agnostic, no license	Agent Skill docs
Workspace	Pro	ReUI account with favorites, collections, and team access	Sign in

Set up the AI tooling — MCP Server & Agent Skill →

One-time license, own the source forever — Compare plans →

---

Community & Support

• GitHub Discussions — Ask questions and share ideas
• GitHub Issues — Report bugs and request features
• Twitter/X — @reui_io
• Email — hello@reui.io

---

Local Development

Run this repo locally to browse the catalog, edit examples, or contribute. Requires Node.js 18+ and pnpm.

pnpm install
pnpm dev          # http://localhost:3000

Scripts

Script	Description
pnpm dev	Start the dev server (uses the already-built preview bundles)
pnpm dev:packages	Dev server plus a watcher that rebuilds preview bundles on source change — use when editing example (c-*) or in-house primitive source
pnpm build	Production build (regenerates the full registry first, automatically)
pnpm start	Serve the production build
pnpm lint / pnpm typecheck	Lint / type-check the project

Registry build tasks

The catalog is generated from registry-reui/ source by tools in scripts/. dev, dev:packages, and build wire these up for you — run them manually only when needed.

Task	Produces / does	Run it when
pnpm components:build	Component metadata (categories, counts, search) under registry-reui/_meta/	Auto on postinstall and before dev — rarely by hand
pnpm components:packages	The pre-built preview bundles (packages/registry/bases/**/dist/) the live previews import, plus the loader map	After a fresh clone, or after adding / renaming / deleting component source
pnpm registry:build	The public shadcn registry JSON in public/r/styles/** that the CLI serves	Testing npx shadcn add @reui/... locally
pnpm registry:verify	Validates the generated public/r/** registry JSON	CI, or to sanity-check a registry build
pnpm registry:all	Full verified pipeline: metadata → packages → registry → verify	A complete rebuild from scratch

Which task when editing?

• Examples (c-*) or in-house primitives (registry-reui/…/reui/ — Data Grid, Kanban, Filters, etc.) → pnpm dev:packages (they're bundled, so plain dev shows a stale copy)
• shadcn base primitives (registry/…/ui/), site UI, lib/, hooks/ → plain pnpm dev picks them up via Fast Refresh
• Just running the site → pnpm dev

[!NOTE] Plain pnpm dev does not rebuild the preview bundles. If a bundle is missing or stale, its category page hangs while compiling (look for Module not found: @reui/components-... in the dev logs) — run pnpm components:packages and restart. If Turbopack itself panics after many rebuilds, stop the server, rm -rf .next, and restart.

---

Contributing

We welcome contributions — new examples, bug fixes, documentation improvements, and component additions all help the community.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-change)
3. Add your changes with TypeScript types and accessibility features
4. Open a pull request with a clear description

See CONTRIBUTING.md for full guidelines.

---

License

ReUI is open-source software licensed under the MIT License.

---