Skeleton

Use to show a placeholder while content is loading.

Installation

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.

pnpm dlx shadcn@latest add skeleton

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

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

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

export function SkeletonDemo() {

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

export function SkeletonAvatar() {

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

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

export function SkeletonText() {

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

export function SkeletonForm() {

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

export function SkeletonTable() {