Skeleton - HapplyUI

A placeholder loading animation for content that hasn't loaded yet.

Installation

bunx @happlyui/cli@latest add skeleton

Dependencies

npm packages

tailwind-variants

Registry dependencies

These are automatically installed when you add this component.

tv

Usage

import * as Skeleton from "@/components/ui/skeleton"

<Skeleton.Root className="h-4 w-full" />

Examples

Default

Text-like skeleton lines.

<Skeleton.Root className="h-4 w-3/4" />
<Skeleton.Root className="h-4 w-1/2" />

Card

Skeleton layout mimicking a card with avatar, image, and text.

<div className="flex flex-col gap-4">
  <div className="flex items-center gap-3">
    <Skeleton.Root variant="circular" className="w-10 h-10" />
    <Skeleton.Root className="h-4 w-1/2" />
  </div>
  <Skeleton.Root className="h-32 w-full" />
</div>

Circular

Circular skeletons for avatars and icons.

<Skeleton.Root variant="circular" className="w-10 h-10" />

API Reference

Skeleton.Root

The skeleton placeholder element.

Prop	Type	Default	Description
`variant`	`'rounded' \| 'circular'`	`'rounded'`	Shape of the skeleton
`className`	`string`	-	Set width and height to match the content being loaded