Skeleton

Un componente de carga placeholder con animación de pulso.

default.tsx

1'use client';
2
3import { Skeleton } from '@/components/ui/skeleton';
4
5export function Default() {
6  return (
7    <div className="flex items-center gap-4">
8      <Skeleton className="h-12 w-12 rounded-full" />
9      <div className="space-y-2">
10        <Skeleton className="h-4 w-[200px]" />
11        <Skeleton className="h-4 w-[160px]" />
12      </div>
13    </div>
14  );
15}

Instalación

pnpm dlx nachui add skeleton

Anatomía

1import { Skeleton } from '@/components/ui/skeleton';

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

Ejemplos

Predeterminado (Default)

default.tsx

1'use client';
2
3import { Skeleton } from '@/components/ui/skeleton';
4
5export function Default() {
6  return (
7    <div className="flex items-center gap-4">
8      <Skeleton className="h-12 w-12 rounded-full" />
9      <div className="space-y-2">
10        <Skeleton className="h-4 w-[200px]" />
11        <Skeleton className="h-4 w-[160px]" />
12      </div>
13    </div>
14  );
15}

Card

Un skeleton de card completo para estados de carga.

card.tsx

1'use client';
2
3import { Skeleton } from '@/components/ui/skeleton';
4
5export function Card() {
6  return (
7    <div className="border-border w-full max-w-sm space-y-4 rounded-xl border p-6">
8      <Skeleton className="h-[140px] w-full rounded-lg" />
9      <div className="space-y-2">
10        <Skeleton className="h-5 w-3/4" />
11        <Skeleton className="h-4 w-full" />
12        <Skeleton className="h-4 w-5/6" />
13      </div>
14      <div className="flex gap-2 pt-2">
15        <Skeleton className="h-9 w-24 rounded-md" />
16        <Skeleton className="h-9 w-24 rounded-md" />
17      </div>
18    </div>
19  );
20}

Referencia de API

Skeleton

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Clases CSS adicionales — usá para definir ancho, alto y bordes.

AnteriorSeparator SiguienteSpinner