Skeleton

Loading...

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/skeleton

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install tailwind-merge

Anatomy

import { Skeleton } from "@/components/ui/skeleton"

<Skeleton isLoading>
  <div />
</Skeleton>

Examples

Dynamic content

The Skeleton component can be used to display a placeholder while content loads dynamically, improving perceived performance and reducing loading anxiety.

Loading...

Component API

The Skeleton component displays a placeholder while content loads.

PropTypeDefault
classNamestring-
isLoadingboolean-