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-next'
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

Use the border utility class to create a outline empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

Background

Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

No Notifications

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

Avatar

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

ZN

User Offline

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

Avatar Group

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

AASBZN

No Team Members

Invite your team to collaborate on this project.