Components
Skeleton
A pulsing placeholder block for loading states.
Installation
- $npx litefy@latest add skeleton
- $pnpm dlx litefy@latest add skeleton
- $yarn dlx litefy@latest add skeleton
- $bun --bun litefy@latest add skeleton
Usage
Text lines.
import { Skeleton } from "@/ui";
export default function SkeletonTextDemo() {
return (
<div className="w-full max-w-sm space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-11/12" />
<Skeleton className="h-4 w-4/5" />
<Skeleton className="h-4 w-3/5" />
</div>
);
}
Avatar
Combine a circle block with lines to sketch a user row.
import { Skeleton } from "@/ui";
export default function SkeletonAvatarDemo() {
return (
<div className="flex w-full max-w-sm items-center gap-3">
<Skeleton className="h-12 w-12 shrink-0 rounded-full" />
<div className="w-full space-y-2">
<Skeleton className="h-3 w-1/3" />
<Skeleton className="h-3 w-1/2" />
</div>
</div>
);
}
API Reference
Skeleton
A pulsing placeholder block. It fills its container by default (size-full); pass className to shape it. The base color follows the --color-neutral theme token.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class, e.g. h-4 w-1/2 rounded-full |
...props | React.ComponentProps<"div"> | - | Supports all native div props |