This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Skeleton

Version: 0.133.0

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.

Import

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

Behavior

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

Loading...

Variations

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...

Props

NameTypeDescriptionRequiredDefault
csxStyleObjectCustom styles🚫{}
shaperect, or circleSkeleton's shape🚫circle
elementElementTypeElement to render🚫'div'