No Projects Yet

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

Learn More

Installation

pnpm dlx kliping@latest add empty

Usage

<script setup lang="ts">
import { FolderOpen } from '@lucide/vue'
import { Button } from '@/registry/default/ui/button'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/registry/default/ui/empty'
</script>

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

Examples

Outline

Pakai utility class border untuk membuat empty state bergaris tepi.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

Latar

Pakai utility bg-* dan bg-gradient-* untuk memberi latar pada empty state.

No Notifications

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

Avatar

Pakai komponen EmptyMedia untuk menampilkan avatar di dalam empty state.

ZN

User Offline

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

Grup Avatar

Pakai komponen EmptyMedia untuk menampilkan sekelompok avatar di dalam empty state.

AASBZN

No Team Members

Invite your team to collaborate on this project.

InputGroup

Anda bisa menyisipkan komponen InputGroup ke dalam EmptyContent.

404 - Not Found

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

/

Need help? Contact support

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	class-variance-authority@^0.7.1
Files	components/ui/empty/empty.vue components/ui/empty/empty-content.vue components/ui/empty/empty-description.vue components/ui/empty/empty-header.vue components/ui/empty/empty-media.vue components/ui/empty/empty-title.vue components/ui/empty/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Empty>
  <EmptyHeader>
    <EmptyMedia />
    <EmptyTitle />
    <EmptyDescription />
  </EmptyHeader>
  <EmptyContent>
    <EmptyDescription />
  </EmptyContent>
</Empty>

API Reference

Empty

Komponen utama empty state. Membungkus komponen EmptyHeader dan EmptyContent.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"empty"

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

EmptyHeader

Komponen EmptyHeader membungkus media, judul, dan keterangan empty state.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"empty-header"

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

EmptyMedia

Pakai komponen EmptyMedia untuk menampilkan media empty state, misalnya ikon atau gambar. Komponen lain seperti avatar juga bisa diletakkan di sini.

Prop	Type	Default	Description
variant?	"default" | "icon"	—	The visual style.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"empty-icon"
[data-variant]	"default" | "icon"

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

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

EmptyTitle

Pakai komponen EmptyTitle untuk menampilkan judul empty state.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"empty-title"

<template>
  <EmptyTitle>No data</EmptyTitle>
</template>

EmptyDescription

Pakai komponen EmptyDescription untuk menampilkan keterangan empty state.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"empty-description"

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

EmptyContent

Pakai komponen EmptyContent untuk menampilkan isi empty state, misalnya tombol, input, atau tautan.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"empty-content"

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

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --foreground, --muted, --muted-foreground, --primary, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.