Szkielet

Pulsujący blok zastępczy dla kart, awatarów i tabel podczas ładowania danych — z grubymi ramkami w stylu neobrutalizmu.

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

export function SkeletonDemo() {

Skeleton to pulsujący blok zastępczy, który utrzymuje kształt fragmentu interfejsu, dopóki ładują się jego dane. To pojedynczy div — bez prymitywu pod spodem — z animate-pulse, stonowanym tłem i grubą ramką z neobrutalistycznej receptury.

Sięgnij po to rozwiązanie, gdy:

Karty i listy — odwzoruj docelowy układ, aby treść pojawiła się bez przeskoku.
Awatary i media — zarezerwuj kółko lub pole miniatury, zanim dotrze obraz.
Tabele i formularze — utrzymaj wiersze i pola na miejscu podczas powolnego pobierania danych.

Instalacja


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

Skopiuj i wklej poniższy kod do swojego projektu.

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 }

Zaktualizuj ścieżki importu, aby pasowały do konfiguracji Twojego projektu.

Użycie

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

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

Przykłady

Avatar

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

export function SkeletonAvatar() {

Karta

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

Tekst

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

export function SkeletonText() {

Formularz

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

export function SkeletonForm() {

Tabela

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

export function SkeletonTable() {

RTL

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność

Skeletony są dekoracyjne — ukryj je przed technologiami asystującymi za pomocą aria-hidden="true", aby czytniki ekranu nie ogłaszały pustych, pulsujących prostokątów. Sam stan ładowania zakomunikuj osobno: ustaw aria-busy="true" na ładowanym regionie albo aktualizuj ukryty wizualnie live region („Wczytywanie wyników…”), czyszczony w momencie pojawienia się treści. Gdy właściwa treść już się wyrenderuje, usuń skeletony całkowicie z DOM.