shadcn.io is not affiliated with official shadcn/ui

Shadcn Hover Card for React

Popover that appears on hover.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/hover-card.json

npx shadcn@latest add https://kit.dev/r/radix/hover-card.json

pnpm dlx shadcn@latest add https://kit.dev/r/radix/hover-card.json

yarn shadcn@latest add https://kit.dev/r/radix/hover-card.json

This component depends on Button. Install it first if you haven't already.

Install the following dependencies:

bun add radix-ui

npm install radix-ui

pnpm add radix-ui

yarn add radix-ui

Copy and paste the following code into your project.

components/ui/hover-card.tsx

"use client";

import { HoverCard as HoverCardPrimitive } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";

export const HoverCard = (
  props: React.ComponentProps<typeof HoverCardPrimitive.Root>
) => <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;

export const HoverCardTrigger = (
  props: React.ComponentProps<typeof HoverCardPrimitive.Trigger>
) => <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;

export const HoverCardContent = (
  props: React.ComponentProps<typeof HoverCardPrimitive.Content>
) => {
  const { className, align = "center", sideOffset = 4, ...rest } = props;

Update the import paths to match your project setup.

Anatomy

HoverCardArrow
└── HoverCardArrowTip
HoverCardTrigger
HoverCardContent
└── HoverCardPositioner

Usage

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

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">Hover Here</Button>
  </HoverCardTrigger>
  <HoverCardContent className="flex w-64 flex-col gap-0.5">
    <div className="font-semibold">@nextjs</div>
    <div>The React Framework – created and maintained by @vercel.</div>
    <div className="mt-1 text-muted-foreground text-xs">
      Joined December 2021
    </div>
  </HoverCardContent>
</HoverCard>

Accessibility

Key	Description
`Enter`	Activate the focused item.
`Space`	Activate the focused control.

Demos

Sides

Position the hover card with Ark positioning.placement.

PreviewCode

Rtl

Right-to-left hover card. See the RTL configuration guide for document direction.

PreviewCode

API Reference

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

closeDelay?number

openDelay?number

asChild?boolean

AttributeType

data-slot"hover-card"

data-scope"hover-card"

data-part"root"

HoverCardTrigger

button

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

closeDelay?number

openDelay?number

asChild?boolean

AttributeType

data-slot"hover-card-trigger"

data-scope"hover-card"

data-part"trigger"

HoverCardContent

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

closeDelay?number

forceMount?true

onEscapeKeyDown?DismissableLayerProps["onEscapeKeyDown"]

onFocusOutside?DismissableLayerProps["onFocusOutside"]

onInteractOutside?DismissableLayerProps["onInteractOutside"]

onPointerDownOutside?DismissableLayerProps["onPointerDownOutside"]

openDelay?number

asChild?boolean

className?string

AttributeType

data-slot"hover-card-content"

data-scope"hover-card"

data-part"content"

data-placementstring

data-sidestring

data-state"open" | "closed"

CSS variableType

--radix-hover-card-content-transform-originstring