New

Empty State

Illustrated empty state with variants for no data, no results, and errors

Feedback & Statusemptystateplaceholderno-data

Dependencies

shadcn/ui components needed:

npx shadcn@latest add buttonnpx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Inbox, Search, AlertTriangle } from 'lucide-react';
4import { Button } from '@/components/ui/button';
5import { Card, CardContent } from '@/components/ui/card';
6
7export default function EmptyState() {
8  return (
9    <div className="space-y-4 p-6">
10      <Card className="border-dashed">
11        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
12          <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
13            <Inbox className="h-8 w-8 text-muted-foreground" />
14          </div>
15          <h3 className="mb-2 text-lg font-semibold">No data yet</h3>
16          <p className="mb-4 max-w-sm text-sm text-muted-foreground">
17            Get started by creating your first item. Your data will appear here once you begin.
18          </p>
19          <Button>Create First Item</Button>
20        </CardContent>
21      </Card>
22
23      <Card className="border-dashed">
24        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
25          <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
26            <Search className="h-8 w-8 text-muted-foreground" />
27          </div>
28          <h3 className="mb-2 text-lg font-semibold">No results found</h3>
29          <p className="mb-4 max-w-sm text-sm text-muted-foreground">
30            We couldn't find any results matching your search. Try adjusting your filters or search terms.
31          </p>
32          <Button variant="outline">Clear Filters</Button>
33        </CardContent>
34      </Card>
35
36      <Card className="border-dashed">
37        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
38          <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
39            <AlertTriangle className="h-8 w-8 text-destructive" />
40          </div>
41          <h3 className="mb-2 text-lg font-semibold">Something went wrong</h3>
42          <p className="mb-4 max-w-sm text-sm text-muted-foreground">
43            We encountered an error while loading your data. Please try again or contact support if the issue persists.
44          </p>
45          <Button>Try Again</Button>
46        </CardContent>
47      </Card>
48    </div>
49  );
50}