1. Components
  2. Skeleton


Tailwind CSS Skeleton

Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.


Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.

When to use:

  • When a resource needs long time to load.
  • When the component contains lots of information, such as List or Card.
  • Only works when loading data for the first time.
  • Could be replaced by Spin in any situation, but can provide a better user experience.

Basic usage


Simplest Skeleton usage.

Complex combination

Complex combination with avatar and multiple paragraphs.

Active animation

Display active animation.