4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1554,'use client'; import * as React from 'react'; import { HoverCard as HoverCardPrimitive, HoverCardTrigger as HoverCardTriggerPrimitive, HoverCardContent as HoverCardContentPrimitive, HoverCardPortal as HoverCardPortalPrimitive, HoverCardArrow as HoverCardArrowPrimitive, type HoverCardProps as HoverCardPropsPrimitive, type HoverCardTriggerProps as HoverCardTriggerPropsPrimitive, type HoverCardContentProps as HoverCardContentPropsPrimitive, type HoverCardPortalProps as HoverCardPortalPropsPrimitive, type HoverCardArrowProps as HoverCardArrowPropsPrimitive, } from '@/components/animate-ui/primitives/radix/hover-card'; import { getStrictContext } from '@/lib/get-strict-context'; type PreviewLinkCardContextType = { href: string; src?: string; width?: number; height?: number; }; const [PreviewLinkCardProvider, usePreviewLinkCard] = getStrictContext('PreviewLinkCardContext'); type PreviewLinkCardProps = HoverCardPropsPrimitive & { href: string; src?: string; width?: number; height?: number; deviceScaleFactor?: number; colorScheme?: 'light' | 'dark'; }; function PreviewLinkCard({ href, src, width = 240, height = 135, deviceScaleFactor = 1, colorScheme = 'light', ...props }: PreviewLinkCardProps) { const imageSrc = src ?? `https://api.microlink.io/?${buildQueryString({ url: href, screenshot: true, meta: false, embed: 'screenshot.url', colorScheme, 'viewport.isMobile': true, 'viewport.deviceScaleFactor': deviceScaleFactor, 'viewport.width': width * 3, 'viewport.height': height * 3, })}`; React.useEffect(() => { const link = document.createElement('link'); link.rel = 'preload'; link.as = 'image'; link.href = imageSrc; document.head.appendChild(link); return () => { document.head.removeChild(link); }; }, [imageSrc]); return ( ); } type PreviewLinkCardTriggerProps = HoverCardTriggerPropsPrimitive & React.ComponentProps<'a'>; function PreviewLinkCardTrigger({ asChild, children, href: hrefProp, ...props }: PreviewLinkCardTriggerProps) { const { href } = usePreviewLinkCard(); return ( {asChild ? children : {children}} ); } type PreviewLinkCardPortalProps = HoverCardPortalPropsPrimitive; function PreviewLinkCardPortal(props: PreviewLinkCardPortalProps) { return ( ); } function buildQueryString( params: Record, ) { const sp = new URLSearchParams(); for (const [k, v] of Object.entries(params)) { if (v === undefined || v === null) continue; sp.append(k, String(v)); } return sp.toString(); } type PreviewLinkCardContentProps = HoverCardContentPropsPrimitive & React.ComponentProps<'a'>; function PreviewLinkCardContent({ side = 'top', sideOffset = 10, align = 'center', alignOffset, avoidCollisions, collisionBoundary, collisionPadding, arrowPadding, sticky, hideWhenDetached, transition = { type: 'spring', stiffness: 300, damping: 25 }, asChild, children, href: hrefProp, style, ...props }: PreviewLinkCardContentProps) { const { href } = usePreviewLinkCard(); return ( {asChild ? ( children ) : ( {children} )} ); } type PreviewLinkCardImageProps = Omit< React.ComponentProps<'img'>, 'src' | 'width' | 'height' >; function PreviewLinkCardImage({ alt = 'preview image', ...props }: PreviewLinkCardImageProps) { const { src, width, height } = usePreviewLinkCard(); return {alt}

; } type PreviewLinkCardArrowProps = HoverCardArrowPropsPrimitive; function PreviewLinkCardArrow(props: PreviewLinkCardArrowProps) { return ( ); } export { PreviewLinkCard, PreviewLinkCardTrigger, PreviewLinkCardPortal, PreviewLinkCardContent, PreviewLinkCardImage, PreviewLinkCardArrow, usePreviewLinkCard, type PreviewLinkCardProps, type PreviewLinkCardTriggerProps, type PreviewLinkCardPortalProps, type PreviewLinkCardContentProps, type PreviewLinkCardImageProps, type PreviewLinkCardArrowProps, type PreviewLinkCardContextType, }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["@animate-ui/primitives-radix-hover-card","@animate-ui/lib-get-strict-context"]}]]}],["$","$L50",null,{"sourceUrl":"https://animate-ui.com/r/primitives-radix-preview-link-card.json","proxyUrl":"https://shadcnregistry.com/r/animate-ui/primitives-radix-preview-link-card","itemId":"@animate-ui/primitives-radix-preview-link-card"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/primitives/radix/preview-link-card/index.tsx","content":"$52","type":"registry:ui","target":"components/animate-ui/primitives/radix/preview-link-card.tsx"}]}]]}],"$L53"]}]

Radix Preview Link Card

Installation

Files

components

Styles