# Skeleton
URL: /react/components/skeleton
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/skeleton.mdx
콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다.
사용 가능 버전: @seed-design/react@0.0.1, @seed-design/css@0.0.1
## Preview
```tsx
import { Skeleton, VStack } from "@seed-design/react";
export default function SkeletonPreview() {
return (
);
}
```
## Usage
```tsx
import { Skeleton } from "@seed-design/react";
```
```tsx
```
## Props
## Examples
### Line Height
텍스트를 대체하는 Skeleton에는 `height="lineHeight.t4"`처럼 텍스트와 같은 line-height 토큰을 지정할 수 있습니다.
```tsx
import { Skeleton, Text, VStack } from "@seed-design/react";
import { useState } from "react";
import { Switch } from "seed-design/ui/switch";
export default function SkeletonLineHeight() {
const [loading, setLoading] = useState(true);
return (
{loading ? (
) : (
콘텐츠 제목
)}
{loading ? (
) : (
불러온 콘텐츠입니다.
)}
);
}
```
반응형 높이에도 사용할 수 있습니다.
```tsx
```
### Radius
```tsx
import { Flex, Skeleton } from "@seed-design/react";
export default function SkeletonRadius() {
return (
);
}
```
### Tone
```tsx
import { Box, Skeleton, VStack } from "@seed-design/react";
export default function SkeletonTone() {
return (
);
}
```