Things

The Hover Card component displays a card when hovering over a trigger element. It's useful for showing additional information or previews without navigating away. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/hover-card.json

Usage

tsx

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

function MyComponent() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <a href="https://nextjs.org">Next.js</a>
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="space-y-1">
          <h4 className="text-sm font-bold">The React Framework</h4>
          <p className="text-sm text-muted-foreground">
            Created and maintained by @vercel.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Hover Card

Quick Install

Usage

Examples

Default