diff --git a/website/src/components/Install.astro b/website/src/components/Install.astro
new file mode 100644
index 0000000..01c552f
--- /dev/null
+++ b/website/src/components/Install.astro
@@ -0,0 +1,280 @@
+<div class="install">
+  <div class="tabs">
+    <div role="tablist" aria-labelledby="tablist-1" class="automatic">
+      <button
+        id="tab-1"
+        type="button"
+        role="tab"
+        aria-selected="true"
+        aria-controls="tabpanel-1"
+      >
+        <span class="focus">brew</span>
+      </button>
+      <button
+        id="tab-2"
+        type="button"
+        role="tab"
+        aria-selected="false"
+        aria-controls="tabpanel-2"
+        tabindex="-1"
+      >
+        <span class="focus">curl</span>
+      </button>
+    </div>
+
+    <div id="tabpanel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
+      <div class="code-block">
+        <pre><code>brew install grega/tap/hdi</code></pre>
+        <button
+          class="code-block-btn"
+          data-copy="brew install grega/tap/hdi"
+          title="Copy to clipboard"
+        >
+          Copy
+        </button>
+      </div>
+    </div>
+    <div
+      id="tabpanel-2"
+      role="tabpanel"
+      tabindex="0"
+      aria-labelledby="tab-2"
+      class="is-hidden"
+    >
+      <div class="code-block">
+        <pre><code>curl -fsSL https://raw.githubusercontent.com/grega/hdi/main/hdi \
+      -o ~/.local/bin/hdi &amp;&amp; chmod +x ~/.local/bin/hdi</code></pre>
+        <button
+          class="code-block-btn"
+          data-copy="curl -fsSL https://raw.githubusercontent.com/grega/hdi/main/hdi -o ~/.local/bin/hdi && chmod +x ~/.local/bin/hdi"
+          title="Copy to clipboard"
+        >
+          Copy
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .tabs {
+    border: 1px solid var(--surface0);
+    padding: 1rem;
+    padding-block-start: 0.5rem;
+    border-radius: 0.5rem;
+  }
+
+  [role="tablist"] {
+    min-width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0rem 1rem;
+    margin-block-end: 1rem;
+  }
+
+  [role="tab"],
+  [role="tab"]:focus,
+  [role="tab"]:hover {
+    background-color: unset;
+    color: var(--text);
+    padding-inline: 0;
+    text-underline-offset: 0.5rem;
+    text-decoration: underline 4px solid;
+  }
+
+  [role="tab"][aria-selected="true"] {
+    text-decoration-color: var(--blue);
+  }
+
+  [role="tab"][aria-selected="false"] {
+    text-decoration-color: var(--surface2);
+  }
+
+  [role="tabpanel"] {
+    padding: 1rem;
+    background-color: var(--mantle);
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  [role="tabpanel"].is-hidden {
+    display: none;
+  }
+
+  .code-block {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    pre {
+      flex: 1;
+      overflow: auto;
+      justify-self: stretch;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .code-block-btn {
+    align-self: start;
+  }
+</style>
+
+<script>
+  /*
+   *   Follows W3C Accessible Tabs Pattern
+   *   https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+   *   https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/
+   */
+
+  // @ts-nocheck
+
+  class TabsAutomatic {
+    constructor(groupNode) {
+      this.tablistNode = groupNode;
+
+      this.tabs = [];
+
+      this.firstTab = null;
+      this.lastTab = null;
+
+      this.tabs = Array.from(this.tablistNode.querySelectorAll("[role=tab]"));
+      this.tabpanels = [];
+
+      for (var i = 0; i < this.tabs.length; i += 1) {
+        var tab = this.tabs[i];
+        var tabpanel = document.getElementById(
+          tab.getAttribute("aria-controls"),
+        );
+
+        tab.tabIndex = -1;
+        tab.setAttribute("aria-selected", "false");
+        this.tabpanels.push(tabpanel);
+
+        tab.addEventListener("keydown", this.onKeydown.bind(this));
+        tab.addEventListener("click", this.onClick.bind(this));
+
+        if (!this.firstTab) {
+          this.firstTab = tab;
+        }
+        this.lastTab = tab;
+      }
+
+      this.setSelectedTab(this.firstTab, false);
+    }
+
+    setSelectedTab(currentTab, setFocus) {
+      if (typeof setFocus !== "boolean") {
+        setFocus = true;
+      }
+      for (var i = 0; i < this.tabs.length; i += 1) {
+        var tab = this.tabs[i];
+        if (currentTab === tab) {
+          tab.setAttribute("aria-selected", "true");
+          tab.removeAttribute("tabindex");
+          this.tabpanels[i].classList.remove("is-hidden");
+          if (setFocus) {
+            tab.focus();
+          }
+        } else {
+          tab.setAttribute("aria-selected", "false");
+          tab.tabIndex = -1;
+          this.tabpanels[i].classList.add("is-hidden");
+        }
+      }
+    }
+
+    setSelectedToPreviousTab(currentTab) {
+      var index;
+
+      if (currentTab === this.firstTab) {
+        this.setSelectedTab(this.lastTab);
+      } else {
+        index = this.tabs.indexOf(currentTab);
+        this.setSelectedTab(this.tabs[index - 1]);
+      }
+    }
+
+    setSelectedToNextTab(currentTab) {
+      var index;
+
+      if (currentTab === this.lastTab) {
+        this.setSelectedTab(this.firstTab);
+      } else {
+        index = this.tabs.indexOf(currentTab);
+        this.setSelectedTab(this.tabs[index + 1]);
+      }
+    }
+
+    /* EVENT HANDLERS */
+
+    onKeydown(event) {
+      var tgt = event.currentTarget,
+        flag = false;
+
+      switch (event.key) {
+        case "ArrowLeft":
+          this.setSelectedToPreviousTab(tgt);
+          flag = true;
+          break;
+
+        case "ArrowRight":
+          this.setSelectedToNextTab(tgt);
+          flag = true;
+          break;
+
+        case "Home":
+          this.setSelectedTab(this.firstTab);
+          flag = true;
+          break;
+
+        case "End":
+          this.setSelectedTab(this.lastTab);
+          flag = true;
+          break;
+
+        default:
+          break;
+      }
+
+      if (flag) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    }
+
+    onClick(event) {
+      this.setSelectedTab(event.currentTarget);
+    }
+  }
+
+  // Initialize tablist
+
+  window.addEventListener("load", function () {
+    var tablists = document.querySelectorAll("[role=tablist].automatic");
+    for (var i = 0; i < tablists.length; i++) {
+      new TabsAutomatic(tablists[i]);
+    }
+  });
+</script>
+
+<script>
+  // Copy buttons
+  document.querySelectorAll(".code-block-btn").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      const htmlBtn = btn as HTMLElement;
+      navigator.clipboard
+        .writeText(htmlBtn.dataset.copy || "")
+        .then(function () {
+          var original = htmlBtn.textContent;
+          htmlBtn.textContent = "Copied!";
+          htmlBtn.classList.add("copied");
+          setTimeout(function () {
+            htmlBtn.textContent = original;
+            htmlBtn.classList.remove("copied");
+          }, 1500);
+        });
+    });
+  });
+</script>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 119b438..415e225 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import Install from "../components/Install.astro";
 import DemoLatte from "../assets/demo-latte.gif";
 import DemoMocha from "../assets/demo-mocha.gif";
 import { VERSION } from "../data/data";
@@ -51,37 +52,9 @@ import { VERSION } from "../data/data";
       </div>
     </section>
 
-    <section class="install-section">
+    <section id="install-section">
       <h2>Install</h2>
-      <div class="install-methods">
-        <div class="install-method">
-          <h3>Homebrew</h3>
-          <div class="install-code">
-            <pre><code>brew install grega/tap/hdi</code></pre>
-            <button
-              class="copy-btn"
-              data-copy="brew install grega/tap/hdi"
-              title="Copy to clipboard"
-            >
-              Copy
-            </button>
-          </div>
-        </div>
-        <div class="install-method">
-          <h3>Manual</h3>
-          <div class="install-code">
-            <pre><code>curl -fsSL https://raw.githubusercontent.com/grega/hdi/main/hdi \
-  -o ~/.local/bin/hdi &amp;&amp; chmod +x ~/.local/bin/hdi</code></pre>
-            <button
-              class="copy-btn"
-              data-copy="curl -fsSL https://raw.githubusercontent.com/grega/hdi/main/hdi -o ~/.local/bin/hdi && chmod +x ~/.local/bin/hdi"
-              title="Copy to clipboard"
-            >
-              Copy
-            </button>
-          </div>
-        </div>
-      </div>
+      <Install />
       <p class="install-note">
         No dependencies, just Bash. Works on macOS and Linux.
       </p>
@@ -146,26 +119,6 @@ $ hdi
       </p>
     </section>
   </main>
-
-  <script>
-    // Copy buttons
-    document.querySelectorAll(".copy-btn").forEach(function (btn) {
-      btn.addEventListener("click", function () {
-        const htmlBtn = btn as HTMLElement;
-        navigator.clipboard
-          .writeText(htmlBtn.dataset.copy || "")
-          .then(function () {
-            var original = htmlBtn.textContent;
-            htmlBtn.textContent = "Copied!";
-            htmlBtn.classList.add("copied");
-            setTimeout(function () {
-              htmlBtn.textContent = original;
-              htmlBtn.classList.remove("copied");
-            }, 1500);
-          });
-      });
-    });
-  </script>
 </Layout>
 
 <style>
@@ -183,7 +136,7 @@ $ hdi
     h2 {
       font-size: 1.25rem;
       color: var(--sapphire);
-      margin-bottom: 1rem;
+      margin-bottom: 1.5rem;
     }
     h2::before {
       content: "▸ ";
@@ -203,14 +156,6 @@ $ hdi
       }
     }
   }
-  /* 
-  .about section p + p {
-    margin-top: 1rem;
-  } */
-
-  /* .about section + section {
-    margin-top: 3rem;
-  } */
 
   .about .links-section {
     margin-top: 1.5rem;
@@ -295,73 +240,6 @@ $ hdi
 
   /* ── Install ─────────────────────────────────────────────────────── */
 
-  .install-methods {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  .install-method {
-    background: var(--mantle);
-    border: 0.0625rem solid var(--surface1);
-    border-radius: 0.375rem;
-    padding: 1rem;
-    min-width: 0;
-  }
-
-  .install-method h3 {
-    font-size: 0.8125rem;
-    color: var(--subtext0);
-    margin-bottom: 0.625rem;
-    font-weight: 600;
-  }
-
-  .install-code {
-    position: relative;
-  }
-
-  .install-method pre {
-    border: 0.0625rem solid var(--surface0);
-    background: var(--base);
-    padding: 0.75rem;
-    padding-right: 4rem;
-    border-radius: 0.25rem;
-    overflow-x: auto;
-  }
-
-  .copy-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 0.5rem;
-    /* background: var(--surface0);
-  border: 0.0625rem solid var(--surface1);
-  color: var(--overlay0);
-  font-family: var(--font-mono);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  transition:
-    color 0.15s,
-    border-color 0.15s; */
-  }
-
-  /* .copy-btn:hover {
-  color: var(--text);
-  border-color: var(--overlay0);
-} */
-
-  /* .copy-btn.copied {
-  color: var(--green);
-  border-color: var(--green);
-} */
-
-  .install-method code {
-    color: var(--green);
-    /* font-size: 0.8125rem; */
-    font-family: var(--font-mono);
-  }
-
   .install-note {
     margin-top: 0.75rem;
     color: var(--subtext0);
diff --git a/website/tests/about.spec.ts b/website/tests/about.spec.ts
index bfeab86..95d6121 100644
--- a/website/tests/about.spec.ts
+++ b/website/tests/about.spec.ts
@@ -5,12 +5,79 @@ test.describe("About page", () => {
     await page.goto("/", { waitUntil: "domcontentloaded" });
   });
 
-  test("renders hero and install section", async ({ page }) => {
+  test("renders hero", async ({ page }) => {
     await expect(
       page.locator("h1", { hasText: "No more searching the README." }),
     ).toBeVisible();
-    await expect(page.locator(".install-section")).toBeVisible();
-    await expect(page.locator(".install-method")).toHaveCount(2);
+  });
+
+  test("renders install section", async ({ page }) => {
+    await expect(page.locator("#install-section")).toBeVisible();
+  });
+
+  test.describe("install tabs", () => {
+    test.beforeEach(async ({ page }) => {
+      await page.waitForLoadState("load");
+    });
+
+    test("renders", async ({ page }) => {
+      await expect(page.locator("[role=tablist]")).toBeVisible();
+      await expect(page.locator("[role=tab]")).toHaveCount(2);
+    });
+
+    test("brew tab is selected by default", async ({ page }) => {
+      const brewTab = page.locator("[role=tab]", { hasText: "brew" });
+      await expect(brewTab).toHaveAttribute("aria-selected", "true");
+      await expect(
+        page.locator("code", { hasText: "brew install grega/tap/hdi" }),
+      ).toBeVisible();
+    });
+
+    test("clicking curl tab shows curl panel", async ({ page }) => {
+      const curlTab = page.locator("[role=tab]", { hasText: "curl" });
+      await curlTab.click();
+      await expect(curlTab).toHaveAttribute("aria-selected", "true");
+      await expect(page.locator("#tabpanel-2")).not.toHaveClass(/is-hidden/);
+      await expect(page.locator("#tabpanel-1")).toHaveClass(/is-hidden/);
+    });
+
+    test("clicking brew tab after curl restores brew panel", async ({
+      page,
+    }) => {
+      await page.locator("[role=tab]", { hasText: "curl" }).click();
+      const brewTab = page.locator("[role=tab]", { hasText: "brew" });
+      await brewTab.click();
+      await expect(brewTab).toHaveAttribute("aria-selected", "true");
+      await expect(page.locator("#tabpanel-1")).not.toHaveClass(/is-hidden/);
+      await expect(page.locator("#tabpanel-2")).toHaveClass(/is-hidden/);
+    });
+
+    test("ArrowRight moves focus to curl tab", async ({ page }) => {
+      const brewTab = page.locator("[role=tab]", { hasText: "brew" });
+      await brewTab.focus();
+      await page.keyboard.press("ArrowRight");
+      const curlTab = page.locator("[role=tab]", { hasText: "curl" });
+      await expect(curlTab).toHaveAttribute("aria-selected", "true");
+      await expect(page.locator("#tabpanel-2")).not.toHaveClass(/is-hidden/);
+    });
+
+    test("ArrowLeft moves from curl back to brew", async ({ page }) => {
+      await page.locator("[role=tab]", { hasText: "curl" }).click();
+      const curlTab = page.locator("[role=tab]", { hasText: "curl" });
+      await curlTab.focus();
+      await page.keyboard.press("ArrowLeft");
+      const brewTab = page.locator("[role=tab]", { hasText: "brew" });
+      await expect(brewTab).toHaveAttribute("aria-selected", "true");
+      await expect(page.locator("#tabpanel-1")).not.toHaveClass(/is-hidden/);
+    });
+
+    test("ArrowLeft wraps from brew back to curl", async ({ page }) => {
+      const brewTab = page.locator("[role=tab]", { hasText: "brew" });
+      await brewTab.focus();
+      await page.keyboard.press("ArrowLeft");
+      const curlTab = page.locator("[role=tab]", { hasText: "curl" });
+      await expect(curlTab).toHaveAttribute("aria-selected", "true");
+    });
   });
 
   test("copy button works", async ({ page, context, browserName }) => {
@@ -19,7 +86,7 @@ test.describe("About page", () => {
       "Real clipboard permission support is inconsistent in Firefox/WebKit.",
     );
 
-    const btn = page.locator(".copy-btn").first();
+    const btn = page.locator(".code-block-btn").first();
     const expected = await btn.getAttribute("data-copy");
     expect(expected).toBeTruthy();