104Get started
HextaUI

Hover card: Controlled

Pass open and onOpenChange. The second argument says why it changed, such as trigger-hover, trigger-focus or escape-key.

Release notes

Open: false · last reason: none

"use client"

import * as React from "react"

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

export function HoverCardControlled() {
  const [open, setOpen] = React.useState(false)
  const [reason, setReason] = React.useState("none")

  return (
    <div className="flex flex-col items-center gap-3">
      <HoverCard
        open={open}
        onOpenChange={(next, details) => {
          setOpen(next)
          setReason(details.reason)
        }}
      >
        <HoverCardTrigger
          href="#"
          render={<Button variant="link" nativeButton={false} render={<a />} />}
        >
          Release notes
        </HoverCardTrigger>
        <HoverCardContent className="w-60">
          Version 2.0 rebuilds every component on Base UI.
        </HoverCardContent>
      </HoverCard>
      <p className="text-sm text-muted-foreground">
        Open: {String(open)} · last reason: {reason}
      </p>
    </div>
  )
}

Add this example

This adds the example as components/examples/hover-card/controlled.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-controlled.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.

HoverCard

PropTypeDefault
open
boolean–
onOpenChangedetails.reason is trigger-hover, trigger-focus, trigger-press, outside-press, escape-key, imperative-action or none.
(open: boolean, details) => void–

HoverCardTrigger

PropTypeDefault
href
string–
renderRender your own link, such as <Button variant="link" /> or a router link.
ReactElement | (props, state) => ReactElement<a>

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.

Related components