Make your AI a shadcn expert

Shadcn.io is not affiliated with official shadcn/ui

Shadcn Hover Card

React hover card for profile and link previews. Built with TypeScript and Tailwind CSS for Next.js using Base UI — open delay, side, and collision flip.

The shadcn hover card is a preview next to a name or a link. Hover the trigger and the card opens after a delay; move away and it closes. Use it for a profile, a product, or the page behind a URL.

Scroll to load preview...

Looking for a neobrutalism version for shadcn?

Same hover card, thicker borders. The NeoBrutalism hover card is the kit if you want that look.

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Put render on the trigger so a Button or a link is the actual control. openDelay is 700ms so a pass-through does not flash the card.

Composition

HoverCardTrigger

HoverCardContent

Sides

side on HoverCardContent is top, right, bottom, or left. Collision still flips if there is no room.

Scroll to load preview...

RTL

Wrap with DirectionProvider and dir="rtl". Physical side values stay left and right — they do not swap with the reading direction.

Scroll to load preview...

API

Prop

Type

HoverCardContent

Prop

Type

HoverCardTrigger takes render. HoverCardContent takes className.

Keyboard

Key	Action
`Tab`	Open when the trigger is focused, close when it leaves
`Enter`	Follow the trigger if it is a link

The card is for a pointer. Screen readers do not get the popup.

Notes

Sighted users only

Radix hides hover-card content from assistive tech. The trigger has to make sense alone. If they need the bio, put it on the profile page.

There is no hover on a phone. Same info belongs behind a tap or on the page.

With other components

Face in the preview

Link-style trigger

Role next to the name

Split bio from stats

While the profile loads

Image in the preview

Questions

One line, not a card

Click, stays put

Full focus overlay

Actions on click

Navigation Menu

Rich nav preview

Hover card examples

Profiles, products, links

Was this page helpful?

Sign in to leave feedback.

Form

React form for settings, profiles, and sign-up. Built with TypeScript and Tailwind CSS for Next.js using react-hook-form — labels, errors, and Controller wiring.

Input

React input for emails, search, and file uploads. Built with TypeScript and Tailwind CSS for Next.js using Base UI — labels, invalid state, and field groups.