2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tc0b,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { HoverCard as HoverCardPrimitive } from "radix-ui"; import { createContext, useCallback, useContext, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; const OpenContext = createContext(false); const OFFSET = { top: { y: 6 }, bottom: { y: -6 }, left: { x: 6 }, right: { x: -6 } } as const; export function HoverCard({ open: openProp, defaultOpen = false, onOpenChange, openDelay = 300, closeDelay = 150, ...props }: ComponentProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = openProp ?? uncontrolled; const setOpen = useCallback( (next: boolean) => { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); return ( ); } export const HoverCardTrigger = HoverCardPrimitive.Trigger; export interface HoverCardContentProps extends ComponentProps { /** Point at the trigger with a small arrow. */ arrow?: boolean; } export function HoverCardContent({ side = "bottom", sideOffset = 8, collisionPadding = 12, arrow = false, className, children, ...props }: HoverCardContentProps) { const open = useContext(OpenContext); return ( {open && ( {children} {arrow && ( )} )} ); } export default HoverCard; 2e:T708d,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { HoverCard as HoverCardPrimitive } from "radix-ui";
import { createContext, useCallback, useContext, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

const OpenContext = createContext(false);

const OFFSET = { top: { y: 6 }, bottom: { y: -6 }, left: { x: 6 }, right: { x: -6 } } as const;

export function HoverCard({ open: openProp, defaultOpen = false, onOpenChange, openDelay = 300, closeDelay = 150, ...props }: ComponentProps<typeof HoverCardPrimitive.Root>) {
  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
  const open = openProp ?? uncontrolled;
  const setOpen = useCallback(
    (next: boolean) => {
      if (openProp === undefined) setUncontrolled(next);
      onOpenChange?.(next);
    },
    [openProp, onOpenChange],
  );
  return (
    <OpenContext.Provider value={open}>
      <HoverCardPrimitive.Root open={open} onOpenChange={setOpen} openDelay={openDelay} closeDelay={closeDelay} {...props} />
    </OpenContext.Provider>
  );
}

export const HoverCardTrigger = HoverCardPrimitive.Trigger;

export interface HoverCardContentProps extends ComponentProps<typeof HoverCardPrimitive.Content> {
  /** Point at the trigger with a small arrow. */
  arrow?: boolean;
}

export function HoverCardContent({ side = "bottom", sideOffset = 8, collisionPadding = 12, arrow = false, className, children, ...props }: HoverCardContentProps) {
  const open = useContext(OpenContext);
  return (
    <AnimatePresence>
      {open && (
        <HoverCardPrimitive.Portal forceMount>
          <MotionConfig reducedMotion="user">
            <HoverCardPrimitive.Content forceMount asChild side={side} sideOffset={sideOffset} collisionPadding={collisionPadding} {...props}>
              <motion.div
                className={cn(
                  "z-50 w-72 origin-(--radix-hover-card-content-transform-origin) rounded-2xl bg-white p-4 text-neutral-950 outline-none",
                  "shadow-[0_16px_40px_-12px_rgb(0_0_0/0.2),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06]",
                  "dark:bg-neutral-900 dark:text-white dark:shadow-[0_16px_40px_-12px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]",
                  className,
                )}
                initial={{ opacity: 0, scale: 0.96, ...OFFSET[side] }}
                animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}
                exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12 } }}
                transition={{ type: "spring", bounce: 0.16, duration: 0.32 }}
              >
                {children}
                {arrow && (
                  <HoverCardPrimitive.Arrow width={14} height={7} className="fill-white drop-shadow-[0_1px_0_rgb(0_0_0/0.06)] dark:fill-neutral-900 dark:drop-shadow-[0_1px_0_rgb(255_255_255/0.1)]" />
                )}
              </motion.div>
            </HoverCardPrimitive.Content>
          </MotionConfig>
        </HoverCardPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

export default HoverCard;

2f:T8ff,import { CalendarDays, MapPin } from "lucide-react"; import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/scalar-ui/hover-card"; export default function Demo() { return (

Branch previews were designed by{" "} @maya

Maya Chen

@maya · Design lead at Aurora

Building calm interfaces for busy teams. Previously design systems at Northwind.

Lisbon Joined March 2021

1,284 followers 312 following

{" "} and shipped in October.

); } 30:T4463,

import { CalendarDays, MapPin } from "lucide-react";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/scalar-ui/hover-card";

export default function Demo() {
  return (
    <p className="max-w-[360px] text-center text-[14px] leading-7 text-neutral-600 dark:text-neutral-400">
      Branch previews were designed by{" "}
      <HoverCard defaultOpen>
        <HoverCardTrigger asChild>
          <a href="#maya" className="font-medium text-neutral-950 underline decoration-neutral-300 underline-offset-4 dark:text-white dark:decoration-neutral-600">
            @maya
          </a>
        </HoverCardTrigger>
        <HoverCardContent>
          <div className="flex items-start gap-3">
            <span className="flex size-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 text-[14px] font-semibold text-white">MC</span>
            <div className="min-w-0">
              <p className="text-[14px] font-semibold tracking-[-0.01em]">Maya Chen</p>
              <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">@maya · Design lead at Aurora</p>
            </div>
          </div>
          <p className="mt-3 text-[13px] leading-relaxed text-neutral-600 dark:text-neutral-300">Building calm interfaces for busy teams. Previously design systems at Northwind.</p>
          <div className="mt-3 flex gap-4 text-[12.5px] text-neutral-500 dark:text-neutral-400">
            <span className="flex items-center gap-1.5">
              <MapPin className="size-3.5" />
              Lisbon
            </span>
            <span className="flex items-center gap-1.5">
              <CalendarDays className="size-3.5" />
              Joined March 2021
            </span>
          </div>
          <div className="mt-3 flex gap-4 border-t border-black/[0.06] pt-3 text-[12.5px] dark:border-white/[0.08]">
            <span>
              <b className="font-semibold">1,284</b> <span className="text-neutral-500">followers</span>
            </span>
            <span>
              <b className="font-semibold">312</b> <span className="text-neutral-500">following</span>
            </span>
          </div>
        </HoverCardContent>
      </HoverCard>{" "}
      and shipped in October.
    </p>
  );
}

31:T54f,import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/scalar-ui/hover-card"; export default function Example() { return (

Read the{" "} trip planning guide

aurora.app/guides

Planning a week in the Dolomites

Routes, huts and the lakes worth the early start.

{" "} before you book.

); } 32:T2590,

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

export default function Example() {
  return (
    <p className="max-w-[360px] text-center text-[14px] leading-7 text-neutral-600 dark:text-neutral-400">
      Read the{" "}
      <HoverCard>
        <HoverCardTrigger asChild>
          <a href="#guide" className="font-medium text-neutral-950 underline decoration-neutral-300 underline-offset-4 dark:text-white dark:decoration-neutral-600">
            trip planning guide
          </a>
        </HoverCardTrigger>
        <HoverCardContent className="w-80 overflow-hidden p-0">
          <img
            src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=640&h=280&fit=crop&auto=format&q=75"
            alt=""
            className="h-32 w-full object-cover"
          />
          <div className="p-4">
            <p className="text-[11.5px] uppercase tracking-[0.06em] text-neutral-400">aurora.app/guides</p>
            <p className="mt-1 text-[14px] font-semibold tracking-[-0.01em]">Planning a week in the Dolomites</p>
            <p className="mt-1 text-[13px] leading-relaxed text-neutral-500 dark:text-neutral-400">Routes, huts and the lakes worth the early start.</p>
          </div>
        </HoverCardContent>
      </HoverCard>{" "}
      before you book.
    </p>
  );
}

33:T463,import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/scalar-ui/hover-card"; const sides = ["top", "right", "bottom", "left"] as const; export default function Example() { return (

{sides.map((side) => ( Opens on the {side}, and flips if there isn’t room. ))}

); } 34:T2445,

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

const sides = ["top", "right", "bottom", "left"] as const;

export default function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {sides.map((side) => (
        <HoverCard key={side} openDelay={100}>
          <HoverCardTrigger asChild>
            <button
              type="button"
              className="h-10 rounded-[14px] bg-white px-4 text-sm font-medium capitalize text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]"
            >
              {side}
            </button>
          </HoverCardTrigger>
          <HoverCardContent side={side} className="w-56 text-[13px] text-neutral-600 dark:text-neutral-300">
            Opens on the <span className="font-medium text-neutral-950 dark:text-white">{side}</span>, and flips if there isn’t room.
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  );
}

35:T5c9,import { GitPullRequest } from "lucide-react"; import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/scalar-ui/hover-card"; export default function Example() { return ( aurora#482

Open · ready to merge

Add branch previews to the deploy pipeline

maya wants to merge 14 commits into main

+412 −96 2 approvals

); } 36:T2ab5,

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

export default function Example() {
  return (
    <HoverCard defaultOpen>
      <HoverCardTrigger asChild>
        <a href="#pr" className="inline-flex items-center gap-1.5 rounded-lg px-2 py-1 font-mono text-[13px] text-neutral-700 ring-1 ring-inset ring-black/[0.08] hover:bg-neutral-50 dark:text-neutral-300 dark:ring-white/[0.12] dark:hover:bg-white/[0.04]">
          <GitPullRequest className="size-3.5 text-emerald-600" />
          aurora#482
        </a>
      </HoverCardTrigger>
      <HoverCardContent arrow side="top" className="w-72">
        <p className="flex items-center gap-1.5 text-[12px] font-medium text-emerald-600 dark:text-emerald-400">
          <GitPullRequest className="size-3.5" />
          Open · ready to merge
        </p>
        <p className="mt-1.5 text-[14px] font-semibold tracking-[-0.01em]">Add branch previews to the deploy pipeline</p>
        <p className="mt-1 text-[12.5px] text-neutral-500 dark:text-neutral-400">maya wants to merge 14 commits into main</p>
        <div className="mt-3 flex items-center gap-3 text-[12px]">
          <span className="font-mono text-emerald-600">+412</span>
          <span className="font-mono text-red-500">−96</span>
          <span className="text-neutral-500">2 approvals</span>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

29:["$","section","hover-card",{"id":"hover-card","aria-labelledby":"hover-card-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"hover-card-title","className":"sr-only","children":"Hover Card"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"hover-card","gated":{"unlocked":true,"files":[{"name":"hover-card.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"link-preview":{"name":"link-preview.tsx","code":"$31","html":"$32"},"sides":{"name":"sides.tsx","code":"$33","html":"$34"},"with-arrow":{"name":"with-arrow.tsx","code":"$35","html":"$36"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add hover-card","shadcn":"npx shadcn@latest add https://scalarui.com/r/hover-card.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L37","toolbar":"$L38"}]}],["$L39","$L3a","$L3b"]]}]

Hover Cards

Hover Cards

Link Preview

Sides

With Arrow