Hover Card

Preview content available behind a link.

Installation

Add the hover card component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/hover-card.json

Usage

tsx

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

Examples

Default

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

<HoverCard>
  <HoverCardTrigger render={<Button variant="link" />}>@swiss-ui</HoverCardTrigger>
  <HoverCardContent>
    <Avatar><AvatarFallback>SU</AvatarFallback></Avatar>
  </HoverCardContent>
</HoverCard>