open-source product · React library · MIT
Roy UIzero-config React components for data-heavy UIs
tldr
Roy UI (@roy-ui/ui) is a React component library for dashboards, admin panels, and internal tools. It ships a fully-featured DataTable — search, date-range and time filters, sort, pagination, drag-to-reorder and edge-drag-resize columns, hide/restore, CSV/JSON import-export — plus a custom date range picker with no date-fns dependency and an analog/digital time picker. You install it; you don’t copy-paste it. Zero config, no Tailwind required, RSC-safe, tree-shakable ESM, sub-12 KB.
install
npm install @roy-ui/ui
import { DataTable, DateRangePicker, TimePicker } from "@roy-ui/ui";
// no Tailwind plugin, no theme provider, no design-token boilerplate —
// each component imports its own scoped CSS as a side effect.why it exists
Most React data UIs start the same way: pull in TanStack Table for the headless engine, then hand-build the styling, the date filter, the column menu, and the CSV export — or copy-paste a shadcn table and maintain it forever. Roy UI ships that whole surface as one styled, typed component.
It is React Server Components-safe out of the box — each interactive component carries its own "use client" boundary in the published bundle, so it drops into a Next.js 15 App Router project without you wiring boundaries by hand. Theming is CSS custom properties (--royui-*), not a runtime theme object.
vs the alternatives
| Roy UI | shadcn/ui | TanStack Table | MUI | |
|---|---|---|---|---|
| Install | npm install | copy-paste CLI | npm install | npm install |
| Ships styles | Yes | Yes (Tailwind) | No (headless) | Yes |
| Tailwind required | No | Yes | No | No |
| Full DataTable | Yes | No | Engine only | DataGrid (paid tiers) |
| Time picker | Analog + digital | No | No | Basic |
| RSC-safe | Yes, built in | Manual | Manual | Provider needed |
| Bundle | sub-12 KB | varies | small | large |
faq
Is Roy UI a shadcn/ui alternative?
Yes, for data-heavy UIs. Where shadcn gives you copy-paste Tailwind components you own and maintain, Roy UI is a single npm install that ships a full DataTable, date range picker, and time picker with their styles included — no Tailwind, no per-component copy-paste.
Does it have a React data table with filters and export?
Yes. The DataTable includes search, date-range and time filtering, sort, pagination, drag-to-reorder and resize columns, hide/restore via a column menu, and CSV/JSON import-export — all in one component.
Does it work with Next.js 15 and the App Router?
Yes. Components are RSC-safe with their own client boundaries baked into the published bundle, and the library is ESM, tree-shakable, and works with Next.js 13–15, Vite, Remix, Astro, and TanStack Start.
Do I need Tailwind or a theme provider?
No. There is no Tailwind plugin, no PostCSS step, and no theme provider. Each component imports its own scoped CSS, and you theme via --royui-* CSS variables.
related
Other projects: Klinder-OSS · AHTML · Diffcore · whatbroke · all work · about the maker
Built by Dibbayajyoti Roy. Questions or want to use it? Get in touch.