Hover card

Pro

shadcn's hover card (Radix) in Candor's theme.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/hover-card

Brings in: render-prop, utils · npm: radix-ui@^1.8.1

Usage

TSX · The example above

"use client"

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

export default function Example() {
  return (
    <p className="text-sm">
      The agent changed{" "}
      <HoverCard>
        <HoverCardTrigger asChild>
          <a href="#customers" className="font-mono font-medium underline underline-offset-2">
            customers
          </a>
        </HoverCardTrigger>
        <HoverCardContent>
          <p className="font-mono text-sm font-medium">customers</p>
          <p className="mt-1 text-sm text-muted-foreground">18,240 rows · 14 columns. Read by the billing worker and the admin app.</p>
        </HoverCardContent>
      </HoverCard>{" "}
      on Staging.
    </p>
  )
}

No props.

Also takes the props of React.ComponentProps<typeof HoverCardPrimitive.Root>.

<HoverCardTrigger>

No props.

Also takes the props of React.ComponentProps<typeof HoverCardPrimitive.Trigger>RenderProp.

<HoverCardContent>

No props.

Also takes the props of React.ComponentProps<typeof HoverCardPrimitive.Content>.