Empty

빈 상태를 표시할 때 사용하는 컴포넌트입니다.

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

examples/krds/empty-demo.tsx

import { FolderCodeIcon as IconFolderCode } from "lucide-react"
import { ArrowUpRightIcon } from "lucide-react"

설치

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

사용법

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

구성

다음 조합으로 Empty state:

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

예제

Outline

border 유틸리티 클래스로 outline Empty 상태를 만듭니다.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

examples/krds/empty-outline.tsx

import { CloudIcon as IconCloud } from "lucide-react"

import { Button } from "@/components/ui/button"

Background

bg-*와 bg-gradient-* 유틸리티로 Empty 상태에 배경을 추가합니다.

No Notifications

You're all caught up. New notifications will appear here.

examples/krds/empty-background.tsx

import { BellIcon as IconBell } from "lucide-react"
import { RefreshCcwIcon } from "lucide-react"

Avatar

Use the EmptyMedia component to display an avatar in the empty state.

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

examples/krds/empty-avatar.tsx

import {
  Avatar,
  AvatarFallback,

Avatar Group

Use the EmptyMedia component to display an avatar group in the empty state.

CNLRER

No Team Members

Invite your team to collaborate on this project.

examples/krds/empty-avatar-group.tsx

import { PlusIcon } from "lucide-react"

import {

InputGroup

You can add an InputGroup component to the EmptyContent component.

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

examples/krds/empty-input-group.tsx

import { SearchIcon } from "lucide-react"

import {

RTL

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

لا توجد مشاريع بعد

لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.

تعرف على المزيد

examples/krds/empty-rtl.tsx

"use client"

import * as React from "react"

API 참조

Empty

The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.

속성	타입	기본값
`className`	`string`

<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

The EmptyHeader component wraps the empty media, title, and description.

속성	타입	기본값
`className`	`string`

<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

Use the EmptyMedia component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

속성	타입	기본값
`variant`	`"default" \| "icon"`	`default`
`className`	`string`

<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>

<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

EmptyTitle 컴포넌트로 Empty 상태의 제목을 표시합니다.

속성	타입	기본값
`className`	`string`

<EmptyTitle>No data</EmptyTitle>

EmptyDescription

EmptyDescription 컴포넌트로 Empty 상태의 설명을 표시합니다.

속성	타입	기본값
`className`	`string`

<EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent

EmptyContent 컴포넌트로 버튼, input, 링크 같은 Empty 상태의 콘텐츠를 표시합니다.

속성	타입	기본값
`className`	`string`

<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>

Dropdown Field