Skeleton

A placeholder component used to represent content while it's loading.

Usage

The Skeleton component provides a visual cue that content is being loaded. It can be used to mimic the layout of the actual content, such as text, images, or cards.

import { Skeleton } from "@elemnts-ui/react"

<Skeleton h="20px" w="full" />

Examples

Effects

The Skeleton supports two types of animations: pulse (default) and shimmer.

Text Only

The textOnly prop allows you to skeletonize inline text. It uses display: inline and adjusts the width to fit the content.

API Reference

The Skeleton component is a styled ark.div and accepts all standard HTML div props in addition to the following variants:

Prop	Type	Default
effect	`'pulse' \| 'shimmer'`	`'pulse'`
textOnly	`boolean`	`false`