Skeleton

Feedback

A placeholder that mimics the shape of content while it loads, reducing perceived wait time.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add skeleton

Import the component directly from the package:

import { Skeleton } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
className	string	Additional CSS classes to apply.

Uses `aria-hidden="true"` since skeleton placeholders are decorative. Content should be announced when loaded.

AlertBrief attention-grabbing messages.

ProgressTask completion indicator.

SonnerToast notification system.

SpinnerLoading progress indicator.

ToastTransient notification.