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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SKELETON:</strong> Loading placeholder primitive<br> <strong>VARIANTS:</strong> Block (base) | Text line | Circle </p> <p class="tw:mb-0 tw:text-sm"> Shape stand-ins while content loads. The component sets surface + pulse; dimensions come from width/height utilities. Wrap a skeleton group in <code>aria-busy="true"</code>. Table and timeline keep their own skeleton classes — new work uses this primitive (DR-2026-12). </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Shapes</h2> <div class="tw:flex tw:flex-wrap tw:items-end tw:gap-6" aria-busy="true"> <div class="tw-skeleton tw:w-40 tw:h-24"></div> <div class="tw-skeleton tw-skeleton-text tw:w-48"></div> <div class="tw-skeleton tw-skeleton-circle tw:size-10"></div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-skeleton tw:w-40 tw:h-24"></div></code> · <code><div class="tw-skeleton tw-skeleton-text tw:w-48"></div></code> · <code><div class="tw-skeleton tw-skeleton-circle tw:size-10"></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Composed — loading card</h2> <div class="tw-card tw:max-w-md"> <div class="tw-card-body" aria-busy="true"> <div class="tw:flex tw:items-center tw:gap-3 tw:mb-4"> <div class="tw-skeleton tw-skeleton-circle tw:size-10"></div> <div class="tw:flex-1 tw:space-y-2"> <div class="tw-skeleton tw-skeleton-text tw:w-32"></div> <div class="tw-skeleton tw-skeleton-text tw:w-24"></div> </div> </div> <div class="tw:space-y-2"> <div class="tw-skeleton tw-skeleton-text tw:w-full"></div> <div class="tw-skeleton tw-skeleton-text tw:w-full"></div> <div class="tw-skeleton tw-skeleton-text tw:w-2/3"></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-card-body" aria-busy="true">…skeleton shapes…</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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>SKELETON:</strong> Loading placeholder primitive<br> <strong>VARIANTS:</strong> Block (base) | Text line | Circle </p> <p class="tw:mb-0 tw:text-sm"> Shape stand-ins while content loads. The component sets surface + pulse; dimensions come from width/height utilities. Wrap a skeleton group in <code>aria-busy="true"</code>. Table and timeline keep their own skeleton classes — new work uses this primitive (DR-2026-12). </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Shapes</h2> <div class="tw:flex tw:flex-wrap tw:items-end tw:gap-6" aria-busy="true"> <div class="tw-skeleton tw:w-40 tw:h-24"></div> <div class="tw-skeleton tw-skeleton-text tw:w-48"></div> <div class="tw-skeleton tw-skeleton-circle tw:size-10"></div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-skeleton tw:w-40 tw:h-24"></div></code> · <code><div class="tw-skeleton tw-skeleton-text tw:w-48"></div></code> · <code><div class="tw-skeleton tw-skeleton-circle tw:size-10"></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Composed — loading card</h2> <div class="tw-card tw:max-w-md"> <div class="tw-card-body" aria-busy="true"> <div class="tw:flex tw:items-center tw:gap-3 tw:mb-4"> <div class="tw-skeleton tw-skeleton-circle tw:size-10"></div> <div class="tw:flex-1 tw:space-y-2"> <div class="tw-skeleton tw-skeleton-text tw:w-32"></div> <div class="tw-skeleton tw-skeleton-text tw:w-24"></div> </div> </div> <div class="tw:space-y-2"> <div class="tw-skeleton tw-skeleton-text tw:w-full"></div> <div class="tw-skeleton tw-skeleton-text tw:w-full"></div> <div class="tw-skeleton tw-skeleton-text tw:w-2/3"></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-card-body" aria-busy="true">…skeleton shapes…</div></code> </div> </div></div>No notes provided.
No params configured.