mui · mnajdova · Mar 31, 2023 · Jan 14, 2023 · Jan 16, 2023 · Jan 16, 2023
diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md
@@ -10,6 +10,10 @@ githubLabel: 'component: badge'
 
 <p class="description">The Unstyled Badge component generates a small label that is attached to its child element.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 A badge is a small descriptor for UI elements.
@@ -19,8 +23,6 @@ The Unstyled Badge component creates a badge that is applied to its child elemen
 
 {{"demo": "UnstyledBadgeIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
@@ -11,14 +11,16 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 
 <p class="description">Buttons let users take actions and make choices with a single tap.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 The Unstyled Button component replaces the native HTML `<button>` element, and offers expanded options for styling and accessibility.
 
 {{"demo": "UnstyledButtonIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

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
@@ -9,6 +9,10 @@ githubLabel: 'component: ClickAwayListener'
 
 <p class="description">The Click-Away Listener component detects when a click event happens outside of its child element.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 Click-Away Listener is a utility component that listens for click events outside of its child.
@@ -18,8 +22,6 @@ This is useful for components like the [Unstyled Popper](/base/react-popper/) wh
 
 Click-Away Listener also supports the [Portal](/base/react-portal/) component.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/focus-trap/focus-trap.md b/docs/data/base/components/focus-trap/focus-trap.md
@@ -9,12 +9,14 @@ githubLabel: 'component: FocusTrap'
 
 <p class="description">The Focus Trap component prevents the user's focus from escaping its children components.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 Focus Trap is a utility component that's useful when implementing an overlay such as a [modal dialog](/base/react-modal/), which should block all interactions outside of it while open.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/form-control/form-control.md b/docs/data/base/components/form-control/form-control.md
@@ -10,14 +10,16 @@ githubLabel: 'component: FormControl'
 
 <p class="description">The Unstyled Form Control component is a utility that lets you associate a form input with auxiliary components, such as labels, error indicators, or helper text.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 Unstyled Form Control is a utility that wraps an input component with other associated components in order to make the state of the input available to those components.
 
 For instance, you may want to show an additional element asking the user to enter a value if the input is empty, or display a warning icon if the entered value is incorrect.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md
@@ -10,6 +10,10 @@ githubLabel: 'component: input'
 
 <p class="description">The Unstyled Input component provides users with a field to enter and edit text.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 An input is a UI element that accepts text data from the user.
@@ -18,8 +22,6 @@ It can also be transformed into a `<textarea>` as needed.
 
 {{"demo": "UnstyledInputIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md
@@ -11,6 +11,10 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 
 <p class="description">The Menu components provide your users with a list of options on temporary surfaces.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 The Unstyled Menu component gives users a list of items in a popup that they can navigate through with a mouse or keyboard.
@@ -21,8 +25,6 @@ These are rendered as `<li>` elements.
 
 {{"demo": "UnstyledMenuIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Components
 
 ### Usage

diff --git a/docs/data/base/components/modal/modal.md b/docs/data/base/components/modal/modal.md
@@ -10,6 +10,10 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 
 <p class="description">The Unstyled Modal component lets you create dialogs, popovers, lightboxes, and other elements that force the user to take action before continuing.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 Unstyled Modal is a utility component that renders its children in front of a backdrop.
@@ -23,8 +27,6 @@ This lets you create an element that your users must interact with before contin
 - ⌨️ Manages focus correctly between the modal and its parent app
 - ♿️ Adds the appropriate ARIA roles automatically
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 :::info
 The term "modal" is sometimes used interchangeably with "dialog," but this is incorrect.
 A dialog may be _modal_ or _nonmodal (modeless)_.

diff --git a/docs/data/base/components/no-ssr/no-ssr.md b/docs/data/base/components/no-ssr/no-ssr.md
@@ -8,6 +8,10 @@ components: NoSsr
 
 <p class="description">The No-SSR component defers the rendering of children components from the server to the client.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 No-SSR is a utility component that prevents its children from being rendered on the server.
@@ -20,8 +24,6 @@ This component can be useful in a variety of situations:
 - To turn on service degradation when the server load is too heavy
 - To improve the Time to Interactive (TTI) by only rendering what's important (using the `defer` prop)
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/popper/popper.md b/docs/data/base/components/popper/popper.md
@@ -10,13 +10,15 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 
 <p class="description">The Unstyled Popper component lets you create tooltips and popovers that display information about an element on the page.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 The Unstyled Popper is a utility component for creating various kinds of popups.
 It relies on the third-party library ([Popper.js v2](https://popper.js.org/docs/v2/)) for positioning.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/portal/portal.md b/docs/data/base/components/portal/portal.md
@@ -9,15 +9,17 @@ githubLabel: 'component: Portal'
 
 <p class="description">The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 Portal is a utility component built around [React's `createPortal()` API](https://react.dev/reference/react-dom/createPortal).
 It gives you the functionality of `createPortal()` in a convenient component form.
 
 The Portal component is used internally by the [Unstyled Modal](/base/react-modal/) and [Unstyled Popper](/base/react-popper/) components.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md
@@ -2,7 +2,7 @@
 product: base
 title: Unstyled React Select components and hook
 components: SelectUnstyled, OptionUnstyled, OptionGroupUnstyled
-hooks: useSelect
+hooks: useSelect, useOption
 githubLabel: 'component: select'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
 ---
@@ -11,6 +11,10 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-sel
 
 <p class="description">The Select components let you create lists of options for users to choose from.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 A select is a UI element that gives users a list of options to choose from.
@@ -26,8 +30,6 @@ It also includes Unstyled Option for creating the options on the list, and Unsty
 - 🧬 Accepts custom elements and non-string values for options
 - 🗃️ Options can be grouped and nested
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Components
 
 ### Usage
@@ -140,7 +142,7 @@ The following code snippet applies a CSS class called `my-listbox` to the listbo
 <SelectUnstyled slotProps={{ listbox: { className: 'my-listbox' } }} />
 ```
 
-## Hook
+## Hooks
 
 ```js
 import useSelect from '@mui/base/useSelect';

diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
@@ -12,6 +12,10 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
 <p class="description">A slider is a UI element that lets users select a single value or a range of values along a bar.
 </p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 The Unstyled Slider component lets users make selections from a range of values along a horizontal or vertical bar.
@@ -20,8 +24,6 @@ Sliders are ideal for interface controls that benefit from a visual representati
 
 {{"demo": "UnstyledSliderIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/snackbar/snackbar.md b/docs/data/base/components/snackbar/snackbar.md
@@ -10,14 +10,16 @@ githubLabel: 'component: snackbar'
 
 <p class="description">The Unstyled Snackbar component informs users that an action has been or will be performed by the app.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 A snackbar provides users with a brief, temporary message about app processes without interrupting their activity or experience.
 
 The Unstyled Snackbar component is built to appear on-screen to inform users about an action that the app is taking.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md
@@ -11,14 +11,16 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/switch/
 
 <p class="description">Switches are UI elements that let users choose between two states—most commonly on/off.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 The Unstyled Switch component provides users with a switch for toggling between two mutually exclusive states.
 
 {{"demo": "UnstyledSwitchIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/table-pagination/table-pagination.md b/docs/data/base/components/table-pagination/table-pagination.md
@@ -9,6 +9,10 @@ githubLabel: 'component: TablePagination'
 
 <p class="description">Table Pagination is an interface tool for splitting up large amounts of data to make it easier for users to navigate.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 The Unstyled Table Pagination component lets you add pagination controls to a table.
@@ -23,8 +27,6 @@ See the [Slot props section](#slot-props) for details.
 
 {{"demo": "UnstyledPaginationIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md
@@ -11,6 +11,10 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 
 <p class="description">Tabs are UI elements for organizing and navigating between groups of related content.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 Tabs are implemented using a collection of related components:
@@ -22,8 +26,6 @@ Tabs are implemented using a collection of related components:
 
 {{"demo": "UnstyledTabsIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Components
 
 ### Usage

diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
@@ -9,14 +9,16 @@ githubLabel: 'component: TextareaAutosize'
 
 <p class="description">The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.</p>
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
 ## Introduction
 
 Textarea Autosize is a utility component that replaces the native `<textarea>` HTML.
 
 The height of the Textarea Autosize component automatically adjusts as a response to keyboard inputs and window resizing events.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Component
 
 ### Usage

diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
@@ -73,7 +73,7 @@ const pages = [
     ],
   },
   {
-    title: 'API',
+    title: 'APIs',
     pathname: '/base/api',
     icon: 'CodeIcon',
     children: pagesApi,