Esqueleto

Um bloco de espaço reservado que pisca para cartões, avatares e tabelas enquanto os dados carregam — com aquele estilo neobrutalista de bordas grossas.

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

export function SkeletonDemo() {

O skeleton é um placeholder pulsante que preserva o formato de um trecho da interface enquanto os dados dele carregam. É uma única div — sem primitiva por baixo — com animate-pulse, um fundo esmaecido e a borda grossa da receita neobrutalista.

Quando usar:

Cards e listas — espelhe o layout final para o conteúdo surgir sem deslocamento.
Avatares e mídia — reserve o círculo ou a caixa da miniatura antes de a imagem chegar.
Tabelas e formulários — mantenha linhas e campos no lugar durante uma busca lenta.

Instalação


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

Copie e cole o código a seguir no seu projeto.

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 }

Ajuste os caminhos de importação conforme a estrutura do seu projeto.

Uso

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

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

Exemplos

Avatar

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

export function SkeletonAvatar() {

Cartão

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

Texto

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

export function SkeletonText() {

Formulário

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

export function SkeletonForm() {

Tabela

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

export function SkeletonTable() {

RTL

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade

Skeletons são decorativos — esconda-os da tecnologia assistiva com aria-hidden="true" para que leitores de tela não anunciem caixas vazias pulsando. Comunique o estado de carregamento em si por outra via: defina aria-busy="true" na região que está carregando, ou atualize uma live region visualmente oculta (“Carregando resultados…”) que se limpa quando o conteúdo chega. Assim que o conteúdo real renderizar, remova os skeletons do DOM por completo.