diff --git a/marketing-site/components/reader/ChapterKit.jsx b/marketing-site/components/reader/ChapterKit.jsx
new file mode 100644
index 0000000..911856d
--- /dev/null
+++ b/marketing-site/components/reader/ChapterKit.jsx
@@ -0,0 +1,60 @@
+import { collectChapterKit } from "../../data/sample-chapter";
+
+export default function ChapterKit({ recipes }) {
+  const kit = collectChapterKit(recipes);
+  if (!kit.tools.length && !kit.files.length) return null;
+
+  return (
+    <section className="chapter-kit" id="need" aria-label="What you need">
+      <h2 className="chapter-kit-title">What you need</h2>
+      <p className="chapter-kit-lede">
+        {recipes.length} Try-it{recipes.length === 1 ? "" : "s"} on sample data. Nothing
+        from a live client file.
+      </p>
+      <dl className="kit-grid">
+        <div>
+          <dt>Tools</dt>
+          <dd>
+            <ul>
+              {kit.tools.map((t) => (
+                <li key={t}>{t}</li>
+              ))}
+            </ul>
+          </dd>
+        </div>
+        <div>
+          <dt>Files</dt>
+          <dd>
+            <ul>
+              {kit.files.map((f) => (
+                <li key={f}>{f}</li>
+              ))}
+            </ul>
+          </dd>
+        </div>
+        <div>
+          <dt>Model</dt>
+          <dd>
+            <ul>
+              {kit.models.map((m) => (
+                <li key={m}>{m}</li>
+              ))}
+            </ul>
+          </dd>
+        </div>
+        <div>
+          <dt>Try-its</dt>
+          <dd>
+            <ul>
+              {kit.tryits.map((t) => (
+                <li key={t.id}>
+                  {t.id} · {t.time} · {t.cost}
+                </li>
+              ))}
+            </ul>
+          </dd>
+        </div>
+      </dl>
+    </section>
+  );
+}