-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
795 lines (715 loc) · 36.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="stylesheets/application.css" rel="stylesheet" />
</head>
<body class="relative flex min-h-screen flex-col">
<header
class="px-8 md:px-0 supports-backdrop-blur:bg-white/60 sticky top-0 z-40 w-full border-b bg-white/95 backdrop-blur"
>
<div
class="container flex h-14 items-center justify-between mx-auto max-w-7xl"
>
<div class="mr-4 hidden md:flex">
<a
class="mx-4 flex items-center space-x-2"
href="https://aviflombaum.github.io/shadcn-docs/"
>
<span class="hidden font-bold sm:inline-block">shadcn/docs</span>
</a>
</div>
<div
class="flex flex-1 items-center justify-between space-x-2 md:justify-end"
>
<nav class="flex items-center space-x-6 text-sm font-medium">
<a
class="transition-colors hover:text-foreground/80 text-foreground/60"
href="https://aviflombaum.github.io/shadcn-docs/"
>Home</a
>
<a
class="transition-colors hover:text-foreground/80 text-foreground/60 text-foreground/60"
href="https://aviflombaum.github.io/shadcn-docs/"
>Documentation</a
>
</nav>
<nav class="flex items-center">
<a
target="_blank"
rel="noreferrer"
href="https://github.com/aviflombaum/shadcn-docs"
><div
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 py-2 w-9 px-0"
>
<svg viewBox="0 0 438.549 438.549" class="h-4 w-4">
<path
fill="currentColor"
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
></path>
</svg>
<span class="sr-only">GitHub</span>
</div>
</a>
<a
target="_blank"
rel="noreferrer"
href="https://twitter.com/aviflombaum"
><div
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 py-2 w-9 px-0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="h-4 w-4 fill-current"
>
<path
d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144 4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"
></path>
</svg>
<span class="sr-only">Twitter</span>
</div>
</a>
<button
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 py-2 w-9 px-0"
type="button"
id="radix-:Rtlhja:"
aria-haspopup="menu"
aria-expanded="false"
data-state="closed"
data-controller="theme"
data-action="theme#toggle"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
>
<path
d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
>
<path
d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Toggle theme</span>
</button>
</nav>
</div>
</div>
</header>
<div class="container grid grid-cols-5 mx-auto max-w-7xl">
<aside
class="grid-cols-1 fixed z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:top-12 md:block"
>
<div
dir="ltr"
class="relative overflow-hidden h-full pr-6"
style="position: relative"
>
<div
class="h-full w-full rounded-[inherit] overflow-y-scroll-auto overflow-x-hidden"
>
<div style="min-width: 100%; display: table">
<div class="w-full py-6 ml-4">
<div class="pb-4">
<h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
Getting Started
</h4>
<div class="grid grid-flow-row auto-rows-max text-sm">
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground font-bold"
href="https://aviflombaum.github.io/shadcn-docs/"
>Introduction</a
>
</div>
</div>
<div class="pb-4">
<h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
Components
</h4>
<div class="grid grid-flow-row auto-rows-max text-sm">
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Accordion</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Alert</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Alert Dialog</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Badge</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Button</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Card</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Checkbox</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Collapsible</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Combobox</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Dialog</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Dropdown Menu</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Filter</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Forms</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Hover Card</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Input</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Label</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Popover</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Progress</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Separator</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Sheet</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Skeleton</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Slider</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Tabs</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Textarea</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Toast</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Toggle</a
>
<a
class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
href="https://aviflombaum.github.io/shadcn-docs/"
>
Tooltip</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
<main class="mx-8 md:mx-0 w-full py-6 col-span-4 lg:gap-10 lg:py-8">
<div class="mx-auto w-full min-w-0">
<article class="documentation">
<h1 id="installation">Installation</h1>
<p>
The more automated way to install the components into your
application is via the gem packaged within this application. The
gem provides generators that will setup your applications as best
as possible without potentially overwriting any existing code as
well as copy components and their dependencies to your
application.
</p>
<h2 id="add-the-gem">Add the Gem</h2>
<p>First step is adding the gem to your gemfile.</p>
<pre><code class="sh">bundle add shadcn-ui
bundle install
</code></pre>
<h2 id="install-and-setup-dependencies">
Install and Setup Dependencies
</h2>
<h3 id="tailwindcss">TailwindCSS</h3>
<p>
The components need a few things in order to render and function
properly
</p>
<ol>
<li>
<p>
Tailwindcss must be installed in your application. If it's not
already, I recommend just using the
<code>tailwindcss-rails</code> gem and running its installer
to bootstrap your application with TailwindCSS.
</p>
</li>
<li>
<p>
A few tailwindcss npm packages are required by the theme and
the best way to get them is to add them to your package.json
or even if you're application doesn't use node packages
because you use importmaps or something else, having a
package.json will still work only to allow the tailwind cli to
compile the themes. The easiest way I've found to include
everything you need is by including only one package that will
include the rest of them, <code>tailwind-animate</code>.
Create a package.json if you need via
<code>echo '{}' >> package.json</code>.
</p>
</li>
</ol>
<pre><code>npm install -D tailwindcss-animate
</code></pre>
<p>
These are the requirements if you want to add them individually:
</p>
<pre><code>@tailwindcss/forms
@tailwindcss/aspect-ratio
@tailwindcss/typography
@tailwindcss/container-queries
tailwindcss-animate
</code></pre>
<h3 id="shadcn-css-required">shadcn CSS - Required</h3>
<h4 id="shadcn-css">shadcn.css</h4>
<p>
These steps were not automated and are required to be done
manually.
</p>
<p>
The components also require a few CSS variables to be set in order
to render properly. It's a two step process, first, the gem
installation should have added
<code>app/assets/stylesheets/shadcn.css</code> to your
application. You need to make sure this is included within
<code>application.tailwind.css</code>, which should have happened
automatically, but double check.
</p>
<pre><code>@import "shadcn.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
</code></pre>
<h4 id="shadcn-tailwind-js">shadcn.tailwind.js</h4>
<p>
The installation also should have added a
<code>config/shadcn.tailwind.js</code> file to your application.
This file is required to be included in your
<code>tailwind.config.js</code> file. The best way to include it
is to <code>require</code> it in your
<code>tailwind.config.js</code> file and expand the configuration
settings. This is what a newly setup
<code>tailwind.config.js</code> file should look like after the
inclusion of the <code>shadcn.tailwind.js</code> settings.
</p>
<pre><code class="js">const defaultTheme = require("tailwindcss/defaultTheme");
const shadcnConfig = require("./shadcn.tailwind.js");
module.exports = {
content: [
"./public/*.html",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js",
"./app/views/**/*.{erb,haml,html,slim}",
],
theme: {
extend: {
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
],
...shadcnConfig,
};
</code></pre>
<p>
You could also just use the shadcnConfig as the default Tailwind
settings needed are also defined there..
</p>
<pre><code class="js">const shadcnConfig = require("./shadcn.tailwind.js");
module.exports = {
...shadcnConfig,
};
</code></pre>
<p>
After that feel free to add further customizatios to your tailwind
config. For an existing tailwind config, just add shadcnConfig to
the end of the config object. It will override any settings needed
by being at the end. And obviously feel free to inspect
shadcnConfig and keep only what's reui
</p>
<h2 id="end">End</h2>
<p>
That's it! You are now set to start
<a href="%22/documentation/generators%22"
>installing components via the generator</a
>
and rendering them into your views.
</p>
<h1 id="manual-installation">Manual Installation</h1>
<p>
Prior to the initial gem release, you can use this as an alpha by
cloning this repository and starting up the app as you would a
standard rails app.
</p>
<pre><code class="sh">git clone https://github.com/aviflombaum/shadcn-rails.git
cd shadcn-rails
bundle install
./bin/dev
</code></pre>
<p>
There are very few dependencies and no database so it should just
boot up. Visit http://localhost:3000 to see the demo app which is
also the documentation. You'll be able to browse the components at
http://localhost:3000/components.
</p>
<p>
If there's a component you want to try in your app, you will be
copying the code from this app to yours. There's a few other steps
you'll need.
</p>
<h2 id="installing-a-component">Installing a Component</h2>
<h3 id="add-tailwind-css">Add Tailwind CSS</h3>
<p>
Components are styled using Tailwind CSS. You need to install
Tailwind CSS in your project.
</p>
<p>
<a href="https://tailwindcss.com/docs/installation"
>Follow the Tailwind CSS installation instructions to get
started.</a
>
</p>
<h3 id="add-dependencies">Add dependencies</h3>
<p>
If you haven't already, install Tailwind into your rails
application by adding <code>tailwindcss-rails</code> to your
<code>Gemfile</code> and install tailwind into your app:
</p>
<pre><code class="sh">./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
</code></pre>
<p>Then install ./bin/rails tailwindcss:install</p>
<h3 id="configure-tailwind-config-js">
Configure tailwind.config.js
</h3>
<p>
Here's what my <code>tailwind.config.js</code> file looks like:
</p>
<pre><code class="js">const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: ["class"],
content: [
"./public/*.html",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js",
"./app/views/**/*.{erb,haml,html,slim}",
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
require("tailwindcss-animate"),
],
};
</code></pre>
<h3 id="configure-styles">Configure styles</h3>
<p>
Add the following to your
app/assets/stylesheets/application.tailwind.css file.
</p>
<pre><code class="css">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings:
"rlig" 1,
"calt" 1;
}
}
</code></pre>
<h3 id="copy-component-files">Copy Component Files</h3>
<p>
For example, if you want to use the Accordion component, you would
copy the following files to your application:
</p>
<ul>
<li>
<code
>app/javascript/controllers/components/ui/accordion_controller.js</code
>
The Stimulus controller for any component that requires
javascript.
</li>
<li>
<code>app/helpers/components/accordion_helper.rb</code> The
helper for the component that allows for easy rendering within
views.
</li>
<li>
<code>app/views/components/ui/_accordion.html.erb</code> The
html for the component.
</li>
</ul>
<p>
Once those are copied in your application you can render an
accordion with:
</p>
<pre><code><%= render_accordion title: "Did you know?",
description: "You can wrap shadcn helpers in any
component library you want!" %>
</code></pre>
<p>Result:</p>
<p><img src="images/accordion.png" alt="Example of Accordion" /></p>
<p>
See the component's demo page in
<code>app/views/examples/components/accordion.html.erb</code> for
more examples.
</p>
<p>This will be similar for each component.</p>
<h1 id="conclusion">Conclusion</h1>
<p>
You can freely mix and match both styles as your application
evolves. The end goal of each of them is to get the component code
into your application so you can further customize and take
ownership of your design system.
</p>
</article>
</div>
</main>
</div>
</body>
</html>