Skeleton

Loading placeholder with pulse animation

Text Lines

Usage

import { Skeleton } from '@tryvienna/ui'

<div className="grid gap-2 w-80">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

Examples

Text Lines

Text Lines

<div className="grid gap-2 w-80">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

Avatar Placeholder

Avatar Placeholder

<div className="flex items-center gap-4">
  <Skeleton className="size-10 rounded-full" />
  <div className="grid gap-2">
    <Skeleton className="h-4 w-32" />
    <Skeleton className="h-4 w-24" />
  </div>
</div>

Card Placeholder

Card Placeholder

<div className="grid gap-4 w-80 rounded-xl border p-6">
  <Skeleton className="h-32 w-full rounded-lg" />
  <div className="grid gap-2">
    <Skeleton className="h-4 w-3/4" />
    <Skeleton className="h-4 w-1/2" />
  </div>
  <Skeleton className="h-10 w-full" />
</div>

API Reference

Skeleton

Also accepts all props from div.

Data Attributes

Component	data-slot
Skeleton	"skeleton"