npm install @hudoro/skeleton

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

``bash pnpm install hudoro-skeleton`

or

`bash npm install hudoro-skeleton`

`Basic Usage`

Import and use the Skeleton component in your React application:

`tsx import {Skeleton} from "hudoro-skeleton";

function App() { return (


  );
}


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 |
$3
"rounded-none", "rounded-xs", "rounded-sm", "rounded-base", "rounded-md", "rounded-lg", "rounded-xl", "rounded-2xl", "rounded-3xl", "rounded-4xl", "rounded-full"
Advanced Example

`tsx`

`Variant Examples`

`tsx``

Contribution

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

License

MIT