Skeleton

A loading placeholder component that displays animated pulse effect, commonly used to indicate content is being loaded.

1
---
2
import { Skeleton } from '@bejamas/ui/components/skeleton';
3
---
4

5
<div class="flex items-center gap-4">
6
  <Skeleton class="h-12 w-12 rounded-full" />
7
  <div class="space-y-2">
8
    <Skeleton class="h-4 w-[250px]" />
9
    <Skeleton class="h-4 w-[200px]" />
10
  </div>
11
</div>

Installation

bunx bejamas add skeleton

npx bejamas add skeleton

pnpm dlx bejamas add skeleton

yarn dlx bejamas add skeleton

Usage

1
---
2
import { Skeleton } from '@bejamas/ui/components/skeleton';
3
---
4

5
<Skeleton class="h-4 w-[250px]" />

Examples

Avatar

1
---
2
import { Skeleton } from '@bejamas/ui/components/skeleton';
3
---
4

5
<div class="flex w-fit items-center gap-4">
6
  <Skeleton class="size-10 shrink-0 rounded-full" />
7
  <div class="grid gap-2">
8
    <Skeleton class="h-4 w-[150px]" />
9
    <Skeleton class="h-4 w-[100px]" />
10
  </div>
11
</div>

Card

1
---
2
import { Card, CardContent, CardHeader } from '@bejamas/ui/components/card';
3
import { Skeleton } from '@bejamas/ui/components/skeleton';
4
---
5

6
<Card class="w-full max-w-xs">
7
  <CardHeader>
8
    <Skeleton class="h-4 w-2/3" />
9
    <Skeleton class="h-4 w-1/2" />
10
  </CardHeader>
11
  <CardContent>
12
    <Skeleton class="aspect-video w-full" />
13
  </CardContent>
14
</Card>

Text

1
---
2
import { Skeleton } from '@bejamas/ui/components/skeleton';
3
---
4

5
<div class="flex w-full max-w-xs flex-col gap-2">
6
  <Skeleton class="h-4 w-full" />
7
  <Skeleton class="h-4 w-full" />
8
  <Skeleton class="h-4 w-3/4" />
9
</div>

Form

1
---
2
import { Skeleton } from '@bejamas/ui/components/skeleton';
3
---
4

5
<div class="flex w-full max-w-xs flex-col gap-7">
6
  <div class="flex flex-col gap-3">
7
    <Skeleton class="h-4 w-20" />
8
    <Skeleton class="h-8 w-full" />
9
  </div>
10
  <div class="flex flex-col gap-3">
11
    <Skeleton class="h-4 w-24" />
12
    <Skeleton class="h-8 w-full" />
13
  </div>
14
  <Skeleton class="h-8 w-24" />
15
</div>

Table

1
---
2
import { Skeleton } from '@bejamas/ui/components/skeleton';
3
---
4

5
<div class="flex w-full max-w-sm flex-col gap-2">
6
  <div class="flex gap-4">
7
    <Skeleton class="h-4 flex-1" />
8
    <Skeleton class="h-4 w-24" />
9
    <Skeleton class="h-4 w-20" />
10
  </div>
11
  <div class="flex gap-4">
12
    <Skeleton class="h-4 flex-1" />
13
    <Skeleton class="h-4 w-24" />
14
    <Skeleton class="h-4 w-20" />
15
  </div>
16
  <div class="flex gap-4">
17
    <Skeleton class="h-4 flex-1" />
18
    <Skeleton class="h-4 w-24" />
19
    <Skeleton class="h-4 w-20" />
20
  </div>
21
  <div class="flex gap-4">
22
    <Skeleton class="h-4 flex-1" />
23
    <Skeleton class="h-4 w-24" />
24
    <Skeleton class="h-4 w-20" />
25
  </div>
26
  <div class="flex gap-4">
27
    <Skeleton class="h-4 flex-1" />
28
    <Skeleton class="h-4 w-24" />
29
    <Skeleton class="h-4 w-20" />
30
  </div>
31
</div>