<div className="flex flex-col gap-3 w-64">
<SkeletonLine />
<SkeletonLine />
<SkeletonLine />
</div>Installation
import { SkeletonLine } from "@cloudflare/kumo";Custom Widths
Control the randomized width range for more natural-looking skeletons.
<div className="flex flex-col gap-3 w-64">
<SkeletonLine minWidth={80} maxWidth={100} />
<SkeletonLine minWidth={60} maxWidth={80} />
<SkeletonLine minWidth={40} maxWidth={60} />
</div>Card Loading State
Use skeleton lines to create loading states for cards and content areas.
<div className="p-4 rounded-lg ring ring-kumo-line w-64">
<div className="h-4 mb-4">
<SkeletonLine minWidth={40} maxWidth={60} />
</div>
<div className="flex flex-col gap-2">
<SkeletonLine />
<SkeletonLine />
<SkeletonLine minWidth={50} maxWidth={70} />
</div>
</div>API Reference
| Prop | Type | Default |
|---|---|---|
| minWidth | number | 30 |
| maxWidth | number | 100 |
| minDuration | number | 1.3 |
| maxDuration | number | 1.7 |
| minDelay | number | 0 |
| maxDelay | number | 0.5 |
| className | string | - |