diff --git a/.gitignore b/.gitignore
index a48dc934e1..af81c2c90b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,7 +14,8 @@
 /coverage
 /docs/.env.local
 /docs/export
-/docs/pages/playground/
+/docs/app/playground/*
+!/docs/app/playground/\[slug\]
 /docs/public/feed/
 /examples/**/.cache
 /test/bundling/fixtures/*/yarn.lock
diff --git a/docs/app/DocsProviders.tsx b/docs/app/DocsProviders.tsx
index 7caa4a4eff..39b504c7cb 100644
--- a/docs/app/DocsProviders.tsx
+++ b/docs/app/DocsProviders.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { DemoVariantSelectorProvider } from 'docs-base/src/components/demo/DemoVariantSelectorProvider';
 import { PackageManagerSnippetProvider } from 'docs-base/src/blocks/PackageManagerSnippet/PackageManagerSnippetProvider';
 
diff --git a/docs/app/experiments/collapsible-accordion.tsx b/docs/app/experiments/collapsible-accordion.tsx
index fa14e5ac60..65e531eb02 100644
--- a/docs/app/experiments/collapsible-accordion.tsx
+++ b/docs/app/experiments/collapsible-accordion.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const TRANSITION_DURATION = '350ms';
 
diff --git a/docs/app/experiments/collapsible-framer.tsx b/docs/app/experiments/collapsible-framer.tsx
index 92682ab303..3e53809494 100644
--- a/docs/app/experiments/collapsible-framer.tsx
+++ b/docs/app/experiments/collapsible-framer.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { motion } from 'framer-motion';
 
 export default function CollapsibleFramer() {
diff --git a/docs/app/experiments/collapsible-hidden-until-found.tsx b/docs/app/experiments/collapsible-hidden-until-found.tsx
index cfa9e0484f..46b3ce2953 100644
--- a/docs/app/experiments/collapsible-hidden-until-found.tsx
+++ b/docs/app/experiments/collapsible-hidden-until-found.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 
diff --git a/docs/app/experiments/collapsible.tsx b/docs/app/experiments/collapsible.tsx
index 55d3477a41..a1e2429a65 100644
--- a/docs/app/experiments/collapsible.tsx
+++ b/docs/app/experiments/collapsible.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 
diff --git a/docs/app/experiments/dialog.tsx b/docs/app/experiments/dialog.tsx
index c1dd9fe760..9d72f1bf8b 100644
--- a/docs/app/experiments/dialog.tsx
+++ b/docs/app/experiments/dialog.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 // eslint-disable-next-line no-restricted-imports
 import { useTransitionStatus } from '@base_ui/react/utils/useTransitionStatus';
 import { animated as springAnimated, useSpring, useSpringRef } from '@react-spring/web';
diff --git a/docs/app/experiments/menu-anchor-el.tsx b/docs/app/experiments/menu-anchor-el.tsx
index 883bd9a72a..bad4bdc474 100644
--- a/docs/app/experiments/menu-anchor-el.tsx
+++ b/docs/app/experiments/menu-anchor-el.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const [anchorEl, setAnchor] = React.useState<HTMLDivElement | null>(null);
diff --git a/docs/app/experiments/menu-anchor-ref.tsx b/docs/app/experiments/menu-anchor-ref.tsx
index e375b201de..68d67f7e8d 100644
--- a/docs/app/experiments/menu-anchor-ref.tsx
+++ b/docs/app/experiments/menu-anchor-ref.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const anchor = React.useRef<HTMLDivElement>(null);
diff --git a/docs/app/experiments/progress.tsx b/docs/app/experiments/progress.tsx
index 1db6f0dc53..230fb3e45e 100644
--- a/docs/app/experiments/progress.tsx
+++ b/docs/app/experiments/progress.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 const VAL1 = 33;
 
diff --git a/docs/app/experiments/slider-change-committed-lag.tsx b/docs/app/experiments/slider-change-committed-lag.tsx
index 8ced35a40a..673b39ad78 100644
--- a/docs/app/experiments/slider-change-committed-lag.tsx
+++ b/docs/app/experiments/slider-change-committed-lag.tsx
@@ -2,7 +2,7 @@
 // https://github.com/mui/material-ui/issues/41739
 // to cross check whether this issue would still occur in the new API
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {
diff --git a/docs/app/experiments/slider-marks.tsx b/docs/app/experiments/slider-marks.tsx
index 2026be9b07..04194347ca 100644
--- a/docs/app/experiments/slider-marks.tsx
+++ b/docs/app/experiments/slider-marks.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 const STOPS = [
   {
@@ -33,7 +32,7 @@ function getSliderThumbAriaValueText(value: number) {
 // for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { direction, values } = useSliderContext();
+  const { direction, values } = Slider.useSliderContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (
diff --git a/docs/app/experiments/slider-template.tsx b/docs/app/experiments/slider-template.tsx
index 33bee84cf1..7472d3a329 100644
--- a/docs/app/experiments/slider-template.tsx
+++ b/docs/app/experiments/slider-template.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {
diff --git a/docs/app/experiments/slider-tooltip.tsx b/docs/app/experiments/slider-tooltip.tsx
index d221b5c637..2d8b140855 100644
--- a/docs/app/experiments/slider-tooltip.tsx
+++ b/docs/app/experiments/slider-tooltip.tsx
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Slider } from '@base_ui/react/Slider';
+import { Tooltip } from '@base_ui/react/Tooltip';
 
 function useIsDarkMode() {
   const theme = useTheme();
diff --git a/docs/app/experiments/slider.tsx b/docs/app/experiments/slider.tsx
index 449930434d..3e8d29dc83 100644
--- a/docs/app/experiments/slider.tsx
+++ b/docs/app/experiments/slider.tsx
@@ -1,8 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function App() {
   const [val1, setVal1] = React.useState(50);
@@ -233,7 +232,7 @@ function Label(props: any) {
   const defaultId = React.useId();
   const labelId = idProp ?? defaultId;
 
-  const { subitems } = useSliderContext();
+  const { subitems } = Slider.useSliderContext();
 
   const htmlFor = Array.from(subitems.values())
     .reduce((acc, item) => {
diff --git a/docs/app/experiments/tabs.tsx b/docs/app/experiments/tabs.tsx
index c787815133..36c8271b53 100644
--- a/docs/app/experiments/tabs.tsx
+++ b/docs/app/experiments/tabs.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   const [v, sv] = React.useState<string | number | null>(0);
diff --git a/docs/app/experiments/tooltip.tsx b/docs/app/experiments/tooltip.tsx
index 7a6cf11d4d..40f010864c 100644
--- a/docs/app/experiments/tooltip.tsx
+++ b/docs/app/experiments/tooltip.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled, keyframes } from '@mui/system';
 import { motion, AnimatePresence } from 'framer-motion';
 
diff --git a/docs/app/not-found.tsx b/docs/app/not-found.tsx
index d676eb675c..fd8e66cc50 100644
--- a/docs/app/not-found.tsx
+++ b/docs/app/not-found.tsx
@@ -1,5 +1,18 @@
 import * as React from 'react';
 
+import { AppBar } from 'docs-base/src/components/AppBar';
+import { Navigation } from 'docs-base/src/components/Navigation';
+import routes from 'docs-base/data/pages';
+import classes from './(content)/styles.module.css';
+
 export default function NotFound() {
-  return <h1>Page not found</h1>;
+  return (
+    <React.Fragment>
+      <AppBar />
+      <Navigation routes={routes} />
+      <main className={classes.content}>
+        <h1>Page not found</h1>
+      </main>
+    </React.Fragment>
+  );
 }
diff --git a/docs/app/playground/[slug]/page.tsx b/docs/app/playground/[slug]/page.tsx
new file mode 100644
index 0000000000..f4be320ee8
--- /dev/null
+++ b/docs/app/playground/[slug]/page.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { type Dirent } from 'node:fs';
+import { basename, extname } from 'node:path';
+import { readdir } from 'node:fs/promises';
+
+interface Props {
+  params: {
+    slug: string;
+  };
+}
+
+const DUMMY_SLUG = '_';
+
+export default async function Page(props: Props) {
+  const {
+    params: { slug },
+  } = props;
+
+  if (slug === DUMMY_SLUG) {
+    notFound();
+  }
+
+  try {
+    const Playground = (await import(`../${slug}.tsx`)).default;
+    return <Playground />;
+  } catch (error) {
+    notFound();
+  }
+}
+
+export async function generateStaticParams() {
+  const routes = (await readdir('app/playground', { withFileTypes: true }))
+    .filter(
+      (entry: Dirent) => entry.name.endsWith('.tsx') && entry.name !== 'page.tsx' && entry.isFile(),
+    )
+    .map((entry: Dirent) => ({ slug: basename(entry.name, extname(entry.name)) }));
+
+  if (routes.length === 0) {
+    return [{ slug: DUMMY_SLUG }];
+  }
+
+  return routes;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = params;
+
+  return {
+    title: `${slug} - Playground`,
+  };
+}
diff --git a/docs/data/api/alert-dialog-backdrop.json b/docs/data/api/alert-dialog-backdrop.json
index e4c113258d..4a4cadeae5 100644
--- a/docs/data/api/alert-dialog-backdrop.json
+++ b/docs/data/api/alert-dialog-backdrop.json
@@ -6,7 +6,7 @@
   },
   "name": "AlertDialogBackdrop",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-close.json b/docs/data/api/alert-dialog-close.json
index ed0de8e5c0..04e289d03a 100644
--- a/docs/data/api/alert-dialog-close.json
+++ b/docs/data/api/alert-dialog-close.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogClose",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogClose = AlertDialog.Close;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogClose = AlertDialog.Close;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-description.json b/docs/data/api/alert-dialog-description.json
index 4004c33a33..ac3110306d 100644
--- a/docs/data/api/alert-dialog-description.json
+++ b/docs/data/api/alert-dialog-description.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogDescription",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogDescription = AlertDialog.Description;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogDescription = AlertDialog.Description;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-popup.json b/docs/data/api/alert-dialog-popup.json
index 4e06422802..902e31c784 100644
--- a/docs/data/api/alert-dialog-popup.json
+++ b/docs/data/api/alert-dialog-popup.json
@@ -7,7 +7,7 @@
   },
   "name": "AlertDialogPopup",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogPopup = AlertDialog.Popup;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogPopup = AlertDialog.Popup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-root.json b/docs/data/api/alert-dialog-root.json
index dddc81760d..8e3b7c6638 100644
--- a/docs/data/api/alert-dialog-root.json
+++ b/docs/data/api/alert-dialog-root.json
@@ -7,7 +7,7 @@
   },
   "name": "AlertDialogRoot",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogRoot = AlertDialog.Root;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogRoot = AlertDialog.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-title.json b/docs/data/api/alert-dialog-title.json
index 7d11d2f33c..7ad51049ee 100644
--- a/docs/data/api/alert-dialog-title.json
+++ b/docs/data/api/alert-dialog-title.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogTitle",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogTitle = AlertDialog.Title;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogTitle = AlertDialog.Title;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/alert-dialog-trigger.json b/docs/data/api/alert-dialog-trigger.json
index e785893339..9e32aadbae 100644
--- a/docs/data/api/alert-dialog-trigger.json
+++ b/docs/data/api/alert-dialog-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogTrigger",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogTrigger = AlertDialog.Trigger;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogTrigger = AlertDialog.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/checkbox-group-root.json b/docs/data/api/checkbox-group-root.json
index d7a9319d07..b030723dc8 100644
--- a/docs/data/api/checkbox-group-root.json
+++ b/docs/data/api/checkbox-group-root.json
@@ -11,7 +11,7 @@
   },
   "name": "CheckboxGroupRoot",
   "imports": [
-    "import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
+    "import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/checkbox-indicator.json b/docs/data/api/checkbox-indicator.json
index 14420a5b90..042044e63c 100644
--- a/docs/data/api/checkbox-indicator.json
+++ b/docs/data/api/checkbox-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "CheckboxIndicator",
   "imports": [
-    "import * as Checkbox from '@base_ui/react/Checkbox';\nconst CheckboxIndicator = Checkbox.Indicator;"
+    "import { Checkbox } from '@base_ui/react/Checkbox';\nconst CheckboxIndicator = Checkbox.Indicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/checkbox-root.json b/docs/data/api/checkbox-root.json
index 7e2138278c..a9dff6d981 100644
--- a/docs/data/api/checkbox-root.json
+++ b/docs/data/api/checkbox-root.json
@@ -23,7 +23,7 @@
   },
   "name": "CheckboxRoot",
   "imports": [
-    "import * as Checkbox from '@base_ui/react/Checkbox';\nconst CheckboxRoot = Checkbox.Root;"
+    "import { Checkbox } from '@base_ui/react/Checkbox';\nconst CheckboxRoot = Checkbox.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/collapsible-content.json b/docs/data/api/collapsible-content.json
index f756bd0bd8..e44ca41c5f 100644
--- a/docs/data/api/collapsible-content.json
+++ b/docs/data/api/collapsible-content.json
@@ -9,7 +9,7 @@
   },
   "name": "CollapsibleContent",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/collapsible-root.json b/docs/data/api/collapsible-root.json
index 4e1abe2c46..911399fe45 100644
--- a/docs/data/api/collapsible-root.json
+++ b/docs/data/api/collapsible-root.json
@@ -10,7 +10,7 @@
   },
   "name": "CollapsibleRoot",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/collapsible-trigger.json b/docs/data/api/collapsible-trigger.json
index 0aa32c8e70..784494b73a 100644
--- a/docs/data/api/collapsible-trigger.json
+++ b/docs/data/api/collapsible-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "CollapsibleTrigger",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/dialog-backdrop.json b/docs/data/api/dialog-backdrop.json
index 041757b2b5..9a48a406a5 100644
--- a/docs/data/api/dialog-backdrop.json
+++ b/docs/data/api/dialog-backdrop.json
@@ -6,7 +6,7 @@
   },
   "name": "DialogBackdrop",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogBackdrop = Dialog.Backdrop;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogBackdrop = Dialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/dialog-close.json b/docs/data/api/dialog-close.json
index f3c98f9ce0..1229ef4450 100644
--- a/docs/data/api/dialog-close.json
+++ b/docs/data/api/dialog-close.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogClose",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogClose = Dialog.Close;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogClose = Dialog.Close;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/dialog-description.json b/docs/data/api/dialog-description.json
index 8733b10c70..8d2a1cf80a 100644
--- a/docs/data/api/dialog-description.json
+++ b/docs/data/api/dialog-description.json
@@ -5,7 +5,7 @@
   },
   "name": "DialogDescription",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogDescription = Dialog.Description;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogDescription = Dialog.Description;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/dialog-popup.json b/docs/data/api/dialog-popup.json
index 3072b9ff3c..4bb1be663a 100644
--- a/docs/data/api/dialog-popup.json
+++ b/docs/data/api/dialog-popup.json
@@ -6,9 +6,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogPopup",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogPopup = Dialog.Popup;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogPopup = Dialog.Popup;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/dialog-root.json b/docs/data/api/dialog-root.json
index 20a26cb4fc..3e8b87e708 100644
--- a/docs/data/api/dialog-root.json
+++ b/docs/data/api/dialog-root.json
@@ -8,7 +8,7 @@
     "open": { "type": { "name": "bool" } }
   },
   "name": "DialogRoot",
-  "imports": ["import * as Dialog from '@base_ui/react/Dialog';\nconst DialogRoot = Dialog.Root;"],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogRoot = Dialog.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": null,
diff --git a/docs/data/api/dialog-title.json b/docs/data/api/dialog-title.json
index 5a9cfb7e43..a05f6bd49d 100644
--- a/docs/data/api/dialog-title.json
+++ b/docs/data/api/dialog-title.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogTitle",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogTitle = Dialog.Title;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogTitle = Dialog.Title;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/dialog-trigger.json b/docs/data/api/dialog-trigger.json
index 08ba0d1edb..10f8f51398 100644
--- a/docs/data/api/dialog-trigger.json
+++ b/docs/data/api/dialog-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "DialogTrigger",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogTrigger = Dialog.Trigger;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogTrigger = Dialog.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/field-control.json b/docs/data/api/field-control.json
index 7932e11fc8..fe0b98ff5d 100644
--- a/docs/data/api/field-control.json
+++ b/docs/data/api/field-control.json
@@ -5,9 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldControl",
-  "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldControl = Field.Control;"
-  ],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldControl = Field.Control;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/field-description.json b/docs/data/api/field-description.json
index 4654b11ac8..88400bc52b 100644
--- a/docs/data/api/field-description.json
+++ b/docs/data/api/field-description.json
@@ -5,7 +5,7 @@
   },
   "name": "FieldDescription",
   "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldDescription = Field.Description;"
+    "import { Field } from '@base_ui/react/Field';\nconst FieldDescription = Field.Description;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/field-error.json b/docs/data/api/field-error.json
index b52587e68b..b80033d4b2 100644
--- a/docs/data/api/field-error.json
+++ b/docs/data/api/field-error.json
@@ -11,7 +11,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldError",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldError = Field.Error;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldError = Field.Error;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/field-label.json b/docs/data/api/field-label.json
index feebb4e277..87db1074c1 100644
--- a/docs/data/api/field-label.json
+++ b/docs/data/api/field-label.json
@@ -4,7 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FieldLabel",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldLabel = Field.Label;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldLabel = Field.Label;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/field-root.json b/docs/data/api/field-root.json
index 946b4cc5bb..a9cdf945a9 100644
--- a/docs/data/api/field-root.json
+++ b/docs/data/api/field-root.json
@@ -13,7 +13,7 @@
     }
   },
   "name": "FieldRoot",
-  "imports": ["import * as Field from '@base_ui/react/Field';\nconst FieldRoot = Field.Root;"],
+  "imports": ["import { Field } from '@base_ui/react/Field';\nconst FieldRoot = Field.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/field-validity.json b/docs/data/api/field-validity.json
index 39bbdadb2d..3e7b3c8d9c 100644
--- a/docs/data/api/field-validity.json
+++ b/docs/data/api/field-validity.json
@@ -2,7 +2,7 @@
   "props": {},
   "name": "FieldValidity",
   "imports": [
-    "import * as Field from '@base_ui/react/Field';\nconst FieldValidity = Field.Validity;"
+    "import { Field } from '@base_ui/react/Field';\nconst FieldValidity = Field.Validity;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/fieldset-legend.json b/docs/data/api/fieldset-legend.json
index 08643190ff..abebed30df 100644
--- a/docs/data/api/fieldset-legend.json
+++ b/docs/data/api/fieldset-legend.json
@@ -5,7 +5,7 @@
   },
   "name": "FieldsetLegend",
   "imports": [
-    "import * as Fieldset from '@base_ui/react/Fieldset';\nconst FieldsetLegend = Fieldset.Legend;"
+    "import { Fieldset } from '@base_ui/react/Fieldset';\nconst FieldsetLegend = Fieldset.Legend;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/fieldset-root.json b/docs/data/api/fieldset-root.json
index cd34d7cfc4..7434ad43b9 100644
--- a/docs/data/api/fieldset-root.json
+++ b/docs/data/api/fieldset-root.json
@@ -5,7 +5,7 @@
   },
   "name": "FieldsetRoot",
   "imports": [
-    "import * as Fieldset from '@base_ui/react/Fieldset';\nconst FieldsetRoot = Fieldset.Root;"
+    "import { Fieldset } from '@base_ui/react/Fieldset';\nconst FieldsetRoot = Fieldset.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/form-root.json b/docs/data/api/form-root.json
index a7517e42e1..afcada8794 100644
--- a/docs/data/api/form-root.json
+++ b/docs/data/api/form-root.json
@@ -6,7 +6,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "FormRoot",
-  "imports": ["import * as Form from '@base_ui/react/Form';\nconst FormRoot = Form.Root;"],
+  "imports": ["import { Form } from '@base_ui/react/Form';\nconst FormRoot = Form.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-arrow.json b/docs/data/api/menu-arrow.json
index 026e242c14..39bf1b7732 100644
--- a/docs/data/api/menu-arrow.json
+++ b/docs/data/api/menu-arrow.json
@@ -5,7 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuArrow",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuArrow = Menu.Arrow;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuArrow = Menu.Arrow;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-checkbox-item-indicator.json b/docs/data/api/menu-checkbox-item-indicator.json
index aaf1adec7d..ae9716f80f 100644
--- a/docs/data/api/menu-checkbox-item-indicator.json
+++ b/docs/data/api/menu-checkbox-item-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "MenuCheckboxItemIndicator",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-checkbox-item.json b/docs/data/api/menu-checkbox-item.json
index c622f69014..71f0dc291c 100644
--- a/docs/data/api/menu-checkbox-item.json
+++ b/docs/data/api/menu-checkbox-item.json
@@ -8,7 +8,7 @@
   },
   "name": "MenuCheckboxItem",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuCheckboxItem = Menu.CheckboxItem;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuCheckboxItem = Menu.CheckboxItem;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-group-label.json b/docs/data/api/menu-group-label.json
index f25161ff1b..31f344174e 100644
--- a/docs/data/api/menu-group-label.json
+++ b/docs/data/api/menu-group-label.json
@@ -5,7 +5,7 @@
   },
   "name": "MenuGroupLabel",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuGroupLabel = Menu.GroupLabel;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuGroupLabel = Menu.GroupLabel;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-group.json b/docs/data/api/menu-group.json
index 5ef36cb045..a0c0074ede 100644
--- a/docs/data/api/menu-group.json
+++ b/docs/data/api/menu-group.json
@@ -5,7 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuGroup",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuGroup = Menu.Group;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuGroup = Menu.Group;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-item.json b/docs/data/api/menu-item.json
index 639cb25160..de2ce393b1 100644
--- a/docs/data/api/menu-item.json
+++ b/docs/data/api/menu-item.json
@@ -7,7 +7,7 @@
     "onClick": { "type": { "name": "func" } }
   },
   "name": "MenuItem",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuItem = Menu.Item;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuItem = Menu.Item;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-popup.json b/docs/data/api/menu-popup.json
index 49cc98f616..ad8b18e3be 100644
--- a/docs/data/api/menu-popup.json
+++ b/docs/data/api/menu-popup.json
@@ -5,7 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuPopup",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuPopup = Menu.Popup;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuPopup = Menu.Popup;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-positioner.json b/docs/data/api/menu-positioner.json
index 6356647f8d..c92652b6f5 100644
--- a/docs/data/api/menu-positioner.json
+++ b/docs/data/api/menu-positioner.json
@@ -50,7 +50,7 @@
   },
   "name": "MenuPositioner",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuPositioner = Menu.Positioner;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuPositioner = Menu.Positioner;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-radio-group.json b/docs/data/api/menu-radio-group.json
index 7c93dbc878..5e70dafa46 100644
--- a/docs/data/api/menu-radio-group.json
+++ b/docs/data/api/menu-radio-group.json
@@ -9,7 +9,7 @@
   },
   "name": "MenuRadioGroup",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioGroup = Menu.RadioGroup;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuRadioGroup = Menu.RadioGroup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-radio-item-indicator.json b/docs/data/api/menu-radio-item-indicator.json
index 9cd21ccb58..eb88d1bfd4 100644
--- a/docs/data/api/menu-radio-item-indicator.json
+++ b/docs/data/api/menu-radio-item-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "MenuRadioItemIndicator",
   "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioItemIndicator = Menu.RadioItemIndicator;"
+    "import { Menu } from '@base_ui/react/Menu';\nconst MenuRadioItemIndicator = Menu.RadioItemIndicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/menu-radio-item.json b/docs/data/api/menu-radio-item.json
index fc3ac0f340..04a1482ed0 100644
--- a/docs/data/api/menu-radio-item.json
+++ b/docs/data/api/menu-radio-item.json
@@ -8,9 +8,7 @@
     "onClick": { "type": { "name": "func" } }
   },
   "name": "MenuRadioItem",
-  "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuRadioItem = Menu.RadioItem;"
-  ],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuRadioItem = Menu.RadioItem;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-root.json b/docs/data/api/menu-root.json
index d79474fbb9..216ed45442 100644
--- a/docs/data/api/menu-root.json
+++ b/docs/data/api/menu-root.json
@@ -19,7 +19,7 @@
     }
   },
   "name": "MenuRoot",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuRoot = Menu.Root;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuRoot = Menu.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": null,
diff --git a/docs/data/api/menu-separator.json b/docs/data/api/menu-separator.json
index b61e1d1418..afb282bf21 100644
--- a/docs/data/api/menu-separator.json
+++ b/docs/data/api/menu-separator.json
@@ -5,9 +5,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuSeparator",
-  "imports": [
-    "import * as Menu from '@base_ui/react/Menu';\nconst MenuSeparator = Menu.Separator;"
-  ],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuSeparator = Menu.Separator;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/menu-trigger.json b/docs/data/api/menu-trigger.json
index 05e73a2a82..f8f82aa2e0 100644
--- a/docs/data/api/menu-trigger.json
+++ b/docs/data/api/menu-trigger.json
@@ -7,7 +7,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MenuTrigger",
-  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuTrigger = Menu.Trigger;"],
+  "imports": ["import { Menu } from '@base_ui/react/Menu';\nconst MenuTrigger = Menu.Trigger;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/number-field-decrement.json b/docs/data/api/number-field-decrement.json
index cd1e3cea37..4a622144a6 100644
--- a/docs/data/api/number-field-decrement.json
+++ b/docs/data/api/number-field-decrement.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldDecrement",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldDecrement = NumberField.Decrement;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldDecrement = NumberField.Decrement;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-group.json b/docs/data/api/number-field-group.json
index fc0aa6bafd..c5538cf2aa 100644
--- a/docs/data/api/number-field-group.json
+++ b/docs/data/api/number-field-group.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldGroup",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldGroup = NumberField.Group;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldGroup = NumberField.Group;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-increment.json b/docs/data/api/number-field-increment.json
index ccf741caea..b895d9a1ea 100644
--- a/docs/data/api/number-field-increment.json
+++ b/docs/data/api/number-field-increment.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldIncrement",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldIncrement = NumberField.Increment;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldIncrement = NumberField.Increment;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-input.json b/docs/data/api/number-field-input.json
index e2252d7710..5131ab443d 100644
--- a/docs/data/api/number-field-input.json
+++ b/docs/data/api/number-field-input.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldInput",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldInput = NumberField.Input;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldInput = NumberField.Input;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-root.json b/docs/data/api/number-field-root.json
index 5b3e34aca7..eb10206299 100644
--- a/docs/data/api/number-field-root.json
+++ b/docs/data/api/number-field-root.json
@@ -33,7 +33,7 @@
   },
   "name": "NumberFieldRoot",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldRoot = NumberField.Root;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldRoot = NumberField.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-scrub-area-cursor.json b/docs/data/api/number-field-scrub-area-cursor.json
index 095efebcb8..006077f922 100644
--- a/docs/data/api/number-field-scrub-area-cursor.json
+++ b/docs/data/api/number-field-scrub-area-cursor.json
@@ -5,7 +5,7 @@
   },
   "name": "NumberFieldScrubAreaCursor",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldScrubAreaCursor = NumberField.ScrubAreaCursor;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldScrubAreaCursor = NumberField.ScrubAreaCursor;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/number-field-scrub-area.json b/docs/data/api/number-field-scrub-area.json
index f4c83c1085..e328020db8 100644
--- a/docs/data/api/number-field-scrub-area.json
+++ b/docs/data/api/number-field-scrub-area.json
@@ -11,7 +11,7 @@
   },
   "name": "NumberFieldScrubArea",
   "imports": [
-    "import * as NumberField from '@base_ui/react/NumberField';\nconst NumberFieldScrubArea = NumberField.ScrubArea;"
+    "import { NumberField } from '@base_ui/react/NumberField';\nconst NumberFieldScrubArea = NumberField.ScrubArea;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-arrow.json b/docs/data/api/popover-arrow.json
index 278c8cfd65..3e9eb76f28 100644
--- a/docs/data/api/popover-arrow.json
+++ b/docs/data/api/popover-arrow.json
@@ -6,7 +6,7 @@
   },
   "name": "PopoverArrow",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverArrow = Popover.Arrow;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverArrow = Popover.Arrow;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-backdrop.json b/docs/data/api/popover-backdrop.json
index c2c9ea7605..62b24c08c9 100644
--- a/docs/data/api/popover-backdrop.json
+++ b/docs/data/api/popover-backdrop.json
@@ -10,7 +10,7 @@
   },
   "name": "PopoverBackdrop",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverBackdrop = Popover.Backdrop;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverBackdrop = Popover.Backdrop;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-close.json b/docs/data/api/popover-close.json
index 31957848c9..cc6e27f185 100644
--- a/docs/data/api/popover-close.json
+++ b/docs/data/api/popover-close.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverClose",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverClose = Popover.Close;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverClose = Popover.Close;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-description.json b/docs/data/api/popover-description.json
index b3eeb77f99..6fdaf51d51 100644
--- a/docs/data/api/popover-description.json
+++ b/docs/data/api/popover-description.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverDescription",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverDescription = Popover.Description;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverDescription = Popover.Description;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-popup.json b/docs/data/api/popover-popup.json
index 06a36805b0..7a5894df8e 100644
--- a/docs/data/api/popover-popup.json
+++ b/docs/data/api/popover-popup.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverPopup",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverPopup = Popover.Popup;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverPopup = Popover.Popup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-positioner.json b/docs/data/api/popover-positioner.json
index adc5433259..dc1d42a20d 100644
--- a/docs/data/api/popover-positioner.json
+++ b/docs/data/api/popover-positioner.json
@@ -50,7 +50,7 @@
   },
   "name": "PopoverPositioner",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverPositioner = Popover.Positioner;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverPositioner = Popover.Positioner;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-root.json b/docs/data/api/popover-root.json
index 29da12e967..a18b9808e1 100644
--- a/docs/data/api/popover-root.json
+++ b/docs/data/api/popover-root.json
@@ -14,7 +14,7 @@
   },
   "name": "PopoverRoot",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverRoot = Popover.Root;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverRoot = Popover.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-title.json b/docs/data/api/popover-title.json
index 239fcf2910..b4661b4faf 100644
--- a/docs/data/api/popover-title.json
+++ b/docs/data/api/popover-title.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverTitle",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverTitle = Popover.Title;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverTitle = Popover.Title;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/popover-trigger.json b/docs/data/api/popover-trigger.json
index cd6204789f..b4b5fb84c1 100644
--- a/docs/data/api/popover-trigger.json
+++ b/docs/data/api/popover-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "PopoverTrigger",
   "imports": [
-    "import * as Popover from '@base_ui/react/Popover';\nconst PopoverTrigger = Popover.Trigger;"
+    "import { Popover } from '@base_ui/react/Popover';\nconst PopoverTrigger = Popover.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-arrow.json b/docs/data/api/preview-card-arrow.json
index a37473e607..bd8d29a514 100644
--- a/docs/data/api/preview-card-arrow.json
+++ b/docs/data/api/preview-card-arrow.json
@@ -6,7 +6,7 @@
   },
   "name": "PreviewCardArrow",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardArrow = PreviewCard.Arrow;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardArrow = PreviewCard.Arrow;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-backdrop.json b/docs/data/api/preview-card-backdrop.json
index ef40f420f1..131edeaef7 100644
--- a/docs/data/api/preview-card-backdrop.json
+++ b/docs/data/api/preview-card-backdrop.json
@@ -7,7 +7,7 @@
   },
   "name": "PreviewCardBackdrop",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardBackdrop = PreviewCard.Backdrop;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardBackdrop = PreviewCard.Backdrop;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-popup.json b/docs/data/api/preview-card-popup.json
index 3d1b7e10a0..18778886b6 100644
--- a/docs/data/api/preview-card-popup.json
+++ b/docs/data/api/preview-card-popup.json
@@ -5,7 +5,7 @@
   },
   "name": "PreviewCardPopup",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardPopup = PreviewCard.Popup;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardPopup = PreviewCard.Popup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-positioner.json b/docs/data/api/preview-card-positioner.json
index ae28e1f9c6..bf14a1c1ea 100644
--- a/docs/data/api/preview-card-positioner.json
+++ b/docs/data/api/preview-card-positioner.json
@@ -50,7 +50,7 @@
   },
   "name": "PreviewCardPositioner",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardPositioner = PreviewCard.Positioner;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardPositioner = PreviewCard.Positioner;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-root.json b/docs/data/api/preview-card-root.json
index 02a5916f07..df36fdd356 100644
--- a/docs/data/api/preview-card-root.json
+++ b/docs/data/api/preview-card-root.json
@@ -13,7 +13,7 @@
   },
   "name": "PreviewCardRoot",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardRoot = PreviewCard.Root;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardRoot = PreviewCard.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/preview-card-trigger.json b/docs/data/api/preview-card-trigger.json
index 4fa0b2fa94..c6052f1b78 100644
--- a/docs/data/api/preview-card-trigger.json
+++ b/docs/data/api/preview-card-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "PreviewCardTrigger",
   "imports": [
-    "import * as PreviewCard from '@base_ui/react/PreviewCard';\nconst PreviewCardTrigger = PreviewCard.Trigger;"
+    "import { PreviewCard } from '@base_ui/react/PreviewCard';\nconst PreviewCardTrigger = PreviewCard.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/progress-indicator.json b/docs/data/api/progress-indicator.json
index 533523f185..8e5bbc7cdb 100644
--- a/docs/data/api/progress-indicator.json
+++ b/docs/data/api/progress-indicator.json
@@ -5,7 +5,7 @@
   },
   "name": "ProgressIndicator",
   "imports": [
-    "import * as Progress from '@base_ui/react/Progress';\nconst ProgressIndicator = Progress.Indicator;"
+    "import { Progress } from '@base_ui/react/Progress';\nconst ProgressIndicator = Progress.Indicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/progress-root.json b/docs/data/api/progress-root.json
index 125c799f7f..f1bac0daeb 100644
--- a/docs/data/api/progress-root.json
+++ b/docs/data/api/progress-root.json
@@ -29,7 +29,7 @@
   },
   "name": "ProgressRoot",
   "imports": [
-    "import * as Progress from '@base_ui/react/Progress';\nconst ProgressRoot = Progress.Root;"
+    "import { Progress } from '@base_ui/react/Progress';\nconst ProgressRoot = Progress.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/progress-track.json b/docs/data/api/progress-track.json
index 22ed962223..fb0b9370b6 100644
--- a/docs/data/api/progress-track.json
+++ b/docs/data/api/progress-track.json
@@ -5,7 +5,7 @@
   },
   "name": "ProgressTrack",
   "imports": [
-    "import * as Progress from '@base_ui/react/Progress';\nconst ProgressTrack = Progress.Track;"
+    "import { Progress } from '@base_ui/react/Progress';\nconst ProgressTrack = Progress.Track;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/radio-group-root.json b/docs/data/api/radio-group-root.json
index c18ad3f6c6..064787ec88 100644
--- a/docs/data/api/radio-group-root.json
+++ b/docs/data/api/radio-group-root.json
@@ -12,7 +12,7 @@
   },
   "name": "RadioGroupRoot",
   "imports": [
-    "import * as RadioGroup from '@base_ui/react/RadioGroup';\nconst RadioGroupRoot = RadioGroup.Root;"
+    "import { RadioGroup } from '@base_ui/react/RadioGroup';\nconst RadioGroupRoot = RadioGroup.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/radio-indicator.json b/docs/data/api/radio-indicator.json
index 871ffdf1e1..2ddde1f260 100644
--- a/docs/data/api/radio-indicator.json
+++ b/docs/data/api/radio-indicator.json
@@ -6,7 +6,7 @@
   },
   "name": "RadioIndicator",
   "imports": [
-    "import * as Radio from '@base_ui/react/Radio';\nconst RadioIndicator = Radio.Indicator;"
+    "import { Radio } from '@base_ui/react/Radio';\nconst RadioIndicator = Radio.Indicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/radio-root.json b/docs/data/api/radio-root.json
index 277bbc8074..342dc2694b 100644
--- a/docs/data/api/radio-root.json
+++ b/docs/data/api/radio-root.json
@@ -8,7 +8,7 @@
     "required": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "RadioRoot",
-  "imports": ["import * as Radio from '@base_ui/react/Radio';\nconst RadioRoot = Radio.Root;"],
+  "imports": ["import { Radio } from '@base_ui/react/Radio';\nconst RadioRoot = Radio.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/separator-root.json b/docs/data/api/separator-root.json
index 3ecf0bed9f..ec0c91e377 100644
--- a/docs/data/api/separator-root.json
+++ b/docs/data/api/separator-root.json
@@ -5,7 +5,7 @@
   },
   "name": "SeparatorRoot",
   "imports": [
-    "import * as Separator from '@base_ui/react/Separator';\nconst SeparatorRoot = Separator.Root;"
+    "import { Separator } from '@base_ui/react/Separator';\nconst SeparatorRoot = Separator.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/slider-control.json b/docs/data/api/slider-control.json
index a5a029fd21..d48aef56c0 100644
--- a/docs/data/api/slider-control.json
+++ b/docs/data/api/slider-control.json
@@ -5,7 +5,7 @@
   },
   "name": "SliderControl",
   "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderControl = Slider.Control;"
+    "import { Slider } from '@base_ui/react/Slider';\nconst SliderControl = Slider.Control;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/slider-indicator.json b/docs/data/api/slider-indicator.json
index f56dec0339..f84c3ee221 100644
--- a/docs/data/api/slider-indicator.json
+++ b/docs/data/api/slider-indicator.json
@@ -5,7 +5,7 @@
   },
   "name": "SliderIndicator",
   "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderIndicator = Slider.Indicator;"
+    "import { Slider } from '@base_ui/react/Slider';\nconst SliderIndicator = Slider.Indicator;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/slider-output.json b/docs/data/api/slider-output.json
index 674878e398..63690fe610 100644
--- a/docs/data/api/slider-output.json
+++ b/docs/data/api/slider-output.json
@@ -5,7 +5,7 @@
   },
   "name": "SliderOutput",
   "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderOutput = Slider.Output;"
+    "import { Slider } from '@base_ui/react/Slider';\nconst SliderOutput = Slider.Output;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/slider-root.json b/docs/data/api/slider-root.json
index 6c83045dcb..9bf64ced01 100644
--- a/docs/data/api/slider-root.json
+++ b/docs/data/api/slider-root.json
@@ -42,7 +42,7 @@
     }
   },
   "name": "SliderRoot",
-  "imports": ["import * as Slider from '@base_ui/react/Slider';\nconst SliderRoot = Slider.Root;"],
+  "imports": ["import { Slider } from '@base_ui/react/Slider';\nconst SliderRoot = Slider.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/slider-thumb.json b/docs/data/api/slider-thumb.json
index 17027ffd04..c0af6817d8 100644
--- a/docs/data/api/slider-thumb.json
+++ b/docs/data/api/slider-thumb.json
@@ -17,9 +17,7 @@
     "render": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;node" } }
   },
   "name": "SliderThumb",
-  "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderThumb = Slider.Thumb;"
-  ],
+  "imports": ["import { Slider } from '@base_ui/react/Slider';\nconst SliderThumb = Slider.Thumb;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/slider-track.json b/docs/data/api/slider-track.json
index e226d779a8..eb2d844414 100644
--- a/docs/data/api/slider-track.json
+++ b/docs/data/api/slider-track.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "SliderTrack",
-  "imports": [
-    "import * as Slider from '@base_ui/react/Slider';\nconst SliderTrack = Slider.Track;"
-  ],
+  "imports": ["import { Slider } from '@base_ui/react/Slider';\nconst SliderTrack = Slider.Track;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/switch-root.json b/docs/data/api/switch-root.json
index ab1c15cd36..125ef04119 100644
--- a/docs/data/api/switch-root.json
+++ b/docs/data/api/switch-root.json
@@ -18,7 +18,7 @@
     "required": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "SwitchRoot",
-  "imports": ["import * as Switch from '@base_ui/react/Switch';\nconst SwitchRoot = Switch.Root;"],
+  "imports": ["import { Switch } from '@base_ui/react/Switch';\nconst SwitchRoot = Switch.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/switch-thumb.json b/docs/data/api/switch-thumb.json
index 7da6d60ff7..a64466e39d 100644
--- a/docs/data/api/switch-thumb.json
+++ b/docs/data/api/switch-thumb.json
@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "SwitchThumb",
-  "imports": [
-    "import * as Switch from '@base_ui/react/Switch';\nconst SwitchThumb = Switch.Thumb;"
-  ],
+  "imports": ["import { Switch } from '@base_ui/react/Switch';\nconst SwitchThumb = Switch.Thumb;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tab-indicator.json b/docs/data/api/tab-indicator.json
index e6661a7748..54f4e04e13 100644
--- a/docs/data/api/tab-indicator.json
+++ b/docs/data/api/tab-indicator.json
@@ -5,7 +5,7 @@
     "renderBeforeHydration": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "TabIndicator",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabIndicator = Tabs.Indicator;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst TabIndicator = Tabs.Indicator;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tab-panel.json b/docs/data/api/tab-panel.json
index dc09c16d64..6221e09bd0 100644
--- a/docs/data/api/tab-panel.json
+++ b/docs/data/api/tab-panel.json
@@ -6,7 +6,7 @@
     "value": { "type": { "name": "any" } }
   },
   "name": "TabPanel",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabPanel = Tabs.Panel;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst TabPanel = Tabs.Panel;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tab.json b/docs/data/api/tab.json
index 02c7d764cb..9fbe333f58 100644
--- a/docs/data/api/tab.json
+++ b/docs/data/api/tab.json
@@ -5,7 +5,7 @@
     "value": { "type": { "name": "any" } }
   },
   "name": "Tab",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst Tab = Tabs.Tab;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst Tab = Tabs.Tab;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tabs-list.json b/docs/data/api/tabs-list.json
index c6f0fd0e78..c9d641eaeb 100644
--- a/docs/data/api/tabs-list.json
+++ b/docs/data/api/tabs-list.json
@@ -6,7 +6,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "TabsList",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabsList = Tabs.List;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst TabsList = Tabs.List;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tabs-root.json b/docs/data/api/tabs-root.json
index 1560c4cc23..4be24aeb81 100644
--- a/docs/data/api/tabs-root.json
+++ b/docs/data/api/tabs-root.json
@@ -15,7 +15,7 @@
     "value": { "type": { "name": "any" } }
   },
   "name": "TabsRoot",
-  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabsRoot = Tabs.Root;"],
+  "imports": ["import { Tabs } from '@base_ui/react/Tabs';\nconst TabsRoot = Tabs.Root;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,
diff --git a/docs/data/api/tooltip-arrow.json b/docs/data/api/tooltip-arrow.json
index b0c2e7756b..25368d286a 100644
--- a/docs/data/api/tooltip-arrow.json
+++ b/docs/data/api/tooltip-arrow.json
@@ -6,7 +6,7 @@
   },
   "name": "TooltipArrow",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipArrow = Tooltip.Arrow;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipArrow = Tooltip.Arrow;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-popup.json b/docs/data/api/tooltip-popup.json
index d9fb393ef9..7cba917a82 100644
--- a/docs/data/api/tooltip-popup.json
+++ b/docs/data/api/tooltip-popup.json
@@ -5,7 +5,7 @@
   },
   "name": "TooltipPopup",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipPopup = Tooltip.Popup;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipPopup = Tooltip.Popup;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-positioner.json b/docs/data/api/tooltip-positioner.json
index 3d29c4807b..23ca83cce3 100644
--- a/docs/data/api/tooltip-positioner.json
+++ b/docs/data/api/tooltip-positioner.json
@@ -50,7 +50,7 @@
   },
   "name": "TooltipPositioner",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipPositioner = Tooltip.Positioner;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipPositioner = Tooltip.Positioner;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-provider.json b/docs/data/api/tooltip-provider.json
index aecb4bf44b..3454a0ef25 100644
--- a/docs/data/api/tooltip-provider.json
+++ b/docs/data/api/tooltip-provider.json
@@ -6,7 +6,7 @@
   },
   "name": "TooltipProvider",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipProvider = Tooltip.Provider;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipProvider = Tooltip.Provider;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-root.json b/docs/data/api/tooltip-root.json
index 268cce71d0..fb548b9ca8 100644
--- a/docs/data/api/tooltip-root.json
+++ b/docs/data/api/tooltip-root.json
@@ -21,7 +21,7 @@
   },
   "name": "TooltipRoot",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipRoot = Tooltip.Root;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipRoot = Tooltip.Root;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/api/tooltip-trigger.json b/docs/data/api/tooltip-trigger.json
index d7727ec84b..e9b46eea5e 100644
--- a/docs/data/api/tooltip-trigger.json
+++ b/docs/data/api/tooltip-trigger.json
@@ -5,7 +5,7 @@
   },
   "name": "TooltipTrigger",
   "imports": [
-    "import * as Tooltip from '@base_ui/react/Tooltip';\nconst TooltipTrigger = Tooltip.Trigger;"
+    "import { Tooltip } from '@base_ui/react/Tooltip';\nconst TooltipTrigger = Tooltip.Trigger;"
   ],
   "classes": [],
   "spread": true,
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js
index dfece4502d..73a50d374c 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import classes from './styles.module.css';
 
 export default function AlertDialogIntroduction() {
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx
index dfece4502d..73a50d374c 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import classes from './styles.module.css';
 
 export default function AlertDialogIntroduction() {
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js
index d61c8a6af0..72336480b6 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function AlertDialogIntroduction() {
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx b/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx
index d61c8a6af0..72336480b6 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function AlertDialogIntroduction() {
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
index 282a7bada9..a01762d0d8 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 
 export default function UnstyledDialogIntroduction() {
   return (
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx
index c667df7e4f..17c58e16a1 100644
--- a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 
 export default function UnstyledDialogIntroduction() {
   return (
diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
index e1a4044c40..321e5e713a 100644
--- a/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
+++ b/docs/data/components/alert-dialog/AlertDialogWithTransitions.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseAlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog as BaseAlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function AlertDialogWithTransitions() {
diff --git a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
index e1a4044c40..321e5e713a 100644
--- a/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
+++ b/docs/data/components/alert-dialog/AlertDialogWithTransitions.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseAlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog as BaseAlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function AlertDialogWithTransitions() {
diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.js b/docs/data/components/alert-dialog/NestedAlertDialogs.js
index 3e54627ca1..4fc25e829f 100644
--- a/docs/data/components/alert-dialog/NestedAlertDialogs.js
+++ b/docs/data/components/alert-dialog/NestedAlertDialogs.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseAlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog as BaseAlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function NestedAlertDialogs() {
diff --git a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
index 3e54627ca1..4fc25e829f 100644
--- a/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
+++ b/docs/data/components/alert-dialog/NestedAlertDialogs.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseAlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog as BaseAlertDialog } from '@base_ui/react/AlertDialog';
 import { styled } from '@mui/system';
 
 export default function NestedAlertDialogs() {
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
index 7a8dff8d43..c98646c9e6 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 export default function UnstyledCheckboxIndeterminateGroup() {
   return (
@@ -100,7 +100,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -112,7 +112,7 @@ function Styles() {
         color: ${grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -131,7 +131,7 @@ function Styles() {
           outline-offset: 2px;
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
index ad487a0379..6354c14fd3 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 export default function UnstyledCheckboxIndeterminateGroup() {
   return (
@@ -100,7 +100,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -112,7 +112,7 @@ function Styles() {
         color: ${grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -131,7 +131,7 @@ function Styles() {
           outline-offset: 2px;
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
index 22affdf91d..e9a4e28e44 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 export default function UnstyledCheckboxIndeterminateGroup() {
   return (
@@ -98,7 +98,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -132,8 +132,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
index d3e65b1c75..3cf31369e5 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 export default function UnstyledCheckboxIndeterminateGroup() {
   return (
@@ -98,7 +98,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -132,8 +132,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
index f058738f57..2dd01a12d6 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -2,9 +2,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -104,7 +104,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+          'h-full inline-block invisible data-[checked]:visible text-gray-100',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
index 5c06154618..a0a666edf4 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 
 function classNames(...classes: Array<string | undefined | null | false>) {
   return classes.filter(Boolean).join(' ');
@@ -99,7 +99,7 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.Indicator.Props
         ref={ref}
         className={(state) =>
           classNames(
-            'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+            'h-full inline-block invisible data-[checked]:visible text-gray-100',
             typeof props.className === 'function'
               ? props.className(state)
               : props.className,
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
index ffe0f68836..9201619d6d 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 const colors = ['red', 'green', 'blue'];
@@ -89,7 +89,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -141,8 +141,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
index 2a212b9e98..649d3e5d8f 100644
--- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
+++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Field from '@base_ui/react/Field';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 const colors = ['red', 'green', 'blue'];
@@ -89,7 +89,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -143,8 +143,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox-group/checkbox-group.mdx b/docs/data/components/checkbox-group/checkbox-group.mdx
index e113cb30c7..851d14b84a 100644
--- a/docs/data/components/checkbox-group/checkbox-group.mdx
+++ b/docs/data/components/checkbox-group/checkbox-group.mdx
@@ -39,7 +39,7 @@ Checkbox Group is composed of a `Root` component and `Checkbox` components:
 `Field` components are used to label the Checkbox Group and individual Checkboxes:
 
 ```jsx
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 ```
 
 ```tsx
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
index 167666851f..edb83d1019 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 export default function UnstyledCheckboxIndeterminate() {
   return (
@@ -52,8 +52,8 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state='checked'],
-    &[data-state='mixed'] {
+    &[data-checked],
+    &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -84,8 +84,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
index 2a41d48536..07c87a75c6 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 export default function UnstyledCheckboxIndeterminate() {
   return (
@@ -52,8 +52,8 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state='checked'],
-    &[data-state='mixed'] {
+    &[data-checked],
+    &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -86,8 +86,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
index d80db2e23b..7415e06370 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 const colors = ['Red', 'Green', 'Blue'];
 
@@ -101,7 +101,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -153,8 +153,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
index 4f8cb9e500..3c60042b8a 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 const colors = ['Red', 'Green', 'Blue'];
 
@@ -101,7 +101,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -155,8 +155,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   visibility: hidden;
   color: ${grey[100]};
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
index 1b5d63a53f..a5b0de642d 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledCheckboxIntroduction() {
@@ -92,7 +92,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -104,7 +104,7 @@ function Styles() {
         color: ${isDarkMode ? grey[900] : grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -118,7 +118,7 @@ function Styles() {
           border-color: ${grey[500]};
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
index 130758f8f7..1605c4e7cc 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 
 export default function UnstyledCheckboxIntroduction() {
@@ -92,7 +92,7 @@ function Styles() {
         outline-offset: 2px;
       }
 
-      .Checkbox[data-state="checked"] {
+      .Checkbox[data-checked] {
         border-color: ${grey[800]};
         background: ${grey[800]};
       }
@@ -104,7 +104,7 @@ function Styles() {
         color: ${isDarkMode ? grey[900] : grey[100]};
       }
 
-      .Checkbox-indicator[data-state="checked"] {
+      .Checkbox-indicator[data-checked] {
         visibility: visible;
       }
 
@@ -118,7 +118,7 @@ function Styles() {
           border-color: ${grey[500]};
         }
 
-        .Checkbox[data-state="checked"] {
+        .Checkbox[data-checked] {
           border-color: ${grey[300]};
           background: ${grey[300]};
         }
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
index 517b2c2625..b4e424d547 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 export default function UnstyledSwitchIntroduction() {
   return (
@@ -66,7 +66,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -100,8 +100,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
index f3990ce3c5..155601a9fb 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 
 export default function UnstyledSwitchIntroduction() {
   return (
@@ -66,7 +66,7 @@ const Checkbox = styled(BaseCheckbox.Root)(
       outline-offset: 2px;
     }
 
-    &[data-state="checked"], &[data-state="mixed"] {
+    &[data-checked], &[data-indeterminate] {
       border-color: transparent;
       background: ${blue[600]};
     }
@@ -100,8 +100,8 @@ const Indicator = styled(BaseCheckbox.Indicator)`
   display: inline-block;
   visibility: hidden;
 
-  &[data-state='checked'],
-  &[data-state='mixed'] {
+  &[data-checked],
+  &[data-indeterminate] {
     visibility: visible;
   }
 `;
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
index d85f45e48e..42197c24eb 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 
 function classNames(...classes) {
@@ -76,7 +76,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
       ref={ref}
       className={(state) =>
         classNames(
-          'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+          'h-full inline-block invisible data-[checked]:visible text-gray-100',
           typeof props.className === 'function'
             ? props.className(state)
             : props.className,
diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
index 43d903023b..9175a5bf8c 100644
--- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
+++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseCheckbox from '@base_ui/react/Checkbox';
+import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox';
 import { useTheme } from '@mui/system';
 
 function classNames(...classes: Array<string | undefined | null | false>) {
@@ -71,7 +71,7 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.Indicator.Props
         ref={ref}
         className={(state) =>
           classNames(
-            'h-full inline-block invisible data-[state=checked]:visible text-gray-100',
+            'h-full inline-block invisible data-[checked]:visible text-gray-100',
             typeof props.className === 'function'
               ? props.className(state)
               : props.className,
diff --git a/docs/data/components/collapsible/CssAnimatedCollapsible.js b/docs/data/components/collapsible/CssAnimatedCollapsible.js
index fe5e8fd2d9..78f52dab8a 100644
--- a/docs/data/components/collapsible/CssAnimatedCollapsible.js
+++ b/docs/data/components/collapsible/CssAnimatedCollapsible.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 export default function CssAnimatedCollapsible() {
   const [open, setOpen] = React.useState(true);
diff --git a/docs/data/components/collapsible/CssAnimatedCollapsible.tsx b/docs/data/components/collapsible/CssAnimatedCollapsible.tsx
index fe5e8fd2d9..78f52dab8a 100644
--- a/docs/data/components/collapsible/CssAnimatedCollapsible.tsx
+++ b/docs/data/components/collapsible/CssAnimatedCollapsible.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 export default function CssAnimatedCollapsible() {
   const [open, setOpen] = React.useState(true);
diff --git a/docs/data/components/collapsible/CssTransitionCollapsible.js b/docs/data/components/collapsible/CssTransitionCollapsible.js
index 164082bb74..0243c54177 100644
--- a/docs/data/components/collapsible/CssTransitionCollapsible.js
+++ b/docs/data/components/collapsible/CssTransitionCollapsible.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 export default function CssTransitionCollapsible() {
   const [open, setOpen] = React.useState(true);
diff --git a/docs/data/components/collapsible/CssTransitionCollapsible.tsx b/docs/data/components/collapsible/CssTransitionCollapsible.tsx
index 164082bb74..0243c54177 100644
--- a/docs/data/components/collapsible/CssTransitionCollapsible.tsx
+++ b/docs/data/components/collapsible/CssTransitionCollapsible.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 export default function CssTransitionCollapsible() {
   const [open, setOpen] = React.useState(true);
diff --git a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js
index e829370f9c..40515a2d27 100644
--- a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js
+++ b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseCollapsible from '@base_ui/react/Collapsible';
+import { Collapsible as BaseCollapsible } from '@base_ui/react/Collapsible';
 
 const Collapsible = BaseCollapsible.Root;
 
diff --git a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx
index e829370f9c..40515a2d27 100644
--- a/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx
+++ b/docs/data/components/collapsible/UnstyledCollapsibleIntroduction.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseCollapsible from '@base_ui/react/Collapsible';
+import { Collapsible as BaseCollapsible } from '@base_ui/react/Collapsible';
 
 const Collapsible = BaseCollapsible.Root;
 
diff --git a/docs/data/components/dialog/DialogWithTransitions.js b/docs/data/components/dialog/DialogWithTransitions.js
index 7b219eb985..933fe38fa7 100644
--- a/docs/data/components/dialog/DialogWithTransitions.js
+++ b/docs/data/components/dialog/DialogWithTransitions.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseDialog from '@base_ui/react/Dialog';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function DialogWithTransitions() {
diff --git a/docs/data/components/dialog/DialogWithTransitions.tsx b/docs/data/components/dialog/DialogWithTransitions.tsx
index 7b219eb985..933fe38fa7 100644
--- a/docs/data/components/dialog/DialogWithTransitions.tsx
+++ b/docs/data/components/dialog/DialogWithTransitions.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseDialog from '@base_ui/react/Dialog';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function DialogWithTransitions() {
diff --git a/docs/data/components/dialog/NestedDialogs.js b/docs/data/components/dialog/NestedDialogs.js
index 1ecbc04465..b154fdf961 100644
--- a/docs/data/components/dialog/NestedDialogs.js
+++ b/docs/data/components/dialog/NestedDialogs.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseDialog from '@base_ui/react/Dialog';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function NestedDialogs() {
diff --git a/docs/data/components/dialog/NestedDialogs.tsx b/docs/data/components/dialog/NestedDialogs.tsx
index 1ecbc04465..b154fdf961 100644
--- a/docs/data/components/dialog/NestedDialogs.tsx
+++ b/docs/data/components/dialog/NestedDialogs.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseDialog from '@base_ui/react/Dialog';
+import { Dialog as BaseDialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function NestedDialogs() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.js
index 9e9eaab474..e6868505f4 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.js
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import classes from './styles.module.css';
 
 export default function UnstyledDialogIntroduction() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx
index 9e9eaab474..e6868505f4 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import classes from './styles.module.css';
 
 export default function UnstyledDialogIntroduction() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.js
index 4129596a8f..6627436c72 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.js
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function UnstyledDialogIntroduction() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.tsx b/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.tsx
index 4129596a8f..6627436c72 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.tsx
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { styled } from '@mui/system';
 
 export default function UnstyledDialogIntroduction() {
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
index f4ebdf05b9..988a1e274b 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 
 export default function UnstyledDialogIntroduction() {
   return (
diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx
index 5b07e97241..b1127efec9 100644
--- a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx
+++ b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 
 export default function UnstyledDialogIntroduction() {
   return (
diff --git a/docs/data/components/field/UnstyledFieldAsync.js b/docs/data/components/field/UnstyledFieldAsync.js
index 92d0baa382..e966a060ed 100644
--- a/docs/data/components/field/UnstyledFieldAsync.js
+++ b/docs/data/components/field/UnstyledFieldAsync.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 const cache = new Map();
diff --git a/docs/data/components/field/UnstyledFieldAsync.tsx b/docs/data/components/field/UnstyledFieldAsync.tsx
index d560b2107f..60f064b3e3 100644
--- a/docs/data/components/field/UnstyledFieldAsync.tsx
+++ b/docs/data/components/field/UnstyledFieldAsync.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 const cache = new Map<string, string | null>();
diff --git a/docs/data/components/field/UnstyledFieldIntroduction/system/index.js b/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
index e0f42d8ce5..a1dd1e4513 100644
--- a/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
+++ b/docs/data/components/field/UnstyledFieldIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldIntroduction() {
diff --git a/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx b/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
index e0f42d8ce5..a1dd1e4513 100644
--- a/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
+++ b/docs/data/components/field/UnstyledFieldIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldIntroduction() {
diff --git a/docs/data/components/field/UnstyledFieldPassword.js b/docs/data/components/field/UnstyledFieldPassword.js
index ccc729cd0c..2e233b17f1 100644
--- a/docs/data/components/field/UnstyledFieldPassword.js
+++ b/docs/data/components/field/UnstyledFieldPassword.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 function validate(value) {
diff --git a/docs/data/components/field/UnstyledFieldPassword.tsx b/docs/data/components/field/UnstyledFieldPassword.tsx
index 1181ef90e5..63adfbdf95 100644
--- a/docs/data/components/field/UnstyledFieldPassword.tsx
+++ b/docs/data/components/field/UnstyledFieldPassword.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 function validate(value: string) {
diff --git a/docs/data/components/field/UnstyledFieldServerError.js b/docs/data/components/field/UnstyledFieldServerError.js
index a9875b9e88..24e281a835 100644
--- a/docs/data/components/field/UnstyledFieldServerError.js
+++ b/docs/data/components/field/UnstyledFieldServerError.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldServerError() {
diff --git a/docs/data/components/field/UnstyledFieldServerError.tsx b/docs/data/components/field/UnstyledFieldServerError.tsx
index 35a880e849..edca241ac6 100644
--- a/docs/data/components/field/UnstyledFieldServerError.tsx
+++ b/docs/data/components/field/UnstyledFieldServerError.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 type Status = 'initial' | 'loading' | 'success' | 'error';
diff --git a/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.js b/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.js
index fc0380e070..24178b06b3 100644
--- a/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.js
+++ b/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Fieldset from '@base_ui/react/Fieldset';
+import { Field } from '@base_ui/react/Field';
+import { Fieldset } from '@base_ui/react/Fieldset';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldsetIntroduction() {
diff --git a/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.tsx b/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.tsx
index fc0380e070..24178b06b3 100644
--- a/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.tsx
+++ b/docs/data/components/fieldset/UnstyledFieldsetIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Fieldset from '@base_ui/react/Fieldset';
+import { Field } from '@base_ui/react/Field';
+import { Fieldset } from '@base_ui/react/Fieldset';
 import { styled } from '@mui/system';
 
 export default function UnstyledFieldsetIntroduction() {
diff --git a/docs/data/components/form/FormIntroduction/system/index.js b/docs/data/components/form/FormIntroduction/system/index.js
index 2e3d2a2c87..a36554850a 100644
--- a/docs/data/components/form/FormIntroduction/system/index.js
+++ b/docs/data/components/form/FormIntroduction/system/index.js
@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import * as Form from '@base_ui/react/Form';
-import * as Fieldset from '@base_ui/react/Fieldset';
-import * as Field from '@base_ui/react/Field';
+import { Form } from '@base_ui/react/Form';
+import { Fieldset } from '@base_ui/react/Fieldset';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 export default function FormIntroduction() {
diff --git a/docs/data/components/form/FormIntroduction/system/index.tsx b/docs/data/components/form/FormIntroduction/system/index.tsx
index be54ebd504..e4b3bb49ec 100644
--- a/docs/data/components/form/FormIntroduction/system/index.tsx
+++ b/docs/data/components/form/FormIntroduction/system/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import * as Form from '@base_ui/react/Form';
-import * as Fieldset from '@base_ui/react/Fieldset';
-import * as Field from '@base_ui/react/Field';
+import { Form } from '@base_ui/react/Form';
+import { Fieldset } from '@base_ui/react/Fieldset';
+import { Field } from '@base_ui/react/Field';
 import { styled } from '@mui/system';
 
 type Status = 'initial' | 'loading' | 'success' | 'error';
diff --git a/docs/data/components/form/form.mdx b/docs/data/components/form/form.mdx
index 72eaf9a5a2..999b0bcaf8 100644
--- a/docs/data/components/form/form.mdx
+++ b/docs/data/components/form/form.mdx
@@ -37,8 +37,8 @@ Forms are implemented using a `Root` component and `Field` components:
 Forms are intended to be used with the `Field` component, which provides labeling and validation for individual form controls. These are nested inside `Form.Root`:
 
 ```ts
-import * as Form from '@base_ui/react/Form';
-import * as Field from '@base_ui/react/Field';
+import { Form } from '@base_ui/react/Form';
+import { Field } from '@base_ui/react/Field';
 ```
 
 ```jsx
diff --git a/docs/data/components/menu/CheckboxItems.js b/docs/data/components/menu/CheckboxItems.js
index 8b316c8b4d..0dd752b869 100644
--- a/docs/data/components/menu/CheckboxItems.js
+++ b/docs/data/components/menu/CheckboxItems.js
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function CheckboxItems() {
diff --git a/docs/data/components/menu/CheckboxItems.tsx b/docs/data/components/menu/CheckboxItems.tsx
index 930e8c7093..1efbbd4ded 100644
--- a/docs/data/components/menu/CheckboxItems.tsx
+++ b/docs/data/components/menu/CheckboxItems.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function CheckboxItems() {
diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js
index d5c3d1b7f9..37fec5c5a0 100644
--- a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js
+++ b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as BaseMenu from '@base_ui/react/Menu';
+import { Menu as BaseMenu } from '@base_ui/react/Menu';
 import classes from './Menu.module.css';
 
 export const Menu = BaseMenu.Root;
diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx
index 81ee796e8d..87def4d726 100644
--- a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx
+++ b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseMenu from '@base_ui/react/Menu';
+import { Menu as BaseMenu } from '@base_ui/react/Menu';
 import classes from './Menu.module.css';
 
 export const Menu = BaseMenu.Root;
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.js b/docs/data/components/menu/MenuIntroduction/system/index.js
index 945f5bd820..3b7dca224d 100644
--- a/docs/data/components/menu/MenuIntroduction/system/index.js
+++ b/docs/data/components/menu/MenuIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function MenuIntroduction() {
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.tsx b/docs/data/components/menu/MenuIntroduction/system/index.tsx
index 587097e711..a45fce9797 100644
--- a/docs/data/components/menu/MenuIntroduction/system/index.tsx
+++ b/docs/data/components/menu/MenuIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function MenuIntroduction() {
diff --git a/docs/data/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/components/menu/MenuIntroduction/tailwind/index.js
index c88827b7e7..74361643e0 100644
--- a/docs/data/components/menu/MenuIntroduction/tailwind/index.js
+++ b/docs/data/components/menu/MenuIntroduction/tailwind/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/components/menu/MenuIntroduction/tailwind/index.tsx
index 61821bb4a3..c1203da2e1 100644
--- a/docs/data/components/menu/MenuIntroduction/tailwind/index.tsx
+++ b/docs/data/components/menu/MenuIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/menu/NestedMenu.js b/docs/data/components/menu/NestedMenu.js
index 82d31a8227..32a7cca1f3 100644
--- a/docs/data/components/menu/NestedMenu.js
+++ b/docs/data/components/menu/NestedMenu.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function NestedMenu() {
diff --git a/docs/data/components/menu/NestedMenu.tsx b/docs/data/components/menu/NestedMenu.tsx
index 9eb43acaf5..b13f069b10 100644
--- a/docs/data/components/menu/NestedMenu.tsx
+++ b/docs/data/components/menu/NestedMenu.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function NestedMenu() {
diff --git a/docs/data/components/menu/RadioItems.js b/docs/data/components/menu/RadioItems.js
index 314d6f34db..e00fdf1fd3 100644
--- a/docs/data/components/menu/RadioItems.js
+++ b/docs/data/components/menu/RadioItems.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function RadioItems() {
diff --git a/docs/data/components/menu/RadioItems.tsx b/docs/data/components/menu/RadioItems.tsx
index 314d6f34db..e00fdf1fd3 100644
--- a/docs/data/components/menu/RadioItems.tsx
+++ b/docs/data/components/menu/RadioItems.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { styled } from '@mui/system';
 
 export default function RadioItems() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldFormat.js b/docs/data/components/number-field/UnstyledNumberFieldFormat.js
index 6354175c3b..250b324265 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldFormat.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldFormat.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled, css } from '@mui/system';
 
 export default function UnstyledNumberFieldFormat() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldFormat.tsx b/docs/data/components/number-field/UnstyledNumberFieldFormat.tsx
index 6354175c3b..250b324265 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldFormat.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldFormat.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled, css } from '@mui/system';
 
 export default function UnstyledNumberFieldFormat() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.js b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.js
index f4919cd483..799163407e 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.tsx b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.tsx
index f4919cd483..799163407e 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.js b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.js
index 0ecfce83ea..d93b97b1fa 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
-import * as Field from '@base_ui/react/Field';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
+import { Field } from '@base_ui/react/Field';
 import { css, styled, useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx
index 0ecfce83ea..d93b97b1fa 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
-import * as Field from '@base_ui/react/Field';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
+import { Field } from '@base_ui/react/Field';
 import { css, styled, useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
index 7fb70bffe1..465c128cbe 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function classNames(...classes) {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx
index a93e48dcbf..2fddd401f1 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { useTheme } from '@mui/system';
 
 function classNames(...classes: Array<string | boolean | undefined | null>) {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldScrub.js b/docs/data/components/number-field/UnstyledNumberFieldScrub.js
index 164de5acf1..e1a458e479 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldScrub.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldScrub.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled } from '@mui/system';
 
 export default function UnstyledNumberFieldScrub() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldScrub.tsx b/docs/data/components/number-field/UnstyledNumberFieldScrub.tsx
index 164de5acf1..e1a458e479 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldScrub.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldScrub.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled } from '@mui/system';
 
 export default function UnstyledNumberFieldScrub() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.js b/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.js
index b0ef9a2b74..f452ec03a4 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.js
+++ b/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled } from '@mui/system';
 
 export default function UnstyledNumberFieldWheelScrub() {
diff --git a/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.tsx b/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.tsx
index b0ef9a2b74..f452ec03a4 100644
--- a/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.tsx
+++ b/docs/data/components/number-field/UnstyledNumberFieldWheelScrub.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseNumberField from '@base_ui/react/NumberField';
+import { NumberField as BaseNumberField } from '@base_ui/react/NumberField';
 import { styled } from '@mui/system';
 
 export default function UnstyledNumberFieldWheelScrub() {
diff --git a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js
index 38d2d2de2a..dc7cdccd45 100644
--- a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js
+++ b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { styled } from '@mui/system';
 
 export default function UnstyledPopoverIntroduction() {
diff --git a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx
index 38d2d2de2a..dc7cdccd45 100644
--- a/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx
+++ b/docs/data/components/popover/UnstyledPopoverIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { styled } from '@mui/system';
 
 export default function UnstyledPopoverIntroduction() {
diff --git a/docs/data/components/popover/UnstyledPopoverTransition.js b/docs/data/components/popover/UnstyledPopoverTransition.js
index 5e50a7e09c..b0af183593 100644
--- a/docs/data/components/popover/UnstyledPopoverTransition.js
+++ b/docs/data/components/popover/UnstyledPopoverTransition.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { styled } from '@mui/system';
 
 export default function UnstyledPopoverTransition() {
diff --git a/docs/data/components/popover/UnstyledPopoverTransition.tsx b/docs/data/components/popover/UnstyledPopoverTransition.tsx
index 5e50a7e09c..b0af183593 100644
--- a/docs/data/components/popover/UnstyledPopoverTransition.tsx
+++ b/docs/data/components/popover/UnstyledPopoverTransition.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { styled } from '@mui/system';
 
 export default function UnstyledPopoverTransition() {
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js
index e7506c5c75..98e97754b0 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js
+++ b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { styled } from '@mui/system';
 
 export default function UnstyledPreviewCardIntroduction() {
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx
index e7506c5c75..98e97754b0 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx
+++ b/docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { styled } from '@mui/system';
 
 export default function UnstyledPreviewCardIntroduction() {
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
index 346ba7917e..0c40c75881 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
+++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { styled } from '@mui/system';
 
 export default function UnstyledPreviewCardTransition() {
diff --git a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
index 346ba7917e..0c40c75881 100644
--- a/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
+++ b/docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { styled } from '@mui/system';
 
 export default function UnstyledPreviewCardTransition() {
diff --git a/docs/data/components/progress/IndeterminateProgress.js b/docs/data/components/progress/IndeterminateProgress.js
index b3195b7a1f..2b81c447f5 100644
--- a/docs/data/components/progress/IndeterminateProgress.js
+++ b/docs/data/components/progress/IndeterminateProgress.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 import { Box, styled, keyframes, css } from '@mui/system';
 
 export default function IndeterminateProgress() {
diff --git a/docs/data/components/progress/IndeterminateProgress.tsx b/docs/data/components/progress/IndeterminateProgress.tsx
index b3195b7a1f..2b81c447f5 100644
--- a/docs/data/components/progress/IndeterminateProgress.tsx
+++ b/docs/data/components/progress/IndeterminateProgress.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 import { Box, styled, keyframes, css } from '@mui/system';
 
 export default function IndeterminateProgress() {
diff --git a/docs/data/components/progress/RtlProgress.js b/docs/data/components/progress/RtlProgress.js
index 1c95abdc82..6654e62b65 100644
--- a/docs/data/components/progress/RtlProgress.js
+++ b/docs/data/components/progress/RtlProgress.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 import { Box, styled } from '@mui/system';
 
 export default function RtlProgress() {
diff --git a/docs/data/components/progress/RtlProgress.tsx b/docs/data/components/progress/RtlProgress.tsx
index 1c95abdc82..6654e62b65 100644
--- a/docs/data/components/progress/RtlProgress.tsx
+++ b/docs/data/components/progress/RtlProgress.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 import { Box, styled } from '@mui/system';
 
 export default function RtlProgress() {
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js
index bee6da9c00..5a2c23b5a6 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   return (
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx
index bee6da9c00..5a2c23b5a6 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   return (
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js
index 750a30a67e..435d7d43b1 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx
index 750a30a67e..435d7d43b1 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
index 65cdae0d48..41cc11ec57 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
index badde71617..650a4198de 100644
--- a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
+++ b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as BaseProgress from '@base_ui/react/Progress';
+import { Progress as BaseProgress } from '@base_ui/react/Progress';
 
 export default function UnstyledProgressIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.js b/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.js
index 37a96630af..f1e246848f 100644
--- a/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.js
+++ b/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { styled } from '@mui/system';
 
 export default function UnstyledRadioGroupIntroduction() {
diff --git a/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.tsx b/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.tsx
index 37a96630af..f1e246848f 100644
--- a/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.tsx
+++ b/docs/data/components/radio-group/UnstyledRadioGroupIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { styled } from '@mui/system';
 
 export default function UnstyledRadioGroupIntroduction() {
diff --git a/docs/data/components/separator/SeparatorIntroduction.js b/docs/data/components/separator/SeparatorIntroduction.js
index d22184c6d7..fdacf29656 100644
--- a/docs/data/components/separator/SeparatorIntroduction.js
+++ b/docs/data/components/separator/SeparatorIntroduction.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Separator from '@base_ui/react/Separator';
+import { Separator } from '@base_ui/react/Separator';
 import { styled } from '@mui/system';
 
 export default function SeparatorIntroduction() {
diff --git a/docs/data/components/separator/SeparatorIntroduction.tsx b/docs/data/components/separator/SeparatorIntroduction.tsx
index d22184c6d7..fdacf29656 100644
--- a/docs/data/components/separator/SeparatorIntroduction.tsx
+++ b/docs/data/components/separator/SeparatorIntroduction.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Separator from '@base_ui/react/Separator';
+import { Separator } from '@base_ui/react/Separator';
 import { styled } from '@mui/system';
 
 export default function SeparatorIntroduction() {
diff --git a/docs/data/components/slider/RangeSlider.js b/docs/data/components/slider/RangeSlider.js
index f8b56822b3..43c1a01582 100644
--- a/docs/data/components/slider/RangeSlider.js
+++ b/docs/data/components/slider/RangeSlider.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function RangeSlider() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/RangeSlider.tsx b/docs/data/components/slider/RangeSlider.tsx
index ddb0cdabaa..53279eade9 100644
--- a/docs/data/components/slider/RangeSlider.tsx
+++ b/docs/data/components/slider/RangeSlider.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function RangeSlider() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/RtlSlider.js b/docs/data/components/slider/RtlSlider.js
index 13c3d16caf..472dce4697 100644
--- a/docs/data/components/slider/RtlSlider.js
+++ b/docs/data/components/slider/RtlSlider.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 import { styled, useTheme, Box } from '@mui/system';
 
 export default function RtlSlider() {
diff --git a/docs/data/components/slider/RtlSlider.tsx b/docs/data/components/slider/RtlSlider.tsx
index 62f0aea2dd..31961f6289 100644
--- a/docs/data/components/slider/RtlSlider.tsx
+++ b/docs/data/components/slider/RtlSlider.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 import { styled, useTheme, Box } from '@mui/system';
 
 export default function RtlSlider() {
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
index 966ce832a2..c5c0546f44 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
index d69cde9cf5..a7ca9c845a 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/css-modules/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
index dc0b9eec02..61da914e59 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
index 4d971a0cd1..3e07ad98a9 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled, useTheme, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function UnstyledSliderIntroduction() {
   // Replace this with your app logic for determining dark mode
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
index 5f1c308619..5e06ad386d 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
diff --git a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
index f079c3ad49..232b324362 100644
--- a/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
+++ b/docs/data/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 function classNames(...classes: Array<string | boolean | undefined | null>) {
   return classes.filter(Boolean).join(' ');
diff --git a/docs/data/components/slider/VerticalSlider.js b/docs/data/components/slider/VerticalSlider.js
index 13c57c833c..0548448e78 100644
--- a/docs/data/components/slider/VerticalSlider.js
+++ b/docs/data/components/slider/VerticalSlider.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { useTheme } from '@mui/system';
 
 export default function VerticalSlider() {
diff --git a/docs/data/components/slider/VerticalSlider.tsx b/docs/data/components/slider/VerticalSlider.tsx
index a535eb341c..e38e7c64a9 100644
--- a/docs/data/components/slider/VerticalSlider.tsx
+++ b/docs/data/components/slider/VerticalSlider.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { useTheme } from '@mui/system';
 
 export default function VerticalSlider() {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
index d48f24dbea..3ad7b327dc 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Switch from '@base_ui/react/Switch';
+import { Switch } from '@base_ui/react/Switch';
 import classes from './styles.module.css';
 
 export default function UnstyledSwitchIntroduction() {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
index d48f24dbea..3ad7b327dc 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Switch from '@base_ui/react/Switch';
+import { Switch } from '@base_ui/react/Switch';
 import classes from './styles.module.css';
 
 export default function UnstyledSwitchIntroduction() {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
index d0b25a5991..37dde94ecb 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/css-modules/styles.module.css
@@ -42,12 +42,12 @@
     }
   }
 
-  &[data-state='checked'] {
+  &[data-checked] {
     border: none;
     background: var(--cyan-500);
   }
 
-  &[data-state='checked']:not([data-disabled]):hover {
+  &[data-checked]:not([data-disabled]):hover {
     background: var(--cyan-700);
   }
 }
@@ -73,7 +73,7 @@
   }
 }
 
-.thumb[data-state='checked'] {
+.thumb[data-checked] {
   left: 18px;
   background-color: #fff;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
index bac7657604..c8ca0841b0 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseSwitch from '@base_ui/react/Switch';
+import { Switch as BaseSwitch } from '@base_ui/react/Switch';
 
 export default function UnstyledSwitchIntroduction() {
   return (
@@ -72,12 +72,12 @@ const Switch = styled(BaseSwitch.Root)(
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &[data-state="checked"] {
+  &[data-checked] {
     border: none;
     background: ${blue[500]};
   }
 
-  &[data-state="checked"]:not([data-disabled]):hover {
+  &[data-checked]:not([data-disabled]):hover {
     background: ${blue[700]};
   }
   `,
@@ -101,7 +101,7 @@ const Thumb = styled(BaseSwitch.Thumb)(
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
     };
 
-    &[data-state="checked"] {
+    &[data-checked] {
       left: 18px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
index bac7657604..c8ca0841b0 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as BaseSwitch from '@base_ui/react/Switch';
+import { Switch as BaseSwitch } from '@base_ui/react/Switch';
 
 export default function UnstyledSwitchIntroduction() {
   return (
@@ -72,12 +72,12 @@ const Switch = styled(BaseSwitch.Root)(
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &[data-state="checked"] {
+  &[data-checked] {
     border: none;
     background: ${blue[500]};
   }
 
-  &[data-state="checked"]:not([data-disabled]):hover {
+  &[data-checked]:not([data-disabled]):hover {
     background: ${blue[700]};
   }
   `,
@@ -101,7 +101,7 @@ const Thumb = styled(BaseSwitch.Thumb)(
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
     };
 
-    &[data-state="checked"] {
+    &[data-checked] {
       left: 18px;
       background-color: #fff;
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.js b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
index 9343aef64d..53e9b4b232 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseSwitch from '@base_ui/react/Switch';
+import { Switch as BaseSwitch } from '@base_ui/react/Switch';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
index d3c6a6a13f..36874d8928 100644
--- a/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
+++ b/docs/data/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseSwitch from '@base_ui/react/Switch';
+import { Switch as BaseSwitch } from '@base_ui/react/Switch';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/tabs/IndicatorBubble.js b/docs/data/components/tabs/IndicatorBubble.js
index 6866800e4e..80ce1ffbde 100644
--- a/docs/data/components/tabs/IndicatorBubble.js
+++ b/docs/data/components/tabs/IndicatorBubble.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function IndicatorBubble() {
   return (
diff --git a/docs/data/components/tabs/IndicatorBubble.tsx b/docs/data/components/tabs/IndicatorBubble.tsx
index 6866800e4e..80ce1ffbde 100644
--- a/docs/data/components/tabs/IndicatorBubble.tsx
+++ b/docs/data/components/tabs/IndicatorBubble.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function IndicatorBubble() {
   return (
diff --git a/docs/data/components/tabs/IndicatorUnderline.js b/docs/data/components/tabs/IndicatorUnderline.js
index cf78e34dd7..441448e034 100644
--- a/docs/data/components/tabs/IndicatorUnderline.js
+++ b/docs/data/components/tabs/IndicatorUnderline.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function IndicatorUnderline() {
   return (
diff --git a/docs/data/components/tabs/IndicatorUnderline.tsx b/docs/data/components/tabs/IndicatorUnderline.tsx
index cf78e34dd7..441448e034 100644
--- a/docs/data/components/tabs/IndicatorUnderline.tsx
+++ b/docs/data/components/tabs/IndicatorUnderline.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function IndicatorUnderline() {
   return (
diff --git a/docs/data/components/tabs/KeyboardNavigation.js b/docs/data/components/tabs/KeyboardNavigation.js
index 163f1229c6..47d402c908 100644
--- a/docs/data/components/tabs/KeyboardNavigation.js
+++ b/docs/data/components/tabs/KeyboardNavigation.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function KeyboardNavigation() {
   return (
diff --git a/docs/data/components/tabs/KeyboardNavigation.tsx b/docs/data/components/tabs/KeyboardNavigation.tsx
index 163f1229c6..47d402c908 100644
--- a/docs/data/components/tabs/KeyboardNavigation.tsx
+++ b/docs/data/components/tabs/KeyboardNavigation.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function KeyboardNavigation() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js
index 1044ae5137..ba96422e66 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx
index 1044ae5137..ba96422e66 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/css-modules/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js
index aea0b9744c..021c449cb6 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx
index aea0b9744c..021c449cb6 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/system/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { styled } from '@mui/system';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   return (
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
index d8bd50d5bf..fe9fc56258 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
index 92957ad454..609491d86d 100644
--- a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
+++ b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTheme } from '@mui/system';
 
 function useIsDarkMode() {
diff --git a/docs/data/components/tabs/UnstyledTabsRouting.js b/docs/data/components/tabs/UnstyledTabsRouting.js
index 5bd42b9d89..5782a0785d 100644
--- a/docs/data/components/tabs/UnstyledTabsRouting.js
+++ b/docs/data/components/tabs/UnstyledTabsRouting.js
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import {
   MemoryRouter,
   Route,
diff --git a/docs/data/components/tabs/UnstyledTabsRouting.tsx b/docs/data/components/tabs/UnstyledTabsRouting.tsx
index fff226d17d..0ff86ac06f 100644
--- a/docs/data/components/tabs/UnstyledTabsRouting.tsx
+++ b/docs/data/components/tabs/UnstyledTabsRouting.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import {
   MemoryRouter,
   Route,
diff --git a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js
index cfe835f234..e886d41b76 100644
--- a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js
+++ b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipDelayGroup() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx
index cfe835f234..e886d41b76 100644
--- a/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipDelayGroup.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipDelayGroup() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js
index 1d8e8265a0..cd2f93ed03 100644
--- a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js
+++ b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipFollowCursor() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx
index 1d8e8265a0..cd2f93ed03 100644
--- a/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipFollowCursor.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipFollowCursor() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js
index 6d2492f1c7..f729f37638 100644
--- a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js
+++ b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipIntroduction() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx
index 6d2492f1c7..f729f37638 100644
--- a/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipIntroduction() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.js b/docs/data/components/tooltip/UnstyledTooltipTransition.js
index 1ac008c3da..d07593a933 100644
--- a/docs/data/components/tooltip/UnstyledTooltipTransition.js
+++ b/docs/data/components/tooltip/UnstyledTooltipTransition.js
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipTransition() {
diff --git a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
index 1ac008c3da..d07593a933 100644
--- a/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
+++ b/docs/data/components/tooltip/UnstyledTooltipTransition.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
 export default function UnstyledTooltipTransition() {
diff --git a/docs/data/getting-started/accessibility/FocusRing.js b/docs/data/getting-started/accessibility/FocusRing.js
index d115f561cd..24d3c25be7 100644
--- a/docs/data/getting-started/accessibility/FocusRing.js
+++ b/docs/data/getting-started/accessibility/FocusRing.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function FocusRing() {
   return (
diff --git a/docs/data/getting-started/accessibility/FocusRing.tsx b/docs/data/getting-started/accessibility/FocusRing.tsx
index d115f561cd..24d3c25be7 100644
--- a/docs/data/getting-started/accessibility/FocusRing.tsx
+++ b/docs/data/getting-started/accessibility/FocusRing.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
-import * as BaseSlider from '@base_ui/react/Slider';
+import { Slider as BaseSlider } from '@base_ui/react/Slider';
 
 export default function FocusRing() {
   return (
diff --git a/docs/src/blocks/GoogleAnalytics.tsx b/docs/src/blocks/GoogleAnalytics.tsx
index a1e83a8c5a..ce97cdcf26 100644
--- a/docs/src/blocks/GoogleAnalytics.tsx
+++ b/docs/src/blocks/GoogleAnalytics.tsx
@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useMediaQuery } from '@base_ui/react/useMediaQuery';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 
 let boundDataGaListener = false;
 
@@ -19,6 +20,25 @@ const GoogleAnalytics = React.memo(function GoogleAnalytics(props: GoogleAnalyti
     userLanguage,
   } = props;
 
+  useEnhancedEffect(() => {
+    // @ts-expect-error
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag(...args: unknown[]) {
+      // @ts-expect-error
+      window.dataLayer.push(...args);
+    }
+
+    window.gtag = gtag;
+
+    gtag('js', new Date());
+
+    // eslint-disable-next-line no-template-curly-in-string
+    gtag('config', '${id}', {
+      send_page_view: false,
+    });
+  }, []);
+
   React.useEffect(() => {
     if (!boundDataGaListener) {
       boundDataGaListener = true;
diff --git a/docs/src/blocks/GoogleTagManager.tsx b/docs/src/blocks/GoogleTagManager.tsx
index 3888df0720..1ea6f5904c 100644
--- a/docs/src/blocks/GoogleTagManager.tsx
+++ b/docs/src/blocks/GoogleTagManager.tsx
@@ -8,29 +8,10 @@ interface GoogleTagManagerProps {
 export function GoogleTagManager(props: React.PropsWithChildren<GoogleTagManagerProps>) {
   const { id } = props;
   return (
-    <React.Fragment>
-      <script
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-window.gtag = gtag;
-gtag('js', new Date());
-gtag('config', '${id}', {
-  send_page_view: false,
-});
-`,
-        }}
-      />
-      {/**
-       * A better alternative to <script async>, to delay its execution
-       * https://developer.chrome.com/blog/script-component/
-       */}
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
-      />
-    </React.Fragment>
+    /**
+     * A better alternative to <script async>, to delay its execution
+     * https://developer.chrome.com/blog/script-component/
+     */
+    <Script strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=${id}`} />
   );
 }
diff --git a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetCode.tsx b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetCode.tsx
index e2d74a1f12..1fd44aa06a 100644
--- a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetCode.tsx
+++ b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetCode.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 
 export function PackageManagerSnippetCode(props: PackageManagerSnippetCode.Props) {
   const { value, children } = props;
diff --git a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
index a9d8e6c234..cd230bc1cc 100644
--- a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
+++ b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 // eslint-disable-next-line no-restricted-imports
 import { useEnhancedEffect } from '@base_ui/react/utils/useEnhancedEffect';
 import { usePackageManagerSnippetContext } from './PackageManagerSnippetProvider';
diff --git a/docs/src/components/DocsVersionSelector.tsx b/docs/src/components/DocsVersionSelector.tsx
index f1bb24dea1..9ec9fdd785 100644
--- a/docs/src/components/DocsVersionSelector.tsx
+++ b/docs/src/components/DocsVersionSelector.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { SelectIcon } from 'docs-base/src/icons/Select';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import classes from './DocsVersionSelector.module.css';
 
 export interface DocumentationVersion {
diff --git a/docs/src/components/content/InstallationInstructions.tsx b/docs/src/components/content/InstallationInstructions.tsx
index c7f5bfcdb6..63d9e1f190 100644
--- a/docs/src/components/content/InstallationInstructions.tsx
+++ b/docs/src/components/content/InstallationInstructions.tsx
@@ -27,7 +27,7 @@ export function InstallationInstructions(props: InstallationInstructionsProps) {
       <p>Once you have the package installed, import the component.</p>
       <pre>
         {componentNames
-          .map((name) => `import * as ${name} from '@base_ui/react/${name}';`)
+          .map((name) => `import { ${name} } from '@base_ui/react/${name}';`)
           .join('\n')}
       </pre>
     </React.Fragment>
diff --git a/docs/src/components/demo/Demo.tsx b/docs/src/components/demo/Demo.tsx
index cfeb7b6a86..519e82adbf 100644
--- a/docs/src/components/demo/Demo.tsx
+++ b/docs/src/components/demo/Demo.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { ErrorBoundary } from 'react-error-boundary';
 import * as BaseDemo from 'docs-base/src/blocks/Demo';
 import { CopyIcon } from 'docs-base/src/icons/Copy';
diff --git a/docs/src/components/demo/DemoFileSelector.tsx b/docs/src/components/demo/DemoFileSelector.tsx
index c15610dc3b..ad9bc98b35 100644
--- a/docs/src/components/demo/DemoFileSelector.tsx
+++ b/docs/src/components/demo/DemoFileSelector.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { DemoContext } from 'docs-base/src/blocks/Demo';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import classes from './DemoFileSelector.module.css';
 
 export interface DemoFileSelectorProps {
diff --git a/docs/src/design-system/Tooltip.tsx b/docs/src/design-system/Tooltip.tsx
index c18a043e4f..c887c66de7 100644
--- a/docs/src/design-system/Tooltip.tsx
+++ b/docs/src/design-system/Tooltip.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as BaseTooltip from '@base_ui/react/Tooltip';
+import { Tooltip as BaseTooltip } from '@base_ui/react/Tooltip';
 import classes from './Tooltip.module.css';
 
 export function Tooltip(props: Tooltip.Props) {
diff --git a/examples/.gitignore b/examples/.gitignore
index e0f7d4b6d4..d11ce49a15 100644
--- a/examples/.gitignore
+++ b/examples/.gitignore
@@ -1 +1,3 @@
-**/yarn.lock
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx b/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx
index 323a65516c..dc7e7ebc30 100644
--- a/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Backdrop />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx b/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx
index 65f4bba906..7490ada7a1 100644
--- a/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Close />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx
index da704e271d..802229101a 100644
--- a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Description />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx
index 40fec96725..e11cd0b2aa 100644
--- a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Popup />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx
index 44ba27380f..d2711e623e 100644
--- a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Title />', () => {
diff --git a/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx b/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx
index c06bb9ea50..a4dc6cc128 100644
--- a/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx
+++ b/packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as AlertDialog from '@base_ui/react/AlertDialog';
+import { AlertDialog } from '@base_ui/react/AlertDialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Trigger />', () => {
diff --git a/packages/mui-base/src/AlertDialog/index.barrel.ts b/packages/mui-base/src/AlertDialog/index.barrel.ts
deleted file mode 100644
index 281822c580..0000000000
--- a/packages/mui-base/src/AlertDialog/index.barrel.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { AlertDialogBackdrop } from './Backdrop/AlertDialogBackdrop';
-export { AlertDialogClose } from './Close/AlertDialogClose';
-export { AlertDialogDescription } from './Description/AlertDialogDescription';
-export { AlertDialogPopup } from './Popup/AlertDialogPopup';
-export { AlertDialogRoot } from './Root/AlertDialogRoot';
-export { AlertDialogTitle } from './Title/AlertDialogTitle';
-export { AlertDialogTrigger } from './Trigger/AlertDialogTrigger';
diff --git a/packages/mui-base/src/AlertDialog/index.parts.ts b/packages/mui-base/src/AlertDialog/index.parts.ts
new file mode 100644
index 0000000000..ad0f1a228c
--- /dev/null
+++ b/packages/mui-base/src/AlertDialog/index.parts.ts
@@ -0,0 +1,7 @@
+export { AlertDialogBackdrop as Backdrop } from './Backdrop/AlertDialogBackdrop';
+export { AlertDialogClose as Close } from './Close/AlertDialogClose';
+export { AlertDialogDescription as Description } from './Description/AlertDialogDescription';
+export { AlertDialogPopup as Popup } from './Popup/AlertDialogPopup';
+export { AlertDialogRoot as Root } from './Root/AlertDialogRoot';
+export { AlertDialogTitle as Title } from './Title/AlertDialogTitle';
+export { AlertDialogTrigger as Trigger } from './Trigger/AlertDialogTrigger';
diff --git a/packages/mui-base/src/AlertDialog/index.ts b/packages/mui-base/src/AlertDialog/index.ts
index ad0f1a228c..766a0ca54b 100644
--- a/packages/mui-base/src/AlertDialog/index.ts
+++ b/packages/mui-base/src/AlertDialog/index.ts
@@ -1,7 +1 @@
-export { AlertDialogBackdrop as Backdrop } from './Backdrop/AlertDialogBackdrop';
-export { AlertDialogClose as Close } from './Close/AlertDialogClose';
-export { AlertDialogDescription as Description } from './Description/AlertDialogDescription';
-export { AlertDialogPopup as Popup } from './Popup/AlertDialogPopup';
-export { AlertDialogRoot as Root } from './Root/AlertDialogRoot';
-export { AlertDialogTitle as Title } from './Title/AlertDialogTitle';
-export { AlertDialogTrigger as Trigger } from './Trigger/AlertDialogTrigger';
+export * as AlertDialog from './index.parts';
diff --git a/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx b/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx
index 7dbca304df..1bcc780c2e 100644
--- a/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx
+++ b/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { createRenderer, describeConformance } from '#test-utils';
 import { CheckboxRootContext } from '../Root/CheckboxRootContext';
 
diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
index 5f136f54be..40a9eccbe6 100644
--- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
+++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, fireEvent } from '@mui/internal-test-utils';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -17,7 +17,7 @@ describe('<Checkbox.Root />', () => {
 
   describe('extra props', () => {
     it('can override the built-in attributes', async () => {
-      const { container } = await render(<Checkbox.Root data-state="checked" role="switch" />);
+      const { container } = await render(<Checkbox.Root role="switch" />);
       expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'switch');
     });
   });
@@ -156,11 +156,6 @@ describe('<Checkbox.Root />', () => {
       expect(checkbox).to.have.attribute('aria-checked', 'mixed');
     });
 
-    it('should not set the `data-indeterminate` attribute', async () => {
-      const { getAllByRole } = await render(<Checkbox.Root indeterminate />);
-      expect(getAllByRole('checkbox')[0]).to.not.have.attribute('data-indeterminate', 'true');
-    });
-
     it('should not have the aria attribute when `indeterminate` is not set', async () => {
       const { getAllByRole } = await render(<Checkbox.Root />);
       expect(getAllByRole('checkbox')[0]).not.to.have.attribute('aria-checked', 'mixed');
@@ -185,7 +180,7 @@ describe('<Checkbox.Root />', () => {
   });
 
   it('should place the style hooks on the root and the indicator', async () => {
-    const { getAllByRole } = await render(
+    const { getAllByRole, setProps } = await render(
       <Checkbox.Root defaultChecked disabled readOnly required>
         <Checkbox.Indicator />
       </Checkbox.Root>,
@@ -194,15 +189,28 @@ describe('<Checkbox.Root />', () => {
     const [checkbox] = getAllByRole('checkbox');
     const indicator = checkbox.querySelector('span');
 
-    expect(checkbox).to.have.attribute('data-state', 'checked');
+    expect(checkbox).to.have.attribute('data-checked', '');
+    expect(checkbox).not.to.have.attribute('data-unchecked');
+
     expect(checkbox).to.have.attribute('data-disabled', 'true');
     expect(checkbox).to.have.attribute('data-readonly', 'true');
     expect(checkbox).to.have.attribute('data-required', 'true');
 
-    expect(indicator).to.have.attribute('data-state', 'checked');
+    expect(indicator).to.have.attribute('data-checked', '');
+    expect(indicator).not.to.have.attribute('data-unchecked');
+
     expect(indicator).to.have.attribute('data-disabled', 'true');
     expect(indicator).to.have.attribute('data-readonly', 'true');
     expect(indicator).to.have.attribute('data-required', 'true');
+
+    setProps({ disabled: false, readOnly: false });
+    fireEvent.click(checkbox);
+
+    expect(checkbox).to.have.attribute('data-unchecked', '');
+    expect(checkbox).not.to.have.attribute('data-checked');
+
+    expect(indicator).to.have.attribute('data-unchecked', '');
+    expect(indicator).not.to.have.attribute('data-checked');
   });
 
   it('should set the name attribute on the input', async () => {
diff --git a/packages/mui-base/src/Checkbox/index.barrel.ts b/packages/mui-base/src/Checkbox/index.barrel.ts
deleted file mode 100644
index 5a27a441dc..0000000000
--- a/packages/mui-base/src/Checkbox/index.barrel.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { CheckboxRoot } from './Root/CheckboxRoot';
-export { CheckboxIndicator } from './Indicator/CheckboxIndicator';
diff --git a/packages/mui-base/src/Checkbox/index.parts.ts b/packages/mui-base/src/Checkbox/index.parts.ts
new file mode 100644
index 0000000000..c046f6b441
--- /dev/null
+++ b/packages/mui-base/src/Checkbox/index.parts.ts
@@ -0,0 +1,2 @@
+export { CheckboxRoot as Root } from './Root/CheckboxRoot';
+export { CheckboxIndicator as Indicator } from './Indicator/CheckboxIndicator';
diff --git a/packages/mui-base/src/Checkbox/index.ts b/packages/mui-base/src/Checkbox/index.ts
index c046f6b441..4e96104ea3 100644
--- a/packages/mui-base/src/Checkbox/index.ts
+++ b/packages/mui-base/src/Checkbox/index.ts
@@ -1,2 +1 @@
-export { CheckboxRoot as Root } from './Root/CheckboxRoot';
-export { CheckboxIndicator as Indicator } from './Indicator/CheckboxIndicator';
+export * as Checkbox from './index.parts';
diff --git a/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts b/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts
index d0b604d65e..7b2d06cfc0 100644
--- a/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts
+++ b/packages/mui-base/src/Checkbox/utils/useCustomStyleHookMapping.ts
@@ -6,16 +6,20 @@ import type { CheckboxRoot } from '../Root/CheckboxRoot';
 export function useCustomStyleHookMapping(ownerState: CheckboxRoot.OwnerState) {
   return React.useMemo<CustomStyleHookMapping<typeof ownerState>>(
     () => ({
-      // `data-state="mixed"` is used to style the checkbox when it's indeterminate
-      indeterminate: () => null,
-      checked(value) {
-        let state = value ? 'checked' : 'unchecked';
+      checked(value): Record<string, string> {
         if (ownerState.indeterminate) {
-          state = 'mixed';
+          // `data-indeterminate` is already handled by the `indeterminate` prop.
+          return {};
+        }
+
+        if (value) {
+          return {
+            'data-checked': '',
+          };
         }
 
         return {
-          'data-state': state,
+          'data-unchecked': '',
         };
       },
     }),
diff --git a/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
index a3ae0e9fc7..98cb90bfd4 100644
--- a/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
+++ b/packages/mui-base/src/CheckboxGroup/Parent/useCheckboxGroupParent.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { expect } from 'chai';
 
 describe('useCheckboxGroupParent', () => {
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
index 402769c6aa..e7011b524c 100644
--- a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
+++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRoot.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
-import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
-import * as Checkbox from '@base_ui/react/Checkbox';
+import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';
+import { Checkbox } from '@base_ui/react/Checkbox';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<CheckboxGroup.Root />', () => {
diff --git a/packages/mui-base/src/CheckboxGroup/index.barrel.ts b/packages/mui-base/src/CheckboxGroup/index.barrel.ts
deleted file mode 100644
index 2f4786b2a0..0000000000
--- a/packages/mui-base/src/CheckboxGroup/index.barrel.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Root/CheckboxGroupRoot';
diff --git a/packages/mui-base/src/CheckboxGroup/index.parts.ts b/packages/mui-base/src/CheckboxGroup/index.parts.ts
new file mode 100644
index 0000000000..dd08fe5b48
--- /dev/null
+++ b/packages/mui-base/src/CheckboxGroup/index.parts.ts
@@ -0,0 +1 @@
+export { CheckboxGroupRoot as Root } from './Root/CheckboxGroupRoot';
diff --git a/packages/mui-base/src/CheckboxGroup/index.ts b/packages/mui-base/src/CheckboxGroup/index.ts
index dd08fe5b48..da7ae148df 100644
--- a/packages/mui-base/src/CheckboxGroup/index.ts
+++ b/packages/mui-base/src/CheckboxGroup/index.ts
@@ -1 +1 @@
-export { CheckboxGroupRoot as Root } from './Root/CheckboxGroupRoot';
+export * as CheckboxGroup from './index.parts';
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
index f2f8b9a36b..b5bd573386 100644
--- a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Collapsible from '@base_ui/react/Collapsible';
-import { CollapsibleContext } from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
+import { CollapsibleContext } from '../Root/CollapsibleContext';
 import { describeConformance } from '../../../test/describeConformance';
 import { CollapsibleRootContext } from '../Root/CollapsibleRootContext';
 
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
index d1395b0c28..ec5888e7f9 100644
--- a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, act } from '@mui/internal-test-utils';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Collapsible.Root />', () => {
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
index f9d3d6142a..86e4a9b8fb 100644
--- a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
+++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Collapsible from '@base_ui/react/Collapsible';
-import { CollapsibleContext } from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
+import { CollapsibleContext } from '../Root/CollapsibleContext';
 import { describeConformance } from '../../../test/describeConformance';
 import { CollapsibleRootContext } from '../Root/CollapsibleRootContext';
 
diff --git a/packages/mui-base/src/Collapsible/index.parts.ts b/packages/mui-base/src/Collapsible/index.parts.ts
new file mode 100644
index 0000000000..3736ae4deb
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/index.parts.ts
@@ -0,0 +1,3 @@
+export { CollapsibleRoot as Root } from './Root/CollapsibleRoot';
+export { CollapsibleTrigger as Trigger } from './Trigger/CollapsibleTrigger';
+export { CollapsibleContent as Content } from './Content/CollapsibleContent';
diff --git a/packages/mui-base/src/Collapsible/index.ts b/packages/mui-base/src/Collapsible/index.ts
index 31281c5b5b..6d2cba0c78 100644
--- a/packages/mui-base/src/Collapsible/index.ts
+++ b/packages/mui-base/src/Collapsible/index.ts
@@ -1,12 +1 @@
-export { CollapsibleRoot as Root } from './Root/CollapsibleRoot';
-export { useCollapsibleRoot } from './Root/useCollapsibleRoot';
-export {
-  CollapsibleRootContext as CollapsibleContext,
-  useCollapsibleContext,
-} from './Root/CollapsibleRootContext';
-
-export { CollapsibleTrigger as Trigger } from './Trigger/CollapsibleTrigger';
-export { useCollapsibleTrigger } from './Trigger/useCollapsibleTrigger';
-
-export { CollapsibleContent as Content } from './Content/CollapsibleContent';
-export { useCollapsibleContent } from './Content/useCollapsibleContent';
+export * as Collapsible from './index.parts';
diff --git a/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx b/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx
index f59fdf0fe4..8dead2426f 100644
--- a/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx
+++ b/packages/mui-base/src/Dialog/Backdrop/DialogBackdrop.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Backdrop />', () => {
diff --git a/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx b/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx
index f91456aa7f..511b620089 100644
--- a/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx
+++ b/packages/mui-base/src/Dialog/Close/DialogClose.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Close />', () => {
diff --git a/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx b/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx
index 31ce4b1588..3bc0abdb06 100644
--- a/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx
+++ b/packages/mui-base/src/Dialog/Description/DialogDescription.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Description />', () => {
diff --git a/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx b/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx
index 056effacd7..7f1114b7ce 100644
--- a/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx
+++ b/packages/mui-base/src/Dialog/Popup/DialogPopup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { describeConformance, createRenderer } from '#test-utils';
 
 describe('<Dialog.Popup />', () => {
diff --git a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
index 0c7afd8481..6ae50fd2a2 100644
--- a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
+++ b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, fireEvent, waitFor } from '@mui/internal-test-utils';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer } from '#test-utils';
 
 describe('<Dialog.Root />', () => {
diff --git a/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx b/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx
index 726da92fb3..92e6f96797 100644
--- a/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx
+++ b/packages/mui-base/src/Dialog/Title/DialogTitle.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Title />', () => {
diff --git a/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx b/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx
index 07594a959c..14eff99a00 100644
--- a/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx
+++ b/packages/mui-base/src/Dialog/Trigger/DialogTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Dialog.Trigger />', () => {
diff --git a/packages/mui-base/src/Dialog/index.barrel.ts b/packages/mui-base/src/Dialog/index.barrel.ts
deleted file mode 100644
index b12eac69e0..0000000000
--- a/packages/mui-base/src/Dialog/index.barrel.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { DialogBackdrop } from './Backdrop/DialogBackdrop';
-export { DialogClose } from './Close/DialogClose';
-export { DialogDescription } from './Description/DialogDescription';
-export { DialogPopup } from './Popup/DialogPopup';
-export { DialogRoot } from './Root/DialogRoot';
-export { DialogTitle } from './Title/DialogTitle';
-export { DialogTrigger } from './Trigger/DialogTrigger';
diff --git a/packages/mui-base/src/Dialog/index.parts.ts b/packages/mui-base/src/Dialog/index.parts.ts
new file mode 100644
index 0000000000..f242e5602e
--- /dev/null
+++ b/packages/mui-base/src/Dialog/index.parts.ts
@@ -0,0 +1,7 @@
+export { DialogBackdrop as Backdrop } from './Backdrop/DialogBackdrop';
+export { DialogClose as Close } from './Close/DialogClose';
+export { DialogDescription as Description } from './Description/DialogDescription';
+export { DialogPopup as Popup } from './Popup/DialogPopup';
+export { DialogRoot as Root } from './Root/DialogRoot';
+export { DialogTitle as Title } from './Title/DialogTitle';
+export { DialogTrigger as Trigger } from './Trigger/DialogTrigger';
diff --git a/packages/mui-base/src/Dialog/index.ts b/packages/mui-base/src/Dialog/index.ts
index f242e5602e..823c17d24f 100644
--- a/packages/mui-base/src/Dialog/index.ts
+++ b/packages/mui-base/src/Dialog/index.ts
@@ -1,7 +1 @@
-export { DialogBackdrop as Backdrop } from './Backdrop/DialogBackdrop';
-export { DialogClose as Close } from './Close/DialogClose';
-export { DialogDescription as Description } from './Description/DialogDescription';
-export { DialogPopup as Popup } from './Popup/DialogPopup';
-export { DialogRoot as Root } from './Root/DialogRoot';
-export { DialogTitle as Title } from './Title/DialogTitle';
-export { DialogTrigger as Trigger } from './Trigger/DialogTrigger';
+export * as Dialog from './index.parts';
diff --git a/packages/mui-base/src/Field/Control/FieldControl.test.tsx b/packages/mui-base/src/Field/Control/FieldControl.test.tsx
index 677cac06af..cf6187722a 100644
--- a/packages/mui-base/src/Field/Control/FieldControl.test.tsx
+++ b/packages/mui-base/src/Field/Control/FieldControl.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Field.Control />', () => {
diff --git a/packages/mui-base/src/Field/Description/FieldDescription.test.tsx b/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
index 56ade9fbfe..c0aa55deca 100644
--- a/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
+++ b/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as Switch from '@base_ui/react/Switch';
-import * as NumberField from '@base_ui/react/NumberField';
-import * as Slider from '@base_ui/react/Slider';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { Field } from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { Switch } from '@base_ui/react/Switch';
+import { NumberField } from '@base_ui/react/NumberField';
+import { Slider } from '@base_ui/react/Slider';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { describeConformance } from '../../../test/describeConformance';
diff --git a/packages/mui-base/src/Field/Error/FieldError.test.tsx b/packages/mui-base/src/Field/Error/FieldError.test.tsx
index 0fb6ea967b..1255e35983 100644
--- a/packages/mui-base/src/Field/Error/FieldError.test.tsx
+++ b/packages/mui-base/src/Field/Error/FieldError.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Field.Error />', () => {
diff --git a/packages/mui-base/src/Field/Label/FieldLabel.test.tsx b/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
index c1cf8d6453..39424f57cb 100644
--- a/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
+++ b/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as Switch from '@base_ui/react/Switch';
-import * as NumberField from '@base_ui/react/NumberField';
-import * as Slider from '@base_ui/react/Slider';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { Field } from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { Switch } from '@base_ui/react/Switch';
+import { NumberField } from '@base_ui/react/NumberField';
+import { Slider } from '@base_ui/react/Slider';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { describeConformance } from '../../../test/describeConformance';
diff --git a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
index a488d80536..8fe0d8b657 100644
--- a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
+++ b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import * as Field from '@base_ui/react/Field';
-import * as Checkbox from '@base_ui/react/Checkbox';
-import * as Switch from '@base_ui/react/Switch';
-import * as NumberField from '@base_ui/react/NumberField';
-import * as Slider from '@base_ui/react/Slider';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { Field } from '@base_ui/react/Field';
+import { Checkbox } from '@base_ui/react/Checkbox';
+import { Switch } from '@base_ui/react/Switch';
+import { NumberField } from '@base_ui/react/NumberField';
+import { Slider } from '@base_ui/react/Slider';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import userEvent from '@testing-library/user-event';
 import {
   act,
diff --git a/packages/mui-base/src/Field/Validity/FieldValidity.test.tsx b/packages/mui-base/src/Field/Validity/FieldValidity.test.tsx
index 8974a440bb..98ba936da0 100644
--- a/packages/mui-base/src/Field/Validity/FieldValidity.test.tsx
+++ b/packages/mui-base/src/Field/Validity/FieldValidity.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import * as Field from '@base_ui/react/Field';
+import { Field } from '@base_ui/react/Field';
 
 describe('<Field.Validity />', () => {
   const { render } = createRenderer();
diff --git a/packages/mui-base/src/Field/index.barrel.ts b/packages/mui-base/src/Field/index.barrel.ts
deleted file mode 100644
index e9604532cf..0000000000
--- a/packages/mui-base/src/Field/index.barrel.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './Root/FieldRoot';
-export * from './Label/FieldLabel';
-export * from './Error/FieldError';
-export * from './Description/FieldDescription';
-export * from './Control/FieldControl';
-export * from './Validity/FieldValidity';
-
-export type { FieldValidityData } from './Root/FieldRoot';
diff --git a/packages/mui-base/src/Field/index.parts.ts b/packages/mui-base/src/Field/index.parts.ts
new file mode 100644
index 0000000000..caded13966
--- /dev/null
+++ b/packages/mui-base/src/Field/index.parts.ts
@@ -0,0 +1,8 @@
+export { FieldRoot as Root } from './Root/FieldRoot';
+export { FieldLabel as Label } from './Label/FieldLabel';
+export { FieldError as Error } from './Error/FieldError';
+export { FieldDescription as Description } from './Description/FieldDescription';
+export { FieldControl as Control } from './Control/FieldControl';
+export { FieldValidity as Validity } from './Validity/FieldValidity';
+
+export type { FieldValidityData as ValidityData } from './Root/FieldRoot';
diff --git a/packages/mui-base/src/Field/index.ts b/packages/mui-base/src/Field/index.ts
index caded13966..45425dec2e 100644
--- a/packages/mui-base/src/Field/index.ts
+++ b/packages/mui-base/src/Field/index.ts
@@ -1,8 +1 @@
-export { FieldRoot as Root } from './Root/FieldRoot';
-export { FieldLabel as Label } from './Label/FieldLabel';
-export { FieldError as Error } from './Error/FieldError';
-export { FieldDescription as Description } from './Description/FieldDescription';
-export { FieldControl as Control } from './Control/FieldControl';
-export { FieldValidity as Validity } from './Validity/FieldValidity';
-
-export type { FieldValidityData as ValidityData } from './Root/FieldRoot';
+export * as Field from './index.parts';
diff --git a/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.test.tsx b/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.test.tsx
index 101280858e..44b65dc34a 100644
--- a/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.test.tsx
+++ b/packages/mui-base/src/Fieldset/Legend/FieldsetLegend.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer, screen } from '@mui/internal-test-utils';
-import * as Fieldset from '@base_ui/react/Fieldset';
+import { Fieldset } from '@base_ui/react/Fieldset';
 import { expect } from 'chai';
 import { describeConformance } from '../../../test/describeConformance';
 
diff --git a/packages/mui-base/src/Fieldset/Root/FieldsetRoot.test.tsx b/packages/mui-base/src/Fieldset/Root/FieldsetRoot.test.tsx
index a397f47d9c..1172c88a78 100644
--- a/packages/mui-base/src/Fieldset/Root/FieldsetRoot.test.tsx
+++ b/packages/mui-base/src/Fieldset/Root/FieldsetRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Fieldset from '@base_ui/react/Fieldset';
+import { Fieldset } from '@base_ui/react/Fieldset';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Fieldset.Root />', () => {
diff --git a/packages/mui-base/src/Fieldset/index.barrel.ts b/packages/mui-base/src/Fieldset/index.barrel.ts
deleted file mode 100644
index b5a4cbaf40..0000000000
--- a/packages/mui-base/src/Fieldset/index.barrel.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Root/FieldsetRoot';
-export * from './Legend/FieldsetLegend';
diff --git a/packages/mui-base/src/Fieldset/index.parts.ts b/packages/mui-base/src/Fieldset/index.parts.ts
new file mode 100644
index 0000000000..ee2ae05cbc
--- /dev/null
+++ b/packages/mui-base/src/Fieldset/index.parts.ts
@@ -0,0 +1,2 @@
+export { FieldsetRoot as Root } from './Root/FieldsetRoot';
+export { FieldsetLegend as Legend } from './Legend/FieldsetLegend';
diff --git a/packages/mui-base/src/Fieldset/index.ts b/packages/mui-base/src/Fieldset/index.ts
index ee2ae05cbc..1320ce1903 100644
--- a/packages/mui-base/src/Fieldset/index.ts
+++ b/packages/mui-base/src/Fieldset/index.ts
@@ -1,2 +1 @@
-export { FieldsetRoot as Root } from './Root/FieldsetRoot';
-export { FieldsetLegend as Legend } from './Legend/FieldsetLegend';
+export * as Fieldset from './index.parts';
diff --git a/packages/mui-base/src/Form/Root/FormRoot.test.tsx b/packages/mui-base/src/Form/Root/FormRoot.test.tsx
index ae08084c84..bfaca78d85 100644
--- a/packages/mui-base/src/Form/Root/FormRoot.test.tsx
+++ b/packages/mui-base/src/Form/Root/FormRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Form from '@base_ui/react/Form';
-import * as Field from '@base_ui/react/Field';
+import { Form } from '@base_ui/react/Form';
+import { Field } from '@base_ui/react/Field';
 import { expect } from 'chai';
 import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { describeConformance } from '../../../test/describeConformance';
diff --git a/packages/mui-base/src/Form/index.barrel.ts b/packages/mui-base/src/Form/index.barrel.ts
deleted file mode 100644
index acab7f4296..0000000000
--- a/packages/mui-base/src/Form/index.barrel.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FormRoot } from './Root/FormRoot';
diff --git a/packages/mui-base/src/Form/index.parts.ts b/packages/mui-base/src/Form/index.parts.ts
new file mode 100644
index 0000000000..896025accf
--- /dev/null
+++ b/packages/mui-base/src/Form/index.parts.ts
@@ -0,0 +1 @@
+export { FormRoot as Root } from './Root/FormRoot';
diff --git a/packages/mui-base/src/Form/index.ts b/packages/mui-base/src/Form/index.ts
index 896025accf..75652f7f18 100644
--- a/packages/mui-base/src/Form/index.ts
+++ b/packages/mui-base/src/Form/index.ts
@@ -1 +1 @@
-export { FormRoot as Root } from './Root/FormRoot';
+export * as Form from './index.parts';
diff --git a/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx b/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx
index 231e31d1e8..ac92bb6332 100644
--- a/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx
+++ b/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.Arrow />', () => {
diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
index f5556ec08d..0fdfc709cc 100644
--- a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
+++ b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { fireEvent, act, waitFor } from '@mui/internal-test-utils';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '../../../test';
 import { MenuRootContext } from '../Root/MenuRootContext';
 
diff --git a/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.test.tsx b/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.test.tsx
index dd0cfefae8..7699225663 100644
--- a/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.test.tsx
+++ b/packages/mui-base/src/Menu/CheckboxItemIndicator/MenuCheckboxItemIndicator.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.CheckboxItemIndicator />', () => {
diff --git a/packages/mui-base/src/Menu/Group/MenuGroup.test.tsx b/packages/mui-base/src/Menu/Group/MenuGroup.test.tsx
index 93d0e37d02..d21fa87b86 100644
--- a/packages/mui-base/src/Menu/Group/MenuGroup.test.tsx
+++ b/packages/mui-base/src/Menu/Group/MenuGroup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.Group />', () => {
diff --git a/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.test.tsx b/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.test.tsx
index ec699ef3ad..335aa8f2e2 100644
--- a/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.test.tsx
+++ b/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 import { MenuGroupContext } from '../Group/MenuGroupContext';
 
diff --git a/packages/mui-base/src/Menu/Item/MenuItem.test.tsx b/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
index b15b428070..918d08d8f5 100644
--- a/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
+++ b/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { act, waitFor } from '@mui/internal-test-utils';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '#test-utils';
 import { MenuRootContext } from '../Root/MenuRootContext';
 
diff --git a/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx b/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx
index 2cfffd2be9..6c6542b65d 100644
--- a/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx
+++ b/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
 import { createRenderer, describeConformance } from '#test-utils';
 import { MenuPositionerContext } from '../Positioner/MenuPositionerContext';
diff --git a/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx b/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx
index d61c2bce6a..2a89d5f0c3 100644
--- a/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx
+++ b/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
 import userEvent from '@testing-library/user-event';
 import { flushMicrotasks } from '@mui/internal-test-utils';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '#test-utils';
 import { MenuRootContext } from '../Root/MenuRootContext';
 
diff --git a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx
index 0116f9c17d..d3dc7223cf 100644
--- a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx
+++ b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.RadioGroup />', () => {
diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
index 2217efe785..55f1b5910a 100644
--- a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
+++ b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { fireEvent, act, waitFor } from '@mui/internal-test-utils';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '#test-utils';
 import { MenuRadioGroupContext } from '../RadioGroup/MenuRadioGroupContext';
 import { MenuRootContext } from '../Root/MenuRootContext';
diff --git a/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.test.tsx b/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.test.tsx
index 023aa4437a..429b7b793b 100644
--- a/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.test.tsx
+++ b/packages/mui-base/src/Menu/RadioItemIndicator/MenuRadioItemIndicator.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Menu.RadioItemIndicator />', () => {
diff --git a/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx b/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
index b3b41ad617..591247046d 100644
--- a/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
+++ b/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act, flushMicrotasks, waitFor } from '@mui/internal-test-utils';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import userEvent from '@testing-library/user-event';
 import { spy } from 'sinon';
 import { createRenderer } from '#test-utils';
diff --git a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
index 48a7da22e8..1723748e0d 100644
--- a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
+++ b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
 import userEvent from '@testing-library/user-event';
 import { act } from '@mui/internal-test-utils';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 import { describeConformance, createRenderer } from '#test-utils';
 import { MenuRootContext } from '../Root/MenuRootContext';
 
diff --git a/packages/mui-base/src/Menu/index.barrel.ts b/packages/mui-base/src/Menu/index.barrel.ts
deleted file mode 100644
index 166bf5c678..0000000000
--- a/packages/mui-base/src/Menu/index.barrel.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export { MenuArrow } from './Arrow/MenuArrow';
-export { MenuCheckboxItem } from './CheckboxItem/MenuCheckboxItem';
-export { MenuCheckboxItemIndicator } from './CheckboxItemIndicator/MenuCheckboxItemIndicator';
-export { MenuGroup } from './Group/MenuGroup';
-export { MenuGroupLabel } from './GroupLabel/MenuGroupLabel';
-export { MenuItem } from './Item/MenuItem';
-export { MenuPopup } from './Popup/MenuPopup';
-export { MenuPositioner } from './Positioner/MenuPositioner';
-export { MenuRadioGroup } from './RadioGroup/MenuRadioGroup';
-export { MenuRadioItem } from './RadioItem/MenuRadioItem';
-export { MenuRadioItemIndicator } from './RadioItemIndicator/MenuRadioItemIndicator';
-export { MenuRoot } from './Root/MenuRoot';
-export { MenuTrigger } from './Trigger/MenuTrigger';
-export { SubmenuTrigger } from './SubmenuTrigger/SubmenuTrigger';
diff --git a/packages/mui-base/src/Menu/index.parts.ts b/packages/mui-base/src/Menu/index.parts.ts
new file mode 100644
index 0000000000..ac63a706d5
--- /dev/null
+++ b/packages/mui-base/src/Menu/index.parts.ts
@@ -0,0 +1,15 @@
+export { MenuArrow as Arrow } from './Arrow/MenuArrow';
+export { MenuCheckboxItem as CheckboxItem } from './CheckboxItem/MenuCheckboxItem';
+export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from './CheckboxItemIndicator/MenuCheckboxItemIndicator';
+export { MenuGroup as Group } from './Group/MenuGroup';
+export { MenuGroupLabel as GroupLabel } from './GroupLabel/MenuGroupLabel';
+export { MenuItem as Item } from './Item/MenuItem';
+export { MenuPopup as Popup } from './Popup/MenuPopup';
+export { MenuPositioner as Positioner } from './Positioner/MenuPositioner';
+export { MenuRadioGroup as RadioGroup } from './RadioGroup/MenuRadioGroup';
+export { MenuRadioItem as RadioItem } from './RadioItem/MenuRadioItem';
+export { MenuRadioItemIndicator as RadioItemIndicator } from './RadioItemIndicator/MenuRadioItemIndicator';
+export { MenuRoot as Root } from './Root/MenuRoot';
+export { MenuTrigger as Trigger } from './Trigger/MenuTrigger';
+export { SeparatorRoot as Separator } from '../Separator/Root/SeparatorRoot';
+export { SubmenuTrigger } from './SubmenuTrigger/SubmenuTrigger';
diff --git a/packages/mui-base/src/Menu/index.ts b/packages/mui-base/src/Menu/index.ts
index ac63a706d5..515d1290d8 100644
--- a/packages/mui-base/src/Menu/index.ts
+++ b/packages/mui-base/src/Menu/index.ts
@@ -1,15 +1 @@
-export { MenuArrow as Arrow } from './Arrow/MenuArrow';
-export { MenuCheckboxItem as CheckboxItem } from './CheckboxItem/MenuCheckboxItem';
-export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from './CheckboxItemIndicator/MenuCheckboxItemIndicator';
-export { MenuGroup as Group } from './Group/MenuGroup';
-export { MenuGroupLabel as GroupLabel } from './GroupLabel/MenuGroupLabel';
-export { MenuItem as Item } from './Item/MenuItem';
-export { MenuPopup as Popup } from './Popup/MenuPopup';
-export { MenuPositioner as Positioner } from './Positioner/MenuPositioner';
-export { MenuRadioGroup as RadioGroup } from './RadioGroup/MenuRadioGroup';
-export { MenuRadioItem as RadioItem } from './RadioItem/MenuRadioItem';
-export { MenuRadioItemIndicator as RadioItemIndicator } from './RadioItemIndicator/MenuRadioItemIndicator';
-export { MenuRoot as Root } from './Root/MenuRoot';
-export { MenuTrigger as Trigger } from './Trigger/MenuTrigger';
-export { SeparatorRoot as Separator } from '../Separator/Root/SeparatorRoot';
-export { SubmenuTrigger } from './SubmenuTrigger/SubmenuTrigger';
+export * as Menu from './index.parts';
diff --git a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx
index 3f03e23754..ad08006575 100644
--- a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx
+++ b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen, fireEvent } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY } from '../utils/constants';
 import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
diff --git a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx
index 627a328a73..167d3c78be 100644
--- a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx
+++ b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
 
diff --git a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx
index b91b0634ff..5b18c69634 100644
--- a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx
+++ b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen, fireEvent } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY } from '../utils/constants';
 import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
diff --git a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
index be1320601a..ffa6e13487 100644
--- a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
+++ b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act, screen, fireEvent } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
 
diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
index 24b9547e17..f9f0e6aae2 100644
--- a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
+++ b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, screen, fireEvent } from '@mui/internal-test-utils';
-import * as NumberFieldBase from '@base_ui/react/NumberField';
+import { NumberField as NumberFieldBase } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<NumberField />', () => {
diff --git a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx
index 6f29e02a27..05b9ba8daf 100644
--- a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx
+++ b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen, waitFor } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { isWebKit } from '../../utils/detectBrowser';
 import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
diff --git a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx
index a0f31546d7..72d956b207 100644
--- a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx
+++ b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen } from '@mui/internal-test-utils';
-import * as NumberField from '@base_ui/react/NumberField';
+import { NumberField } from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { isWebKit } from '../../utils/detectBrowser';
 import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
diff --git a/packages/mui-base/src/NumberField/index.barrel.ts b/packages/mui-base/src/NumberField/index.barrel.ts
deleted file mode 100644
index c11c363b24..0000000000
--- a/packages/mui-base/src/NumberField/index.barrel.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { NumberFieldRoot } from './Root/NumberFieldRoot';
-export { NumberFieldGroup } from './Group/NumberFieldGroup';
-export { NumberFieldIncrement } from './Increment/NumberFieldIncrement';
-export { NumberFieldDecrement } from './Decrement/NumberFieldDecrement';
-export { NumberFieldInput } from './Input/NumberFieldInput';
-export { NumberFieldScrubArea } from './ScrubArea/NumberFieldScrubArea';
-export { NumberFieldScrubAreaCursor } from './ScrubAreaCursor/NumberFieldScrubAreaCursor';
diff --git a/packages/mui-base/src/NumberField/index.parts.ts b/packages/mui-base/src/NumberField/index.parts.ts
new file mode 100644
index 0000000000..1f0f7cd871
--- /dev/null
+++ b/packages/mui-base/src/NumberField/index.parts.ts
@@ -0,0 +1,7 @@
+export { NumberFieldRoot as Root } from './Root/NumberFieldRoot';
+export { NumberFieldGroup as Group } from './Group/NumberFieldGroup';
+export { NumberFieldIncrement as Increment } from './Increment/NumberFieldIncrement';
+export { NumberFieldDecrement as Decrement } from './Decrement/NumberFieldDecrement';
+export { NumberFieldInput as Input } from './Input/NumberFieldInput';
+export { NumberFieldScrubArea as ScrubArea } from './ScrubArea/NumberFieldScrubArea';
+export { NumberFieldScrubAreaCursor as ScrubAreaCursor } from './ScrubAreaCursor/NumberFieldScrubAreaCursor';
diff --git a/packages/mui-base/src/NumberField/index.ts b/packages/mui-base/src/NumberField/index.ts
index 1f0f7cd871..e97deaf602 100644
--- a/packages/mui-base/src/NumberField/index.ts
+++ b/packages/mui-base/src/NumberField/index.ts
@@ -1,7 +1 @@
-export { NumberFieldRoot as Root } from './Root/NumberFieldRoot';
-export { NumberFieldGroup as Group } from './Group/NumberFieldGroup';
-export { NumberFieldIncrement as Increment } from './Increment/NumberFieldIncrement';
-export { NumberFieldDecrement as Decrement } from './Decrement/NumberFieldDecrement';
-export { NumberFieldInput as Input } from './Input/NumberFieldInput';
-export { NumberFieldScrubArea as ScrubArea } from './ScrubArea/NumberFieldScrubArea';
-export { NumberFieldScrubAreaCursor as ScrubAreaCursor } from './ScrubAreaCursor/NumberFieldScrubAreaCursor';
+export * as NumberField from './index.parts';
diff --git a/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx b/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx
index f65456fa2d..3a4642d492 100644
--- a/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx
+++ b/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Popover.Arrow />', () => {
diff --git a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx
index 4ac40c8778..98dccd1c0d 100644
--- a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx
+++ b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Popover.Backdrop />', () => {
diff --git a/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx b/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx
index afae2d7421..c1c5f89d84 100644
--- a/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx
+++ b/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { fireEvent, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx b/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx
index ee77306db8..0a50267667 100644
--- a/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx
+++ b/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx b/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx
index 6475a31627..f3f3b6809b 100644
--- a/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx
+++ b/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
index 826b63acb8..f784a5109b 100644
--- a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
+++ b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
index 1beb906953..029c349c1e 100644
--- a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
+++ b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { fireEvent, flushMicrotasks, screen, waitFor } from '@mui/internal-test-utils';
 import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
diff --git a/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx b/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx
index 9898507ba9..3b039e6c25 100644
--- a/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx
+++ b/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx
index 2a6f1879ac..9bb0c77738 100644
--- a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx
+++ b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Popover from '@base_ui/react/Popover';
+import { Popover } from '@base_ui/react/Popover';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Popover.Trigger />', () => {
diff --git a/packages/mui-base/src/Popover/index.barrel.ts b/packages/mui-base/src/Popover/index.barrel.ts
deleted file mode 100644
index d970c32aba..0000000000
--- a/packages/mui-base/src/Popover/index.barrel.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { PopoverRoot } from './Root/PopoverRoot';
-export { PopoverTrigger } from './Trigger/PopoverTrigger';
-export { PopoverPositioner } from './Positioner/PopoverPositioner';
-export { PopoverPopup } from './Popup/PopoverPopup';
-export { PopoverArrow } from './Arrow/PopoverArrow';
-export { PopoverBackdrop } from './Backdrop/PopoverBackdrop';
-export { PopoverTitle } from './Title/PopoverTitle';
-export { PopoverDescription } from './Description/PopoverDescription';
-export { PopoverClose } from './Close/PopoverClose';
diff --git a/packages/mui-base/src/Popover/index.parts.ts b/packages/mui-base/src/Popover/index.parts.ts
new file mode 100644
index 0000000000..a025e39621
--- /dev/null
+++ b/packages/mui-base/src/Popover/index.parts.ts
@@ -0,0 +1,9 @@
+export { PopoverRoot as Root } from './Root/PopoverRoot';
+export { PopoverTrigger as Trigger } from './Trigger/PopoverTrigger';
+export { PopoverPositioner as Positioner } from './Positioner/PopoverPositioner';
+export { PopoverPopup as Popup } from './Popup/PopoverPopup';
+export { PopoverArrow as Arrow } from './Arrow/PopoverArrow';
+export { PopoverBackdrop as Backdrop } from './Backdrop/PopoverBackdrop';
+export { PopoverTitle as Title } from './Title/PopoverTitle';
+export { PopoverDescription as Description } from './Description/PopoverDescription';
+export { PopoverClose as Close } from './Close/PopoverClose';
diff --git a/packages/mui-base/src/Popover/index.ts b/packages/mui-base/src/Popover/index.ts
index a025e39621..9d2d8d70b5 100644
--- a/packages/mui-base/src/Popover/index.ts
+++ b/packages/mui-base/src/Popover/index.ts
@@ -1,9 +1 @@
-export { PopoverRoot as Root } from './Root/PopoverRoot';
-export { PopoverTrigger as Trigger } from './Trigger/PopoverTrigger';
-export { PopoverPositioner as Positioner } from './Positioner/PopoverPositioner';
-export { PopoverPopup as Popup } from './Popup/PopoverPopup';
-export { PopoverArrow as Arrow } from './Arrow/PopoverArrow';
-export { PopoverBackdrop as Backdrop } from './Backdrop/PopoverBackdrop';
-export { PopoverTitle as Title } from './Title/PopoverTitle';
-export { PopoverDescription as Description } from './Description/PopoverDescription';
-export { PopoverClose as Close } from './Close/PopoverClose';
+export * as Popover from './index.parts';
diff --git a/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx b/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx
index 5fa3656de1..4ba368f3c8 100644
--- a/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Arrow />', () => {
diff --git a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx
index 92bba7d844..41bef53f61 100644
--- a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Backdrop />', () => {
diff --git a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx
index b7568d8e5f..9f417277cc 100644
--- a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx
index 30ce4ce86a..1c57cda678 100644
--- a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Positioner />', () => {
diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
index 14d80b1e64..b379c31fe4 100644
--- a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { act, fireEvent, screen, flushMicrotasks } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
diff --git a/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx b/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx
index 8afd7ddc5c..6051aafcc2 100644
--- a/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx
+++ b/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { PreviewCard } from '@base_ui/react/PreviewCard';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Trigger />', () => {
diff --git a/packages/mui-base/src/PreviewCard/index.barrel.ts b/packages/mui-base/src/PreviewCard/index.barrel.ts
deleted file mode 100644
index 685af207d5..0000000000
--- a/packages/mui-base/src/PreviewCard/index.barrel.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { PreviewCardRoot } from './Root/PreviewCardRoot';
-export { PreviewCardTrigger } from './Trigger/PreviewCardTrigger';
-export { PreviewCardPositioner } from './Positioner/PreviewCardPositioner';
-export { PreviewCardPopup } from './Popup/PreviewCardPopup';
-export { PreviewCardArrow } from './Arrow/PreviewCardArrow';
-export { PreviewCardBackdrop } from './Backdrop/PreviewCardBackdrop';
diff --git a/packages/mui-base/src/PreviewCard/index.parts.ts b/packages/mui-base/src/PreviewCard/index.parts.ts
new file mode 100644
index 0000000000..291940ad66
--- /dev/null
+++ b/packages/mui-base/src/PreviewCard/index.parts.ts
@@ -0,0 +1,6 @@
+export { PreviewCardRoot as Root } from './Root/PreviewCardRoot';
+export { PreviewCardTrigger as Trigger } from './Trigger/PreviewCardTrigger';
+export { PreviewCardPositioner as Positioner } from './Positioner/PreviewCardPositioner';
+export { PreviewCardPopup as Popup } from './Popup/PreviewCardPopup';
+export { PreviewCardArrow as Arrow } from './Arrow/PreviewCardArrow';
+export { PreviewCardBackdrop as Backdrop } from './Backdrop/PreviewCardBackdrop';
diff --git a/packages/mui-base/src/PreviewCard/index.ts b/packages/mui-base/src/PreviewCard/index.ts
index 291940ad66..848affb96f 100644
--- a/packages/mui-base/src/PreviewCard/index.ts
+++ b/packages/mui-base/src/PreviewCard/index.ts
@@ -1,6 +1 @@
-export { PreviewCardRoot as Root } from './Root/PreviewCardRoot';
-export { PreviewCardTrigger as Trigger } from './Trigger/PreviewCardTrigger';
-export { PreviewCardPositioner as Positioner } from './Positioner/PreviewCardPositioner';
-export { PreviewCardPopup as Popup } from './Popup/PreviewCardPopup';
-export { PreviewCardArrow as Arrow } from './Arrow/PreviewCardArrow';
-export { PreviewCardBackdrop as Backdrop } from './Backdrop/PreviewCardBackdrop';
+export * as PreviewCard from './index.parts';
diff --git a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
index 33256bf379..a2012fb4c2 100644
--- a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
+++ b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
 import { ProgressRootContext } from '../Root/ProgressRootContext';
 
diff --git a/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx b/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
index 1e9e12fca3..344f4d9819 100644
--- a/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
+++ b/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
 import type { ProgressRoot } from './ProgressRoot';
 
diff --git a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
index 197207bfae..27e8c204a4 100644
--- a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
+++ b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 import { createRenderer, describeConformance } from '#test-utils';
 import { ProgressRootContext } from '../Root/ProgressRootContext';
 
diff --git a/packages/mui-base/src/Progress/index.barrel.ts b/packages/mui-base/src/Progress/index.barrel.ts
deleted file mode 100644
index 677acec64c..0000000000
--- a/packages/mui-base/src/Progress/index.barrel.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { ProgressRoot } from './Root/ProgressRoot';
-export { ProgressTrack } from './Track/ProgressTrack';
-export { ProgressIndicator } from './Indicator/ProgressIndicator';
-
-export type {
-  ProgressStatus as Status,
-  ProgressDirection as Direction,
-} from './Root/useProgressRoot';
diff --git a/packages/mui-base/src/Progress/index.parts.ts b/packages/mui-base/src/Progress/index.parts.ts
new file mode 100644
index 0000000000..5e0d1453f4
--- /dev/null
+++ b/packages/mui-base/src/Progress/index.parts.ts
@@ -0,0 +1,8 @@
+export { ProgressRoot as Root } from './Root/ProgressRoot';
+export { ProgressTrack as Track } from './Track/ProgressTrack';
+export { ProgressIndicator as Indicator } from './Indicator/ProgressIndicator';
+
+export type {
+  ProgressStatus as Status,
+  ProgressDirection as Direction,
+} from './Root/useProgressRoot';
diff --git a/packages/mui-base/src/Progress/index.ts b/packages/mui-base/src/Progress/index.ts
index 5e0d1453f4..ee913fe81a 100644
--- a/packages/mui-base/src/Progress/index.ts
+++ b/packages/mui-base/src/Progress/index.ts
@@ -1,8 +1 @@
-export { ProgressRoot as Root } from './Root/ProgressRoot';
-export { ProgressTrack as Track } from './Track/ProgressTrack';
-export { ProgressIndicator as Indicator } from './Indicator/ProgressIndicator';
-
-export type {
-  ProgressStatus as Status,
-  ProgressDirection as Direction,
-} from './Root/useProgressRoot';
+export * as Progress from './index.parts';
diff --git a/packages/mui-base/src/Radio/Indicator/RadioIndicator.test.tsx b/packages/mui-base/src/Radio/Indicator/RadioIndicator.test.tsx
index d2d03649d1..9250c941fa 100644
--- a/packages/mui-base/src/Radio/Indicator/RadioIndicator.test.tsx
+++ b/packages/mui-base/src/Radio/Indicator/RadioIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Radio from '@base_ui/react/Radio';
+import { Radio } from '@base_ui/react/Radio';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Radio.Indicator />', () => {
diff --git a/packages/mui-base/src/Radio/Root/RadioRoot.test.tsx b/packages/mui-base/src/Radio/Root/RadioRoot.test.tsx
index cc117d3580..75fac1a111 100644
--- a/packages/mui-base/src/Radio/Root/RadioRoot.test.tsx
+++ b/packages/mui-base/src/Radio/Root/RadioRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
-import * as Radio from '@base_ui/react/Radio';
+import { Radio } from '@base_ui/react/Radio';
 import { describeConformance } from '../../../test/describeConformance';
 
 describe('<Radio.Root />', () => {
diff --git a/packages/mui-base/src/Radio/index.barrel.ts b/packages/mui-base/src/Radio/index.barrel.ts
deleted file mode 100644
index dc4fbc653a..0000000000
--- a/packages/mui-base/src/Radio/index.barrel.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { RadioRoot } from './Root/RadioRoot';
-export { RadioIndicator } from './Indicator/RadioIndicator';
diff --git a/packages/mui-base/src/Radio/index.parts.ts b/packages/mui-base/src/Radio/index.parts.ts
new file mode 100644
index 0000000000..e5baf0747d
--- /dev/null
+++ b/packages/mui-base/src/Radio/index.parts.ts
@@ -0,0 +1,2 @@
+export { RadioRoot as Root } from './Root/RadioRoot';
+export { RadioIndicator as Indicator } from './Indicator/RadioIndicator';
diff --git a/packages/mui-base/src/Radio/index.ts b/packages/mui-base/src/Radio/index.ts
index e5baf0747d..19f101399e 100644
--- a/packages/mui-base/src/Radio/index.ts
+++ b/packages/mui-base/src/Radio/index.ts
@@ -1,2 +1 @@
-export { RadioRoot as Root } from './Root/RadioRoot';
-export { RadioIndicator as Indicator } from './Indicator/RadioIndicator';
+export * as Radio from './index.parts';
diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
index ff9cc5b449..8336d7c4ec 100644
--- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
+++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as RadioGroup from '@base_ui/react/RadioGroup';
-import * as Radio from '@base_ui/react/Radio';
+import { RadioGroup } from '@base_ui/react/RadioGroup';
+import { Radio } from '@base_ui/react/Radio';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, act, screen, fireEvent } from '@mui/internal-test-utils';
diff --git a/packages/mui-base/src/RadioGroup/index.barrel.ts b/packages/mui-base/src/RadioGroup/index.barrel.ts
deleted file mode 100644
index 3d7b2c9369..0000000000
--- a/packages/mui-base/src/RadioGroup/index.barrel.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Root/RadioGroupRoot';
diff --git a/packages/mui-base/src/RadioGroup/index.parts.ts b/packages/mui-base/src/RadioGroup/index.parts.ts
new file mode 100644
index 0000000000..f78d654570
--- /dev/null
+++ b/packages/mui-base/src/RadioGroup/index.parts.ts
@@ -0,0 +1 @@
+export { RadioGroupRoot as Root } from './Root/RadioGroupRoot';
diff --git a/packages/mui-base/src/RadioGroup/index.ts b/packages/mui-base/src/RadioGroup/index.ts
index f78d654570..4dd85fb1eb 100644
--- a/packages/mui-base/src/RadioGroup/index.ts
+++ b/packages/mui-base/src/RadioGroup/index.ts
@@ -1 +1 @@
-export { RadioGroupRoot as Root } from './Root/RadioGroupRoot';
+export * as RadioGroup from './index.parts';
diff --git a/packages/mui-base/src/Separator/Root/SeparatorRoot.test.tsx b/packages/mui-base/src/Separator/Root/SeparatorRoot.test.tsx
index a6b54ae71d..9edbcbd325 100644
--- a/packages/mui-base/src/Separator/Root/SeparatorRoot.test.tsx
+++ b/packages/mui-base/src/Separator/Root/SeparatorRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Separator from '@base_ui/react/Separator';
+import { Separator } from '@base_ui/react/Separator';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Separator.Root />', () => {
diff --git a/packages/mui-base/src/Separator/index.barrel.ts b/packages/mui-base/src/Separator/index.barrel.ts
deleted file mode 100644
index 92574247cc..0000000000
--- a/packages/mui-base/src/Separator/index.barrel.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SeparatorRoot } from './Root/SeparatorRoot';
diff --git a/packages/mui-base/src/Separator/index.parts.ts b/packages/mui-base/src/Separator/index.parts.ts
new file mode 100644
index 0000000000..01851cba2b
--- /dev/null
+++ b/packages/mui-base/src/Separator/index.parts.ts
@@ -0,0 +1 @@
+export { SeparatorRoot as Root } from './Root/SeparatorRoot';
diff --git a/packages/mui-base/src/Separator/index.ts b/packages/mui-base/src/Separator/index.ts
index 01851cba2b..da5e8c68cb 100644
--- a/packages/mui-base/src/Separator/index.ts
+++ b/packages/mui-base/src/Separator/index.ts
@@ -1 +1 @@
-export { SeparatorRoot as Root } from './Root/SeparatorRoot';
+export * as Separator from './index.parts';
diff --git a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx
index 45f5c31eb3..c09ba78a14 100644
--- a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx
+++ b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx
index b5f19049ba..979b288ed8 100644
--- a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx
+++ b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx
index fac49ee9e3..62d26e9c52 100644
--- a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx
+++ b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
index 6a1741c2b7..e6ca53c50f 100644
--- a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
+++ b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx
@@ -2,7 +2,7 @@ import { expect } from 'chai';
 import * as React from 'react';
 import { spy, stub } from 'sinon';
 import { act, fireEvent, screen } from '@mui/internal-test-utils';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { createRenderer, describeConformance } from '#test-utils';
 import type { SliderRootProps } from './SliderRoot.types';
 
diff --git a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx
index 3d65198534..c04cf8180d 100644
--- a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx
+++ b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
index a28829b12e..382583c216 100644
--- a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
+++ b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider/index.parts';
 import { createRenderer, describeConformance } from '#test-utils';
 
 const NOOP = () => {};
diff --git a/packages/mui-base/src/Slider/index.barrel.ts b/packages/mui-base/src/Slider/index.parts.ts
similarity index 53%
rename from packages/mui-base/src/Slider/index.barrel.ts
rename to packages/mui-base/src/Slider/index.parts.ts
index 79a640ba70..be5d9c2dc2 100644
--- a/packages/mui-base/src/Slider/index.barrel.ts
+++ b/packages/mui-base/src/Slider/index.parts.ts
@@ -1,9 +1,18 @@
-export { SliderRoot } from './Root/SliderRoot';
-export type * from './Root/SliderRoot.types';
+export { SliderRoot as Root } from './Root/SliderRoot';
+export type {
+  SliderRootOwnerState as SliderOwnerState,
+  SliderRootProps as RootProps,
+  UseSliderParameters,
+  UseSliderReturnValue,
+  SliderContextValue,
+  SliderProviderValue,
+  SliderThumbMetadata,
+  Axis,
+} from './Root/SliderRoot.types';
 export { useSliderRoot } from './Root/useSliderRoot';
 export * from './Root/SliderProvider';
 
-export { SliderOutput } from './Output/SliderOutput';
+export { SliderOutput as Output } from './Output/SliderOutput';
 export type {
   SliderOutputProps as OutputProps,
   UseSliderOutputParameters,
@@ -11,7 +20,7 @@ export type {
 } from './Output/SliderOutput.types';
 export { useSliderOutput } from './Output/useSliderOutput';
 
-export { SliderControl } from './Control/SliderControl';
+export { SliderControl as Control } from './Control/SliderControl';
 export type {
   SliderControlProps as ControlProps,
   UseSliderControlParameters,
@@ -19,19 +28,19 @@ export type {
 } from './Control/SliderControl.types';
 export { useSliderControl } from './Control/useSliderControl';
 
-export { SliderTrack } from './Track/SliderTrack';
-export type { SliderTrackProps } from './Track/SliderTrack.types';
+export { SliderTrack as Track } from './Track/SliderTrack';
+export type { SliderTrackProps as TrackProps } from './Track/SliderTrack.types';
 
-export { SliderThumb } from './Thumb/SliderThumb';
+export { SliderThumb as Thumb } from './Thumb/SliderThumb';
 export type {
-  SliderThumbOwnerState,
-  SliderThumbProps,
+  SliderThumbOwnerState as ThumbOwnerState,
+  SliderThumbProps as ThumbProps,
   UseSliderThumbParameters,
   UseSliderThumbReturnValue,
 } from './Thumb/SliderThumb.types';
 export { useSliderThumb } from './Thumb/useSliderThumb';
 
-export { SliderIndicator } from './Indicator/SliderIndicator';
+export { SliderIndicator as Indicator } from './Indicator/SliderIndicator';
 export type {
   SliderIndicatorProps as IndicatorProps,
   UseSliderIndicatorParameters,
diff --git a/packages/mui-base/src/Slider/index.ts b/packages/mui-base/src/Slider/index.ts
index be5d9c2dc2..953696abeb 100644
--- a/packages/mui-base/src/Slider/index.ts
+++ b/packages/mui-base/src/Slider/index.ts
@@ -1,49 +1 @@
-export { SliderRoot as Root } from './Root/SliderRoot';
-export type {
-  SliderRootOwnerState as SliderOwnerState,
-  SliderRootProps as RootProps,
-  UseSliderParameters,
-  UseSliderReturnValue,
-  SliderContextValue,
-  SliderProviderValue,
-  SliderThumbMetadata,
-  Axis,
-} from './Root/SliderRoot.types';
-export { useSliderRoot } from './Root/useSliderRoot';
-export * from './Root/SliderProvider';
-
-export { SliderOutput as Output } from './Output/SliderOutput';
-export type {
-  SliderOutputProps as OutputProps,
-  UseSliderOutputParameters,
-  UseSliderOutputReturnValue,
-} from './Output/SliderOutput.types';
-export { useSliderOutput } from './Output/useSliderOutput';
-
-export { SliderControl as Control } from './Control/SliderControl';
-export type {
-  SliderControlProps as ControlProps,
-  UseSliderControlParameters,
-  UseSliderControlReturnValue,
-} from './Control/SliderControl.types';
-export { useSliderControl } from './Control/useSliderControl';
-
-export { SliderTrack as Track } from './Track/SliderTrack';
-export type { SliderTrackProps as TrackProps } from './Track/SliderTrack.types';
-
-export { SliderThumb as Thumb } from './Thumb/SliderThumb';
-export type {
-  SliderThumbOwnerState as ThumbOwnerState,
-  SliderThumbProps as ThumbProps,
-  UseSliderThumbParameters,
-  UseSliderThumbReturnValue,
-} from './Thumb/SliderThumb.types';
-export { useSliderThumb } from './Thumb/useSliderThumb';
-
-export { SliderIndicator as Indicator } from './Indicator/SliderIndicator';
-export type {
-  SliderIndicatorProps as IndicatorProps,
-  UseSliderIndicatorParameters,
-  UseSliderIndicatorReturnValue,
-} from './Indicator/SliderIndicator.types';
-export { useSliderIndicator } from './Indicator/useSliderIndicator';
+export * as Slider from './index.parts';
diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
index ecfc916451..0a612b9982 100644
--- a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
+++ b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, screen } from '@mui/internal-test-utils';
-import * as Switch from '@base_ui/react/Switch';
+import { act, fireEvent, screen } from '@mui/internal-test-utils';
+import { Switch } from '@base_ui/react/Switch';
 import { userEvent } from '@testing-library/user-event';
 import { describeConformance, createRenderer } from '#test-utils';
 
@@ -72,9 +72,8 @@ describe('<Switch.Root />', () => {
 
   describe('extra props', () => {
     it('should override the built-in attributes', async () => {
-      await render(<Switch.Root data-state="checked" role="checkbox" data-testid="switch" />);
+      await render(<Switch.Root role="checkbox" data-testid="switch" />);
       expect(screen.getByTestId('switch')).to.have.attribute('role', 'checkbox');
-      expect(screen.getByTestId('switch')).to.have.attribute('data-state', 'checked');
     });
   });
 
@@ -247,7 +246,7 @@ describe('<Switch.Root />', () => {
   });
 
   it('should place the style hooks on the root and the thumb', async () => {
-    await render(
+    const { setProps } = await render(
       <Switch.Root defaultChecked disabled readOnly required>
         <Switch.Thumb data-testid="thumb" />
       </Switch.Root>,
@@ -256,15 +255,24 @@ describe('<Switch.Root />', () => {
     const switchElement = screen.getByRole('switch');
     const thumb = screen.getByTestId('thumb');
 
-    expect(switchElement).to.have.attribute('data-state', 'checked');
+    expect(switchElement).to.have.attribute('data-checked', '');
     expect(switchElement).to.have.attribute('data-disabled', 'true');
     expect(switchElement).to.have.attribute('data-readonly', 'true');
     expect(switchElement).to.have.attribute('data-required', 'true');
 
-    expect(thumb).to.have.attribute('data-state', 'checked');
+    expect(thumb).to.have.attribute('data-checked', '');
     expect(thumb).to.have.attribute('data-disabled', 'true');
     expect(thumb).to.have.attribute('data-readonly', 'true');
     expect(thumb).to.have.attribute('data-required', 'true');
+
+    setProps({ disabled: false, readOnly: false });
+    fireEvent.click(switchElement);
+
+    expect(switchElement).to.have.attribute('data-unchecked', '');
+    expect(switchElement).not.to.have.attribute('data-checked');
+
+    expect(thumb).to.have.attribute('data-unchecked', '');
+    expect(thumb).not.to.have.attribute('data-checked');
   });
 
   it('should set the name attribute on the input', async () => {
diff --git a/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx b/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
index 9e49e094b7..8f002d66b7 100644
--- a/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
+++ b/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Switch from '@base_ui/react/Switch';
+import { Switch } from '@base_ui/react/Switch';
 import { createRenderer, describeConformance } from '#test-utils';
 import { SwitchRootContext } from '../Root/SwitchRootContext';
 
diff --git a/packages/mui-base/src/Switch/index.barrel.ts b/packages/mui-base/src/Switch/index.barrel.ts
deleted file mode 100644
index f717fab5ad..0000000000
--- a/packages/mui-base/src/Switch/index.barrel.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { SwitchRoot } from './Root/SwitchRoot';
-export { SwitchThumb } from './Thumb/SwitchThumb';
diff --git a/packages/mui-base/src/Switch/index.parts.ts b/packages/mui-base/src/Switch/index.parts.ts
new file mode 100644
index 0000000000..7edb4a4336
--- /dev/null
+++ b/packages/mui-base/src/Switch/index.parts.ts
@@ -0,0 +1,2 @@
+export { SwitchRoot as Root } from './Root/SwitchRoot';
+export { SwitchThumb as Thumb } from './Thumb/SwitchThumb';
diff --git a/packages/mui-base/src/Switch/index.ts b/packages/mui-base/src/Switch/index.ts
index 7edb4a4336..4b7a983cb3 100644
--- a/packages/mui-base/src/Switch/index.ts
+++ b/packages/mui-base/src/Switch/index.ts
@@ -1,2 +1 @@
-export { SwitchRoot as Root } from './Root/SwitchRoot';
-export { SwitchThumb as Thumb } from './Thumb/SwitchThumb';
+export * as Switch from './index.parts';
diff --git a/packages/mui-base/src/Switch/styleHooks.ts b/packages/mui-base/src/Switch/styleHooks.ts
index 0c8fd40aba..c95bcd792a 100644
--- a/packages/mui-base/src/Switch/styleHooks.ts
+++ b/packages/mui-base/src/Switch/styleHooks.ts
@@ -2,5 +2,15 @@ import type { SwitchRoot } from './Root/SwitchRoot';
 import type { CustomStyleHookMapping } from '../utils/getStyleHookProps';
 
 export const styleHookMapping: CustomStyleHookMapping<SwitchRoot.OwnerState> = {
-  checked: (value) => ({ 'data-state': value ? 'checked' : 'unchecked' }),
+  checked(value): Record<string, string> {
+    if (value) {
+      return {
+        'data-checked': '',
+      };
+    }
+
+    return {
+      'data-unchecked': '',
+    };
+  },
 };
diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
index 24900b5a28..30be9b3508 100644
--- a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
+++ b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, fireEvent, screen } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Tabs.Root />', () => {
diff --git a/packages/mui-base/src/Tabs/Tab/Tab.test.tsx b/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
index 328052085d..5a899d1fb5 100644
--- a/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
+++ b/packages/mui-base/src/Tabs/Tab/Tab.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
 import { TabsListProviderValue, TabsListProvider } from '../TabsList/TabsListProvider';
 import { TabsRootContext } from '../Root/TabsRootContext';
diff --git a/packages/mui-base/src/Tabs/Tab/useTab.test.tsx b/packages/mui-base/src/Tabs/Tab/useTab.test.tsx
index 34b550ee9b..7d7e5a3041 100644
--- a/packages/mui-base/src/Tabs/Tab/useTab.test.tsx
+++ b/packages/mui-base/src/Tabs/Tab/useTab.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTab } from './useTab';
 
 describe('useTab', () => {
diff --git a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx
index 7cfbe38a87..16b755f0df 100644
--- a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx
+++ b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { waitFor } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';
 
diff --git a/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx b/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
index b17e0b994b..727044873a 100644
--- a/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
 import { TabsProvider, TabsProviderValue } from '../Root/TabsProvider';
 
diff --git a/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx b/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
index 3e9b644a92..bbbe3ba408 100644
--- a/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
+++ b/packages/mui-base/src/Tabs/TabPanel/useTabPanel.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTabPanel } from './useTabPanel';
 
 describe('useTabPanel', () => {
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
index 959a65bca9..9f040541c5 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { createRenderer, describeConformance } from '#test-utils';
 import { TabsRootContext } from '../Root/TabsRootContext';
 
diff --git a/packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx b/packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx
index 5efc61429e..7a89c7d6df 100644
--- a/packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
-import * as Tabs from '@base_ui/react/Tabs';
+import { Tabs } from '@base_ui/react/Tabs';
 import { useTabsList } from './useTabsList';
 
 describe('useTabsList', () => {
diff --git a/packages/mui-base/src/Tabs/index.barrel.ts b/packages/mui-base/src/Tabs/index.barrel.ts
deleted file mode 100644
index d8c499e9e6..0000000000
--- a/packages/mui-base/src/Tabs/index.barrel.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { TabsRoot } from './Root/TabsRoot';
-export { Tab } from './Tab/Tab';
-export { TabIndicator } from './TabIndicator/TabIndicator';
-export { TabPanel } from './TabPanel/TabPanel';
-export { TabsList } from './TabsList/TabsList';
diff --git a/packages/mui-base/src/Tabs/index.parts.ts b/packages/mui-base/src/Tabs/index.parts.ts
new file mode 100644
index 0000000000..acb9d122d3
--- /dev/null
+++ b/packages/mui-base/src/Tabs/index.parts.ts
@@ -0,0 +1,5 @@
+export { TabsRoot as Root } from './Root/TabsRoot';
+export { Tab } from './Tab/Tab';
+export { TabIndicator as Indicator } from './TabIndicator/TabIndicator';
+export { TabPanel as Panel } from './TabPanel/TabPanel';
+export { TabsList as List } from './TabsList/TabsList';
diff --git a/packages/mui-base/src/Tabs/index.ts b/packages/mui-base/src/Tabs/index.ts
index acb9d122d3..10ed66c376 100644
--- a/packages/mui-base/src/Tabs/index.ts
+++ b/packages/mui-base/src/Tabs/index.ts
@@ -1,5 +1 @@
-export { TabsRoot as Root } from './Root/TabsRoot';
-export { Tab } from './Tab/Tab';
-export { TabIndicator as Indicator } from './TabIndicator/TabIndicator';
-export { TabPanel as Panel } from './TabPanel/TabPanel';
-export { TabsList as List } from './TabsList/TabsList';
+export * as Tabs from './index.parts';
diff --git a/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.test.tsx b/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.test.tsx
index 53fda0b478..f7311dd8d6 100644
--- a/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.test.tsx
+++ b/packages/mui-base/src/Tooltip/Arrow/TooltipArrow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Tooltip.Arrow />', () => {
diff --git a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx
index 8841512bb5..b0fa70b6cb 100644
--- a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx
+++ b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
diff --git a/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx b/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx
index 7d8af1460e..eba09c7535 100644
--- a/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx
+++ b/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Tooltip.Positioner />', () => {
diff --git a/packages/mui-base/src/Tooltip/Provider/TooltipProvider.test.tsx b/packages/mui-base/src/Tooltip/Provider/TooltipProvider.test.tsx
index 9fd5b8acb6..503541aff9 100644
--- a/packages/mui-base/src/Tooltip/Provider/TooltipProvider.test.tsx
+++ b/packages/mui-base/src/Tooltip/Provider/TooltipProvider.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { screen, fireEvent, flushMicrotasks } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer } from '#test-utils';
diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
index a73c749016..809bc2ce66 100644
--- a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
+++ b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { act, fireEvent, flushMicrotasks, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
diff --git a/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx b/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx
index d030237d1c..c3406649dd 100644
--- a/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx
+++ b/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<Tooltip.Trigger />', () => {
diff --git a/packages/mui-base/src/Tooltip/index.barrel.ts b/packages/mui-base/src/Tooltip/index.barrel.ts
deleted file mode 100644
index 79e7247ec7..0000000000
--- a/packages/mui-base/src/Tooltip/index.barrel.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { TooltipRoot } from './Root/TooltipRoot';
-export { TooltipTrigger } from './Trigger/TooltipTrigger';
-export { TooltipPositioner } from './Positioner/TooltipPositioner';
-export { TooltipPopup } from './Popup/TooltipPopup';
-export { TooltipArrow } from './Arrow/TooltipArrow';
-export { TooltipProvider } from './Provider/TooltipProvider';
diff --git a/packages/mui-base/src/Tooltip/index.parts.ts b/packages/mui-base/src/Tooltip/index.parts.ts
new file mode 100644
index 0000000000..00ec741c91
--- /dev/null
+++ b/packages/mui-base/src/Tooltip/index.parts.ts
@@ -0,0 +1,6 @@
+export { TooltipRoot as Root } from './Root/TooltipRoot';
+export { TooltipTrigger as Trigger } from './Trigger/TooltipTrigger';
+export { TooltipPositioner as Positioner } from './Positioner/TooltipPositioner';
+export { TooltipPopup as Popup } from './Popup/TooltipPopup';
+export { TooltipArrow as Arrow } from './Arrow/TooltipArrow';
+export { TooltipProvider as Provider } from './Provider/TooltipProvider';
diff --git a/packages/mui-base/src/Tooltip/index.ts b/packages/mui-base/src/Tooltip/index.ts
index 00ec741c91..6fb3a4251d 100644
--- a/packages/mui-base/src/Tooltip/index.ts
+++ b/packages/mui-base/src/Tooltip/index.ts
@@ -1,6 +1 @@
-export { TooltipRoot as Root } from './Root/TooltipRoot';
-export { TooltipTrigger as Trigger } from './Trigger/TooltipTrigger';
-export { TooltipPositioner as Positioner } from './Positioner/TooltipPositioner';
-export { TooltipPopup as Popup } from './Popup/TooltipPopup';
-export { TooltipArrow as Arrow } from './Arrow/TooltipArrow';
-export { TooltipProvider as Provider } from './Provider/TooltipProvider';
+export * as Tooltip from './index.parts';
diff --git a/packages/mui-base/src/index.ts b/packages/mui-base/src/index.ts
index c8ae7fc381..5c2fbaeff3 100644
--- a/packages/mui-base/src/index.ts
+++ b/packages/mui-base/src/index.ts
@@ -1,13 +1,19 @@
-export * from './AlertDialog/index.barrel';
-export * from './Checkbox/index.barrel';
-export * from './CheckboxGroup/index.barrel';
-export * from './Dialog/index.barrel';
-export * from './Menu/index.barrel';
-export * from './NumberField/index.barrel';
-export * from './Popover/index.barrel';
-export * from './Progress/index.barrel';
-export * from './Separator/index.barrel';
-export * from './Slider/index.barrel';
-export * from './Switch/index.barrel';
-export * from './Tabs/index.barrel';
-export * from './Tooltip/index.barrel';
+export * from './AlertDialog';
+export * from './Checkbox';
+export * from './CheckboxGroup';
+export * from './Collapsible';
+export * from './Dialog';
+export * from './Field';
+export * from './Fieldset';
+export * from './Form';
+export * from './Menu';
+export * from './NumberField';
+export * from './Popover';
+export * from './PreviewCard';
+export * from './Progress';
+export * from './RadioGroup';
+export * from './Separator';
+export * from './Slider';
+export * from './Switch';
+export * from './Tabs';
+export * from './Tooltip';
diff --git a/scripts/buildApiDocs/config/getComponentImports.ts b/scripts/buildApiDocs/config/getComponentImports.ts
index 4e2968527b..0e88f6fcc0 100644
--- a/scripts/buildApiDocs/config/getComponentImports.ts
+++ b/scripts/buildApiDocs/config/getComponentImports.ts
@@ -27,7 +27,7 @@ export function getComponentImports(name: string, filename: string) {
 
   if (Object.keys(componentExportExceptions).includes(name)) {
     return [
-      `import * as ${componentDirectory} from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${componentExportExceptions[name]};`,
+      `import { ${componentDirectory} } from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${componentExportExceptions[name]};`,
     ];
   }
 
@@ -35,7 +35,7 @@ export function getComponentImports(name: string, filename: string) {
     // cases like Switch/SwitchTrack.tsx
     const childName = name.slice(componentDirectory.length);
     return [
-      `import * as ${componentDirectory} from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${childName};`,
+      `import { ${componentDirectory} } from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${childName};`,
     ];
   }