Empty

No content/data exists.

html

<div class="emp" data-empty="true" style="--accent:#D9C8F0;">
  <ul class="emp__list">
    <li>Marketing site redesign</li>
    <li>Q3 roadmap</li>
    <li>Onboarding revamp</li>
  </ul>
  <div class="emp__state">
    <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="7" width="16" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M4 10h16M9 4h6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
    <h3 class="emp__heading">No projects yet</h3>
    <p class="emp__body">Create your first project to see it listed here.</p>
  </div>
</div>
<style>
.emp { width: 280px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; text-align: center; }
.emp__list { display: none; list-style: none; margin: 0; padding: 0; text-align: left; }
.emp__list li { padding: 9px 10px; border-bottom: 1px solid #24143014; font-weight: 600; font-size: 13px; }
.emp__state { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; color: var(--accent); }
.emp[data-empty="false"] .emp__list { display: block; }
.emp[data-empty="true"] .emp__state { display: flex; }
.emp__heading { margin: 0; font-size: 15px; font-weight: 700; color: #241430; }
.emp__body { margin: 0; font-size: 12px; color: #241430aa; max-width: 200px; }
</style>

tailwind

<div class="emp-tw w-[280px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl text-center" data-empty="true">
  <ul class="emp-tw__list hidden list-none m-0 p-0 text-left">
    <li class="px-2.5 py-2.5 border-b border-[#24143014] font-semibold text-[13px]">Marketing site redesign</li>
    <li class="px-2.5 py-2.5 border-b border-[#24143014] font-semibold text-[13px]">Q3 roadmap</li>
    <li class="px-2.5 py-2.5 border-b border-[#24143014] font-semibold text-[13px]">Onboarding revamp</li>
  </ul>
  <div class="emp-tw__state hidden flex-col items-center gap-2 px-2 py-3.5" style="color:#D9C8F0">
    <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="7" width="16" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M4 10h16M9 4h6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
    <h3 class="m-0 text-[15px] font-bold text-[#241430]">No projects yet</h3>
    <p class="m-0 text-xs text-[#241430]/70 max-w-[200px]">Create your first project to see it listed here.</p>
  </div>
</div>
<style>
.emp-tw[data-empty="false"] .emp-tw__list { display: block; }
.emp-tw[data-empty="true"] .emp-tw__state { display: flex; }
</style>

react

export function EmptyState({
  heading = "No projects yet",
  body = "Create your first project to see it listed here.",
  accent = "#D9C8F0",
  force = true,
}) {
  const items = ["Marketing site redesign", "Q3 roadmap", "Onboarding revamp"];
  return (
    <div style={{ width: 280, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, textAlign: "center" }}>
      {force ? (
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, padding: "14px 8px", color: accent }}>
          <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="7" width="16" height="13" rx="2" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M4 10h16M9 4h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: "#241430" }}>{heading}</h3>
          <p style={{ margin: 0, fontSize: 12, color: "#241430aa", maxWidth: 200 }}>{body}</p>
        </div>
      ) : (
        <ul style={{ listStyle: "none", margin: 0, padding: 0, textAlign: "left" }}>
          {items.map((item) => (
            <li key={item} style={{ padding: "9px 10px", borderBottom: "1px solid #24143014", fontWeight: 600, fontSize: 13 }}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}