virtual-ui-lib 1.0.72 → 1.0.74
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 +247 -108
- package/dist/index.js +469 -2
- package/dist/index.mjs +466 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Virtual UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A modern and customizable **React UI Component Library** designed for fast development and clean design systems.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
## Install
|
|
7
|
+
## 📦 Install
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install virtual-ui-lib
|
|
@@ -12,209 +12,348 @@ npm install virtual-ui-lib
|
|
|
12
12
|
|
|
13
13
|
---
|
|
14
14
|
|
|
15
|
-
## Usage
|
|
15
|
+
## 🚀 Usage
|
|
16
16
|
|
|
17
17
|
```jsx
|
|
18
18
|
import {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
Spinner,
|
|
26
|
-
Modal
|
|
19
|
+
Navbar,
|
|
20
|
+
Sidebar,
|
|
21
|
+
AvatarCard,
|
|
22
|
+
PricingCard,
|
|
23
|
+
Loader,
|
|
24
|
+
OTPInput
|
|
27
25
|
} from "virtual-ui-lib"
|
|
28
26
|
|
|
29
27
|
function App() {
|
|
30
28
|
return (
|
|
31
29
|
<>
|
|
32
|
-
<
|
|
30
|
+
<Navbar />
|
|
31
|
+
<Sidebar />
|
|
32
|
+
|
|
33
|
+
<div style={{ padding: "20px" }}>
|
|
34
|
+
<AvatarCard />
|
|
35
|
+
<PricingCard />
|
|
36
|
+
<OTPInput />
|
|
37
|
+
<Loader />
|
|
38
|
+
</div>
|
|
39
|
+
</>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
---
|
|
33
45
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
46
|
+
# 🧩 Components
|
|
47
|
+
|
|
48
|
+
Virtual UI includes the following components:
|
|
49
|
+
|
|
50
|
+
* AvatarCard
|
|
51
|
+
* BackgroundImageSlider
|
|
52
|
+
* Charts
|
|
53
|
+
* ColorPicker
|
|
54
|
+
* FileUpload
|
|
55
|
+
* Footer
|
|
56
|
+
* ImageCard
|
|
57
|
+
* ImageSlider
|
|
58
|
+
* InvoiceCard
|
|
59
|
+
* Loader
|
|
60
|
+
* Navbar
|
|
61
|
+
* NotificationToast
|
|
62
|
+
* OTPInput
|
|
63
|
+
* PageLoader
|
|
64
|
+
* PricingCard
|
|
65
|
+
* RatingStars
|
|
66
|
+
* Sidebar
|
|
37
67
|
|
|
38
|
-
|
|
68
|
+
---
|
|
39
69
|
|
|
40
|
-
|
|
70
|
+
# 📘 Component Details
|
|
41
71
|
|
|
42
|
-
|
|
72
|
+
---
|
|
43
73
|
|
|
44
|
-
|
|
74
|
+
## AvatarCard
|
|
45
75
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
)
|
|
49
|
-
}
|
|
76
|
+
```jsx
|
|
77
|
+
<AvatarCard />
|
|
50
78
|
```
|
|
51
79
|
|
|
80
|
+
### Props
|
|
81
|
+
|
|
82
|
+
| Prop | Description |
|
|
83
|
+
| ----- | ------------ |
|
|
84
|
+
| name | User name |
|
|
85
|
+
| image | Avatar image |
|
|
86
|
+
| role | User role |
|
|
87
|
+
| size | Card size |
|
|
88
|
+
|
|
52
89
|
---
|
|
53
90
|
|
|
54
|
-
|
|
91
|
+
## Navbar
|
|
92
|
+
|
|
93
|
+
```jsx
|
|
94
|
+
<Navbar />
|
|
95
|
+
```
|
|
55
96
|
|
|
56
|
-
|
|
97
|
+
### Props
|
|
57
98
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
* Avatar
|
|
64
|
-
* Spinner
|
|
65
|
-
* Modal
|
|
99
|
+
| Prop | Description |
|
|
100
|
+
| ----- | ---------------- |
|
|
101
|
+
| logo | Logo text/image |
|
|
102
|
+
| links | Navigation links |
|
|
103
|
+
| fixed | Sticky navbar |
|
|
66
104
|
|
|
67
105
|
---
|
|
68
106
|
|
|
69
|
-
|
|
107
|
+
## Sidebar
|
|
70
108
|
|
|
71
109
|
```jsx
|
|
72
|
-
<
|
|
110
|
+
<Sidebar />
|
|
73
111
|
```
|
|
74
112
|
|
|
75
113
|
### Props
|
|
76
114
|
|
|
77
|
-
| Prop
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
| color | Text color |
|
|
82
|
-
| size | sm / md / lg |
|
|
83
|
-
| width | Button width |
|
|
84
|
-
| radius | Border radius |
|
|
85
|
-
| shadow | Box shadow |
|
|
86
|
-
| disabled | Disable button |
|
|
87
|
-
| icon | Add icon |
|
|
115
|
+
| Prop | Description |
|
|
116
|
+
| --------- | -------------- |
|
|
117
|
+
| items | Sidebar items |
|
|
118
|
+
| collapsed | Collapse state |
|
|
88
119
|
|
|
89
120
|
---
|
|
90
121
|
|
|
91
|
-
|
|
122
|
+
## PricingCard
|
|
92
123
|
|
|
93
124
|
```jsx
|
|
94
|
-
<
|
|
125
|
+
<PricingCard />
|
|
95
126
|
```
|
|
96
127
|
|
|
97
128
|
### Props
|
|
98
129
|
|
|
99
|
-
| Prop
|
|
100
|
-
|
|
|
101
|
-
| title
|
|
102
|
-
|
|
|
103
|
-
|
|
|
104
|
-
|
|
|
105
|
-
| shadow | Box shadow |
|
|
106
|
-
| children | Extra content inside card |
|
|
130
|
+
| Prop | Description |
|
|
131
|
+
| ----------- | ---------------- |
|
|
132
|
+
| title | Plan name |
|
|
133
|
+
| price | Plan price |
|
|
134
|
+
| features | List of features |
|
|
135
|
+
| highlighted | Highlight plan |
|
|
107
136
|
|
|
108
137
|
---
|
|
109
138
|
|
|
110
|
-
|
|
139
|
+
## OTPInput
|
|
111
140
|
|
|
112
141
|
```jsx
|
|
113
|
-
<
|
|
142
|
+
<OTPInput length={6} />
|
|
114
143
|
```
|
|
115
144
|
|
|
116
145
|
### Props
|
|
117
146
|
|
|
118
|
-
| Prop
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
| radius | Border radius |
|
|
123
|
-
| shadow | Box shadow |
|
|
124
|
-
| value | Input value |
|
|
125
|
-
| onChange | Input change handler |
|
|
147
|
+
| Prop | Description |
|
|
148
|
+
| -------- | ------------------ |
|
|
149
|
+
| length | Number of digits |
|
|
150
|
+
| onChange | OTP change handler |
|
|
126
151
|
|
|
127
152
|
---
|
|
128
153
|
|
|
129
|
-
|
|
154
|
+
## Loader
|
|
130
155
|
|
|
131
156
|
```jsx
|
|
132
|
-
<
|
|
157
|
+
<Loader />
|
|
133
158
|
```
|
|
134
159
|
|
|
135
160
|
### Props
|
|
136
161
|
|
|
137
|
-
| Prop | Description
|
|
138
|
-
| ----- |
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
| color | Text color |
|
|
162
|
+
| Prop | Description |
|
|
163
|
+
| ----- | ------------ |
|
|
164
|
+
| size | Loader size |
|
|
165
|
+
| color | Loader color |
|
|
142
166
|
|
|
143
167
|
---
|
|
144
168
|
|
|
145
|
-
|
|
169
|
+
## NotificationToast
|
|
146
170
|
|
|
147
171
|
```jsx
|
|
148
|
-
<
|
|
172
|
+
<NotificationToast message="Saved!" />
|
|
149
173
|
```
|
|
150
174
|
|
|
151
175
|
### Props
|
|
152
176
|
|
|
153
|
-
| Prop
|
|
154
|
-
|
|
|
155
|
-
|
|
|
156
|
-
|
|
|
157
|
-
|
|
177
|
+
| Prop | Description |
|
|
178
|
+
| ------- | ---------------------- |
|
|
179
|
+
| message | Toast text |
|
|
180
|
+
| type | success / error / info |
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
## Charts
|
|
185
|
+
|
|
186
|
+
```jsx
|
|
187
|
+
<Charts />
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Props
|
|
191
|
+
|
|
192
|
+
| Prop | Description |
|
|
193
|
+
| ---- | ---------------- |
|
|
194
|
+
| type | bar / line / pie |
|
|
195
|
+
| data | Chart data |
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
## ColorPicker
|
|
200
|
+
|
|
201
|
+
```jsx
|
|
202
|
+
<ColorPicker />
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### Props
|
|
206
|
+
|
|
207
|
+
| Prop | Description |
|
|
208
|
+
| -------- | -------------- |
|
|
209
|
+
| value | Selected color |
|
|
210
|
+
| onChange | Change handler |
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
## FileUpload
|
|
215
|
+
|
|
216
|
+
```jsx
|
|
217
|
+
<FileUpload />
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
### Props
|
|
221
|
+
|
|
222
|
+
| Prop | Description |
|
|
223
|
+
| -------- | -------------------- |
|
|
224
|
+
| onUpload | Upload handler |
|
|
225
|
+
| multiple | Allow multiple files |
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## ImageCard
|
|
230
|
+
|
|
231
|
+
```jsx
|
|
232
|
+
<ImageCard />
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
### Props
|
|
236
|
+
|
|
237
|
+
| Prop | Description |
|
|
238
|
+
| ----- | ------------ |
|
|
239
|
+
| src | Image source |
|
|
240
|
+
| title | Image title |
|
|
241
|
+
|
|
242
|
+
---
|
|
243
|
+
|
|
244
|
+
## ImageSlider
|
|
245
|
+
|
|
246
|
+
```jsx
|
|
247
|
+
<ImageSlider />
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
### Props
|
|
251
|
+
|
|
252
|
+
| Prop | Description |
|
|
253
|
+
| -------- | ----------- |
|
|
254
|
+
| images | Image array |
|
|
255
|
+
| autoPlay | Auto slide |
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
## BackgroundImageSlider
|
|
260
|
+
|
|
261
|
+
```jsx
|
|
262
|
+
<BackgroundImageSlider />
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
### Props
|
|
266
|
+
|
|
267
|
+
| Prop | Description |
|
|
268
|
+
| ------- | ----------------- |
|
|
269
|
+
| images | Background images |
|
|
270
|
+
| overlay | Overlay color |
|
|
271
|
+
|
|
272
|
+
---
|
|
273
|
+
|
|
274
|
+
## InvoiceCard
|
|
275
|
+
|
|
276
|
+
```jsx
|
|
277
|
+
<InvoiceCard />
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
### Props
|
|
281
|
+
|
|
282
|
+
| Prop | Description |
|
|
283
|
+
| --------- | -------------- |
|
|
284
|
+
| invoiceId | Invoice ID |
|
|
285
|
+
| amount | Amount |
|
|
286
|
+
| status | Paid / Pending |
|
|
158
287
|
|
|
159
288
|
---
|
|
160
289
|
|
|
161
|
-
|
|
290
|
+
## RatingStars
|
|
162
291
|
|
|
163
292
|
```jsx
|
|
164
|
-
<
|
|
293
|
+
<RatingStars rating={4} />
|
|
165
294
|
```
|
|
166
295
|
|
|
167
296
|
### Props
|
|
168
297
|
|
|
169
|
-
| Prop
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
| radius | Border radius |
|
|
298
|
+
| Prop | Description |
|
|
299
|
+
| -------- | --------------- |
|
|
300
|
+
| rating | Number of stars |
|
|
301
|
+
| onChange | Change handler |
|
|
174
302
|
|
|
175
303
|
---
|
|
176
304
|
|
|
177
|
-
|
|
305
|
+
## PageLoader
|
|
178
306
|
|
|
179
307
|
```jsx
|
|
180
|
-
<
|
|
308
|
+
<PageLoader />
|
|
181
309
|
```
|
|
182
310
|
|
|
183
311
|
### Props
|
|
184
312
|
|
|
185
|
-
| Prop
|
|
186
|
-
|
|
|
187
|
-
|
|
|
188
|
-
| color | Spinner color |
|
|
189
|
-
| border | Border width |
|
|
313
|
+
| Prop | Description |
|
|
314
|
+
| ---------- | ---------------- |
|
|
315
|
+
| fullScreen | Full page loader |
|
|
190
316
|
|
|
191
317
|
---
|
|
192
318
|
|
|
193
|
-
|
|
319
|
+
## Footer
|
|
194
320
|
|
|
195
321
|
```jsx
|
|
196
|
-
<
|
|
197
|
-
Hello Modal
|
|
198
|
-
</Modal>
|
|
322
|
+
<Footer />
|
|
199
323
|
```
|
|
200
324
|
|
|
201
325
|
### Props
|
|
202
326
|
|
|
203
|
-
| Prop
|
|
204
|
-
|
|
|
205
|
-
|
|
|
206
|
-
|
|
|
207
|
-
|
|
208
|
-
|
|
327
|
+
| Prop | Description |
|
|
328
|
+
| ----- | ------------ |
|
|
329
|
+
| text | Footer text |
|
|
330
|
+
| links | Footer links |
|
|
331
|
+
|
|
332
|
+
---
|
|
333
|
+
|
|
334
|
+
# 🤝 Contributing
|
|
335
|
+
|
|
336
|
+
Contributions are welcome!
|
|
337
|
+
|
|
338
|
+
* Fork the repo
|
|
339
|
+
* Create a new branch
|
|
340
|
+
* Submit a pull request
|
|
209
341
|
|
|
210
342
|
---
|
|
211
343
|
|
|
212
|
-
#
|
|
344
|
+
# 📄 License
|
|
213
345
|
|
|
214
|
-
|
|
346
|
+
MIT License
|
|
215
347
|
|
|
216
348
|
---
|
|
217
349
|
|
|
218
|
-
#
|
|
350
|
+
# 💡 Future Improvements
|
|
351
|
+
|
|
352
|
+
* Theme system (dark/light mode)
|
|
353
|
+
* Animation presets
|
|
354
|
+
* Accessibility improvements
|
|
355
|
+
* More enterprise components
|
|
356
|
+
|
|
357
|
+
---
|
|
219
358
|
|
|
220
|
-
|
|
359
|
+
Made with ❤️ for developers
|