Skeleton

Loading placeholder with pulsing animation. Use to indicate content is being loaded.

Import

import { Skeleton } from "poyraz-ui/atoms";

Basic

Simple skeleton shapes.

<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-12 w-12" />

Card Placeholder

Composing skeletons to mimic a card layout.

<div className="flex items-center gap-4">
  <Skeleton className="h-12 w-12" />
  <div className="space-y-2 flex-1">
    <Skeleton className="h-4 w-3/4" />
    <Skeleton className="h-4 w-1/2" />
  </div>
</div>

Full Card Skeleton

A complete card loading state.

<div className="border-2 border-dashed border-slate-200 p-6 space-y-4 max-w-sm">
  <Skeleton className="h-40 w-full" />
  <Skeleton className="h-5 w-2/3" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-4/5" />
  <Skeleton className="h-9 w-24" />
</div>