@hexdspace/react 0.1.0 → 0.1.2
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 +80 -0
- package/dist/css/base-theme.css +101 -1704
- package/dist/css/entry.css +2 -0
- package/dist/index.js +1 -1
- package/package.json +2 -3
package/README.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# @hexdspace/react
|
|
2
|
+
|
|
3
|
+
React basic features, UI components plus a Tailwind v4-compatible theme CSS.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @hexdspace/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer dependencies (install in your app):
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
pnpm add react react-dom react-router-dom radix-ui lucide-react react-toastify @tanstack/react-query
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Tailwind requirements (for the theme + utilities):
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
pnpm add -D tailwindcss @tailwindcss/postcss tailwind-scrollbar
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
Import the theme into your Tailwind entry stylesheet and specify tailwind config:
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
/* src/index.css */
|
|
29
|
+
@import "@hexdspace/react/css";
|
|
30
|
+
@config "../tailwind.config.ts"; /* adjust path if needed */
|
|
31
|
+
|
|
32
|
+
/* Your app styles */
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Tailwind config
|
|
36
|
+
|
|
37
|
+
Point Tailwind at this package so it can generate utilities used by the components.
|
|
38
|
+
|
|
39
|
+
For a published package:
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
// tailwind.config.js (app)
|
|
43
|
+
export default {
|
|
44
|
+
content: [
|
|
45
|
+
"./index.html",
|
|
46
|
+
"./src/**/*.{ts,tsx,js,jsx}",
|
|
47
|
+
"./node_modules/@hexdspace/react/dist/**/*.{js,ts,tsx}",
|
|
48
|
+
],
|
|
49
|
+
theme: {
|
|
50
|
+
extend: {},
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
For a monorepo/workspace:
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
// tailwind.config.js (app)
|
|
59
|
+
export default {
|
|
60
|
+
content: [
|
|
61
|
+
"./index.html",
|
|
62
|
+
"./src/**/*.{ts,tsx,js,jsx}",
|
|
63
|
+
"../packages/react/src/**/*.{ts,tsx}",
|
|
64
|
+
],
|
|
65
|
+
};
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Component usage
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import { Button } from "@hexdspace/react";
|
|
72
|
+
|
|
73
|
+
export function Example() {
|
|
74
|
+
return (
|
|
75
|
+
<Button variant="outline" chrome="push">
|
|
76
|
+
Click me
|
|
77
|
+
</Button>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|