Skeleton

A placeholder component for loading content.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { Skeleton } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Skeleton className="size-12" />
{/* Card skeleton */}
<div className="flex flex-col gap-3 w-sm">
<Skeleton className="h-48 w-full rounded-xl" />
<div className="grid gap-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-4/5" />
</div>
</div>
{/* Text skeleton */}
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>

Additional resources

Documentation and examples are available in Storybook.