shadcn.io is not affiliated with official shadcn/ui

Shadcn Hover Card for React and Tailwind

Popover that appears on hover.

Installation

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

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

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

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

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/hover-card.tsx

"use client";

import { Portal } from "@ark-ui/react/portal";
import {
  HoverCard as ArkHoverCard,
  useHoverCardContext,
} from "@ark-ui/react/hover-card";
import type React from "react";
import { cn } from "@/lib/utils";

export const useHoverCard = useHoverCardContext;

interface HoverCardProps
  extends React.ComponentProps<typeof ArkHoverCard.Root> {}

export const HoverCard = (props: HoverCardProps) => {
  const {
    lazyMount = true,
    unmountOnExit = true,
    closeDelay = 100,
    openDelay = 10,
    positioning = { placement: "top" },
    ...rest
  } = props;

  return (
    <ArkHoverCard.Root
      closeDelay={closeDelay}
      data-slot="hover-card"
      lazyMount={lazyMount}
      openDelay={openDelay}
      positioning={positioning}
      unmountOnExit={unmountOnExit}
      {...rest}
    />
  );
};

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

export const HoverCardContent = (
  props: React.ComponentProps<typeof ArkHoverCard.Content>
) => {
  const { className, children, ...rest } = props;

  return (
    <Portal>
      <ArkHoverCard.Positioner data-slot="hover-card-positioner">
        <ArkHoverCard.Content
          className={cn(
            "z-50",
            "w-64",
            "p-4",
            "bg-popover",
            "text-popover-foreground",
            "origin-(--transform-origin)",
            "rounded-xl border shadow-lg/5",
            "outline-hidden",
            "data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]",
            "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
            "data-[state=closed]:animate-out data-[state=open]:animate-in",
            "data-[placement=bottom]:slide-in-from-top-2",
            "data-[placement=left]:slide-in-from-end-2",
            "data-[placement=right]:slide-in-from-start-2",
            "data-[placement=top]:slide-in-from-bottom-2",
            "motion-reduce:animate-none!",
            className
          )}
          data-slot="hover-card-content"
          {...rest}
        >
          {children}

          <HoverCardArrow />
        </ArkHoverCard.Content>
      </ArkHoverCard.Positioner>
    </Portal>
  );
};

export const HoverCardArrow = (
  props: React.ComponentProps<typeof ArkHoverCard.Arrow>
) => {
  const { style, ...rest } = props;

  return (
    <ArkHoverCard.Arrow
      data-slot="hover-card-arrow"
      style={
        {
          "--arrow-background": "var(--popover)",
          "--arrow-size": "calc(1.5 * var(--spacing))",
          ...style,
        } as React.CSSProperties
      }
      {...rest}
    >
      <ArkHoverCard.ArrowTip className="border-s border-t" />
    </ArkHoverCard.Arrow>
  );
};

Update the import paths to match your project setup.

Anatomy

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Usage

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

<HoverCard>
  <HoverCardTrigger />
  <HoverCardContent>
    {/* Content */}
  </HoverCardContent>
</HoverCard>

Triggers Delays

The openDelay and closeDelay props control the delay before the hover card opens and closes respectively.

Default values are 100ms for closeDelay and 10ms for openDelay.

Positioning

Control the position of the hover card relative to the trigger using the positioning prop.

Controlled

Control the open state programmatically using the open and onOpenChange props.

Disabled

Use the disabled prop to prevent the hover card from opening on hover.

API Reference

Root component. Manages hover state and content visibility.

Prop	Type	Default
`closeDelay`	`number`	`100`
`defaultOpen`	`boolean`	-
`disabled`	`boolean`	-
`immediate`	`boolean`	-
`onOpenChange`	`(details: OpenChangeDetails) => void`	-
`open`	`boolean`	-
`openDelay`	`number`	`10`
`positioning`	`PositioningOptions`	`{ placement: "top" }`
`className`	`string`	`-`

HoverCardTrigger

Shows the hover card on hover or focus.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	-

HoverCardContent

Content shown in a popover when hover card is open.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	-

HoverCardArrow

Optional arrow pointing toward the trigger.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	-

Attribute	Default
`--arrow-background`	`var(--popover)`
`--arrow-size`	`calc(1.5 * var(--spacing))`

For a complete list of props, see the Ark UI documentation.

Hint

Image Cropper