Skeleton

Placeholder de carga que imita la forma del contenido real.

---

Import

import { Skeleton } from '@imansi/ui';

---

Uso básico

<Skeleton className="h-4 w-[250px]" />

---

Card de usuario

<div className="flex items-center gap-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[200px]" />
    <Skeleton className="h-4 w-[150px]" />
  </div>
</div>

---

Lista

<div className="space-y-3">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
</div>

---

Tabla

<div className="space-y-2">
  {Array.from({ length: 5 }).map((_, i) => (
    <div key={i} className="flex gap-4">
      <Skeleton className="h-10 w-10 rounded-full" />
      <Skeleton className="h-10 flex-1" />
      <Skeleton className="h-10 w-24" />
    </div>
  ))}
</div>

---

Props

Prop	Tipo	Default	Descripción
className	string	—	Clases adicionales (altura, ancho, radius)

---

Animación

El skeleton pulsa suavemente con animate-pulse de Tailwind. Si el usuario tiene prefers-reduced-motion, la animación se desactiva automáticamente.