Components

Skeleton

A lightweight placeholder that mimics content structure while loading.

Logo

Avatar

The Avatar component provides a loading placeholder for user profile images. It maintains the expected shape and size while content is being fetched.

Card

Skeletons can be used within a Card to display a placeholder structure for a card-based UI while loading dynamic data.

Post

The Post skeleton mimics the layout of a typical post, including text and media elements, providing a smooth transition while content is loading.

Interactive Post

The Interactive Post skeleton represents a post with additional interactive elements, such as reactions and comments, ensuring a structured layout before the actual data loads.

Elara Quinn

3:30 PM

Azure Bay

A breathtaking coastal city where the ocean meets the skyline, offering stunning views and vibrant nightlife.

API Reference

className

Type:

string

Additional custom class for the skeleton component.

Default:

radius

Type:

"none" | "sm" | "md" | "lg" | "xl" | "full"

Defines the border radius of the skeleton, with `full` creating a circular shape.

Default:

sm
fullWidth

Type:

boolean

If `true`, the skeleton will take up the full available width.

Default:

false
width

Type:

number | string

Specifies the width of the skeleton. Accepts a number (px) or string (e.g., '100%').

Default:

height

Type:

number | string

Specifies the height of the skeleton. Accepts a number (px) or string (e.g., 'auto').

Default:

style

Type:

CSSProperties

Inline styles for further customization.

Default: