From 171ca392d76bfe9fa06f7baed4507b452969d301 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Fri, 28 Mar 2025 21:51:18 +0800
Subject: [PATCH 1/4] New dir

---
 docs/src/app/(private)/experiments/{ => tabs}/tabs.module.css | 0
 docs/src/app/(private)/experiments/{ => tabs}/tabs.tsx        | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename docs/src/app/(private)/experiments/{ => tabs}/tabs.module.css (100%)
 rename docs/src/app/(private)/experiments/{ => tabs}/tabs.tsx (96%)

diff --git a/docs/src/app/(private)/experiments/tabs.module.css b/docs/src/app/(private)/experiments/tabs/tabs.module.css
similarity index 100%
rename from docs/src/app/(private)/experiments/tabs.module.css
rename to docs/src/app/(private)/experiments/tabs/tabs.module.css
diff --git a/docs/src/app/(private)/experiments/tabs.tsx b/docs/src/app/(private)/experiments/tabs/tabs.tsx
similarity index 96%
rename from docs/src/app/(private)/experiments/tabs.tsx
rename to docs/src/app/(private)/experiments/tabs/tabs.tsx
index de114b8cde..1abc0ca55d 100644
--- a/docs/src/app/(private)/experiments/tabs.tsx
+++ b/docs/src/app/(private)/experiments/tabs/tabs.tsx
@@ -5,8 +5,8 @@ import { Tabs } from '@base-ui-components/react/tabs';
 import {
   SettingsMetadata,
   useExperimentSettings,
-} from '../../../components/Experiments/SettingsPanel';
-import '../../../demo-theme.css';
+} from '../../../../components/Experiments/SettingsPanel';
+import '../../../../demo-theme.css';
 import classes from './tabs.module.css';
 
 export default function TabsExperiment() {

From aa892e5099f4d6a58ef2b5b8eb1e4cade29917a3 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Sat, 29 Mar 2025 00:03:26 +0800
Subject: [PATCH 2/4] Tabs motion examples

---
 .../app/(private)/experiments/tabs/_icons.tsx | 30 ++++++
 .../app/(private)/experiments/tabs/motion.tsx | 96 +++++++++++++++++++
 2 files changed, 126 insertions(+)
 create mode 100644 docs/src/app/(private)/experiments/tabs/_icons.tsx
 create mode 100644 docs/src/app/(private)/experiments/tabs/motion.tsx

diff --git a/docs/src/app/(private)/experiments/tabs/_icons.tsx b/docs/src/app/(private)/experiments/tabs/_icons.tsx
new file mode 100644
index 0000000000..0aa7450059
--- /dev/null
+++ b/docs/src/app/(private)/experiments/tabs/_icons.tsx
@@ -0,0 +1,30 @@
+'use client';
+import * as React from 'react';
+
+export default function Nothing() {
+  return <div>This is just a dummy file to hold icons</div>;
+}
+
+export function OverviewIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentcolor" {...props}>
+      <path d="M 6 4 C 4.895 4 4 4.895 4 6 L 4 12 C 4 13.105 4.895 14 6 14 L 12 14 C 13.105 14 14 13.105 14 12 L 14 6 C 14 4.895 13.105 4 12 4 L 6 4 z M 18 4 C 16.895 4 16 4.895 16 6 L 16 12 C 16 13.105 16.895 14 18 14 L 24 14 C 25.105 14 26 13.105 26 12 L 26 6 C 26 4.895 25.105 4 24 4 L 18 4 z M 9 6 C 10.657 6 12 7.343 12 9 C 12 10.657 10.657 12 9 12 C 7.343 12 6 10.657 6 9 C 6 7.343 7.343 6 9 6 z M 18 6 L 24 6 L 24 12 L 18 12 L 18 6 z M 6 16 C 4.895 16 4 16.895 4 18 L 4 24 C 4 25.105 4.895 26 6 26 L 12 26 C 13.105 26 14 25.105 14 24 L 14 18 C 14 16.895 13.105 16 12 16 L 6 16 z M 18 16 C 16.895 16 16 16.895 16 18 L 16 24 C 16 25.105 16.895 26 18 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 18 C 26 16.895 25.105 16 24 16 L 18 16 z M 21 17.5 L 24.5 21 L 21 24.5 L 17.5 21 L 21 17.5 z M 9 18 L 11.886719 23 L 6.1132812 23 L 9 18 z" />
+    </svg>
+  );
+}
+
+export function ProjectIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentcolor" {...props}>
+      <path d="M 14.984375 1.9863281 A 1.0001 1.0001 0 0 0 14 3 L 14 4 L 5 4 L 4 4 A 1.0001 1.0001 0 1 0 3.9804688 6 C 3.9348612 9.0608831 3.6893807 11.887023 3.1523438 14.142578 C 2.5565033 16.645108 1.6039585 18.395538 0.4453125 19.167969 A 1.0001 1.0001 0 0 0 1 21 L 4 21 C 4 22.105 4.895 23 6 23 L 11.787109 23 L 10.148438 26.042969 A 1.5 1.5 0 0 0 9 27.5 A 1.5 1.5 0 0 0 10.5 29 A 1.5 1.5 0 0 0 12 27.5 A 1.5 1.5 0 0 0 11.910156 26.992188 L 14.060547 23 L 15.939453 23 L 18.089844 26.992188 A 1.5 1.5 0 0 0 18 27.5 A 1.5 1.5 0 0 0 19.5 29 A 1.5 1.5 0 0 0 21 27.5 A 1.5 1.5 0 0 0 19.851562 26.042969 L 18.212891 23 L 24 23 C 25.105 23 26 22.105 26 21 L 26 6 A 1.0001 1.0001 0 1 0 26 4 L 25 4 L 16 4 L 16 3 A 1.0001 1.0001 0 0 0 14.984375 1.9863281 z M 5.9589844 6 L 14.832031 6 A 1.0001 1.0001 0 0 0 15.158203 6 L 23.958984 6 C 23.912194 9.0500505 23.687726 11.893974 23.152344 14.142578 C 22.583328 16.532444 21.674397 18.178754 20.585938 19 L 3.1523438 19 C 3.9976592 17.786874 4.6791735 16.365049 5.0976562 14.607422 C 5.6877248 12.129135 5.9137751 9.1554725 5.9589844 6 z" />
+    </svg>
+  );
+}
+
+export function PersonIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentcolor" {...props}>
+      <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M8,22.141 c1.167-3.5,4.667-2.134,5.25-4.03v-1.264c-0.262-0.141-1.013-1.109-1.092-1.865c-0.207-0.018-0.531-0.223-0.627-1.034 c-0.051-0.435,0.153-0.68,0.276-0.757c0,0-0.308-0.702-0.308-1.399C11.5,9.72,12.526,8,15,8c1.336,0,1.75,0.947,1.75,0.947 c1.194,0,1.75,1.309,1.75,2.844c0,0.765-0.308,1.399-0.308,1.399c0.124,0.077,0.328,0.322,0.277,0.757 c-0.096,0.811-0.42,1.016-0.627,1.034c-0.079,0.756-0.829,1.724-1.092,1.865v1.264c0.583,1.897,4.083,0.531,5.25,4.031 c0,0-2.618,2.859-7,2.859C10.593,25,8,22.141,8,22.141z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(private)/experiments/tabs/motion.tsx b/docs/src/app/(private)/experiments/tabs/motion.tsx
new file mode 100644
index 0000000000..75a9c8d3aa
--- /dev/null
+++ b/docs/src/app/(private)/experiments/tabs/motion.tsx
@@ -0,0 +1,96 @@
+'use client';
+import * as React from 'react';
+import { Tabs } from '@base-ui-components/react/tabs';
+import { AnimatePresence, motion } from 'motion/react';
+import styles from '../../../(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css';
+import { OverviewIcon, ProjectIcon, PersonIcon } from './_icons';
+
+const DURATION = 0.6; // seconds
+
+const MotionTabPanel = React.forwardRef(function MotionTabPanel(
+  props: Tabs.Panel.Props,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const { children, value, ...otherProps } = props;
+  return (
+    <Tabs.Panel
+      ref={forwardedRef}
+      key={value}
+      value={value}
+      keepMounted
+      // workaround tailwind v4 reset applying `display: none !important` on [hidden]
+      // it needs to remain visible while the exit animation is still running
+      hidden={undefined}
+      {...otherProps}
+      render={(renderProps, state) => {
+        const direction = state.tabActivationDirection === 'right' ? -1 : 1;
+        return (
+          <motion.div
+            {...renderProps}
+            initial={{
+              opacity: 0,
+              x: -100 * direction,
+            }}
+            animate={{
+              zIndex: 1,
+              opacity: 1,
+              x: 0,
+              transition: { duration: DURATION },
+            }}
+            exit={{
+              zIndex: 0,
+              opacity: 0,
+              x: 100 * direction,
+              transition: { duration: DURATION },
+            }}
+          />
+        );
+      }}
+    >
+      {children}
+    </Tabs.Panel>
+  );
+});
+
+export default function ExampleTabs() {
+  const [value, setValue] = React.useState('overview');
+  return (
+    <Tabs.Root className={styles.Tabs} value={value} onValueChange={setValue}>
+      <Tabs.List className={styles.List}>
+        <Tabs.Tab className={styles.Tab} value="overview">
+          Overview
+        </Tabs.Tab>
+        <Tabs.Tab className={styles.Tab} value="projects">
+          Projects
+        </Tabs.Tab>
+        <Tabs.Tab className={styles.Tab} value="account">
+          Account
+        </Tabs.Tab>
+        <Tabs.Indicator
+          className={styles.Indicator}
+          style={{ transitionProperty: 'none !important' }}
+        />
+      </Tabs.List>
+
+      <AnimatePresence mode="wait">
+        {value === 'overview' && (
+          <MotionTabPanel key="overview" value="overview" className={styles.Panel}>
+            <OverviewIcon className={styles.Icon} />
+          </MotionTabPanel>
+        )}
+
+        {value === 'projects' && (
+          <MotionTabPanel key="projects" value="projects" className={styles.Panel}>
+            <ProjectIcon className={styles.Icon} />
+          </MotionTabPanel>
+        )}
+
+        {value === 'account' && (
+          <MotionTabPanel key="account" value="account" className={styles.Panel}>
+            <PersonIcon className={styles.Icon} />
+          </MotionTabPanel>
+        )}
+      </AnimatePresence>
+    </Tabs.Root>
+  );
+}

From 93c3de32b1426839b8f45179f125a3fbaceb8544 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Sat, 29 Mar 2025 03:05:08 +0800
Subject: [PATCH 3/4] TS

---
 docs/src/app/(private)/experiments/tabs/motion.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(private)/experiments/tabs/motion.tsx b/docs/src/app/(private)/experiments/tabs/motion.tsx
index 75a9c8d3aa..43685a3d67 100644
--- a/docs/src/app/(private)/experiments/tabs/motion.tsx
+++ b/docs/src/app/(private)/experiments/tabs/motion.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Tabs } from '@base-ui-components/react/tabs';
-import { AnimatePresence, motion } from 'motion/react';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 import styles from '../../../(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css';
 import { OverviewIcon, ProjectIcon, PersonIcon } from './_icons';
 
@@ -26,7 +26,7 @@ const MotionTabPanel = React.forwardRef(function MotionTabPanel(
         const direction = state.tabActivationDirection === 'right' ? -1 : 1;
         return (
           <motion.div
-            {...renderProps}
+            {...(renderProps as HTMLMotionProps<'div'>)}
             initial={{
               opacity: 0,
               x: -100 * direction,

From 6692c292c2585175c14080a0c62afe562c1c22bb Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 1 Apr 2025 18:02:53 +0800
Subject: [PATCH 4/4] TabIndicator

---
 .../experiments/tabs/motion.module.css        |  7 +++
 .../app/(private)/experiments/tabs/motion.tsx | 57 +++++++++++++++----
 2 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 docs/src/app/(private)/experiments/tabs/motion.module.css

diff --git a/docs/src/app/(private)/experiments/tabs/motion.module.css b/docs/src/app/(private)/experiments/tabs/motion.module.css
new file mode 100644
index 0000000000..27cd646b50
--- /dev/null
+++ b/docs/src/app/(private)/experiments/tabs/motion.module.css
@@ -0,0 +1,7 @@
+.Indicator {
+  position: absolute;
+  z-index: -1;
+  inset: 4px 0 5px 0;
+  border-radius: 0.25rem;
+  background-color: var(--color-gray-100);
+}
diff --git a/docs/src/app/(private)/experiments/tabs/motion.tsx b/docs/src/app/(private)/experiments/tabs/motion.tsx
index 43685a3d67..b2ba3ec5fd 100644
--- a/docs/src/app/(private)/experiments/tabs/motion.tsx
+++ b/docs/src/app/(private)/experiments/tabs/motion.tsx
@@ -4,8 +4,9 @@ import { Tabs } from '@base-ui-components/react/tabs';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 import styles from '../../../(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css';
 import { OverviewIcon, ProjectIcon, PersonIcon } from './_icons';
+import motionStyles from './motion.module.css';
 
-const DURATION = 0.6; // seconds
+const DURATION = 1; // seconds
 
 const MotionTabPanel = React.forwardRef(function MotionTabPanel(
   props: Tabs.Panel.Props,
@@ -52,24 +53,58 @@ const MotionTabPanel = React.forwardRef(function MotionTabPanel(
   );
 });
 
+const MotionTab = React.forwardRef(function MotionTab(
+  props: Tabs.Tab.Props & {
+    selectedValue: Tabs.Tab.Props['value'];
+  },
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const { value, selectedValue, style, children, ...otherProps } = props;
+  return (
+    <Tabs.Tab
+      ref={forwardedRef}
+      value={value}
+      style={{
+        ...style,
+        position: 'relative',
+      }}
+      {...otherProps}
+    >
+      {children}
+      {value === selectedValue ? (
+        <Tabs.Indicator
+          className={motionStyles.Indicator}
+          render={
+            <motion.div
+              layoutId="indicator"
+              id="indicator"
+              initial={false}
+              animate={{ opacity: 1 }}
+              transition={{
+                layout: { duration: DURATION },
+              }}
+            />
+          }
+        />
+      ) : null}
+    </Tabs.Tab>
+  );
+});
+
 export default function ExampleTabs() {
   const [value, setValue] = React.useState('overview');
   return (
     <Tabs.Root className={styles.Tabs} value={value} onValueChange={setValue}>
       <Tabs.List className={styles.List}>
-        <Tabs.Tab className={styles.Tab} value="overview">
+        <MotionTab className={styles.Tab} value="overview" selectedValue={value}>
           Overview
-        </Tabs.Tab>
-        <Tabs.Tab className={styles.Tab} value="projects">
+        </MotionTab>
+        <MotionTab className={styles.Tab} value="projects" selectedValue={value}>
           Projects
-        </Tabs.Tab>
-        <Tabs.Tab className={styles.Tab} value="account">
+        </MotionTab>
+        <MotionTab className={styles.Tab} value="account" selectedValue={value}>
           Account
-        </Tabs.Tab>
-        <Tabs.Indicator
-          className={styles.Indicator}
-          style={{ transitionProperty: 'none !important' }}
-        />
+        </MotionTab>
       </Tabs.List>
 
       <AnimatePresence mode="wait">