Empty state

Container de borda tracejada com ícone centralizado, headline, descrição e CTA dupla. O padrão canônico de empty-state.

Visão geral

Um componente de empty-state focado: um fundo muted suave emoldurado com uma borda tracejada, um medalhão circular de ícone, uma headline, uma curta descrição e uma ação primary mais uma secondary.

Use este block sempre que uma lista, table ou board ainda não tiver itens. Substitua o ícone, o texto e as ações para combinar com a superfície.

Preview

No items yet

You haven't created any items. Once you do, they will show up here.

Anatomia

EmptyState                  border-dashed panel, muted background
├─ icon medallion           muted circle + lucide Inbox icon
├─ headline + description    h2 + paragraph
└─ action row               Button (Create item) · Button ghost (Browse templates)

Instalação

npx gremorie@latest add block-empty-state

pnpm dlx gremorie@latest add block-empty-state

yarn dlx gremorie@latest add block-empty-state

bunx --bun gremorie@latest add block-empty-state

Código

'use client';

import { Button } from '@gremorie/rx-forms';
import { Inbox, Plus } from 'lucide-react';

export function EmptyState() {
  return (
    <div className="flex w-full flex-col items-center justify-center gap-5 rounded-lg border border-dashed bg-muted/20 px-6 py-20 text-center">
      <div className="flex size-14 items-center justify-center rounded-full bg-muted">
        <Inbox className="size-7 text-muted-foreground" aria-hidden="true" />
      </div>
      <div className="flex max-w-md flex-col gap-2">
        <h2 className="text-xl font-semibold">No items yet</h2>
        <p className="text-sm text-muted-foreground">
          You haven&apos;t created any items. Once you do, they will show up
          here.
        </p>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Button>
          <Plus aria-hidden="true" />
          Create item
        </Button>
        <Button variant="ghost">Browse templates</Button>
      </div>
    </div>
  );
}

A edição Angular deste componente está planejada; a edição React está production-ready hoje.

Customização

Troque o ícone e o texto para caber no contexto: sem resultados (Search), sem dados (Database), permissão negada (Lock), em breve (Clock)
Remova um dos botões para uma variante de CTA única
Envolva em Card quando o empty state precisa se ler como uma seção contida
Adicione uma ilustração inline acima do medalhão para superfícies de maior fidelidade

Relacionados

Button
Card