Empty

Buttons 15

About

A composable empty-state block for when there's no data to show — no results, no events, an empty folder, cleared filters. Ships Empty plus EmptyHeader, EmptyMedia (with a stacked 'icon' variant), EmptyTitle, EmptyDescription and EmptyContent, so you can drop in an icon or illustration, a title, supporting copy and call-to-action buttons. Dependency-free (just cva + cn).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Empty to your project and fits it to your theme.

Code

How Empty is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BookIcon, RouteIcon } from "lucide-react";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/cnippet-empty";

const btnBase =
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium h-8 px-3 transition-colors [&_svg]:size-4 [&_svg]:shrink-0";

export default function EmptyDemo() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <RouteIcon />
        </EmptyMedia>
        <EmptyTitle>No upcoming meetings</EmptyTitle>
        <EmptyDescription>Create a meeting to get started.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <div className="flex gap-2">
          <button
            className={`${btnBase} bg-primary text-primary-foreground hover:bg-primary/90`}
            type="button"
          >
            Create meeting
          </button>
          <button
            className={`${btnBase} border border-input bg-background hover:bg-accent hover:text-accent-foreground`}
            type="button"
          >
            <BookIcon />
            View docs
          </button>
        </div>
      </EmptyContent>
    </Empty>
  );
}