starasia Skeleton Component

The Skeleton component is used to display loading placeholders in your React application. This component is useful for improving user experience while data is being loaded.

Installation

Make sure you are using pnpm, npm, or yarn as needed for your project.

pnpm install starasia-skeleton

or

npm install starasia-skeleton

Basic Usage

Import and use the Skeleton component in your React application:

import {Skeleton} from "starasia-skeleton";

function App() {
  return (
    <div>
      <Skeleton width={200} height={20} />
    </div>
  );
}

Props

| Name | Type | Description | | ------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | width | number | string | Skeleton width (px, %, or any valid CSS width) | | height | number | string | Skeleton height (px, %, or any valid CSS height) | | borderRadius | string (preset) | string | number | Border radius for the skeleton. Can use preset (see below) or custom value | | variant | string | Skeleton type: card, full-card, avatar, button, text, multi-text, list, table, image, chart, input, input-label, video, profile |

Preset borderRadius

"rounded-none", "rounded-xs", "rounded-sm", "rounded-base", "rounded-md", "rounded-lg", "rounded-xl", "rounded-2xl", "rounded-3xl", "rounded-4xl", "rounded-full"

Advanced Example

<Skeleton width={100} height={100} borderRadius="rounded-lg" />
<Skeleton width={80} height={80} borderRadius="50%" variant="avatar" />
<Skeleton variant="full-card" />

Variant Examples

<Skeleton variant="card" />
<Skeleton variant="avatar" />
<Skeleton variant="button" />
<Skeleton variant="text" />
<Skeleton variant="multi-text" />
<Skeleton variant="list" />
<Skeleton variant="table" />
<Skeleton variant="image" />
<Skeleton variant="chart" />
<Skeleton variant="input" />
<Skeleton variant="input-label" />
<Skeleton variant="video" />
<Skeleton variant="profile" />

Contribution

Feel free to open a pull request or issue if you want to contribute or find a bug.

License

MIT