Blode UI
GitHub

Skeleton

PreviousNext

Use to show a placeholder while content is loading.

import { Skeleton } from "@/components/ui/skeleton";
 
export const SkeletonDemo = () => (
  <div className="flex items-center gap-4">
    <Skeleton className="h-12 w-12 rounded-full" />
    <div className="space-y-2">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
    </div>
  </div>
);

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/skeleton"

Usage

import { Skeleton } from "@/components/ui/skeleton";
<Skeleton className="w-[100px] h-[20px] rounded-full" />

Examples

Card

Loading
Loading...
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
 
export const SkeletonCard = () => (
  <Card className="w-full max-w-xs">
    <CardHeader>
      <Skeleton className="h-4 w-2/3" />
      <Skeleton className="h-4 w-1/2" />
    </CardHeader>
    <CardContent>
      <Skeleton className="aspect-video w-full" />
    </CardContent>
  </Card>
);