x
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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SKELETON:</strong> Loading placeholder bars<br> <strong>VARIANTS:</strong> Bar (default) | Circle | Pill </p> <p class="tw:mb-0 tw:text-sm"> Gray shimmer blocks that stand in for content while it loads. The caller shapes each bar with width/height/rounding utilities; the component owns only the fill and shimmer animation (disabled under <code>prefers-reduced-motion</code>). </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Bars</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Bars:</strong> Size every bar with <code>tw:h-*</code> / <code>tw:w-*</code> utilities. Match the shape of the content being replaced. </p> </div> <div class="tw:flex tw:flex-col tw:gap-2 tw:max-w-md"> <span class="skeleton tw:h-4.5 tw:w-3/5"></span> <span class="skeleton tw:h-3 tw:w-2/5"></span> <span class="skeleton tw:h-3 tw:w-4/5"></span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="skeleton tw:h-4.5 tw:w-3/5"></span></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Circle & Pill</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Shapes:</strong> <code>.skeleton-circle</code> for avatar stand-ins, <code>.skeleton-pill</code> for chip stand-ins. </p> </div> <div class="tw:flex tw:items-center tw:gap-3"> <span class="skeleton skeleton-circle tw:w-10 tw:h-10"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-24"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-16"></span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="skeleton skeleton-circle tw:w-10 tw:h-10"></span></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Result-card Skeleton</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Composition:</strong> Mirror the real result card's layout — photo block, title bar, meta bars, chip row. Used by the Template Library loading state. </p> </div> <div class="tw:flex tw:flex-col tw:gap-3 tw:max-w-3xl"> <div class="card"> <div class="card-body tw:grid tw:grid-cols-[120px_1fr] tw:gap-3.5"> <span class="skeleton tw:h-27"></span> <div class="tw:flex tw:flex-col tw:gap-2"> <span class="skeleton tw:h-4.5 tw:w-3/5"></span> <span class="skeleton tw:h-3 tw:w-2/5"></span> <span class="skeleton tw:h-3 tw:w-4/5"></span> <div class="tw:flex tw:gap-1.5 tw:mt-1"> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> </div> </div> </div> </div> <div class="card"> <div class="card-body tw:grid tw:grid-cols-[120px_1fr] tw:gap-3.5"> <span class="skeleton tw:h-27"></span> <div class="tw:flex tw:flex-col tw:gap-2"> <span class="skeleton tw:h-4.5 tw:w-3/5"></span> <span class="skeleton tw:h-3 tw:w-2/5"></span> <span class="skeleton tw:h-3 tw:w-4/5"></span> <div class="tw:flex tw:gap-1.5 tw:mt-1"> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> </div> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="card"><div class="card-body"><span class="skeleton …"></span>…</div></div></code> </div> </div></div>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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <%# Introductory callout %> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SKELETON:</strong> Loading placeholder bars<br> <strong>VARIANTS:</strong> Bar (default) | Circle | Pill </p> <p class="tw:mb-0 tw:text-sm"> Gray shimmer blocks that stand in for content while it loads. The caller shapes each bar with width/height/rounding utilities; the component owns only the fill and shimmer animation (disabled under <code>prefers-reduced-motion</code>). </p> </div> <%# Basic bars %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Bars</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Bars:</strong> Size every bar with <code>tw:h-*</code> / <code>tw:w-*</code> utilities. Match the shape of the content being replaced. </p> </div> <div class="tw:flex tw:flex-col tw:gap-2 tw:max-w-md"> <span class="skeleton tw:h-4.5 tw:w-3/5"></span> <span class="skeleton tw:h-3 tw:w-2/5"></span> <span class="skeleton tw:h-3 tw:w-4/5"></span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="skeleton tw:h-4.5 tw:w-3/5"></span></code> </div> </div> <%# Shapes %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Circle & Pill</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Shapes:</strong> <code>.skeleton-circle</code> for avatar stand-ins, <code>.skeleton-pill</code> for chip stand-ins. </p> </div> <div class="tw:flex tw:items-center tw:gap-3"> <span class="skeleton skeleton-circle tw:w-10 tw:h-10"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-24"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-16"></span> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="skeleton skeleton-circle tw:w-10 tw:h-10"></span></code> </div> </div> <%# Card example %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Result-card Skeleton</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Composition:</strong> Mirror the real result card's layout — photo block, title bar, meta bars, chip row. Used by the Template Library loading state. </p> </div> <div class="tw:flex tw:flex-col tw:gap-3 tw:max-w-3xl"> <% 2.times do %> <div class="card"> <div class="card-body tw:grid tw:grid-cols-[120px_1fr] tw:gap-3.5"> <span class="skeleton tw:h-27"></span> <div class="tw:flex tw:flex-col tw:gap-2"> <span class="skeleton tw:h-4.5 tw:w-3/5"></span> <span class="skeleton tw:h-3 tw:w-2/5"></span> <span class="skeleton tw:h-3 tw:w-4/5"></span> <div class="tw:flex tw:gap-1.5 tw:mt-1"> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> <span class="skeleton skeleton-pill tw:h-5.5 tw:w-20"></span> </div> </div> </div> </div> <% end %> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="card"><div class="card-body"><span class="skeleton …"></span>…</div></div></code> </div> </div></div>No notes provided.
No params configured.