スケルトン

データの読み込み中に、カード、アバター、表を表示するための点滅するプレースホルダーブロックです。ネオブルータリズム風の太い枠線デザインを採用しています。

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

export function SkeletonDemo() {

Skeleton は、データ読み込み中に 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"

Skeleton は装飾です。aria-hidden="true" で支援技術から隠し、空のパルスする箱をスクリーンリーダーが読み上げないようにしてください。読み込み状態そのものは別に伝えてください。読み込み中の領域に aria-busy="true" を付けるか、内容が着いたら消える視覚的に隠したライブリージョン（「結果を読み込み中…」）を更新します。本物のコンテンツが描画されたら、Skeleton は DOM から完全に取り除いてください。