streamlit · sfc-gh-dmatthews · Jan 10, 2026 · Dec 18, 2025 · Dec 19, 2025 · Dec 20, 2025
diff --git a/components/blocks/autofunction.js b/components/blocks/autofunction.js
@@ -1,10 +1,8 @@
 import React, { useEffect, useState, useRef } from "react";
-import classNames from "classnames";
 import Table from "./table";
 import { H2, H3 } from "./headers";
 import Warning from "./warning";
 import Deprecation from "./deprecation";
-import { withRouter, useRouter } from "next/router";
 import Prism from "prismjs";
 import "prismjs/components/prism-python";
 import "prismjs/plugins/line-numbers/prism-line-numbers";
@@ -17,12 +15,10 @@ import getConfig from "next/config";
 const { publicRuntimeConfig } = getConfig();
 
 import styles from "./autofunction.module.css";
-import { looksLikeVersionAndPlatformString } from "../../lib/next/utils";
 import { getThemedUrl, getThemeFromDOM } from "../../lib/next/ThemeContext";
 
 const LATEST_VERSION = publicRuntimeConfig.LATEST_VERSION;
 const DEFAULT_VERSION = publicRuntimeConfig.DEFAULT_VERSION;
-const VERSIONS_LIST = publicRuntimeConfig.VERSIONS_LIST;
 
 const cleanHref = (name) => {
   return String(name).replace(/\./g, "").replace(/\s+/g, "-");
@@ -37,10 +33,8 @@ const Autofunction = ({
   deprecated,
   deprecatedText,
   oldStreamlitFunction,
-  goToLatest,
 }) => {
   const blockRef = useRef();
-  const router = useRouter();
   const [isHighlighted, setIsHighlighted] = useState(false);
   const currentNumericVersion =
     version == DEFAULT_VERSION ? LATEST_VERSION : version;
@@ -104,56 +98,6 @@ const Autofunction = ({
     setIsHighlighted(true);
   };
 
-  const VersionSelector = ({ currentNumericVersion, handleSelectVersion }) => {
-    const selectClass =
-      currentNumericVersion != LATEST_VERSION
-        ? "version-select old-version"
-        : "version-select";
-
-    return (
-      <form className={classNames(selectClass, styles.Form)}>
-        <label>
-          <span className="sr-only">Streamlit Version</span>
-          <select
-            value={currentNumericVersion}
-            onChange={handleSelectVersion}
-            className={styles.Select}
-          >
-            {VERSIONS_LIST.map((version, index) => (
-              <option value={version} key={version}>
-                {"Version " + version}
-              </option>
-            ))}
-          </select>
-        </label>
-      </form>
-    );
-  };
-
-  const handleSelectVersion = (event) => {
-    const functionObject =
-      docstrings[streamlitFunction] ?? docstrings[oldStreamlitFunction];
-    const slicedSlug = slug.slice();
-
-    if (event.target.value !== currentNumericVersion) {
-      if (looksLikeVersionAndPlatformString(slicedSlug[0])) {
-        slicedSlug.shift();
-      }
-      if (event.target.value !== LATEST_VERSION) {
-        slicedSlug.unshift(event.target.value);
-      } else {
-        goToLatest();
-      }
-    }
-
-    if (!functionObject) {
-      router.push(`/${slicedSlug.join("/")}`);
-    } else {
-      const name = cleanHref(`st.${functionObject.name}`);
-      router.push(`/${slicedSlug.join("/")}#${name} `);
-    }
-  };
-
   const footers = [];
   const args = [];
   const returns = [];
@@ -184,31 +128,25 @@ const Autofunction = ({
     }
   } else {
     return (
-      <div className={styles.HeaderContainer}>
-        <div className={styles.TitleContainer} ref={blockRef} key={slug}>
-          <H2
-            className={`
-              ${styles.Title}
-              relative
-            `}
+      <div className={styles.HeaderContainer} ref={blockRef} key={slug}>
+        <H2
+          className={`
+            ${styles.Title}
+            relative
+          `}
+        >
+          <a
+            aria-hidden="true"
+            tabIndex="-1"
+            href={`#${cleanHref(
+              streamlitFunction.replace("streamlit", "st"),
+            )}`.toLowerCase()}
+            className="absolute"
           >
-            <a
-              aria-hidden="true"
-              tabIndex="-1"
-              href={`#${cleanHref(
-                streamlitFunction.replace("streamlit", "st"),
-              )}`.toLowerCase()}
-              className="absolute"
-            >
-              <span className="icon icon-link"></span>
-            </a>
-            {streamlitFunction.replace("streamlit", "st")}
-          </H2>
-          <VersionSelector
-            currentNumericVersion={currentNumericVersion}
-            handleSelectVersion={handleSelectVersion}
-          />
-        </div>
+            <span className="icon icon-link"></span>
+          </a>
+          {streamlitFunction.replace("streamlit", "st")}
+        </H2>
         <Warning>
           <p>
             This method does not exist in version{" "}
@@ -263,18 +201,7 @@ const Autofunction = ({
     );
     header = (
       <div className={styles.HeaderContainer}>
-        <div
-          className={`
-            ${styles.TitleContainer}
-            relative
-          `}
-        >
-          {headerTitle}
-          <VersionSelector
-            currentNumericVersion={currentNumericVersion}
-            handleSelectVersion={handleSelectVersion}
-          />
-        </div>
+        {headerTitle}
         {deprecated === true ? (
           <Deprecation>
             <p dangerouslySetInnerHTML={{ __html: deprecatedText }} />
@@ -543,4 +470,4 @@ const Autofunction = ({
   );
 };
 
-export default withRouter(Autofunction);
+export default Autofunction;
diff --git a/components/blocks/autofunction.module.css b/components/blocks/autofunction.module.css
@@ -6,54 +6,10 @@
   @apply mb-6;
 }
 
-.TitleContainer {
-  @apply flex flex-col items-start md:flex-row md:items-baseline mt-4 mb-2;
-}
-
 .Title {
   @apply mt-6 mb-2;
 }
 
-.Form {
-  @apply relative my-4 md:my-0 ml-0 md:ml-auto min-w-fit;
-}
-
-.Form::after {
-  @apply hidden md:block md:absolute md:bottom-1/4 md:right-0 md:opacity-70 md:pointer-events-none md:w-3 md:h-2;
-  content: "";
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.8762017 L5.80707196,6.93171246 C5.72063689,7.01813145 5.61827957,7.06134094 5.5,7.06134094 C5.38172043,7.06134094 5.27936311,7.01813145 5.19292804,6.93171246 L0.129652605,1.8762017 C0.0432175352,1.78978271 0,1.68630735 0,1.5657756 C0,1.44524385 0.0432175352,1.34176849 0.129652605,1.2553495 L1.26240695,0.129628481 C1.34884202,0.0432094937 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432094937 1.87655087,0.129628481 L5.5,3.7524034 L9.12344913,0.129628481 C9.2098842,0.0432094937 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432094937 9.73759305,0.129628481 L10.8703474,1.2553495 C10.9567825,1.34176849 11,1.44524385 11,1.5657756 C11,1.68630735 10.9567825,1.78978271 10.8703474,1.8762017 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.Form::before {
-  @apply md:hidden block absolute bottom-1/4 left-0 opacity-70 pointer-events-none w-3 h-2;
-  content: "";
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.8762017 L5.80707196,6.93171246 C5.72063689,7.01813145 5.61827957,7.06134094 5.5,7.06134094 C5.38172043,7.06134094 5.27936311,7.01813145 5.19292804,6.93171246 L0.129652605,1.8762017 C0.0432175352,1.78978271 0,1.68630735 0,1.5657756 C0,1.44524385 0.0432175352,1.34176849 0.129652605,1.2553495 L1.26240695,0.129628481 C1.34884202,0.0432094937 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432094937 1.87655087,0.129628481 L5.5,3.7524034 L9.12344913,0.129628481 C9.2098842,0.0432094937 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432094937 9.73759305,0.129628481 L10.8703474,1.2553495 C10.9567825,1.34176849 11,1.44524385 11,1.5657756 C11,1.68630735 10.9567825,1.78978271 10.8703474,1.8762017 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.Select {
-  @apply appearance-none bg-white border-none p-0 m-0 w-full font-mono text-lg font-bold leading-none md:text-right text-left md:pr-5 md:pl-0 pr-0 pl-5;
-}
-
-:global(.dark) .Select {
-  @apply bg-gray-100 text-gray-40;
-}
-
-:global(.old-version) .Select {
-  @apply text-red-70;
-}
-
-:global(.sis-version) .Select {
-  @apply text-lightBlue-70;
-}
-
-:global(.dark) .Form::after {
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.87655087 L5.80707196,6.93300248 C5.72063689,7.01943755 5.61827957,7.06265509 5.5,7.06265509 C5.38172043,7.06265509 5.27936311,7.01943755 5.19292804,6.93300248 L0.129652605,1.87655087 C0.0432175352,1.7901158 0,1.68662117 0,1.566067 C0,1.44551282 0.0432175352,1.3420182 0.129652605,1.25558313 L1.26240695,0.129652605 C1.34884202,0.0432175352 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432175352 1.87655087,0.129652605 L5.5,3.75310174 L9.12344913,0.129652605 C9.2098842,0.0432175352 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432175352 9.73759305,0.129652605 L10.8703474,1.25558313 C10.9567825,1.3420182 11,1.44551282 11,1.566067 C11,1.68662117 10.9567825,1.7901158 10.8703474,1.87655087 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-:global(.dark) .Form::before {
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='select_arrow_down_disabled' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M10.8703474,1.87655087 L5.80707196,6.93300248 C5.72063689,7.01943755 5.61827957,7.06265509 5.5,7.06265509 C5.38172043,7.06265509 5.27936311,7.01943755 5.19292804,6.93300248 L0.129652605,1.87655087 C0.0432175352,1.7901158 0,1.68662117 0,1.566067 C0,1.44551282 0.0432175352,1.3420182 0.129652605,1.25558313 L1.26240695,0.129652605 C1.34884202,0.0432175352 1.45119934,0 1.56947891,0 C1.68775848,0 1.7901158,0.0432175352 1.87655087,0.129652605 L5.5,3.75310174 L9.12344913,0.129652605 C9.2098842,0.0432175352 9.31224152,0 9.43052109,0 C9.54880066,0 9.65115798,0.0432175352 9.73759305,0.129652605 L10.8703474,1.25558313 C10.9567825,1.3420182 11,1.44551282 11,1.566067 C11,1.68662117 10.9567825,1.7901158 10.8703474,1.87655087 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
 .CodeBlockContainer {
   @apply mb-7 relative;
 }
@@ -68,19 +24,19 @@
 }
 
 .CodeBlockContainer pre code {
-  @apply z-10 relative;
+  @apply z-elevated relative;
 }
 
 .LineHighlight {
-  @apply bg-gray-80 opacity-30 z-0;
+  @apply bg-gray-80 opacity-30 z-base;
 }
 
 .CodeBlockContainer button {
   @apply absolute top-2 right-2 cursor-pointer h-8 w-8 mb-0 flex items-center;
 }
 
 .CodeBlockContainer button::before {
-  @apply absolute top-2 right-2 z-10 transition-all duration-75 hover:opacity-40;
+  @apply absolute top-2 right-2 z-elevated transition-all duration-75 hover:opacity-40;
   content: url("/clipboard.svg");
 }
 
@@ -144,7 +100,7 @@
 
 /* Styles for deprecation notice in param */
 .DeprecatedContent {
-  @apply bg-orange-20 text-gray-90 px-2 py-1 rounded-md text-sm mb-2 flex items-center relative;
+  @apply bg-orange-10 text-gray-90 px-2 py-1 rounded-xl text-sm mb-2 flex items-center relative;
 }
 
 .DeprecatedContent i {

diff --git a/components/blocks/callout.module.css b/components/blocks/callout.module.css
@@ -1,5 +1,5 @@
 .Container {
-  @apply p-4 md:p-8 rounded-md mt-8 mb-12;
+  @apply p-4 md:p-8 rounded-xl mt-8 mb-12;
 }
 
 .Container p {

diff --git a/components/blocks/code.module.css b/components/blocks/code.module.css
@@ -13,19 +13,19 @@
 }
 
 .Pre code {
-  @apply z-10 relative;
+  @apply z-elevated relative;
 }
 
 .LineHighlight {
-  @apply bg-gray-80 opacity-30 z-0;
+  @apply bg-gray-80 opacity-30 z-base;
 }
 
 .Container button {
   @apply absolute top-2 right-2 cursor-pointer h-8 w-8 mb-0 flex items-center;
 }
 
 .Container button::before {
-  @apply absolute top-2 right-2 z-10 transition-all duration-75 hover:opacity-40;
+  @apply absolute top-2 right-2 z-elevated transition-all duration-75 hover:opacity-40;
   content: url("/clipboard.svg");
 }
 

diff --git a/components/blocks/componentSlider.module.css b/components/blocks/componentSlider.module.css
@@ -13,7 +13,7 @@
 
 /* Hover styles for cards. Need to be done here to prevent the card overflow */
 .Container :global(.slick-slide) > div {
-  @apply transition-all duration-75 z-10;
+  @apply transition-all duration-75 z-elevated;
 }
 
 .Container :global(.slick-slide) > div:hover {
@@ -45,12 +45,12 @@
 }
 
 .Tooltip {
-  @apply p-3 bg-gray-90 absolute rounded-md transition delay-100 ease-in-out opacity-0 w-full w-64 z-10;
+  @apply p-3 bg-gray-90 absolute rounded-md transition delay-100 ease-in-out opacity-0 w-full w-64 z-elevated;
   bottom: 100%;
 }
 
 .TooltipArrow {
-  @apply h-3 w-3 p-0 absolute opacity-0 -bottom-[2px] right-9 transition ease-in-out delay-100 bg-gray-90 z-10;
+  @apply h-3 w-3 p-0 absolute opacity-0 -bottom-[2px] right-9 transition ease-in-out delay-100 bg-gray-90 z-elevated;
 }
 
 .Open {

diff --git a/components/blocks/image.module.css b/components/blocks/image.module.css
@@ -31,7 +31,7 @@
 }
 
 .LightBox {
-  @apply fixed z-30 top-0 left-0 w-full h-full flex justify-center items-center overscroll-contain bg-gray-20;
+  @apply fixed z-header top-0 left-0 w-full h-full flex justify-center items-center overscroll-contain bg-gray-20;
 }
 
 :global(.dark) .LightBox {
@@ -48,7 +48,7 @@
 
 .CloseButton {
   font-family: "Material Icons";
-  @apply font-normal text-5xl absolute right-0 md:right-8 top-12 cursor-pointer bg-gray-20 z-20 text-gray-90 hover:shadow-none hover:opacity-60 mb-0 px-2 lg:p-4;
+  @apply font-normal text-5xl absolute right-0 md:right-8 top-12 cursor-pointer bg-gray-20 z-sidebar text-gray-90 hover:shadow-none hover:opacity-60 mb-0 px-2 lg:p-4;
 }
 
 :global(.dark) .CloseButton {

diff --git a/components/blocks/important.module.css b/components/blocks/important.module.css
@@ -3,5 +3,5 @@
 }
 
 :global(.dark) .Important {
-  background-color: #481d00;
+  @apply bg-orange-100/30;
 }
diff --git a/components/blocks/note.module.css b/components/blocks/note.module.css
@@ -3,5 +3,5 @@
 }
 
 :global(.dark) .Note {
-  background-color: #062633;
+  @apply bg-lightBlue-100/30;
 }
diff --git a/components/blocks/refCard.module.css b/components/blocks/refCard.module.css
@@ -1,5 +1,5 @@
 .Container {
-  @apply relative rounded-md border border-gray-30 text-base cursor-pointer transition-all duration-75 flex flex-col z-20;
+  @apply relative rounded-md border border-gray-30 text-base cursor-pointer transition-all duration-75 flex flex-col z-sidebar;
 }
 
 .Container:hover {

diff --git a/components/layouts/container.module.css b/components/layouts/container.module.css
@@ -6,6 +6,11 @@
   @apply col-span-full lg:col-start-2 lg:col-end-5;
 }
 
+.StickyContext {
+  /* Container for sticky version selector - must have height */
+  @apply relative;
+}
+
 .ArticleContainer {
   @apply relative;
 }

diff --git a/components/layouts/globalTemplate.js b/components/layouts/globalTemplate.js
@@ -4,7 +4,7 @@ import ChatSticky from "../navigation/chatSticky";
 
 import styles from "./globalTemplate.module.css";
 
-const Layout = ({ children }) => {
+const Layout = ({ children, versionProps }) => {
   const [isSticky, setIsSticky] = useState(false);
 
   const handleScroll = () => {
@@ -22,7 +22,7 @@ const Layout = ({ children }) => {
 
   return (
     <main id="root" className="dark:bg-gray-100">
-      <Header isSticky={isSticky} />
+      <Header isSticky={isSticky} versionProps={versionProps} />
       <div className={isSticky ? styles.stickyPageWrapper : undefined}>
         {children}
       </div>

diff --git a/components/navigation/chatSticky.module.css b/components/navigation/chatSticky.module.css
@@ -1,3 +1,3 @@
 .Container {
-  @apply fixed bottom-8 right-2 sm:right-8 z-30;
+  @apply fixed bottom-8 right-2 sm:right-8 z-header;
 }