@roy-ui/ui 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -0
- package/package.json +44 -2
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# @roy-ui/ui
|
|
2
|
+
|
|
3
|
+
> Free, animated React components built with TypeScript. Zero config, RSC-safe, sub-12 KB.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@roy-ui/ui)
|
|
6
|
+
[](https://www.npmjs.com/package/@roy-ui/ui)
|
|
7
|
+
[](https://bundlephobia.com/package/@roy-ui/ui)
|
|
8
|
+
[](https://www.npmjs.com/package/@roy-ui/ui)
|
|
9
|
+
[](https://github.com/DibbayajyotiRoy/RoyUI/blob/main/LICENSE)
|
|
10
|
+
|
|
11
|
+
**[▶ Watch the 30-second demo on GitHub](https://github.com/DibbayajyotiRoy/RoyUI/blob/main/apps/docs/lib/demo/linkedin2.mp4)**
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## What is it?
|
|
16
|
+
|
|
17
|
+
`@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.
|
|
18
|
+
|
|
19
|
+
- **Zero runtime config** — install, import, render.
|
|
20
|
+
- **Tree-shakable ESM** with first-class TypeScript types and source maps.
|
|
21
|
+
- **Self-contained CSS** — no Tailwind plugin, no PostCSS, no theme provider.
|
|
22
|
+
- **RSC-safe** — components are correctly marked `"use client"` inside the bundle.
|
|
23
|
+
- **Tiny** — the whole library is under 12 KB minified + gzipped.
|
|
24
|
+
|
|
25
|
+
## Install
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @roy-ui/ui
|
|
29
|
+
# or
|
|
30
|
+
pnpm add @roy-ui/ui
|
|
31
|
+
# or
|
|
32
|
+
yarn add @roy-ui/ui
|
|
33
|
+
# or
|
|
34
|
+
bun add @roy-ui/ui
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Requires React 18 or newer.
|
|
38
|
+
|
|
39
|
+
## Quick start
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import {
|
|
43
|
+
GradientButton,
|
|
44
|
+
Popover,
|
|
45
|
+
TextMorph,
|
|
46
|
+
MadeBy,
|
|
47
|
+
} from '@roy-ui/ui';
|
|
48
|
+
|
|
49
|
+
export default function Hero() {
|
|
50
|
+
return (
|
|
51
|
+
<main>
|
|
52
|
+
<TextMorph value="Hello, world." />
|
|
53
|
+
|
|
54
|
+
<GradientButton loading={false}>
|
|
55
|
+
Get started
|
|
56
|
+
</GradientButton>
|
|
57
|
+
|
|
58
|
+
<Popover label="Help" title="Need a hand?" align="right" width="md">
|
|
59
|
+
<p>Read the docs, ping the maintainer, or open an issue.</p>
|
|
60
|
+
</Popover>
|
|
61
|
+
|
|
62
|
+
<MadeBy
|
|
63
|
+
name="Dibbayajyoti"
|
|
64
|
+
href="https://github.com/DibbayajyotiRoy"
|
|
65
|
+
position="bottom-right"
|
|
66
|
+
/>
|
|
67
|
+
</main>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
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.
|
|
73
|
+
|
|
74
|
+
## Components
|
|
75
|
+
|
|
76
|
+
| Component | What it does |
|
|
77
|
+
| --- | --- |
|
|
78
|
+
| **`GradientButton`** | Animated blue–cyan gradient button with a built-in spinner. Props: `loading`, `loadingLabel`, `fullWidth`. |
|
|
79
|
+
| **`Popover`** | Accessible click-to-open popover with corner alignment (`left`/`right`) and width presets (`sm`/`md`/`lg`/number). |
|
|
80
|
+
| **`TextMorph`** | Character-by-character text diff animation. Great for live counters, currency tickers, and status text. |
|
|
81
|
+
| **`MadeBy`** | Floating "Made by ___" attribution badge with corner positioning. |
|
|
82
|
+
|
|
83
|
+
## Why use this?
|
|
84
|
+
|
|
85
|
+
| | `@roy-ui/ui` | Radix / Headless UI | shadcn/ui |
|
|
86
|
+
| --- | --- | --- | --- |
|
|
87
|
+
| Ships visual styles | Yes | No | Yes (copy-paste) |
|
|
88
|
+
| One install (no CLI, no copy) | Yes | Yes | No |
|
|
89
|
+
| RSC-safe out of the box | Yes | Manual | Yes |
|
|
90
|
+
| Tailwind required | No | No | Yes |
|
|
91
|
+
| Animation built in | Yes | No | Sometimes |
|
|
92
|
+
|
|
93
|
+
## Links
|
|
94
|
+
|
|
95
|
+
- **Source code:** https://github.com/DibbayajyotiRoy/RoyUI
|
|
96
|
+
- **Issues:** https://github.com/DibbayajyotiRoy/RoyUI/issues
|
|
97
|
+
- **Releases:** https://github.com/DibbayajyotiRoy/RoyUI/releases
|
|
98
|
+
- **Demo video:** https://github.com/DibbayajyotiRoy/RoyUI/blob/main/apps/docs/lib/demo/linkedin2.mp4
|
|
99
|
+
|
|
100
|
+
## License
|
|
101
|
+
|
|
102
|
+
[MIT](https://github.com/DibbayajyotiRoy/RoyUI/blob/main/LICENSE) © [Dibbayajyoti Roy](https://github.com/DibbayajyotiRoy)
|
package/package.json
CHANGED
|
@@ -1,7 +1,49 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roy-ui/ui",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"description": "Free, animated React components built with TypeScript. Zero config, RSC-safe, sub-12 KB. Gradient button, popover, text morph and more.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"react",
|
|
7
|
+
"react-components",
|
|
8
|
+
"react-component-library",
|
|
9
|
+
"react-ui",
|
|
10
|
+
"react-ui-library",
|
|
11
|
+
"ui",
|
|
12
|
+
"ui-library",
|
|
13
|
+
"ui-kit",
|
|
14
|
+
"component-library",
|
|
15
|
+
"components",
|
|
16
|
+
"design-system",
|
|
17
|
+
"typescript",
|
|
18
|
+
"esm",
|
|
19
|
+
"tree-shakable",
|
|
20
|
+
"nextjs",
|
|
21
|
+
"next",
|
|
22
|
+
"react-server-components",
|
|
23
|
+
"rsc",
|
|
24
|
+
"use-client",
|
|
25
|
+
"animation",
|
|
26
|
+
"animated",
|
|
27
|
+
"micro-interactions",
|
|
28
|
+
"gradient",
|
|
29
|
+
"gradient-button",
|
|
30
|
+
"button",
|
|
31
|
+
"popover",
|
|
32
|
+
"tooltip",
|
|
33
|
+
"text-animation",
|
|
34
|
+
"text-morph",
|
|
35
|
+
"text-effect",
|
|
36
|
+
"made-by",
|
|
37
|
+
"attribution-badge",
|
|
38
|
+
"frontend",
|
|
39
|
+
"open-source",
|
|
40
|
+
"free",
|
|
41
|
+
"tailwind-friendly"
|
|
42
|
+
],
|
|
43
|
+
"author": {
|
|
44
|
+
"name": "Dibbayajyoti Roy",
|
|
45
|
+
"url": "https://github.com/DibbayajyotiRoy"
|
|
46
|
+
},
|
|
5
47
|
"license": "MIT",
|
|
6
48
|
"type": "module",
|
|
7
49
|
"repository": {
|