Hover Card

overlay

Spring-animated popover card that appears on hover.

Colorblue-500

Width

Shadow

Live Preview

Install via CLI

npx shadcn@latest add https://kinetik.dev/r/hover-card.json

Requires shadcn CLI. Auto-installs deps and copies the component into your project.

Manual Install

npm add framer-motion

Then copy the source code below into your project.

Usage

import { HoverCard } from '@/app/components/hover-card';

Source

'use client';

export function HoverCard() {
  // copy from registry component source
}

Dependencies

framer-motion