3

Hover Card

For sighted users to preview content available behind a link. Built on Base UI's preview card primitive.

Last updated August 8, 2026

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

@shadcn
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
 
export function HoverCardDemoExample() {
  return (
    <HoverCard>
      <HoverCardTrigger
        href="#"
        className="text-sm font-medium text-primary underline underline-offset-4"
      >
        @shadcn
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="flex flex-col gap-1">
          <span className="text-sm font-medium text-foreground">shadcn</span>
          <span className="text-sm text-muted-foreground">
            The React Framework for design engineers.
          </span>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/hover-card.json

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
 
export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="#">@shadcn</HoverCardTrigger>
      <HoverCardContent>Preview content</HoverCardContent>
    </HoverCard>
  )
}

RTL

Base UI reports the popup's resolved side as inline-start / inline-end rather than a fixed left/right, so positioning and entry animation stay correct under RTL without any extra work.

@taymaz
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
 
export function HoverCardRtlExample() {
  return (
    <HoverCard>
      <HoverCardTrigger
        href="#"
        className="text-sm font-medium text-primary underline underline-offset-4"
      >
        @taymaz
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="flex flex-col gap-1">
          <span className="text-sm font-medium text-foreground">تیماز</span>
          <span className="text-sm text-muted-foreground">
            توسعه‌دهنده کتابخانه رابط کاربری فارسی.
          </span>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

API Reference

HoverCard

HoverCardContent

Edit this page on GitHub
PreviousEmptyNextInput