Skeleton

Skeleton is a versatile primitive component, with no defined style, that can be used to leverage UIs that don't contain actual content yet. Instead, it shows the loading elements of a page in a shape similar to the actual content. Other use cases include:

• It shows users that content is loading, offering a vague preview of how content will look once it fully loads.
• It is also used internally by AdminUI to handle the loading state of specific components.

Usage

import { Skeleton } from '@vtex/admin-ui'

export Example() {
  return <Skeleton />
}

Examples

Rectangle

By default, Skeleton's shape is rectangular. To use this variation, the shape property has the rect value.

Loading...

Circle

The shape can also be circular. To use this variation, the shape property has the circle value.

Loading...

Fluid

By default, the Skeleton is fluid, which means that both width and height are 100% of its container.

Loading...

Props

Name	Type	Description	Required	Default
csx	StyleObject	Custom styles	🚫	{}
shape	rect, circle	Skeleton's shape	🚫	rect

Best Practices

1. You should only use Skeleton with dynamic elements. This means that, you should not use Skeleton if you already have the data information.