104Get started
HextaUI

Hover card: Inline link

Use render to make the trigger any link, including one inside a sentence. When a link wraps onto two lines, the card anchors to the line you hovered.

Built on Base UI primitives, styled with Tailwind CSS and theme tokens, and ready to copy into your project.

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

export function HoverCardInline() {
  return (
    <p className="max-w-sm text-sm text-muted-foreground">
      Built on{" "}
      <HoverCard>
        <HoverCardTrigger
          href="https://base-ui.com"
          render={
            <a className="font-medium text-foreground underline decoration-border underline-offset-4 hover:decoration-foreground" />
          }
        >
          Base UI
        </HoverCardTrigger>
        <HoverCardContent className="w-60">
          Unstyled, accessible React primitives from the creators of Radix,
          Floating UI and Material UI.
        </HoverCardContent>
      </HoverCard>{" "}
      primitives, styled with Tailwind CSS and theme tokens, and ready to copy
      into your project.
    </p>
  )
}

Add this example

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

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