snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/base/examples/hover-card-example.tsx

@@ -0,0 +1,103 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/base/components/example"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/bases/base/ui/dialog"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/bases/base/ui/hover-card"
+
+export default function HoverCardExample() {
+  return (
+    <ExampleWrapper>
+      <HoverCardSides />
+      <HoverCardInDialog />
+    </ExampleWrapper>
+  )
+}
+
+const HOVER_CARD_SIDES = [
+  "inline-start",
+  "left",
+  "top",
+  "bottom",
+  "right",
+  "inline-end",
+] as const
+
+function HoverCardSides() {
+  return (
+    <Example title="Sides" containerClassName="col-span-2">
+      <div className="flex flex-wrap items-center justify-center gap-2">
+        {HOVER_CARD_SIDES.map((side) => (
+          <HoverCard key={side}>
+            <HoverCardTrigger
+              delay={100}
+              closeDelay={100}
+              render={<Button variant="outline" className="capitalize" />}
+            >
+              {side.replace("-", " ")}
+            </HoverCardTrigger>
+            <HoverCardContent side={side}>
+              <div className="flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2">
+                <h4 className="font-medium">Hover Card</h4>
+                <p>
+                  This hover card appears on the {side.replace("-", " ")} side
+                  of the trigger.
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        ))}
+      </div>
+    </Example>
+  )
+}
+
+function HoverCardInDialog() {
+  return (
+    <Example title="In Dialog">
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Hover Card Example</DialogTitle>
+            <DialogDescription>
+              Hover over the button below to see the hover card.
+            </DialogDescription>
+          </DialogHeader>
+          <HoverCard>
+            <HoverCardTrigger
+              delay={100}
+              closeDelay={100}
+              render={<Button variant="outline" className="w-fit" />}
+            >
+              Hover me
+            </HoverCardTrigger>
+            <HoverCardContent>
+              <div className="flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1 style-luma:gap-2">
+                <h4 className="font-medium">Hover Card</h4>
+                <p>
+                  This hover card appears inside a dialog. Hover over the button
+                  to see it.
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        </DialogContent>
+      </Dialog>
+    </Example>
+  )
+}