The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

Skeleton

Source

A placeholder component used to indicate loading content.

Usage

Import the Skeleton component from @bun-ui/react and use it in your project:

import { Skeleton } from "@bun-ui/react"
<Skeleton width={100} height={100} />

Examples

Image

The Skeleton component supports different variants such as circle and rectangle. Use the variant prop to specify the shape.

Card

Props

Skeleton

PropTypeDefaultDescription
className
string-

Additional CSS classes to apply to the skeleton element. Use this to customize the styling beyond the built-in variants.

height
string | number-

The height of the skeleton element. Can be a CSS value (string) or number (interpreted as pixels).

variant
"circular" | "rectangular""rectangular"

The visual variant of the skeleton. Controls the shape and border radius of the skeleton element.

width
string | number-

The width of the skeleton element. Can be a CSS value (string) or number (interpreted as pixels).