Skip to content
aq-ui
Back to ComponentsComponent

Hover Card

Open-code aq-ui accessible component family for Hover Card.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

@aq-ui

Installation

pnpm dlx aq-ui@alpha add hover-card

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

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

<HoverCard />

HoverCard

functionSource L9

Open-code aq-ui accessible component family for Hover Card.

function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props)
Props type
PreviewCardPrimitive.Root.Props
<HoverCard />

HoverCardContent

constSource L27

Content export for composing Hover Card.

const HoverCardContent = React.forwardRef<React.ComponentRef<typeof PreviewCardPrimitive.Popup>, PreviewCardPrimitive.Popup.Props & Pick< PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >>(…)
Props type
PreviewCardPrimitive.Popup.Props & Pick< PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >
<HoverCardContent />

HoverCardTrigger

constSource L13

Trigger export for composing Hover Card.

const HoverCardTrigger = React.forwardRef<HTMLAnchorElement, PreviewCardPrimitive.Trigger.Props>(…)
Props type
PreviewCardPrimitive.Trigger.Props
<HoverCardTrigger />

Registry dependencies

utils

Package dependencies

@base-ui/react@^1.7.0

Files

  • components/ui/hover-card.tsx

Source