Skeleton

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

<div class="flex items-center gap-4">
  <Skeleton class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-[250px]" />
    <Skeleton class="h-4 w-[200px]" />
  </div>
</div>

Installation

npx shadcn@latest add @fulldev/skeleton

Usage

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

<Skeleton class="h-[20px] w-[100px] rounded-full" />

Match the approximate size of the final content to reduce layout shift. Use Skeleton for loading states, not empty states. For no-data UI, use Empty.

Avatar

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

<div class="flex w-fit items-center gap-4">
  <Skeleton class="size-10 shrink-0 rounded-full" />
  <div class="grid gap-2">
    <Skeleton class="h-4 w-[150px]" />
    <Skeleton class="h-4 w-[100px]" />
  </div>
</div>

Card

---
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
---

<Card class="w-full max-w-xs">
  <CardHeader>
    <Skeleton class="h-4 w-2/3" />
    <Skeleton class="h-4 w-1/2" />
  </CardHeader>
  <CardContent>
    <Skeleton class="aspect-video w-full" />
  </CardContent>
</Card>

Text

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

<div class="flex w-full max-w-xs flex-col gap-2">
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-3/4" />
</div>

Form

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

<div class="flex w-full max-w-xs flex-col gap-7">
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-20" />
    <Skeleton class="h-8 w-full" />
  </div>
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-8 w-full" />
  </div>
  <Skeleton class="h-8 w-24" />
</div>

Table

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

<div class="flex w-full max-w-sm flex-col gap-2">
  {Array.from({ length: 5 }).map(() => (
    <div class="flex gap-4">
      <Skeleton class="h-4 flex-1" />
      <Skeleton class="h-4 w-24" />
      <Skeleton class="h-4 w-20" />
    </div>
  ))}
</div>

RTL

Set dir="rtl" on a parent element.

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

const translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
} as const

const { dir } = translations.ar
---

<div class="flex items-center gap-4" dir={dir}>
  <Skeleton class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-[250px]" />
    <Skeleton class="h-4 w-[200px]" />
  </div>
</div>

API Reference

Source: src/components/ui/skeleton

Skeleton renders a div with data-slot="skeleton" and passes all other attributes through.

Sidebar

Search