Skelett

Ein pulsierender Platzhalterblock für Karten, Avatare und Tabellen, während die Daten geladen werden – mit dem neobrutalistischen Stil mit dicken Rahmen.

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

export function SkeletonDemo() {

Das Skeleton ist ein pulsierender Platzhalter, der die Form eines UI-Elements hält, während dessen Daten laden. Es ist ein einzelnes div – kein Primitive darunter – mit animate-pulse, gedämpftem Hintergrund und dem dicken Rahmen des neobrutalistischen Rezepts.

Typische Anwendungsfälle:

Karten und Listen – das endgültige Layout spiegeln, damit Inhalte ohne Sprung erscheinen.
Avatare und Medien – den Kreis oder die Thumbnail-Box reservieren, bevor das Bild eintrifft.
Tabellen und Formulare – Zeilen und Felder während eines langsamen Fetches an Ort und Stelle halten.

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

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

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 }

Passe die Importpfade an dein Projekt-Setup an.

Verwendung

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

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

Beispiele

Avatar

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

export function SkeletonAvatar() {

Karte

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

Text

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

export function SkeletonText() {

Formular

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

export function SkeletonForm() {

Tabelle

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

export function SkeletonTable() {

RTL

Um RTL-Unterstützung in Neobrutalism zu aktivieren, siehe die RTL-Konfigurationsanleitung.

"use client"

import * as React from "react"

Barrierefreiheit

Skeletons sind dekorativ – verbirg sie mit aria-hidden="true" vor assistiven Technologien, damit Screenreader keine leeren, pulsierenden Boxen vorlesen. Den Ladezustand selbst kommunizierst du separat: Setze aria-busy="true" auf die Region, die gerade lädt, oder aktualisiere eine visuell versteckte Live-Region („Ergebnisse werden geladen …“), die geleert wird, sobald der Inhalt eintrifft. Sobald der echte Inhalt rendert, entferne die Skeletons vollständig aus dem DOM.