Squelette

Un bloc de remplacement clignotant destiné aux cartes, aux avatars et aux tableaux pendant le chargement des données — avec un effet néobrutaliste à bordures épaisses.

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

export function SkeletonDemo() {

Le skeleton est un espace réservé pulsant qui conserve la silhouette d’un fragment d’interface pendant le chargement de ses données. C’est un simple div — aucune primitive en dessous — avec animate-pulse, un fond estompé et la bordure épaisse de la recette néobrutaliste.

À privilégier dans ces cas :

Cartes et listes — reproduisez la mise en page finale pour que le contenu apparaisse sans décalage.
Avatars et médias — réservez le cercle ou la vignette avant l’arrivée de l’image.
Tableaux et formulaires — gardez lignes et champs en place pendant une requête lente.

Installation


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

Copiez et collez le code suivant dans votre projet.

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 }

Adaptez les chemins d’import à la structure de votre projet.

Utilisation

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

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

Exemples

Avatar

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

export function SkeletonAvatar() {

Carte

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

Texte

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

export function SkeletonText() {

Formulaire

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

export function SkeletonForm() {

Tableau

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

export function SkeletonTable() {

RTL

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité

Les skeletons sont décoratifs — masquez-les aux technologies d’assistance avec aria-hidden="true" pour que les lecteurs d’écran n’annoncent pas des boîtes vides qui pulsent. Signalez l’état de chargement lui-même par un autre biais : posez aria-busy="true" sur la région en cours de chargement, ou mettez à jour une région live masquée visuellement (« Chargement des résultats… ») qui s’efface à l’arrivée du contenu. Une fois le vrai contenu rendu, retirez entièrement les skeletons du DOM.