Skeleton

Metin, kart ve geometrik varyantlı yükleme yer tutucusu.

Skeleton.tsx

Kart İskeleti (Shimmer Animasyon)

Profil & Paragraf Satırları

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/skeleton.json

Kullanım Örneği

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

<Skeleton variant="text" lines={4} lastLineWidth="45%" loadingLabel="Makale yükleniyor" />
<Skeleton variant="avatar" decorative />

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
variant	"text" \| "circular" \| "rectangular" \| "card" \| "avatar"	"rectangular"	İskeletin hazır geometrik biçimi.
animation	"pulse" \| "shimmer" \| "none"	"shimmer"	Hareket türü; sistem reduced-motion ayarına uyar.
width	string \| number	—	CSS genişliği; sayılar piksel kabul edilir.
height	string \| number	—	CSS yüksekliği; sayılar piksel kabul edilir.
lines	number	—	Metin varyantındaki satır sayısı.
lastLineWidth	string \| number	"65%"	Çok satırlı metindeki son satır genişliği.
loadingLabel	string	"Yükleniyor"	Ekran okuyucu durum metni.
decorative	boolean	false	Skeleton öğesini erişilebilirlik ağacından gizler.