Skeleton Component

ℹ️

Skeleton is a React component designed to create loading skeleton UIs to enhance user experience during content loading. It supports customization of width, height, and shape of the skeleton. This component is inspired by the DaisyUI (opens in a new tab) framework's design for skeleton loading.

Example Preview

Skeleton Example

Usage

import { Skeleton } from "@/@core";
 
// Render Skeleton component with default or customized props
const MyLoadingComponent = () => {
  return <Skeleton width={100} height={16} shape="round" />;
};
 
export default MyLoadingComponent;

Props

Prop name	Type	Default value	Required	Description
`width`	`string`, `number`	`100%`	No	Width of the skeleton.
`height`	`string`, `number`	`16px`	No	Height of the skeleton.
`shape`	`circle`, `round`, `square`	`circle`	No	Shape of the skeleton.

ℹ️

Note: The Skeleton component accepts additional HTML attributes (HTMLAttributes<HTMLDivElement>).

Example

Here is an example of using the Skeleton component with default or customized props:

<Skeleton width={100} height={16} shape="round" />

This will render a skeleton loading component with a default width of 100 pixels, height of 16 pixels, and a rounded shape. You can customize these props as needed.

ℹ️

Note: The Skeleton component provides a visually appealing loading experience and is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components.

Progress Steps