Blank

Designed empty/error state for tables and lists, with optional actions.

import { Blank }from "@/components/ui"

Specification

Renders a designed empty or error state inside tables and lists, with an optional action button and mono detail line.

Props (7)
Every prop this component accepts, its type, default, and how to use it.
PropTypeDefaultDescription
iconLucideIcon—Optional icon shown above the title, colored by tone.
title*string—Short heading describing the empty or error state.
body*string—Explanatory text below the title.
actionstring—Label for an optional primary action button.
onAction() => void—Handler invoked when the action button is clicked.
monostring—Optional monospace detail line (e.g. an error code) shown at the bottom.
tone"rose" | "amber" | "neutral""neutral"Colors the icon to signal the nature of the state.

Empty state

No users yet

Invite your first teammate to get started.

Full source
The complete component, read from src/components/ui/blank.tsx.
blank.tsx
"use client";

import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "./button";

type BlankTone = "rose" | "amber" | "neutral";

interface BlankProps {
  icon?: LucideIcon;
  title: string;
  body: string;
  action?: string;
  onAction?: () => void;
  mono?: string;
  tone?: BlankTone;
}

const TONE_TEXT: Record<BlankTone, string> = {
  rose: "text-error",
  amber: "text-warning",
  neutral: "text-text-tertiary",
};

export function Blank({
  icon: Icon,
  title,
  body,
  action,
  onAction,
  mono,
  tone = "neutral",
}: BlankProps) {
  return (
    <div className="flex flex-col items-center px-6 py-16 text-center">
      {Icon && <Icon size={22} className={TONE_TEXT[tone]} aria-hidden />}
      <p className="mt-3 text-base font-medium text-text">{title}</p>
      <p className="mx-auto mt-1 max-w-sm text-sm leading-relaxed text-text-secondary">{body}</p>
      {action && (
        <div className="mt-4">
          <Button onClick={onAction}>{action}</Button>
        </div>
      )}
      {mono && <p className="mt-5 font-mono text-[11px] text-text-tertiary">{mono}</p>}
    </div>
  );
}