@roy-ui/ui

A modern React component library for Next.js 15, Vite, Remix, TanStack Start, and any React 18+ bundler. Ships a fully-featured React data table with search, date range picker, analog & digital time picker, pagination, column reorder / resize / hide, CSV / JSON export & import, per-zone typography, plus animated micro-interaction primitives — TypeScript-first, RSC-safe, tree-shakable ESM, zero config.

Open the live documentation →

Why @roy-ui/ui?

You're building a React dashboard, admin panel, internal tool, or product UI in Next.js 15 App Router, Vite, Remix, Astro, or TanStack Start. You want a production-grade table component with filtering, paginate, sort, drag-to-reorder columns, resize, hide, export — without wiring up TanStack Table, AG Grid, or React Table from scratch. You want clean, animated micro-interaction components — without installing Tailwind, configuring PostCSS, or pulling in Framer Motion. You want TypeScript and React Server Component support out of the box.

@roy-ui/ui is that library. One npm install. One import. Production-ready.

• Drop-in React DataTable with search, date range, time, pagination, reorder, resize, hide, CSV / JSON IO
• Built-in custom date range picker — 2-month modal, hover-preview, presets, no date-fns required
• Built-in custom time picker — analog wristwatch and digital, AM / PM toggle, user-switchable
• Animated primitives — gradient button with loading spinner, popover, text morph, tree nav, floating "Made by" badge
• Zero runtime config — no Tailwind plugin, no theme provider, no design-token setup
• TypeScript-first — tree-shakable ESM with first-class .d.ts types and source maps
• RSC-safe (React Server Components-safe) — "use client" boundary inside the bundle; import directly from a Next.js App Router server component
• Framework-agnostic — Next.js, Vite, Remix, Astro (React island), TanStack Start, CRA, any ESM bundler

Install

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).

Quick start — React DataTable

'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 OrdersTable({ 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 },
      }}
    />
  );
}

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.

What's in the box

Display / Data

Inputs / Overlay

DataTable feature matrix

Custom date range picker — standalone

'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()}
    />
  );
}

Custom time picker — analog and digital

'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 also switch from the panel
      hourCycle={12}       // or 24
      minuteStep={5}
    />
  );
}

Standalone table primitives

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>

React data table comparison — @roy-ui/ui vs TanStack Table vs AG Grid vs 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/ui.

React UI library comparison — @roy-ui/ui vs shadcn/ui vs Aceternity vs MUI vs Radix

Theming

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.

Framework support

FAQ

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? Yes. The component carries its own "use client" boundary inside the published bundle, so you can render <DataTable /> from a Next.js App Router server component without manually marking the file.

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 with 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, use the Table, TableHead, TableRow, TableCell primitives from @roy-ui/ui for styles and wire your TanStack instance to them.

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? Yes — pass storageKey="orders-table" to <DataTable /> and column order, sizes, and hidden state are saved to localStorage.

Is there a CSV import / export built in? Yes. dataIO.export.enabled adds an Export button; dataIO.import.enabled adds an Import button with a file picker. CSV writer is RFC 4180; parser handles quoted fields and escaped quotes. JSON IO is also built in. Bring your own parser via dataIO.import.parse for Excel / Parquet / etc.

Links

• Live documentation: https://roy-ui-docs.vercel.app
• Source code: https://github.com/DibbayajyotiRoy/RoyUI
• Issues: https://github.com/DibbayajyotiRoy/RoyUI/issues
• Releases: https://github.com/DibbayajyotiRoy/RoyUI/releases
• npm: https://www.npmjs.com/package/@roy-ui/ui

License

MIT © Dibbayajyoti Roy