Hover card: Arrow

arrow adds a pointer that joins the card's border without a seam. The side offset grows to make room for it, and it follows the card when it flips.

Release notes

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

export function HoverCardArrowDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger
        href="#"
        delay={200}
        render={
          <Button variant="outline" nativeButton={false} render={<a />} />
        }
      >
        Release notes
      </HoverCardTrigger>
      <HoverCardContent arrow side="top" className="w-56">
        Version 2.4 adds shared hover cards and smoother text areas.
      </HoverCardContent>
    </HoverCard>
  )
}

Add this example

This adds the example as components/examples/hover-card/arrow.tsx, together with the Hover card component and the HextaUI theme tokens it needs.

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

To add only the component, follow the Hover card installation.

Props in this example

The Hover card props this example sets, from the API reference.

HoverCardTrigger

Prop	Type	Default
`href`	`string`	`–`
`delay`Milliseconds before hover or focus opens the card.	`number`	`600`
`render`Render your own link, such as <Button variant="link" /> or a router link.	`ReactElement \| (props, state) => ReactElement`	`<a>`

HoverCardContent

Prop	Type	Default
`side`	`"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"`	`"bottom"`
`arrow`Show a pointer toward the trigger.	`boolean`	`false`

Every prop is in the Hover card API reference.

More Hover card examples

See them all, with keyboard support and accessibility notes, on the Hover card page.