<div className="flex flex-col gap-2 w-[200px]">
<SkeletonLine minWidth={50} maxWidth={100} />
<SkeletonLine minWidth={100} />
<SkeletonLine minWidth={50} maxWidth={150} />
</div>Installation
import { SkeletonLine } from "~/components/loader/skeleton-line";Usage
import { SkeletonLine } from "~/components/loader/skeleton-line";
export default function Example() {
return (
<div className="space-y-2">
<SkeletonLine />
<SkeletonLine />
<SkeletonLine />
</div>
);
}Examples
Variable Width
<div className="flex flex-col gap-2 w-[300px]">
<SkeletonLine minWidth={50} maxWidth={100} />
<SkeletonLine minWidth={100} maxWidth={200} />
<SkeletonLine minWidth={150} maxWidth={250} />
</div>Text Block
<div className="flex flex-col gap-2 w-[400px]">
<SkeletonLine minWidth={300} maxWidth={400} />
<SkeletonLine minWidth={350} maxWidth={400} />
<SkeletonLine minWidth={200} maxWidth={300} />
<SkeletonLine minWidth={300} maxWidth={400} />
</div>API Reference
| Prop | Type | Default |
|---|---|---|
| minWidth | number | undefined |
| maxWidth | number | undefined |