Scheletro

Un blocco segnaposto lampeggiante per schede, avatar e tabelle mentre i dati vengono caricati — con il bordo spesso in stile neobrutalista.

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

export function SkeletonDemo() {

Lo skeleton è un segnaposto pulsante che conserva la forma di una porzione di interfaccia mentre i suoi dati si caricano. È un singolo div — nessuna primitiva sotto — con animate-pulse, uno sfondo attenuato e il bordo spesso della ricetta neobrutalista.

Quando usarlo:

Card ed elenchi — rispecchia il layout finale, così il contenuto compare senza spostamenti.
Avatar e media — riserva il cerchio o il riquadro della miniatura prima che arrivi l’immagine.
Tabelle e moduli — tiene righe e campi al loro posto durante un fetch lento.

Installazione


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 e incolla il seguente codice nel tuo progetto.

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 }

Aggiorna i percorsi di importazione in base alla struttura del tuo progetto.

Utilizzo

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

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

Esempi

Avatar

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

export function SkeletonAvatar() {

Scheda

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

Testo

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

export function SkeletonText() {

Modulo

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

export function SkeletonForm() {

Tabella

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

export function SkeletonTable() {

RTL

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità

Gli skeleton sono decorativi — nascondili alle tecnologie assistive con aria-hidden="true", così gli screen reader non annunciano scatole vuote che pulsano. Comunica lo stato di caricamento a parte: imposta aria-busy="true" sulla regione in caricamento, oppure aggiorna una live region nascosta visivamente (“Caricamento dei risultati…”) che si svuota all’arrivo del contenuto. Una volta reso il contenuto reale, rimuovi del tutto gli skeleton dal DOM.