dotUI

Skeleton

Skeleton is a placeholder component that displays while content is loading.

Overview

Examples

<div className="space-y-4">
  {/* <Skeleton className="h-44 w-64" />
  <div className="flex items-center space-x-4">
    <Skeleton className="size-10 rounded-full" />
    <div className="space-y-2">
      <Skeleton className="h-4 w-44" />
      <Skeleton className="h-4 w-36" />
    </div>
  </div> */}
</div>

Installation

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/skeleton

Usage

Use skeleton components as placeholders while content is loading.

import { Skeleton, SkeletonProvider } from "@/components/ui/skeleton";

<SkeletonProvider isLoading={true}>
  <Skeleton className="h-4 w-32" />
</SkeletonProvider>

Playground

Use the controls below to experiment with different skeleton props and see the live preview and code update.

isLoading

<Unknown isLoading>
  <div className="flex items-center gap-4">
    <Unknown className="size-12 rounded-full" />
    <div className="space-y-2">
      <Unknown className="h-4 w-32" />
      <Unknown className="h-4 w-24" />
    </div>
  </div>
</Unknown>

API Reference

SkeletonProvider

Missing description.

Prop	Type	Default
	`boolean`	`—`

Skeleton

Missing description.

Supports all div attributes.

Prop	Type	Default
	`boolean`	`true`

dotUI

Skeleton

Installation

Usage

Playground

API Reference

SkeletonProvider

Skeleton

On this page

On this page

dotUI

Product

Community

Support