About
A placeholder block with an icon, title, description and action for when a list, table or search has no results to show.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Empty State to your project and fits it to your theme.
Code
How Empty State is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { EmptyState } from "@/components/ui/empty-state";
import { Button } from "@/components/ui/button";
import { Inbox, Plus } from "lucide-react";
export default function EmptyStateDemo() {
return (
<div className="grid w-full max-w-3xl grid-cols-1 gap-4 p-6 sm:grid-cols-2">
<EmptyState
variant="default"
icon={<Inbox />}
title="No messages"
description='variant="default"'
action={
<Button size="sm">
<Plus /> New message
</Button>
}
/>
<EmptyState
variant="outline"
icon={<Inbox />}
title="No messages"
description='variant="outline"'
action={
<Button size="sm">
<Plus /> New message
</Button>
}
/>
<EmptyState
variant="dashed"
icon={<Inbox />}
title="No messages"
description='variant="dashed"'
action={
<Button size="sm">
<Plus /> New message
</Button>
}
/>
<EmptyState
variant="background"
icon={<Inbox />}
title="No messages"
description='variant="background"'
action={
<Button size="sm">
<Plus /> New message
</Button>
}
/>
</div>
);
}
Dependencies
More by wunder-ui
View all
Popover