Skip to main content


The Skeleton component in Pearl UI is a versatile tool used to create a visual placeholder for content that is loading or will be loaded. It can be customized in terms of start color, end color, animation speed, fade duration, and more.


import { Skeleton, SkeletonCircle, SkeletonText } from "pearl-ui";


The Skeleton component can be used in a variety of ways to represent loading states in your application. Here are a few examples:

// Basic usage of Skeleton<Skeleton />
// Customizing Skeleton with startColor and endColor<Skeleton startColor="neutral.100" endColor="neutral.200" />
// Using Skeleton to conditionally show children using the `isLoaded` prop// When `isLoaded` is `true`, the children of the Skeleton component will be rendered<Skeleton isLoaded={dataIsLoaded}>  <Text>Your content here</Text></Skeleton>

Circle and Text Skeleton#

The SkeletonCircle and SkeletonText components are specialized versions of the Skeleton component. They are used to create placeholders for circular and textual content respectively. Here is an example of how to use them:

<Box padding="6" boxShadow="l" bgColor="white">  <SkeletonCircle boxSize={50} />  <SkeletonText mt="4" noOfLines={4} spacing="4" skeletonHeight={20} /></Box>

Conditionally Rendering Content with Skeleton#

The Skeleton component can be used to conditionally render its children. This is done using the isLoaded prop. When isLoaded is true, the children of the Skeleton component will be rendered with a smooth fade transition. This feature is particularly useful when you want to display a loading state while fetching data. Here is an example:

// Assume `dataIsLoaded` is a state variable that tracks if the data is loaded<Skeleton isLoaded={dataIsLoaded}>  <Text>Your content here</Text></Skeleton>

In the above example, the text "Your content here" will only be rendered when dataIsLoaded is true. Until then, the Skeleton component will be displayed, providing a seamless loading experience for your users.

Changing Skeleton Colors#

The Skeleton's start and end colors can be changed using the startColor and endColor props. This allows you to set the color of the skeleton at the start and end of the animation.

<Skeleton startColor="neutral.100" endColor="neutral.200" />

Overriding Default Styles#

The Skeleton component supports a variety of style props which can be used to override the pre-defined styles in the theme. Any manual style props passed into the component will take precedence over the default component configuration.

// Example: Overriding the default start and end colors<Skeleton startColor="neutral.100" endColor="neutral.200" />


Skeleton Component Properties#

Supported Style Properties#

The Skeleton component supports the following style props:

Animation Properties#

The Skeleton component inherits animation properties from the Box component, which are managed by the Moti library. This allows for the creation of dynamic and interactive UI elements. The useMotiWithStyleProps hook from the Moti library is utilized to manage these animation properties.

fromobjectDefines the starting state of the animation.
toobjectDefines the ending state of the animation.
transitionobjectSpecifies the type of transition that the animation will use.
exitTransitionobjectDetermines the transition type that will be used when the component is unmounted. By default, exit uses transition to configure its animations, so this prop is not required. However, if you pass exitTransition, it will override transition for exit animations.
stateobjectManages the overall state of the animation, including the from and to states.
delaynumberManage the delay for the animate field. (Use the transition prop for more granular control)
onDidAnimate() => voidCallback function called after finishing an animation.
stylePriority"state" | "animate""animate"This is not a prop you will likely find yourself using. If set to "animate", then styles passed from the animate prop will take precedent. Otherwise, if set to "state", then the state prop will take precedent for matching styles.
animateInitialStatebooleanfalseIf true, the from prop will be set to animate. This will be noticeable for some spring animations, and might make them jumpy on mount.

Additional Properties#

The Skeleton component also accepts the following additional props:

startColorfalsePearlTheme["palette"]The color at the animation start
endColorfalsePearlTheme["palette"]The color at the animation end
isLoadedfalsebooleanfalseIf true, it'll render its children with a fade transition
speedfalsenumber800The animation speed in milliseconds
fadeDurationfalsenumber200The fadeIn duration in milliseconds. Requires isLoaded toggled to true in order to see the transition.

SkeletonCircle Component Properties#

Supported Style Properties#

The SkeletonCircle component is composed of the Skeleton component, which means you can pass all Skeleton properties to it.

Additional Properties#

Here is a list of additional properties that the SkeletonCircle component supports:

boxSizeNonumber20Size of the skeleton circle

SkeletonText Component Properties#

Supported Style Properties#

The SkeletonText component is composed of the Skeleton component, which means you can pass all Skeleton properties to it.

Additional Properties#

Here is a list of additional properties that the SkeletonText component supports:

spacingNostring | number3Spacing between the individual skeleton text
noOfLinesNonumber3Number of lines in the skeleton text
skeletonHeightNonumber15Height of the each individual skeleton text