Skip to content
StudioCMS
UI
Docs

Skeleton

An extremely customizable skeleton loading component.

Usage

'Read the “', Usage, '” section'

Variant

'Read the “', Variant, '” section'

You can use the variant prop to change the skeleton’s appearance. The following variants are available:

  • card
  • text
  • block
  • circle

Width/Height

'Read the “', Width/Height, '” section'

The width and height props can be used to set the width and height of the skeleton. The value can be a string ending in % or px or rem to specify the size in percentage, pixels or rem respectively.

Radius

'Read the “', Radius, '” section'

You can use the radius prop to change the border radius of the skeleton. The following radius sizes are available:

  • none
  • sm
  • md
  • lg

The default value is lg.

Animation

'Read the “', Animation, '” section'

You can use the animation prop to change the animation of the skeleton. The following animations are available:

  • none
  • slide
  • pulse

The default value is slide.

Card Variant

'Read the “', Card Variant, '” section'

The Skeleton component is meant to be used as a container for other Skeleton components. There is no animation state for the card variant. By default, the card variant will take up the full width of its container.

The Skeleton component also supports the following props for the card variant:

  • direction
  • hAlign
  • vAlign
  • gap

Direction

'Read the “', Direction, '” section'

You can use the direction prop to change the direction of the skeleton. The following directions are available:

  • row
  • column

The default value is column.

Horizontal Alignment

'Read the “', Horizontal Alignment, '” section'

You can use the hAlign prop to change the horizontal alignment of the skeleton. The following alignments are available:

  • start
  • center
  • end

The default value is center.

Vertical Alignment

'Read the “', Vertical Alignment, '” section'

You can use the vAlign prop to change the vertical alignment of the skeleton. The following alignments are available:

  • start
  • center
  • end

The default value is center.

Gap

'Read the “', Gap, '” section'

You can use the gap prop to change the gap between the skeletons. The default value is 0.5rem.