Esqueleto

Un bloque de marcador de posición que parpadea para tarjetas, avatares y tablas mientras se cargan los datos, con ese estilo neobrutalista de bordes gruesos.

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

export function SkeletonDemo() {

El skeleton es un marcador de posición pulsante que conserva la forma de una parte de la interfaz mientras se cargan sus datos. Es un único div —sin primitiva debajo— con animate-pulse, un fondo apagado y el borde grueso de la receta neobrutalista.

Recurre a este componente cuando:

Tarjetas y listas — replica la disposición final para que el contenido aparezca sin provocar saltos.
Avatares y medios — reserva el círculo o el recuadro de la miniatura antes de que llegue la imagen.
Tablas y formularios — mantén filas y campos en su sitio durante una carga lenta.

Instalación


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
npx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/skeleton.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/skeleton.json

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

components/ui/skeleton.tsx

import { cn } from "@/lib/utils"

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("animate-pulse rounded border-2 bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }

Ajusta las rutas de importación a la estructura de tu proyecto.

Uso

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

<Skeleton className="h-[20px] w-[100px] rounded-full" />

Ejemplos

Avatar

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

export function SkeletonAvatar() {

Tarjeta

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

Texto

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

export function SkeletonText() {

Formulario

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

export function SkeletonForm() {

Tabla

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

export function SkeletonTable() {

RTL

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad

Los skeletons son decorativos: ocúltalos de la tecnología de asistencia con aria-hidden="true" para que los lectores de pantalla no anuncien cajas vacías que parpadean. Comunica el estado de carga por otra vía: define aria-busy="true" en la región que se está cargando, o actualiza una región viva oculta visualmente («Cargando resultados…») que se limpie cuando aterrice el contenido. En cuanto se renderice el contenido real, elimina los skeletons del DOM por completo.