ReUI

https://reui.io/docs
Admin
ReUI is an open-source collection of copy-and-paste components and layouts built with React,...
Tokens:229,105
Snippets:1,299
Trust Score:6.4
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Premium Items

Source: https://reui.io/docs/registry

Install premium blocks and icons using the authenticated registry configuration.

```bash
pnpm dlx shadcn@latest add @reui/banner-1
npx shadcn@latest add @reui/icons/default/solid/all
```

--------------------------------

### Installation Command

Source: https://reui.io/docs/components/base/number-field

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn@latest add @reui/number-field
```

--------------------------------

### Installation Commands

Source: https://reui.io/docs/components/base/phone-input

Commands to install the PhoneInput component using various package managers.

```bash
pnpm dlx shadcn@latest add @reui/phone-input
```

--------------------------------

### Install Premium Registry Items

Source: https://reui.io/docs/get-started

Use the shadcn CLI to install premium components or icon sets from the ReUI registry.

```bash
npx shadcn@latest add @reui/banner-1
npx shadcn@latest add @reui/icons/default/solid/all
```

--------------------------------

### Install Event Calendar

Source: https://reui.io/docs/components/base/event-calendar

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn@latest add @reui/event-calendar
```

--------------------------------

### Installation Command

Source: https://reui.io/docs/components/base/rating

Use the shadcn CLI to add the rating component to your project.

```bash
pnpm dlx shadcn@latest add @reui/rating
```

--------------------------------

### Installation Commands

Source: https://reui.io/docs/components/radix/date-selector

Commands to install the DateSelector component using various package managers.

```bash
pnpm dlx shadcn@latest add @reui/r-date-selector
```

--------------------------------

### Install Kanban Component

Source: https://reui.io/docs/base/kanban

Use the CLI to add the Kanban component to your project.

```bash
pnpm dlx shadcn@latest add @reui/kanban
```

--------------------------------

### Install Alert Component

Source: https://reui.io/docs/components/base/alert

Use the CLI to add the Alert component to your project.

```bash
pnpm dlx shadcn@latest add @reui/alert
```

--------------------------------

### Install Stepper Component

Source: https://reui.io/docs/components/base/stepper

Use the CLI to add the Stepper component to your project.

```bash
pnpm dlx shadcn@latest add @reui/stepper
```

--------------------------------

### Install Data Grid

Source: https://reui.io/docs/components/radix/data-grid

Command to add the data grid component to your project.

```bash
pnpm dlx shadcn@latest add @reui/data-grid
```

--------------------------------

### Install ReUI Skill

Source: https://reui.io/docs/codex

Execute this command to install the ReUI skill and enable the build workflow in your project.

```bash
curl -fsSL https://mcp.reui.io/install | node -
```

--------------------------------

### Build a multi-step wizard

Source: https://reui.io/docs/claude

Example prompt for generating a multi-step form wizard with validation.

```text
Build a multi-step "create project" wizard with the ReUI stepper and form components, with validation on each step.
```

--------------------------------

### Install DateSelector

Source: https://reui.io/docs/components/base/date-selector

Use the CLI to add the DateSelector component to your project.

```bash
pnpm dlx shadcn@latest add @reui/date-selector
```

--------------------------------

### Install Frame Component

Source: https://reui.io/docs/components/base/frame

Use the CLI to add the Frame component to your project.

```bash
pnpm dlx shadcn@latest add @reui/frame
```

--------------------------------

### Install Tree Component

Source: https://reui.io/docs/components/base/tree

Use the CLI to add the Tree component to your project.

```bash
pnpm dlx shadcn@latest add @reui/tree
```

--------------------------------

### Install ReUI component with RTL support

Source: https://reui.io/docs/rtl

Use the standard shadcn CLI command to add ReUI components; the registry automatically applies RTL transformations during installation.

```bash
pnpm dlx shadcn@latest add @reui/c-data-grid-30
```

--------------------------------

### Install Autocomplete Component

Source: https://reui.io/docs/components/radix/autocomplete

Use the shadcn CLI to add the Autocomplete component to your project.

```bash
pnpm dlx shadcn@latest add @reui/autocomplete
```

--------------------------------

### Install Timeline Component

Source: https://reui.io/docs/components/radix/timeline

Use the shadcn CLI to add the timeline component to your project.

```bash
pnpm dlx shadcn@latest add @reui/r-timeline
```

--------------------------------

### Basic Kanban Implementation

Source: https://reui.io/docs/components/radix/kanban

A minimal example showing how to structure the Kanban board with columns and items.

```tsx
<Kanban
  value={columns}
  onValueChange={setColumns}
  getItemValue={(item) => item.id}
>
  <KanbanBoard>
    {Object.entries(columns).map(([id, items]) => (
      <KanbanColumn key={id} value={id}>
        <KanbanColumnHandle>
          <h3>{id}</h3>
        </KanbanColumnHandle>
        <KanbanColumnContent value={id}>
          {items.map((item) => (
            <KanbanItem key={item.id} value={item.id}>
              <KanbanItemHandle>{item.content}</KanbanItemHandle>
            </KanbanItem>
          ))}
        </KanbanColumnContent>
      </KanbanColumn>
    ))}
  </KanbanBoard>
  <KanbanOverlay>
    <div className="bg-muted size-full rounded-md" />
  </KanbanOverlay>
</Kanban>
```

--------------------------------

### Install Sortable Component

Source: https://reui.io/docs/base/sortable

Use the CLI to add the sortable component to your project.

```bash
pnpm dlx shadcn@latest add @reui/sortable
```

--------------------------------

### Install Frame component

Source: https://reui.io/docs/components/radix/frame

Use the shadcn CLI to add the Frame component to your project.

```bash
pnpm dlx shadcn@latest add @reui/frame
```

--------------------------------

### Install Tree Component

Source: https://reui.io/docs/components/radix/tree

Use the shadcn CLI to add the tree component to your project.

```bash
pnpm dlx shadcn@latest add @reui/r-tree
```

--------------------------------

### Install IconStack component

Source: https://reui.io/docs/components/base/icon-stack

Use the shadcn CLI to add the IconStack component to your project.

```bash
pnpm dlx shadcn@latest add @reui/icon-stack
```

--------------------------------

### Install Sortable component

Source: https://reui.io/docs/components/base/sortable

Use the shadcn CLI to add the Sortable component to your project.

```bash
pnpm dlx shadcn@latest add @reui/sortable
```

--------------------------------

### Install IconTile

Source: https://reui.io/docs/components/base/icon-tile

Command to add the IconTile component to your project using the shadcn CLI.

```bash
pnpm dlx shadcn@latest add @reui/icon-tile
```

--------------------------------

### Badge API Usage Examples

Source: https://reui.io/docs/components/radix/badge

Examples demonstrating variant and radius configuration.

```tsx
<Badge variant="success-light" size="sm">
  Success
</Badge>
```

```tsx
<Badge variant="outline" radius="full">
  Pill
</Badge>
```

--------------------------------

### Install Free Components

Source: https://reui.io/docs/registry

Use the shadcn CLI to add free components using the c-* naming pattern.

```bash
pnpm dlx shadcn@latest add @reui/c-alert-1
```

--------------------------------

### Install ReUI Skill

Source: https://reui.io/docs/cursor

Run this command in your project root to install the ReUI skill file for Cursor.

```bash
curl -fsSL https://mcp.reui.io/install | node -
```

--------------------------------

### DataGrid Cell Border Example

Source: https://reui.io/docs/components/radix/data-grid

A comprehensive example demonstrating the DataGrid component with custom user data and imports.

```typescript
"use client"

import { useMemo, useState } from "react"
import {
  DataGrid,
  DataGridContainer,
  dataGridFeatures,
  type DataGridFeatures,
} from "@/components/reui/data-grid/data-grid"
import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
import {
  ColumnDef,
  ColumnOrderState,
  PaginationState,
  SortingState,
  useTable,
} from "@tanstack/react-table"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { Card } from "@/components/ui/card"

interface IData {
  id: string
  name: string
  availability: "online" | "away" | "busy" | "offline"
  avatar: string
  status: "active" | "inactive"
  flag: string // Emoji flags
  email: string
  company: string
  role: string
  joined: string
  location: string
  balance: number
}

const users = [
  {
    id: "1",
    name: "Alex Johnson",
    email: "alex@example.com",
    avatar:
      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80",
    initials: "AJ",
  },
  {
    id: "2",
    name: "Sarah Chen",
    email: "sarah@example.com",
    avatar:
      "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80",
    initials: "SC",
  },
  {
    id: "3",
    name: "Michael Rodriguez",
    email: "michael@example.com",
    avatar:
      "https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80",
    initials: "MR",
  },
  {
    id: "4",
    name: "Emma Wilson",
    email: "emma@example.com",
    avatar:
      "https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80",
    initials: "EW",
  },
  {
    id: "5",
    name: "David Kim",
    email: "david@example.com",
    avatar:
      "https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80",
    initials: "DK",
  },
  {
    id: "6",
    name: "Aron Thompson",
    email: "lisa@example.com",
    avatar:
      "https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=96&h=96&dpr=2&q=80",
    initials: "LT",
  },
  {
    id: "7",
    name: "James Brown",
    email: "james@example.com",
    avatar:
      "https://images.unsplash.com/photo-1543299750-19d1d6297053?w=96&h=96&dpr=2&q=80",
    initials: "JB",
  },
  {
    id: "8",
    name: "Maria Garcia",
    email: "maria@example.com",
    avatar:
      "https://images.unsplash.com/photo-1620075225255-8c2051b6c015?w=96&h=96&dpr=2&q=80",
    initials: "MG",
  },
  {
    id: "9",
    name: "Nick Johnson",
    email: "nick@example.com",
    avatar:
      "https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?w=96&h=96&dpr=2&q=80",
    initials: "NJ",
  },
  {
    id: "10",
    name: "Liam Thompson",
    email: "liam@example.com",
    avatar:
      "https://images.unsplash.com/photo-1542595913-85d69b0edbaf?w=96&h=96&dpr=2&q=80",
    initials: "LT",
  },
]
```

--------------------------------

### Install ReUI Skill

Source: https://reui.io/docs/grok

Commands to install the ReUI skill in project or global modes. Note that these commands overwrite existing skill directories.

```bash
curl -fsSL https://mcp.reui.io/install | node -
```

```bash
curl -fsSL https://mcp.reui.io/install | REUI_GLOBAL=1 node -
```

--------------------------------

### Initialize Gantt Component with Resources

Source: https://reui.io/docs/components/base/gantt

Setup the Gantt component by defining resource structures and importing necessary types and UI components.

```typescript
"use client"

import { useMemo, useRef, useState } from "react"
import {
  Gantt,
  type GanttApi,
} from "@/components/reui/gantt/gantt"
import type { GanttI18nOverrides } from "@/components/reui/gantt/gantt-i18n"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttInteractions,
  GanttResource,
  GanttSlotDraft,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek, type Locale } from "date-fns"
import { ar, de, es, fr, ja } from "date-fns/locale"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import { RotateCcwIcon, SettingsIcon } from 'lucide-react'

/**
 * White-label task tree, tall enough that the panes scroll vertically. The
 * Launch group and "Release prep" ship UNSCHEDULED: hover their empty rows
 * and click the hint tile (or drag a range) to schedule them.
 */
const RESOURCES: GanttResource[] = [
  {
    id: "planning",
    title: "Planning",
    children: [
      { id: "brief", title: "Project brief" },
      { id: "scope", title: "Scope review" },
    ],
  },
  {
    id: "design",
    title: "Design",
    children: [
      { id: "wireframes", title: "Wireframes" },
      { id: "visual-design", title: "Visual design" },
    ],
  },
  {
    id: "build",
    title: "Build",
    children: [
      { id: "frontend", title: "Frontend" },
      { id: "backend", title: "Backend" },
      { id: "qa", title: "QA pass" },
      { id: "release-prep", title: "Release prep" },
    ],
  },
  {
    id: "launch",
    title: "Launch",
    children: [
      { id: "docs", title: "Docs" },
      { id: "marketing-site", title: "Marketing site" },
      { id: "announcement", title: "Announcement" },
    ],
  },
]

/** Leaf id -> title, for naming bars scheduled from empty rows. */
const RESOURCE_TITLES = new Map(
  RESOURCES.flatMap((group) => group.children ?? []).map((leaf) => [
    leaf.id,
    leaf.title,
  ])
)
```

--------------------------------

### Basic Timeline Usage

Source: https://reui.io/docs/components/base/timeline

Example of a single timeline item structure.

```jsx
<Timeline>
  <TimelineItem step={1}>
    <TimelineHeader>
      <TimelineDate>March 2024</TimelineDate>
      <TimelineTitle>Project Initialized</TimelineTitle>
    </TimelineHeader>
    <TimelineIndicator />
    <TimelineSeparator />
    <TimelineContent>
      Successfully set up the project repository and initial architecture.
    </TimelineContent>
  </TimelineItem>
</Timeline>
```

--------------------------------

### Badge with Icon

Source: https://reui.io/docs/badge

Example of including an icon within a Badge component.

```tsx
import { Badge } from "@/components/reui/badge"
import { CheckIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Badge variant="outline">
      <CheckIcon />
      Badge
    </Badge>
  )
}
```

--------------------------------

### DataGrid Basic Usage

Source: https://reui.io/docs/components/base/data-grid

Basic imports and setup for the DataGrid component.

```typescript
import { useTable, type ColumnDef } from "@tanstack/react-table"
 
import {
  DataGrid,
  DataGridContainer,
  dataGridFeatures,
  DataGridPagination,
  DataGridTable,
  DataGridTableFootRow,
  DataGridTableFootRowCell,
  type DataGridFeatures,
} from "@/components/reui/data-grid"
```

--------------------------------

### DataGrid Implementation

Source: https://reui.io/docs/components/base/data-grid

Example of defining columns, a footer, and rendering the DataGrid component.

```typescript
const columns: ColumnDef<DataGridFeatures, User>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
]
 
const footer = (
  <DataGridTableFootRow>
    <DataGridTableFootRowCell colSpan={columns.length}>
      Showing {data.length} rows
    </DataGridTableFootRowCell>
  </DataGridTableFootRow>
)
 
const table = useTable({
  features: dataGridFeatures,
  data,
  columns,
})
 
return (
  <DataGrid
    table={table}
    recordCount={data.length}
    tableLayout={{ rowsPinnable: true }}
  >
    <DataGridContainer>
      <DataGridTable footerContent={footer} />
    </DataGridContainer>
    <DataGridPagination />
  </DataGrid>
)
```

--------------------------------

### Install File Upload Hook

Source: https://reui.io/docs/components/base/file-upload

Use the CLI to add the file upload hook to your project.

```bash
pnpm dlx shadcn@latest add @reui/use-file-upload
```

--------------------------------

### Implement a Stepper with Title and Bar

Source: https://reui.io/docs/components/base/stepper

This example demonstrates a multi-step navigation pattern using icons, status badges, and progress separators. It requires state management to track the current active step.

```tsx
"use client"

import { useState } from "react"
import { Badge } from "@/components/reui/badge"
import {
  Stepper,
  StepperContent,
  StepperIndicator,
  StepperItem,
  StepperNav,
  StepperPanel,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "@/components/reui/stepper"

import { Button } from "@/components/ui/button"
import { BookUserIcon, CheckIcon, CreditCardIcon, LoaderCircleIcon, LockIcon } from 'lucide-react'

const steps = [
  {
    title: "User Details",
    icon: (
      <BookUserIcon  className="size-4" />
    ),
  },
  {
    title: "Payment Info",
    icon: (
      <CreditCardIcon  className="size-4" />
    ),
  },
  {
    title: "Auth OTP",
    icon: (
      <LockIcon  className="size-4" />
    ),
  },
]

export function Pattern() {
  const [currentStep, setCurrentStep] = useState(2)

  return (
    <Stepper
      value={currentStep}
      onValueChange={setCurrentStep}
      indicators={{
        completed: (
          <CheckIcon  className="size-3.5" />
        ),
        loading: (
          <LoaderCircleIcon  className="size-3.5 animate-spin" />
        ),
      }}
      className="w-full max-w-xl space-y-8"
    >
      <StepperNav className="gap-3">
        {steps.map((step, index) => (
          <StepperItem
            key={index}
            step={index + 1}
            className="relative flex-1 items-start"
          >
            <StepperTrigger className="flex grow flex-col items-start justify-center gap-2.5">
              <StepperIndicator className="data-[state=inactive]:border-border data-[state=inactive]:text-muted-foreground data-[state=completed]:bg-success size-8 border-2 data-[state=completed]:text-white data-[state=inactive]:bg-transparent">
                {step.icon}
              </StepperIndicator>
              <div className="flex flex-col items-start gap-1">
                <div className="text-muted-foreground text-[10px] font-semibold uppercase">
                  Step {index + 1}
                </div>
                <StepperTitle className="group-data-[state=inactive]/step:text-muted-foreground text-start text-base font-semibold">
                  {step.title}
                </StepperTitle>
                <div>
                  <Badge
                    size="sm"
                    variant="primary-light"
                    className="hidden group-data-[state=active]/step:inline-flex"
                  >
                    In Progress
                  </Badge>
                  <Badge
                    variant="success-light"
                    size="sm"
                    className="hidden group-data-[state=completed]/step:inline-flex"
                  >
                    Completed
                  </Badge>
                  <Badge
                    variant="secondary"
                    size="sm"
                    className="text-muted-foreground hidden group-data-[state=inactive]/step:inline-flex"
                  >
                    Pending
                  </Badge>
                </div>
              </div>
            </StepperTrigger>

            {steps.length > index + 1 && (
              <StepperSeparator className="group-data-[state=completed]/step:bg-success absolute inset-x-0 start-9 top-4 m-0 group-data-[orientation=horizontal]/stepper-nav:w-[calc(100%-2rem)] group-data-[orientation=horizontal]/stepper-nav:flex-none" />
            )}
          </StepperItem>
        ))}
      </StepperNav>

      <StepperPanel className="text-sm">
        {steps.map((step, index) => (
          <StepperContent
            key={index}
            value={index + 1}
            className="flex items-center justify-center"
          >
            {step.title} content
          </StepperContent>
        ))}
      </StepperPanel>

      <div className="flex items-center justify-between gap-2.5">
        <Button
          variant="outline"
          onClick={() => setCurrentStep((prev) => prev - 1)}
          disabled={currentStep === 1}
        >
          Previous
        </Button>
        <Button
          variant="outline"
          onClick={() => setCurrentStep((prev) => prev + 1)}
          disabled={currentStep === steps.length}
        >
          Next
        </Button>
      </div>
    </Stepper>
  )
}
```

--------------------------------

### Install Scrollspy component

Source: https://reui.io/docs/components/base/scrollspy

Use the CLI to add the Scrollspy component to your project.

```bash
pnpm dlx shadcn@latest add @reui/scrollspy
```

--------------------------------

### Initialize Event Calendar with Resources and Events

Source: https://reui.io/docs/components/base/event-calendar

Setup the calendar with team resources and demo events to enable resource-based views and multi-day scheduling.

```typescript
"use client"

import { useMemo, useRef, useState } from "react"
import {
  EventCalendar,
  type EventCalendarApi,
  type EventCalendarRenderEventProps,
} from "@/components/reui/event-calendar/event-calendar"
import { EventCalendarContent } from "@/components/reui/event-calendar/event-calendar-content"
import type { EventCalendarI18nOverrides } from "@/components/reui/event-calendar/event-calendar-i18n"
import {
  EventCalendarNav,
  EventCalendarToolbar,
} from "@/components/reui/event-calendar/event-calendar-nav"
import type {
  CalendarEvent,
  CalendarView,
  EventCalendarInteractions,
  EventCalendarResource,
  EventCalendarViewSettings,
} from "@/components/reui/event-calendar/event-calendar-types"
import {
  addDays,
  addMinutes,
  setHours,
  startOfDay,
  startOfWeek,
  type Locale,
} from "date-fns"
import { ar, de, es, fr, ja } from "date-fns/locale"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import { PlusIcon, Settings2Icon } from 'lucide-react'

/** Team members - passing resources unlocks the resource day view, so the
 *  view switcher offers every view the calendar ships. */
const TEAM: EventCalendarResource[] = [
  { id: "alex", title: "Alex", color: "var(--color-blue-500)" },
  { id: "mia", title: "Mia", color: "var(--color-violet-500)" },
  { id: "sam", title: "Sam", color: "var(--color-emerald-500)" },
]

/** Demo events: a balanced current week (timed, multi-day, all-day, two
 *  custom-rendered chips) plus a light scatter in the nearby weeks so the
 *  month view reads naturally without crowding any cell. */
function buildEvents(anchor: Date): CalendarEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const at = (dayOffset: number, hour: number, minute = 0) =>
    addMinutes(setHours(addDays(week, dayOffset), hour), minute)
  const day = (dayOffset: number) => addDays(week, dayOffset)
```
Tokens:
Raw