Skeleton

Indicar estado de carga. Reducir espera percibida. Retener usuarios.

Members

1import { Skeleton } from '@/components/ui/skeleton';
2
3const rows = ['first', 'second'];
4
5export function Default() {
6  return (
7    <div className="border-border bg-card w-full max-w-md rounded-xl border p-4">
8      <div className="mb-4 flex items-center justify-between">
9        <p className="text-sm font-medium">Members</p>
10        <Skeleton className="h-4 w-16" />
11      </div>
12      <div className="flex flex-col gap-4">
13        {rows.map((row) => (
14          <div key={row} className="flex items-center justify-between gap-3 sm:gap-4">
15            <div className="flex min-w-0 flex-1 items-center gap-3">
16              <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
17              <div className="min-w-0 flex-1 space-y-2">
18                <Skeleton className="h-3.5 w-full max-w-32" />
19                <Skeleton className="h-3 w-full max-w-44" />
20              </div>
21            </div>
22            <div className="flex shrink-0 items-center gap-2">
23              <Skeleton className="h-5 w-14 rounded-sm" />
24              <Skeleton className="hidden h-8 w-20 rounded-md sm:block" />
25            </div>
26          </div>
27        ))}
28      </div>
29    </div>
30  );
31}

Instalación

Copia y pega el siguiente código en tu proyecto.

1import * as React from 'react';
2import { cn } from '../lib/cn';
3
4interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
5  ref?: React.Ref<HTMLDivElement>;
6}
7
8function Skeleton({ className, ref, ...props }: SkeletonProps) {
9  return (
10    <div
11      ref={ref}
12      aria-hidden="true"
13      className={cn('bg-muted rounded-md motion-safe:animate-pulse', className)}
14      {...props}
15    />
16  );
17}
18
19Skeleton.displayName = 'Skeleton';
20
21export { Skeleton };
22export type { SkeletonProps };

Actualiza las rutas de importación para que coincidan con la estructura de tu proyecto.

Anatomía

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

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

Ejemplos

Predeterminado (Default)

Members

1import { Skeleton } from '@/components/ui/skeleton';
2
3const rows = ['first', 'second'];
4
5export function Default() {
6  return (
7    <div className="border-border bg-card w-full max-w-md rounded-xl border p-4">
8      <div className="mb-4 flex items-center justify-between">
9        <p className="text-sm font-medium">Members</p>
10        <Skeleton className="h-4 w-16" />
11      </div>
12      <div className="flex flex-col gap-4">
13        {rows.map((row) => (
14          <div key={row} className="flex items-center justify-between gap-3 sm:gap-4">
15            <div className="flex min-w-0 flex-1 items-center gap-3">
16              <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
17              <div className="min-w-0 flex-1 space-y-2">
18                <Skeleton className="h-3.5 w-full max-w-32" />
19                <Skeleton className="h-3 w-full max-w-44" />
20              </div>
21            </div>
22            <div className="flex shrink-0 items-center gap-2">
23              <Skeleton className="h-5 w-14 rounded-sm" />
24              <Skeleton className="hidden h-8 w-20 rounded-md sm:block" />
25            </div>
26          </div>
27        ))}
28      </div>
29    </div>
30  );
31}

Card

Un skeleton de card completo para estados de carga.

1import { Skeleton } from '@/components/ui/skeleton';
2
3const summaryLines = ['h-3.5 w-full', 'h-3.5 w-4/5'];
4
5export function Card() {
6  return (
7    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-4">
8      <Skeleton className="h-[140px] w-full rounded-lg" />
9      <div className="mt-4 space-y-2">
10        <Skeleton className="h-5 w-40" />
11        {summaryLines.map((line) => (
12          <Skeleton key={line} className={line} />
13        ))}
14      </div>
15      <div className="border-border mt-4 flex items-center justify-between border-t pt-4">
16        <div className="flex items-center gap-2">
17          <Skeleton className="h-6 w-6 rounded-full" />
18          <Skeleton className="h-3 w-24" />
19        </div>
20        <Skeleton className="h-5 w-16 rounded-sm" />
21      </div>
22    </div>
23  );
24}

Referencia de API

Skeleton

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

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorSheet

SiguienteSpinner

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

3const rows = ['first', 'second'];

5export function Default() {

6 return (

7 <div className="border-border bg-card w-full max-w-md rounded-xl border p-4">

8 <div className="mb-4 flex items-center justify-between">

9 <p className="text-sm font-medium">Members</p>

10 <Skeleton className="h-4 w-16" />

11 </div>

12 <div className="flex flex-col gap-4">

13 {rows.map((row) => (

14 <div key={row} className="flex items-center justify-between gap-3 sm:gap-4">

15 <div className="flex min-w-0 flex-1 items-center gap-3">

16 <Skeleton className="h-10 w-10 shrink-0 rounded-full" />

17 <div className="min-w-0 flex-1 space-y-2">

18 <Skeleton className="h-3.5 w-full max-w-32" />

19 <Skeleton className="h-3 w-full max-w-44" />

20 </div>

21 </div>

22 <div className="flex shrink-0 items-center gap-2">

23 <Skeleton className="h-5 w-14 rounded-sm" />

24 <Skeleton className="hidden h-8 w-20 rounded-md sm:block" />

25 </div>

26 </div>

27 ))}

28 </div>

29 </div>

30 );

31}

Instalación

Copia y pega el siguiente código en tu proyecto.

1import * as React from 'react';
2import { cn } from '../lib/cn';
3
4interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
5  ref?: React.Ref<HTMLDivElement>;
6}
7
8function Skeleton({ className, ref, ...props }: SkeletonProps) {
9  return (
10    <div
11      ref={ref}
12      aria-hidden="true"
13      className={cn('bg-muted rounded-md motion-safe:animate-pulse', className)}
14      {...props}
15    />
16  );
17}
18
19Skeleton.displayName = 'Skeleton';
20
21export { Skeleton };
22export type { SkeletonProps };

Actualiza las rutas de importación para que coincidan con la estructura de tu proyecto.

Ejemplos

Predeterminado (Default)

Members

1import { Skeleton } from '@/components/ui/skeleton';
2
3const rows = ['first', 'second'];
4
5export function Default() {
6  return (
7    <div className="border-border bg-card w-full max-w-md rounded-xl border p-4">
8      <div className="mb-4 flex items-center justify-between">
9        <p className="text-sm font-medium">Members</p>
10        <Skeleton className="h-4 w-16" />
11      </div>
12      <div className="flex flex-col gap-4">
13        {rows.map((row) => (
14          <div key={row} className="flex items-center justify-between gap-3 sm:gap-4">
15            <div className="flex min-w-0 flex-1 items-center gap-3">
16              <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
17              <div className="min-w-0 flex-1 space-y-2">
18                <Skeleton className="h-3.5 w-full max-w-32" />
19                <Skeleton className="h-3 w-full max-w-44" />
20              </div>
21            </div>
22            <div className="flex shrink-0 items-center gap-2">
23              <Skeleton className="h-5 w-14 rounded-sm" />
24              <Skeleton className="hidden h-8 w-20 rounded-md sm:block" />
25            </div>
26          </div>
27        ))}
28      </div>
29    </div>
30  );
31}

Card

Un skeleton de card completo para estados de carga.

1import { Skeleton } from '@/components/ui/skeleton';
2
3const summaryLines = ['h-3.5 w-full', 'h-3.5 w-4/5'];
4
5export function Card() {
6  return (
7    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-4">
8      <Skeleton className="h-[140px] w-full rounded-lg" />
9      <div className="mt-4 space-y-2">
10        <Skeleton className="h-5 w-40" />
11        {summaryLines.map((line) => (
12          <Skeleton key={line} className={line} />
13        ))}
14      </div>
15      <div className="border-border mt-4 flex items-center justify-between border-t pt-4">
16        <div className="flex items-center gap-2">
17          <Skeleton className="h-6 w-6 rounded-full" />
18          <Skeleton className="h-3 w-24" />
19        </div>
20        <Skeleton className="h-5 w-16 rounded-sm" />
21      </div>
22    </div>
23  );
24}

Prop

Tipo

Por defecto

Descripción

className

string

—

Clases CSS adicionales — usá para definir ancho, alto y bordes.