Skeleton

A placeholder component to show a loading state while content is being fetched.

Installation


pnpm dlx bna-ui add skeleton

import { Skeleton } from '@/components/ui/skeleton';

<Skeleton width={200} height={20} />

A loading placeholder component with animated pulsing effect.

Prop	Type	Default	Description
`width`	`number \| string`	`100%`	The width of the skeleton.
`height`	`number`	`100`	The height of the skeleton in pixels.
`style`	`ViewStyle`	-	Additional styles to apply to the skeleton.

The Skeleton component is built with accessibility in mind:

On This Page