Animated React components that survive Server Components.
Roy UI (@roy-ui/ui) is a free, open-source React component library of animated, production-ready components for Next.js App Router, TanStack Start, Vite, and Remix. Every component ships correct "use client" boundaries, brings its own styles, and is fully typed — TypeScript-first, tree-shakable, and under 12 KB. MIT licensed.
What is Roy UI?
Roy UI is a React UI library you install from npm (@roy-ui/ui) or copy into your project with a CLI. It focuses on the components that are tedious to build well — an animated gradient button, a batteries-included data table with search, date-range and time pickers, CSV/JSON import-export, a drag-and-drop file uploader, a diff-typing text morph, and more. It is designed to work in React Server Component environments without the "cannot use hooks in a Server Component" errors that plague drop-in libraries.
Why we built it
Most React component libraries were written before the App Router and React Server Components landed. Drop them into a modern Next.js or TanStack Start app and you hit hydration mismatches, missing "use client" directives, or a global stylesheet that fights your design tokens. The alternative — copy-paste libraries — gives you the source but leaves you maintaining it forever.
Roy UI takes the middle path. Components are RSC-safe out of the box and own their styles through tree-shakable side-effect imports, so there is no Tailwind config to wire up and no global CSS to leak. You can npm install them as a versioned dependency, or use the CLI to copy the source in when you need full control. Two distribution models, one library.
What's in the library
10 components ship today, with more in progress:
- GradientButton — Animated gradient CTA with built-in loading state.
- Button — Solid button with depth you feel more than see.
- Popover — Click-toggled info panel with animated tail and dismiss handling.
- MadeBy — Floating credit badge with author name and portfolio link.
- TextMorph — Text that diff-types between values with human-feeling jitter.
- TreeNav — Sidebar sub-nav with file-explorer L-branch connectors.
- DataTable — A generic, fully-featured data table — search, range, time, sort, paginate, reorder, resize, hide, import, export.
- UploadFiles — Drag-and-drop uploader with morphing, shimmering progress.
- Card — Listing card with a swipeable, dot-paginated gallery.
- StatCard — Compact KPI tile with an inline sparkline and trend chip.
How does Roy UI compare to shadcn/ui, Aceternity UI, and Magic UI?
shadcn/ui is a copy-in collection of unstyled Radix primitives — excellent foundations, but you build the motion and polish yourself. Aceternity UI and Magic UI ship the eye-catching animations but lean on Framer Motion and Tailwind and often need adapting for Server Components. Roy UI sits between them: motion is built in like Aceternity, but components are RSC-safe, dependency-light, and own their styles like shadcn — and you can still install from npm or copy the source. It is a practical alternative when you want animated components that just drop into a Next.js 15 app.
Which frameworks does Roy UI support?
Roy UI works with any React 18 or 19 setup. It is tested against Next.js App Router (including Server Components), TanStack Start, Vite, Remix, and Astro's React islands. Components forward refs and spread every native HTML attribute, so onClick, aria-*, data-*, and ref all behave exactly as you expect.
Is Roy UI free?
Yes. Roy UI is MIT licensed and free to use in personal and commercial projects, with no sign-up and no paid tier. The source lives on GitHub and ships to npm as @roy-ui/ui.
Who builds Roy UI?
Roy UI is built and maintained by Dibbayajyoti Roy and contributors. It is part of a small family of open-source developer tools — alongside other projects on the same portfolio. Issues, pull requests, and feature requests are welcome on the GitHub repo.
Get started
Install the package and import the first component:
npm install @roy-ui/ui