שלד

בלוק מחזיק מקום מהבהב לכרטיסים, אווטארים וטבלאות בזמן טעינת הנתונים — עם עיטור גבולות עבים בסגנון ניאו-ברוטליסטי.

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

export function SkeletonDemo() {

ה-skeleton הוא placeholder פועם שמחזיק את צורת פיסת UI בזמן שטעינת הנתונים שלה. זה div יחיד — בלי פרימיטיב מתחת — עם animate-pulse, רקע muted והמסגרת העבה של המתכון הנאו-ברוטליסטי.

השתמשו בו כש:

כרטיסים ורשימות — משקפים את הפריסה הסופית כך שהתוכן קופץ פנימה בלי הזזה.
Avatars ומדיה — שומרים את העיגול או תיבת התמונה הממוזערת לפני שהתמונה מגיעה.
טבלאות וטפסים — משאירים שורות ושדות במקום בזמן fetch איטי.

התקנה


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

העתיקו והדביקו את הקוד הבא לפרויקט שלכם.

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 }

עדכנו את נתיבי הייבוא כך שיתאימו למבנה הפרויקט שלכם.

שימוש

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

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

דוגמאות

אווטאר

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

export function SkeletonAvatar() {

כרטיס

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

טקסט

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

export function SkeletonText() {

טופס

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

export function SkeletonForm() {

טבלה

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

export function SkeletonTable() {

RTL

כדי להפעיל RTL ב-Neobrutalism, עיינו במדריך ההגדרה של RTL.

"use client"

import * as React from "react"

Skeletons הם דקורטיביים — הסתירו אותם מטכנולוגיה מסייעת עם aria-hidden="true" כדי שקוראי מסך לא יכריזו על קופסאות פועמות ריקות. העבירו את מצב הטעינה עצמו בנפרד: הגדירו aria-busy="true" על האזור שנטען, או עדכנו אזור live מוסתר ויזואלית ("טוען תוצאות…") שמתנקה כשהתוכן נוחת. ברגע שהתוכן האמיתי מרנדר, הסירו את ה-skeletons מה-DOM לחלוטין.