Hover Card

For sighted users to preview content available behind a link.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/hover-card.json

Usage

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

<HoverCard>
  <HoverCardTrigger render={<Button variant="ghost">@8bit</Button>} />
  <HoverCardContent>
    <div className="flex flex-col gap-1">
      <p className="text-sm font-heading">@8bit</p>
      <p className="text-sm text-muted-foreground">
        Pixel-cornered components for React, built on Base UI.
      </p>
    </div>
  </HoverCardContent>
</HoverCard>