---
title: "Skeleton"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Skeleton with animated placeholders. Text, avatar, card, and image shapes for smooth perceived performance and loading states."
url: https://frutjam.com/components/skeleton
---

# Skeleton Component

 Skeleton components display placeholder layouts while content is loading, providing visual feedback and improving perceived performance. Built with semantic HTML and pulse animations, skeleton screens prevent layout shifts and set user expectations. The Frutjam skeleton system supports multiple shapes and sizes—ideal for content preview, progressive loading, and graceful degradation.

| Class           | Type  | Description                               |
| --------------- | ----- | ----------------------------------------- |
| skeleton        | Base  | Pulsing placeholder block                 |
| skeleton-circle | Style | Circular skeleton shape                   |
| skeleton-text   | Style | Shimmer animation applied to visible text |

## Basic Usage

## Skeleton Shapes

```html
<div class="skeleton skeleton-circle h-12 w-12"></div>

<div class="skeleton h-12 w-12"></div>

<div class="skeleton h-12 w-12"></div>

<div class="skeleton h-4 w-12"></div>
```


## Skeleton Card

```html
<div class="card card-outline w-96">
  <figure class="skeleton h-64"></figure>
  <div class="card-content">
    <h2 class="skeleton h-4 w-28"></h2>
    <p class="skeleton h-3 w-full"></p>
    <p class="skeleton h-3 w-full"></p>
    <div class="card-actions justify-end">
      <div class="skeleton h-8 w-24"></div>
    </div>
  </div>
</div>
```


## Skeleton List

```html
<div class="space-y-2">
  <div class="flex items-center gap-3">
    <div class="skeleton h-10 w-10 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-2 flex-1">
      <div class="skeleton h-3 w-20"></div>
      <div class="skeleton h-3 w-full"></div>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <div class="skeleton h-10 w-10 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-2 flex-1">
      <div class="skeleton h-3 w-20"></div>
      <div class="skeleton h-3 w-full"></div>
    </div>
  </div>
</div>
```


## Skeleton Avatar

```html
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>
```


## Skeleton Profile Card

```html
<div class="flex w-52 flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
    <div class="flex flex-col gap-4">
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-28"></div>
    </div>
  </div>
  <div class="skeleton h-32 w-full"></div>
</div>
```


## Skeleton Article

```html
<div class="flex w-52 flex-col gap-4">
  <div class="skeleton h-32 w-full"></div>
  <div class="skeleton h-4 w-28"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
</div>
```


## Skeleton Text

```html
<span class="skeleton skeleton-text">AI is thinking...</span>
```