Empty State

Recipe CSS

This is the exact CSS your kit ships for Empty State — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Empty state ===
   The "nothing here yet" placeholder — a real tokenised recipe (was inline
   div-soup that couldn't export). One muted icon chip, a title, a sub, and a
   SINGLE primary action (two competing CTAs is the classic empty-state smell).
   shadcn's <Empty> shape. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--k-s-10);
  padding: var(--k-space, 16px) var(--k-s-8);
  text-align: center;
}
.empty__icon {
  display: grid;
  place-items: center;
  width: var(--k-row-h-lg, 40px);
  height: var(--k-row-h-lg, 40px);
  border-radius: 50%;
  background: var(--k-surface-2);
  color: var(--k-fg-muted);
}
.empty__icon > svg { width: var(--k-icon, 18px); height: var(--k-icon, 18px); }
.empty__title { font-weight: var(--k-weight-semibold); font-size: var(--k-type-small); }
.empty__sub { font-size: var(--k-type-small); color: var(--k-fg-muted); max-width: 32ch; }
/* --- Action grid (Tailwind "empty state with templates / starting points") ---
   A grid of "starting point" cards below the empty copy — pick a template instead
   of facing a blank canvas. Pair with .card--interactive tiles. */
.empty__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--k-s-10); width: 100%; margin-top: var(--k-s-6); }