diff --git a/app/components/OgImage/BlogPost.vue b/app/components/OgImage/BlogPost.vue
index 293979b1f2..555a0346df 100644
--- a/app/components/OgImage/BlogPost.vue
+++ b/app/components/OgImage/BlogPost.vue
@@ -15,18 +15,7 @@ const props = withDefaults(
   },
 )
 
-const formattedDate = computed(() => {
-  if (!props.date) return ''
-  try {
-    return new Date(props.date).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    })
-  } catch {
-    return props.date
-  }
-})
+const formattedDate = computed(() => formatDate(props.date))
 
 const MAX_VISIBLE_AUTHORS = 2
 
diff --git a/app/components/OgImage/ShareCard.d.vue.ts b/app/components/OgImage/ShareCard.d.vue.ts
new file mode 100644
index 0000000000..ccaeb99685
--- /dev/null
+++ b/app/components/OgImage/ShareCard.d.vue.ts
@@ -0,0 +1,17 @@
+// This type declaration file is required to break a circular type resolution in vue-tsc.
+// And is based off Package.d.vue.ts
+//
+// nuxt-og-image generates a type declaration (.nuxt/module/nuxt-og-image.d.ts) that imports
+// this component's type. This creates a cycle: nuxt.d.ts → nuxt-og-image.d.ts → ShareCard.vue →
+// needs auto-import globals from nuxt.d.ts. Without this file, vue-tsc resolves the component
+// before the globals are available, so all auto-imports (computed, toRefs, useFetch, etc.) fail.
+
+import type { DefineComponent } from 'vue'
+
+declare const _default: DefineComponent<{
+  name: string
+  theme?: 'light' | 'dark'
+  color?: string
+}>
+
+export default _default
diff --git a/app/components/OgImage/ShareCard.vue b/app/components/OgImage/ShareCard.vue
new file mode 100644
index 0000000000..e3ad2d85b2
--- /dev/null
+++ b/app/components/OgImage/ShareCard.vue
@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { ACCENT_COLOR_TOKENS, SHARE_CARD_THEMES } from '#shared/utils/constants'
+import type { AccentColorId } from '#shared/utils/constants'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    theme?: 'light' | 'dark'
+    color?: AccentColorId
+  }>(),
+  { theme: 'dark' },
+)
+
+const theme = computed(() => SHARE_CARD_THEMES[props.theme])
+const primaryColor = computed(() => ACCENT_COLOR_TOKENS[props.color ?? 'sky'][props.theme].hex)
+
+const compactFormatter = useCompactNumberFormatter()
+const bytesFormatter = useBytesFormatter()
+
+const { data: resolvedVersion } = await useResolvedVersion(
+  computed(() => props.name),
+  null,
+)
+const { data: pkg, refresh: refreshPkg } = usePackage(
+  computed(() => props.name),
+  () => resolvedVersion.value ?? null,
+)
+const { data: downloads, refresh: refreshDownloads } = usePackageDownloads(
+  computed(() => props.name),
+  'last-week',
+)
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
+const { repositoryUrl } = useRepositoryUrl(displayVersion)
+const { stars, forks, repoRef, refresh: refreshRepoMeta } = useRepoMeta(repositoryUrl)
+
+try {
+  await Promise.all([refreshPkg(), refreshDownloads()])
+  await refreshRepoMeta()
+} catch (err) {
+  console.warn('[share-card] Failed to load data server-side:', err)
+}
+
+const version = computed(() => resolvedVersion.value ?? pkg.value?.['dist-tags']?.latest ?? '')
+const isLatest = computed(() => pkg.value?.['dist-tags']?.latest === version.value)
+const description = computed(() => pkg.value?.description || 'No description.')
+const license = computed(() => pkg.value?.license ?? '')
+const hasTypes = computed(() =>
+  Boolean(displayVersion.value?.types || displayVersion.value?.typings),
+)
+const moduleFormat = computed(() => (displayVersion.value?.type === 'module' ? 'ESM' : 'CJS'))
+const depsCount = computed(() => Object.keys(displayVersion.value?.dependencies ?? {}).length)
+const unpackedSize = computed(() => displayVersion.value?.dist?.unpackedSize ?? null)
+const publishedAt = computed(() => pkg.value?.time?.[version.value] ?? '')
+const weeklyDownloads = computed(() => downloads.value?.downloads ?? 0)
+const repoSlug = computed(() => {
+  const ref = repoRef.value
+  if (!ref) return ''
+  return truncate(`${ref.owner}/${ref.repo}`, 26)
+})
+
+const fontSans = "'Geist'"
+const fontMono = "'Geist Mono'"
+</script>
+
+<template>
+  <!-- Rendered at 1280×520 (2.46:1). -->
+  <!-- Icons inlined as SVG: satori cannot render CSS mask-image/background-image icons (i-lucide-*) -->
+  <div
+    class="h-full w-full flex flex-col"
+    :style="{
+      backgroundColor: theme.bg,
+      color: theme.text,
+      fontFamily: fontSans,
+    }"
+  >
+    <!-- ── Main content ─────────────────────────────────────────────── -->
+    <div class="flex flex-row flex-1 overflow-hidden">
+      <!-- Content column -->
+      <div class="flex flex-col flex-1 overflow-hidden justify-between">
+        <!-- Top content -->
+        <div
+          class="flex flex-col"
+          style="padding-top: 2rem; padding-right: 2.5rem; padding-left: 2rem"
+        >
+          <!-- Top row: name+version+latest ← → downloads — single baseline -->
+          <div class="flex flex-row items-baseline justify-between mb-4">
+            <!-- Left: name · version · latest -->
+            <div class="flex flex-row items-baseline flex-wrap gap-[16px]">
+              <span
+                class="text-5xl font-medium leading-none tracking-[-1px]"
+                :style="{ fontFamily: fontMono }"
+              >
+                {{ truncate(name, 24) }}
+              </span>
+              <span
+                class="text-[1.625rem] font-light leading-none"
+                :style="{ color: theme.textMuted, fontFamily: fontMono }"
+              >
+                v{{ version }}
+              </span>
+              <span
+                v-if="isLatest"
+                class="flex items-center text-xl font-normal py-1 px-[14px] rounded-[6px] leading-[1.5] tracking-[0.04em]"
+                :style="{
+                  backgroundColor: withAlpha(primaryColor, 0.1),
+                  color: primaryColor,
+                }"
+                >latest</span
+              >
+            </div>
+
+            <!-- Right: weekly downloads — flat, single line -->
+            <div class="flex flex-row items-baseline flex-shrink-0 gap-[10px]">
+              <span
+                class="text-[2.5rem] font-medium leading-none tracking-[-1.5px]"
+                :style="{ color: theme.text, fontFamily: fontMono }"
+              >
+                {{ weeklyDownloads > 0 ? compactFormatter.format(weeklyDownloads) : '-' }}
+              </span>
+              <span class="text-[1.375rem] font-light" :style="{ color: theme.textMuted }"
+                >weekly</span
+              >
+            </div>
+          </div>
+
+          <!-- Description -->
+          <div
+            class="text-[1.375rem] font-light leading-[1.6] mb-5"
+            :style="{ color: theme.textMuted, fontFamily: fontSans }"
+          >
+            {{ truncate(description, 440) }}
+          </div>
+
+          <!-- Tags -->
+          <div class="flex flex-row flex-wrap gap-[16px]">
+            <span
+              v-if="hasTypes"
+              class="flex items-center text-xl font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
+              :style="{
+                border: `1px solid ${theme.borderMuted}`,
+                color: theme.textSubtle,
+              }"
+              >Types</span
+            >
+            <span
+              v-if="displayVersion"
+              class="flex items-center text-xl font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
+              :style="{
+                border: `1px solid ${theme.borderMuted}`,
+                color: theme.textSubtle,
+              }"
+              >{{ moduleFormat }}</span
+            >
+            <span
+              v-if="license"
+              class="flex items-center text-xl font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
+              :style="{
+                border: `1px solid ${theme.borderMuted}`,
+                color: theme.textSubtle,
+              }"
+              >{{ license }}</span
+            >
+            <span
+              v-if="repoSlug"
+              class="flex items-center text-xl font-light py-1 px-[14px] rounded-[6px] leading-[1.6]"
+              :style="{
+                border: `1px solid ${theme.borderFaint}`,
+                color: theme.textFaint,
+                fontFamily: fontMono,
+              }"
+              >{{ repoSlug }}</span
+            >
+          </div>
+        </div>
+
+        <!-- Bottom unified stats row -->
+        <div
+          class="flex flex-col justify-center flex-shrink-0 h-[132px]"
+          style="padding-right: 2.5rem; padding-left: 2rem"
+        >
+          <div class="flex flex-row items-center gap-[42px]">
+            <!-- Stars -->
+            <div v-if="stars > 0" class="flex flex-row items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                :stroke="theme.textSubtle"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z"
+                />
+              </svg>
+              <span
+                class="text-2xl font-normal leading-none tracking-[-0.3px]"
+                :style="{ color: theme.textMuted }"
+                >{{ compactFormatter.format(stars) }}</span
+              >
+            </div>
+
+            <!-- Forks -->
+            <div v-if="forks > 0" class="flex flex-row items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                :stroke="theme.textSubtle"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="18" r="3" />
+                <circle cx="6" cy="6" r="3" />
+                <circle cx="18" cy="6" r="3" />
+                <path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9m6 3v3" />
+              </svg>
+              <span
+                class="text-2xl font-normal leading-none tracking-[-0.3px]"
+                :style="{ color: theme.textMuted }"
+                >{{ compactFormatter.format(forks) }}</span
+              >
+            </div>
+
+            <!-- Install Size -->
+            <div class="flex flex-row items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                :stroke="theme.textSubtle"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path
+                  d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73zm1 .27V12"
+                />
+                <path d="M3.29 7L12 12l8.71-5M7.5 4.27l9 5.15" />
+              </svg>
+              <span
+                class="text-2xl font-normal leading-none tracking-[-0.3px]"
+                :style="{ color: theme.textMuted }"
+                >{{ unpackedSize !== null ? bytesFormatter.format(unpackedSize) : '-' }}</span
+              >
+            </div>
+
+            <!-- Dependencies -->
+            <div v-if="depsCount > 0" class="flex flex-row items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                :stroke="theme.textSubtle"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+              </svg>
+              <span
+                class="text-2xl font-normal leading-none tracking-[-0.3px]"
+                :style="{ color: theme.textMuted }"
+                >{{ depsCount }}</span
+              >
+            </div>
+
+            <!-- Published -->
+            <div v-if="publishedAt" class="flex flex-row items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                :stroke="theme.textSubtle"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M8 2v4m8-4v4" />
+                <rect width="18" height="18" x="3" y="4" rx="2" />
+                <path d="M3 10h18" />
+              </svg>
+              <span
+                class="text-2xl font-normal leading-none tracking-[-0.3px]"
+                :style="{ color: theme.textMuted }"
+                >{{ formatDate(publishedAt) }}</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Footer ────────────────────────────────────────────────────── -->
+    <div
+      class="flex flex-row items-center justify-between flex-shrink-0"
+      :style="{
+        borderTop: `1px solid ${theme.border}`,
+        backgroundColor: theme.bg,
+        paddingTop: '1rem',
+        paddingBottom: '1rem',
+        paddingRight: '2.5rem',
+        paddingLeft: '2rem',
+      }"
+    >
+      <div
+        class="flex flex-row items-center text-[1.375rem] font-light"
+        :style="{ fontFamily: fontMono }"
+      >
+        <span class="font-medium" :style="{ color: primaryColor, marginLeft: '-0.25rem' }">.</span
+        >/npmx
+        <span
+          class="font-light"
+          :style="{ color: theme.textSubtle, fontFamily: fontSans, marginLeft: '0.75rem' }"
+          >· npm package explorer</span
+        >
+      </div>
+      <span class="text-xl font-light" :style="{ color: theme.textSubtle, fontFamily: fontMono }">
+        npmx.dev/package/{{ name }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index 318e9d82ae..df8f88bd9c 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -169,6 +169,8 @@ useShortcuts({
   'c': () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } },
   'f': () => diffLink.value,
 })
+
+const shareModal = useModal('share-modal')
 </script>
 
 <template>
@@ -216,9 +218,25 @@ useShortcuts({
         >
           <span class="max-sm:sr-only">{{ $t('package.links.fund') }}</span>
         </LinkBase>
+        <!-- Share card -->
+        <ButtonBase
+          classicon="i-lucide:share-2"
+          :aria-label="$t('package.links.share_card')"
+          @click="shareModal.open()"
+        >
+          <span class="max-sm:sr-only">{{ $t('package.links.share') }}</span>
+        </ButtonBase>
       </div>
     </div>
   </header>
+  <!-- Share modal -->
+  <PackageShareModal
+    v-if="pkg"
+    :package-name="packageName"
+    :resolved-version="resolvedVersion ?? pkg?.['dist-tags']?.latest ?? ''"
+    :is-latest="resolvedVersion === pkg?.['dist-tags']?.latest"
+    :license="displayVersion?.license"
+  />
   <div
     ref="header"
     class="w-full bg-bg sticky top-14 z-10 border-b border-border pt-2"
diff --git a/app/components/Package/ShareModal.vue b/app/components/Package/ShareModal.vue
new file mode 100644
index 0000000000..3692345a78
--- /dev/null
+++ b/app/components/Package/ShareModal.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+const props = defineProps<{
+  packageName: string
+  resolvedVersion: string
+  isLatest: boolean
+  license?: string
+}>()
+
+const { origin } = useRequestURL()
+const colorMode = useColorMode()
+const theme = computed(() => (colorMode.value === 'dark' ? 'dark' : 'light'))
+const { selectedAccentColor } = useAccentColor()
+
+const colorParam = computed(() =>
+  selectedAccentColor.value ? `&color=${encodeURIComponent(selectedAccentColor.value)}` : '',
+)
+
+const cardUrl = computed(
+  () => `/api/card/${props.packageName}.png?theme=${theme.value}${colorParam.value}`,
+)
+const absoluteCardUrl = computed(() => `${origin}${cardUrl.value}`)
+
+// Downloads for alt text
+const compactFormatter = useCompactNumberFormatter()
+const { data: downloadsData } = usePackageDownloads(
+  computed(() => props.packageName),
+  'last-week',
+)
+
+// e.g. nuxt 4.4.2 (latest) — 1.4M weekly downloads — MIT license — via npmx.dev
+const altText = computed(() => {
+  const tag = props.isLatest ? 'latest' : props.resolvedVersion
+  const parts: string[] = [`${props.packageName} ${props.resolvedVersion} (${tag})`]
+  const dl = downloadsData.value?.downloads
+  if (dl && dl > 0) {
+    parts.push(`${compactFormatter.value.format(dl)} weekly downloads`)
+  }
+  if (props.license) parts.push(`${props.license} license`)
+  parts.push('via npmx.dev')
+  return parts.join(' — ')
+})
+
+// Copy link button
+const { copied: linkCopied, copy: copyLink } = useClipboard({
+  source: absoluteCardUrl,
+  copiedDuring: 1500,
+})
+
+// Copy alt text button
+const { copied: altCopied, copy: copyAlt } = useClipboard({
+  source: altText,
+  copiedDuring: 1500,
+})
+
+// Reveal Copy ALT after the user has downloaded or copied the link
+const showAlt = ref(false)
+
+// Image load state
+const imgLoaded = ref(false)
+const imgError = ref(false)
+
+watch(cardUrl, () => {
+  imgLoaded.value = false
+  imgError.value = false
+  showAlt.value = false
+})
+
+function downloadCard() {
+  downloadFileLink(cardUrl.value, `${props.packageName.replace('/', '-')}-card.png`)
+  showAlt.value = true
+}
+
+function handleCopyLink() {
+  copyLink()
+  showAlt.value = true
+}
+</script>
+
+<template>
+  <Modal
+    :modal-title="`share ${packageName}`"
+    id="share-modal"
+    class="sm:max-w-3xl"
+    @close="showAlt = false"
+  >
+    <div
+      class="bg-bg-elevated rounded-lg mb-4 overflow-hidden ring-1 ring-border-subtle"
+      style="aspect-ratio: 1280/520"
+    >
+      <!-- Loading skeleton -->
+      <div
+        v-if="!imgLoaded && !imgError"
+        class="w-full h-full flex flex-col items-center justify-center gap-2 text-fg-muted text-sm"
+      >
+        <span class="i-svg-spinners:ring-resize w-5 h-5" aria-hidden="true" />
+        <span>Generating card…</span>
+      </div>
+
+      <!-- Error state -->
+      <div
+        v-else-if="imgError"
+        class="w-full h-full flex items-center justify-center text-fg-muted text-sm"
+      >
+        Failed to load card.
+      </div>
+
+      <!-- Image — always rendered so fetch starts immediately on open -->
+      <img
+        :src="cardUrl"
+        :alt="`${packageName} share card`"
+        class="w-full h-full rounded"
+        style="object-fit: contain; image-rendering: high-quality"
+        :class="{ hidden: !imgLoaded }"
+        @load="imgLoaded = true"
+        @error="imgError = true"
+      />
+    </div>
+
+    <!-- Action row -->
+    <div class="flex items-center gap-2">
+      <Transition
+        enter-active-class="transition-all duration-150"
+        leave-active-class="transition-all duration-100"
+        enter-from-class="opacity-0 translate-y-1"
+        leave-to-class="opacity-0 translate-y-1"
+      >
+        <TooltipApp
+          v-if="showAlt"
+          :text="altCopied ? altText : 'Copy alt text for screen readers'"
+          position="top"
+          strategy="fixed"
+        >
+          <ButtonBase
+            :classicon="altCopied ? 'i-lucide:check' : 'i-lucide:copy'"
+            @click="copyAlt()"
+          >
+            {{ altCopied ? 'Copied!' : 'Copy ALT' }}
+          </ButtonBase>
+        </TooltipApp>
+      </Transition>
+
+      <div class="flex items-center gap-2 ms-auto">
+        <ButtonBase
+          :classicon="linkCopied ? 'i-lucide:check' : 'i-lucide:link'"
+          :disabled="!imgLoaded"
+          @click="handleCopyLink"
+        >
+          {{ linkCopied ? 'Copied!' : 'Copy link' }}
+        </ButtonBase>
+
+        <ButtonBase
+          variant="primary"
+          classicon="i-lucide:download"
+          :disabled="!imgLoaded"
+          @click="downloadCard"
+        >
+          Download PNG
+        </ButtonBase>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 0c2409fd64..818a18a78f 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -15,6 +15,8 @@
         <SkeletonBlock class="w-14 h-9 rounded" />
         <!-- Fund link placeholder -->
         <SkeletonBlock class="w-22 h-9 rounded self-baseline" />
+        <!-- Share button placeholder -->
+        <SkeletonBlock class="w-9 md:w-22 h-9 rounded self-baseline" />
       </div>
     </div>
   </header>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index bc10db6210..3ea9551616 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import { assertValidPackageName } from '#shared/utils/npm'
+import { ACCENT_COLOR_TOKENS } from '#shared/utils/constants'
+import type { AccentColorId } from '#shared/utils/constants'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 
+const { selectedAccentColor } = useAccentColor()
+const colorMode = useColorMode()
+
 defineOgImageComponent('Package', {
   name: () => packageName.value,
   version: () => requestedVersion.value ?? '',
-  primaryColor: '#60a5fa',
+  primaryColor: () => {
+    const theme = colorMode.value === 'dark' ? 'dark' : 'light'
+    const id = selectedAccentColor.value as AccentColorId | null
+    return id ? ACCENT_COLOR_TOKENS[id][theme].hex : ACCENT_COLOR_TOKENS.sky[theme].hex
+  },
 })
 
 const readmeHeader = useTemplateRef('readmeHeader')
diff --git a/app/pages/share-card/[[org]]/[name].vue b/app/pages/share-card/[[org]]/[name].vue
new file mode 100644
index 0000000000..0aa407f89f
--- /dev/null
+++ b/app/pages/share-card/[[org]]/[name].vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type AccentColorId, ACCENT_COLOR_TOKENS } from '#shared/utils/constants'
+
+// This page exists only as a rendering target for nuxt-og-image.
+// Visiting it directly redirects to the package page.
+
+const route = useRoute('share-card-org-name')
+const { org, name } = route.params
+const packageName = org ? `${org}/${name}` : name
+const theme = route.query.theme === 'light' ? 'light' : 'dark'
+const colorParam = route.query.color
+const color: AccentColorId =
+  typeof colorParam === 'string' && colorParam in ACCENT_COLOR_TOKENS
+    ? (colorParam as AccentColorId)
+    : 'sky'
+
+defineOgImageComponent(
+  'ShareCard',
+  { name: packageName, theme, color },
+  { width: 1280, height: 520 },
+)
+
+onMounted(() => {
+  navigateTo(`/package/${packageName}`, { replace: true })
+})
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/utils/colors.ts b/app/utils/colors.ts
index 1e6e4a95f9..a7c7fc62dd 100644
--- a/app/utils/colors.ts
+++ b/app/utils/colors.ts
@@ -1,5 +1,26 @@
 // Vue Data UI does not support CSS vars nor OKLCH for now
 
+/**
+ * Appends an alpha value to a hex or oklch color string.
+ * Needed because OG image renderers (satori) don't support CSS variables or
+ * opacity utilities — colors must be fully resolved values.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  const clamped = Math.min(Math.max(alpha, 0), 1)
+  if (color.startsWith('oklch(')) {
+    const withoutAlpha = color.replace(/\s*\/[^)]*(?=\))/, '')
+    return withoutAlpha.replace(')', ` / ${clamped})`)
+  }
+  if (/^#([a-f\d]{6}|[a-f\d]{8})$/i.test(color)) {
+    const base = color.slice(0, 7)
+    const a = Math.round(clamped * 255)
+      .toString(16)
+      .padStart(2, '0')
+    return `${base}${a}`
+  }
+  return color
+}
+
 /**
  * Default neutral OKLCH color used as fallback when CSS variables are unavailable (e.g., during SSR).
  * This matches the dark mode value of --fg-subtle defined in main.css.
diff --git a/app/utils/formatters.ts b/app/utils/formatters.ts
index c135506d71..0c916c7dd6 100644
--- a/app/utils/formatters.ts
+++ b/app/utils/formatters.ts
@@ -4,3 +4,18 @@ export function toIsoDateString(date: Date): string {
   const day = String(date.getUTCDate()).padStart(2, '0')
   return `${year}-${month}-${day}`
 }
+
+/**
+ * Format an ISO date string to a human-readable date (e.g. "Jan 1, 2024").
+ * Returns the original string if parsing fails, or an empty string if no date is provided.
+ */
+export function formatDate(date: string | undefined): string {
+  if (!date) return ''
+  const d = new Date(date)
+  if (isNaN(d.getTime())) return date
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
diff --git a/app/utils/string.ts b/app/utils/string.ts
new file mode 100644
index 0000000000..d05b5727a2
--- /dev/null
+++ b/app/utils/string.ts
@@ -0,0 +1,4 @@
+export function truncate(s: string, n: number): string {
+  if (n <= 0) return ''
+  return s.length > n ? s.slice(0, n - 1) + '…' : s
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 1d21b1db7e..6dd6a5754c 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -433,7 +433,9 @@
       "docs": "docs",
       "fund": "fund",
       "compare": "compare",
-      "compare_this_package": "compare this package"
+      "compare_this_package": "compare this package",
+      "share": "share",
+      "share_card": "Share package card"
     },
     "likes": {
       "like": "Like this package",
diff --git a/i18n/schema.json b/i18n/schema.json
index 8df446904a..eff44855b7 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1305,6 +1305,12 @@
             },
             "compare_this_package": {
               "type": "string"
+            },
+            "share": {
+              "type": "string"
+            },
+            "share_card": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/modules/security-headers.ts b/modules/security-headers.ts
index f32c838c48..5e2fbc04a7 100644
--- a/modules/security-headers.ts
+++ b/modules/security-headers.ts
@@ -78,7 +78,7 @@ export default defineNuxtModule({
       `form-action 'self'`,
       `object-src 'none'`,
       `manifest-src 'self'`,
-      'upgrade-insecure-requests',
+      ...(!nuxt.options.dev ? ['upgrade-insecure-requests'] : []),
     ].join('; ')
 
     // CSP via <meta> tag — only present in HTML pages, not API responses.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9b5c60d15a..e330556bbf 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -100,6 +100,13 @@ export default defineNuxtConfig({
   routeRules: {
     // API routes
     '/api/**': { isr: 300 },
+    '/api/card/**': {
+      isr: {
+        expiration: 3600,
+        passQuery: true,
+        allowQuery: ['theme', 'color'],
+      },
+    },
     '/api/registry/badge/**': {
       isr: {
         expiration: 60 * 60 /* one hour */,
@@ -128,7 +135,13 @@ export default defineNuxtConfig({
     '/api/registry/package-meta/**': { isr: 300 },
     '/:pkg/.well-known/skills/**': { isr: 3600 },
     '/:scope/:pkg/.well-known/skills/**': { isr: 3600 },
-    '/__og-image__/**': getISRConfig(3600),
+    '/__og-image__/**': {
+      isr: {
+        expiration: 3600,
+        passQuery: true,
+        allowQuery: ['theme', 'color'],
+      },
+    },
     '/__og-image__/image/compare/**': {
       isr: {
         expiration: 3600,
diff --git a/server/api/card/[...pkg].get.ts b/server/api/card/[...pkg].get.ts
new file mode 100644
index 0000000000..db055ae607
--- /dev/null
+++ b/server/api/card/[...pkg].get.ts
@@ -0,0 +1,30 @@
+import { createError, getQuery, getRouterParam, sendRedirect } from 'h3'
+import { assertValidPackageName } from '#shared/utils/npm'
+import { ACCENT_COLOR_IDS } from '#shared/utils/constants'
+
+export default defineEventHandler(async event => {
+  const segments = getRouterParam(event, 'pkg')?.split('/') ?? []
+
+  // Strip .png extension from the final segment (e.g. /api/card/nuxt.png)
+  const last = segments.at(-1)
+  if (last?.endsWith('.png')) segments[segments.length - 1] = last.slice(0, -4)
+
+  const packageName = segments.join('/')
+
+  if (!packageName) {
+    throw createError({ statusCode: 404, message: 'Package name is required.' })
+  }
+
+  assertValidPackageName(packageName)
+
+  const query = getQuery(event)
+  const theme = query.theme === 'light' ? 'light' : 'dark'
+  const rawColor = typeof query.color === 'string' ? query.color : null
+
+  const params = new URLSearchParams({ theme })
+  if (rawColor && (ACCENT_COLOR_IDS as readonly string[]).includes(rawColor)) {
+    params.set('color', rawColor)
+  }
+
+  return sendRedirect(event, `/__og-image__/image/share-card/${packageName}/og.png?${params}`, 302)
+})
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index 72aa92148e..a1aa8c464e 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -92,6 +92,43 @@ export const ACCENT_COLORS = {
   },
 } as const satisfies Record<'light' | 'dark', Record<AccentColorId, string>>
 
+export interface AccentColorToken {
+  light: { oklch: string; hex: string }
+  dark: { oklch: string; hex: string }
+}
+
+// todo(atriiy): This is duplicated with ACCENT_COLORS, will be refactored later
+export const ACCENT_COLOR_TOKENS = {
+  sky: {
+    light: { oklch: 'oklch(0.53 0.16 247.27)', hex: '#006fc2' },
+    dark: { oklch: 'oklch(0.787 0.128 230.318)', hex: '#51c8fc' },
+  },
+  coral: {
+    light: { oklch: 'oklch(0.56 0.17 10.75)', hex: '#c23d5c' },
+    dark: { oklch: 'oklch(0.704 0.177 14.75)', hex: '#f9697c' },
+  },
+  amber: {
+    light: { oklch: 'oklch(0.58 0.18 46.34)', hex: '#cb4c00' },
+    dark: { oklch: 'oklch(0.828 0.165 84.429)', hex: '#f8bc1c' },
+  },
+  emerald: {
+    light: { oklch: 'oklch(0.51 0.13 162.4)', hex: '#007c4f' },
+    dark: { oklch: 'oklch(0.792 0.153 166.95)', hex: '#2edaa6' },
+  },
+  violet: {
+    light: { oklch: 'oklch(0.56 0.13 282.067)', hex: '#6a68be' },
+    dark: { oklch: 'oklch(0.78 0.148 286.067)', hex: '#b0a9ff' },
+  },
+  magenta: {
+    light: { oklch: 'oklch(0.56 0.14 325)', hex: '#9c54a1' },
+    dark: { oklch: 'oklch(0.78 0.15 330)', hex: '#ec92e5' },
+  },
+  neutral: {
+    light: { oklch: 'oklch(0.145 0 0)', hex: '#0a0a0a' },
+    dark: { oklch: 'oklch(1 0 0)', hex: '#ffffff' },
+  },
+} as const satisfies Record<AccentColorId, AccentColorToken>
+
 export const BACKGROUND_THEMES = {
   neutral: 'oklch(0.555 0 0)',
   stone: 'oklch(0.555 0.013 58.123)',
@@ -100,6 +137,35 @@ export const BACKGROUND_THEMES = {
   black: 'oklch(0.4 0 0)',
 } as const
 
+/**
+ * Static theme tokens for the share card OG image.
+ * Must use hex/rgb — satori (the OG image renderer) does not support oklch.
+ */
+export const SHARE_CARD_THEMES = {
+  dark: {
+    bg: '#101010',
+    border: '#262626',
+    borderMuted: '#26262699',
+    borderFaint: '#26262680',
+    divider: '#1f1f1f',
+    text: '#f9f9f9',
+    textMuted: '#adadad',
+    textSubtle: '#969696',
+    textFaint: '#969696cc',
+  },
+  light: {
+    bg: '#ffffff',
+    border: '#cecece',
+    borderMuted: '#cecece99',
+    borderFaint: '#cecece80',
+    divider: '#e5e5e5',
+    text: '#0a0a0a',
+    textMuted: '#474747',
+    textSubtle: '#5d5d5d',
+    textFaint: '#5d5d5dcc',
+  },
+} as const satisfies Record<'light' | 'dark', Record<string, string>>
+
 // INFO: Regex for capture groups
 export const BLUESKY_URL_EXTRACT_REGEX = /profile\/([^/]+)\/post\/([^/]+)/
 export const BSKY_POST_AT_URI_REGEX =
diff --git a/test/e2e/og-image.spec.ts b/test/e2e/og-image.spec.ts
index d34b62a144..baf3a31e98 100644
--- a/test/e2e/og-image.spec.ts
+++ b/test/e2e/og-image.spec.ts
@@ -27,3 +27,20 @@ for (const path of paths) {
     })
   })
 }
+
+test.describe('share card', () => {
+  for (const theme of ['dark', 'light'] as const) {
+    test(`share card for nuxt (${theme})`, async ({ page, baseURL }) => {
+      const base = baseURL?.endsWith('/') ? baseURL.slice(0, -1) : baseURL
+      const response = await page.request.get(`${base}/api/card/nuxt.png?theme=${theme}`)
+
+      expect(response.status()).toBe(200)
+      expect(response.headers()['content-type']).toContain('image/png')
+
+      const imageBuffer = await response.body()
+      expect(imageBuffer).toMatchSnapshot({
+        name: `share-card-nuxt-${theme}.png`,
+      })
+    })
+  }
+})
diff --git a/test/e2e/og-image.spec.ts-snapshots/og-image-for--package-nuxt-v-3-20-2.png b/test/e2e/og-image.spec.ts-snapshots/og-image-for--package-nuxt-v-3-20-2.png
index a8798d49bd..6ac090b3c9 100644
Binary files a/test/e2e/og-image.spec.ts-snapshots/og-image-for--package-nuxt-v-3-20-2.png and b/test/e2e/og-image.spec.ts-snapshots/og-image-for--package-nuxt-v-3-20-2.png differ
diff --git a/test/e2e/og-image.spec.ts-snapshots/share-card-nuxt-dark.png b/test/e2e/og-image.spec.ts-snapshots/share-card-nuxt-dark.png
new file mode 100644
index 0000000000..d45620a59b
Binary files /dev/null and b/test/e2e/og-image.spec.ts-snapshots/share-card-nuxt-dark.png differ
diff --git a/test/e2e/og-image.spec.ts-snapshots/share-card-nuxt-light.png b/test/e2e/og-image.spec.ts-snapshots/share-card-nuxt-light.png
new file mode 100644
index 0000000000..b5eda08ce9
Binary files /dev/null and b/test/e2e/og-image.spec.ts-snapshots/share-card-nuxt-light.png differ
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index f196dcd379..58252877cc 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -25,8 +25,13 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'OgImage/BlogPost.vue': 'OG Image component - server-rendered image, not interactive UI',
   'OgImage/Default.vue': 'OG Image component - server-rendered image, not interactive UI',
   'OgImage/Package.vue': 'OG Image component - server-rendered image, not interactive UI',
+  'OgImage/ShareCard.vue': 'OG Image component - server-rendered image, not interactive UI',
   'OgImage/Compare.vue': 'OG Image component - server-rendered image, not interactive UI',
 
+  // Package modals with complex async dependencies
+  'Package/ShareModal.vue':
+    'Requires modal context, API calls (package downloads), and OG image rendering via /api/card',
+
   // Client-only components with complex dependencies
   'Header/AuthModal.client.vue': 'Complex auth modal with navigation - requires full app context',
   'Brand/Customize.vue':