UIPackage
Vue React

Empty State

Vue feedback
Edit on GitHub

Centered placeholder with icon, headline, supporting text, and one or two actions. Drop into empty lists, blank dashboards, and unauthenticated views — the standard "nothing here yet" pattern.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/empty-state.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/empty-state

Examples

Props

Name Type / Values Default Required
icon Component — optional
title string — optional
description string — optional
role
'status''alert'
— optional
headingTag
'h1''h2''h3''h4''h5''h6'
— optional
class string — optional

Files (2)

  • app/components/ui/empty-state/EmptyState.vue 0.8 kB 
    <script setup lang="ts">
import type { Component } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  icon?: Component
  title?: string
  description?: string
  role?: 'status' | 'alert'
  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  class?: string
}>()
</script>

<template>
  <div
    :class="cn('flex flex-col items-center py-12 text-center', props.class)"
    :role="props.role ?? 'status'"
    aria-live="polite"
  >
    <component :is="icon" v-if="icon" class="text-muted-foreground mx-auto mb-3 size-10" aria-hidden="true" />
    <component :is="props.headingTag ?? 'h3'" v-if="title" class="text-foreground font-medium">
      {{ title }}
    </component>
    <p v-if="description" class="text-muted-foreground mt-1 max-w-sm text-sm">{{ description }}</p>
    <slot />
  </div>
</template>
  • app/components/ui/empty-state/index.ts 0.1 kB 
    export { default as EmptyState } from './EmptyState.vue'

Raw manifest: https://uipkge.dev/r/vue/empty-state.json