骨架屏

在数据加载期间，用于卡片、头像和表格的闪烁占位块——采用新粗野主义风格的粗边框设计。

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

export function SkeletonDemo() {

骨架屏是一块带脉冲动画的占位块，在数据加载期间先把某块 UI 的形状占住。它就是一个 div——底层没有任何基元——只有 animate-pulse、一层弱化的背景，以及新粗野主义配方里的那道粗边框。

适合以下场景：

卡片与列表——照着最终布局摆好，内容到位时不会发生跳动。
头像与媒体——图片到达之前先把圆形或缩略图的位置留出来。
表格与表单——请求较慢时让行和字段保持原位。

安装


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

将以下代码复制并粘贴到您的项目中。

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 }

更新导入路径以匹配您的项目设置。

用法

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 中彻底移除。