Back to Reui

ReUI - Design-forward shadcn kit for interfaces that stand out.

README.md

2.0.016.8 KB
Original Source

ReUI - Design-forward shadcn kit for interfaces that stand out.

<div align="center">

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

</div>

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#DescriptionPreviewRadix UI DocsBase UI Docs
Alert10Contextual notifications with severity variants and dismissible statesPreviewRadix UIBase UI
Autocomplete8Searchable input with async filtering and keyboard navigationPreviewRadix UIBase UI
Badge16Status indicators with multiple styles, sizes, and dot variantsPreviewRadix UIBase UI
Data Grid29Advanced table powered by TanStack Table + Virtual with DnD, pinning, resizing, and infinite scrollPreviewRadix UIBase UI
Date Selector9Flexible date range picker with calendar UI and preset rangesPreviewRadix UIBase UI
Filters9URL-state filter panel with TanStack Table integration, Zod validation, and multi-field typesPreviewRadix UIBase UI
File Upload10Advanced file upload with multi-file upload and dropzone supportPreviewRadix UIBase UI
Frame8Card-like wrapper for panels and content areasPreviewRadix UIBase UI
Kanban5Drag-and-drop task boards built on DnD Kit with dynamic overlays and composable cardsPreviewRadix UIBase UI
Number Field8Numeric input with increment/decrement controls and formattingPreviewRadix UIBase UI
Phone Input7International phone number input with country selector and formattingPreviewRadix UIBase UI
Rating8Star and icon-based rating with half-star, read-only, and custom icon supportPreviewRadix UIBase UI
Scrollspy6Auto-highlighting navigation that tracks scroll position across sectionsPreviewRadix UIBase UI
Sortable7Drag-and-drop list reordering with DnD Kit — vertical, grid, and nested layoutsPreviewRadix UIBase UI
Stepper15Multi-step forms and onboarding wizards with React Hook Form per-step validationPreviewRadix UIBase UI
Timeline12Sequential event display — deployment logs, activity feeds, milestones, and order trackersPreviewRadix UIBase UI
Tree9Hierarchical data display built on Headless Tree with expand/collapse and keyboard navigationPreviewRadix UIBase UI

Shadcn components with example library (52)

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

ComponentExamplesUse caseLink
Accordion13Collapsible FAQ sections, nested content groupsAccordion examples →
Alert Dialog7Confirm destructive actions, critical warningsAlert Dialog examples →
Aspect Ratio4Fixed-dimension image and video containersAspect Ratio examples →
Avatar12User profile images with fallbacks and status badgesAvatar examples →
Breadcrumb9Navigation hierarchy and path indicatorsBreadcrumb examples →
Button61Primary actions — the largest example set in ReUIButton examples →
Calendar8Date selection with single, range, and multi-select modesCalendar examples →
Card21Content containers for dashboards and layoutsCard examples →
Carousel11Image galleries and content slidersCarousel examples →
Chart25Data visualization — bar, area, line, pie, radar, and more with RechartsChart examples →
Checkbox10Multi-select form inputsCheckbox examples →
Collapsible5Expand/collapse content sectionsCollapsible examples →
Combobox12Searchable dropdown selectionCombobox examples →
Command8Command palettes and search interfacesCommand examples →
Context Menu6Right-click menus with actionsContext Menu examples →
Data Table14Sortable, filterable structured data displayData Table examples →
Date Picker12Calendar-based date selectionDate Picker examples →
Dialog13Modal windows and overlaysDialog examples →
Drawer8Slide-out side panelsDrawer examples →
Dropdown Menu15Action menus and navigation dropdownsDropdown Menu examples →
File Upload10Drag-and-drop and click-to-upload interfacesFile Upload examples →
Form17Complete form layouts with React Hook Form and Zod validationForm examples →
Hover Card5Preview popovers on hoverHover Card examples →
Input17Text input fields with variants and addonsInput examples →
Input OTP7One-time password input fieldsInput OTP examples →
Label4Form field labelsLabel examples →
Menubar5Application-level menu barsMenubar examples →
Navigation Menu10Primary site navigation with mega menusNavigation Menu examples →
Pagination11Page navigation for lists and data tablesPagination examples →
Popover7Floating content panelsPopover examples →
Progress9Progress bars and loading indicatorsProgress examples →
Radio Group10Exclusive option selection inputsRadio Group examples →
Resizable5Draggable resizable panel layoutsResizable examples →
Scroll Area6Custom-styled scrollable containersScroll Area examples →
Select12Dropdown selection fieldsSelect examples →
Separator4Visual dividers and section separatorsSeparator examples →
Sheet8Slide-in panels and drawersSheet examples →
Skeleton10Loading placeholder screensSkeleton examples →
Slider10Range and value slidersSlider examples →
Sonner8Toast notification systemSonner examples →
Switch10Toggle switchesSwitch examples →
Table9HTML table layoutsTable examples →
Tabs13Tabbed navigation and content panelsTabs examples →
Textarea8Multi-line text inputs with autosize and character countTextarea examples →
Toast7Toast notification bannersToast examples →
Toggle7Toggle button statesToggle examples →
Toggle Group7Grouped toggle buttonsToggle Group examples →
Tooltip7Hover tooltips and contextual hintsTooltip 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):

bash
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

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


ReUI Pro

ReUI Pro is a premium extension to the free ReUI library, built for teams and product developers who need advanced blocks, templates, and ai tooling on top of the same shadcn/ui foundation.

FeatureDescription
1,000+ UI BlocksPre-built interface sections for rapid application and dashboard development
2,200+ Animated IconsFully customizable animated icon library
30+ TemplatesComplete, production-ready application and page templates
AI ToolingAI-assisted component generation and design tools
WorkspaceAccount management, team access, favorites, and collections and more

Get 40% off at LaunchJoin the Waitlist


Community & Support


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.


Star History


<div align="center">

Built with ❤️ by the Keenthemes team · reui.io · pro.reui.io

</div>