데이터와 피드백@neumorphism-ui/skeleton

Skeleton

단순 div 기반의 pulse placeholder입니다. 시각적 로딩 형태만 제공하며 aria-hidden=true로 보조기술에서 숨겨집니다.

@neumorphism-ui/skeleton

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/skeleton

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

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

Example

<div className="flex items-center gap-3" aria-busy="true">
  <span className="sr-only">프로필을 불러오는 중</span>
  <Skeleton className="size-12 rounded-full" />
  <div className="grid flex-1 gap-2">
    <Skeleton className="h-4 w-1/3" />
    <Skeleton className="h-3 w-2/3" />
  </div>
</div>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Skeleton`	`className`필수	`string`	`—`	placeholder의 너비, 높이, radius를 설정합니다.
`Skeleton`	`aria-hidden`	`boolean`	`true`	장식 placeholder를 접근성 트리에서 숨깁니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성