No Projects Yet

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

Learn More

Installation

pnpm dlx shadcn-vue@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

API Reference

Empty

Komponen utama empty state. Membungkus komponen EmptyHeader dan EmptyContent.

Prop	Tipe	Bawaan
class	string

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

EmptyHeader

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

Prop	Tipe	Bawaan
class	string

<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	Tipe	Bawaan
variant	"default" | "icon"	default
class	string

<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.

Prop	Tipe	Bawaan
class	string

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

EmptyDescription

Pakai komponen EmptyDescription untuk menampilkan keterangan empty state.

Prop	Tipe	Bawaan
class	string

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

EmptyContent

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

Prop	Tipe	Bawaan
class	string

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