Hover Card

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

@aicu

Prop reference

Auto-generated from the component source

HoverCard

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof HoverCardPrimitive.Root>

HoverCardContent

className
align = "center"
sideOffset = 4

React.ComponentProps<typeof HoverCardPrimitive.Content>

HoverCardTrigger

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof HoverCardPrimitive.Trigger>

Code

// owner: Sona
"use client";

import Image from "next/image";

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

export default function HoverCardExample() {
  return (
    <HoverCard>
      <HoverCardTrigger className="text-sm font-medium text-primary underline underline-offset-4">
        @aicu
      </HoverCardTrigger>
      <HoverCardContent className="space-y-3">
        <div className="flex items-center gap-3">
          <Image
            src="https://i.pravatar.cc/100?img=48"
            alt="Profile"
            width={48}
            height={48}
            className="rounded-full"
          />
          <div>
            <p className="font-semibold leading-none">AICU Studio</p>
            <p className="text-muted-foreground text-xs">Design Systems</p>
          </div>
        </div>
        <p className="text-sm text-muted-foreground">
          Shipping enterprise-ready UI kits and workflows.
        </p>
        <p className="text-xs text-muted-foreground">studio.aicu.ai</p>
      </HoverCardContent>
    </HoverCard>
  );
}

Hover Card

Component preview

On this page

Command Palette