Skeleton

React Skeleton components are used to show placeholder layouts while content is loading. They help users understand the structure of the page before data is available and reduce perceived loading time.

This Skeleton component is built with React and styled using Tailwind CSS. It provides flexible shapes and sizes that can be combined to match real UI layouts such as text, cards, avatars, buttons, and tables.

Installation

npx @tailgrids/cli add skeleton

Usage

The Skeleton component provides a base animation. You can customize its dimensions by adjusting the height and width using className prop to match your layout requirements.

import { Skeleton } from "@/registry/core/skeleton";

export default function SkeletonUsage() {
  return <Skeleton className="h-4 w-48" />;
}

Examples

Text Lines

Use text line skeletons to simulate paragraphs or blocks of text.

Card Skeleton

A complete card layout simulation with image, title, and description placeholders.

Avatar Skeleton

Loading state for user profiles with avatar and text lines.

Different Shapes

Various geometric shapes available for different UI elements.

Button Skeleton

A placeholder for button elements.

Table Skeleton

Simulate tabulated data loading rows.

Blog Post Card

A common layout for blog posts or articles with images.

List Items

Simulate a list of items with icons and metadata.

Chart Skeleton

A dashboard-style skeleton for charts and data visualization.

API Reference

Skeleton

Extends div element props.

Accessibility

• Uses div element as a non-semantic placeholder
• Should be replaced with actual content when data loads
• Provides visual feedback during loading states
• Animation respects prefers-reduced-motion user preference