Go beyond AI defaults and streamline high-end shadcn projects faster without touching the essentials. 1000+ free components and composed examples built with realistic dashboard layouts.
Explore the component catalog · Component Docs · ReUI Pro · GitHub
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.
- 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.
- 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
ReUI provides in total: 19 custom in-house components not found in base shadcn/ui.
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 |
| Data Grid | 29 | 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 | URL-state filter panel with TanStack Table integration, Zod validation, and multi-field types | 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 |
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 → |
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- Browse the catalog — Visit reui.io/components to explore 1,000+ composed examples (
c-*blocks) - Copy code — Each example includes a ready-to-use code snippet
- Customize — Modify with your Tailwind CSS tokens and design system
- 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.
- React 18+
- Tailwind CSS 3+
- ReUI Docs — reui.io/docs
- Component catalog — reui.io/components — legacy
/patternsURLs 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'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 →
- GitHub Discussions — Ask questions and share ideas
- GitHub Issues — Report bugs and request features
- Twitter/X — @reui_io
- Email — hello@reui.io
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| 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 |
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 plaindevshows a stale copy) - shadcn base primitives (
registry/…/ui/), site UI,lib/,hooks/→ plainpnpm devpicks 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.
We welcome contributions — new examples, bug fixes, documentation improvements, and component additions all help the community.
- Fork the repository
- Create a feature branch (
git checkout -b feature/your-change) - Add your changes with TypeScript types and accessibility features
- Open a pull request with a clear description
See CONTRIBUTING.md for full guidelines.
ReUI is open-source software licensed under the MIT License.
Built with ❤️ by the Keenthemes team · reui.io