empty-stateuiCentered 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 ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/empty-state.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/empty-state.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/empty-state.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/empty-state.jsonnpx shadcn-vue@latest add @uipkge/empty-stateInstalls to:app/components/ui/empty-state/| 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 |
<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="(props.role ?? 'status') === 'alert' ? 'assertive' : '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>
export { default as EmptyState } from './EmptyState.vue'
Raw manifest:https://uipkge.dev/r/vue/empty-state.json
