Skeleton

Placeholder para contenido en carga

Componente skeleton para placeholders de carga. Sin dependencia de Ark UI; usa CVA para variantes de tamaño (default, sm, lg, icon).

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

export default function Example() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
  );
}

View Code

Instalación

bash

liminal add skeleton

Uso

Usa <Skeleton /> con la prop opcional size o className para dimensiones. Por defecto tiene rounded-md, bg-muted y animate-pulse.

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

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

View Code

Ejemplos

Variantes de tamaño

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

<Skeleton size="sm" />
<Skeleton size="default" />
<Skeleton size="lg" />
<Skeleton size="icon" />

View Code

Placeholder de tarjeta

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

<div className="rounded-lg border p-4 space-y-3">
  <Skeleton className="h-5 w-1/3" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-2/3" />
</div>

View Code

API

Prop	Type	Default	Description
size	"default" \| "sm" \| "lg" \| "icon"	"default"	Tamaño predefinido. default: h-4 w-full; sm: h-3 w-20; lg: h-6 w-full; icon: h-10 w-10.
className	string	-	Clases adicionales para dimensiones y layout personalizado.