İskelet

Veriler yüklenirken kartlar, avatarlar ve tablolar için kullanılan, neobrütalist tarzda kalın kenarlık efektine sahip, yanıp sönen bir yer tutucu blok.

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

export function SkeletonDemo() {

Skeleton, verisi yüklenirken bir arayüz parçasının biçimini koruyan, yanıp sönen bir yer tutucudur. Altında hiçbir primitif yoktur — animate-pulse, soluk bir arka plan ve neobrütalist reçetenin kalın kenarlığına sahip tek bir div'dir.

Şu durumlarda tercih edin:

Kartlar ve listeler — nihai düzeni yansıtın ki içerik kayma olmadan yerine otursun.
Avatarlar ve medya — görsel gelmeden önce daireyi veya küçük resim kutusunu rezerve edin.
Tablolar ve formlar — yavaş bir istek sırasında satırları ve alanları yerinde tutun.

Kurulum


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

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

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 }

İçe aktarma yollarını proje yapılandırmanıza göre güncelleyin.

Kullanım

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

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

Örnekler

Avatar

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

export function SkeletonAvatar() {

Kart

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

Metin

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

export function SkeletonText() {

Form

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

export function SkeletonForm() {

Tablo

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

export function SkeletonTable() {

RTL

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik

Skeleton'lar dekoratiftir — ekran okuyucuların boş, yanıp sönen kutuları duyurmaması için bunları aria-hidden="true" ile yardımcı teknolojilerden gizleyin. Yükleme durumunun kendisini ayrıca iletin: yüklenen bölgeye aria-busy="true" verin veya içerik geldiğinde temizlenen, görsel olarak gizli bir canlı bölgeyi ("Sonuçlar yükleniyor…") güncelleyin. Gerçek içerik işlendiğinde skeleton'ları DOM'dan tamamen kaldırın.