Component

Shows a rich preview card when hovering over a trigger element. Useful for user profiles, link previews, or contextual info.

View component changelog

preview

React
"use client"

import HoverCard from "@radui/ui/HoverCard"

const HoverCardExample = () => {
    return (
        <HoverCard.Root openDelay={100} closeDelay={200}>
            <HoverCard.Trigger>
                <a href="#" className="underline font-medium">@radui</a>
            </HoverCard.Trigger>
            <HoverCard.Portal>
                <HoverCard.Content>
                    <div className="w-[240px] space-y-2">
                        <div className="font-semibold text-[var(--rad-ui-text-primary)]">Rad UI</div>
                        <p className="text-sm text-[var(--rad-ui-text-secondary)]">A headless component library for React. Build accessible UIs with full styling control.</p>
                        <p className="text-xs text-[var(--rad-ui-text-muted)]">Joined December 2021</p>
                    </div>
                </HoverCard.Content>
            </HoverCard.Portal>
        </HoverCard.Root>
    )
}

export default HoverCardExample

Keyboard Interactions

Shortcut	Description
`Tab`	Preserves the browser's normal tab order; HoverCard does not move focus when the trigger receives or loses focus.
`Escape`	Dismisses the hover card when it is open.

ARIA References

Reference	What Rad UI follows
Dialog labeling	Uses dialog semantics for the floating preview content when open; label interactive or richly structured content with accessible text.

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import HoverCard from "@radui/ui/HoverCard"

export default () => {
    return (
        <HoverCard.Root>
            <HoverCard.Trigger />
            <HoverCard.Content />
        </HoverCard.Root>
    )
}

Root

The root HoverCard component.

Prop	Type	Default
open	boolean	--
defaultOpen	boolean	false
openDelay	number	100
closeDelay	number	200
onOpenChange	function	--

Content

The floating card panel that appears on hover. Accepts a size prop to control padding and max-width.

Prop	Type	Default	Description
size	string	""	Controls the padding, max-width, and font size of the card. One of: small, medium, large.
className	string	""	Additional CSS classes applied to the content element.

Examples

Sizes

preview

size: small

size: medium

size: large

React
"use client"

import HoverCard from "@radui/ui/HoverCard"

const HoverCardSizes = () => {
    const sizes = ['small', 'medium', 'large'] as const;
    return (
        <div className="flex flex-col gap-10">
            {sizes.map((size) => (
                <div key={size}>
                    <p className="text-[var(--rad-ui-text-secondary)] text-xs mb-4">size: {size}</p>
                    <HoverCard.Root openDelay={100} closeDelay={200}>
                        <HoverCard.Trigger>
                            <a href="#" className="underline font-medium">@radui</a>
                        </HoverCard.Trigger>
                        <HoverCard.Portal>
                            <HoverCard.Content size={size}>
                                <div className="space-y-2">
                                    <div className="font-semibold text-[var(--rad-ui-text-primary)]">Rad UI</div>
                                    <p className="text-[var(--rad-ui-text-secondary)]">A headless component library for React. Build accessible UIs with full styling control.</p>
                                    <p className="text-xs text-[var(--rad-ui-text-muted)]">Joined December 2021</p>
                                </div>
                            </HoverCard.Content>
                        </HoverCard.Portal>
                    </HoverCard.Root>
                </div>
            ))}
        </div>
    )
}

export default HoverCardSizes