Skeleton

Skeleton is a placeholder component that displays while content is loading.

On this page

Props

isLoading

<Skeleton>
  <div className="flex items-center gap-4">
    <Skeleton className="size-12 rounded-full" />
    <div className="space-y-2">
      <Skeleton className="h-4 w-32" />
      <Skeleton className="h-4 w-24" />
    </div>
  </div>
</Skeleton>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/skeleton

Usage

Use skeleton components as placeholders while content is loading.

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

<Skeleton isLoading={true}>
  <Skeleton className="h-4 w-32" />
</Skeleton>

Examples

isLoading

Design system report

Updated a few seconds ago

Component usage is growing across product surfaces.

WorkspaceVisible to everyone on your team.

API Reference

Skeleton

A skeleton displays a placeholder preview of content before it loads. It can render as a standalone shape or wrap existing content, showing matching elements as placeholders while loading.

Supports all div attributes.

Prop	Type	Default
	`boolean`	`—`

Last updated on 6/16/2026