Empty

"use client"

import { Empty } from "@/registry/warren/empty/empty"

export default function EmptyDemo() {
  return (
    <div className="w-full max-w-xl">
      <Empty
        title="No runs yet"
        description="Trigger a deploy sweep to populate the run wall."
        code="E_NO_RUNS"
        action={{ label: "Run sweep", onClick: () => {} }}
      />
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/empty.json

Usage

import { Empty } from "@/components/ui/empty"

<Empty
  title="No runs yet"
  description="Trigger a deploy sweep to populate the run wall."
  code="E_NO_RUNS"
  action={{ label: "Run sweep", onClick: startSweep }}
/>

Structure

The uniform zero-data surface: a bordered inset panel announcing itself via role="status", a frozen spinner schematic (a static 2×2 block with one filled cell — paused progress, deliberately not animated), the reason phrase as an 11px mono bold caps line, and an optional text-grade description. Exactly one primary action — an empty state is a first onboarding touchpoint, not a menu.

Warning tone

Pass tone="warning" when data is expected but missing: the border, the filled schematic cell, and the signal dot tint warning while the text stays in text-grade tokens. The default muted tone keeps everything hairline.

API Reference