Skeleton

Placeholder for content loading states. Size and shape are controlled entirely via className.

Preview

Installation

npx drivn add skeleton

Usage

1 import { Skeleton } from "@/components/ui/skeleton"
2 
3 export default function Page() {
4   return (
5     <div className="flex items-center gap-4">
6       <Skeleton className="size-12 rounded-full" />
7       <div className="flex flex-col gap-2">
8         <Skeleton className="h-5 w-40" />
9         <Skeleton className="h-4 w-60" />
10       </div>
11     </div>
12   )
13 }

Card

Profile

Table

Form

API Reference

Prop	Type	Default	Description
`className`	string	—	Controls size, shape, and spacing — e.g. h-4 w-40, rounded-full, size-12

1	import { Skeleton } from "@/components/ui/skeleton"
2
3	export default function Page() {
4	return (
5	<div className="flex items-center gap-4">
6	<Skeleton className="size-12 rounded-full" />
7	<div className="flex flex-col gap-2">
8	<Skeleton className="h-5 w-40" />
9	<Skeleton className="h-4 w-60" />
10	</div>
11	</div>
12	)
13	}