Skeleton

Blok penanda sementara yang berkedip untuk kartu, avatar, dan tabel saat data dimuat — dengan gaya neobrutalis yang menonjolkan tepi tebal.

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

export function SkeletonDemo() {

Skeleton adalah placeholder berdenyut yang menjaga bentuk sepotong UI selagi datanya dimuat. Wujudnya hanya satu div — tanpa primitif di baliknya — dengan animate-pulse, latar redup, dan garis tepi tebal khas resep neobrutalis.

Cocok digunakan untuk:

Kartu dan daftar — meniru tata letak akhir agar konten muncul tanpa pergeseran.
Avatar dan media — memesan tempat untuk lingkaran atau kotak thumbnail sebelum gambarnya tiba.
Tabel dan formulir — menjaga baris dan isian tetap di tempatnya selama pengambilan data yang lambat.

Instalasi


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

Salin dan tempel kode berikut ke dalam proyek Anda.

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 }

Sesuaikan jalur impor dengan pengaturan proyek Anda.

Penggunaan

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

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

Contoh

Avatar

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

export function SkeletonAvatar() {

Kartu

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

Teks

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

export function SkeletonText() {

Formulir

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

export function SkeletonForm() {

Tabel

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

export function SkeletonTable() {

RTL

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas

Skeleton bersifat dekoratif — sembunyikan dari teknologi bantu dengan aria-hidden="true" agar pembaca layar tidak mengumumkan kotak-kotak kosong yang berdenyut. Sampaikan status memuatnya secara terpisah: setel aria-busy="true" pada wilayah yang sedang dimuat, atau perbarui live region yang disembunyikan secara visual ("Memuat hasil…") dan kosongkan saat kontennya tiba. Begitu konten sungguhan dirender, hapus skeleton dari DOM sepenuhnya.