hextastudio/ui needs your support to stay running 🫶 Help us

Skeleton

A skeleton is a placeholder for content that hasn't loaded yet.

Preview

Installation

bash
npx hexta-ui add skeleton

tsx
import { Skeleton } from "@/components/hexta-ui/Skeleton";

tsx
<div className="flex items-center justify-center gap-3">
   <div>
       <Skeleton className="w-12 h-12 rounded-full" />
   </div>
   <div className="flex flex-col gap-3">
       <Skeleton className="w-44 h-4 rounded-sm" />
       <Skeleton className="w-24 h-4 rounded-sm" />
   </div>
</div>

Preview

tsx
<div className="flex items-center justify-center gap-3 flex-col">
    <div>
        <Skeleton className="w-44  h-24" />
    </div>
    <div className="flex gap-2 items-center">
        <Skeleton className="w-6 h-6 rounded-full" />
        <Skeleton className="w-36 h-4 rounded-sm" />
    </div>
</div>