Search
Copy Code
Previous: Skeleton
Next: Form
Close Terminal
Light Mode
No projects yet
Create your first project to get started.
empty-demo.tsx
empty.tsx
prompt.md
Collapse
Reset
Copy Code
Download
Run
1
"use client";
2
3
import { Empty } from "./empty"
4
import { Plus } from "lucide-react"
5
6
export function EmptyDemo() {
7
return (
8
<div className="w-full h-full flex items-center justify-center p-8">
9
<Empty
10
className="w-full max-w-lg"
11
title="No projects yet"
12
description="Create your first project to get started."
13
icon={
14
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-5 h-5 text-zinc-500 dark:text-zinc-400">
15
<rect x="3" y="3" width="7" height="7" rx="1.5" />
16
<rect x="14" y="3" width="7" height="7" rx="1.5" />
17
<rect x="14" y="14" width="7" height="7" rx="1.5" />
18
<rect x="3" y="14" width="7" height="7" rx="1.5" />
19
</svg>
20
}
21
action={
22
<button className="flex items-center gap-1.5 px-4 py-2 bg-white dark:bg-zinc-100 text-black rounded-full font-medium text-[13px] hover:bg-zinc-50 dark:hover:bg-white transition-all shadow-sm ring-1 ring-black/5 dark:ring-0 active:scale-95">
23
<Plus className="w-3.5 h-3.5" />
24
<span>New project</span>
25
</button>
26
}
27
/>
28
</div>
29
)
30
}
31