galaxy-design 0.2.70 → 0.2.71
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/dist/registries/registry-angular.json +5299 -111
- package/dist/registries/registry-flutter.json +3842 -17
- package/dist/registries/registry-react-native.json +7289 -130
- package/dist/registries/registry-react.json +8950 -63
- package/dist/registries/registry-vue.json +7563 -61
- package/dist/registry-angular.json +6347 -0
- package/dist/registry-flutter.json +4667 -0
- package/dist/registry-react-native.json +8150 -0
- package/dist/registry-react.json +9912 -0
- package/dist/registry-vue.json +8495 -0
- package/dist/registry.json +610 -88
- package/dist/schemas/registry-framework-schema.json +131 -0
- package/dist/schemas/registry-summary-schema.json +177 -0
- package/dist/utils/registry.js +8 -8
- package/dist/utils/registry.js.map +1 -1
- package/package.json +3 -2
package/dist/registry.json
CHANGED
|
@@ -4,457 +4,970 @@
|
|
|
4
4
|
"name": "Button",
|
|
5
5
|
"type": "form",
|
|
6
6
|
"description": "Displays a button or a component that looks like a button",
|
|
7
|
-
"category": "form"
|
|
7
|
+
"category": "form",
|
|
8
|
+
"frameworks": [
|
|
9
|
+
"react",
|
|
10
|
+
"nextjs",
|
|
11
|
+
"vue",
|
|
12
|
+
"nuxtjs",
|
|
13
|
+
"angular",
|
|
14
|
+
"react-native",
|
|
15
|
+
"flutter"
|
|
16
|
+
]
|
|
8
17
|
},
|
|
9
18
|
"input": {
|
|
10
19
|
"name": "Input",
|
|
11
20
|
"type": "form",
|
|
12
21
|
"description": "Displays a form input field or a component that looks like an input field",
|
|
13
|
-
"category": "form"
|
|
22
|
+
"category": "form",
|
|
23
|
+
"frameworks": [
|
|
24
|
+
"react",
|
|
25
|
+
"nextjs",
|
|
26
|
+
"vue",
|
|
27
|
+
"nuxtjs",
|
|
28
|
+
"angular",
|
|
29
|
+
"react-native",
|
|
30
|
+
"flutter"
|
|
31
|
+
]
|
|
14
32
|
},
|
|
15
33
|
"label": {
|
|
16
34
|
"name": "Label",
|
|
17
35
|
"type": "form",
|
|
18
36
|
"description": "Renders an accessible label associated with controls",
|
|
19
|
-
"category": "form"
|
|
37
|
+
"category": "form",
|
|
38
|
+
"frameworks": [
|
|
39
|
+
"react",
|
|
40
|
+
"nextjs",
|
|
41
|
+
"vue",
|
|
42
|
+
"nuxtjs",
|
|
43
|
+
"angular",
|
|
44
|
+
"react-native",
|
|
45
|
+
"flutter"
|
|
46
|
+
]
|
|
20
47
|
},
|
|
21
48
|
"select": {
|
|
22
49
|
"name": "Select",
|
|
23
50
|
"type": "form",
|
|
24
51
|
"description": "Displays a list of options for the user to pick from triggered by a button",
|
|
25
|
-
"category": "form"
|
|
52
|
+
"category": "form",
|
|
53
|
+
"frameworks": [
|
|
54
|
+
"react",
|
|
55
|
+
"nextjs",
|
|
56
|
+
"vue",
|
|
57
|
+
"nuxtjs",
|
|
58
|
+
"angular",
|
|
59
|
+
"react-native",
|
|
60
|
+
"flutter"
|
|
61
|
+
]
|
|
26
62
|
},
|
|
27
63
|
"checkbox": {
|
|
28
64
|
"name": "Checkbox",
|
|
29
65
|
"type": "form",
|
|
30
66
|
"description": "A control that allows the user to toggle between checked and not checked",
|
|
31
|
-
"category": "form"
|
|
67
|
+
"category": "form",
|
|
68
|
+
"frameworks": [
|
|
69
|
+
"react",
|
|
70
|
+
"nextjs",
|
|
71
|
+
"vue",
|
|
72
|
+
"nuxtjs",
|
|
73
|
+
"angular",
|
|
74
|
+
"react-native",
|
|
75
|
+
"flutter"
|
|
76
|
+
]
|
|
32
77
|
},
|
|
33
78
|
"radio-group": {
|
|
34
79
|
"name": "Radio Group",
|
|
35
80
|
"type": "form",
|
|
36
|
-
"description": "A set of checkable buttons where
|
|
37
|
-
"category": "form"
|
|
81
|
+
"description": "A set of checkable buttons where only one can be selected at a time",
|
|
82
|
+
"category": "form",
|
|
83
|
+
"frameworks": [
|
|
84
|
+
"react",
|
|
85
|
+
"nextjs",
|
|
86
|
+
"vue",
|
|
87
|
+
"nuxtjs",
|
|
88
|
+
"angular",
|
|
89
|
+
"react-native",
|
|
90
|
+
"flutter"
|
|
91
|
+
]
|
|
38
92
|
},
|
|
39
93
|
"switch": {
|
|
40
94
|
"name": "Switch",
|
|
41
95
|
"type": "form",
|
|
42
96
|
"description": "A control that allows the user to toggle between checked and not checked",
|
|
43
|
-
"category": "form"
|
|
97
|
+
"category": "form",
|
|
98
|
+
"frameworks": [
|
|
99
|
+
"react",
|
|
100
|
+
"nextjs",
|
|
101
|
+
"vue",
|
|
102
|
+
"nuxtjs",
|
|
103
|
+
"angular",
|
|
104
|
+
"react-native",
|
|
105
|
+
"flutter"
|
|
106
|
+
]
|
|
44
107
|
},
|
|
45
108
|
"slider": {
|
|
46
109
|
"name": "Slider",
|
|
47
110
|
"type": "form",
|
|
48
111
|
"description": "An input where the user selects a value from within a given range",
|
|
49
|
-
"category": "form"
|
|
112
|
+
"category": "form",
|
|
113
|
+
"frameworks": [
|
|
114
|
+
"react",
|
|
115
|
+
"nextjs",
|
|
116
|
+
"vue",
|
|
117
|
+
"nuxtjs",
|
|
118
|
+
"angular",
|
|
119
|
+
"react-native",
|
|
120
|
+
"flutter"
|
|
121
|
+
]
|
|
50
122
|
},
|
|
51
123
|
"textarea": {
|
|
52
124
|
"name": "Textarea",
|
|
53
125
|
"type": "form",
|
|
54
126
|
"description": "Displays a form textarea or a component that looks like a textarea",
|
|
55
|
-
"category": "form"
|
|
127
|
+
"category": "form",
|
|
128
|
+
"frameworks": [
|
|
129
|
+
"react",
|
|
130
|
+
"nextjs",
|
|
131
|
+
"vue",
|
|
132
|
+
"nuxtjs",
|
|
133
|
+
"angular",
|
|
134
|
+
"react-native",
|
|
135
|
+
"flutter"
|
|
136
|
+
]
|
|
56
137
|
},
|
|
57
138
|
"form": {
|
|
58
139
|
"name": "Form",
|
|
59
140
|
"type": "form",
|
|
60
141
|
"description": "Building forms with proper validation and accessibility",
|
|
61
|
-
"category": "form"
|
|
142
|
+
"category": "form",
|
|
143
|
+
"frameworks": [
|
|
144
|
+
"react",
|
|
145
|
+
"nextjs",
|
|
146
|
+
"vue",
|
|
147
|
+
"nuxtjs",
|
|
148
|
+
"angular"
|
|
149
|
+
]
|
|
62
150
|
},
|
|
63
151
|
"rate": {
|
|
64
152
|
"name": "Rate",
|
|
65
153
|
"type": "form",
|
|
66
154
|
"description": "Star rating with half star support",
|
|
67
|
-
"category": "form"
|
|
155
|
+
"category": "form",
|
|
156
|
+
"frameworks": []
|
|
68
157
|
},
|
|
69
158
|
"button-group": {
|
|
70
159
|
"name": "Button Group",
|
|
71
160
|
"type": "form",
|
|
72
161
|
"description": "Button group with single/multiple selection",
|
|
73
|
-
"category": "form"
|
|
162
|
+
"category": "form",
|
|
163
|
+
"frameworks": []
|
|
74
164
|
},
|
|
75
165
|
"autocomplete": {
|
|
76
166
|
"name": "Autocomplete",
|
|
77
167
|
"type": "form",
|
|
78
168
|
"description": "Autocomplete input with search and suggestions",
|
|
79
|
-
"category": "form"
|
|
169
|
+
"category": "form",
|
|
170
|
+
"frameworks": []
|
|
80
171
|
},
|
|
81
172
|
"calendar": {
|
|
82
173
|
"name": "Calendar",
|
|
83
174
|
"type": "form",
|
|
84
175
|
"description": "Full-featured date picker",
|
|
85
|
-
"category": "form"
|
|
176
|
+
"category": "form",
|
|
177
|
+
"frameworks": [
|
|
178
|
+
"react",
|
|
179
|
+
"nextjs",
|
|
180
|
+
"vue",
|
|
181
|
+
"nuxtjs",
|
|
182
|
+
"angular"
|
|
183
|
+
]
|
|
86
184
|
},
|
|
87
185
|
"calendar-range": {
|
|
88
186
|
"name": "Calendar Range",
|
|
89
187
|
"type": "form",
|
|
90
188
|
"description": "Date range picker with start and end dates",
|
|
91
|
-
"category": "form"
|
|
189
|
+
"category": "form",
|
|
190
|
+
"frameworks": [
|
|
191
|
+
"react",
|
|
192
|
+
"nextjs",
|
|
193
|
+
"vue",
|
|
194
|
+
"nuxtjs",
|
|
195
|
+
"angular"
|
|
196
|
+
]
|
|
92
197
|
},
|
|
93
198
|
"date-picker": {
|
|
94
199
|
"name": "Date Picker",
|
|
95
200
|
"type": "form",
|
|
96
201
|
"description": "A date picker component with popover and calendar",
|
|
97
|
-
"category": "form"
|
|
202
|
+
"category": "form",
|
|
203
|
+
"frameworks": [
|
|
204
|
+
"react",
|
|
205
|
+
"nextjs",
|
|
206
|
+
"react-native",
|
|
207
|
+
"flutter"
|
|
208
|
+
]
|
|
98
209
|
},
|
|
99
210
|
"date-range-picker": {
|
|
100
211
|
"name": "Date Range Picker",
|
|
101
212
|
"type": "form",
|
|
102
213
|
"description": "A date range picker component with popover and calendar range",
|
|
103
|
-
"category": "form"
|
|
214
|
+
"category": "form",
|
|
215
|
+
"frameworks": [
|
|
216
|
+
"react",
|
|
217
|
+
"nextjs"
|
|
218
|
+
]
|
|
104
219
|
},
|
|
105
220
|
"time-picker": {
|
|
106
221
|
"name": "Time Picker",
|
|
107
222
|
"type": "form",
|
|
108
223
|
"description": "A time picker component with popover and select inputs for hours and minutes",
|
|
109
|
-
"category": "form"
|
|
224
|
+
"category": "form",
|
|
225
|
+
"frameworks": [
|
|
226
|
+
"react",
|
|
227
|
+
"nextjs"
|
|
228
|
+
]
|
|
110
229
|
},
|
|
111
230
|
"date-time-picker": {
|
|
112
231
|
"name": "Date Time Picker",
|
|
113
232
|
"type": "form",
|
|
114
233
|
"description": "A combined date and time picker component",
|
|
115
|
-
"category": "form"
|
|
234
|
+
"category": "form",
|
|
235
|
+
"frameworks": [
|
|
236
|
+
"react",
|
|
237
|
+
"nextjs"
|
|
238
|
+
]
|
|
116
239
|
},
|
|
117
240
|
"tags-input": {
|
|
118
241
|
"name": "Tags Input",
|
|
119
242
|
"type": "form",
|
|
120
243
|
"description": "Input field for entering multiple tags or values",
|
|
121
|
-
"category": "form"
|
|
244
|
+
"category": "form",
|
|
245
|
+
"frameworks": [
|
|
246
|
+
"react",
|
|
247
|
+
"nextjs",
|
|
248
|
+
"vue",
|
|
249
|
+
"nuxtjs",
|
|
250
|
+
"angular"
|
|
251
|
+
]
|
|
122
252
|
},
|
|
123
253
|
"card": {
|
|
124
254
|
"name": "Card",
|
|
125
255
|
"type": "layout",
|
|
126
256
|
"description": "Displays a card with header, content, and footer",
|
|
127
|
-
"category": "layout"
|
|
257
|
+
"category": "layout",
|
|
258
|
+
"frameworks": [
|
|
259
|
+
"react",
|
|
260
|
+
"nextjs",
|
|
261
|
+
"vue",
|
|
262
|
+
"nuxtjs",
|
|
263
|
+
"angular",
|
|
264
|
+
"react-native",
|
|
265
|
+
"flutter"
|
|
266
|
+
]
|
|
128
267
|
},
|
|
129
268
|
"separator": {
|
|
130
269
|
"name": "Separator",
|
|
131
270
|
"type": "layout",
|
|
132
271
|
"description": "Visually or semantically separates content",
|
|
133
|
-
"category": "layout"
|
|
272
|
+
"category": "layout",
|
|
273
|
+
"frameworks": [
|
|
274
|
+
"react",
|
|
275
|
+
"nextjs",
|
|
276
|
+
"vue",
|
|
277
|
+
"nuxtjs",
|
|
278
|
+
"angular",
|
|
279
|
+
"react-native",
|
|
280
|
+
"flutter"
|
|
281
|
+
]
|
|
134
282
|
},
|
|
135
283
|
"accordion": {
|
|
136
284
|
"name": "Accordion",
|
|
137
285
|
"type": "layout",
|
|
138
286
|
"description": "A vertically stacked set of interactive headings that each reveal a section of content",
|
|
139
|
-
"category": "layout"
|
|
287
|
+
"category": "layout",
|
|
288
|
+
"frameworks": [
|
|
289
|
+
"react",
|
|
290
|
+
"nextjs",
|
|
291
|
+
"vue",
|
|
292
|
+
"nuxtjs",
|
|
293
|
+
"angular",
|
|
294
|
+
"react-native",
|
|
295
|
+
"flutter"
|
|
296
|
+
]
|
|
140
297
|
},
|
|
141
298
|
"tabs": {
|
|
142
299
|
"name": "Tabs",
|
|
143
300
|
"type": "layout",
|
|
144
301
|
"description": "A set of layered sections of content known as tab panels that are displayed one at a time",
|
|
145
|
-
"category": "layout"
|
|
302
|
+
"category": "layout",
|
|
303
|
+
"frameworks": [
|
|
304
|
+
"react",
|
|
305
|
+
"nextjs",
|
|
306
|
+
"vue",
|
|
307
|
+
"nuxtjs",
|
|
308
|
+
"angular",
|
|
309
|
+
"react-native",
|
|
310
|
+
"flutter"
|
|
311
|
+
]
|
|
146
312
|
},
|
|
147
313
|
"dialog": {
|
|
148
314
|
"name": "Dialog",
|
|
149
315
|
"type": "layout",
|
|
150
316
|
"description": "A window overlaid on either the primary window or another dialog window",
|
|
151
|
-
"category": "layout"
|
|
317
|
+
"category": "layout",
|
|
318
|
+
"frameworks": [
|
|
319
|
+
"react",
|
|
320
|
+
"nextjs",
|
|
321
|
+
"vue",
|
|
322
|
+
"nuxtjs",
|
|
323
|
+
"angular",
|
|
324
|
+
"react-native",
|
|
325
|
+
"flutter"
|
|
326
|
+
]
|
|
152
327
|
},
|
|
153
328
|
"collapsible": {
|
|
154
329
|
"name": "Collapsible",
|
|
155
330
|
"type": "layout",
|
|
156
331
|
"description": "An interactive component which expands/collapses a panel",
|
|
157
|
-
"category": "layout"
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
332
|
+
"category": "layout",
|
|
333
|
+
"frameworks": [
|
|
334
|
+
"react",
|
|
335
|
+
"nextjs",
|
|
336
|
+
"vue",
|
|
337
|
+
"nuxtjs",
|
|
338
|
+
"angular",
|
|
339
|
+
"react-native",
|
|
340
|
+
"flutter"
|
|
341
|
+
]
|
|
164
342
|
},
|
|
165
343
|
"aspect-ratio": {
|
|
166
344
|
"name": "Aspect Ratio",
|
|
167
345
|
"type": "layout",
|
|
168
346
|
"description": "Displays content within a desired aspect ratio",
|
|
169
|
-
"category": "layout"
|
|
347
|
+
"category": "layout",
|
|
348
|
+
"frameworks": [
|
|
349
|
+
"react",
|
|
350
|
+
"nextjs",
|
|
351
|
+
"vue",
|
|
352
|
+
"nuxtjs",
|
|
353
|
+
"angular",
|
|
354
|
+
"react-native",
|
|
355
|
+
"flutter"
|
|
356
|
+
]
|
|
170
357
|
},
|
|
171
358
|
"scroll-area": {
|
|
172
359
|
"name": "Scroll Area",
|
|
173
360
|
"type": "layout",
|
|
174
361
|
"description": "Augments native scroll functionality for custom, cross-browser styling",
|
|
175
|
-
"category": "layout"
|
|
362
|
+
"category": "layout",
|
|
363
|
+
"frameworks": [
|
|
364
|
+
"react",
|
|
365
|
+
"nextjs",
|
|
366
|
+
"vue",
|
|
367
|
+
"nuxtjs",
|
|
368
|
+
"angular"
|
|
369
|
+
]
|
|
176
370
|
},
|
|
177
371
|
"resizable": {
|
|
178
372
|
"name": "Resizable",
|
|
179
373
|
"type": "layout",
|
|
180
374
|
"description": "Accessible resizable panel groups and layouts with keyboard support",
|
|
181
|
-
"category": "layout"
|
|
375
|
+
"category": "layout",
|
|
376
|
+
"frameworks": [
|
|
377
|
+
"react",
|
|
378
|
+
"nextjs",
|
|
379
|
+
"vue",
|
|
380
|
+
"nuxtjs",
|
|
381
|
+
"angular"
|
|
382
|
+
]
|
|
182
383
|
},
|
|
183
384
|
"sheet": {
|
|
184
385
|
"name": "Sheet",
|
|
185
386
|
"type": "layout",
|
|
186
387
|
"description": "Slide-over panel that slides in from the edge of the screen",
|
|
187
|
-
"category": "layout"
|
|
388
|
+
"category": "layout",
|
|
389
|
+
"frameworks": [
|
|
390
|
+
"react",
|
|
391
|
+
"nextjs",
|
|
392
|
+
"vue",
|
|
393
|
+
"nuxtjs",
|
|
394
|
+
"angular",
|
|
395
|
+
"react-native",
|
|
396
|
+
"flutter"
|
|
397
|
+
]
|
|
188
398
|
},
|
|
189
399
|
"toolbar": {
|
|
190
400
|
"name": "Toolbar",
|
|
191
401
|
"type": "layout",
|
|
192
402
|
"description": "A container for grouping a set of controls",
|
|
193
|
-
"category": "layout"
|
|
403
|
+
"category": "layout",
|
|
404
|
+
"frameworks": [
|
|
405
|
+
"react",
|
|
406
|
+
"nextjs",
|
|
407
|
+
"vue",
|
|
408
|
+
"nuxtjs",
|
|
409
|
+
"angular"
|
|
410
|
+
]
|
|
194
411
|
},
|
|
195
412
|
"alert-dialog": {
|
|
196
413
|
"name": "Alert Dialog",
|
|
197
414
|
"type": "feedback",
|
|
198
415
|
"description": "A modal dialog that interrupts the user with important content and expects a response",
|
|
199
|
-
"category": "feedback"
|
|
416
|
+
"category": "feedback",
|
|
417
|
+
"frameworks": [
|
|
418
|
+
"react",
|
|
419
|
+
"nextjs",
|
|
420
|
+
"vue",
|
|
421
|
+
"nuxtjs",
|
|
422
|
+
"angular",
|
|
423
|
+
"react-native",
|
|
424
|
+
"flutter"
|
|
425
|
+
]
|
|
200
426
|
},
|
|
201
427
|
"alert": {
|
|
202
428
|
"name": "Alert",
|
|
203
429
|
"type": "feedback",
|
|
204
430
|
"description": "Displays a callout for user attention",
|
|
205
|
-
"category": "feedback"
|
|
431
|
+
"category": "feedback",
|
|
432
|
+
"frameworks": [
|
|
433
|
+
"react",
|
|
434
|
+
"nextjs",
|
|
435
|
+
"vue",
|
|
436
|
+
"nuxtjs",
|
|
437
|
+
"angular",
|
|
438
|
+
"react-native",
|
|
439
|
+
"flutter"
|
|
440
|
+
]
|
|
206
441
|
},
|
|
207
442
|
"progress": {
|
|
208
443
|
"name": "Progress",
|
|
209
444
|
"type": "feedback",
|
|
210
445
|
"description": "Displays an indicator showing the completion progress of a task",
|
|
211
|
-
"category": "feedback"
|
|
446
|
+
"category": "feedback",
|
|
447
|
+
"frameworks": [
|
|
448
|
+
"react",
|
|
449
|
+
"nextjs",
|
|
450
|
+
"vue",
|
|
451
|
+
"nuxtjs",
|
|
452
|
+
"angular",
|
|
453
|
+
"react-native",
|
|
454
|
+
"flutter"
|
|
455
|
+
]
|
|
212
456
|
},
|
|
213
457
|
"avatar": {
|
|
214
458
|
"name": "Avatar",
|
|
215
459
|
"type": "data-display",
|
|
216
460
|
"description": "An image element with a fallback for representing the user",
|
|
217
|
-
"category": "data-display"
|
|
461
|
+
"category": "data-display",
|
|
462
|
+
"frameworks": [
|
|
463
|
+
"react",
|
|
464
|
+
"nextjs",
|
|
465
|
+
"vue",
|
|
466
|
+
"nuxtjs",
|
|
467
|
+
"angular",
|
|
468
|
+
"react-native",
|
|
469
|
+
"flutter"
|
|
470
|
+
]
|
|
218
471
|
},
|
|
219
472
|
"hover-card": {
|
|
220
473
|
"name": "Hover Card",
|
|
221
474
|
"type": "data-display",
|
|
222
475
|
"description": "For sighted users to preview content available behind a link",
|
|
223
|
-
"category": "data-display"
|
|
476
|
+
"category": "data-display",
|
|
477
|
+
"frameworks": [
|
|
478
|
+
"react",
|
|
479
|
+
"nextjs",
|
|
480
|
+
"vue",
|
|
481
|
+
"nuxtjs",
|
|
482
|
+
"angular",
|
|
483
|
+
"react-native",
|
|
484
|
+
"flutter"
|
|
485
|
+
]
|
|
224
486
|
},
|
|
225
487
|
"dropdown-menu": {
|
|
226
488
|
"name": "Dropdown Menu",
|
|
227
489
|
"type": "navigation",
|
|
228
490
|
"description": "Displays a menu to the user triggered by a button",
|
|
229
|
-
"category": "navigation"
|
|
491
|
+
"category": "navigation",
|
|
492
|
+
"frameworks": [
|
|
493
|
+
"react",
|
|
494
|
+
"nextjs",
|
|
495
|
+
"vue",
|
|
496
|
+
"nuxtjs",
|
|
497
|
+
"angular",
|
|
498
|
+
"react-native",
|
|
499
|
+
"flutter"
|
|
500
|
+
]
|
|
230
501
|
},
|
|
231
502
|
"navigation-menu": {
|
|
232
503
|
"name": "Navigation Menu",
|
|
233
504
|
"type": "navigation",
|
|
234
505
|
"description": "A collection of links for navigating websites",
|
|
235
|
-
"category": "navigation"
|
|
506
|
+
"category": "navigation",
|
|
507
|
+
"frameworks": [
|
|
508
|
+
"react",
|
|
509
|
+
"nextjs",
|
|
510
|
+
"vue",
|
|
511
|
+
"nuxtjs",
|
|
512
|
+
"angular",
|
|
513
|
+
"react-native",
|
|
514
|
+
"flutter"
|
|
515
|
+
]
|
|
236
516
|
},
|
|
237
517
|
"breadcrumb": {
|
|
238
518
|
"name": "Breadcrumb",
|
|
239
519
|
"type": "navigation",
|
|
240
520
|
"description": "Displays the path to the current resource using a hierarchy of links",
|
|
241
|
-
"category": "navigation"
|
|
521
|
+
"category": "navigation",
|
|
522
|
+
"frameworks": [
|
|
523
|
+
"react",
|
|
524
|
+
"nextjs",
|
|
525
|
+
"vue",
|
|
526
|
+
"nuxtjs",
|
|
527
|
+
"angular"
|
|
528
|
+
]
|
|
242
529
|
},
|
|
243
530
|
"menubar": {
|
|
244
531
|
"name": "Menubar",
|
|
245
532
|
"type": "navigation",
|
|
246
533
|
"description": "A visually persistent menu common in desktop applications",
|
|
247
|
-
"category": "navigation"
|
|
534
|
+
"category": "navigation",
|
|
535
|
+
"frameworks": [
|
|
536
|
+
"react",
|
|
537
|
+
"nextjs",
|
|
538
|
+
"vue",
|
|
539
|
+
"nuxtjs",
|
|
540
|
+
"angular",
|
|
541
|
+
"react-native",
|
|
542
|
+
"flutter"
|
|
543
|
+
]
|
|
248
544
|
},
|
|
249
545
|
"context-menu": {
|
|
250
546
|
"name": "Context Menu",
|
|
251
547
|
"type": "navigation",
|
|
252
548
|
"description": "Displays a menu to the user triggered by right-click or long-press",
|
|
253
|
-
"category": "navigation"
|
|
549
|
+
"category": "navigation",
|
|
550
|
+
"frameworks": [
|
|
551
|
+
"react",
|
|
552
|
+
"nextjs",
|
|
553
|
+
"vue",
|
|
554
|
+
"nuxtjs",
|
|
555
|
+
"angular",
|
|
556
|
+
"react-native",
|
|
557
|
+
"flutter"
|
|
558
|
+
]
|
|
254
559
|
},
|
|
255
560
|
"popover": {
|
|
256
561
|
"name": "Popover",
|
|
257
562
|
"type": "navigation",
|
|
258
563
|
"description": "Displays rich content in a portal, triggered by a button",
|
|
259
|
-
"category": "navigation"
|
|
564
|
+
"category": "navigation",
|
|
565
|
+
"frameworks": [
|
|
566
|
+
"react",
|
|
567
|
+
"nextjs",
|
|
568
|
+
"vue",
|
|
569
|
+
"nuxtjs",
|
|
570
|
+
"angular",
|
|
571
|
+
"react-native",
|
|
572
|
+
"flutter"
|
|
573
|
+
]
|
|
260
574
|
},
|
|
261
575
|
"tooltip": {
|
|
262
576
|
"name": "Tooltip",
|
|
263
577
|
"type": "navigation",
|
|
264
578
|
"description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it",
|
|
265
|
-
"category": "navigation"
|
|
579
|
+
"category": "navigation",
|
|
580
|
+
"frameworks": [
|
|
581
|
+
"react",
|
|
582
|
+
"nextjs",
|
|
583
|
+
"vue",
|
|
584
|
+
"nuxtjs",
|
|
585
|
+
"angular",
|
|
586
|
+
"react-native",
|
|
587
|
+
"flutter"
|
|
588
|
+
]
|
|
266
589
|
},
|
|
267
590
|
"pagination": {
|
|
268
591
|
"name": "Pagination",
|
|
269
592
|
"type": "navigation",
|
|
270
593
|
"description": "Page navigation with previous, next, and page numbers",
|
|
271
|
-
"category": "navigation"
|
|
594
|
+
"category": "navigation",
|
|
595
|
+
"frameworks": [
|
|
596
|
+
"react",
|
|
597
|
+
"nextjs",
|
|
598
|
+
"vue",
|
|
599
|
+
"nuxtjs",
|
|
600
|
+
"angular",
|
|
601
|
+
"react-native",
|
|
602
|
+
"flutter"
|
|
603
|
+
]
|
|
272
604
|
},
|
|
273
605
|
"command": {
|
|
274
606
|
"name": "Command",
|
|
275
607
|
"type": "navigation",
|
|
276
608
|
"description": "Command palette for keyboard-first navigation and search",
|
|
277
|
-
"category": "navigation"
|
|
609
|
+
"category": "navigation",
|
|
610
|
+
"frameworks": [
|
|
611
|
+
"react",
|
|
612
|
+
"nextjs",
|
|
613
|
+
"vue",
|
|
614
|
+
"nuxtjs",
|
|
615
|
+
"angular"
|
|
616
|
+
]
|
|
278
617
|
},
|
|
279
618
|
"line-chart": {
|
|
280
619
|
"name": "LineChart",
|
|
281
620
|
"type": "chart",
|
|
282
621
|
"description": "Display data as a responsive line chart with smooth curves and customizable styling",
|
|
283
|
-
"category": "charts"
|
|
622
|
+
"category": "charts",
|
|
623
|
+
"frameworks": [
|
|
624
|
+
"react",
|
|
625
|
+
"nextjs",
|
|
626
|
+
"vue",
|
|
627
|
+
"nuxtjs",
|
|
628
|
+
"angular",
|
|
629
|
+
"react-native",
|
|
630
|
+
"flutter"
|
|
631
|
+
]
|
|
284
632
|
},
|
|
285
633
|
"bar-chart": {
|
|
286
634
|
"name": "BarChart",
|
|
287
635
|
"type": "chart",
|
|
288
636
|
"description": "Display data as vertical or horizontal bars with support for stacked and grouped layouts",
|
|
289
|
-
"category": "charts"
|
|
637
|
+
"category": "charts",
|
|
638
|
+
"frameworks": [
|
|
639
|
+
"react",
|
|
640
|
+
"nextjs",
|
|
641
|
+
"vue",
|
|
642
|
+
"nuxtjs",
|
|
643
|
+
"angular",
|
|
644
|
+
"react-native",
|
|
645
|
+
"flutter"
|
|
646
|
+
]
|
|
290
647
|
},
|
|
291
648
|
"pie-chart": {
|
|
292
649
|
"name": "PieChart",
|
|
293
650
|
"type": "chart",
|
|
294
651
|
"description": "Display proportional data as a pie or donut chart with customizable labels and legend",
|
|
295
|
-
"category": "charts"
|
|
652
|
+
"category": "charts",
|
|
653
|
+
"frameworks": [
|
|
654
|
+
"react",
|
|
655
|
+
"nextjs",
|
|
656
|
+
"vue",
|
|
657
|
+
"nuxtjs",
|
|
658
|
+
"angular",
|
|
659
|
+
"react-native",
|
|
660
|
+
"flutter"
|
|
661
|
+
]
|
|
296
662
|
},
|
|
297
663
|
"donut-chart": {
|
|
298
664
|
"name": "DonutChart",
|
|
299
665
|
"type": "chart",
|
|
300
666
|
"description": "Display proportional data as a donut chart with a hollow center",
|
|
301
|
-
"category": "charts"
|
|
667
|
+
"category": "charts",
|
|
668
|
+
"frameworks": [
|
|
669
|
+
"react",
|
|
670
|
+
"nextjs",
|
|
671
|
+
"vue",
|
|
672
|
+
"nuxtjs",
|
|
673
|
+
"angular",
|
|
674
|
+
"react-native",
|
|
675
|
+
"flutter"
|
|
676
|
+
]
|
|
302
677
|
},
|
|
303
678
|
"area-chart": {
|
|
304
679
|
"name": "AreaChart",
|
|
305
680
|
"type": "chart",
|
|
306
681
|
"description": "Visualize cumulative totals over time with filled areas and gradient support",
|
|
307
|
-
"category": "charts"
|
|
682
|
+
"category": "charts",
|
|
683
|
+
"frameworks": [
|
|
684
|
+
"react",
|
|
685
|
+
"nextjs",
|
|
686
|
+
"vue",
|
|
687
|
+
"nuxtjs",
|
|
688
|
+
"angular",
|
|
689
|
+
"react-native",
|
|
690
|
+
"flutter"
|
|
691
|
+
]
|
|
308
692
|
},
|
|
309
693
|
"radar-chart": {
|
|
310
694
|
"name": "RadarChart",
|
|
311
695
|
"type": "chart",
|
|
312
696
|
"description": "Display multi-dimensional data comparison on a radial grid",
|
|
313
|
-
"category": "charts"
|
|
697
|
+
"category": "charts",
|
|
698
|
+
"frameworks": [
|
|
699
|
+
"react",
|
|
700
|
+
"nextjs",
|
|
701
|
+
"vue",
|
|
702
|
+
"nuxtjs",
|
|
703
|
+
"angular",
|
|
704
|
+
"react-native",
|
|
705
|
+
"flutter"
|
|
706
|
+
]
|
|
314
707
|
},
|
|
315
708
|
"scatter-chart": {
|
|
316
709
|
"name": "ScatterChart",
|
|
317
710
|
"type": "chart",
|
|
318
711
|
"description": "Display distribution and correlation analysis with scatter plots",
|
|
319
|
-
"category": "charts"
|
|
712
|
+
"category": "charts",
|
|
713
|
+
"frameworks": [
|
|
714
|
+
"react",
|
|
715
|
+
"nextjs",
|
|
716
|
+
"vue",
|
|
717
|
+
"nuxtjs",
|
|
718
|
+
"angular",
|
|
719
|
+
"react-native",
|
|
720
|
+
"flutter"
|
|
721
|
+
]
|
|
320
722
|
},
|
|
321
723
|
"mixed-chart": {
|
|
322
724
|
"name": "MixedChart",
|
|
323
725
|
"type": "chart",
|
|
324
726
|
"description": "Combine multiple chart types (line, bar, area) in a single visualization",
|
|
325
|
-
"category": "charts"
|
|
727
|
+
"category": "charts",
|
|
728
|
+
"frameworks": [
|
|
729
|
+
"react",
|
|
730
|
+
"nextjs",
|
|
731
|
+
"vue",
|
|
732
|
+
"nuxtjs",
|
|
733
|
+
"angular",
|
|
734
|
+
"react-native",
|
|
735
|
+
"flutter"
|
|
736
|
+
]
|
|
326
737
|
},
|
|
327
738
|
"gauge-chart": {
|
|
328
739
|
"name": "GaugeChart",
|
|
329
740
|
"type": "chart",
|
|
330
741
|
"description": "Display data as a gauge chart with customizable ranges and styling",
|
|
331
|
-
"category": "charts"
|
|
742
|
+
"category": "charts",
|
|
743
|
+
"frameworks": [
|
|
744
|
+
"angular",
|
|
745
|
+
"react-native",
|
|
746
|
+
"flutter"
|
|
747
|
+
]
|
|
332
748
|
},
|
|
333
749
|
"sidebar": {
|
|
334
750
|
"name": "Sidebar",
|
|
335
751
|
"type": "navigation",
|
|
336
752
|
"description": "Layout with collapsible sidebar",
|
|
337
|
-
"category": "navigation"
|
|
753
|
+
"category": "navigation",
|
|
754
|
+
"frameworks": []
|
|
338
755
|
},
|
|
339
756
|
"stepper": {
|
|
340
757
|
"name": "Stepper",
|
|
341
758
|
"type": "navigation",
|
|
342
759
|
"description": "Multi-step wizards and forms",
|
|
343
|
-
"category": "navigation"
|
|
760
|
+
"category": "navigation",
|
|
761
|
+
"frameworks": []
|
|
344
762
|
},
|
|
345
763
|
"table": {
|
|
346
764
|
"name": "Table",
|
|
347
765
|
"type": "data-display",
|
|
348
766
|
"description": "Data table with sorting, filtering, and selection",
|
|
349
|
-
"category": "data-display"
|
|
767
|
+
"category": "data-display",
|
|
768
|
+
"frameworks": [
|
|
769
|
+
"react",
|
|
770
|
+
"nextjs",
|
|
771
|
+
"vue",
|
|
772
|
+
"nuxtjs",
|
|
773
|
+
"angular",
|
|
774
|
+
"react-native",
|
|
775
|
+
"flutter"
|
|
776
|
+
]
|
|
350
777
|
},
|
|
351
778
|
"table-paginated": {
|
|
352
779
|
"name": "Table Paginated",
|
|
353
780
|
"type": "data-display",
|
|
354
781
|
"description": "Data table with built-in pagination",
|
|
355
|
-
"category": "data-display"
|
|
782
|
+
"category": "data-display",
|
|
783
|
+
"frameworks": []
|
|
356
784
|
},
|
|
357
785
|
"list": {
|
|
358
786
|
"name": "List",
|
|
359
787
|
"type": "data-display",
|
|
360
788
|
"description": "Versatile list component for displaying data",
|
|
361
|
-
"category": "data-display"
|
|
789
|
+
"category": "data-display",
|
|
790
|
+
"frameworks": []
|
|
362
791
|
},
|
|
363
792
|
"tree": {
|
|
364
793
|
"name": "Tree",
|
|
365
794
|
"type": "data-display",
|
|
366
795
|
"description": "Hierarchical tree structure with expand/collapse",
|
|
367
|
-
"category": "data-display"
|
|
796
|
+
"category": "data-display",
|
|
797
|
+
"frameworks": []
|
|
368
798
|
},
|
|
369
799
|
"tag": {
|
|
370
800
|
"name": "Tag",
|
|
371
801
|
"type": "data-display",
|
|
372
802
|
"description": "Tag component for labels and categorization",
|
|
373
|
-
"category": "data-display"
|
|
803
|
+
"category": "data-display",
|
|
804
|
+
"frameworks": []
|
|
374
805
|
},
|
|
375
806
|
"timeline": {
|
|
376
807
|
"name": "Timeline",
|
|
377
808
|
"type": "data-display",
|
|
378
809
|
"description": "Timeline component for displaying chronological events",
|
|
379
|
-
"category": "data-display"
|
|
810
|
+
"category": "data-display",
|
|
811
|
+
"frameworks": []
|
|
380
812
|
},
|
|
381
813
|
"drawer": {
|
|
382
814
|
"name": "Drawer",
|
|
383
815
|
"type": "modal-overlay",
|
|
384
816
|
"description": "Drawer component with slide-in animation (shadcn style)",
|
|
385
|
-
"category": "modal-overlay"
|
|
817
|
+
"category": "modal-overlay",
|
|
818
|
+
"frameworks": []
|
|
386
819
|
},
|
|
387
820
|
"toast": {
|
|
388
821
|
"name": "Toast",
|
|
389
822
|
"type": "feedback",
|
|
390
823
|
"description": "A succinct message that is displayed temporarily",
|
|
391
|
-
"category": "feedback"
|
|
824
|
+
"category": "feedback",
|
|
825
|
+
"frameworks": [
|
|
826
|
+
"react",
|
|
827
|
+
"nextjs",
|
|
828
|
+
"vue",
|
|
829
|
+
"nuxtjs",
|
|
830
|
+
"angular"
|
|
831
|
+
]
|
|
392
832
|
},
|
|
393
833
|
"skeleton": {
|
|
394
834
|
"name": "Skeleton",
|
|
395
835
|
"type": "feedback",
|
|
396
836
|
"description": "Use to show a placeholder while content is loading",
|
|
397
|
-
"category": "feedback"
|
|
837
|
+
"category": "feedback",
|
|
838
|
+
"frameworks": [
|
|
839
|
+
"react",
|
|
840
|
+
"nextjs",
|
|
841
|
+
"vue",
|
|
842
|
+
"nuxtjs",
|
|
843
|
+
"angular",
|
|
844
|
+
"react-native",
|
|
845
|
+
"flutter"
|
|
846
|
+
]
|
|
398
847
|
},
|
|
399
848
|
"empty": {
|
|
400
849
|
"name": "Empty",
|
|
401
850
|
"type": "feedback",
|
|
402
851
|
"description": "Displays an empty state placeholder",
|
|
403
|
-
"category": "feedback"
|
|
852
|
+
"category": "feedback",
|
|
853
|
+
"frameworks": [
|
|
854
|
+
"react",
|
|
855
|
+
"nextjs",
|
|
856
|
+
"vue",
|
|
857
|
+
"nuxtjs",
|
|
858
|
+
"angular",
|
|
859
|
+
"react-native",
|
|
860
|
+
"flutter"
|
|
861
|
+
]
|
|
404
862
|
},
|
|
405
863
|
"kbd": {
|
|
406
864
|
"name": "Kbd",
|
|
407
865
|
"type": "data-display",
|
|
408
866
|
"description": "Displays keyboard key combinations",
|
|
409
|
-
"category": "data-display"
|
|
867
|
+
"category": "data-display",
|
|
868
|
+
"frameworks": [
|
|
869
|
+
"react",
|
|
870
|
+
"nextjs",
|
|
871
|
+
"vue",
|
|
872
|
+
"nuxtjs",
|
|
873
|
+
"angular"
|
|
874
|
+
]
|
|
410
875
|
},
|
|
411
876
|
"typography": {
|
|
412
877
|
"name": "Typography",
|
|
413
878
|
"type": "data-display",
|
|
414
879
|
"description": "Text formatting and typography components",
|
|
415
|
-
"category": "data-display"
|
|
880
|
+
"category": "data-display",
|
|
881
|
+
"frameworks": [
|
|
882
|
+
"react",
|
|
883
|
+
"nextjs",
|
|
884
|
+
"vue",
|
|
885
|
+
"nuxtjs",
|
|
886
|
+
"angular",
|
|
887
|
+
"react-native",
|
|
888
|
+
"flutter"
|
|
889
|
+
]
|
|
416
890
|
},
|
|
417
891
|
"badge": {
|
|
418
892
|
"name": "Badge",
|
|
419
893
|
"type": "feedback",
|
|
420
894
|
"description": "Displays a badge or a component that looks like a badge",
|
|
421
|
-
"category": "feedback"
|
|
895
|
+
"category": "feedback",
|
|
896
|
+
"frameworks": [
|
|
897
|
+
"react",
|
|
898
|
+
"nextjs",
|
|
899
|
+
"vue",
|
|
900
|
+
"nuxtjs",
|
|
901
|
+
"angular",
|
|
902
|
+
"react-native",
|
|
903
|
+
"flutter"
|
|
904
|
+
]
|
|
422
905
|
},
|
|
423
906
|
"toggle": {
|
|
424
907
|
"name": "Toggle",
|
|
425
908
|
"type": "interactive",
|
|
426
909
|
"description": "A two-state button that can be either on or off",
|
|
427
|
-
"category": "interactive"
|
|
910
|
+
"category": "interactive",
|
|
911
|
+
"frameworks": [
|
|
912
|
+
"react",
|
|
913
|
+
"nextjs",
|
|
914
|
+
"vue",
|
|
915
|
+
"nuxtjs",
|
|
916
|
+
"angular",
|
|
917
|
+
"react-native",
|
|
918
|
+
"flutter"
|
|
919
|
+
]
|
|
428
920
|
},
|
|
429
921
|
"toggle-group": {
|
|
430
922
|
"name": "Toggle Group",
|
|
431
923
|
"type": "interactive",
|
|
432
924
|
"description": "A set of two-state buttons that can be toggled on or off",
|
|
433
|
-
"category": "interactive"
|
|
925
|
+
"category": "interactive",
|
|
926
|
+
"frameworks": [
|
|
927
|
+
"react",
|
|
928
|
+
"nextjs",
|
|
929
|
+
"vue",
|
|
930
|
+
"nuxtjs",
|
|
931
|
+
"angular",
|
|
932
|
+
"react-native",
|
|
933
|
+
"flutter"
|
|
934
|
+
]
|
|
434
935
|
},
|
|
435
936
|
"spinner": {
|
|
436
937
|
"name": "Spinner",
|
|
437
|
-
"type": "
|
|
438
|
-
"description": "
|
|
439
|
-
"category": "
|
|
938
|
+
"type": "feedback",
|
|
939
|
+
"description": "Animated loading spinner.",
|
|
940
|
+
"category": "feedback",
|
|
941
|
+
"frameworks": [
|
|
942
|
+
"react",
|
|
943
|
+
"nextjs",
|
|
944
|
+
"vue",
|
|
945
|
+
"nuxtjs",
|
|
946
|
+
"angular",
|
|
947
|
+
"react-native",
|
|
948
|
+
"flutter"
|
|
949
|
+
]
|
|
440
950
|
},
|
|
441
951
|
"popconfirm": {
|
|
442
952
|
"name": "Popconfirm",
|
|
443
953
|
"type": "modal-overlay",
|
|
444
954
|
"description": "Popconfirm component for confirmation dialogs (antd style)",
|
|
445
|
-
"category": "modal-overlay"
|
|
955
|
+
"category": "modal-overlay",
|
|
956
|
+
"frameworks": []
|
|
446
957
|
},
|
|
447
958
|
"tour": {
|
|
448
959
|
"name": "Tour",
|
|
449
960
|
"type": "other",
|
|
450
961
|
"description": "Tour component for user onboarding (antd style)",
|
|
451
|
-
"category": "other"
|
|
962
|
+
"category": "other",
|
|
963
|
+
"frameworks": []
|
|
452
964
|
},
|
|
453
965
|
"carousel": {
|
|
454
966
|
"name": "Carousel",
|
|
455
967
|
"type": "other",
|
|
456
968
|
"description": "Carousel component for image/content slides (antd style)",
|
|
457
|
-
"category": "other"
|
|
969
|
+
"category": "other",
|
|
970
|
+
"frameworks": []
|
|
458
971
|
}
|
|
459
972
|
},
|
|
460
973
|
"groups": {
|
|
@@ -492,7 +1005,6 @@
|
|
|
492
1005
|
"tabs",
|
|
493
1006
|
"dialog",
|
|
494
1007
|
"collapsible",
|
|
495
|
-
"splitter",
|
|
496
1008
|
"aspect-ratio",
|
|
497
1009
|
"scroll-area",
|
|
498
1010
|
"resizable",
|
|
@@ -545,11 +1057,18 @@
|
|
|
545
1057
|
},
|
|
546
1058
|
"modal-overlay": {
|
|
547
1059
|
"name": "Modal & Overlay Components",
|
|
548
|
-
"components": [
|
|
1060
|
+
"components": [
|
|
1061
|
+
"drawer",
|
|
1062
|
+
"spinner",
|
|
1063
|
+
"popconfirm"
|
|
1064
|
+
]
|
|
549
1065
|
},
|
|
550
1066
|
"interactive": {
|
|
551
1067
|
"name": "Interactive Components",
|
|
552
|
-
"components": [
|
|
1068
|
+
"components": [
|
|
1069
|
+
"toggle",
|
|
1070
|
+
"toggle-group"
|
|
1071
|
+
]
|
|
553
1072
|
},
|
|
554
1073
|
"charts": {
|
|
555
1074
|
"name": "Chart Components",
|
|
@@ -567,7 +1086,10 @@
|
|
|
567
1086
|
},
|
|
568
1087
|
"other": {
|
|
569
1088
|
"name": "Other Components",
|
|
570
|
-
"components": [
|
|
1089
|
+
"components": [
|
|
1090
|
+
"tour",
|
|
1091
|
+
"carousel"
|
|
1092
|
+
]
|
|
571
1093
|
}
|
|
572
1094
|
}
|
|
573
1095
|
}
|