ascii.cnlibs.com
GithubX

Hover Card

Preview content behind a link.

Last deploy triggered by @samuelb to production.

## installation

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

## usage

import { Badge } from "@/components/ui/badge";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
<HoverCard>
  <HoverCardTrigger href="#">@samuelb</HoverCardTrigger>
  <HoverCardContent chWidth={28}>
    <div className="flex items-start justify-between">
      <span className="font-heading text-primary">Samuel Breznjak</span>
      <Badge variant="secondary" className="-mr-[2ch]">Owner</Badge>
    </div>
    <span>@samuelb</span>
    <span>Online now · last commit 4m ago</span>
  </HoverCardContent>
</HoverCard>

## placement

side and align position the card around its trigger.

Blocked by #4021 until review.