# Skeleton
URL: /lynx/components/skeleton
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/skeleton.mdx

콘텐츠를 불러오는 동안 윤곽을 표시하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.8.0, @seed-design/lynx-css@0.12.0

## Preview

```tsx
import { Skeleton, VStack } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <VStack gap="x4" align="center" width="full" style={{ maxWidth: "250px" }}>
      <Skeleton radius="full" width="48px" height="48px" />
      <VStack gap="x2" align="center" width="full">
        <Skeleton radius="8" width="250px" height="16px" style={{ maxWidth: "100%" }} />
        <Skeleton radius="8" width="250px" height="16px" style={{ maxWidth: "100%" }} />
      </VStack>
    </VStack>
  );
}
```

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

## Usage

```tsx
import { Skeleton } from "@seed-design/lynx-react";
```

```tsx
<Skeleton />
```

## Props

## Examples

### Line Height

텍스트를 대체하는 Skeleton에는 `height="lineHeight.t4"`처럼 텍스트와 같은 line-height 토큰을 지정할 수 있습니다.

```tsx
import { useState } from "@lynx-js/react";
import { Skeleton, Text, VStack } from "@seed-design/lynx-react";
import { Switch } from "@/components/ui/switch";

export default function Example() {
  const [loading, setLoading] = useState(true);

  return (
    <VStack gap="x4" align="center" width="full" style={{ maxWidth: "250px" }}>
      <VStack gap="x2" align="center" width="full">
        {loading ? (
          <Skeleton height="lineHeight.t7" width="200px" style={{ maxWidth: "100%" }} />
        ) : (
          <Text textStyle="t7Bold">콘텐츠 제목</Text>
        )}
        {loading ? (
          <Skeleton height="lineHeight.t4" width="250px" style={{ maxWidth: "100%" }} />
        ) : (
          <Text textStyle="t4Regular">불러온 콘텐츠입니다.</Text>
        )}
      </VStack>
      <Switch label="로딩 중" checked={loading} onCheckedChange={setLoading} />
    </VStack>
  );
}
```

### Radius

```tsx
import { HStack, Skeleton } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <HStack
      gap="x4"
      align="center"
      justify="center"
      style={{ display: "flex", flexWrap: "wrap", maxWidth: "100%" }}
    >
      <Skeleton radius="0" width="48px" height="48px" />
      <Skeleton radius="8" width="48px" height="48px" />
      <Skeleton radius="16" width="48px" height="48px" />
      <Skeleton radius="full" width="48px" height="48px" />
    </HStack>
  );
}
```

### Tone

```tsx
import { Skeleton, VStack } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <VStack gap="x4" align="center" width="full" style={{ maxWidth: "320px" }}>
      <Skeleton tone="neutral" radius="16" width="full" height="48px" />
      <Skeleton tone="magic" radius="16" width="full" height="48px" />
    </VStack>
  );
}
```

## 웹 버전과의 차이

- 접근성 트리에서 숨겨지는 장식 요소입니다.
- `height`에는 반응형 값이 아닌 단일 값만 전달할 수 있습니다.
- 웹의 `asChild`는 지원하지 않습니다.