twbs · mdo · Jul 28, 2026 · Jul 21, 2026
diff --git a/AGENTS.md b/AGENTS.md
@@ -67,6 +67,7 @@ Act as a teacher for JavaScript, TypeScript, React, and all JavaScript-family to
 - Frontmatter schema: `title` (required), `description` (required), `toc`, `aliases`, `added`, `mdn`, `reference`, etc.
 - Shortcodes: `Example`, `Callout`, `Code`, `Details`
 - Internal links: `[[docsref:/path/]]`
+- JS component "Dependencies" tables are auto-generated — add a `### Dependencies` heading with `<JsDependencies component="<js-src-basename>" />` (before `### Options`) on any doc for a `js/src/*.ts` component. The table is derived at build time by walking the component's import graph in `site/src/libs/js-dependencies.ts`; never hand-write the file list. When a new source file or third-party package enters the graph, add its human-readable label to `FILE_DESCRIPTIONS` / `PACKAGE_DESCRIPTIONS` in that lib (the build throws if a label is missing).
 
 ## Formatting
 

diff --git a/site/src/components/shortcodes/JsDependencies.astro b/site/src/components/shortcodes/JsDependencies.astro
@@ -0,0 +1,49 @@
+---
+import { getJsDependencies } from '@libs/js-dependencies'
+
+interface Props {
+  /**
+   * Name of the component's JavaScript source file (relative to `js/src`, without extension), e.g. `tooltip` or
+   * `otp-input`. The dependency table is generated by walking this file's import graph.
+   */
+  component: string
+  /**
+   * Optional display name used in the introductory sentence, defaulting to the `component` value.
+   */
+  name?: string
+}
+
+const { component, name } = Astro.props
+
+if (!component) {
+  throw new Error("Missing required 'component' prop for the '<JsDependencies />' component.")
+}
+
+const dependencies = getJsDependencies(component)
+const label = name ?? component
+---
+
+<p>The {label} plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:</p>
+
+<div class="table-responsive">
+  <table class="table md:table-stacked">
+    <thead>
+      <tr>
+        <th>File</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {
+        dependencies.map((dependency) => (
+          <tr>
+            <td data-cell="File">
+              <code>{dependency.file}</code>
+            </td>
+            <td data-cell="Description">{dependency.description}</td>
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</div>
diff --git a/site/src/components/shortcodes/index.ts b/site/src/components/shortcodes/index.ts
@@ -9,6 +9,7 @@ export { default as Details } from './Details.astro'
 export { default as Example } from './Example.astro'
 export { default as GuideFooter } from './GuideFooter.mdx'
 export { default as JsDataAttributes } from './JsDataAttributes.mdx'
+export { default as JsDependencies } from './JsDependencies.astro'
 export { default as JsDismiss } from './JsDismiss.astro'
 export { default as JsDocs } from './JsDocs.astro'
 export { default as MenuPlacementPlayground } from './MenuPlacementPlayground.astro'

diff --git a/site/src/content/docs/components/alert.mdx b/site/src/content/docs/components/alert.mdx
@@ -134,6 +134,10 @@ See the [triggers](#triggers) section for more details.
 
 **Note that closing an alert will remove it from the DOM.**
 
+### Dependencies
+
+<JsDependencies component="alert" />
+
 ### Methods
 
 You can create an alert instance with the alert constructor, for example:

diff --git a/site/src/content/docs/components/button.mdx b/site/src/content/docs/components/button.mdx
@@ -259,6 +259,10 @@ Add `data-bs-toggle="button"` to toggle a button’s `active` state. If you’re
 | `data-bs-toggle="button"` | Toggles the button’s active (`pressed`) state via the Button plugin. |
 </BsTable>
 
+### Dependencies
+
+<JsDependencies component="button" />
+
 ### Methods
 
 You can create a button instance with the button constructor, for example:

diff --git a/site/src/content/docs/components/carousel.mdx b/site/src/content/docs/components/carousel.mdx
@@ -571,6 +571,10 @@ Call carousel manually with:
 const carousel = new bootstrap.Carousel('#myCarousel')
 ```
 
+### Dependencies
+
+<JsDependencies component="carousel" />
+
 ### Options
 
 <JsDataAttributes />

diff --git a/site/src/content/docs/components/collapse.mdx b/site/src/content/docs/components/collapse.mdx
@@ -137,6 +137,10 @@ const collapseElementList = document.querySelectorAll('.collapse')
 const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))
 ```
 
+### Dependencies
+
+<JsDependencies component="collapse" />
+
 ### Options
 
 <JsDataAttributes />

diff --git a/site/src/content/docs/components/dialog.mdx b/site/src/content/docs/components/dialog.mdx
@@ -485,6 +485,10 @@ Create a dialog with a single line of JavaScript:
 const myDialog = new bootstrap.Dialog('#myDialog')
 ```
 
+### Dependencies
+
+<JsDependencies component="dialog" />
+
 ### Options
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop="static"`.

diff --git a/site/src/content/docs/components/drawer.mdx b/site/src/content/docs/components/drawer.mdx
@@ -349,6 +349,10 @@ const drawerElementList = document.querySelectorAll('dialog.drawer')
 const drawerList = [...drawerElementList].map(drawerEl => new bootstrap.Drawer(drawerEl))
 ```
 
+### Dependencies
+
+<JsDependencies component="drawer" />
+
 ### Options
 
 <JsDataAttributes />

diff --git a/site/src/content/docs/components/menu.mdx b/site/src/content/docs/components/menu.mdx
@@ -619,20 +619,7 @@ menu.toggle()
 
 ### Dependencies
 
-The menu plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:
-
-<BsTable>
-| File | Description |
-| --- | --- |
-| `js/src/menu.ts` | Main menu component |
-| `js/src/base-component.ts` | Base component class |
-| `js/src/dom/event-handler.ts` | Event handling utilities |
-| `js/src/dom/manipulator.ts` | Data attribute manipulation |
-| `js/src/dom/selector-engine.ts` | DOM selector utilities |
-| `js/src/util/index.ts` | Core utility functions |
-| `js/src/util/floating-ui.ts` | Responsive placement utilities |
-| `@floating-ui/dom` | Third-party positioning library |
-</BsTable>
+<JsDependencies component="menu" />
 
 ### Options
 

diff --git a/site/src/content/docs/components/nav-overflow.mdx b/site/src/content/docs/components/nav-overflow.mdx
@@ -298,6 +298,10 @@ const navOverflow = new bootstrap.NavOverflow(navElement, {
 })
 ```
 
+### Dependencies
+
+<JsDependencies component="nav-overflow" />
+
 ### Options
 
 <JsDataAttributes />

diff --git a/site/src/content/docs/components/popover.mdx b/site/src/content/docs/components/popover.mdx
@@ -222,22 +222,7 @@ Popovers do not manage keyboard focus order, and their placement can be random i
 
 ### Dependencies
 
-The popover plugin extends the tooltip plugin, so it requires all tooltip dependencies plus its own:
-
-<BsTable>
-| File | Description |
-| --- | --- |
-| `js/src/popover.ts` | Main popover component |
-| `js/src/tooltip.ts` | Tooltip component (extended by popover) |
-| `js/src/base-component.ts` | Base component class |
-| `js/src/dom/event-handler.ts` | Event handling utilities |
-| `js/src/dom/manipulator.ts` | Data attribute manipulation |
-| `js/src/util/index.ts` | Core utility functions |
-| `js/src/util/sanitizer.ts` | HTML content sanitizer |
-| `js/src/util/template-factory.ts` | Template rendering utilities |
-| `js/src/util/floating-ui.ts` | Responsive placement utilities |
-| `@floating-ui/dom` | Third-party positioning library |
-</BsTable>
+<JsDependencies component="popover" />
 
 ### Options
 

diff --git a/site/src/content/docs/components/scrollspy.mdx b/site/src/content/docs/components/scrollspy.mdx
@@ -398,6 +398,10 @@ const scrollSpy = new bootstrap.ScrollSpy(document.body, {
 })
 ```
 
+### Dependencies
+
+<JsDependencies component="scrollspy" />
+
 ### Options
 
 <JsDataAttributes />

diff --git a/site/src/content/docs/components/tab.mdx b/site/src/content/docs/components/tab.mdx
@@ -254,6 +254,10 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 </div>
 ```
 
+### Dependencies
+
+<JsDependencies component="tab" />
+
 ### Methods
 
 <Callout name="danger-async-methods" type="danger" />

diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
@@ -382,6 +382,10 @@ const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, o
 
 <JsDismiss name="toast" />
 
+### Dependencies
+
+<JsDependencies component="toast" />
+
 ### Options
 
 <JsDataAttributes />

diff --git a/site/src/content/docs/components/toggler.mdx b/site/src/content/docs/components/toggler.mdx
@@ -99,6 +99,10 @@ var togglerList = togglerElementList.map(function (togglerEl) {
 })
 ```
 
+### Dependencies
+
+<JsDependencies component="toggler" />
+
 ### Options
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-value="foo"`.

diff --git a/site/src/content/docs/components/tooltip.mdx b/site/src/content/docs/components/tooltip.mdx
@@ -218,21 +218,7 @@ A shown tooltip can be dismissed by pressing the <kbd>Escape</kbd> key, helping
 
 ### Dependencies
 
-The tooltip plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:
-
-<BsTable>
-| File | Description |
-| --- | --- |
-| `js/src/tooltip.ts` | Main tooltip component |
-| `js/src/base-component.ts` | Base component class |
-| `js/src/dom/event-handler.ts` | Event handling utilities |
-| `js/src/dom/manipulator.ts` | Data attribute manipulation |
-| `js/src/util/index.ts` | Core utility functions |
-| `js/src/util/sanitizer.ts` | HTML content sanitizer |
-| `js/src/util/template-factory.ts` | Template rendering utilities |
-| `js/src/util/floating-ui.ts` | Responsive placement utilities |
-| `@floating-ui/dom` | Third-party positioning library |
-</BsTable>
+<JsDependencies component="tooltip" />
 
 ### Options
 

diff --git a/site/src/content/docs/forms/chips.mdx b/site/src/content/docs/forms/chips.mdx
@@ -182,6 +182,10 @@ const chips = new bootstrap.Chips(chipInputElement, {
 })
 ```
 
+### Dependencies
+
+<JsDependencies component="chips" />
+
 ### Options
 
 Options can be passed via data attributes or JavaScript:

diff --git a/site/src/content/docs/forms/combobox.mdx b/site/src/content/docs/forms/combobox.mdx
@@ -408,6 +408,10 @@ For multiple selection, the hidden input value is a comma-separated list of sele
 | `data-bs-placeholder` | Placeholder text shown in the toggle when nothing is selected. |
 </BsTable>
 
+### Dependencies
+
+<JsDependencies component="combobox" />
+
 ### Options
 
 Options can be passed via data attributes on the toggle button (e.g., `data-bs-search="true"`) or as a config object when initializing via JavaScript.

diff --git a/site/src/content/docs/forms/datepicker.mdx b/site/src/content/docs/forms/datepicker.mdx
@@ -239,6 +239,10 @@ const datepicker = new bootstrap.Datepicker(datepickerEl, {
 })
 ```
 
+### Dependencies
+
+<JsDependencies component="datepicker" />
+
 ### Options
 
 <BsTable>

diff --git a/site/src/content/docs/forms/otp-input.mdx b/site/src/content/docs/forms/otp-input.mdx
@@ -136,6 +136,10 @@ const otpElement = document.querySelector('.otp')
 const otpInput = new bootstrap.OtpInput(otpElement)
 ```
 
+### Dependencies
+
+<JsDependencies component="otp-input" name="OTP input" />
+
 ### Options
 
 Options can be passed via data attributes or JavaScript:

diff --git a/site/src/content/docs/forms/password-strength.mdx b/site/src/content/docs/forms/password-strength.mdx
@@ -187,6 +187,10 @@ const strength = new bootstrap.Strength(element, {
 })
 ```
 
+### Dependencies
+
+<JsDependencies component="strength" name="password strength" />
+
 ### Options
 
 <BsTable>

diff --git a/site/src/content/docs/forms/range.mdx b/site/src/content/docs/forms/range.mdx
@@ -111,6 +111,10 @@ const range = new bootstrap.Range(element, {
 })
 ```
 
+### Dependencies
+
+<JsDependencies component="range" />
+
 ### Options
 
 <BsTable>