@beyondcorp/beyond-ui 1.0.16 → 1.0.17
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 +15 -54
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,15 +31,18 @@ Beyond-UI is a comprehensive collection of ready-to-use, themeable React UI comp
|
|
|
31
31
|
|
|
32
32
|
---
|
|
33
33
|
|
|
34
|
-
##
|
|
34
|
+
## ⚡️ Getting Started (Import CSS, No Tailwind Config Required)
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
Beyond-UI now bundles a ready-to-use CSS file for all styling.
|
|
37
|
+
Just add this line to your app's entry file (e.g. main.tsx or index.js):
|
|
38
|
+
|
|
39
|
+
```js
|
|
40
|
+
import '@beyondcorp/beyond-ui/dist/styles.css';
|
|
40
41
|
```
|
|
41
42
|
|
|
42
|
-
You
|
|
43
|
+
- You do **not** need to configure Tailwind content scanning for the library.
|
|
44
|
+
- This CSS is built with [Tailwind CSS](https://tailwindcss.com/) for all components and utilities included in the library.
|
|
45
|
+
- If you want to customize theme tokens (e.g. primary, secondary), you can still extend Tailwind’s theme.
|
|
43
46
|
|
|
44
47
|
---
|
|
45
48
|
|
|
@@ -48,10 +51,10 @@ You must also have `react`, `react-dom`, and `tailwindcss` as peer dependencies.
|
|
|
48
51
|
Beyond-UI is **completely theme-agnostic**:
|
|
49
52
|
|
|
50
53
|
- Uses tokens like `bg-primary` not `bg-blue-500`.
|
|
51
|
-
- Pulls colors from the consumer project’s `tailwind.config.js
|
|
52
|
-
- Ships with a fallback default theme (`theme/default.ts`) for
|
|
54
|
+
- Pulls colors from the consumer project’s `tailwind.config.js` if you optionally add it and rebuild the CSS.
|
|
55
|
+
- Ships with a fallback default theme (`theme/default.ts`) for instant use.
|
|
53
56
|
|
|
54
|
-
To customize theme colors,
|
|
57
|
+
To customize theme colors, do this before running `npm run build:lib` in your fork:
|
|
55
58
|
|
|
56
59
|
```js
|
|
57
60
|
theme: {
|
|
@@ -66,8 +69,6 @@ theme: {
|
|
|
66
69
|
}
|
|
67
70
|
```
|
|
68
71
|
|
|
69
|
-
No configuration? The default theme covers you out of the box.
|
|
70
|
-
|
|
71
72
|
---
|
|
72
73
|
|
|
73
74
|
## 🧩 Components
|
|
@@ -118,6 +119,7 @@ No configuration? The default theme covers you out of the box.
|
|
|
118
119
|
|
|
119
120
|
```tsx
|
|
120
121
|
import { Button, Card, useBreakpoint } from '@beyondcorp/beyond-ui';
|
|
122
|
+
import '@beyondcorp/beyond-ui/dist/styles.css';
|
|
121
123
|
|
|
122
124
|
export default function Demo() {
|
|
123
125
|
const { isAbove } = useBreakpoint();
|
|
@@ -133,29 +135,6 @@ export default function Demo() {
|
|
|
133
135
|
|
|
134
136
|
---
|
|
135
137
|
|
|
136
|
-
## ⚡️ Getting Started (Tailwind Setup)
|
|
137
|
-
|
|
138
|
-
1. **Configure Tailwind in your app:**
|
|
139
|
-
Extend the `content` array in `tailwind.config.js`:
|
|
140
|
-
|
|
141
|
-
```js
|
|
142
|
-
content: [
|
|
143
|
-
"./src/**/*.{js,ts,jsx,tsx}",
|
|
144
|
-
"./node_modules/@beyondcorp/beyond-ui/dist/components/**/*.{js,jsx}"
|
|
145
|
-
]
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
2. **Import Tailwind CSS:**
|
|
149
|
-
In your app entry (`src/main.tsx` or `index.js`):
|
|
150
|
-
```js
|
|
151
|
-
import './index.css'; // or your Tailwind stylesheet
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
3. **(Optional) Extend Theme:**
|
|
155
|
-
Define or override theme tokens for your brand.
|
|
156
|
-
|
|
157
|
-
---
|
|
158
|
-
|
|
159
138
|
## 📖 Documentation & Storybook
|
|
160
139
|
|
|
161
140
|
Every component and hook has a demo, props table, variant showcase, and usage guide—launch Storybook locally, or check the online docs (URL).
|
|
@@ -165,14 +144,6 @@ Every component and hook has a demo, props table, variant showcase, and usage gu
|
|
|
165
144
|
|
|
166
145
|
---
|
|
167
146
|
|
|
168
|
-
## 🧪 Testing & CI
|
|
169
|
-
|
|
170
|
-
- Automated unit tests with Jest + React Testing Library
|
|
171
|
-
- Snapshot and accessibility tests
|
|
172
|
-
- See `/tests` directory for sample tests
|
|
173
|
-
|
|
174
|
-
---
|
|
175
|
-
|
|
176
147
|
## 🛠 Project Structure
|
|
177
148
|
|
|
178
149
|
```
|
|
@@ -203,8 +174,7 @@ beyond-ui/
|
|
|
203
174
|
- M5: Complete Jest test coverage & accessibility
|
|
204
175
|
- M6: npm package v1 stable release
|
|
205
176
|
- M7: Dashboard, charts, advanced table, improved theming
|
|
206
|
-
|
|
207
|
-
See `roadmap.md` for complete breakdown.
|
|
177
|
+
- See roadmap.md for complete breakdown.
|
|
208
178
|
|
|
209
179
|
---
|
|
210
180
|
|
|
@@ -221,13 +191,4 @@ MIT © Beyond Corp, Soi Technology Solutions 2025
|
|
|
221
191
|
|
|
222
192
|
---
|
|
223
193
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
- initialprompt.md, roadmap.md, technicalspecification.md (see repo)
|
|
227
|
-
- [TailwindCSS](https://tailwindcss.com/docs)
|
|
228
|
-
- [class-variance-authority](https://cva.style/)
|
|
229
|
-
- [Storybook](https://storybook.js.org/)
|
|
230
|
-
|
|
231
|
-
---
|
|
232
|
-
|
|
233
|
-
# Beyond-UI: Build clean, scalable UIs faster, with every detail documented and ready to use.
|
|
194
|
+
# Beyond-UI: Build clean, scalable UIs faster, with every detail documented and ready to use.
|