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

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

@@ -0,0 +1,98 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/radix/components/example"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/bases/radix/ui/dialog"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/bases/radix/ui/hover-card"
+
+export default function HoverCardExample() {
+  return (
+    <ExampleWrapper>
+      <HoverCardSides />
+      <HoverCardInDialog />
+    </ExampleWrapper>
+  )
+}
+
+const HOVER_CARD_SIDES = ["top", "right", "bottom", "left"] as const
+
+function HoverCardSides() {
+  return (
+    <Example title="Sides">
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        {HOVER_CARD_SIDES.map((side) => (
+          <HoverCard key={side} openDelay={100} closeDelay={100}>
+            <HoverCardTrigger asChild>
+              <Button
+                variant="outline"
+                className="capitalize style-sera:uppercase"
+              >
+                {side}
+              </Button>
+            </HoverCardTrigger>
+            <HoverCardContent side={side} className="w-64">
+              <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 style-sera:gap-2">
+                <h4 className="font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide">
+                  Hover Card
+                </h4>
+                <p className="style-sera:leading-relaxed">
+                  This hover card appears on the {side} side of the trigger.
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        ))}
+      </div>
+    </Example>
+  )
+}
+
+function HoverCardInDialog() {
+  return (
+    <Example title="In Dialog">
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="outline">Open Dialog</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Hover Card Example</DialogTitle>
+            <DialogDescription>
+              Hover over the button below to see the hover card.
+            </DialogDescription>
+          </DialogHeader>
+          <HoverCard openDelay={100} closeDelay={100}>
+            <HoverCardTrigger asChild>
+              <Button variant="outline" className="w-fit">
+                Hover me
+              </Button>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-64">
+              <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 style-sera:gap-2">
+                <h4 className="font-medium style-sera:font-heading style-sera:font-semibold style-sera:tracking-wide">
+                  Hover Card
+                </h4>
+                <p className="style-sera:leading-relaxed">
+                  This hover card appears inside a dialog. Hover over the button
+                  to see it.
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        </DialogContent>
+      </Dialog>
+    </Example>
+  )
+}