Skeletonstandard

내용이 불러와지기 전에 자리를 잡아 두는 깜박이는 뼈대(skeleton)입니다. shadcn base-nova 의 stock 아이템입니다. 진행 정도를 보여 줄 때는 `progress`, 돌아가는 아이콘이 필요하면 `spinner` 를 씁니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/skeleton

Default

Avatar

Card

Text

Form

Table

skeleton-example.tsx

import {  Example,  ExampleWrapper,} from "@/components/example"import { Card, CardContent, CardHeader } from "@/components/ui/card"import { Skeleton } from "@/components/ui/skeleton"
export default function SkeletonExample() {  return (    <ExampleWrapper>      <SkeletonAvatar />      <SkeletonCard />      <SkeletonText />      <SkeletonForm />      <SkeletonTable />    </ExampleWrapper>  )}
function SkeletonAvatar() {  return (    <Example title="Avatar">      <div className="flex w-full items-center gap-4">        <Skeleton className="size-10 shrink-0 rounded-full" />        <div className="grid gap-2">          <Skeleton className="h-4 w-[150px]" />          <Skeleton className="h-4 w-[100px]" />        </div>      </div>    </Example>  )}
function SkeletonCard() {  return (    <Example title="Card">      <Card className="w-full">        <CardHeader>          <Skeleton className="h-4 w-2/3" />          <Skeleton className="h-4 w-1/2" />        </CardHeader>        <CardContent>          <Skeleton className="aspect-square w-full" />        </CardContent>      </Card>    </Example>  )}
function SkeletonText() {  return (    <Example title="Text">      <div className="flex w-full flex-col gap-2">        <Skeleton className="h-4 w-full" />        <Skeleton className="h-4 w-full" />        <Skeleton className="h-4 w-3/4" />      </div>    </Example>  )}
function SkeletonForm() {  return (    <Example title="Form">      <div className="flex w-full flex-col gap-7">        <div className="flex flex-col gap-3">          <Skeleton className="h-4 w-20" />          <Skeleton className="h-10 w-full" />        </div>        <div className="flex flex-col gap-3">          <Skeleton className="h-4 w-24" />          <Skeleton className="h-10 w-full" />        </div>        <Skeleton className="h-9 w-24" />      </div>    </Example>  )}
function SkeletonTable() {  return (    <Example title="Table">      <div className="flex w-full flex-col gap-2">        <div className="flex gap-4">          <Skeleton className="h-4 flex-1" />          <Skeleton className="h-4 w-24" />          <Skeleton className="h-4 w-20" />        </div>        <div className="flex gap-4">          <Skeleton className="h-4 flex-1" />          <Skeleton className="h-4 w-24" />          <Skeleton className="h-4 w-20" />        </div>        <div className="flex gap-4">          <Skeleton className="h-4 flex-1" />          <Skeleton className="h-4 w-24" />          <Skeleton className="h-4 w-20" />        </div>      </div>    </Example>  )}