diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md
index 8fb75b38c29966..d0a0cb5de11e64 100644
--- a/docs/data/base/components/autocomplete/autocomplete.md
+++ b/docs/data/base/components/autocomplete/autocomplete.md
@@ -35,8 +35,6 @@ To learn more about implementing a custom Autocomplete, you can explore the [`us
 
 ## Hook
 
-### Usage
-
 ```jsx
 import { useAutocomplete } from '@mui/base/useAutocomplete';
 ```
@@ -104,7 +102,7 @@ Learn more about controlled and uncontrolled components in the [React documentat
 
 React Portals can be used to render the listbox outside of the DOM hierarchy, making it easier to allow it to "float" above adjacent elements.
 
-Base UI provides a [`<Popper />`](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal.
+Base UI provides a [Popper](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal.
 
 To render the listbox in Base UI's Popper, the `ref`s must be merged as follows:
 
diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md
index 50e46e3fe349bc..71f557d58fd79c 100644
--- a/docs/data/base/components/badge/badge.md
+++ b/docs/data/base/components/badge/badge.md
@@ -25,32 +25,15 @@ The Badge component creates a badge that is applied to its child element.
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { Badge } from '@mui/base/Badge';
-
-export default function MyApp() {
-  return <Badge>{/* the element that the badge is attached to */}</Badge>;
-}
 ```
 
-### Basics
-
 The Badge wraps around the UI element that it's attached to.
-For instance, if the badge indicates the number of emails in an inbox, then the component will be structured like this:
-
-```jsx
-<Badge>
-  <MailIcon />
-</Badge>
-```
 
 ### Anatomy
 
-The Badge component is composed of a root `<span>` that houses the element that the badge is attached to, followed by a `<span>` slot to represent the badge itself:
+The Badge component is composed of a root `<span>` that houses the element that the Badge is attached to, followed by a `<span>` slot to represent the Badge itself:
 
 ```html
 <span class="BaseBadge-root">
@@ -79,9 +62,10 @@ The following code snippet applies a CSS class called `my-badge` to the badge sl
 <Badge slotProps={{ badge: { className: 'my-badge' } }} />
 ```
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <Badge<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -99,10 +83,10 @@ The same applies for props specific to custom primitive elements:
 import { useBadge } from '@mui/base/useBadge';
 ```
 
-The `useBadge` hook lets you apply the functionality of a badge to a fully custom component.
+The `useBadge` hook lets you apply the functionality of a Badge to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization, but require more work to implement.
@@ -120,27 +104,27 @@ For the sake of simplicity, demos and code snippets primarily feature components
 
 ### Badge content
 
-The `badgeContent` prop defines the content that's displayed inside the badge.
-When this content is a number, there are additional props you can use for further customization—see the [Numerical badges section](#numerical-badges) below.
+The `badgeContent` prop defines the content that's displayed inside the Badge.
+When this content is a number, there are additional props you can use for further customization—see the [Numerical Badges section](#numerical-badges) below.
 
-The following demo shows how to create and style a typical numerical badge that's attached to a generic box element:
+The following demo shows how to create and style a typical numerical Badge that's attached to a generic box element:
 
 {{"demo": "UnstyledBadge", "defaultCodeOpen": false}}
 
 ### Badge visibility
 
-You can control the visibility of a badge by using the `invisible` prop.
-Setting a badge to `invisible` does not actually hide it—instead, this prop adds the `BaseBadge-invisible` class to the badge, which you can target with styles to hide however you prefer:
+You can control the visibility of a Badge by using the `invisible` prop.
+Setting a Badge to `invisible` does not actually hide it—instead, this prop adds the `BaseBadge-invisible` class to the Badge, which you can target with styles to hide however you prefer:
 
 {{"demo": "BadgeVisibility.js"}}
 
-### Numerical badges
+### Numerical Badges
 
 The following props are useful when `badgeContent` is a number.
 
 #### The showZero prop
 
-By default, badges automatically hide when `badgeContent={0}`.
+By default, Badges automatically hide when `badgeContent={0}`.
 You can override this behavior with the `showZero` prop:
 
 {{"demo": "ShowZeroBadge.js"}}
@@ -154,7 +138,7 @@ The default is 99.
 
 ## Accessibility
 
-Screen readers may not provide users with enough information about a badge's contents.
+Screen readers may not provide users with enough information about a Badge's contents.
 To make your badge accessible, you must provide a full description with `aria-label`, as shown in the demo below:
 
 {{"demo": "AccessibleBadges.js"}}
diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index ded95fe3b98b7a..38412762441a86 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -23,20 +23,10 @@ The Button component replaces the native HTML `<button>` element, and offers exp
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { Button } from '@mui/base/Button';
-
-export default function MyApp() {
-  return <Button>{/* button text */}</Button>;
-}
 ```
 
-### Basics
-
 The Button behaves similar to the native HTML `<button>`, so it wraps around the text that will be displayed on its surface.
 
 The following demo shows how to create and style two basic buttons.
@@ -78,7 +68,7 @@ If a Button is customized with a non-button element (for instance, `<Button slot
 Similarly, `<Button slots={{ root: "span" }} type="reset">` will not reset its parent form.
 :::
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
 In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
 
@@ -98,10 +88,10 @@ The same applies for props specific to custom primitive elements:
 import { useButton } from '@mui/base/useButton';
 ```
 
-The `useButton` hook lets you apply the functionality of a button to a fully custom component.
+The `useButton` hook lets you apply the functionality of a Button to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization, but require more work to implement.
@@ -110,7 +100,7 @@ With hooks, you can take full control over how your component is rendered, and d
 You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#anatomy).
 :::
 
-The following demo shows how to build the same buttons as those found in the [Basics](#basics) section above, but with the `useButton` hook:
+The following demo shows how to build the same buttons as those found in the [Component](#component) section above, but with the `useButton` hook:
 
 {{"demo": "UseButton.js", "defaultCodeOpen": true}}
 
@@ -131,7 +121,7 @@ For the sake of simplicity, demos and code snippets primarily feature components
 ### Custom elements
 
 The Button accepts a wide range of custom elements beyond HTML elements.
-You can even use SVGs, as the following demo illustrates:
+You can even use SVGs, as shown in the demo below:
 
 {{"demo": "UnstyledButtonCustom.js", "defaultCodeOpen": false}}
 
@@ -147,14 +137,14 @@ Similarly to the native HTML `<button>` element, the Button component can't rece
 This may reduce its accessibility, as screen readers won't be able to announce the existence and state of the button.
 
 The `focusableWhenDisabled` prop lets you change this behavior.
-When this prop is set, the underlying button does not set the `disabled` prop.
-Instead, `aria-disabled` is used, which makes the button focusable.
+When this prop is set, the underlying Button does not set the `disabled` prop.
+Instead, `aria-disabled` is used, which makes the Button focusable.
 
-This should be used whenever the disabled button needs to be read by screen readers.
+This should be used whenever the disabled Button needs to be read by screen readers.
 
 Base UI uses this prop internally in [menu items](/base-ui/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)).
 
-The following demo shows how the `focusableWhenDisabled` prop works—use the <kbd class="key">Tab</kbd> key to navigate within this document to see that only the second button accepts the focus:
+The following demo shows how the `focusableWhenDisabled` prop works—use the <kbd class="key">Tab</kbd> key to navigate within this document to see that only the second Button accepts the focus:
 
 {{"demo": "UnstyledButtonsDisabledFocus.js"}}
 
diff --git a/docs/data/base/components/click-away-listener/click-away-listener.md b/docs/data/base/components/click-away-listener/click-away-listener.md
index 2c33fe36a2fd4b..7d67d0a2390dbe 100644
--- a/docs/data/base/components/click-away-listener/click-away-listener.md
+++ b/docs/data/base/components/click-away-listener/click-away-listener.md
@@ -24,25 +24,11 @@ Click-Away Listener also supports the [Portal](/base-ui/react-portal/) component
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { ClickAwayListener } from '@mui/base/ClickAwayListener';
-
-export default function MyApp() {
-  return (
-    <ClickAwayListener>
-      {/* the child listening for a click outside of its container */}
-    </ClickAwayListener>
-  );
-}
 ```
 
-### Basics
-
-The following demo shows how to hide a menu dropdown when users click anywhere else on the page:
+The demo below shows how to hide a menu dropdown when users click anywhere else on the page:
 
 {{"demo": "ClickAway.js"}}
 
diff --git a/docs/data/base/components/focus-trap/focus-trap.md b/docs/data/base/components/focus-trap/focus-trap.md
index 5aec8d498be7fc..e04aa60f994042 100644
--- a/docs/data/base/components/focus-trap/focus-trap.md
+++ b/docs/data/base/components/focus-trap/focus-trap.md
@@ -19,20 +19,10 @@ Focus Trap is a utility component that's useful when implementing an overlay suc
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { FocusTrap } from '@mui/base/FocusTrap';
-
-export default function MyApp() {
-  return <FocusTrap>{/* children where the focus will be trapped */}</FocusTrap>;
-}
 ```
 
-### Basics
-
 Focus Trap wraps around the UI elements that should hold the user's focus.
 For instance, if the focus needs to stay inside of an [Menu](/base-ui/react-menu/), then the component will be structured like this:
 
@@ -67,7 +57,7 @@ By default, clicks outside of the Focus Trap component are blocked.
 
 You can disable this behavior with the `disableEnforceFocus` prop.
 
-Compare the following demo with the demo from the [Basics](#basics) section—notice how that demo prevents you from clicking outside of it, while this one allows it:
+Compare the following demo with the demo from the [Component](#component) section—notice how that demo prevents you from clicking outside of it, while this one allows it:
 
 {{"demo": "DisableEnforceFocus.js"}}
 
diff --git a/docs/data/base/components/form-control/form-control.md b/docs/data/base/components/form-control/form-control.md
index a3d0b46edada10..cd7ee94950fd2c 100644
--- a/docs/data/base/components/form-control/form-control.md
+++ b/docs/data/base/components/form-control/form-control.md
@@ -22,22 +22,10 @@ For instance, you may want to show an additional element asking the user to ente
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { FormControl } from '@mui/base/FormControl';
-
-export default function MyApp() {
-  return (
-    <FormControl>{/* <input> and/or other contents of the form */}</FormControl>
-  );
-}
 ```
 
-### Basics
-
 Form Control wraps around the elements of a form that need access to the state of an `<input>`.
 For instance, if the form's **Submit** button needs to change states after the user enters information, then the component will be structured like this:
 
@@ -53,9 +41,10 @@ Note that it also uses the `useFormControlContext` hook in order to pass props t
 
 {{"demo": "BasicFormControl"}}
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <FormControl<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -77,7 +66,7 @@ The `useFormControlContext` hook reads the context provided by Form Control.
 This hook lets you work with custom input components inside of the Form Control.
 You can also use it to read the form control's state and react to its changes in a custom component.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization, but require more work to implement.
@@ -113,9 +102,9 @@ For the sake of simplicity, demos and code snippets primarily feature components
 
 ### Accessing the form control state
 
-You can access the state of the form control by providing a function as a child of the Form Control.
+You can access the state of the Form Control by providing a function as a child.
 The state will be provided as a parameter to this function.
 
-The following demo shows how to access the state of the form control in an Input component nested inside of the Form Control:
+The following demo shows how to access the state of the Form Control in an Input component nested inside:
 
 {{"demo": "FormControlFunctionChild.js"}}
diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md
index a80ccf738ca51e..7a150f2fa67ebc 100644
--- a/docs/data/base/components/input/input.md
+++ b/docs/data/base/components/input/input.md
@@ -24,20 +24,10 @@ It can also be transformed into a `<textarea>` as needed.
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { Input } from '@mui/base/Input';
-
-export default function MyApp() {
-  return <Input />;
-}
 ```
 
-### Basics
-
 Input behaves similarly to the native HTML `<input>`, except that it's nested inside of a root `<div>`—see [Anatomy](#anatomy) for details.
 
 The following demo shows how to create and style an input component, including `placeholder` text:
@@ -74,9 +64,10 @@ The following code snippet applies a CSS class called `my-input` to the input sl
 <Input slotProps={{ input: { className: 'my-input' } }} />
 ```
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <Input<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -94,10 +85,10 @@ The same applies for props specific to custom primitive elements:
 import { useInput } from '@mui/base/useInput';
 ```
 
-The `useInput` hook lets you apply the functionality of an input to a fully custom component.
+The `useInput` hook lets you apply the functionality of an Input to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization, but require more work to implement.
@@ -112,12 +103,17 @@ The demo below shows how to use the `useInput` hook to create a custom input com
 
 ## Customization
 
+:::info
+The following features can be used with both components and hooks.
+For the sake of simplicity, demos and code snippets primarily feature components.
+:::
+
 ### Adornments
 
-You can use the `startAdornment` and `endAdornment` props to add a prefix, suffix, or an action to an input.
+You can use the `startAdornment` and `endAdornment` props to add a prefix, suffix, or an action to an Input.
 Common use cases of adornments include:
 
-- when an input receives a specific unit of measure (like weight or currency)
+- when an Input receives a specific unit of measure (like weight or currency)
 - when an icon button toggles hiding/showing a password
 
 The following demo shows examples of both of these use cases:
diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md
index becfe81dbd3554..ca9949389088d4 100644
--- a/docs/data/base/components/menu/menu.md
+++ b/docs/data/base/components/menu/menu.md
@@ -9,7 +9,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 
 # Menu
 
-<p class="description">The Menu components provide your users with a list of options on temporary surfaces.</p>
+<p class="description">The Dropdown Menu components provide end users with a list of options on temporary surfaces.</p>
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
@@ -17,70 +17,46 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 
 ## Introduction
 
-The Menu component gives users a list of items in a popup that they can navigate through with a mouse or keyboard.
-It renders an unordered list (`<ul>`) by default.
+The Base UI Dropdown Menu is implemented using a collection of related components:
 
-Use the Menu Item to add items to the Menu.
-These are rendered as `<li>` elements.
+- Dropdown - The outermost container that houses all Menu components.
+- Menu Button - The button that toggles the visibility of the Menu.
+- Menu - The unordered list of Menu Items.
+- Menu Item - The individual list items of the Menu.
 
 {{"demo": "MenuIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
 ## Components
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
-
 ```jsx
-import { Menu } from '@mui/base/Menu';
+import { Dropdown } from '@mui/base/Dropdown';
 import { MenuButton } from '@mui/base/MenuButton';
+import { Menu } from '@mui/base/Menu';
 import { MenuItem } from '@mui/base/MenuItem';
-import { Dropdown } from '@mui/base/Dropdown';
-
-export default function MyApp() {
-  return (
-    <Dropdown>
-      <MenuButton>Settings</MenuButton>
-      <Menu>
-        <MenuItem>My account</MenuItem>
-        <MenuItem>Notification preferences</MenuItem>
-      </Menu>
-    </Dropdown>
-  );
-}
 ```
 
-### Basics
-
-The Menu replaces the native HTML `<ul>`, and the Menu Item corresponds to the `<li>` tag.
-
-The visibility of the menu is controlled by the Menu Button.
-
-The following demo shows how to create and style a Menu component.
+The demo below shows how to create and style a Dropdown Menu.
 Click **Dashboard** to view the menu.
-Notice that it uses the built-in [Popper](/base-ui/react-popper/) component to break out of its parent container visually:
+Note that it uses the built-in [Popper](/base-ui/react-popper/) component to visually break out of its parent container:
 
 {{"demo": "MenuSimple"}}
 
-The Dropdown should be the outermost component—all other menu-related components must be placed as its children (not necessarily as direct ones).
-If you need to control the open state of the menu or react to its changes, place an `open`/`onOpenChange` props on the Dropdown.
+The `<Dropdown />` should be the outermost component—all other Menu-related components must be placed as its children (but not necessarily as direct ones).
+If you need to control the open state of the Menu or react to its changes, place `open`/`onOpenChange` props on the `<Dropdown />`.
 
-The Dropdown should contain at most one Menu Button and one Menu.
-It will wire them together, so that pressing the button will open the menu.
-It also takes care of assigning proper accessibility attributes, so the menu can be used with assistive technologies or a keyboard.
+The `<Dropdown />` must only contain one `<MenuButton />` and one `<Menu />`.
+It will wire them together, so that pressing the Button will open the Menu.
+It also takes care of assigning proper accessibility attributes, so the Dropdown Menu can be used with assistive technologies or a keyboard.
 
-The Menu hosts Menu Items.
-They can be wrapped in arbitrary tags and components or even grouped together.
-Clicking on a menu item closes the associated menu.
+The `<Menu />` hosts `<MenuItem />` components can be wrapped in arbitrary tags and components, as well as grouped together.
+Clicking on a Menu Item closes its associated Menu.
 
 ### Anatomy
 
-- The Menu component comprises a root slot that renders an `<div>` by default and a listbox slot that is a `<li>`.
-- The Menu Item has a single root `<li>` slot.
-- The Menu Button is a native HTML `<button>`.
-- The Dropdown does not render any HTML element.
-  It only provides a context that links Menu Button and Menu.
-  Thanks to this context, developers do not have to wire these components using custom logic.
+- The `<Dropdown />` does not render any HTML element—it only provides the context that links a Menu Button to a Menu, so you don't have to.
+- The `<MenuButton />` renders a `<button>`.
+- The `<Menu />` component renders a `<div>` with a `<ul>` nested inside.
+- The `<MenuItem />` renders a `<li>`.
 
 ```html
 <button class="MuiMenuButton-root">Click me</button>
@@ -93,7 +69,7 @@ Clicking on a menu item closes the associated menu.
 
 ### Custom structure
 
-Use the `slots` prop to override the slots on any component except the Dropdown:
+Use the `slots` prop to override the slots on any component except the `<Dropdown />` (since it renders no HTML):
 
 ```jsx
 <Menu slots={{ listbox: 'ol' }} />
@@ -105,15 +81,16 @@ See [Overriding component structure](/base-ui/guides/overriding-component-struct
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
-The following code snippet applies a CSS class called `my-listbox` to the listbox slot:
+The following code snippet applies a CSS class called `my-listbox` to the listbox slot on the Menu:
 
 ```jsx
 <Menu slotProps={{ listbox: { className: 'my-listbox' } }} />
 ```
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <Menu<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -125,38 +102,19 @@ The same applies to props specific to custom primitive elements:
 <Menu<'ol'> slots={{ root: 'ol' }} start={5} />
 ```
 
-### CSS classes
-
-Menu can set the following class:
-
-- `Mui-expanded` - set on the root slot when the Menu is open
-
-Menu Item can set the following classes:
-
-- `Mui-disabled` - set when the Menu Item has the `disabled` prop
-- `Mui-focusVisible` - set when the Menu Item is highlighted via keyboard navigation.
-  This is a polyfill for the native `:focus-visible` pseudoclass, as it's not available in older versions of Safari.
-
-On the Menu Button, these classes are available:
-
-- `Mui-active` - set when the button is pressed.
-- `Mui-disabled` - set when the button has the `disabled` prop.
-  It's equivalent to the native `:active` pseudoclass.
-- `Mui-expanded` - set when the menu associated with the given button is open.
-
 ## Hooks
 
 ```jsx
+import { useDropdown } from '@mui/base/useDropdown';
+import { useMenuButton } from '@mui/base/useMenuButton';
 import { useMenu } from '@mui/base/useMenu';
 import { useMenuItem } from '@mui/base/useMenuItem';
-import { useMenuButton } from '@mui/base/useMenuButton';
-import { useDropdown } from '@mui/base/useDropdown';
 ```
 
-The `useMenu` and `useMenuItem` hooks let you apply the functionality of the Menu to fully custom components.
+The Dropdown Menu hooks let you apply the functionality of the Dropdown Menu suite to fully custom components.
 They return props to be placed on the custom components, along with fields representing the components' internal states.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization but require more work to implement.
@@ -165,21 +123,26 @@ With hooks, you can take complete control over how your component is rendered an
 You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires a significantly different [structure](#anatomy).
 :::
 
-The following demo shows how to build a menu using hooks:
+The following demo shows how to build a Dropdown Menu using hooks:
 
 {{"demo": "UseMenu.js"}}
 
-Components and their corresponding hooks work interchangeably with one another—for example, you can create a Menu component that contains menu items built with the `useMenuItem` hook.
+Components and their corresponding hooks work interchangeably with one another—for example, you can create a Menu component that contains custom menu items built with the `useMenuItem` hook.
 
 ## Customization
 
-### Wrapping MenuItems
+:::info
+The following features can be used with both components and hooks.
+For the sake of simplicity, demos and code snippets primarily feature components.
+:::
+
+### Wrapping Menu Items
 
 Menu Item components don't have to be direct children of a Menu component.
 You can wrap them in any component needed to achieve the desired appearance.
 
 In addition to Menu Item components, the Menu component can also contain non-interactive children, such as helper text.
 
-The following demo shows an example of a menu with items grouped under non-interactive headers, along with helper text that displays the **Current zoom level**:
+The following demo shows an example of a Dropdown Menu with Items grouped under non-interactive headers, along with helper text that displays the **Current zoom level**:
 
 {{"demo": "WrappedMenuItems.js"}}
diff --git a/docs/data/base/components/modal/modal.md b/docs/data/base/components/modal/modal.md
index cbe044de00c8df..7a2fbe88739b35 100644
--- a/docs/data/base/components/modal/modal.md
+++ b/docs/data/base/components/modal/modal.md
@@ -20,14 +20,6 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 Modal is a utility component that renders its children in front of a backdrop.
 This lets you create an element that your users must interact with before continuing in the parent application.
 
-### Features
-
-- 🥞 Manages modal stacking when more than one is needed
-- 🪟 Creates a backdrop to disable interaction with the rest of the app
-- 🔐 Disables page scrolling while open
-- ⌨️ Manages focus correctly between the modal and its parent app
-- ♿️ Adds the appropriate ARIA roles automatically
-
 :::info
 The term "modal" is sometimes used interchangeably with "dialog," but this is incorrect.
 A dialog may be _modal_ or _nonmodal (modeless)_.
@@ -48,20 +40,10 @@ Modal is a lower-level construct that is used in the following Material UI compo
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { Modal } from '@mui/base/Modal';
-
-export default function MyApp() {
-  return <Modal>{/* the modal's content */}</Modal>;
-}
 ```
 
-### Basics
-
 The following demo shows how to create and style a basic modal.
 Click **Open modal** to see how it behaves:
 
@@ -85,12 +67,12 @@ The following demo shows how to nest one Modal within another:
 
 You can animate the open and close states of a Modal using a transition component, as long as that component fulfills the following requirements:
 
-- Is a direct child descendant of the modal
+- Is a direct child descendant of the Modal
 - Has an `in` prop—this corresponds to the open/close state
 - Calls the `onEnter` callback prop when the enter transition starts
 - Calls the `onExited` callback prop when the exit transition is completed
   :::info
-  The `onEnter` and `onExited` callbacks tell the modal to unmount the child content when closed and fully transitioned.
+  The `onEnter` and `onExited` callbacks tell the Modal to unmount the child content when closed and fully transitioned.
   :::
 
 Modal has built-in support for [react-transition-group](https://github.com/reactjs/react-transition-group):
@@ -103,12 +85,12 @@ You can also use [react-spring](https://github.com/pmndrs/react-spring) with Mod
 
 ### Performance
 
-The Modal's content is unmounted when it is not open.
-This means that it will need to be re-mounted each time it is opened.
+The Modal's content is unmounted when it's not open.
+This means that it will need to be re-mounted each time it's opened.
 
-If you are rendering expensive component trees inside your Modal, and you want to optimize for interaction responsiveness, you can change this default behavior by enabling the `keepMounted` prop.
+If you're rendering expensive component trees inside your Modal, and you want to optimize for interaction responsiveness, you can change this default behavior by enabling the `keepMounted` prop.
 
-You can also use the `keepMounted` prop if you want to make the content of the modal available to search engines (even when the modal is closed).
+You can also use the `keepMounted` prop if you want to make the content of the Modal available to search engines (even when the Modal is closed).
 
 The following demo shows how to apply this prop to keep the Modal mounted:
 
@@ -133,11 +115,11 @@ In order to display a Modal rendered on the server, you need to disable the port
 
 ### Overflow layout shift
 
-The modal disables the page scrolling while open by setting `overflow: hidden` as inline-style on the relevant scroll container, this hides the scrollbar and hence impacts the page layout.
-To compensate for this offset and avoid a layout shift, the modal also set a padding property on the scroll container (~15px under normal conditions).
+The Modal disables the page scrolling while open by setting `overflow: hidden` as inline-style on the relevant scroll container, this hides the scrollbar and hence impacts the page layout.
+To compensate for this offset and avoid a layout shift, the Modal also set a padding property on the scroll container (~15px under normal conditions).
 
 This can create a layout shift with `position: fixed` and `position: sticky` elements.
-You need to add the `.mui-fixed` class name on these elements so the modal can add a CSS padding property when the scroll is disabled.
+You need to add the `.mui-fixed` class name on these elements so the Modal can add a CSS padding property when the scroll is disabled.
 
 ```jsx
 <Box sx={{ position: 'sticky', right: 0, top: 0, left: 0 }} className="mui-fixed">
@@ -149,7 +131,7 @@ Modal moves the focus back to the body of the component if the focus tries to es
 
 This is done for accessibility purposes, but it can potentially create issues for your users.
 
-If the user needs to interact with another part of the page—for example, to interact with a chatbot window while a modal is open in the parent app—you can disable the default behavior with the `disableEnforceFocus` prop.
+If the user needs to interact with another part of the page—for example, to interact with a chatbot window while a Modal is open in the parent app—you can disable the default behavior with the `disableEnforceFocus` prop.
 
 ## Hook
 
@@ -157,10 +139,10 @@ If the user needs to interact with another part of the page—for example, to in
 import useModal from '@mui/base/unstable_useModal';
 ```
 
-The `useModal` hook lets you apply the functionality of a modal to a fully custom component.
+The `useModal` hook lets you apply the functionality of a Modal to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization, but require more work to implement.
@@ -169,7 +151,7 @@ With hooks, you can take full control over how your component is rendered, and d
 You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different [structure](#anatomy).
 :::
 
-The following demo shows how to build the same modal as the one found in the section above, but with the `useModal` hook:
+The following demo shows how to build the same Modal as the one found in the [Component](#component) section above, but with the `useModal` hook:
 
 {{"demo": "UseModal.js", "defaultCodeOpen": true}}
 
diff --git a/docs/data/base/components/no-ssr/no-ssr.md b/docs/data/base/components/no-ssr/no-ssr.md
index 2515ac696fd17a..a844312b759c87 100644
--- a/docs/data/base/components/no-ssr/no-ssr.md
+++ b/docs/data/base/components/no-ssr/no-ssr.md
@@ -26,20 +26,10 @@ This component can be useful in a variety of situations:
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { NoSsr } from '@mui/base/NoSsr';
-
-export default function MyApp() {
-  return <NoSsr>{/* element to be rendered on the client side */}</NoSsr>;
-}
 ```
 
-### Basics
-
 At its core, the No-SSR component's purpose is to defer rendering from the server to the client, as shown in the following demo:
 
 {{"demo": "SimpleNoSsr.js"}}
diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md
index c634ff37ee997f..35bb09759b7397 100644
--- a/docs/data/base/components/number-input/number-input.md
+++ b/docs/data/base/components/number-input/number-input.md
@@ -17,75 +17,33 @@ githubLabel: 'component: NumberInput'
 ## Introduction
 
 A number input is a UI element that accepts numeric values from the user.
-Base UI's Number Input component is a customizable replacement for the native HTML `<input type="number">` that solves common usability issues of the native counterpart, such as:
+Base UI's Number Input component is a customizable replacement for the native HTML `<input type="number">` that solves common usability issues of its native counterpart, such as:
 
 - Inconsistencies across browsers in the appearance and behavior of the stepper buttons
 - Allowing certain non-numeric characters ('e', '+', '-', '.') and silently discarding others
 - Incompatibilities with assistive technologies and limited accessibility features
 
-See [this article](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) by the GOV.UK Design System team for a more detailed explanation.
+:::info
+See [_Why the GOV.UK Design System team changed the input type for numbers_](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for a more detailed explanation of the limitations of `<input type="number">`.
+:::
 
 {{"demo": "NumberInputIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
-import NumberInput from '@mui/base/Unstable_NumberInput';
-
-export default function MyApp() {
-  return <NumberInput />;
-}
+import { Unstable_NumberInput as NumberInput } from '@mui/base/Unstable_NumberInput';
 ```
 
-### Basics
-
-The following demo shows how to create a number input component, apply some styling, and write the latest value to a state variable using the `onChange` prop:
+The following demo shows how to create a Number Input component, apply some styling, and write the latest value to a state variable using the `onChange` prop:
 
 {{"demo": "NumberInputBasic"}}
 
-The `min` and `max` props can be used to define a range of accepted values. You can pass only one of them to define an open-ended range.
-
-```tsx
-<NumberInput min={-10} max={10} />
-
-// Open-ended
-<NumberInput min={0} />
-```
-
-The `step` prop can be used to defined the granularity of the change in value when incrementing or decrementing. For example, if `min={0}` and `step={2}`, valid values for the component would be 0, 2, 4… since the value can only be changed in increments of 2.
-
-```tsx
-// valid values: 0, 2, 4, 6, 8...
-<NumberInput min={0} step={2} />
-```
-
-:::warning
-Support for decimal values or step sizes isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38518) to see it arrive sooner!
-:::
-
-When the input field is in focus, you can enter values that fall outside the valid range. The value will be clamped based on `min`, `max` and `step` once the input field is blurred.
-
-Holding down the <kbd>Shift</kbd> key when interacting with the stepper buttons applies a multipler (default 10x) to the value change of each step.
-
-This can be customized with the `shiftMultiplier` prop. In the following snippet, if <kbd>Shift</kbd> is held when clicking the increment button, the value will change from 0 to 5, then to 10 etc.
-
-```tsx
-<NumberInput min={0} step={1} shiftMultiplier={5} />
-```
-
-Here's another demo of a Number Input with fully customized styles:
-
-{{"demo": "QuantityInput", "defaultCodeOpen": false}}
-
 ### Anatomy
 
-The Base UI Number Input component consists of 4 slots:
+The Base UI Number Input component consists of four slots:
 
-- `root`: a outer `<div>` containing the other interior slots
+- `root`: an outer `<div>` containing the other interior slots
 - `input`: an `<input>` element
 - `incrementButton`: a `<button>` for increasing the value
 - `decrementButton`: a `<button>` for decreasing the value
@@ -98,12 +56,7 @@ The Base UI Number Input component consists of 4 slots:
 </div>
 ```
 
-### Slot props
-
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base-ui/getting-started/usage/) for full details.
-:::
+### Custom structure
 
 Use the `slots` prop to override the root slot or any interior slots:
 
@@ -117,11 +70,16 @@ Use the `slots` prop to override the root slot or any interior slots:
 />
 ```
 
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base-ui/guides/overriding-component-structure/) for full details.
+:::
+
 Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet:
 
-- applies a CSS class called `my-num-input` to the input slot,
-- and passes a `direction` prop to the `CustomButton` components in the increment and decrement button slots
+- applies a CSS class called `my-num-input` to the input slot
+- passes a `direction` prop to the `CustomButton` components in the increment and decrement button slots
 
 ```jsx
 <NumberInput
@@ -139,10 +97,10 @@ The following code snippet:
 import useNumberInput from '@mui/base/unstable_useNumberInput';
 ```
 
-The `useNumberInput` hook lets you apply the functionality of a number input to a fully custom component.
+The `useNumberInput` hook lets you apply the functionality of a Number Input to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization, but require more work to implement.
@@ -159,3 +117,54 @@ Here's an example of a "compact" number input component using the hook that only
 In this demo, `onChange` is used to write the latest value of the component to a state variable.
 
 {{"demo": "UseNumberInputCompact", "defaultCodeOpen": false}}
+
+## Customization
+
+### Minimum and maximum
+
+Use the `min` and `max` props to define a range of accepted values.
+If you only define one or the other, the opposite end of the range will be open-ended.
+
+```jsx
+// accepts any value:
+<NumberInput />
+
+// only accepts values between -10 and 10:
+<NumberInput min={-10} max={10} />
+
+// only accepts values greater than 0:
+<NumberInput min={0} />
+
+```
+
+The demo below shows a Number Input with a an accepted range of 1 to 99:
+
+{{"demo": "QuantityInput", "defaultCodeOpen": false}}
+
+### Incremental steps
+
+Use the `step` prop to define the granularity of the change in value when incrementing or decrementing.
+For example, if `min={0}` and `step={2}`, valid values for the component would be 0, 2, 4, and on, since the value can only be changed in increments of 2.
+
+```jsx
+// valid values: 0, 2, 4, 6, 8...
+<NumberInput min={0} step={2} />
+```
+
+:::warning
+Support for decimal values and step sizes isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38518) to see it arrive sooner.
+:::
+
+When the input field is in focus, you can enter values that fall outside the valid range.
+The value will be clamped based on `min`, `max` and `step` once the input field is blurred.
+
+### Shift multiplier
+
+Holding down the <kbd>Shift</kbd> key when interacting with the stepper buttons applies a multipler (default 10x) to the value change of each step.
+
+You can customize this behavior with the `shiftMultiplier` prop.
+In the following snippet, if <kbd>Shift</kbd> is held when clicking the increment button, the value will change from 0, to 5, to 10, and on.
+
+```jsx
+<NumberInput min={0} step={1} shiftMultiplier={5} />
+```
diff --git a/docs/data/base/components/popper/popper.md b/docs/data/base/components/popper/popper.md
index 279b09652864cf..b4b73087f550af 100644
--- a/docs/data/base/components/popper/popper.md
+++ b/docs/data/base/components/popper/popper.md
@@ -31,27 +31,17 @@ Once the [Popup](/base-ui/react-popup/) is stable, we will deprecate and, later,
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { Popper } from '@mui/base/Popper';
-
-export default function MyApp() {
-  return <Popper>{/* the popper's content */}</Popper>;
-}
 ```
 
-### Basics
-
 By default, the Popper is mounted to the DOM when its `open` prop is set to `true`, and removed from the DOM when `open` is `false`.
 
 `anchorEl` is passed as the reference object to create a new `Popper.js` instance.
 The children are placed in a [Portal](/base-ui/react-portal/) prepended to the body of the document to avoid rendering problems.
 You can disable this behavior with `disablePortal` prop.
 
-The following demo shows how to create and style a basic popper.
+The following demo shows how to create and style a basic Popper.
 Click **Toggle Popper** to see how it behaves:
 
 {{"demo": "UnstyledPopperBasic", "defaultCodeOpen": true}}
@@ -65,7 +55,7 @@ If you need this behavior, you can use the [Click-Away Listener](/base-ui/react-
 
 ### Placement
 
-The popper's default placement is `bottom`.
+The Popper's default placement is `bottom`.
 You can change it using the `placement` prop.
 Try changing this value to `top` in the interactive demo below to see how it works:
 
@@ -73,10 +63,10 @@ Try changing this value to `top` in the interactive demo below to see how it wor
 
 ### Transitions
 
-You can animate the open and close states of the popper with a render prop child and a transition component, as long as the component meets these conditions:
+You can animate the open and close states of the Popper with a render prop child and a transition component, as long as the component meets these conditions:
 
-- Is a direct child descendant of the popper
+- Is a direct child descendant of the Popper
 - Calls the `onEnter` callback prop when the enter transition starts
 - Calls the `onExited` callback prop when the exit transition is completed
 
-These two callbacks allow the popper to unmount the child content when closed and fully transitioned.
+These two callbacks allow the Popper to unmount the child content when closed and fully transitioned.
diff --git a/docs/data/base/components/popup/popup.md b/docs/data/base/components/popup/popup.md
index e70be61c6cc07c..9b4845e0fa18db 100644
--- a/docs/data/base/components/popup/popup.md
+++ b/docs/data/base/components/popup/popup.md
@@ -27,20 +27,10 @@ The Popup component, once stable, is intended to replace the [Popper](/base-ui/r
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup';
-
-export default function MyApp() {
-  return <Popup>{/* the popup's content */}</Popup>;
-}
 ```
 
-### Basics
-
 By default, the Popup is mounted to the DOM when its `open` prop is set to `true`, and removed from the DOM when `open` is `false`.
 
 `anchor` is passed as the reference element to Floating UI's [`useFloating`](https://floating-ui.com/docs/react#positioning) hook.
@@ -48,13 +38,13 @@ The children are placed in a [Portal](/base-ui/react-portal/) prepended to the b
 You can disable this behavior with `disablePortal` prop.
 See how it's done in the [Disable portal](#disable-portal) section below.
 
-The following demo shows how to create and style a basic popup.
+The following demo shows how to create and style a basic Popup.
 Click **Toggle Popup** to see how it behaves:
 
 {{"demo": "SimplePopup.js", "defaultCodeOpen": true}}
 
 :::warning
-By default, clicking outside the popup does not hide it.
+By default, clicking outside the Popup doesn't hide it.
 If you need this behavior, you can use the [Click-Away Listener](/base-ui/react-click-away-listener/) component.
 :::
 
diff --git a/docs/data/base/components/portal/portal.md b/docs/data/base/components/portal/portal.md
index e669fa372121e1..0b562e5f4d1457 100644
--- a/docs/data/base/components/portal/portal.md
+++ b/docs/data/base/components/portal/portal.md
@@ -22,22 +22,10 @@ The Portal component is used internally by the [Modal](/base-ui/react-modal/) an
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { Portal } from '@mui/base/Portal';
-
-export default function MyApp() {
-  return (
-    <Portal>{/* children to be rendered outside of the current DOM node */}</Portal>
-  );
-}
 ```
 
-### Basics
-
 Normally, children of a component are rendered within that component's DOM tree.
 But sometimes it's necessary to mount a child at a different location in the DOM.
 
diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md
index 4054eadb82b1d6..bc5bc93cea020d 100644
--- a/docs/data/base/components/select/select.md
+++ b/docs/data/base/components/select/select.md
@@ -19,45 +19,23 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-sel
 
 A select is a UI element that gives users a list of options to choose from.
 
-Base UI offers components to replace the native HTML `<select>` tag: Select.
-It also includes Option for creating the options on the list, and Option Group for grouping those options.
+Base UI's Select component replaces the native HTML `<select>` tag.
+It also includes the Option component for creating the options in the list, and Option Group for grouping those options.
 
 {{"demo": "UnstyledSelectIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
-### Features
-
-- 🦍 Can be used as a controlled or uncontrolled component
-- 🧬 Accepts custom elements and non-string values for options
-- 🗃️ Options can be grouped and nested
-
 ## Components
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component collection using the following basic elements:
-
 ```jsx
 import { Select } from '@mui/base/Select';
 import { Option } from '@mui/base/Option';
-
-export default function MyApp() {
-  return (
-    <Select>
-      <Option value="#F00">Red</Option>
-      <Option value="#0F0">Green</Option>
-      <Option value="#00F">Blue</Option>
-    </Select>
-  );
-}
 ```
 
-### Basics
-
-The following demo shows how to create and style a Select component.
+The following demo shows how to create and style a Select component with several Options:
 
 {{"demo": "UnstyledSelectBasic", "defaultCodeOpen": false}}
 
-#### Form submission
+### Form submission
 
 The value(s) chosen in the Select can be posted to a server using a standard HTML form.
 When the `name` prop is set, the Select will render a hidden input with the selected value.
@@ -65,11 +43,9 @@ When the `name` prop is set, the Select will render a hidden input with the sele
 {{"demo": "UnstyledSelectForm.js"}}
 
 Note how the second Select in the demo above renders a hidden input with the name provided as a prop.
+You can customize the value of this hidden input—see the [Object values](#object-values) section for details.
 
-You can customize the value of this hidden input.
-See the [Object values](#object-values) section to learn how to do it.
-
-#### TypeScript caveat
+### TypeScript caveat
 
 Select's props are generic.
 Due to TypeScript limitations, this may cause unexpected behavior when wrapping the component in `forwardRef` (or other higher-order components).
@@ -91,17 +67,15 @@ const CustomSelect = React.forwardRef(function CustomSelect<TValue>(
 
 For the sake of brevity, the rest of the demos throughout this doc will not use `forwardRef`.
 
-### Multi-select
+### Multiple selections
 
-The Select component lets your users select multiple options from the list.
-In contrast to the single-selection mode, the options popup doesn't close after an item is selected, enabling users to continue choosing more options.
+Set the `multiple` prop to let your users select multiple options from the list.
+In contrast with single-selection mode, the options popup doesn't close after an item is selected, which enables users to continue choosing more options.
 
-Set the `multiple` prop to turn on the multi-selection mode.
+Note that in multiple selection mode, the `value` prop (and `defaultValue`) is an array.
 
 {{"demo": "UnstyledSelectMultiple.js", "defaultCodeOpen": false}}
 
-Note that in the multiple selection mode, the `value` prop (and `defaultValue`) is an array.
-
 ### Controlled select
 
 Select can be used as an uncontrolled or controlled component.
@@ -116,9 +90,9 @@ Learn more about controlled and uncontrolled components in the [React documentat
 
 {{"demo": "UnstyledSelectControlled.js", "defaultCodeOpen": false}}
 
-To set the value of the controlled Select, use the `value` prop.
+Use the `value` prop to set the value of the controlled Select.
 The uncontrolled component accepts the `defaultValue` that can be used to set the initial value.
-In any case, if you wish to deselect all values, pass `null` to the respective prop.
+To deselect all values, pass `null` to the respective prop.
 
 :::warning
 This pattern is where Base UI's Select differs from the equivalent [Material UI component](/material-ui/react-select/).
@@ -139,17 +113,21 @@ You can change this behavior with the help of the `getSerializedValue` prop.
 
 ### Grouping options
 
+```jsx
+import { OptionGroup } from '@mui/base/OptionGroup';
+```
+
 Options can be grouped, similarly to how the native `<select>` element works.
 Unlike the native `<select>`, groups can be nested.
 
-The following demo shows how to group options with the Option Group component:
+The following demo shows how to group Options with the Option Group component:
 
 {{"demo": "UnstyledSelectGrouping.js", "defaultCodeOpen": false}}
 
 ### Anatomy
 
-The Select component is composed of a root `<button>` along with a `<div>` that houses a `<ul>` within a Popper.
-Option renders as an `<li>`:
+The Select component is composed of a root `<button>` along with a `<div>` that houses a `<ul>` within a [Popper](/base-ui/react-popper/).
+Option renders as an `<li>`, and Option Group renders a `<ul>` with an `<li>` that represents its label.
 
 ```html
 <button class="MuiSelect-root" type="button">Open</button>
@@ -190,9 +168,10 @@ To instead render the popup where the component is defined, override the `disabl
 <Select slotProps={{ popper: { disablePortal: true } }} />
 ```
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <Select<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -210,10 +189,10 @@ The same applies for props specific to custom primitive elements:
 import { useSelect } from '@mui/base/useSelect';
 ```
 
-The `useSelect` hook lets you apply the functionality of a select to a fully custom component.
+The `useSelect` hook lets you apply the functionality of a Select to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization, but require more work to implement.
@@ -224,16 +203,21 @@ You may not need to use hooks unless you find that you're limited by the customi
 
 The following example shows a select built with a hook.
 Note how this component does not include any built-in classes.
-The resulting HTML is much smaller compared to the unstyled component version, as the class names are not applied.
+The resulting HTML is much smaller compared with its prebuilt component counterpart, because the class names are not applied.
 
 {{"demo": "UseSelect.js", "defaultCodeOpen": false}}
 
 ## Customization
 
+:::info
+The following features can be used with both components and hooks.
+For the sake of simplicity, demos and code snippets primarily feature components.
+:::
+
 ### Selected value appearance
 
 You can customize the appearance of the selected value display by providing a function to the `renderValue` prop.
-The element returned by this function will be rendered inside the select's button.
+The element returned by this function will be rendered inside the Select's button.
 
 {{"demo": "UnstyledSelectCustomRenderValue.js", "defaultCodeOpen": false}}
 
diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
index 26327d2fa7059f..de372799103529 100644
--- a/docs/data/base/components/slider/slider.md
+++ b/docs/data/base/components/slider/slider.md
@@ -26,8 +26,6 @@ Sliders are ideal for interface controls that benefit from a visual representati
 
 ## Component
 
-### Usage
-
 ```jsx
 import { Slider } from '@mui/base/Slider';
 ```
@@ -105,9 +103,10 @@ The following code snippet applies a CSS class called `my-rail` to the rail slot
 <Slider slotProps={{ rail: { className: 'my-rail' } }} />
 ```
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <Slider<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -125,10 +124,10 @@ The same applies for props specific to custom primitive elements:
 import { useSlider } from '@mui/base/useSlider';
 ```
 
-The `useSlider` hook lets you apply the functionality of a slider to a fully custom component.
+The `useSlider` hook lets you apply the functionality of a Slider to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
 :::info
 Hooks give you the most room for customization, but require more work to implement.
@@ -143,16 +142,16 @@ You may not need to use hooks unless you find that you're limited by the customi
 
 Slider components can be arranged vertically as well as horizontally.
 
-When vertical, you must set `orientation="vertical"` on the `<Slider />` component so the user can navigate with the up and down arrow keys (rather than the default left-to-right behavior for horizontal sliders).
+When vertical, you must set `orientation="vertical"` on the Slider so the user can navigate with the up and down arrow keys (rather than the default left-to-right behavior for horizontal sliders).
 
 {{"demo": "VerticalSlider.js"}}
 
 ### Discrete sliders
 
-The most basic slider is _continuous_, which means it does not have pre-defined (_discrete_) values for the user to select from.
+The most basic Slider is _continuous_, which means it does not have pre-defined (_discrete_) values for the user to select from.
 This is suitable for situations in which an approximate value is good enough for the user, such as brightness or volume.
 
-But if your users need more precise options, you can create a discrete slider that snaps the thumb to pre-defined stops along the bar.
+But if your users need more precise options, you can create a discrete Slider that snaps the thumb to pre-defined stops along the bar.
 
 To generate a mark for each stop, use `marks={true}`:
 
@@ -172,13 +171,14 @@ If the user should only be able to select from the values provided with the `mar
 
 ### Range slider
 
-To let users set the start and end of a range on a slider, provide an array of values to the `value` or `defaultValue` prop:
+To let users set the start and end of a range on a Slider, provide an array of values to the `value` or `defaultValue` prop:
 
 {{"demo": "RangeSlider.js"}}
 
 ### Value label
 
-A label for the value can be rendered around the thumb by using the optional `slots` prop with the `valueLabel` slot. These are the typical use cases for showing the value label:
+A label for the value can be rendered around the thumb by using the optional `slots` prop with the `valueLabel` slot.
+These are typical use cases for showing the value label:
 
 - always
 - only when hovering over the thumb (using CSS)
diff --git a/docs/data/base/components/snackbar/snackbar.md b/docs/data/base/components/snackbar/snackbar.md
index b842eda4081fcc..340b477c9d0b2f 100644
--- a/docs/data/base/components/snackbar/snackbar.md
+++ b/docs/data/base/components/snackbar/snackbar.md
@@ -24,27 +24,17 @@ The Snackbar component is built to appear on-screen to inform users about an act
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { Snackbar } from '@mui/base/Snackbar';
-
-export default function MyApp() {
-  return <Snackbar>{/* snackbar text */}</Snackbar>;
-}
 ```
 
-### Basics
-
 Snackbar doesn't impose any restrictions on its implementation—it's up to you to design it so that it doesn't interrupt the user experience, and disappears after a set amount of time without requiring the user to take action.
 
 Use the `autoHideDuration` prop to set the time (in milliseconds) that the snackbar remains on the screen.
 
 :::info
-You may want to implement Snackbar with [Click-Away Listener](/base-ui/react-click-away-listener/), so that the user can choose to dismiss the snackbar before its time is up by clicking anywhere outside of it.
-But this behavior is optional for a snackbar.
+You may want to implement Snackbar with [Click-Away Listener](/base-ui/react-click-away-listener/), so that the user can choose to dismiss the Snackbar before its time is up by clicking anywhere outside of it.
+But this behavior is optional.
 :::
 
 The following demo illustrates the basic usage of Snackbar.
@@ -62,6 +52,8 @@ The Snackbar component is composed of a single root `<div>` slot with no interio
 
 ### Custom structure
 
+Use the `slots.root` prop to override the root slot with a custom element:
+
 ```jsx
 <Snackbar slots={{ root: 'span' }} />
 ```
@@ -71,9 +63,10 @@ The `slots` prop is available on all non-utility Base components.
 See [Overriding component structure](/base-ui/guides/overriding-component-structure/) for full details.
 :::
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom component's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component.
+This way, you can safely provide the custom component's props directly on the component:
 
 ```tsx
 <Snackbar<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -91,15 +84,15 @@ The same applies for props specific to custom primitive elements:
 import { useSnackbar } from '@mui/base/useSnackbar';
 ```
 
-The `useSnackbar` hook lets you apply the functionality of a snackbar to a fully custom component.
+The `useSnackbar` hook lets you apply the functionality of a Snackbar to a fully custom component.
 
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
-Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization).
+Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
 
-If you use a [Click-Away Listener](/base-ui/react-click-away-listener/) to let the user close the snackbar by clicking outside of it, make sure to pass the `onClickAway` handler returned by this hook to the Click-Away Listener.
+If you use a [Click-Away Listener](/base-ui/react-click-away-listener/) to let the user close the Snackbar by clicking outside of it, make sure to pass the `onClickAway` handler returned by this hook to the Click-Away Listener.
 
-Pass the `open` state to the hook and use it to show and hide the snackbar.
+Pass the `open` state to the hook and use it to show and hide the Snackbar.
 
 The demo below shows how to build a fully custom component with the `useSnackbar` hook that also incorporates the Click-Away Listener component:
 
@@ -121,7 +114,7 @@ For the sake of simplicity, demos and code snippets primarily feature components
 
 ### Transitions
 
-You can animate the open and close states of the snackbar with a render prop child and a transition component, as long as the component meets these conditions:
+You can animate the open and close states of the Snackbar with a render prop child and a transition component, as long as the component meets these conditions:
 
 - Is a direct child descendant of the snackbar
 - Has an `in` prop—this corresponds to the open state
@@ -129,9 +122,9 @@ You can animate the open and close states of the snackbar with a render prop chi
 - Calls the `onEnter` callback prop when the enter transition starts—sets `exited` to false
 - Calls the `onExited` callback prop when the exit transition is completed—sets `exited` to true
 
-These two callbacks allow the snackbar to unmount the child content when closed and keep it fully transitioned.
+These two callbacks allow the Snackbar to unmount the child content when closed and keep it fully transitioned.
 This is only applicable if you are using transition components using [react-transition-group](https://github.com/reactjs/react-transition-group) library internally.
 
-The demo below shows how to create a snackbar with custom transitions:
+The demo below shows how to create a Snackbar with custom transitions:
 
 {{"demo": "TransitionComponentSnackbar.js", "defaultCodeOpen": false}}
diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md
index 35aee01b7870c4..2f599c667e31ac 100644
--- a/docs/data/base/components/switch/switch.md
+++ b/docs/data/base/components/switch/switch.md
@@ -23,8 +23,6 @@ The Switch component provides users with a switch for toggling between two mutua
 
 ## Component
 
-### Usage
-
 ```jsx
 import { Switch } from '@mui/base/Switch';
 ```
@@ -61,9 +59,10 @@ The following code snippet applies a CSS class called `my-thumb` to the thumb sl
 <Switch slotProps={{ thumb: { className: 'my-thumb' } }} />
 ```
 
-#### Usage with TypeScript
+### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <Switch<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
@@ -81,7 +80,7 @@ The same applies for props specific to custom primitive elements:
 import { useSwitch } from '@mui/base/useSwitch';
 ```
 
-The `useSwitch` hook lets you apply the functionality of a switch to a fully custom component.
+The `useSwitch` hook lets you apply the functionality of a Switch to a fully custom component.
 It returns props to be placed on the custom component, along with fields representing the component's internal state.
 
 Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization).
diff --git a/docs/data/base/components/table-pagination/table-pagination.md b/docs/data/base/components/table-pagination/table-pagination.md
index d731fa3a9267e3..ee9f262b89d876 100644
--- a/docs/data/base/components/table-pagination/table-pagination.md
+++ b/docs/data/base/components/table-pagination/table-pagination.md
@@ -21,33 +21,17 @@ It controls two properties of its parent table:
 - displayed page index
 - number of rows per page
 
-Table Pagination renders its internal elements in a `<td>` tag by default so it can be inserted into a table's `<tr>`.
-You can use the `slots.root` prop to render a different root element—for example, if you need to place the pagination controls outside of the table.
-See the [Slot props section](#slot-props) for details.
-
 {{"demo": "UnstyledPaginationIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { TablePagination } from '@mui/base/TablePagination';
-
-export default function MyApp() {
-  return (
-    <table>
-      <tr>
-        <TablePagination />
-      </tr>
-    </table>
-  );
-}
 ```
 
-### Basics
+Table Pagination renders its internal elements in a `<td>` tag by default so it can be inserted into a table's `<tr>`.
+You can use the `slots.root` prop to render a different root element—for example, if you need to place the pagination controls outside of the table.
+See [Custom structure](#custom-structure) for details.
 
 The following demo shows an example of customized pagination controls in a table footer that spans the entire row:
 
@@ -123,7 +107,8 @@ The following code snippet applies a CSS class called `my-spacer` to the spacer
 
 ### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <TablePagination<typeof CustomComponent>
diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md
index cc671c1b4f0d9a..768a599ba7490e 100644
--- a/docs/data/base/components/tabs/tabs.md
+++ b/docs/data/base/components/tabs/tabs.md
@@ -28,8 +28,6 @@ Tabs are implemented using a collection of related components:
 
 ## Components
 
-### Usage
-
 ```jsx
 import { Tab } from '@mui/base/Tab';
 import { TabsList } from '@mui/base/TabsList';
@@ -94,7 +92,8 @@ When vertical, you must set `orientation="vertical"` on the `<Tabs />` component
 
 ### Usage with TypeScript
 
-In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component.
+This way, you can safely provide the custom root's props directly on the component:
 
 ```tsx
 <Tab<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
index 0e281fcef26ed9..a4117b450c61bc 100644
--- a/docs/data/base/components/textarea-autosize/textarea-autosize.md
+++ b/docs/data/base/components/textarea-autosize/textarea-autosize.md
@@ -23,22 +23,11 @@ The height of the Textarea Autosize component automatically adjusts as a respons
 
 ## Component
 
-### Usage
-
-After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements:
-
 ```jsx
 import { TextareaAutosize } from '@mui/base/TextareaAutosize';
-
-export default function MyApp() {
-  return <TextareaAutosize />;
-}
 ```
 
-### Basics
-
 Textarea Autosize behaves similarly to the native HTML`<textarea>`.
-
 By default, an empty Textarea Autosize component renders as a single row, as shown in the following demo:
 
 {{"demo": "UnstyledTextarea", "defaultCodeOpen": false}}