اسکلتون

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

export function SkeletonDemo() {

Skeleton یک placeholder پالسی است که شکل تکه‌ای از UI را هنگام بارگذاری داده نگه می‌دارد. یک div واحد است — بدون primitive زیرین — با animate-pulse، پس‌زمینهٔ muted و حاشیهٔ ضخیم دستور پخت نئوبروتالیستی.

برای این موارد از آن استفاده کنید:

• کارت و فهرست — layout نهایی را آینه کنید تا محتوا بدون جابه‌جایی ظاهر شود.
• آواتار و رسانه — دایره یا جعبهٔ thumbnail را قبل از رسیدن تصویر رزرو کنید.
• جدول و فرم — ردیف و فیلد را هنگام fetch کند سر جایشان نگه دارید.

نصب#

pnpmnpmyarnbun
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
کپی

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" />

نمونه‌ها#

Avatar#

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"

دسترسی‌پذیری#

Skeletonها تزئینی‌اند — با aria-hidden="true" از فناوری کمکی پنهانشان کنید تا صفحه‌خوان جعبه‌های پالسی خالی را اعلام نکند. خود وضعیت بارگذاری را جداگانه برسانید: aria-busy="true" را روی ناحیه‌ای که بارگذاری می‌شود بگذارید، یا یک live region visually hidden («در حال بارگذاری نتایج…») به‌روز کنید که با رسیدن محتوا پاک شود. وقتی محتوای واقعی رندر شد، skeletonها را کاملاً از DOM بردارید.