ReUI

---

About ReUI

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

Why ReUI?

• 19 In-House component primitives not in default shadcn/ui — Data Grid, Event Calendar, Gantt, 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 19 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
• 19 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: 19 custom in-house components not found in base shadcn/ui.

In-House Components (20)

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	20	Contextual notifications with severity variants and dismissible states	Preview	Radix UI	Base UI
Autocomplete	12	Searchable input with async filtering and keyboard navigation	Preview	Radix UI	Base UI
Badge	25	Status indicators with multiple styles, sizes, and dot variants	Preview	Radix UI	Base UI
Cascader	20	Nested multi-level combobox with drill-down, columns and tree modes, breadcrumbs, search, async levels and custom rows	Preview	Radix UI	Base UI
Data Grid	30	Advanced table powered by TanStack Table + Virtual with DnD, pinning, resizing, and infinite scroll	Preview	Radix UI	Base UI
Date Selector	4	Flexible date range picker with calendar UI and preset ranges	Preview	Radix UI	Base UI
Event Calendar	5	Headless-first calendar with month, week, day, N-day, and agenda views, drag-and-drop scheduling, recurring events, time zones, and an external CRUD contract	Preview	Radix UI	Base UI
Filters	12	Stepped filter builder with nested attributes, popover value editors and a boolean query tree, in chip or advanced chrome	Preview	Radix UI	Base UI
Frame	19	Card-like wrapper for panels and content areas	Preview	Radix UI	Base UI
Gantt	5	Headless-first gantt with split tree and timeline panes, day-to-year scales, zoom, drag and resize scheduling, progress, summary rollups, and an external CRUD contract	Preview	Radix UI	Base UI
Icon Stack	6	Layered isometric icon illustrations for empty states and feature visuals	Preview	Radix UI	Base UI
Kanban	6	Drag-and-drop task boards built on DnD Kit with dynamic overlays and composable cards	Preview	Radix UI	Base UI
Number Field	6	Numeric input with increment/decrement controls and formatting	Preview	Radix UI	Base UI
Phone Input	8	International phone number input with country selector and formatting	Preview	Radix UI	Base UI
Rating	9	Star and icon-based rating with half-star, read-only, and custom icon support	Preview	Radix UI	Base UI
Scrollspy	2	Auto-highlighting navigation that tracks scroll position across sections	Preview	Radix UI	Base UI
Sortable	8	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	7	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	11	Collapsible FAQ sections, nested content groups	Accordion examples →
Alert Dialog	14	Confirm destructive actions, critical warnings	Alert Dialog examples →
Aspect Ratio	8	Fixed-dimension image and video containers	Aspect Ratio examples →
Avatar	35	User profile images with fallbacks and status badges	Avatar examples →
Breadcrumb	15	Navigation hierarchy and path indicators	Breadcrumb examples →
Button	61	Primary actions — the largest example set in ReUI	Button examples →
Button Group	57	Segmented controls, toolbar actions, and view switchers	Button Group examples →
Calendar	30	Date selection with single, range, and multi-select modes	Calendar examples →
Card	18	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	22	Multi-select form inputs	Checkbox examples →
Collapsible	10	Expand/collapse content sections	Collapsible examples →
Combobox	28	Searchable dropdown selection	Combobox examples →
Command	8	Command palettes and search interfaces	Command examples →
Context Menu	10	Right-click menus with actions	Context Menu examples →
Dialog	10	Modal windows and overlays	Dialog examples →
Drawer	5	Slide-out side panels	Drawer examples →
Dropdown Menu	18	Action menus and navigation dropdowns	Dropdown Menu examples →
Empty	20	Zero-data screens, first-run onboarding, guided next steps	Empty examples →
Field	11	Form composition with validated inputs and helper text	Field examples →
File Upload	10	Drag-and-drop and click-to-upload interfaces	File Upload examples →
Hover Card	8	Preview popovers on hover	Hover Card examples →
Input	31	Text input fields with variants and addons	Input examples →
Input Group	40	Prefixed inputs, suffixed actions, combined form controls	Input Group examples →
Input OTP	6	One-time password input fields	Input OTP examples →
Item	12	List rows, settings items, and action rows	Item examples →
Kbd	6	Hotkey hints, command docs, and shortcut legends	Kbd examples →
Label	13	Form field labels	Label examples →
Menubar	5	Application-level menu bars	Menubar examples →
Native Select	6	Lightweight, mobile-friendly option picking	Native Select examples →
Navigation Menu	4	Primary site navigation with mega menus	Navigation Menu examples →
Pagination	15	Page navigation for lists and data tables	Pagination examples →
Popover	11	Floating content panels	Popover examples →
Progress	8	Progress bars and loading indicators	Progress examples →
Radio Group	17	Exclusive option selection inputs	Radio Group examples →
Resizable	10	Draggable resizable panel layouts	Resizable examples →
Scroll Area	5	Custom-styled scrollable containers	Scroll Area examples →
Select	33	Dropdown selection fields	Select examples →
Separator	6	Visual dividers and section separators	Separator examples →
Sheet	4	Slide-in panels and drawers	Sheet examples →
Skeleton	10	Loading placeholder screens	Skeleton examples →
Slider	12	Range and value sliders	Slider examples →
Sonner	21	Toast notification system	Sonner examples →
Spinner	12	Loading indicators for async actions and button states	Spinner examples →
Switch	14	Toggle switches	Switch examples →
Table	17	HTML table layouts	Table examples →
Tabs	9	Tabbed navigation and content panels	Tabs examples →
Textarea	6	Multi-line text inputs with autosize and character count	Textarea examples →
Toggle	14	Toggle button states	Toggle examples →
Toggle Group	16	Grouped toggle buttons	Toggle Group examples →
Tooltip	16	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
490+ Pro Blocks	Pro	Full-page sections across Application, Solutions, eCommerce, Data Grid, and Marketing — including Event Calendar, Gantt, and Kanban board layouts	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, Event Calendar, Gantt, 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

---

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.

---