Empty

Empty state with icon, copy and an optional call to action.

FeedbackServer-safe

No projects yet

Create your first project to see it here.

Install

bash

npx @agents-npm-packages/vibeui add empty --dir ./src/components/ui

Import

tsx

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

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<Empty>

Prop	Type	Default	Description
title*	string	—	Heading text.
description	string	—	Supporting text under the title.
action	ReactNode	—	Optional action (usually a Button) shown alongside the message.
className	string	—	Extra classes, merged with the component's own.
icon	ReactNode	—	Icon shown in the leading position.

Source

src/components/ui/empty.tsx

import { cn } from "@/lib/utils";

/** Empty state with icon, copy and an optional call to action. */
export function Empty({
  title,
  description,
  action,
  className,
  icon,
}: {
  title: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
  icon?: React.ReactNode;
}) {
  return (
    <div
      className={cn(
        "flex animate-fade-up flex-col items-center justify-center rounded-lg border border-dashed border-line-strong px-6 py-12 text-center",
        className,
      )}
    >
      {icon ? (
        <div className="mb-4 flex size-11 animate-float items-center justify-center rounded-md border border-line bg-surface text-muted shadow-quiet">
          {icon}
        </div>
      ) : null}
      <p className="text-[15px] font-medium tracking-[-0.01em] text-ink">{title}</p>
      {description ? (
        <p className="mt-1.5 max-w-xs text-sm leading-relaxed text-muted">
          {description}
        </p>
      ) : null}
      {action ? <div className="mt-5">{action}</div> : null}
    </div>
  );
}

Exports Empty. Peer dependencies: clsx, tailwind-merge.