StorybookGitHub

Empty

Displays an empty state placeholder with icon, title, description, and actions.

No Projects Yet

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

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/empty.json

Usage

Use empty for zero-state screens — an empty list, a search with no results, or a feature that hasn't been set up yet — pairing an icon or illustration with a short explanation and a next step.

<script setup lang="ts">
import { Folder } from "@lucide/vue";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
</script>

<template>
  <Empty>
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <Folder />
      </EmptyMedia>
      <EmptyTitle>No projects yet</EmptyTitle>
      <EmptyDescription>Create your first project to get started.</EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <button class="text-sm underline">Create project</button>
    </EmptyContent>
  </Empty>
</template>