Blocks

Empty State

Empty state centralizado com ícone, título, subtitle e CTA primário. Use em listas vazias.

Estado vazio — círculo tinted com ícone, título, descrição muted, dual CTA.

Nenhum projeto ainda

Crie seu primeiro projeto pra começar a coletar dados e gerar insights.

<div class="flex flex-col items-center gap-4 rounded-2xl border-2 border-dashed border-border bg-card px-6 py-16 text-center">
<span class="flex h-14 w-14 items-center justify-center rounded-full bg-secondary-default">
  <i class="ti ti-folder-open text-secondary-default" style="font-size:28px"></i>
</span>
<div class="flex max-w-md flex-col gap-1.5">
  <h3 class="text-lg font-semibold text-foreground">Nenhum projeto ainda</h3>
  <p class="text-sm leading-relaxed text-muted-foreground">Crie seu primeiro projeto pra começar a coletar dados e gerar insights.</p>
</div>
<div class="flex items-center gap-2">
  <button class="itps-btn itps-btn--primary">Novo projeto</button>
  <button class="itps-btn itps-btn--ghost">Importar</button>
</div>
</div>

<div class="flex flex-col items-center gap-4 rounded-2xl border-2 border-dashed border-border bg-card px-6 py-16 text-center">…</div>