Skeleton
Displays a temporary placeholder until the content finishes loading.
1import { FileImage } from 'lucide-react'
2
3import { Skeleton } from '@/components/ui/skeleton'
4
5export function SkeletonDemo() {
6 return (
7 <div className="relative flex w-56 grow flex-col gap-4 sm:w-72 ">
8 <Skeleton className="grid h-44 place-content-center rounded-xl">
9 <FileImage className="size-8 stroke-[1.5px] text-gray-500" />
10 </Skeleton>
11 <div className="space-y-3">
12 <Skeleton className="h-4 w-[calc(100%-30%)]" />
13 <div className="space-y-1.5">
14 <Skeleton className="h-2.5 w-full" />
15 <Skeleton className="h-2.5 w-full" />
16 <Skeleton className="h-2.5 w-full" />
17 </div>
18 <div className="flex items-center gap-2">
19 <Skeleton className="h-2.5 w-10" />
20 <Skeleton className="h-2.5 w-10" />
21 </div>
22 </div>
23 </div>
24 )
25}
26Installation
1
Install the following dependencies:
npx shadcn@latest add https://sbthemes-storev2.vercel.app/r/skeleton.json
Examples
Avatar List
1import { UserRound } from 'lucide-react'
2
3import { Skeleton } from '@/components/ui/skeleton'
4
5export function SkeletonAvatarList() {
6 return (
7 <div className="relative flex w-56 grow flex-col gap-4 sm:w-80">
8 <div className="flex items-center gap-2.5 sm:gap-4">
9 <Skeleton className="grid size-12 place-content-center rounded-full">
10 <UserRound className="size-6 text-gray-500" />
11 </Skeleton>
12 <div className="grow space-y-2">
13 <Skeleton className="h-4 w-full" />
14 <Skeleton className="h-2.5 w-[calc(100%-15%)]" />
15 </div>
16 </div>
17 <div className="flex items-center gap-2.5 sm:gap-4">
18 <Skeleton className="grid size-12 place-content-center rounded-full">
19 <UserRound className="size-6 text-gray-500" />
20 </Skeleton>
21 <div className="grow space-y-2">
22 <Skeleton className="h-4 w-full" />
23 <Skeleton className="h-2.5 w-[calc(100%-15%)]" />
24 </div>
25 </div>
26 <div className="flex items-center gap-2.5 sm:gap-4">
27 <Skeleton className="grid size-12 place-content-center rounded-full">
28 <UserRound className="size-6 text-gray-500" />
29 </Skeleton>
30 <div className="grow space-y-2">
31 <Skeleton className="h-4 w-full" />
32 <Skeleton className="h-2.5 w-[calc(100%-15%)]" />
33 </div>
34 </div>
35 </div>
36 )
37}
38Table
1import { UserRound } from 'lucide-react'
2
3import { Skeleton } from '@/components/ui/skeleton'
4
5export function SkeletonTable() {
6 return (
7 <div className="relative flex w-56 grow flex-col gap-4 sm:w-80">
8 <div className="grid grid-cols-2 items-center">
9 <Skeleton className="h-4 w-[calc(100%-60%)] rounded-xl" />
10 <Skeleton className="ms-auto h-2.5 w-[calc(100%-30%)] rounded-xl" />
11 </div>
12 <table className="[&_td]:px-2 [&_td]:py-2.5 [&_td]:first:ps-0! [&_td]:last:w-0! [&_td]:last:pe-0! [&_th]:px-2 [&_th]:py-2.5 [&_th]:first:ps-0!">
13 <thead>
14 <tr>
15 <th>
16 <Skeleton className="h-5 max-w-20" />
17 </th>
18 <th>
19 <Skeleton className="h-5 max-w-20" />
20 </th>
21 <th>
22 <Skeleton className="h-5 max-w-20" />
23 </th>
24 </tr>
25 </thead>
26 <tbody>
27 <tr>
28 <td>
29 <Skeleton className="h-3 w-full" />
30 </td>
31 <td>
32 <Skeleton className="h-3 w-full" />
33 </td>
34 <td>
35 <Skeleton className="h-3 w-full" />
36 </td>
37 <td>
38 <Skeleton className="h-3 w-3 rounded" />
39 </td>
40 </tr>
41 <tr>
42 <td>
43 <Skeleton className="h-3 w-full" />
44 </td>
45 <td>
46 <Skeleton className="h-3 w-full" />
47 </td>
48 <td>
49 <Skeleton className="h-3 w-full" />
50 </td>
51 <td>
52 <Skeleton className="h-3 w-3 rounded" />
53 </td>
54 </tr>
55 <tr>
56 <td>
57 <Skeleton className="h-3 w-full" />
58 </td>
59 <td>
60 <Skeleton className="h-3 w-full" />
61 </td>
62 <td>
63 <Skeleton className="h-3 w-full" />
64 </td>
65 <td>
66 <Skeleton className="h-3 w-3 rounded" />
67 </td>
68 </tr>
69 <tr>
70 <td>
71 <Skeleton className="h-3 w-full" />
72 </td>
73 <td>
74 <Skeleton className="h-3 w-full" />
75 </td>
76 <td>
77 <Skeleton className="h-3 w-full" />
78 </td>
79 <td>
80 <Skeleton className="h-3 w-3 rounded" />
81 </td>
82 </tr>
83 </tbody>
84 </table>
85 </div>
86 )
87}
88API Reference
This component is based on the <div> element .
On This Page