diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 2bddda193..6036a0d5e 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { NuxtError } from '#app'
 import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
 import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
 
@@ -7,10 +8,12 @@ const { t } = useI18n()
 const props = defineProps<{
   packageName: string
   version: string
+  packageSize?: InstallSizeResult | null
   dependencies?: Record<string, string>
   peerDependencies?: Record<string, string>
   peerDependenciesMeta?: Record<string, { optional?: boolean }>
   optionalDependencies?: Record<string, string>
+  bundledDependencies?: boolean | string[]
 }>()
 
 // Fetch outdated info for dependencies
@@ -66,6 +69,19 @@ const sortedOptionalDependencies = computed(() => {
   return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
 })
 
+// Fetch size information for dependencies that require it
+const { data: sizereqData, pending: sizereqLoading } = usePackageDependencySizes(
+  () => props.packageName,
+  () => props.version,
+  () => props.dependencies,
+)
+
+const { getTooltipText: getDepSizeTooltip } = usePackageDependencySizeTooltip(
+  sizereqData,
+  () => props.packageSize,
+  t,
+)
+
 // Get version tooltip
 function getDepVersionTooltip(dep: string, version: string) {
   const outdated = outdatedDeps.value[dep]
@@ -103,6 +119,7 @@ const {
 } = useVisibleItems(sortedOptionalDependencies, 10)
 
 const numberFormatter = useNumberFormatter()
+const bytesFormatter = useBytesFormatter()
 </script>
 
 <template>
@@ -112,7 +129,7 @@ const numberFormatter = useNumberFormatter()
       v-if="sortedDependencies.length > 0"
       id="dependencies"
       :title="
-        $t(
+        t(
           'package.dependencies.title',
           {
             count: numberFormatter.format(sortedDependencies.length),
@@ -121,6 +138,13 @@ const numberFormatter = useNumberFormatter()
         )
       "
     >
+      <PackageSizeBar
+        :package-name="props.packageName"
+        :version="props.version"
+        :package-size="props.packageSize"
+        :dependencies="props.dependencies"
+        :bundled-dependencies="props.bundledDependencies"
+      />
       <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in visibleDeps"
@@ -135,12 +159,12 @@ const numberFormatter = useNumberFormatter()
               v-if="outdatedDeps[dep]"
               class="shrink-0"
               :class="getVersionClass(outdatedDeps[dep])"
-              :text="getOutdatedTooltip(outdatedDeps[dep], $t)"
+              :text="getOutdatedTooltip(outdatedDeps[dep], t)"
             >
               <button
                 type="button"
                 class="inline-flex items-center justify-center p-2 -m-2"
-                :aria-label="getOutdatedTooltip(outdatedDeps[dep], $t)"
+                :aria-label="getOutdatedTooltip(outdatedDeps[dep], t)"
               >
                 <span class="i-lucide:circle-alert w-3 h-3" aria-hidden="true" />
               </button>
@@ -189,8 +213,28 @@ const numberFormatter = useNumberFormatter()
             >
               {{ version }}
             </LinkBase>
+            <TooltipApp
+              v-if="getDepSizeTooltip(dep)"
+              class="shrink-0"
+              :class="getVersionClass(undefined)"
+              :text="getDepSizeTooltip(dep)"
+            >
+              <button
+                type="button"
+                class="inline-flex items-center justify-center p-2 -m-2 outline-none"
+                :aria-label="getDepSizeTooltip(dep)"
+              >
+                <span
+                  class="i-lucide:info w-3 h-3 opacity-50 transition-opacity hover:opacity-100"
+                  :class="{
+                    'i-svg-spinners:ring-resize': sizereqLoading && !sizereqData?.[dep],
+                  }"
+                  aria-hidden="true"
+                />
+              </button>
+            </TooltipApp>
             <span v-if="outdatedDeps[dep]" class="sr-only">
-              ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
+              ({{ getOutdatedTooltip(outdatedDeps[dep], t) }})
             </span>
             <span v-if="getVulnerableDepInfo(dep)" class="sr-only">
               ({{
@@ -209,7 +253,7 @@ const numberFormatter = useNumberFormatter()
         @click="expandDeps"
       >
         {{
-          $t(
+          t(
             'package.dependencies.show_all',
             {
               count: numberFormatter.format(sortedDependencies.length),
@@ -264,7 +308,7 @@ const numberFormatter = useNumberFormatter()
         @click="expandPeerDeps"
       >
         {{
-          $t(
+          t(
             'package.peer_dependencies.show_all',
             {
               count: numberFormatter.format(sortedPeerDependencies.length),
@@ -280,7 +324,7 @@ const numberFormatter = useNumberFormatter()
       v-if="sortedOptionalDependencies.length > 0"
       id="optional-dependencies"
       :title="
-        $t(
+        t(
           'package.optional_dependencies.title',
           {
             count: numberFormatter.format(sortedOptionalDependencies.length),
@@ -318,7 +362,7 @@ const numberFormatter = useNumberFormatter()
         @click="expandOptionalDeps"
       >
         {{
-          $t(
+          t(
             'package.optional_dependencies.show_all',
             {
               count: numberFormatter.format(sortedOptionalDependencies.length),
diff --git a/app/components/Package/SizeBar.vue b/app/components/Package/SizeBar.vue
new file mode 100644
index 000000000..45b5a51af
--- /dev/null
+++ b/app/components/Package/SizeBar.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+import type { InstallSizeResult } from '#shared/types/install-size'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  packageName: string
+  version: string
+  packageSize?: InstallSizeResult | null
+  dependencies?: Record<string, string>
+  bundledDependencies?: boolean | string[]
+}>()
+
+const { data: sizereqData, pending: sizereqLoading } = usePackageDependencySizes(
+  () => props.packageName,
+  () => props.version,
+  () => props.dependencies,
+)
+
+// Minimum percentage to be shown as an individual slice
+const THRESHOLD_PERCENT = 2
+
+type Sizereq = {
+  info: InstallSizeResult
+  bundled: boolean
+  percent: number
+  error: NuxtError | null
+}
+
+// Process dependencies for size visualization
+const sortedSizereqDependecies = computed(() => {
+  if (!props.packageSize?.totalSize || !props.packageSize.dependencies) {
+    return { visible: [], others: [], totalOthersSize: 0, othersPercentage: 0 }
+  }
+
+  const allMapped = props.packageSize.dependencies.map(depSize => {
+    let bundled = false
+    switch (typeof props.bundledDependencies) {
+      case 'boolean':
+        bundled = props.bundledDependencies
+        break
+      case 'object':
+        bundled = props.bundledDependencies.some(name => name === depSize.name)
+        break
+    }
+    const percent = props.packageSize ? (depSize.size / props.packageSize.totalSize) * 100 : 0
+    const serverData = sizereqData.value?.[depSize.name]
+    const error = serverData?.kind === 'error' ? serverData.error : null
+    return {
+      info:
+        serverData?.kind === 'success' && serverData.packageSize
+          ? {
+              package: depSize.name,
+              version: depSize.version,
+              totalSize: serverData.packageSize.totalSize,
+              selfSize: serverData.packageSize.selfSize,
+            }
+          : {
+              package: depSize.name,
+              version: depSize.version,
+              totalSize: depSize.size,
+              selfSize: depSize.size,
+            },
+      error,
+      bundled,
+      percent,
+    } as Sizereq
+  })
+
+  const visible: Sizereq[] = []
+  const others: Sizereq[] = []
+
+  for (const dep of allMapped) {
+    const percentage = (dep.info.selfSize / props.packageSize.totalSize) * 100
+    if (percentage >= THRESHOLD_PERCENT) {
+      visible.push({ ...dep, percent: percentage })
+    } else {
+      others.push(dep)
+    }
+  }
+
+  const othersSelfSize = others.reduce((acc, d) => acc + d.info.selfSize, 0)
+  const othersPercentage = (othersSelfSize / props.packageSize.totalSize) * 100
+
+  return { visible, others, totalOthersSize: othersSelfSize, othersPercentage }
+})
+
+const othersTooltip = computed(() => {
+  const others = sortedSizereqDependecies.value.others
+  if (others.length === 0) return ''
+
+  const MAX_VISIBLE_IN_TOOLTIP = 0
+  const visiblePart = others.slice(0, MAX_VISIBLE_IN_TOOLTIP)
+  const remainingCount = others.length - MAX_VISIBLE_IN_TOOLTIP
+
+  const lines = [
+    bytesFormatter.format(sortedSizereqDependecies.value.totalOthersSize),
+    numberFormatter.value.format(sortedSizereqDependecies.value.othersPercentage),
+    '',
+    ...visiblePart.flatMap(size => [size.info.package, getDepSizeTooltip(size.info.package), '']),
+  ]
+
+  if (remainingCount > 0) {
+    lines.push(t('package.size_increase.deps', { count: remainingCount }))
+  }
+
+  return lines.join('\n')
+})
+
+const selfSizeWidth = computed(() => {
+  if (!props.packageSize?.selfSize || !props.packageSize?.totalSize) return 0
+  return (props.packageSize.selfSize / props.packageSize.totalSize) * 100
+})
+
+const remainingWidth = computed(() => {
+  const total = props.packageSize?.totalSize
+  if (!total) return 100
+
+  const self = props.packageSize.selfSize || 0
+  const depsSum = [
+    ...sortedSizereqDependecies.value.visible,
+    ...sortedSizereqDependecies.value.others,
+  ].reduce((acc, d) => acc + d.info.selfSize, 0)
+
+  const width = ((total - (self + depsSum)) / total) * 100
+  return Math.max(0, width)
+})
+
+const { getTooltipText: getDepSizeTooltip } = usePackageDependencySizeTooltip(
+  sizereqData,
+  () => props.packageSize,
+  t,
+)
+
+const numberFormatter = useNumberFormatter()
+const bytesFormatter = useBytesFormatter()
+</script>
+
+<template>
+  <div class="gap-0.5 flex flex-row h-6 w-full bg-fg-muted/10 overflow-hidden rounded-md">
+    <TooltipApp
+      v-if="selfSizeWidth > 0"
+      :text="
+        t('package.stats.size_tooltip.unpacked', {
+          size: bytesFormatter.format(props.packageSize?.selfSize || 0),
+        })
+      "
+      class="h-full bg-accent"
+      :style="{ width: selfSizeWidth + '%' }"
+    />
+
+    <template v-for="dep in sortedSizereqDependecies.visible" :key="dep.info.package">
+      <TooltipApp
+        :text="`${dep.info.package}\n${getDepSizeTooltip(dep.info.package)}`"
+        class="h-full"
+        :class="dep.bundled ? 'bg-accent' : 'bg-fg'"
+        :style="{ width: dep.percent + '%' }"
+      >
+        <RouterLink
+          :to="packageRoute(dep.info.package, dep.info.version)"
+          class="block w-full h-full"
+        />
+      </TooltipApp>
+    </template>
+
+    <TooltipApp
+      v-if="sortedSizereqDependecies.others.length > 0"
+      :text="othersTooltip"
+      class="h-full bg-fg flex items-center justify-center"
+      :style="{ width: sortedSizereqDependecies.othersPercentage + '%' }"
+    >
+      <span class="i-lucide:layers-2 w-3 h-3 text-bg" aria-hidden="true" />
+    </TooltipApp>
+
+    <div v-if="remainingWidth > 0" class="h-full bg-bg-elevated animate-skeleton-pulse flex-1" />
+  </div>
+</template>
diff --git a/app/composables/npm/usePackageDependencySizes.ts b/app/composables/npm/usePackageDependencySizes.ts
new file mode 100644
index 000000000..65d531374
--- /dev/null
+++ b/app/composables/npm/usePackageDependencySizes.ts
@@ -0,0 +1,115 @@
+import type { NuxtError } from '#app'
+import type { InstallSizeResult } from '#shared/types/install-size'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { computed, toValue } from 'vue'
+import { useAsyncData, useNumberFormatter, useBytesFormatter } from '#imports'
+
+/**
+ * Fetches size information for all dependencies of a package.
+ */
+export function usePackageDependencySizes(
+  packageName: MaybeRefOrGetter<string>,
+  version: MaybeRefOrGetter<string>,
+  dependencies: MaybeRefOrGetter<Record<string, string> | undefined>,
+) {
+  const sortedDependencies = computed(() => {
+    const deps = toValue(dependencies)
+    if (!deps) return []
+    return Object.entries(deps).sort(([a], [b]) => a.localeCompare(b))
+  })
+
+  return useAsyncData(
+    `sizes:${toValue(packageName)}:${toValue(version)}`,
+    async (_app, { signal }) => {
+      const entries = sortedDependencies.value
+
+      const results = await Promise.all(
+        entries.map<
+          Promise<
+            | { kind: 'success'; packageSize: InstallSizeResult }
+            | { kind: 'error'; error: NuxtError }
+          >
+        >(async ([name, depVersion]) => {
+          try {
+            const { data: resolvedVersion, error } = await useResolvedVersion(name, depVersion)
+
+            if (error.value || !resolvedVersion.value) return { kind: 'error', error: error.value! }
+
+            return {
+              kind: 'success',
+              packageSize: await $fetch<InstallSizeResult>(
+                `/api/registry/install-size/${name}/v/${encodeURIComponent(resolvedVersion.value)}`,
+                { signal },
+              ),
+            }
+          } catch (err) {
+            return { kind: 'error', error: (err as Ref<NuxtError>)?.value }
+          }
+        }),
+      )
+
+      return results.reduce(
+        (acc, curr) => {
+          if (curr.kind === 'error') return acc
+          acc[curr.packageSize.package] = curr
+          return acc
+        },
+        {} as Record<
+          string,
+          { kind: 'success'; packageSize: InstallSizeResult } | { kind: 'error'; error: NuxtError }
+        >,
+      )
+    },
+    {
+      watch: [sortedDependencies],
+      server: false,
+    },
+  )
+}
+
+/**
+ * Helper to generate dependency size tooltips.
+ */
+export function usePackageDependencySizeTooltip(
+  sizereqData: Ref<Record<
+    string,
+    { kind: 'success'; packageSize: InstallSizeResult } | { kind: 'error'; error: NuxtError }
+  > | null>,
+  packageSize: MaybeRefOrGetter<InstallSizeResult | null | undefined>,
+  t: (key: string, params?: Record<string, any>, count?: number) => string,
+) {
+  const numberFormatter = useNumberFormatter()
+  const bytesFormatter = useBytesFormatter()
+
+  function getTooltipText(dep: string): string | undefined {
+    const data = sizereqData.value?.[dep]
+    const total = toValue(packageSize)?.totalSize
+
+    if (data?.kind === 'error') return data.error.message
+
+    const info = data?.kind === 'success' ? data.packageSize : undefined
+    if (!info && !total) return undefined
+
+    const percent = total && info ? (info.selfSize / total) * 100 : undefined
+
+    return [
+      percent && numberFormatter.value.format(percent),
+      info &&
+        info?.totalSize !== info?.selfSize &&
+        t('package.stats.size_tooltip.unpacked', {
+          size: bytesFormatter.format(info.selfSize!),
+        }),
+      info?.totalSize &&
+        t('package.stats.size_tooltip.total', {
+          count: info.dependencyCount,
+          size: bytesFormatter.format(info.totalSize),
+        }),
+    ]
+      .filter(Boolean)
+      .join('\n')
+  }
+
+  return {
+    getTooltipText,
+  }
+}
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 1610b8aa1..86a4db210 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -994,10 +994,14 @@ const showSkeleton = shallowRef(false)
               v-if="hasDependencies && resolvedVersion && displayVersion"
               :package-name="pkg.name"
               :version="resolvedVersion"
+              :package-size="installSize"
               :dependencies="displayVersion.dependencies"
               :peer-dependencies="displayVersion.peerDependencies"
               :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
               :optional-dependencies="displayVersion.optionalDependencies"
+              :bundled-dependencies="
+                displayVersion.bundleDependencies || displayVersion.bundledDependencies
+              "
             />
 
             <!-- Keywords -->