DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
  1. Components
  3. Hover Card
MarkdownPro 654 blocks

Shadcn Hover Card

Browse 8 production-ready shadcn hover-card components for preview popovers, profile cards, and rich metadata displays. Shadcn Hover Card is compatible with Radix UI and Base UI popover components and is fully aligned with Shadcn Create style options so your previews match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

  • Profile previews on a person's name or avatar, with photo, handle, role and join date
  • Feature, image and release note previews shown on hover or focus of a button or link
  • Exact dates and times behind a short inline label, such as a relative deploy time in a sentence

When not to use

  • Content opened by a click or tap, such as a form or settings to change: use the Popover component
  • A one line label that names an icon button or a control: use the Tooltip component
  • Content that stays visible in the page layout without a pointer over it: use the Card component

Agent notes

  • Timing is delay and closeDelay on the base HoverCardTrigger but openDelay and closeDelay on the radix HoverCard root
  • Without render on the base twin or asChild on radix, HoverCardTrigger renders a link with no href, which Tab skips
  • The radix HoverCardContent sets tabindex -1 on every link and button inside it, so keep keyboard actions outside the card

Third-party API docs

  • date-fns v4: docs, used by 1 of 8 examples
Markdownhttps://reui.io/components/hover-card.md
MCPget_component("hover-card")
Installnpx shadcn@latest add hover-card
Full index for agents:llms.txtReUI MCP setup

Shadcn Hover Card: Rich Preview on Hover

Shadcn Hover Card is a floating popover that opens on hover or focus, displaying rich content like previews or metadata. It maps to Radix UI Hover Card semantics so keyboard and screen reader behavior stays predictable, and it works with Radix UI and Base UI-style projects.

It shows detailed information or preview content when users hover over a trigger element, keeping the page clean while offering supplementary context on demand.

ReUI lists hover-card components in realistic dashboards and link-rich pages so you evaluate trigger sizing, popover positioning, and animations next to a navigation elements or Shadcn Button group, not only a minimal story. The sections below cover what it is, why teams use it, features, and integration ideas.

What is Shadcn Hover Card?

In UI terms, a hover card is a popover triggered by mouse or keyboard focus. Shadcn Hover Card follows Radix UI popover components for positioning, focus management, and dismissal, so it integrates smoothly with teams already using Radix primitives.

Components here show user profile cards, link previews, and metadata panels. They help you decide card size, icon usage, and content density before deploying the same markup into Next.js or a full-featured React app.

Why Use Shadcn Hover Card?

Hover cards reduce noise by hiding rich detail until users request it. They work well for user mentions, link previews, or product details when you want to avoid modal overhead and keep users in scanning mode. Marketing sites, dashboards, and social features often use them.

The layouts on this page place hover cards next to a Shadcn Popover or Shadcn Tooltip so it is clear when each one makes sense.

Shadcn Hover Card Features

  • Hover and Focus Triggered. Opens automatically on mouse enter or keyboard focus, closes on mouse leave or blur with configurable delays.
  • Flexible Positioning. Side and align props control popover placement relative to trigger, preventing overlap and respecting viewport edges.
  • Rich Content Support. Render text, images, Shadcn Button links, or any React component inside the card so preview detail matches your brand.
  • Accessible by Default. Built on Radix UI so focus management, roles, and keyboard navigation follow Radix standards and WAI-ARIA guidance.
  • Shadcn Create Styles. Card background, border, shadow, and radius respect Shadcn Create tokens so previews and exported UI match your theme.

Integrating with Other Components

Use hover cards with a Shadcn Avatar and Shadcn Badge for user profile previews in comments or mention contexts. Add Shadcn Button links inside cards for actions like follow, message, or view profile.

Pair hover cards with Shadcn Tooltip for a two-tier disclosure component: tooltip for a label, hover card for rich preview when users linger. Use Shadcn Popover when the content is interactive or requires explicit interaction.

Combine hover cards with a link component group or Shadcn Table for product previews, user summaries, or metadata detail that stays lightweight while scanning a list.

Frequently Asked Questions

When should I use a hover card instead of a tooltip or popover?

Use hover card for rich content like user profiles, product summaries, or link previews, content that benefits from multiple lines, images, or actions. Tooltips are for brief hints (one line). Popovers are for interactive forms or complex controls. Hover cards balance density and interactivity.

Is a hover card accessible for keyboard and screen reader users?

Yes. Built on Radix UI, it exposes the right roles and keyboard interactions at the component level. You own testing with real assistive tech, focus-visible styles in your Tailwind theme, and copy quality. Treat baseline behavior as necessary but not sufficient.

How do I control hover card timing and delays?

Use openDelay and closeDelay props on the HoverCard root to set how long the user must hover before the card opens or how long it waits before closing. Delays prevent flicker when users move quickly across triggers.

Can hover cards show on click or only on hover?

The base component opens on hover or focus. For click-based behavior, use a Shadcn Popover instead. Hover cards are designed for passive discovery; click controls are more explicit and often clearer for mobile users.

How do I prevent hover card content from being cut off at screen edges?

Use the side and align props to adjust positioning. Radix automatically flips the popover if it would overflow the viewport. You can also set maxWidth or use scrollable inner content if the card gets large.

Are ReUI hover-card components different from a storybook component?

Yes. ReUI components place hover cards in realistic dashboards, list views, and link-rich pages so you see trigger density, animations, and integration with Shadcn Avatar or Shadcn Badge badges. This is closer to production than a single block preview.
Previous7 Shadcn Gantt Components
Next6 Shadcn Icon Stack Components

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K

Basic hover card.

Hover card with positions.

Hover card with profile information.

Hover card with icon

Hover card with an image and text content.

Hover card inside a dialog.

Timestamp hover card with active relative time

Hover card with paginated release notes