Skeleton
shadcn/uiUse to show a placeholder while content is loading.
Skeleton
import { Skeleton } from "@/components/optics/skeleton";<div className="flex items-center space-x-4 w-full max-w-md"> <Card className="w-full"> <CardContent className="flex items-center space-x-4 w-full max-w-md"> <Skeleton className="h-12 w-12 rounded-full squircle-none" /> <div className="space-y-2 flex-1"> <Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-3/4" /> </div> </CardContent> </Card></div>import { Skeleton } from "@/components/optics/skeleton";<div className="flex items-center space-x-4 w-full max-w-md"> <Card className="w-full"> <CardContent className="flex items-center space-x-4 w-full max-w-md"> <Skeleton className="h-12 w-12 rounded-full squircle-none" /> <div className="space-y-2 flex-1"> <Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-3/4" /> </div> </CardContent> </Card></div>Installation
pnpm dlx shadcn@latest add @optics/skeleton