GitHub

Skeleton

콘텐츠 로딩 중 플레이스홀더를 표시합니다.

examples/krds/skeleton-demo.tsx
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/skeleton.json

사용법

import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-[20px] w-[100px] rounded-full" />

예제

Avatar

examples/krds/skeleton-avatar.tsx
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonAvatar() {

Card

examples/krds/skeleton-card.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

Text

examples/krds/skeleton-text.tsx
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonText() {

Form

examples/krds/skeleton-form.tsx
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonForm() {

Table

examples/krds/skeleton-table.tsx
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonTable() {

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/skeleton-rtl.tsx
"use client"

import * as React from "react"