Command Menu

Search documentation, components, and switch theme.

Atoms

Hover Card

Previews content in a floating card on hover.

shadcn/ui
Docs
@formance

Installation#

npx shadcn@latest add @formance/hover-card

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/accounts/merchant-042" className="underline">merchant-042</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="space-y-1">
      <h4 className="text-sm font-semibold">Account: merchant-042</h4>
      <p className="text-sm text-muted-foreground">
        Balance: EUR 12,340.00
      </p>
      <p className="text-xs text-muted-foreground">
        Created on January 15, 2025
      </p>
    </div>
  </HoverCardContent>
</HoverCard>