스켈레톤

데이터가 로드되는 동안 카드, 아바타, 표를 표시하기 위한 깜빡이는 자리 표시자 블록으로, 네오브루탈리즘 스타일의 두꺼운 테두리 효과가 적용되어 있습니다.

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

export function SkeletonDemo() {

Skeleton은 데이터가 로드되는 동안 UI 형태를 유지하는 맥동 플레이스홀더입니다. 하위 프리미티브 없이 div 하나이며, animate-pulse, 흐린 배경, 네오브루탈리즘 공식의 두꺼운 테두리를 가집니다.

다음과 같은 경우에 사용합니다.

카드와 목록 — 최종 레이아웃을 그대로 맞춰 콘텐츠가 들어와도 레이아웃이 밀리지 않게 합니다.
아바타와 미디어 — 이미지가 오기 전에 원이나 썸네일 자리를 확보합니다.
테이블과 폼 — 느린 fetch 동안 행과 필드를 제자리에 둡니다.

설치


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"를 두거나, 콘텐츠가 오면 지워지는 시각적으로 숨긴 live region("결과 로딩 중…")을 업데이트하세요. 실제 콘텐츠가 렌더링되면 Skeleton을 DOM에서 완전히 제거하세요.