The Skeleton component provides animated placeholder shapes that indicate content is loading. Use skeletons to reduce perceived load time and prevent layout shift.

Installation

shellui add skeleton

Basic Usage

<Skeleton Class="h-4 w-[250px]" />

The default styling applies animate-pulse rounded-md bg-muted for a smooth pulsing effect.

Text Skeleton

Simulate loading text with varying widths:

<div class="space-y-2">
  <Skeleton Class="h-4 w-[300px]" />
  <Skeleton Class="h-4 w-[250px]" />
  <Skeleton Class="h-4 w-[200px]" />
</div>

Card Skeleton

Match the layout of a card component:

<div class="flex flex-col space-y-3">
  <Skeleton Class="h-[200px] w-full rounded-xl" />
  <div class="space-y-2">
    <Skeleton Class="h-4 w-[250px]" />
    <Skeleton Class="h-4 w-[200px]" />
  </div>
</div>

Profile Skeleton

Simulate a user profile loading state:

<div class="flex items-center space-x-4">
  <Skeleton Class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton Class="h-4 w-[150px]" />
    <Skeleton Class="h-4 w-[100px]" />
  </div>
</div>

Table Skeleton

Placeholder for loading table rows:

<div class="space-y-3">
  <div class="flex space-x-4">
    <Skeleton Class="h-4 w-[100px]" />
    <Skeleton Class="h-4 w-[200px]" />
    <Skeleton Class="h-4 w-[80px]" />
  </div>
  @for (var i = 0; i < 5; i++)
  {
    <div class="flex space-x-4">
      <Skeleton Class="h-4 w-[100px]" />
      <Skeleton Class="h-4 w-[200px]" />
      <Skeleton Class="h-4 w-[80px]" />
    </div>
  }
</div>

Conditional Loading

Toggle between skeleton and real content:

@if (isLoading)
{
  <div class="space-y-2">
    <Skeleton Class="h-8 w-[200px]" />
    <Skeleton Class="h-4 w-full" />
    <Skeleton Class="h-4 w-full" />
  </div>
}
else
{
  <div>
    <h2>@title</h2>
    <p>@description</p>
  </div>
}

API Reference

Property	Type	Default	Description
`ChildContent`	`RenderFragment`	`null`	Optional content inside the skeleton
`Class`	`string?`	`null`	CSS classes for sizing and shape

Default CSS

The Skeleton renders with animate-pulse rounded-md bg-muted applied automatically. Override with the Class parameter.

Accessibility

The Skeleton component includes:

aria-hidden="true" to hide from screen readers
Use alongside aria-busy="true" on the loading container
No interactive elements within skeletons

Skeleton

On this page