Skeleton
A loading state skeleton for your components.
Overview
Use Skeleton to reserve space while content is loading.
Skeletons are useful for cards, tables, lists, avatars, charts, and forms where the layout is known before the data arrives.
Anatomy
A skeleton is a neutral placeholder shape. It should roughly match the size and rhythm of the content that will replace it.
Usage guidance
Use skeletons for short loading states where preserving layout helps. Avoid showing too many animated placeholders at once.
Accessibility
Do not announce every skeleton as content. Pair long loading states with clear loading text when users need to understand what is happening.
Installation
npm
npx love-ui@latest add skeletonUsage
import { Skeleton } from "@/components/ui/skeleton"<Skeleton className="size-10 rounded-full" />Examples
The examples show a composed loading layout and a standalone skeleton primitive.