DOCSEARCHbyAlgolia
Submit Docs

ReUI Documentation

repository·main·Indexed 25 days ago

https://github.com/keenthemes/reui

A design-forward component platform for the shadcn/ui ecosystem featuring over 1,000 composed examples and 19 custom in-house primitives, including Data Grid, Gantt, Kanban, and Timeline. Built with React 18+ and Tailwind CSS 3+, ReUI uses a copy-and-own model via the shadcn CLI to avoid vendor lock-in. It provides dual API support for Radix UI and Base UI and is compatible with all Shadcn Create themes.

Tokens
79.2K
Snippets
120
Records
540
Agent score
85%

What's inside ReUI

  1. Overview of ReUI

    main

    ReUI is an open-source component library designed for the shadcn/ui ecosystem. It provides over 1,000 production-ready components and examples organized into 71 categories, specifically showcased within realistic dashboard layouts.

    Key characteristics include:

    • Copy-and-Own Model: ReUI does not use an npm package; you copy the source code directly into your repository to avoid vendor lock-in.
    • In-House Components: Includes 19 custom primitives not found in standard shadcn/ui (e.g., Data Grid, Gantt, Kanban, Timeline, Stepper).
    • Dual API Support: In-house components are available in both Radix UI and Base UI versions.
    • Compatibility: Built on shadcn primitives and Tailwind CSS, compatible with all Shadcn Create themes (Vega, Nova, Maia, Lyra & Mira, New York, and Default).

  2. Overview of ReUI components and examples

    main

    ReUI is an open-source shadcn/ui registry providing two main types of resources:

    • Components: 17 in-house ReUI primitives designed for composition (e.g., data-grid, kanban, filters, date-selector, stepper, and tree).
    • Examples: Over 1,000 open-source component examples demonstrating how to configure primitives for specific real-world use cases.

    All components are MIT licensed and compatible with Base UI, Radix UI, and Tailwind CSS v4.

  4. Explore ReUI Custom In-House Components

    main

    ReUI includes 19 custom-built, shadcn-compatible components that are not part of the base shadcn/ui library. These components are maintained by Keenthemes and are available in two flavors: Radix UI and Base UI. Each component includes full API documentation, props references, and usage examples available at reui.io/docs.

    Available In-House Components

    ComponentDescription
    AlertContextual notifications with severity variants and dismissible states
    AutocompleteSearchable input with async filtering and keyboard navigation
    BadgeStatus indicators with multiple styles, sizes, and dot variants
    Data GridAdvanced table powered by TanStack Table + Virtual with DnD, pinning, resizing, and infinite scroll
    Date SelectorFlexible date range picker with calendar UI and preset ranges
    Event CalendarHeadless-first calendar with various views (month, week, day, etc.), drag-and-drop, and recurring events
    FiltersURL-state filter panel with TanStack Table integration and Zod validation
    FrameCard-like wrapper for panels and content areas
    GanttHeadless-first gantt with timeline panes, zoom, and drag/resize scheduling
    Icon StackLayered isometric icon illustrations
    KanbanDrag-and-drop task boards built on DnD Kit
    Number FieldNumeric input with increment/decrement controls
    Phone InputInternational phone number input with country selector
    RatingStar and icon-based rating support
    ScrollspyAuto-highlighting navigation that tracks scroll position
    SortableDrag-and-drop list reordering (vertical, grid, and nested)
    StepperMulti-step forms with React Hook Form validation
    TimelineSequential event display (logs, feeds, milestones)
    TreeHierarchical data display with expand/collapse and keyboard navigation

  5. Use Shadcn UI Components with ReUI Examples

    main

    ReUI includes all standard shadcn/ui primitives along with an extensive library of composed examples (52 component types). You can use these to quickly implement common UI patterns.

    Common Shadcn Components in ReUI

    ComponentUse Case
    AccordionCollapsible FAQ sections
    Alert DialogConfirming destructive actions or critical warnings
    AvatarUser profile images with fallbacks
    ButtonPrimary actions (largest example set)
    ChartData visualization using Recharts
    ComboboxSearchable dropdown selection
    Data Grid(In-house) Advanced tables
    Input GroupPrefixed/suffixed inputs and combined controls
    SelectDropdown selection fields
    SonnerToast notification systems
    TableStandard HTML table layouts

  6. Configure React Compiler for Data Grid

    main

    TanStack Table v8 uses a stable table instance that mutates internally. If you are using the React Compiler, it may skip necessary state updates (causing frozen sort arrows, unresponsive pagination, etc.).

    To fix this, you must add the "use no memo" directive to the component file that calls useReactTable.

    If using Vite, you can alternatively exclude specific directories in your Babel configuration:

    babel({
  presets: [reactCompilerPreset()],
  exclude: ["**/components/reui/data-grid/**", "**/your-tables/**"],
})

    On Next.js, it is recommended to use the per-file "use no memo" directive.

    "use client"
"use no memo" // required only when React Compiler is enabled

export function MyTable() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <DataGrid table={table} recordCount={data.length}>
      {/* ... */}
    </DataGrid>
  )
}

  7. Setup ReUI Registry

    main

    To enable automated component installation, add the ReUI registry namespace to your components.json file. You must specify your desired style and configure the @reui registry URL using the pattern https://reui.io/r/{style}/{name}.json.

    {
  "style": "base-nova",
  "registries": {
    "@reui": "https://reui.io/r/{style}/{name}.json"
  }
}

  8. Implement the Gantt component

    main

    The Gantt component uses a composition pattern: <Gantt><GanttNav /><GanttView /></Gantt>.

    Key Implementation Details:

    • Height: The root <Gantt /> component must have an explicit height (e.g., via className="h-[480px]" or a flex parent) because it is a min-height-zero flex column.
    • Scaling: The root component controls the type scale. Applying a text size class like className="text-sm" to the <Gantt /> component will scale all internal labels.
    • Control Modes: You can use the component in uncontrolled mode (using defaultEvents, defaultScale, etc.) or controlled mode (using events + onEventsChange, scale + onScaleChange, etc.).
    • Data Integrity: The engine does not mutate data directly. All timing changes (drag/resize) are proposed via onEventUpdate. Use canDropEvent for live validation during gestures.
    import { Gantt } from "@/components/reui/gantt/gantt"
import { GanttNav, GanttToolbar } from "@/components/reui/gantt/gantt-nav"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"

const resources: GanttResource[] = [
  {
    id: "design",
    title: "Design",
    children: [
      { id: "wireframes", title: "Wireframes" },
      { id: "visual-design", title: "Visual design" },
    ],
  },
]

const events: GanttEvent[] = [
  {
    id: "1",
    title: "Wireframes",
    start: new Date("2026-07-06"),
    end: new Date("2026-07-10"),
    allDay: true,
    resourceId: "wireframes",
    progress: 60,
  },
]

return (
  <Gantt
    defaultEvents={events}
    resources={resources}
    defaultScale="month"
    className="h-[480px]"
  >
    <GanttNav />
    <GanttView />
  </Gantt>
)