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

apps/v4/examples/radix/hover-card-sides.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@/styles/radix-nova/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/styles/radix-nova/ui/hover-card"
+
+const HOVER_CARD_SIDES = ["left", "top", "bottom", "right"] as const
+
+export function HoverCardSides() {
+  return (
+    <div className="flex flex-wrap justify-center gap-2">
+      {HOVER_CARD_SIDES.map((side) => (
+        <HoverCard key={side} openDelay={100} closeDelay={100}>
+          <HoverCardTrigger asChild>
+            <Button variant="outline" className="capitalize">
+              {side}
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent side={side}>
+            <div className="flex flex-col gap-1">
+              <h4 className="font-medium">Hover Card</h4>
+              <p>This hover card appears on the {side} side of the trigger.</p>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      ))}
+    </div>
+  )
+}