Roy UI

A modern React component library with a fully-featured DataTable, custom date range picker, and custom time picker.

Built for Next.js 15, Vite, Remix, TanStack Start. TypeScript-first. RSC-safe. Tree-shakable ESM. Zero config.

Open the live documentation site →

Roy UI (@roy-ui/ui) is an open-source React component library for building dashboards, admin panels, internal tools, and product UIs. It ships a fully-featured React DataTable — with search, date range filter, time filter, sort, pagination, drag-to-reorder columns, edge-drag resize, hide / restore via a column menu, CSV / JSON export and import, and per-zone typography for headers, row-headers and cells — alongside a custom React date range picker (no date-fns dependency), a custom React time picker (analog wristwatch and digital, user-switchable), and a set of animated micro-interaction primitives (gradient button, popover, text morph, tree nav, attribution badge).

Every component is written in TypeScript, shipped as tree-shakable ESM, and fully compatible with React Server Components (RSC), Next.js 15 App Router, Vite, Remix, Astro, TanStack Start, and any modern React 18+ runtime. One npm install. One import. Production-ready.

Try every component live with copyable code: royui.dibbayajyoti.com — including the full DataTable demo on 60 rows of synthetic order data.

• Drop-in React DataTable — generic over your row type T, full TypeScript inference, single component wires search + date + time + sort + paginate + reorder + resize + hide + export
• Custom React date range picker — N-month modal (default 2), hover-preview, preset sidebar, min / max bounds, zero date-fns dependency
• Custom React time picker — analog clock face (drag the hour & minute hands, AM / PM segmented pill) and digital (scroll-wheel or arrow keys per segment), 12h or 24h, configurable minute step
• Animated primitives — gradient button with loading spinner, click-to-open popover, character-by-character text morph, file-explorer-style tree nav, floating "Made by" badge
• Zero runtime config — no Tailwind plugin, no PostCSS, no theme provider, no design-token boilerplate
• TypeScript-first — tree-shakable ESM with first-class .d.ts types and source maps
• RSC-safe (React Server Components-safe) — every interactive component carries its own "use client" boundary inside the published bundle; import directly from a Next.js App Router server component
• Themed with CSS variables — every visual surface is a CSS custom property; dark mode ships under prefers-color-scheme
• Framework-agnostic — Next.js 15, Vite, Remix, Astro (React island), TanStack Start, Create React App, any ESM bundler
• Provenance-signed releases — every npm publish carries npm provenance attestation
• MIT licensed — free for personal and commercial use

• Install
• Quick start — DataTable
• Components
• DataTable feature matrix
• Custom date range picker
• Custom time picker
• Standalone table primitives
• React data table comparison
• React UI library comparison
• Theming
• Framework support
• FAQ
• Requirements
• Local development
• Releases and versioning
• Contributing
• License

npm install @roy-ui/ui
# or
pnpm add @roy-ui/ui
# or
yarn add @roy-ui/ui
# or
bun add @roy-ui/ui

Peer dependency: React 18 or newer (React 19 supported).

'use client';

import { useState } from 'react';
import { DataTable, type Column } from '@roy-ui/ui';

type Order = {
  id: string;
  customer: string;
  total: number;
  placedAt: Date;
  status: 'paid' | 'pending' | 'refunded';
};

const columns: Column<Order>[] = [
  { key: 'id', header: 'Order', accessor: (r) => r.id, isRowHeader: true },
  { key: 'customer', header: 'Customer', accessor: (r) => r.customer },
  { key: 'status', header: 'Status', accessor: (r) => r.status },
  { key: 'placedAt', header: 'Placed', accessor: (r) => r.placedAt, type: 'date' },
  { key: 'time', header: 'Time', accessor: (r) => r.placedAt, type: 'time' },
  {
    key: 'total',
    header: 'Total',
    accessor: (r) => r.total,
    type: 'number',
    cell: (v) => `$${(v as number).toFixed(2)}`,
  },
];

export default function OrdersPage({ orders }: { orders: Order[] }) {
  const [data, setData] = useState(orders);

  return (
    <DataTable<Order>
      data={data}
      columns={columns}
      visibleRows={8}
      search={{ enabled: true, placeholder: 'Search orders' }}
      dateFilter={{ column: 'placedAt', monthsVisible: 2 }}
      timeFilter={{ column: 'time', variant: 'analog', toleranceMinutes: 60 }}
      pagination={{ pageSize: 25 }}
      dataIO={{
        export: { enabled: true, filename: 'orders' },
        import: { enabled: true, onImport: setData },
      }}
      storageKey="orders-table"
    />
  );
}

Using the Next.js App Router? Import directly from a Server Component — the interactive bits inside @roy-ui/ui carry their own "use client" boundary.

Each component lives in its own folder with the source .tsx, its CSS, and an index.ts re-export — so you can read the whole implementation in one click.

'use client';

import { useState } from 'react';
import { DateRangePicker, type DateRange } from '@roy-ui/ui';

export function BookingPicker() {
  const [range, setRange] = useState<DateRange>({ from: null, to: null });

  return (
    <DateRangePicker
      value={range}
      onChange={setRange}
      monthsVisible={2}
      weekStartsOn={1}
      minDate={new Date()}
    />
  );
}

'use client';

import { useState } from 'react';
import { TimePicker, type TimeValue } from '@roy-ui/ui';

export function ShiftStartPicker() {
  const [time, setTime] = useState<TimeValue | null>(null);

  return (
    <TimePicker
      value={time}
      onChange={setTime}
      variant="analog"     // or "digital" — user can switch from the panel
      hourCycle={12}       // or 24
      minuteStep={5}
    />
  );
}

If DataTable is more than you need, the primitives ship on their own.

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from '@roy-ui/ui';

<Table visibleRows={5} stickyHeader>
  <TableHeader>
    <TableRow>
      <TableHead>Order</TableHead>
      <TableHead>Customer</TableHead>
      <TableHead align="right">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {orders.map((o) => (
      <TableRow key={o.id}>
        <TableCell isRowHeader>{o.id}</TableCell>
        <TableCell>{o.customer}</TableCell>
        <TableCell align="right">${o.total.toFixed(2)}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

How @roy-ui/ui DataTable stacks up against TanStack Table, AG Grid, and Material React Table.

When to use each:

• Need maximum flexibility, no styles, you wire everything? Use TanStack Table v8.
• Need Excel-style spreadsheet with pivot, master-detail, infinite scroll, enterprise license? Use AG Grid.
• Already deep in Material UI? Use Material React Table.
• Need a clean, modern React data table with search + date range + time + paginate + reorder + resize + hide + CSV / JSON working out of the box in a Next.js app, zero setup? Use Roy UI.

How @roy-ui/ui stacks up against shadcn/ui, Aceternity UI, Magic UI, Radix, and MUI.

When to use each:

• Want unstyled accessibility primitives with full WAI-ARIA coverage? Use Radix UI or React Aria.
• Want Tailwind-powered components you maintain yourself? Use shadcn/ui.
• Want stunning marketing-page effects with Framer Motion? Use Aceternity UI or Magic UI.
• Want an enterprise design system with hundreds of Material Design components? Use Material UI (MUI) or Mantine.
• Want a drop-in DataTable + animated primitives, zero setup, no Tailwind, RSC-safe, MIT? Use Roy UI.

Every component exposes its visual surface as CSS custom properties. Override on the component, on a parent class, or globally on :root.

.royui-table {
  --royui-table-bg: #ffffff;
  --royui-table-fg: #141414;
  --royui-table-border: rgba(20, 20, 20, 0.1);
  --royui-table-header-bg: #f7f7f7;
  --royui-table-cell-size: 14px;
  --royui-table-cell-font: 'Inter', system-ui, sans-serif;
}

A dark scheme override ships under @media (prefers-color-scheme: dark) for every component.

Is this a free React data table library? Yes. MIT licensed, free for personal and commercial use, no paid tier.

Does the DataTable work with React Server Components and the Next.js App Router? Yes. The component carries its own "use client" boundary inside the published bundle. Import <DataTable /> directly from a Next.js App Router server component file — no need to mark your file "use client".

Is Tailwind CSS required? No. Styles are scoped CSS, side-effect imported by each component. No Tailwind plugin, no PostCSS config, no theme provider.

Can I use this alongside TanStack Table? Yes, but you don't need to — the DataTable here ships its own state pipeline (search → date filter → time filter → sort → paginate) and column-layout state (order, sizes, hidden). If you already use TanStack Table, the Table, TableHead, TableRow, TableCell primitives from @roy-ui/ui give you styled cells you can wire your TanStack instance to.

How do I render every column without a horizontal scrollbar? Pass fitColumns to <DataTable /> — columns will share the container width, and cell content wraps instead of overflowing.

Can I persist the user's column layout across reloads? Yes — pass storageKey="orders-table" and column order, sizes, and hidden state are saved to localStorage.

Is there a CSV import and export built in? Yes. dataIO.export.enabled adds an Export button (CSV and / or JSON); dataIO.import.enabled adds an Import button with a file picker. The built-in CSV writer is RFC 4180, the parser handles quoted fields and escaped quotes. Bring your own parser via dataIO.import.parse for Excel / Parquet / XML.

Does the time picker support 12-hour and 24-hour cycles? Yes — pass hourCycle={12} or hourCycle={24}. The AM / PM segmented pill is shown in both cycles on both the analog and digital variants.

Is the date range picker localized? The picker is locale-agnostic for the calendar grid; it accepts weekStartsOn: 0..6. Display of weekday letters uses Sunday-start English by default. Override presets to supply your own labels.

• React >= 18
• A bundler that understands ESM (Vite, webpack 5, Next.js, Remix, Parcel 2, esbuild — all fine)
• TypeScript is optional but the package ships full .d.ts types

git clone https://github.com/DibbayajyotiRoy/RoyUI.git
cd RoyUI
pnpm install
pnpm dev           # docs site on http://localhost:3050
pnpm dev:all       # library + docs in watch mode

Project layout:

packages/ui   :  @roy-ui/ui  (published to npm)
apps/docs     :  Next.js docs and live demos

Releases are fully automated via GitHub Actions. Every push to main:

1. Type-checks and builds @roy-ui/ui
2. Bumps the patch version
3. Publishes to npm with provenance attestation
4. Pushes the bump commit and a matching vX.Y.Z tag
5. Creates a GitHub Release with auto-generated notes

Manual minor / major bumps: edit packages/ui/package.json before pushing.

PRs welcome. Open an issue first for anything larger than a one-line fix. A new component contribution should include:

1. The component in packages/ui/src/components/<name>/
2. A re-export from packages/ui/src/index.ts
3. A demo in apps/docs/components/demos/
4. A registry entry in apps/docs/lib/registry.ts and a docs body in apps/docs/components/<Name>Docs.tsx

See ADDING_COMPONENTS.md for the full checklist.

MIT © Dibbayajyoti Roy

_{Keywords: React data table · React data grid · React table component · React DataTable · custom React date range picker · custom React time picker · analog clock picker · digital time picker · React pagination · column reorder · column resize · column hide · CSV export · JSON export · React component library · React UI library · TypeScript React components · Next.js 15 components · Next.js App Router · React Server Components · RSC-safe · TanStack Table alternative · AG Grid alternative · Material React Table alternative · shadcn alternative · Aceternity UI alternative · Magic UI alternative · MUI alternative · Radix alternative · animated React components · gradient button · popover · text morph · tree nav · made-by badge · React 18 · React 19 · ESM · tree-shakable · zero config · MIT · open source · free.}