Skip to main content


Used to display a loading state for page content.


import { Skeleton } from '@pluralsight/react'


  1. Container
  2. Content (optional)
  3. Text (optional)


Text Skeleton

Used to represent where lines of text may appear within your page.

Live Editor

Content Block Skeleton

Used to represent where a block of content may appear within your page.

Live Editor

Circular Skeleton

Used to represent where circular shaped content may appear within your page.

Live Editor

Fallback Example

Used to design a Profile Card loading state to pass into a React Suspense component via the fallback property to easily managing the show/hide logic.

Live Editor
Diving deeper into page loading

Learn more about the page loading pattern in the Page Loading Pattern lesson.


There are 3 ways to customize the Skeleton component.

1. Unused Classes

Each component layer of the Skeleton has a unused class name that can be utilized in your local CSS to customize the Skeleton at any level.

  1. pando-skeleton: The element of the Skeleton.

2. Passing a className prop

You can pass a className prop to the Skeleton component to customize the Skeleton. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

Example of using CSS Modules to customize the Skeleton.
import customStyles from './customStyles.module.css'

function CustomTextSkeleton(props) {
return (
<Skeleton kind="text" className={customStyles.customSkeleton}>

3. Ejected Skeleton

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Skeleton however you prefer while keeping the accessibility behavior.

import { getSkeletonProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.



Do use a 1px border when creating a container for Skeleton content.

Don't use the Skeleton for a container. Instead, use a border with multiple Skeletons that match the content within the container.


Do use a Skeleton to represent content of a page that is in the process of loading.

Don't use a Skeleton for static content or as a placeholder for dynamic content.



interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
kind?: 'content' | 'text' | 'circle'
  1. Any props that can be passed to a div element.
  2. kind - determines the style of the Skeleton. The default value is content.


The Pando Skeleton combined with semantic HTML allow the Skeleton to be fully accessible and screen-readable by default.