Basel Standard / Docs

Hover Card

Deferred detail surface for metadata, ownership context, and quick previews that do not deserve a full dialog.

Hover cards reveal supporting detail without forcing a click or a route change. In this system they stay spare: a small panel, concise metadata, and enough context to help the user decide whether to open the underlying record.

Installation

Install

Purchase access, then open /account/install to issue a registry token.

Usage

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

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">Review issue metadata</Button>
  </HoverCardTrigger>
  <HoverCardContent>
    <p>Supporting detail for the hovered item.</p>
  </HoverCardContent>
</HoverCard>

Why This Primitive Exists

Some details help decision-making but do not deserve a committed interaction. The hover card covers that middle ground.

Use it for compact metadata, ownership notes, or short previews.
Use it when a dense list or table benefits from extra detail without expanding every row.
Avoid it for critical actions, long reading flows, or content that must work on touch without an alternate trigger pattern.

Examples

Basic Supporting Detail

The simplest hover card pairs one trigger with one concise content panel.

<HoverCard>
  <HoverCardTrigger asChild>
    <button>Review issue metadata</button>
  </HoverCardTrigger>
  <HoverCardContent>{/* short metadata */}</HoverCardContent>
</HoverCard>

Metadata Preview

Hover cards are especially useful for ownership and status context where the extra detail should remain optional.

<HoverCard openDelay={120}>
  <HoverCardTrigger asChild>
    <button>Archive office</button>
  </HoverCardTrigger>
  <HoverCardContent>{/* owner notes */}</HoverCardContent>
</HoverCard>

In Context

Use hover cards inside tables, lists, and dense work surfaces where opening a full dialog would add too much interruption.

Dense table alternative

Hover cards reveal supporting metadata without forcing every row into an expanded layout.

Merchandising

3 notes

<HoverCard>
  <HoverCardTrigger asChild>
    <button className="text-left">Product launch brief</button>
  </HoverCardTrigger>
  <HoverCardContent>{/* pending review summary */}</HoverCardContent>
</HoverCard>

Guidance

Keep The Content Short

Treat the panel as supporting context, not a second page.
Lead with the detail that changes the user's next decision.
If the user must act, review, or edit inside the surface, switch to a popover, dialog, or route.

Choose Triggers Carefully

Use asChild so the trigger can remain a button, link, or row label.
Keep the trigger text specific enough that the user knows what detail will appear.
Avoid hover-only disclosure for information that must be accessible on touch without an alternate path.

Preserve Reading Flow

Use hover cards to reduce density pressure, not to hide core information.
Keep the panel visually aligned with the trigger and nearby content.
In dense tables, reveal summary metadata, not complete record detail.

API Reference

Exports

Export	Renders	Notes
`HoverCard`	`HoverCardPrimitive.Root`	Root state container.
`HoverCardTrigger`	`HoverCardPrimitive.Trigger`	Trigger element; commonly used with `asChild`.
`HoverCardContent`	`HoverCardPrimitive.Content` inside a portal	Styled content panel with shared border and background treatment.

HoverCardContent

Prop	Type	Default	Notes
`align`	Radix align prop	`"center"`	Controls alignment relative to the trigger.
`sideOffset`	`number`	`8`	Space between the trigger and content.
`className`	`string`	`undefined`	Extends the base Swiss panel styling.

All three exports forward the rest of the Radix Hover Card props directly, including openDelay, closeDelay, controlled open state, and side positioning options.

Previous: Form Next: Input