Ermine UI

Empty state

What to show when there is nothing to list yet: an icon, a heading, a line of text and an action.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add empty-state
pnpm dlx ermineui add empty-state
yarn dlx ermineui add empty-state
bunx ermineui add empty-state

That copies 2 files into src/components/ui/empty-state/. Files you already have are kept.

Use

import { EmptyState } from '@/components/ui/empty-state'
<Collapsible v-model:open="open">
  <CollapsibleTrigger as-child><Button variant="outline">Details</Button></CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

<HoverCard>
  <HoverCardTrigger href="/people/ines">Ines Kovač</HoverCardTrigger>
  <HoverCardContent>Owner · 214 deployments this year</HoverCardContent>
</HoverCard>

<Sidebar v-model:collapsed="collapsed">
  <SidebarGroup label="Project">
    <SidebarItem :as="NuxtLink" to="/deployments" active>
      <template #icon><svg>…</svg></template>
      Deployments
    </SidebarItem>
  </SidebarGroup>
</Sidebar>

<EmptyState title="No deployments yet" description="Push to main and it will show up here.">
  <Button>Deploy now</Button>
</EmptyState>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
EmptyState.vuesrc/components/ui/empty-state/EmptyState.vue
index.tssrc/components/ui/empty-state/index.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

EmptyState.vue 69 lines
<script setup lang="ts">
defineProps<{
  title: string
  description?: string
}>()
</script>

<template>
  <div class="er-empty-state">
    <div v-if="$slots.icon" class="er-empty-state-icon" aria-hidden="true"><slot name="icon" /></div>
    <p class="er-empty-state-title">{{ title }}</p>
    <p v-if="description" class="er-empty-state-description">{{ description }}</p>
    <div v-if="$slots.default" class="er-empty-state-actions"><slot /></div>
  </div>
</template>

<style>
@layer components {
  .er-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--er-input);
    border-radius: var(--er-radius-lg);
    text-align: center;
  }

  .er-empty-state-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--er-radius-lg);
    background: var(--er-muted);
    color: var(--er-muted-foreground);
  }

  .er-empty-state-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .er-empty-state-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: var(--er-weight-semibold);
  }

  .er-empty-state-description {
    max-width: 28rem;
    margin: 0;
    color: var(--er-muted-foreground);
    font-size: 0.875rem;
    text-wrap: balance;
  }

  .er-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
}
</style>
index.ts 3 lines
/** Empty state — what to show when there is nothing to list yet: an icon, a heading, a line of text and an action. */
export { default as EmptyState } from './EmptyState.vue'