Skeleton

Skeleton shows a placeholder while your content loads, keeping the layout intact and users chillin' till the real deal pops in.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Basic

Skeleton is a placeholder component that displays a loading state while your content loads. It's a great way to keep your layout looking fresh and prevent users from getting stuck on a blank page.

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Intent

By default, the skeleton is displayed with a muted intent. You can change the intent by passing the intent prop. This example demonstrates different intents.

Shape

You can change the shape of the skeleton by passing the shape prop. This example demonstrates different shapes.