Skeleton

콘텐츠를 불러오는 동안 최종 모양과 공간을 미리 확보해 화면 이동을 줄일 때 사용합니다.

미리보기

콘텐츠 카드 불러오기

이름이 있는 로딩 영역 안에 표지, 아바타, 제목과 여러 줄 텍스트 공간을 확보합니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/skeleton

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

최종 콘텐츠에 맞는 너비와 높이를 지정하세요. 주변 영역을 busy 상태로 표시하고 개별 장식 모양 대신 하나의 짧은 로딩 안내를 제공합니다.

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

export default function Example() {
  return (
    <div aria-busy="true">
      <span className="sr-only">Loading profile</span>
      <Skeleton className="h-4 w-40" />
    </div>
  );
}

API 레퍼런스

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

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

미리보기

콘텐츠 카드 불러오기

설치

사용법

API 레퍼런스

접근성