Empty State

Data Display

Placeholder view for empty data or search results.

Preview

📭

No messages yet

When you receive messages, they will appear here.

Usage

example.jsx

import { EmptyState } from "@/components/ui/empty-state";

export default function Example() {
  return <EmptyState />;
}

Source Code

Copy this file into components/ui/empty-state.jsx in your project.

empty-state.jsx

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

const EmptyState = forwardRef(({ className, icon, title, description, action, ...props }, ref) => (
  <div ref={ref} className={cn("flex flex-col items-center justify-center rounded-lg border border-dashed bg-background p-8 text-center", className)} {...props}>
    {icon && <div className="mb-4 text-4xl text-muted-foreground">{icon}</div>}
    {title && <h3 className="text-lg font-semibold">{title}</h3>}
    {description && <p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>}
    {action && <div className="mt-4">{action}</div>}
  </div>
));
EmptyState.displayName = "EmptyState";

export { EmptyState };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge