Skip to main contentSkip to sidebarSkip to headerSkip to footer

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.

View in Storybook ↗