Skeleton

---
import { Skeleton } from "@/components/ui/skeleton"
---

<div class="w-full max-w-sm space-y-2">
  <Skeleton class="h-12 w-12 rounded-full" />
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-3/4" />
</div>

Installation

To install the skeleton component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton"

<Skeleton class="h-12 w-12 rounded-full" />
<Skeleton class="h-4 w-full" />

Examples

Avatar Skeleton

---
import { Skeleton } from "@/components/ui/skeleton"
---

<Skeleton class="h-12 w-12 rounded-full" />

Text Skeleton

---
import { Skeleton } from "@/components/ui/skeleton"
---

<div class="space-y-2">
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-3/4" />
</div>

Card Skeleton

---
import { Skeleton } from "@/components/ui/skeleton"
---

<div class="space-y-2 rounded-md border p-4">
  <Skeleton class="h-4 w-3/4" />
  <Skeleton class="h-4 w-1/2" />
</div>