Skeleton

설치 확인

자리 표시

1. 목적과 출처

자리 표시

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/skeleton.tsx
Registry: @adcapsule/skeleton

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Skeleton 모양
모양	예
목록 행
카드
사람

3. 속성 바꿔 보기

행 수

불러오기 끝

<div aria-busy={true}>
  {true /* loading */
    ? Array.from({ length: 3 }, (_, i) => (
        <div key={i} className="flex h-(--ds-row-height) items-center gap-3">
          <Skeleton className="size-4 rounded-full" />
          <Skeleton className="h-3 flex-1" />
        </div>
      ))
    : issues.map((issue) => <IssueRow key={issue.id} issue={issue} />)}
</div>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/skeleton

npm 패키지: 없음
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Skeleton className="h-3 w-40" />

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

크기·모양은 className으로 실제 내용과 비슷하게
감싸는 영역에 aria-busy
1초 안에 끝나면 보이지 않게 하는 편이 낫다

공통으로 유지할 토큰

surface.raised (--muted)
radius.md (기본 6px)
row.height (목록 행 자리)

Skeleton

설치 확인

자리 표시

1. 목적과 출처

자리 표시

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/skeleton.tsx
Registry: @adcapsule/skeleton

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Skeleton 모양
모양	예
목록 행
카드
사람

3. 속성 바꿔 보기

행 수

불러오기 끝

<div aria-busy={true}>
  {true /* loading */
    ? Array.from({ length: 3 }, (_, i) => (
        <div key={i} className="flex h-(--ds-row-height) items-center gap-3">
          <Skeleton className="size-4 rounded-full" />
          <Skeleton className="h-3 flex-1" />
        </div>
      ))
    : issues.map((issue) => <IssueRow key={issue.id} issue={issue} />)}
</div>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/skeleton

npm 패키지: 없음
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Skeleton className="h-3 w-40" />

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿