स्केलेटन

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

export function SkeletonDemo() {

स्केलेटन एक धड़कता हुआ प्लेसहोल्डर है, जो डेटा लोड होने तक UI के किसी हिस्से का आकार सँभालकर रखता है। यह बस एक div है — नीचे कोई प्रिमिटिव नहीं — जिसमें animate-pulse, म्यूटेड बैकग्राउंड और नियोब्रूटलिस्ट रेसिपी का मोटा बॉर्डर होता है।

इसे इन स्थितियों में चुनें:

• कार्ड और सूचियाँ — आख़िरी लेआउट की नक़ल करें, ताकि कंटेंट आने पर कुछ खिसके नहीं।
• अवतार और मीडिया — इमेज आने से पहले ही गोल घेरा या थंबनेल बॉक्स जगह रोक लें।
• टेबल और फ़ॉर्म — धीमे फ़ेच के दौरान पंक्तियाँ और फ़ील्ड अपनी जगह बनी रहें।

इंस्टॉलेशन#

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

उदाहरण#

अवतार#

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#

Neobrutalism में RTL समर्थन सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें।

"use client"

import * as React from "react"

एक्सेसिबिलिटी#

स्केलेटन सजावटी होते हैं — उन्हें aria-hidden="true" से सहायक तकनीक के लिए छिपा दें, ताकि स्क्रीन रीडर ख़ाली धड़कते बॉक्स की घोषणा न करें। लोडिंग की स्थिति अलग से बताएँ: जिस क्षेत्र में लोड हो रहा है उस पर aria-busy="true" सेट करें, या किसी दृश्य रूप से छिपे लाइव रीजन को अपडेट करें ("परिणाम लोड हो रहे हैं…") जो कंटेंट आने पर ख़ाली हो जाए। असली कंटेंट रेंडर होते ही स्केलेटन को DOM से पूरी तरह हटा दें।