@roy-ui/ui

Free, animated React components built with TypeScript. Zero config, RSC-safe, sub-12 KB.

▶ Watch the 30-second demo on GitHub

What is it?

@roy-ui/ui is an open-source React component library focused on animated, micro-interactive UI primitives — gradient buttons, popovers, text-morph effects, attribution badges — written in TypeScript, shipped as tree-shakable ESM, and fully compatible with React Server Components, Next.js 15, Vite, Remix, and any modern React 18+ runtime.

• Zero runtime config — install, import, render.
• Tree-shakable ESM with first-class TypeScript types and source maps.
• Self-contained CSS — no Tailwind plugin, no PostCSS, no theme provider.
• RSC-safe — components are correctly marked "use client" inside the bundle.
• Tiny — the whole library is under 12 KB minified + gzipped.

Install

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

Requires React 18 or newer.

Quick start

import {
  GradientButton,
  Popover,
  TextMorph,
  MadeBy,
} from '@roy-ui/ui';

export default function Hero() {
  return (
    <main>
      <TextMorph value="Hello, world." />

      <GradientButton loading={false}>
        Get started
      </GradientButton>

      <Popover label="Help" title="Need a hand?" align="right" width="md">
        <p>Read the docs, ping the maintainer, or open an issue.</p>
      </Popover>

      <MadeBy
        name="Dibbayajyoti"
        href="https://github.com/DibbayajyotiRoy"
        position="bottom-right"
      />
    </main>
  );
}

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.

Components

Why use this?

Links

• Source code: https://github.com/DibbayajyotiRoy/RoyUI
• Issues: https://github.com/DibbayajyotiRoy/RoyUI/issues
• Releases: https://github.com/DibbayajyotiRoy/RoyUI/releases
• Demo video: https://github.com/DibbayajyotiRoy/RoyUI/blob/main/apps/docs/lib/demo/linkedin2.mp4

License

MIT © Dibbayajyoti Roy