diff --git a/packages/docs/src/components/ComparisonBarChart.astro b/packages/docs/src/components/ComparisonBarChart.astro
new file mode 100644
index 00000000..6f46cdb7
--- /dev/null
+++ b/packages/docs/src/components/ComparisonBarChart.astro
@@ -0,0 +1,346 @@
+---
+import type { ChartDatum } from '../lib/types'
+
+interface Props {
+  title: string
+  data: ChartDatum[]
+  valueFormat: 'count' | 'mb'
+}
+
+const { title, data, valueFormat } = Astro.props
+const chartPayload = JSON.stringify({ data, valueFormat })
+---
+
+<div class="comparison-chart-container">
+  <h3 class="comparison-chart-title">{title}</h3>
+  <div class="comparison-chart-wrapper" data-comparison={chartPayload}>
+    <svg class="comparison-bar-chart" role="img" aria-label={title}></svg>
+  </div>
+  <div class="comparison-chart-tooltip"></div>
+</div>
+
+<style>
+  .comparison-chart-container {
+    position: relative;
+    width: 100%;
+    margin-top: 1em;
+    margin-bottom: 2em;
+  }
+
+  .comparison-chart-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--ft-text);
+    margin: 0 0 0.75em 0;
+  }
+
+  .comparison-chart-wrapper {
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .comparison-bar-chart {
+    width: 100%;
+    height: 400px;
+    display: block;
+  }
+
+  @media (max-width: 768px) {
+    .comparison-bar-chart {
+      height: 280px;
+    }
+  }
+
+  .comparison-chart-tooltip {
+    position: absolute;
+    pointer-events: none;
+    background: var(--ft-bg);
+    border: 1px solid var(--ft-border);
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 13px;
+    line-height: 1.5;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: 100;
+    color: var(--ft-text);
+  }
+
+  .comparison-chart-tooltip.visible {
+    opacity: 1;
+  }
+
+  .comparison-chart-tooltip .tooltip-title {
+    font-weight: 600;
+    color: var(--ft-text);
+    margin-bottom: 4px;
+  }
+
+  .comparison-chart-tooltip .tooltip-value {
+    color: var(--ft-muted);
+  }
+
+  :global(html.dark) .comparison-chart-tooltip {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  .comparison-chart-wrapper :global(.comparison-x-axis-text) {
+    fill: var(--ft-text);
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .comparison-chart-wrapper :global(.comparison-y-axis-text) {
+    fill: var(--ft-muted);
+    font-size: 12px;
+  }
+
+  .comparison-chart-wrapper :global(.comparison-axis-domain) {
+    stroke: var(--ft-border);
+  }
+
+  .comparison-chart-wrapper :global(.comparison-axis-tick-line) {
+    stroke: var(--ft-border);
+  }
+
+  .comparison-chart-wrapper :global(.comparison-grid-line) {
+    stroke: var(--ft-chart-grid, var(--ft-border));
+  }
+</style>
+
+<script>
+  import * as d3 from 'd3'
+  import type { ChartDatum, ComparisonChartPayload } from '../lib/types'
+
+  const chartDimensionsCache = new WeakMap<
+    HTMLElement,
+    { width: number; height: number }
+  >()
+
+  function formatValue(value: number, format: 'count' | 'mb'): string {
+    if (format === 'count') return String(Math.round(value))
+    return `${value.toFixed(2)} MB`
+  }
+
+  function setTooltipContent(
+    tooltip: HTMLElement,
+    name: string,
+    valueText: string,
+  ) {
+    const titleDiv = document.createElement('div')
+    titleDiv.className = 'tooltip-title'
+    titleDiv.textContent = name
+    const valueDiv = document.createElement('div')
+    valueDiv.className = 'tooltip-value'
+    valueDiv.textContent = valueText
+    tooltip.replaceChildren(titleDiv, valueDiv)
+  }
+
+  function initComparisonChart(wrapper: HTMLElement) {
+    const svg = wrapper.querySelector('.comparison-bar-chart') as SVGSVGElement
+    const container = wrapper.closest('.comparison-chart-container')
+    const tooltip = container?.querySelector(
+      '.comparison-chart-tooltip',
+    ) as HTMLElement
+    if (!svg || !tooltip) return
+
+    const dataAttr = wrapper.dataset.comparison
+    if (!dataAttr) return
+
+    let payload: ComparisonChartPayload
+    try {
+      payload = JSON.parse(dataAttr) as ComparisonChartPayload
+    } catch (e) {
+      console.warn('[ComparisonBarChart] Invalid chart data:', e)
+      return
+    }
+
+    const { valueFormat } = payload
+    const rawData = payload.data
+    if (!rawData?.length) return
+
+    const data: ChartDatum[] = rawData.map((d) => ({
+      name: String(d?.name ?? ''),
+      value: Math.max(0, Number(d.value) || 0),
+    }))
+
+    const margin = { top: 20, right: 40, bottom: 80, left: 50 }
+    const rect = wrapper.getBoundingClientRect()
+    const width = rect.width || 500
+    const height = rect.height || 300
+    const innerWidth = width - margin.left - margin.right
+    const innerHeight = height - margin.top - margin.bottom
+
+    d3.select(svg).selectAll('*').remove()
+    d3.select(svg).attr('viewBox', `0 0 ${width} ${height}`)
+
+    const titleEl = wrapper
+      .closest('.comparison-chart-container')
+      ?.querySelector('.comparison-chart-title')
+    const chartTitle = titleEl?.textContent ?? 'Comparison'
+    d3.select(svg)
+      .append('title')
+      .text(`${chartTitle}. Bar chart comparing frameworks.`)
+    d3.select(svg)
+      .append('desc')
+      .text(
+        `Bar chart comparing each framework by ${chartTitle}. See table for exact values.`,
+      )
+
+    const gradientId = `comparisonBarGradient-${crypto.randomUUID()}`
+    const g = d3
+      .select(svg)
+      .append('g')
+      .attr('transform', `translate(${margin.left},${margin.top})`)
+
+    const defs = d3.select(svg).append('defs')
+    const gradient = defs
+      .append('linearGradient')
+      .attr('id', gradientId)
+      .attr('x1', '0%')
+      .attr('y1', '100%')
+      .attr('x2', '0%')
+      .attr('y2', '0%')
+    gradient.append('stop').attr('offset', '0%').attr('stop-color', '#7cb560')
+    gradient.append('stop').attr('offset', '100%').attr('stop-color', '#cf8c3c')
+
+    const xScale = d3
+      .scaleBand()
+      .domain(data.map((d) => d.name))
+      .range([0, innerWidth])
+      .padding(0.25)
+
+    const maxValue = d3.max(data, (d) => d.value) ?? 1
+    const yScale = d3
+      .scaleLinear()
+      .domain([0, maxValue * 1.05])
+      .range([innerHeight, 0])
+
+    const minBarHeightPx = 4
+    function barY(d: ChartDatum) {
+      return d.value === 0 ? innerHeight - minBarHeightPx : yScale(d.value)
+    }
+    function barHeight(d: ChartDatum) {
+      return d.value === 0 ? minBarHeightPx : innerHeight - yScale(d.value)
+    }
+
+    g.append('g')
+      .attr('transform', `translate(0,${innerHeight})`)
+      .call(d3.axisBottom(xScale).tickSize(0))
+      .call((sel) =>
+        sel.select('.domain').attr('class', 'comparison-axis-domain'),
+      )
+      .call((sel) =>
+        sel
+          .selectAll('text')
+          .attr('class', 'comparison-x-axis-text')
+          .attr('dy', '1em')
+          .attr('transform', 'rotate(-45)')
+          .attr('text-anchor', 'end'),
+      )
+
+    g.append('g')
+      .call(d3.axisLeft(yScale).tickSize(0))
+      .call((sel) =>
+        sel.select('.domain').attr('class', 'comparison-axis-domain'),
+      )
+      .call((sel) =>
+        sel.selectAll('.tick line').attr('class', 'comparison-axis-tick-line'),
+      )
+      .call((sel) =>
+        sel.selectAll('text').attr('class', 'comparison-y-axis-text'),
+      )
+
+    g.append('g')
+      .attr('class', 'comparison-grid')
+      .call(
+        d3
+          .axisLeft(yScale)
+          .tickSize(-innerWidth)
+          .tickFormat(() => ''),
+      )
+      .call((sel) => sel.select('.domain').remove())
+      .call((sel) =>
+        sel.selectAll('.tick line').attr('class', 'comparison-grid-line'),
+      )
+
+    const bars = g
+      .selectAll('.comparison-bar')
+      .data(data)
+      .enter()
+      .append('g')
+      .attr('class', 'comparison-bar')
+      .attr('transform', (d) => `translate(${xScale(d.name) ?? 0},0)`)
+
+    bars
+      .append('rect')
+      .attr('x', 0)
+      .attr('y', innerHeight)
+      .attr('width', xScale.bandwidth())
+      .attr('height', 0)
+      .attr('fill', `url(#${gradientId})`)
+      .attr('rx', 4)
+      .attr('ry', 4)
+      .style('cursor', 'pointer')
+
+    bars
+      .on('mouseenter', function (_event: MouseEvent, d: ChartDatum) {
+        d3.select(this).select('rect').attr('opacity', 1)
+        setTooltipContent(tooltip, d.name, formatValue(d.value, valueFormat))
+        tooltip.classList.add('visible')
+      })
+      .on('mousemove', function (event: MouseEvent) {
+        const containerRect = container?.getBoundingClientRect()
+        if (!containerRect) return
+        const x = event.clientX - containerRect.left + 15
+        const y = event.clientY - containerRect.top - 10
+        tooltip.style.left = `${x}px`
+        tooltip.style.top = `${y}px`
+      })
+      .on('mouseleave', function () {
+        d3.select(this).select('rect').attr('opacity', 0.9)
+        tooltip.classList.remove('visible')
+      })
+
+    bars
+      .select('rect')
+      .transition()
+      .duration(500)
+      .ease(d3.easeCubicOut)
+      .attr('y', (d) => barY(d))
+      .attr('height', (d) => barHeight(d))
+      .attr('opacity', 0.9)
+
+    chartDimensionsCache.set(wrapper, { width, height })
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const ro = new ResizeObserver(() => {
+        const r = wrapper.getBoundingClientRect()
+        const w = r.width || 0
+        const h = r.height || 0
+        const last = chartDimensionsCache.get(wrapper)
+        const lastW = last?.width ?? 0
+        const lastH = last?.height ?? 0
+        if (w > 0 && h > 0 && (w !== lastW || h !== lastH)) {
+          ro.disconnect()
+          initComparisonChart(wrapper)
+        }
+      })
+      ro.observe(wrapper)
+    }
+  }
+
+  function init() {
+    document.querySelectorAll('.comparison-chart-wrapper').forEach((el) => {
+      initComparisonChart(el as HTMLElement)
+    })
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init)
+  } else {
+    init()
+  }
+</script>
diff --git a/packages/docs/src/components/DependencyStats.astro b/packages/docs/src/components/DependencyStats.astro
index e0b18652..0c25ce7f 100644
--- a/packages/docs/src/components/DependencyStats.astro
+++ b/packages/docs/src/components/DependencyStats.astro
@@ -1,13 +1,45 @@
 ---
 import { getCollection } from 'astro:content'
-import { formatBytesToMB, formatTimeMs, getFrameworkSlug } from '../lib/utils'
+import {
+  BYTES_PER_MB,
+  formatBytesToMB,
+  formatTimeMs,
+  getFrameworkSlug,
+} from '../lib/utils'
 import '../styles/shared.css'
+import ComparisonBarChart from './ComparisonBarChart.astro'
 
 const devtimeEntries = await getCollection('devtime')
 const runtimeEntries = await getCollection('runtime')
 
 const starterStats = devtimeEntries.map((entry) => entry.data)
 const ssrStats = runtimeEntries.map((entry) => entry.data)
+
+const validForCharts = starterStats.filter(
+  (f) =>
+    f?.name != null &&
+    Number.isFinite(f.devDependencies) &&
+    Number.isFinite(f.prodDependencies) &&
+    Number.isFinite(f.buildOutputSize) &&
+    Number.isFinite(f.nodeModulesSizeProdOnly),
+)
+
+const depsData = validForCharts.map((f) => ({
+  name: f.name,
+  value: f.devDependencies,
+}))
+const prodDepsData = validForCharts.map((f) => ({
+  name: f.name,
+  value: f.prodDependencies,
+}))
+const buildSizeData = validForCharts.map((f) => ({
+  name: f.name,
+  value: f.buildOutputSize / BYTES_PER_MB,
+}))
+const buildSizeProdData = validForCharts.map((f) => ({
+  name: f.name,
+  value: f.nodeModulesSizeProdOnly / BYTES_PER_MB,
+}))
 ---
 
 <div id="container">
@@ -83,6 +115,65 @@ const ssrStats = runtimeEntries.map((entry) => entry.data)
         </table>
       </div>
 
+      <div
+        class="chart-tabs-container section-with-tabs"
+        data-tab-section="deps"
+      >
+        <div
+          class="tablist chart-tablist"
+          role="tablist"
+          aria-label="Dependency graphs"
+        >
+          <button
+            type="button"
+            role="tab"
+            id="deps-deps-tab"
+            aria-selected="true"
+            aria-controls="deps-deps-panel"
+            class="tab active"
+          >
+            Deps
+          </button>
+          <button
+            type="button"
+            role="tab"
+            id="deps-prod-tab"
+            aria-selected="false"
+            aria-controls="deps-prod-panel"
+            class="tab"
+          >
+            Prod Deps
+          </button>
+        </div>
+        <div class="chart-tabpanels">
+          <div
+            role="tabpanel"
+            id="deps-deps-panel"
+            aria-labelledby="deps-deps-tab"
+            class="tabpanel chart-tabpanel active"
+          >
+            <ComparisonBarChart
+              title="Deps"
+              data={depsData}
+              valueFormat="count"
+            />
+          </div>
+          <div
+            role="tabpanel"
+            id="deps-prod-panel"
+            aria-labelledby="deps-prod-tab"
+            class="tabpanel chart-tabpanel"
+            hidden
+          >
+            <ComparisonBarChart
+              title="Prod Deps"
+              data={prodDepsData}
+              valueFormat="count"
+            />
+          </div>
+        </div>
+      </div>
+
       <div class="table-wrapper">
         <table aria-label="Build and install times by framework">
           <thead>
@@ -121,6 +212,65 @@ const ssrStats = runtimeEntries.map((entry) => entry.data)
         </table>
       </div>
 
+      <div
+        class="chart-tabs-container section-with-tabs"
+        data-tab-section="build"
+      >
+        <div
+          class="tablist chart-tablist"
+          role="tablist"
+          aria-label="Build size graphs"
+        >
+          <button
+            type="button"
+            role="tab"
+            id="build-size-tab"
+            aria-selected="true"
+            aria-controls="build-size-panel"
+            class="tab active"
+          >
+            Build size
+          </button>
+          <button
+            type="button"
+            role="tab"
+            id="build-size-prod-tab"
+            aria-selected="false"
+            aria-controls="build-size-prod-panel"
+            class="tab"
+          >
+            Build size prod
+          </button>
+        </div>
+        <div class="chart-tabpanels">
+          <div
+            role="tabpanel"
+            id="build-size-panel"
+            aria-labelledby="build-size-tab"
+            class="tabpanel chart-tabpanel active"
+          >
+            <ComparisonBarChart
+              title="Build size"
+              data={buildSizeData}
+              valueFormat="mb"
+            />
+          </div>
+          <div
+            role="tabpanel"
+            id="build-size-prod-panel"
+            aria-labelledby="build-size-prod-tab"
+            class="tabpanel chart-tabpanel"
+            hidden
+          >
+            <ComparisonBarChart
+              title="Build size prod"
+              data={buildSizeProdData}
+              valueFormat="mb"
+            />
+          </div>
+        </div>
+      </div>
+
       <h2>Runtime Performance</h2>
 
       <h3>SSR Performance</h3>
@@ -473,6 +623,125 @@ const ssrStats = runtimeEntries.map((entry) => entry.data)
     color: var(--ft-muted);
   }
 
+  .section-with-tabs {
+    margin-top: 16px;
+    margin-bottom: 2em;
+  }
+
+  .chart-tabs-container {
+    margin-top: 1.5em;
+    padding: 1em 1.25em;
+    border: 1px solid var(--ft-border);
+    border-radius: 12px;
+    background: var(--ft-bg-muted);
+  }
+
+  .tablist {
+    display: flex;
+    gap: 0;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--ft-border);
+  }
+
+  .chart-tablist {
+    margin: 0 0 1em 0;
+    padding: 0;
+    border-bottom: none;
+    gap: 8px;
+  }
+
+  .tab {
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ft-muted);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    cursor: pointer;
+    font-family: inherit;
+    transition:
+      color 0.2s,
+      border-color 0.2s,
+      background-color 0.2s;
+  }
+
+  .chart-tablist .tab {
+    padding: 8px 16px;
+    border-radius: 8px;
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .tab:hover {
+    color: var(--ft-text);
+  }
+
+  .tab:focus-visible {
+    outline: 2px solid var(--ft-accent);
+    outline-offset: 2px;
+  }
+
+  .tab.active {
+    color: var(--ft-accent);
+    border-bottom-color: currentColor;
+  }
+
+  .chart-tablist .tab.active {
+    background: var(--ft-accent);
+    color: white;
+    border-bottom: none;
+  }
+
+  .tabpanel {
+    margin-top: 0;
+  }
+
+  .tabpanel[hidden] {
+    display: none;
+  }
+
+  .chart-tabpanels {
+    position: relative;
+    min-height: 320px;
+  }
+
+  .chart-tabpanel {
+    transition: opacity 0.2s ease;
+  }
+
+  .chart-tabpanel[hidden] {
+    display: none;
+    opacity: 0;
+  }
+
+  .chart-tabpanel:not([hidden]) {
+    opacity: 1;
+  }
+
+  .methodology-note {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+  }
+
+  :global(html.dark) .tab {
+    color: var(--ft-muted);
+  }
+
+  :global(html.dark) .tab:hover {
+    color: var(--ft-text);
+  }
+
+  :global(html.dark) .tab.active {
+    color: var(--ft-accent);
+  }
+
+  :global(html.dark) .chart-tablist .tab.active {
+    background: var(--ft-accent);
+    color: var(--ft-bg);
+  }
+
   @media screen and (max-width: 768px) {
     main {
       padding: 20px 16px;
@@ -499,5 +768,66 @@ const ssrStats = runtimeEntries.map((entry) => entry.data)
     th {
       font-size: 12px;
     }
+
+    .tab {
+      padding: 8px 14px;
+      font-size: 13px;
+    }
   }
 </style>
+
+<script>
+  function initTabs() {
+    const sections = document.querySelectorAll(
+      '.chart-tabs-container[data-tab-section]',
+    )
+    sections.forEach((section: Element) => {
+      const tabs = section.querySelectorAll<HTMLButtonElement>('[role="tab"]')
+      const panels = section.querySelectorAll<HTMLElement>('[role="tabpanel"]')
+
+      if (tabs.length !== 2 || panels.length !== 2) return
+
+      function setActive(index: number) {
+        tabs.forEach((tab, i) => {
+          const isSelected = i === index
+          tab.setAttribute('aria-selected', String(isSelected))
+          tab.classList.toggle('active', isSelected)
+        })
+        panels.forEach((panel, i) => {
+          panel.hidden = i !== index
+        })
+      }
+
+      tabs.forEach((tab, index) => {
+        tab.addEventListener('click', () => setActive(index))
+
+        tab.addEventListener('keydown', (e: KeyboardEvent) => {
+          let newIndex = index
+          if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault()
+            newIndex = index === 0 ? tabs.length - 1 : index - 1
+          } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault()
+            newIndex = index === tabs.length - 1 ? 0 : index + 1
+          } else if (e.key === 'Home') {
+            e.preventDefault()
+            newIndex = 0
+          } else if (e.key === 'End') {
+            e.preventDefault()
+            newIndex = tabs.length - 1
+          } else return
+          ;(tabs[newIndex] as HTMLButtonElement).focus()
+          setActive(newIndex)
+        })
+      })
+
+      setActive(0)
+    })
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTabs)
+  } else {
+    initTabs()
+  }
+</script>
diff --git a/packages/docs/src/components/DevTimeChart.astro b/packages/docs/src/components/DevTimeChart.astro
index 481217ed..24b5988a 100644
--- a/packages/docs/src/components/DevTimeChart.astro
+++ b/packages/docs/src/components/DevTimeChart.astro
@@ -113,8 +113,7 @@ const chartData = JSON.stringify([
   }
 
   .chart-wrapper :global(.grid-line) {
-    stroke: var(--ft-border);
-    opacity: 0.5;
+    stroke: var(--ft-chart-grid, var(--ft-border));
   }
 </style>
 
diff --git a/packages/docs/src/lib/types.ts b/packages/docs/src/lib/types.ts
new file mode 100644
index 00000000..19e70790
--- /dev/null
+++ b/packages/docs/src/lib/types.ts
@@ -0,0 +1,9 @@
+export interface ChartDatum {
+  name: string
+  value: number
+}
+
+export interface ComparisonChartPayload {
+  data: ChartDatum[]
+  valueFormat: 'count' | 'mb'
+}
diff --git a/packages/docs/src/lib/utils.ts b/packages/docs/src/lib/utils.ts
index 43c653b4..6b1512bf 100644
--- a/packages/docs/src/lib/utils.ts
+++ b/packages/docs/src/lib/utils.ts
@@ -1,5 +1,5 @@
 const BYTES_PER_KB = 1024
-const BYTES_PER_MB = BYTES_PER_KB * BYTES_PER_KB
+export const BYTES_PER_MB = BYTES_PER_KB * BYTES_PER_KB
 
 /**
  * Returns the URL slug for a framework details page.
diff --git a/packages/docs/src/styles/shared.css b/packages/docs/src/styles/shared.css
index 1990ed86..890ac6e8 100644
--- a/packages/docs/src/styles/shared.css
+++ b/packages/docs/src/styles/shared.css
@@ -11,6 +11,7 @@
   --ft-border: #e5e7eb;
   --ft-bg: #ffffff;
   --ft-bg-muted: #f9fafb;
+  --ft-chart-grid: rgba(0, 0, 0, 0.18);
 }
 
 html.dark {
@@ -19,4 +20,5 @@ html.dark {
   --ft-border: #2e2e2e;
   --ft-bg: #1a1a1a;
   --ft-bg-muted: #242424;
+  --ft-chart-grid: rgba(255, 255, 255, 0.22);
 }