Search
Copy Code
Previous: Drawer
Next: Hover Card
Close Terminal
Light Mode
popover-demo.tsx
popover.tsx
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import {
4
Popover,
5
PopoverContent,
6
PopoverTrigger,
7
} from "@/components/ui/popover"
8
9
export default function PopoverDemo() {
10
return (
11
<div className="w-full min-h-[400px] flex items-center justify-center p-8">
12
<Popover>
13
<PopoverTrigger className="inline-flex h-8 items-center justify-center rounded-full border border-black/10 bg-transparent px-4 text-xs font-medium transition-colors hover:bg-black/5 dark:border-white/10 dark:text-zinc-50 dark:hover:bg-white/5">
14
Open popover
15
</PopoverTrigger>
16
<PopoverContent className="w-[340px] p-5" onOpenAutoFocus={(e) => e.preventDefault()}>
17
<div className="grid gap-4">
18
<div className="space-y-1">
19
<h4 className="text-[15px] font-medium leading-none dark:text-zinc-50 text-zinc-950">Install notes</h4>
20
<p className="text-[13px] text-zinc-500 dark:text-zinc-400">
21
Token and workspace for this component.
22
</p>
23
</div>
24
<div className="grid gap-3 pt-2">
25
<div className="grid grid-cols-[100px_1fr] items-center gap-4">
26
<label className="text-[13px] font-medium text-zinc-900 dark:text-zinc-100">
27
Token
28
</label>
29
<input
30
defaultValue="100%"
31
className="flex h-8 w-full rounded-full border border-black/10 bg-transparent px-3 py-1 text-[13px] shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:placeholder:text-zinc-400 dark:focus-visible:ring-white/20 dark:text-white"
32
/>
33
</div>
34
<div className="grid grid-cols-[100px_1fr] items-center gap-4">
35
<label className="text-[13px] font-medium text-zinc-900 dark:text-zinc-100">
36
Workspace
37
</label>
38
<input
39
defaultValue="300px"
40
className="flex h-8 w-full rounded-full border border-black/10 bg-transparent px-3 py-1 text-[13px] shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:placeholder:text-zinc-400 dark:focus-visible:ring-white/20 dark:text-white"
41
/>
42
</div>
43
<div className="grid grid-cols-[100px_1fr] items-center gap-4">
44
<label className="text-[13px] font-medium text-zinc-900 dark:text-zinc-100">
45
Scope
46
</label>
47
<input
48
defaultValue="25px"
49
className="flex h-8 w-full rounded-full border border-black/10 bg-transparent px-3 py-1 text-[13px] shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:placeholder:text-zinc-400 dark:focus-visible:ring-white/20 dark:text-white"
50
/>
51
</div>
52
<div className="grid grid-cols-[100px_1fr] items-center gap-4">
53
<label className="text-[13px] font-medium text-zinc-900 dark:text-zinc-100">
54
Region
55
</label>
56
<input
57
defaultValue="none"
58
className="flex h-8 w-full rounded-full border border-black/10 bg-transparent px-3 py-1 text-[13px] shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:placeholder:text-zinc-400 dark:focus-visible:ring-white/20 dark:text-white"
59
/>
60
</div>
61
</div>
62
</div>
63
</PopoverContent>
64
</Popover>
65
</div>
66
)
67
}