Embossed UI

Search documentation

Search for a page or component.

Hover Card

For sighted users to preview content available behind a link.

@shadcn
import { CalendarIcon } from "lucide-react"

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

export function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger
        href="https://github.com/shadcn"
        className={buttonVariants({ variant: "link" })}
      >
        @shadcn
      </HoverCardTrigger>
      <HoverCardContent className="w-72">
        <div className="flex gap-3">
          <div
            aria-hidden
            className="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground"
          >
            SC
          </div>
          <div className="flex flex-col gap-1">
            <p className="font-medium">@shadcn</p>
            <p className="text-muted-foreground">
              Beautifully designed components. Open source.
            </p>
            <p className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
              <CalendarIcon className="size-3.5" />
              Joined December 2021
            </p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Installation

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

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Examples

Sides

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

export function HoverCardSides() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {(["top", "right", "bottom", "left"] as const).map((side) => (
        <HoverCard key={side}>
          <HoverCardTrigger
            href="#hover-card"
            className={buttonVariants({
              variant: "secondary",
              className: "capitalize",
            })}
          >
            {side}
          </HoverCardTrigger>
          <HoverCardContent side={side} className="w-48">
            <p className="font-medium capitalize">{side}</p>
            <p className="mt-1 text-muted-foreground">
              Opens on hover or keyboard focus.
            </p>
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  )
}

API Reference

Hover Card is built on the Base UI Hover Card primitive. See the Base UI documentation for every prop.

FieldInput