Statuses

Skeleton

A placeholder UI component that improves perceived performance by mimicking the final layout while content loads dynamically.

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 for more information.

Manual Installation

Anatomy

Soft

The soft prop makes the skeleton slightly darker. By default, it is set to false.

Shape

Sometimes, you may need a skeleton with a specific shape. For example, if you want all skeletons to be circular, you can simply add rounded-full to the skeleton component. This example demonstrates how to achieve that by styling the skeleton from its parent.

Previous
Progress Circle
Next
Toast