Khung xương

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

export function SkeletonDemo() {

Skeleton là một khối giữ chỗ nhấp nháy, giữ nguyên hình dạng của một phần giao diện trong lúc dữ liệu đang tải. Nó chỉ là một div duy nhất — không có primitive bên dưới — với animate-pulse, nền dịu và đường viền dày của công thức neobrutalist.

Nên dùng khi:

• Card và danh sách — mô phỏng bố cục cuối cùng để nội dung hiện ra mà không gây xô lệch.
• Avatar và media — giữ chỗ hình tròn hoặc khung thumbnail trước khi ảnh tải về.
• Bảng và form — giữ nguyên vị trí các hàng và trường trong lúc truy vấn chậm.

Cài đặt#

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
Sao chép

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 }

Cách dùng#

Sao chépimport { Skeleton } from "@/components/ui/skeleton"

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

Ví dụ#

Avatar#

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

export function SkeletonAvatar() {

Thẻ#

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

Văn bản#

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

export function SkeletonText() {

Biểu mẫu#

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

export function SkeletonForm() {

Bảng#

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

export function SkeletonTable() {

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

Skeleton mang tính trang trí — hãy ẩn chúng khỏi công nghệ hỗ trợ bằng aria-hidden="true" để trình đọc màn hình không đọc lên những ô trống nhấp nháy. Truyền đạt trạng thái đang tải một cách riêng biệt: đặt aria-busy="true" trên vùng đang tải, hoặc cập nhật một live region ẩn về mặt hiển thị (“Đang tải kết quả…”) và xóa nó khi nội dung xuất hiện. Khi nội dung thật đã render, hãy gỡ hẳn các skeleton khỏi DOM.