Overlays & Tooltips

Hover Card

Preview content on hover.

Import

tsx

import { HoverCard } from "@cronus-ui/ui";

bash

npx cronus-ui add hover-card

Examples

Profile preview

A preview card that appears on hover or focus — great for profile mentions.

tsx

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link" className="px-0">
      @cronus
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-72">
    <div className="flex gap-3">
      <span
        className="grid size-11 shrink-0 place-items-center rounded-full bg-surface-overlay text-fg"
        aria-hidden="true"
      >
        <Users className="size-5" />
      </span>
      <div className="flex flex-col gap-1">
        <p className="text-sm font-semibold text-fg">Cronus</p>
        <p className="text-sm text-fg-secondary">
          The token-driven design system that themes itself.
        </p>
        <div className="mt-1 flex items-center gap-1.5 text-xs text-fg-tertiary">
          <CalendarDays className="size-3.5" aria-hidden="true" />
          Joined June 2026
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component HoverCardDefault layout:inline style:hover-card {
  label "@cronus"
  text "Cronus UI"
}

page "/audit/hover-card/default" type:custom {
  use HoverCardDefault
}

API Reference

Generated from the component's exported types.

HoverCardProps

Extends ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`children`	`ReactNode`	—	Contents of the component.
`openDelay`	`number`	—	Delay before opening, in ms.
`closeDelay`	`number`	—	Delay before closing, in ms.

HoverCardTriggerProps

Extends ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

HoverCardContentProps

Extends ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.