Pikas UI

@pikas-ui/skeleton

Overview

This package contains a Skeleton component that can be used to show a placeholder while the content is loading.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/skeleton

yarn add @pikas-ui/skeleton

pnpm add @pikas-ui/skeleton

Usage

Skeleton

The Skeleton component can be imported and used as follows:

import { Skeleton } from "@pikas-ui/skeleton";

const Example: React.FC = () => {
  return (
    <Skeleton animation="pulse" width="100%" height={24} />
    <Skeleton animation="wave" width="100%" height={24} />
    <Skeleton animation={false} width="100%" height={24} />
  )
}

Props

Prop	Description	Type	Default
`css`	The css of the skeleton.	`PikasCSS`	-
`width`	The width of the skeleton.	`string or number`	-
`height`	The height of the skeleton.	`string or number`	-
`borderRadius`	The border radius of the skeleton.	`PikasRadius`	`"sm"`
`animation`	The animation of the skeleton.	`SkeletonAnimation`	`"pulse"`

Contributing

This documentation can be edited on GitHub here