Hover card
Displays a quick preview of related content when users hover over an element.
@radix-ui/react-hover-card
lucide-react1import { TrendingUp } from 'lucide-react'
2
3import {
4 Avatar,
5 AvatarFallback,
6 AvatarImage,
7} from '@/components/ui/avatar'
8import { Button } from '@/components/ui/button'
9import {
10 HoverCard,
11 HoverCardContent,
12 HoverCardTrigger,
13} from '@/components/ui/hover-card'
14
15export function HoverCardDemo() {
16 return (
17 <HoverCard>
18 <HoverCardTrigger asChild>
19 <Button variant="link" className="text-sm font-medium">
20 @sbtheme
21 </Button>
22 </HoverCardTrigger>
23 <HoverCardContent className="w-80 sm:w-96">
24 <div className="flex flex-col items-start gap-3 sm:flex-row">
25 <Avatar>
26 <AvatarImage src="/images/sb-profile.png" />
27 <AvatarFallback>SB</AvatarFallback>
28 </Avatar>
29 <div className="space-y-2">
30 <h4 className="text-primary text-base leading-none font-semibold sm:text-lg/5">
31 SB Theme
32 </h4>
33 <p className="text-sm/4.5">
34 Explore free templates, components, and tools for
35 building modern web apps.
36 </p>
37
38 <div className="space-y-2 pt-1 text-xs">
39 <div className="flex gap-1.5">
40 <TrendingUp className="text-secondary size-4" />
41 Free Templates — Ready-to-use layouts for quick
42 projects
43 </div>
44 <div className="flex gap-1.5">
45 <TrendingUp className="text-secondary size-4" />
46 Components — Reusable UI components for rapid
47 development
48 </div>
49 </div>
50 </div>
51 </div>
52 </HoverCardContent>
53 </HoverCard>
54 )
55}
56Installation
1
Install the following dependencies:
npx shadcn@latest add https://sbthemes.com/r/hover-card.json
Examples
This component is based on the <button> element and supports all of its props and adds:
Position
1import { TrendingUp } from 'lucide-react'
2
3import {
4 Avatar,
5 AvatarFallback,
6 AvatarImage,
7} from '@/components/ui/avatar'
8import { Button } from '@/components/ui/button'
9import {
10 HoverCard,
11 HoverCardContent,
12 HoverCardTrigger,
13} from '@/components/ui/hover-card'
14
15export function HoverCardPosition() {
16 return (
17 <div className="flex flex-col items-center gap-4">
18 <HoverCard>
19 <HoverCardTrigger asChild>
20 <Button variant="link" className="text-sm font-medium">
21 @top
22 </Button>
23 </HoverCardTrigger>
24 <HoverCardContent className="w-80 sm:w-96" side="top">
25 <div className="flex flex-col items-start gap-3 sm:flex-row">
26 <Avatar>
27 <AvatarImage src="/images/sb-profile.png" />
28 <AvatarFallback>SB</AvatarFallback>
29 </Avatar>
30 <div className="space-y-2">
31 <h4 className="text-primary text-base leading-none font-semibold sm:text-lg/5">
32 SB Theme
33 </h4>
34 <p className="text-sm/4.5">
35 Explore free templates, components, and tools
36 for building modern web apps.
37 </p>
38
39 <div className="space-y-2 pt-1 text-xs">
40 <div className="flex gap-1.5">
41 <TrendingUp className="text-secondary size-4" />
42 Free Templates — Ready-to-use layouts for
43 quick projects
44 </div>
45 <div className="flex gap-1.5">
46 <TrendingUp className="text-secondary size-4" />
47 Components — Reusable UI components for
48 rapid development
49 </div>
50 </div>
51 </div>
52 </div>
53 </HoverCardContent>
54 </HoverCard>
55 <HoverCard>
56 <HoverCardTrigger asChild>
57 <Button variant="link" className="text-sm font-medium">
58 @right
59 </Button>
60 </HoverCardTrigger>
61 <HoverCardContent className="w-80 sm:w-96" side="right">
62 <div className="flex flex-col items-start gap-3 sm:flex-row">
63 <Avatar>
64 <AvatarImage src="/images/sb-profile.png" />
65 <AvatarFallback>SB</AvatarFallback>
66 </Avatar>
67 <div className="space-y-2">
68 <h4 className="text-primary text-base leading-none font-semibold sm:text-lg/5">
69 SB Theme
70 </h4>
71 <p className="text-sm/4.5">
72 Explore free templates, components, and tools
73 for building modern web apps.
74 </p>
75
76 <div className="space-y-2 pt-1 text-xs">
77 <div className="flex gap-1.5">
78 <TrendingUp className="text-secondary size-4" />
79 Free Templates — Ready-to-use layouts for
80 quick projects
81 </div>
82 <div className="flex gap-1.5">
83 <TrendingUp className="text-secondary size-4" />
84 Components — Reusable UI components for
85 rapid development
86 </div>
87 </div>
88 </div>
89 </div>
90 </HoverCardContent>
91 </HoverCard>{' '}
92 <HoverCard>
93 <HoverCardTrigger asChild>
94 <Button variant="link" className="text-sm font-medium">
95 @left
96 </Button>
97 </HoverCardTrigger>
98 <HoverCardContent className="w-80 sm:w-96" side="left">
99 <div className="flex flex-col items-start gap-3 sm:flex-row">
100 <Avatar>
101 <AvatarImage src="/images/sb-profile.png" />
102 <AvatarFallback>SB</AvatarFallback>
103 </Avatar>
104 <div className="space-y-2">
105 <h4 className="text-primary text-base leading-none font-semibold sm:text-lg/5">
106 SB Theme
107 </h4>
108 <p className="text-sm/4.5">
109 Explore free templates, components, and tools
110 for building modern web apps.
111 </p>
112
113 <div className="space-y-2 pt-1 text-xs">
114 <div className="flex gap-1.5">
115 <TrendingUp className="text-secondary size-4" />
116 Free Templates — Ready-to-use layouts for
117 quick projects
118 </div>
119 <div className="flex gap-1.5">
120 <TrendingUp className="text-secondary size-4" />
121 Components — Reusable UI components for
122 rapid development
123 </div>
124 </div>
125 </div>
126 </div>
127 </HoverCardContent>
128 </HoverCard>
129 <HoverCard>
130 <HoverCardTrigger asChild>
131 <Button variant="link" className="text-sm font-medium">
132 @bottom
133 </Button>
134 </HoverCardTrigger>
135 <HoverCardContent className="w-80 sm:w-96" side="bottom">
136 <div className="flex flex-col items-start gap-3 sm:flex-row">
137 <Avatar>
138 <AvatarImage src="/images/sb-profile.png" />
139 <AvatarFallback>SB</AvatarFallback>
140 </Avatar>
141 <div className="space-y-2">
142 <h4 className="text-primary text-base leading-none font-semibold sm:text-lg/5">
143 SB Theme
144 </h4>
145 <p className="text-sm/4.5">
146 Explore free templates, components, and tools
147 for building modern web apps.
148 </p>
149
150 <div className="space-y-2 pt-1 text-xs">
151 <div className="flex gap-1.5">
152 <TrendingUp className="text-secondary size-4" />
153 Free Templates — Ready-to-use layouts for
154 quick projects
155 </div>
156 <div className="flex gap-1.5">
157 <TrendingUp className="text-secondary size-4" />
158 Components — Reusable UI components for
159 rapid development
160 </div>
161 </div>
162 </div>
163 </div>
164 </HoverCardContent>
165 </HoverCard>
166 </div>
167 )
168}
169Align
1import { TrendingUp } from 'lucide-react'
2
3import {
4 Avatar,
5 AvatarFallback,
6 AvatarImage,
7} from '@/components/ui/avatar'
8import { Button } from '@/components/ui/button'
9import {
10 HoverCard,
11 HoverCardContent,
12 HoverCardTrigger,
13} from '@/components/ui/hover-card'
14
15export function HoverCardAlign() {
16 return (
17 <div className="flex flex-col items-center gap-4">
18 <HoverCard>
19 <HoverCardTrigger asChild>
20 <Button variant="link" className="text-sm font-medium">
21 @start
22 </Button>
23 </HoverCardTrigger>
24 <HoverCardContent className="w-80 sm:w-96" align='start'>
25 <div className="flex flex-col items-start gap-3 sm:flex-row">
26 <Avatar>
27 <AvatarImage src="/images/sb-profile.png" />
28 <AvatarFallback>SB</AvatarFallback>
29 </Avatar>
30 <div className="space-y-2">
31 <h4 className="text-primary text-base leading-none font-semibold sm:text-lg/5">
32 SB Theme
33 </h4>
34 <p className="text-sm/4.5">
35 Explore free templates, components, and tools
36 for building modern web apps.
37 </p>
38
39 <div className="space-y-2 pt-1 text-xs">
40 <div className="flex gap-1.5">
41 <TrendingUp className="text-secondary size-4" />
42 Free Templates — Ready-to-use layouts for
43 quick projects
44 </div>
45 <div className="flex gap-1.5">
46 <TrendingUp className="text-secondary size-4" />
47 Components — Reusable UI components for
48 rapid development
49 </div>
50 </div>
51 </div>
52 </div>
53 </HoverCardContent>
54 </HoverCard>
55 <HoverCard>
56 <HoverCardTrigger asChild>
57 <Button variant="link" className="text-sm font-medium">
58 @center
59 </Button>
60 </HoverCardTrigger>
61 <HoverCardContent className="w-80 sm:w-96" align='center'>
62 <div className="flex flex-col items-start gap-3 sm:flex-row">
63 <Avatar>
64 <AvatarImage src="/images/sb-profile.png" />
65 <AvatarFallback>SB</AvatarFallback>
66 </Avatar>
67 <div className="space-y-2">
68 <h4 className="text-primary text-base leading-none font-semibold sm:text-lg/5">
69 SB Theme
70 </h4>
71 <p className="text-sm/4.5">
72 Explore free templates, components, and tools
73 for building modern web apps.
74 </p>
75
76 <div className="space-y-2 pt-1 text-xs">
77 <div className="flex gap-1.5">
78 <TrendingUp className="text-secondary size-4" />
79 Free Templates — Ready-to-use layouts for
80 quick projects
81 </div>
82 <div className="flex gap-1.5">
83 <TrendingUp className="text-secondary size-4" />
84 Components — Reusable UI components for
85 rapid development
86 </div>
87 </div>
88 </div>
89 </div>
90 </HoverCardContent>
91 </HoverCard>
92 <HoverCard>
93 <HoverCardTrigger asChild>
94 <Button variant="link" className="text-sm font-medium">
95 @end
96 </Button>
97 </HoverCardTrigger>
98 <HoverCardContent className="w-80 sm:w-96" align='end'>
99 <div className="flex flex-col items-start gap-3 sm:flex-row">
100 <Avatar>
101 <AvatarImage src="/images/sb-profile.png" />
102 <AvatarFallback>SB</AvatarFallback>
103 </Avatar>
104 <div className="space-y-2">
105 <h4 className="text-primary text-base leading-none font-semibold sm:text-lg/5">
106 SB Theme
107 </h4>
108 <p className="text-sm/4.5">
109 Explore free templates, components, and tools
110 for building modern web apps.
111 </p>
112
113 <div className="space-y-2 pt-1 text-xs">
114 <div className="flex gap-1.5">
115 <TrendingUp className="text-secondary size-4" />
116 Free Templates — Ready-to-use layouts for
117 quick projects
118 </div>
119 <div className="flex gap-1.5">
120 <TrendingUp className="text-secondary size-4" />
121 Components — Reusable UI components for
122 rapid development
123 </div>
124 </div>
125 </div>
126 </div>
127 </HoverCardContent>
128 </HoverCard>
129 </div>
130 )
131}
132API Reference
Root
Contains all the parts of a hover card.
| Prop | Type | Default |
|---|---|---|
| defaultValue | boolean | - |
| open | boolean | - |
| onOpenChange | function | - |
| openDelay | number | 700 |
| closeDelay | number | 300 |
Trigger
The link that opens the hover card when hovered.
| Prop | Type | Default |
|---|---|---|
| asChild | boolean | false |
| Data attribute | Values |
|---|---|
| [data-state] | open, close |
Content
The component that pops out when the hover card is open.
| Prop | Type | Default |
|---|---|---|
| asChild | boolean | false |
| side | string | bottom |
| sideOffset | number | 0 |
| align | string | center |
| alignOffset | number | 0 |
| Data attribute | Values |
|---|---|
| [data-state] | open, close |
| [data-side] | left , right , bottom ,top |
| [data-align] | start , end , center |
On This Page