Popover
Popover displays contextual content that highlights a specific element in the UI.
@radix-ui/react-popover
@lucide-react1import * as React from 'react'
2import { X } from 'lucide-react'
3
4import { Avatar, AvatarFallback } from '@/components/ui/avatar'
5import { Button } from '@/components/ui/button'
6import {
7 Popover,
8 PopoverContent,
9 PopoverTrigger,
10} from '@/components/ui/popover'
11import { PopoverClose } from '@radix-ui/react-popover'
12
13export function PopoverDemo() {
14 return (
15 <Popover>
16 <PopoverTrigger asChild>
17 <Button variant={'outline'}>Open Popover</Button>
18 </PopoverTrigger>
19 <PopoverContent className="w-[320px]">
20 <div className="mb-3 flex items-start justify-between">
21 <div className="flex items-center gap-3">
22 <Avatar size={'xl'}>
23 <AvatarFallback>👋</AvatarFallback>
24 </Avatar>
25 <div className="space-y-1">
26 <h4 className="text-primary text-sm font-semibold">
27 Welcome to Dashboard
28 </h4>
29 <p className="text-gray/70 text-xs">
30 Let’s take a quick tour of your workspace.
31 </p>
32 </div>
33 </div>
34 <PopoverClose>
35 <Button variant="ghost" size="icon" className="h-6 w-6">
36 <X className="h-4 w-4" />
37 </Button>
38 </PopoverClose>
39 </div>
40
41 <p className="mb-4 text-sm">
42 Here you can manage your analytics, monitor performance, and
43 customize settings to fit your workflow.
44 </p>
45
46 <div className="border-border flex items-center justify-between border-t pt-4">
47 <p className="text-xs font-medium">Step 1 of 4</p>
48 <div className="flex gap-2">
49 <Button variant="outline" size="sm">
50 Back
51 </Button>
52 <Button size="sm">Next</Button>
53 </div>
54 </div>
55 </PopoverContent>
56 </Popover>
57 )
58}
59Installation
1
Install the following dependencies:
npx shadcn@latest add https://sbthemes-storev2.vercel.app/r/popover.json
Examples
Position
1import * as React from 'react'
2import { X } from 'lucide-react'
3
4import { Avatar, AvatarFallback } from '@/components/ui/avatar'
5import { Button } from '@/components/ui/button'
6import {
7 Popover,
8 PopoverContent,
9 PopoverTrigger,
10} from '@/components/ui/popover'
11import { PopoverClose } from '@radix-ui/react-popover'
12
13export function PopoverPosition() {
14 return (
15 <div className="flex flex-col items-center gap-4">
16 <Popover>
17 <PopoverTrigger asChild>
18 <Button variant={'outline'}>Top</Button>
19 </PopoverTrigger>
20 <PopoverContent className="w-[320px]" side="top">
21 <div className="mb-3 flex items-start justify-between">
22 <div className="flex items-center gap-3">
23 <Avatar size={'xl'}>
24 <AvatarFallback>👋</AvatarFallback>
25 </Avatar>
26 <div className="space-y-1">
27 <h4 className="text-primary text-sm font-semibold">
28 Welcome to Dashboard
29 </h4>
30 <p className="text-gray/70 text-xs">
31 Let’s take a quick tour of your workspace.
32 </p>
33 </div>
34 </div>
35 <PopoverClose>
36 <Button
37 variant="ghost"
38 size="icon"
39 className="h-6 w-6"
40 >
41 <X className="h-4 w-4" />
42 </Button>
43 </PopoverClose>
44 </div>
45
46 <p className="mb-4 text-sm">
47 Here you can manage your analytics, monitor performance,
48 and customize settings to fit your workflow.
49 </p>
50
51 <div className="border-border flex items-center justify-between border-t pt-4">
52 <p className="text-xs font-medium">Step 1 of 4</p>
53 <div className="flex gap-2">
54 <Button variant="outline" size="sm">
55 Back
56 </Button>
57 <Button size="sm">Next</Button>
58 </div>
59 </div>
60 </PopoverContent>
61 </Popover>
62 <Popover>
63 <PopoverTrigger asChild>
64 <Button variant={'outline'}>Right</Button>
65 </PopoverTrigger>
66 <PopoverContent className="w-[320px]" side="right">
67 <div className="mb-3 flex items-start justify-between">
68 <div className="flex items-center gap-3">
69 <Avatar size={'xl'}>
70 <AvatarFallback>👋</AvatarFallback>
71 </Avatar>
72 <div className="space-y-1">
73 <h4 className="text-primary text-sm font-semibold">
74 Welcome to Dashboard
75 </h4>
76 <p className="text-gray/70 text-xs">
77 Let’s take a quick tour of your workspace.
78 </p>
79 </div>
80 </div>
81 <PopoverClose>
82 <Button
83 variant="ghost"
84 size="icon"
85 className="h-6 w-6"
86 >
87 <X className="h-4 w-4" />
88 </Button>
89 </PopoverClose>
90 </div>
91
92 <p className="mb-4 text-sm">
93 Here you can manage your analytics, monitor performance,
94 and customize settings to fit your workflow.
95 </p>
96
97 <div className="border-border flex items-center justify-between border-t pt-4">
98 <p className="text-xs font-medium">Step 1 of 4</p>
99 <div className="flex gap-2">
100 <Button variant="outline" size="sm">
101 Back
102 </Button>
103 <Button size="sm">Next</Button>
104 </div>
105 </div>
106 </PopoverContent>
107 </Popover>
108 <Popover>
109 <PopoverTrigger asChild>
110 <Button variant={'outline'}>Bottom</Button>
111 </PopoverTrigger>
112 <PopoverContent className="w-[320px]" side="bottom">
113 <div className="mb-3 flex items-start justify-between">
114 <div className="flex items-center gap-3">
115 <Avatar size={'xl'}>
116 <AvatarFallback>👋</AvatarFallback>
117 </Avatar>
118 <div className="space-y-1">
119 <h4 className="text-primary text-sm font-semibold">
120 Welcome to Dashboard
121 </h4>
122 <p className="text-gray/70 text-xs">
123 Let’s take a quick tour of your workspace.
124 </p>
125 </div>
126 </div>
127 <PopoverClose>
128 <Button
129 variant="ghost"
130 size="icon"
131 className="h-6 w-6"
132 >
133 <X className="h-4 w-4" />
134 </Button>
135 </PopoverClose>
136 </div>
137
138 <p className="mb-4 text-sm">
139 Here you can manage your analytics, monitor performance,
140 and customize settings to fit your workflow.
141 </p>
142
143 <div className="border-border flex items-center justify-between border-t pt-4">
144 <p className="text-xs font-medium">Step 1 of 4</p>
145 <div className="flex gap-2">
146 <Button variant="outline" size="sm">
147 Back
148 </Button>
149 <Button size="sm">Next</Button>
150 </div>
151 </div>
152 </PopoverContent>
153 </Popover>
154 <Popover>
155 <PopoverTrigger asChild>
156 <Button variant={'outline'}>Left</Button>
157 </PopoverTrigger>
158 <PopoverContent className="w-[320px]" side="left">
159 <div className="mb-3 flex items-start justify-between">
160 <div className="flex items-center gap-3">
161 <Avatar size={'xl'}>
162 <AvatarFallback>👋</AvatarFallback>
163 </Avatar>
164 <div className="space-y-1">
165 <h4 className="text-primary text-sm font-semibold">
166 Welcome to Dashboard
167 </h4>
168 <p className="text-gray/70 text-xs">
169 Let’s take a quick tour of your workspace.
170 </p>
171 </div>
172 </div>
173 <PopoverClose>
174 <Button
175 variant="ghost"
176 size="icon"
177 className="h-6 w-6"
178 >
179 <X className="h-4 w-4" />
180 </Button>
181 </PopoverClose>
182 </div>
183
184 <p className="mb-4 text-sm">
185 Here you can manage your analytics, monitor performance,
186 and customize settings to fit your workflow.
187 </p>
188
189 <div className="border-border flex items-center justify-between border-t pt-4">
190 <p className="text-xs font-medium">Step 1 of 4</p>
191 <div className="flex gap-2">
192 <Button variant="outline" size="sm">
193 Back
194 </Button>
195 <Button size="sm">Next</Button>
196 </div>
197 </div>
198 </PopoverContent>
199 </Popover>
200 </div>
201 )
202}
203Align
1import * as React from 'react'
2import { X } from 'lucide-react'
3
4import { Avatar, AvatarFallback } from '@/components/ui/avatar'
5import { Button } from '@/components/ui/button'
6import {
7 Popover,
8 PopoverContent,
9 PopoverTrigger,
10} from '@/components/ui/popover'
11import { PopoverClose } from '@radix-ui/react-popover'
12
13export function PopoverAlign() {
14 return (
15 <div className="flex flex-col items-center gap-4">
16 <Popover>
17 <PopoverTrigger asChild>
18 <Button variant={'outline'}>Start</Button>
19 </PopoverTrigger>
20 <PopoverContent className="w-[320px]" align="start">
21 <div className="mb-3 flex items-start justify-between">
22 <div className="flex items-center gap-3">
23 <Avatar size={'xl'}>
24 <AvatarFallback>👋</AvatarFallback>
25 </Avatar>
26 <div className="space-y-1">
27 <h4 className="text-primary text-sm font-semibold">
28 Welcome to Dashboard
29 </h4>
30 <p className="text-gray/70 text-xs">
31 Let’s take a quick tour of your workspace.
32 </p>
33 </div>
34 </div>
35 <PopoverClose>
36 <Button
37 variant="ghost"
38 size="icon"
39 className="h-6 w-6"
40 >
41 <X className="h-4 w-4" />
42 </Button>
43 </PopoverClose>
44 </div>
45
46 <p className="mb-4 text-sm">
47 Here you can manage your analytics, monitor performance,
48 and customize settings to fit your workflow.
49 </p>
50
51 <div className="border-border flex items-center justify-between border-t pt-4">
52 <p className="text-xs font-medium">Step 1 of 4</p>
53 <div className="flex gap-2">
54 <Button variant="outline" size="sm">
55 Back
56 </Button>
57 <Button size="sm">Next</Button>
58 </div>
59 </div>
60 </PopoverContent>
61 </Popover>
62 <Popover>
63 <PopoverTrigger asChild>
64 <Button variant={'outline'}>Center</Button>
65 </PopoverTrigger>
66 <PopoverContent className="w-[320px]" align="center">
67 <div className="mb-3 flex items-start justify-between">
68 <div className="flex items-center gap-3">
69 <Avatar size={'xl'}>
70 <AvatarFallback>👋</AvatarFallback>
71 </Avatar>
72 <div className="space-y-1">
73 <h4 className="text-primary text-sm font-semibold">
74 Welcome to Dashboard
75 </h4>
76 <p className="text-gray/70 text-xs">
77 Let’s take a quick tour of your workspace.
78 </p>
79 </div>
80 </div>
81 <PopoverClose>
82 <Button
83 variant="ghost"
84 size="icon"
85 className="h-6 w-6"
86 >
87 <X className="h-4 w-4" />
88 </Button>
89 </PopoverClose>
90 </div>
91
92 <p className="mb-4 text-sm">
93 Here you can manage your analytics, monitor performance,
94 and customize settings to fit your workflow.
95 </p>
96
97 <div className="border-border flex items-center justify-between border-t pt-4">
98 <p className="text-xs font-medium">Step 1 of 4</p>
99 <div className="flex gap-2">
100 <Button variant="outline" size="sm">
101 Back
102 </Button>
103 <Button size="sm">Next</Button>
104 </div>
105 </div>
106 </PopoverContent>
107 </Popover>
108 <Popover>
109 <PopoverTrigger asChild>
110 <Button variant={'outline'}>End</Button>
111 </PopoverTrigger>
112 <PopoverContent className="w-[320px]" align="end">
113 <div className="mb-3 flex items-start justify-between">
114 <div className="flex items-center gap-3">
115 <Avatar size={'xl'}>
116 <AvatarFallback>👋</AvatarFallback>
117 </Avatar>
118 <div className="space-y-1">
119 <h4 className="text-primary text-sm font-semibold">
120 Welcome to Dashboard
121 </h4>
122 <p className="text-gray/70 text-xs">
123 Let’s take a quick tour of your workspace.
124 </p>
125 </div>
126 </div>
127 <PopoverClose>
128 <Button
129 variant="ghost"
130 size="icon"
131 className="h-6 w-6"
132 >
133 <X className="h-4 w-4" />
134 </Button>
135 </PopoverClose>
136 </div>
137
138 <p className="mb-4 text-sm">
139 Here you can manage your analytics, monitor performance,
140 and customize settings to fit your workflow.
141 </p>
142
143 <div className="border-border flex items-center justify-between border-t pt-4">
144 <p className="text-xs font-medium">Step 1 of 4</p>
145 <div className="flex gap-2">
146 <Button variant="outline" size="sm">
147 Back
148 </Button>
149 <Button size="sm">Next</Button>
150 </div>
151 </div>
152 </PopoverContent>
153 </Popover>
154 </div>
155 )
156}
157API Reference
This component is based on the <div> element and supports all of its props and adds:
Trigger
A button that opens the popover.
| Prop | Type | Default |
|---|---|---|
| asChild | boolean | false |
Content
| Prop | Type | Default |
|---|---|---|
| side | top, right, bottom, left | top |
| align | start, center, end | center |
| sideOffset | number | 8 |
On This Page