Loading Skeleton

Skeleton screen for dashboard card layout with chart, stats, and table

Feedback & Statusskeletonloadingplaceholdershimmer

Dependencies

shadcn/ui components needed:

npx shadcn@latest add skeletonnpx shadcn@latest add cardnpx shadcn@latest add separator

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1import { Skeleton } from '@/components/ui/skeleton';
2import { Card, CardContent, CardHeader } from '@/components/ui/card';
3import { Separator } from '@/components/ui/separator';
4
5export default function LoadingSkeleton() {
6  return (
7    <div className="space-y-4 p-6">
8      <Card>
9        <CardHeader>
10          <Skeleton className="h-6 w-48" />
11          <Skeleton className="h-4 w-64" />
12        </CardHeader>
13        <CardContent className="space-y-4">
14          <Skeleton className="h-64 w-full rounded-lg" />
15          <Separator />
16          <div className="grid grid-cols-3 gap-4">
17            {[1, 2, 3].map((i) => (
18              <Card key={i}>
19                <CardContent className="p-4">
20                  <div className="flex items-center gap-3">
21                    <Skeleton className="h-10 w-10 rounded-full" />
22                    <div className="space-y-2">
23                      <Skeleton className="h-4 w-20" />
24                      <Skeleton className="h-3 w-16" />
25                    </div>
26                  </div>
27                </CardContent>
28              </Card>
29            ))}
30          </div>
31          <Separator />
32          <div className="space-y-3">
33            {[1, 2, 3, 4, 5].map((i) => (
34              <div key={i} className="flex items-center gap-4">
35                <Skeleton className="h-10 w-10 rounded" />
36                <Skeleton className="h-4 flex-1" />
37                <Skeleton className="h-4 w-24" />
38                <Skeleton className="h-4 w-20" />
39                <Skeleton className="h-8 w-8 rounded" />
40              </div>
41            ))}
42          </div>
43        </CardContent>
44      </Card>
45    </div>
46  );
47}