Empty

Vue empty state with header, media, and actions for zero-data, error, or onboarding screens.

Show code

Features

Composable — Flexible slot-based layout with Empty.Header, Empty.Media, Empty.Title, Empty.Description, and Empty.Content
Styled primitives — Opinionated defaults for spacing, typography, and icon media
Customizable — Override any part with the class prop

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/empty.json

      
      npx shadcn-vue@latest add https://vuzeno.com/r/empty.json

      
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/empty.json

      
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/empty.json

Usage

      
      <script setup lang="ts">
import { Empty } from "@/components/ui/empty";
import { Button } from "@/components/ui/button";
import { InboxIcon } from "@lucide/vue";
</script>

<template>
  <Empty.Root>
    <Empty.Header>
      <Empty.Media variant="icon">
        <InboxIcon />
      </Empty.Media>
      <Empty.Title>No data</Empty.Title>
      <Empty.Description>No data found</Empty.Description>
    </Empty.Header>
    <Empty.Content>
      <Button>Add data</Button>
    </Empty.Content>
  </Empty.Root>
</template>

Composition

      
      Empty.Root
├── Empty.Header
│   ├── Empty.Media
│   ├── Empty.Title
│   └── Empty.Description
└── Empty.Content

Examples

Outline

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

Show code

Background

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

Show code

Avatar

Use Empty.Media to display an avatar in the empty state.

Show code

Avatar Group

Use Empty.Media to display an avatar group in the empty state.

Show code

Input Group

Add an InputGroup component to Empty.Content.

Show code

API

Empty.Media

Prop	Type	Default	Description
`variant`	`"default" \| "icon"`	`"default"`	Visual style of the media container
`class`	`string`	—	Additional CSS classes

Editable Field