keenthemes/reui

Design-forward shadcn kit for interfaces that stand out. 1000+ free patterns!

TypeScript

3,667

223 commits

updated Oct 11, 2026

reui.io

See the code

README

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

Go beyond AI defaults and streamline high-end shadcn projects faster without touching the essentials. 1,175 free components and composed examples built with realistic dashboard layouts.

Explore the component catalog · Component Docs · ReUI Pro · GitHub

About ReUI

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

Why ReUI?

24 In-House component primitives not in default shadcn/ui - Data Grid, Event Calendar, Gantt, Kanban, Filters, Cascader, Code Block, Sortable, Timeline, Stepper, Tree, and more, built for real-world dashboard requirements
1,175 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 24 in-house components
Compatible with Shadcn Create styles and settings - Vega, Nova, Maia, Lyra & Mira.

Key Features

1,175 free examples - Production-ready, copy-paste layouts for dashboards, forms, tables, and more
24 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

Data Grid

The ReUI React data grid is a free shadcn/ui component on TanStack Table v9 and TanStack Virtual, styled with your own Tailwind CSS tokens, in Radix UI and Base UI versions. It covers sorting, filtering, pagination, column pinning, resizing and reordering, row and column drag and drop, row pinning, tree rows, expandable detail rows, spreadsheet-style cell selection with copy and paste, and row and column virtualization for large datasets.

34 free examples - Data grid examples
39 Pro blocks - Data grid blocks
Install - npx shadcn@latest add @reui/data-grid

Custom In-House Components

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

In-House Components (24)

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	21	Nested multi-level combobox with drill-down, columns and tree modes, breadcrumbs, search, async levels and custom rows	Preview	Radix UI	Base UI
Code Block	27	Shiki-highlighted code block for docs, diff review, AI chat and streaming agent output	Preview	Radix UI	Base UI
Data Grid	34	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	7	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
Icon Tile	17	Icon tile for list row media, feature cards, empty states and dashboard tiles	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
Signature Pad	12	Signature capture with pressure or velocity sized ink, pen and touch input, undo and redo, native form fields, and PNG, JPEG, SVG or JSON export	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
Time Picker	13	Time picker with hour, minute, second and AM/PM columns in a popover or inline, text entry, steps, time bounds, form fields and i18n labels	Preview	Radix UI	Base UI
Timeline	12	Vertical and horizontal event timelines with rich content and status markers	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 (59)

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

Component	Examples	Use case	Link
Accordion	11	FAQ layouts, settings panels, and help sections	Accordion examples
Alert Dialog	14	Delete confirmations, destructive actions, and critical decisions	Alert Dialog examples
Aspect Ratio	8	Responsive media, image galleries, and video previews	Aspect Ratio examples
Attachment	6	Chat composers, upload states, and file previews	Attachment examples
Avatar	35	User profiles, team directories, and comment threads	Avatar examples
Breadcrumb	15	Navigation trails, docs hierarchy, and app wayfinding	Breadcrumb examples
Bubble	7	Chat threads, assistant replies, and message reactions	Bubble examples
Button	61	Primary actions, form submissions, and toolbar controls	Button examples
Button Group	57	Segmented controls, toolbar actions, and view switchers	Button Group examples
Calendar	30	Date picking, scheduling flows, and booking interfaces	Calendar examples
Card	18	Content previews, dashboard widgets, and product summaries	Card examples
Carousel	11	Image galleries, feature showcases, and testimonials	Carousel examples
Chart	25	Analytics dashboards, KPI tracking, and reports	Chart examples
Checkbox	22	Multi-select forms, settings preferences, and table selection	Checkbox examples
Collapsible	10	Expandable sections, detail rows, and progressive disclosure	Collapsible examples
Combobox	28	Searchable selection, async lookup, and command menus	Combobox examples
Command	8	Command palettes, global search, and power-user navigation	Command examples
Context Menu	10	Right-click menus, file actions, and table row actions	Context Menu examples
Dialog	10	Modal forms, focused tasks, and confirmations	Dialog examples
Drawer	5	Mobile panels, slide-over forms, and secondary workflows	Drawer examples
Dropdown Menu	18	Action menus, profile menus, and toolbar menus	Dropdown Menu examples
Empty	20	Zero-data screens, first-run onboarding, and guided next steps	Empty examples
Field	11	Form composition, validated inputs, and helper text	Field examples
File Upload	10	Drag-and-drop uploads, multi-file flows, and upload progress	File Upload examples
Hover Card	8	Profile previews, rich link previews, and contextual details	Hover Card examples
Input	31	Form entry, search fields, and auth screens	Input examples
Input Group	40	Prefixed inputs, suffixed actions, and combined form controls	Input Group examples
Input Otp	6	Verification codes, 2FA flows, and secure confirmation screens	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 labels, accessible inputs, and field pairing	Label examples
Marker	6	Agent run logs, inline status lines, and labeled separators	Marker examples
Menubar	5	Desktop navigation, editor menus, and app commands	Menubar examples
Message	7	Chat transcripts, assistant replies, and support threads	Message examples
Message Scroller	6	Chat transcripts, streaming replies, and jump-to-latest scrolling	Message Scroller examples
Native Select	6	Lightweight selects, mobile-friendly forms, and basic option picking	Native Select examples
Navigation Menu	4	Site navigation, mega menus, and product navigation	Navigation Menu examples
Pagination	15	Table pagination, search results, and content archives	Pagination examples
Popover	11	Inline settings, contextual actions, and lightweight overlays	Popover examples
Progress	8	Upload progress, goal tracking, and setup steps	Progress examples
Questionnaire	7	Onboarding surveys, multi-step question flows, and guided feedback	Questionnaire examples
Radio Group	17	Single-choice forms, plan selection, and settings preferences	Radio Group examples
Resizable	10	Split panes, workspace layouts, and draggable dividers	Resizable examples
Scroll Area	5	Custom scroll regions, sidebar panes, and dense lists	Scroll Area examples
Select	33	Form selection, settings menus, and filter controls	Select examples
Separator	6	Content grouping, toolbar dividers, and section breaks	Separator examples
Sheet	4	Slide-over details, side panels, and task flows	Sheet examples
Sidebar	5	App shells, collapsible side navigation, and dashboard layouts	Sidebar examples
Skeleton	10	Loading placeholders, perceived performance, and content previews	Skeleton examples
Slider	12	Range filters, pricing controls, and media settings	Slider examples
Sonner	21	Success feedback, error states, and non-blocking updates	Sonner examples
Spinner	12	Loading indicators, async actions, and button states	Spinner examples
Switch	14	Settings toggles, preferences, and binary choices	Switch examples
Table	17	Admin tables, data display, and responsive lists	Table examples
Tabs	9	Segmented content, settings views, and dashboard sections	Tabs examples
Textarea	6	Comments, long-form input, and support tickets	Textarea examples
Toggle	14	Formatting controls, compact actions, and binary UI states	Toggle examples
Toggle Group	16	View switches, toolbar options, and mutually exclusive actions	Toggle Group examples
Tooltip	16	Inline hints, contextual guidance, and helper text	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

Browse the catalog - Visit reui.io/components to explore 1,175 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, and Headless Tree where it helps, and on plain React everywhere else.

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 blocks, Ultimate for the blocks plus the motion icons and the templates.

Feature	Access	Description	Live preview & docs
629 Pro Blocks	Pro	Full-page sections across Application, Data Grid, Solutions, eCommerce, Marketing, and AI & Agents, including Event Calendar, Gantt, and Kanban board layouts	Blocks · Application · Data Grid · Solutions · eCommerce · Marketing · AI & Agents
638 Motion Icons	Ultimate	Hand-crafted icons in 4 styles (Outline, Solid, Duotone, Filled) with hover animation, 2,552 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 search, real component APIs and one-command installs	MCP guide
Agent Skill	Free	One command teaches your agent the ReUI workflow - search, install, read the real API, adapt by reuse	Agent skills
Workspace	Pro	ReUI account with favorites, collections, and team access	Sign in

Pro Block Categories (65)

Every Pro category in the catalog, with its current block count. Blocks are full-page sections built on the same free primitives in this repo - browse them all.

Application (344 blocks)

Category	Blocks	Description	Live preview
App Shell	31	App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps	App Shell blocks
Auth	20	Login, register, forgot password, and two-factor authentication page layouts	Auth blocks
Card	43	Card components for content display, data summaries, and interactive elements	Card blocks
Chart	47	Chart components and layouts with bar, line, pie, and area charts for data storytelling	Chart blocks
Dashboard	8	Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen	Dashboard blocks
Dialog	14	Dialog components for modal windows, alerts, confirmations, and content overlays	Dialog blocks
Empty State	14	Empty state screens and no-data placeholders with recovery actions, onboarding prompts, and contextual guidance	Empty State blocks
Event Calendar	6	Event calendar blocks with month, week and day views, drag-and-drop scheduling, and inline editing	Event Calendar blocks
Flow	4	Node canvas blocks on React Flow for workflow and agent builders, pipeline run replays, and impact maps	Flow blocks
Form	12	Form layouts for settings, profiles, and data entry with validation and grouped fields	Form blocks
Gantt	4	Gantt chart blocks with task trees, timeline bars, split panes, and inline editing for roadmaps	Gantt blocks
Kanban Board	10	Kanban board layouts with drag-and-drop columns, cards, and project management features	Kanban Board blocks
List	11	List layouts for contacts, records, activity rows, grouped collections, and compact action surfaces	List blocks
Navbar	13	Top navigation bars with responsive menus, search, and user actions for web applications	Navbar blocks
Onboarding	9	User onboarding flows with step indicators, welcome screens, and guided setup wizards	Onboarding blocks
Profile	10	User profile pages with avatars, bios, activity feeds, and account management sections	Profile blocks
Rich Text Editor	5	Tiptap rich text editors with toolbars, slash commands and tables, a suggesting mode redline, Yjs co-editing with comments and an AI editing assistant	Rich Text Editor blocks
Schedule	10	Calendar and scheduling components with day, week, and month views for event management	Schedule blocks
Settings	16	Settings and preferences pages with grouped options, toggles, and configuration panels	Settings blocks
Sheet	24	Sheet panels for record details, editing forms, notifications, and side drawers that keep users in context	Sheet blocks
Stats	15	Stat components and layouts for KPIs, metric summaries, and compact performance signals	Stats blocks
Timeline	9	Timeline components for activity feeds, audit histories, release notes, and chronological workflow states	Timeline blocks
Whiteboard	2	Excalidraw whiteboards for shadcn/ui: design reviews with export and versions, and sprint planning with capacity lanes	Whiteboard blocks
Wizard	7	Multi-step form flows with progress indicators, validation, and step navigation	Wizard blocks

Data Grid (39 blocks)

Category	Blocks	Description	Live preview
Base	8	Complete table screens with toolbar filters and pagination for CRM, support, team, project, and pricing data	Base blocks
Columns	5	Column visibility, pinning, resizing, density, and settings controls	Columns blocks
Drag & Drop	4	Drag-and-drop row and column reordering with sortable handles	Drag & Drop blocks
Editing	6	Inline create, edit, and delete cells for full CRUD workflows	Editing blocks
Expansion	3	Expandable parent rows with nested sub-rows and master-detail panels	Expansion blocks
Filtering	4	Search, faceted filters, filter builders, and status tab toolbars	Filtering blocks
Grouping	7	Rows grouped into banded sections with stage and category headers	Grouping blocks
Virtualization	2	Virtualized rendering for large datasets with smooth scrolling	Virtualization blocks

Solutions (74 blocks)

Category	Blocks	Description	Live preview
Dev Ops	6	Platform and SRE console pages for scheduled jobs, deployments, audit trails, edge firewall rules, SLOs and data connections	Dev Ops blocks
AI Ops	9	AI startup control plane pages for model providers, prompts, token cost, routing, and quotas	AI Ops blocks
CRM	9	Sales CRM pages for founders, agencies, and startups managing leads and deals	CRM blocks
Agents	10	AI agent run operation, approval, tool permission, and evaluation pages	Agents blocks
Analytics	9	Product usage, activation, cohort, event, experiment, and growth reporting pages	Analytics blocks
Billing	9	Subscription, invoice, metering, plan, upgrade, and failed payment pages	Billing blocks
Bookings	3	Appointment and service-business admin pages for consultants, clinics, salons, and local services	Bookings blocks
Files	1	File explorer, folder browsing, sharing, and storage management pages	Files blocks
Inventory	11	Stock, warehouse, reorder, movement, count, and supplier visibility pages	Inventory blocks
Users	7	Team, role, member, access, invite, and account governance pages	Users blocks

eCommerce (87 blocks)

Category	Blocks	Description	Live preview
Category Card	6	Category cards with featured products, banners, and subcategory navigation	Category Card blocks
Checkout	7	Checkout flows with shipping details, payment forms, and order confirmation steps	Checkout blocks
Comparison	6	Product comparison tables with side-by-side feature and specification layouts	Comparison blocks
Coupon	6	Coupon code input fields, discount badges, and promotional offer display blocks	Coupon blocks
Filter Sidebar	7	Filter and facet sidebars for refining product searches by price, size, and attributes	Filter Sidebar blocks
Product Card	10	E-commerce product cards with images, pricing, variants, and add-to-cart actions	Product Card blocks
Product Detail	6	Product detail pages with image galleries, specifications, and purchase options	Product Detail blocks
Product Grid	6	Product listing grids with responsive layouts, quick views, and filtering support	Product Grid blocks
Receipt	6	Digital receipt and invoice blocks with itemized lists, taxes, and payment details	Receipt blocks
Review	6	Customer review and rating components with star ratings, comments, and review forms	Review blocks
Shopping Cart	7	Shopping cart interfaces with item lists, quantity controls, and order summaries	Shopping Cart blocks
Wishlist	6	Wishlist and favorites list interfaces with product cards and save-for-later actions	Wishlist blocks
Shop Hero	8	Storefront hero sections with product mosaics, collection tiles, deal banners, and shop calls to action	Shop Hero blocks

Marketing (67 blocks)

Category	Blocks	Description	Live preview
Blog	6	Blog post layouts, article grids, and content listing components for editorial sites	Blog blocks
Compare	3	Versus sections that set a product against the workflow it replaces, as a feature matrix, a card beside a plain list or 2 step tracks	Compare blocks
Contact	6	Contact forms, support and enquiry sections, and office detail panels for business and portfolio sites	Contact blocks
CTA	17	Call to action sections that close a page, from centered email captures and split layouts to full-width banners with photos and proof rows	CTA blocks
FAQ	6	FAQ and accordion sections for common questions, knowledge bases, and support pages	FAQ blocks
Hero	16	Hero sections with announcement pills, two-tone headlines, dual calls to action, and framed product consoles	Hero blocks
How It Works	5	How it works sections that walk a product in numbered steps, from step grids to tabs that swap a product console	How It Works blocks
Pricing	8	Pricing sections with plan tier columns, a monthly or yearly billing toggle, a featured plan, and per-seat team pricing	Pricing blocks

AI & Agents (18 blocks)

Category	Blocks	Description	Live preview
AI Chat	13	Conversation surfaces for AI products, from full chat shells to embeddable threads, sheets, and launchers	AI Chat blocks
Agent Activity	5	Agent run views, from live step feeds and approvals to research traces, MCP call tables, and run reports	Agent Activity blocks

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 an example or a primitive
`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 are bundled, so plain dev shows a stale preview until the bundle is rebuilt)
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 once and reload.

Contributing

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.

License

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

base-ui

component-library

data-grid

data-table

nextjs

radix-ui

react

react-components

shadcn

shadcn-registry

shadcn-ui

tailwind-css

tanstack

tanstack-table

tanstack-table-v9

typescript

ui-blocks

ui-components

Significant stargazers

(top 24 of 35)

Sora Morimoto

959 followers · starred Dec 2025

Jason Lee

5,444 followers · starred Feb 2026

Raúl Kripalani

740 followers · starred Apr 2026

Corentin Leruth

115 followers · starred Jul 2026

Similar repos

birobirobiro/awesome-shadcn-ui

A curated list of awesome things related to shadcn/ui.

20,630

brillout/awesome-react-components

Curated List of React Components & Libraries.

48,605

jameskerr/awesome-react-components

Curated List of React Components & Libraries.

anubhavsrivastava/awesome-ui-component-library

Curated list of framework component libraries for UI styles/toolkit

1,729

nolly-studio/cult-ui

Animated components for design engineers. 150+ free shadcn/ui components, built with Tailwind CSS…

6,456

sadmann7/diceui

Accessible shadcn/ui components built with React, TypeScript, and Tailwind CSS. Copy-paste ready,…

2,089

BoardUI/boardui

React design system for agentic interfaces. Every free BoardUI component as source, with a working…

616

zerostaticthemes/square-ui

Collection of beautifully crafted open-source layouts UI built with shadcn/ui.

6,147

keenthemes/reui

Design-forward shadcn kit for interfaces that stand out. 1000+ free patterns!

TypeScript

3,667

223 commits

updated Oct 11, 2026

reui.io

See the code

README

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

Go beyond AI defaults and streamline high-end shadcn projects faster without touching the essentials. 1,175 free components and composed examples built with realistic dashboard layouts.

Explore the component catalog · Component Docs · ReUI Pro · GitHub

About ReUI

Why ReUI?

24 In-House component primitives not in default shadcn/ui - Data Grid, Event Calendar, Gantt, Kanban, Filters, Cascader, Code Block, Sortable, Timeline, Stepper, Tree, and more, built for real-world dashboard requirements
1,175 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 24 in-house components
Compatible with Shadcn Create styles and settings - Vega, Nova, Maia, Lyra & Mira.

Key Features

1,175 free examples - Production-ready, copy-paste layouts for dashboards, forms, tables, and more
24 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

Data Grid

34 free examples - Data grid examples
39 Pro blocks - Data grid blocks
Install - npx shadcn@latest add @reui/data-grid

Custom In-House Components

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

In-House Components (24)

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	21	Nested multi-level combobox with drill-down, columns and tree modes, breadcrumbs, search, async levels and custom rows	Preview	Radix UI	Base UI
Code Block	27	Shiki-highlighted code block for docs, diff review, AI chat and streaming agent output	Preview	Radix UI	Base UI
Data Grid	34	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	7	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
Icon Tile	17	Icon tile for list row media, feature cards, empty states and dashboard tiles	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
Signature Pad	12	Signature capture with pressure or velocity sized ink, pen and touch input, undo and redo, native form fields, and PNG, JPEG, SVG or JSON export	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
Time Picker	13	Time picker with hour, minute, second and AM/PM columns in a popover or inline, text entry, steps, time bounds, form fields and i18n labels	Preview	Radix UI	Base UI
Timeline	12	Vertical and horizontal event timelines with rich content and status markers	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 (59)

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

Component	Examples	Use case	Link
Accordion	11	FAQ layouts, settings panels, and help sections	Accordion examples
Alert Dialog	14	Delete confirmations, destructive actions, and critical decisions	Alert Dialog examples
Aspect Ratio	8	Responsive media, image galleries, and video previews	Aspect Ratio examples
Attachment	6	Chat composers, upload states, and file previews	Attachment examples
Avatar	35	User profiles, team directories, and comment threads	Avatar examples
Breadcrumb	15	Navigation trails, docs hierarchy, and app wayfinding	Breadcrumb examples
Bubble	7	Chat threads, assistant replies, and message reactions	Bubble examples
Button	61	Primary actions, form submissions, and toolbar controls	Button examples
Button Group	57	Segmented controls, toolbar actions, and view switchers	Button Group examples
Calendar	30	Date picking, scheduling flows, and booking interfaces	Calendar examples
Card	18	Content previews, dashboard widgets, and product summaries	Card examples
Carousel	11	Image galleries, feature showcases, and testimonials	Carousel examples
Chart	25	Analytics dashboards, KPI tracking, and reports	Chart examples
Checkbox	22	Multi-select forms, settings preferences, and table selection	Checkbox examples
Collapsible	10	Expandable sections, detail rows, and progressive disclosure	Collapsible examples
Combobox	28	Searchable selection, async lookup, and command menus	Combobox examples
Command	8	Command palettes, global search, and power-user navigation	Command examples
Context Menu	10	Right-click menus, file actions, and table row actions	Context Menu examples
Dialog	10	Modal forms, focused tasks, and confirmations	Dialog examples
Drawer	5	Mobile panels, slide-over forms, and secondary workflows	Drawer examples
Dropdown Menu	18	Action menus, profile menus, and toolbar menus	Dropdown Menu examples
Empty	20	Zero-data screens, first-run onboarding, and guided next steps	Empty examples
Field	11	Form composition, validated inputs, and helper text	Field examples
File Upload	10	Drag-and-drop uploads, multi-file flows, and upload progress	File Upload examples
Hover Card	8	Profile previews, rich link previews, and contextual details	Hover Card examples
Input	31	Form entry, search fields, and auth screens	Input examples
Input Group	40	Prefixed inputs, suffixed actions, and combined form controls	Input Group examples
Input Otp	6	Verification codes, 2FA flows, and secure confirmation screens	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 labels, accessible inputs, and field pairing	Label examples
Marker	6	Agent run logs, inline status lines, and labeled separators	Marker examples
Menubar	5	Desktop navigation, editor menus, and app commands	Menubar examples
Message	7	Chat transcripts, assistant replies, and support threads	Message examples
Message Scroller	6	Chat transcripts, streaming replies, and jump-to-latest scrolling	Message Scroller examples
Native Select	6	Lightweight selects, mobile-friendly forms, and basic option picking	Native Select examples
Navigation Menu	4	Site navigation, mega menus, and product navigation	Navigation Menu examples
Pagination	15	Table pagination, search results, and content archives	Pagination examples
Popover	11	Inline settings, contextual actions, and lightweight overlays	Popover examples
Progress	8	Upload progress, goal tracking, and setup steps	Progress examples
Questionnaire	7	Onboarding surveys, multi-step question flows, and guided feedback	Questionnaire examples
Radio Group	17	Single-choice forms, plan selection, and settings preferences	Radio Group examples
Resizable	10	Split panes, workspace layouts, and draggable dividers	Resizable examples
Scroll Area	5	Custom scroll regions, sidebar panes, and dense lists	Scroll Area examples
Select	33	Form selection, settings menus, and filter controls	Select examples
Separator	6	Content grouping, toolbar dividers, and section breaks	Separator examples
Sheet	4	Slide-over details, side panels, and task flows	Sheet examples
Sidebar	5	App shells, collapsible side navigation, and dashboard layouts	Sidebar examples
Skeleton	10	Loading placeholders, perceived performance, and content previews	Skeleton examples
Slider	12	Range filters, pricing controls, and media settings	Slider examples
Sonner	21	Success feedback, error states, and non-blocking updates	Sonner examples
Spinner	12	Loading indicators, async actions, and button states	Spinner examples
Switch	14	Settings toggles, preferences, and binary choices	Switch examples
Table	17	Admin tables, data display, and responsive lists	Table examples
Tabs	9	Segmented content, settings views, and dashboard sections	Tabs examples
Textarea	6	Comments, long-form input, and support tickets	Textarea examples
Toggle	14	Formatting controls, compact actions, and binary UI states	Toggle examples
Toggle Group	16	View switches, toolbar options, and mutually exclusive actions	Toggle Group examples
Tooltip	16	Inline hints, contextual guidance, and helper text	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

Browse the catalog - Visit reui.io/components to explore 1,175 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, and Headless Tree where it helps, and on plain React everywhere else.

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

Feature	Access	Description	Live preview & docs
629 Pro Blocks	Pro	Full-page sections across Application, Data Grid, Solutions, eCommerce, Marketing, and AI & Agents, including Event Calendar, Gantt, and Kanban board layouts	Blocks · Application · Data Grid · Solutions · eCommerce · Marketing · AI & Agents
638 Motion Icons	Ultimate	Hand-crafted icons in 4 styles (Outline, Solid, Duotone, Filled) with hover animation, 2,552 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 search, real component APIs and one-command installs	MCP guide
Agent Skill	Free	One command teaches your agent the ReUI workflow - search, install, read the real API, adapt by reuse	Agent skills
Workspace	Pro	ReUI account with favorites, collections, and team access	Sign in

Pro Block Categories (65)

Every Pro category in the catalog, with its current block count. Blocks are full-page sections built on the same free primitives in this repo - browse them all.

Application (344 blocks)

Category	Blocks	Description	Live preview
App Shell	31	App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps	App Shell blocks
Auth	20	Login, register, forgot password, and two-factor authentication page layouts	Auth blocks
Card	43	Card components for content display, data summaries, and interactive elements	Card blocks
Chart	47	Chart components and layouts with bar, line, pie, and area charts for data storytelling	Chart blocks
Dashboard	8	Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen	Dashboard blocks
Dialog	14	Dialog components for modal windows, alerts, confirmations, and content overlays	Dialog blocks
Empty State	14	Empty state screens and no-data placeholders with recovery actions, onboarding prompts, and contextual guidance	Empty State blocks
Event Calendar	6	Event calendar blocks with month, week and day views, drag-and-drop scheduling, and inline editing	Event Calendar blocks
Flow	4	Node canvas blocks on React Flow for workflow and agent builders, pipeline run replays, and impact maps	Flow blocks
Form	12	Form layouts for settings, profiles, and data entry with validation and grouped fields	Form blocks
Gantt	4	Gantt chart blocks with task trees, timeline bars, split panes, and inline editing for roadmaps	Gantt blocks
Kanban Board	10	Kanban board layouts with drag-and-drop columns, cards, and project management features	Kanban Board blocks
List	11	List layouts for contacts, records, activity rows, grouped collections, and compact action surfaces	List blocks
Navbar	13	Top navigation bars with responsive menus, search, and user actions for web applications	Navbar blocks
Onboarding	9	User onboarding flows with step indicators, welcome screens, and guided setup wizards	Onboarding blocks
Profile	10	User profile pages with avatars, bios, activity feeds, and account management sections	Profile blocks
Rich Text Editor	5	Tiptap rich text editors with toolbars, slash commands and tables, a suggesting mode redline, Yjs co-editing with comments and an AI editing assistant	Rich Text Editor blocks
Schedule	10	Calendar and scheduling components with day, week, and month views for event management	Schedule blocks
Settings	16	Settings and preferences pages with grouped options, toggles, and configuration panels	Settings blocks
Sheet	24	Sheet panels for record details, editing forms, notifications, and side drawers that keep users in context	Sheet blocks
Stats	15	Stat components and layouts for KPIs, metric summaries, and compact performance signals	Stats blocks
Timeline	9	Timeline components for activity feeds, audit histories, release notes, and chronological workflow states	Timeline blocks
Whiteboard	2	Excalidraw whiteboards for shadcn/ui: design reviews with export and versions, and sprint planning with capacity lanes	Whiteboard blocks
Wizard	7	Multi-step form flows with progress indicators, validation, and step navigation	Wizard blocks

Data Grid (39 blocks)

Category	Blocks	Description	Live preview
Base	8	Complete table screens with toolbar filters and pagination for CRM, support, team, project, and pricing data	Base blocks
Columns	5	Column visibility, pinning, resizing, density, and settings controls	Columns blocks
Drag & Drop	4	Drag-and-drop row and column reordering with sortable handles	Drag & Drop blocks
Editing	6	Inline create, edit, and delete cells for full CRUD workflows	Editing blocks
Expansion	3	Expandable parent rows with nested sub-rows and master-detail panels	Expansion blocks
Filtering	4	Search, faceted filters, filter builders, and status tab toolbars	Filtering blocks
Grouping	7	Rows grouped into banded sections with stage and category headers	Grouping blocks
Virtualization	2	Virtualized rendering for large datasets with smooth scrolling	Virtualization blocks

Solutions (74 blocks)

Category	Blocks	Description	Live preview
Dev Ops	6	Platform and SRE console pages for scheduled jobs, deployments, audit trails, edge firewall rules, SLOs and data connections	Dev Ops blocks
AI Ops	9	AI startup control plane pages for model providers, prompts, token cost, routing, and quotas	AI Ops blocks
CRM	9	Sales CRM pages for founders, agencies, and startups managing leads and deals	CRM blocks
Agents	10	AI agent run operation, approval, tool permission, and evaluation pages	Agents blocks
Analytics	9	Product usage, activation, cohort, event, experiment, and growth reporting pages	Analytics blocks
Billing	9	Subscription, invoice, metering, plan, upgrade, and failed payment pages	Billing blocks
Bookings	3	Appointment and service-business admin pages for consultants, clinics, salons, and local services	Bookings blocks
Files	1	File explorer, folder browsing, sharing, and storage management pages	Files blocks
Inventory	11	Stock, warehouse, reorder, movement, count, and supplier visibility pages	Inventory blocks
Users	7	Team, role, member, access, invite, and account governance pages	Users blocks

eCommerce (87 blocks)

Category	Blocks	Description	Live preview
Category Card	6	Category cards with featured products, banners, and subcategory navigation	Category Card blocks
Checkout	7	Checkout flows with shipping details, payment forms, and order confirmation steps	Checkout blocks
Comparison	6	Product comparison tables with side-by-side feature and specification layouts	Comparison blocks
Coupon	6	Coupon code input fields, discount badges, and promotional offer display blocks	Coupon blocks
Filter Sidebar	7	Filter and facet sidebars for refining product searches by price, size, and attributes	Filter Sidebar blocks
Product Card	10	E-commerce product cards with images, pricing, variants, and add-to-cart actions	Product Card blocks
Product Detail	6	Product detail pages with image galleries, specifications, and purchase options	Product Detail blocks
Product Grid	6	Product listing grids with responsive layouts, quick views, and filtering support	Product Grid blocks
Receipt	6	Digital receipt and invoice blocks with itemized lists, taxes, and payment details	Receipt blocks
Review	6	Customer review and rating components with star ratings, comments, and review forms	Review blocks
Shopping Cart	7	Shopping cart interfaces with item lists, quantity controls, and order summaries	Shopping Cart blocks
Wishlist	6	Wishlist and favorites list interfaces with product cards and save-for-later actions	Wishlist blocks
Shop Hero	8	Storefront hero sections with product mosaics, collection tiles, deal banners, and shop calls to action	Shop Hero blocks

Marketing (67 blocks)

Category	Blocks	Description	Live preview
Blog	6	Blog post layouts, article grids, and content listing components for editorial sites	Blog blocks
Compare	3	Versus sections that set a product against the workflow it replaces, as a feature matrix, a card beside a plain list or 2 step tracks	Compare blocks
Contact	6	Contact forms, support and enquiry sections, and office detail panels for business and portfolio sites	Contact blocks
CTA	17	Call to action sections that close a page, from centered email captures and split layouts to full-width banners with photos and proof rows	CTA blocks
FAQ	6	FAQ and accordion sections for common questions, knowledge bases, and support pages	FAQ blocks
Hero	16	Hero sections with announcement pills, two-tone headlines, dual calls to action, and framed product consoles	Hero blocks
How It Works	5	How it works sections that walk a product in numbered steps, from step grids to tabs that swap a product console	How It Works blocks
Pricing	8	Pricing sections with plan tier columns, a monthly or yearly billing toggle, a featured plan, and per-seat team pricing	Pricing blocks

AI & Agents (18 blocks)

Category	Blocks	Description	Live preview
AI Chat	13	Conversation surfaces for AI products, from full chat shells to embeddable threads, sheets, and launchers	AI Chat blocks
Agent Activity	5	Agent run views, from live step feeds and approvals to research traces, MCP call tables, and run reports	Agent Activity blocks

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 an example or a primitive
`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 are bundled, so plain dev shows a stale preview until the bundle is rebuilt)
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 once and reload.

Contributing

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.

License

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

base-ui

component-library

data-grid

data-table

nextjs

radix-ui

react

react-components

shadcn

shadcn-registry

shadcn-ui

tailwind-css

tanstack

tanstack-table

tanstack-table-v9

typescript

ui-blocks

ui-components

Significant stargazers

(top 24 of 35)

Sora Morimoto

959 followers · starred Dec 2025

Jason Lee

5,444 followers · starred Feb 2026

Raúl Kripalani

740 followers · starred Apr 2026

Corentin Leruth

115 followers · starred Jul 2026

Similar repos

birobirobiro/awesome-shadcn-ui

A curated list of awesome things related to shadcn/ui.

20,630

brillout/awesome-react-components

Curated List of React Components & Libraries.

48,605

jameskerr/awesome-react-components

Curated List of React Components & Libraries.

anubhavsrivastava/awesome-ui-component-library

Curated list of framework component libraries for UI styles/toolkit

1,729

nolly-studio/cult-ui

Animated components for design engineers. 150+ free shadcn/ui components, built with Tailwind CSS…

6,456

sadmann7/diceui

Accessible shadcn/ui components built with React, TypeScript, and Tailwind CSS. Copy-paste ready,…

2,089

BoardUI/boardui

React design system for agentic interfaces. Every free BoardUI component as source, with a working…

616

zerostaticthemes/square-ui

Collection of beautifully crafted open-source layouts UI built with shadcn/ui.

6,147