diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index cb76588f..ef7654d4 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -223,28 +223,38 @@ textarea:focus-visible {
   align-items: flex-start;
   gap: --spacing(2);
 }
+/* Package-manager switch: a pill track like the hero buttons, with one thumb that slides to the
+   active tab. Tabs share equal columns so the thumb's offset is just its index times its width. */
 .install-tabs {
-  display: inline-flex;
-  gap: --spacing(1);
+  position: relative;
+  display: inline-grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
   padding: --spacing(1);
-  border-radius: var(--radius);
+  border-radius: 9999px;
   background: var(--color-surface-raised);
 }
+.install-tabs-thumb {
+  position: absolute;
+  inset-block: --spacing(1);
+  left: --spacing(1);
+  width: calc((100% - --spacing(2)) / var(--count));
+  border-radius: 9999px;
+  background: var(--color-fill-subtle);
+  transform: translateX(calc(var(--active) * 100%));
+  transition: transform 240ms var(--ease-out);
+}
 .install-tabs > button {
-  padding: --spacing(1) --spacing(3);
-  border-radius: calc(var(--radius) - 2px);
+  position: relative;
+  padding: --spacing(1) --spacing(4);
+  border-radius: 9999px;
   font-family: var(--font-mono);
   font-size: var(--text-2xs);
   color: var(--color-text-muted);
-  transition:
-    background var(--duration-interactive) var(--ease-out),
-    color var(--duration-interactive) var(--ease-out);
-}
-.install-tabs > button:hover {
-  color: var(--color-text);
+  transition: color var(--duration-interactive) var(--ease-out);
 }
+.install-tabs > button:hover,
 .install-tabs > button.active {
-  background: var(--color-fill-subtle);
   color: var(--color-text);
 }
 .install-command {
@@ -547,7 +557,9 @@ textarea:focus-visible {
   .playground-status i {
     animation: none;
   }
-  .playground-options button {
+  .playground-options button,
+  .install-tabs-thumb,
+  .install-tabs > button {
     transition: none;
   }
 }
diff --git a/apps/docs/components/install-command.tsx b/apps/docs/components/install-command.tsx
index 0f39740d..8fe96a43 100644
--- a/apps/docs/components/install-command.tsx
+++ b/apps/docs/components/install-command.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Check, Copy } from "lucide-react";
-import { useRef, useState } from "react";
+import { type CSSProperties, useRef, useState } from "react";
 
 const installers = [
   { name: "bun", command: "bun add @bloxwap/hyperliquid" },
@@ -24,7 +24,13 @@ export function InstallCommand() {
 
   return (
     <div className="install-picker">
-      <div className="install-tabs" role="tablist" aria-label="Package manager">
+      <div
+        className="install-tabs"
+        role="tablist"
+        aria-label="Package manager"
+        style={{ "--count": installers.length, "--active": active } as CSSProperties}
+      >
+        <span className="install-tabs-thumb" aria-hidden="true" />
         {installers.map((installer, index) => (
           <button
             key={installer.name}