From 482c38a49a230bf6a2fe3e53e14b09fbb9bacc95 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 27 Aug 2025 20:13:31 -0700
Subject: [PATCH] Remove added badges from docs pages (#41694)

* Remove added badges from docs pages

* Remove AddedIn
---
 site/src/components/shortcodes/AddedIn.astro     | 16 ----------------
 .../src/components/shortcodes/CSSVariables.astro | 13 +++++++++++++
 site/src/content/docs/components/accordion.mdx   |  4 +---
 site/src/content/docs/components/alerts.mdx      |  4 +---
 site/src/content/docs/components/badge.mdx       |  6 +-----
 site/src/content/docs/components/breadcrumb.mdx  |  4 +---
 site/src/content/docs/components/buttons.mdx     |  4 +---
 site/src/content/docs/components/card.mdx        |  6 +-----
 .../src/content/docs/components/close-button.mdx |  4 +---
 site/src/content/docs/components/dropdowns.mdx   |  4 +---
 site/src/content/docs/components/list-group.mdx  |  4 +---
 site/src/content/docs/components/modal.mdx       |  4 +---
 site/src/content/docs/components/navbar.mdx      |  4 +---
 site/src/content/docs/components/navs-tabs.mdx   |  6 +-----
 site/src/content/docs/components/offcanvas.mdx   |  6 +-----
 site/src/content/docs/components/pagination.mdx  |  4 +---
 .../src/content/docs/components/placeholders.mdx |  2 --
 site/src/content/docs/components/popovers.mdx    |  6 +-----
 site/src/content/docs/components/progress.mdx    |  4 +---
 site/src/content/docs/components/spinners.mdx    |  4 +---
 site/src/content/docs/components/toasts.mdx      |  4 +---
 site/src/content/docs/components/tooltips.mdx    |  6 +-----
 site/src/content/docs/content/reboot.mdx         |  2 --
 site/src/content/docs/customize/color-modes.mdx  |  2 --
 site/src/content/docs/customize/color.mdx        |  4 ----
 .../src/content/docs/customize/css-variables.mdx |  2 --
 site/src/content/docs/forms/validation.mdx       |  2 --
 .../content/docs/getting-started/contribute.mdx  |  3 ---
 site/src/content/docs/getting-started/vite.mdx   |  3 ---
 .../content/docs/helpers/color-background.mdx    |  2 --
 site/src/content/docs/helpers/colored-links.mdx  |  2 --
 site/src/content/docs/helpers/focus-ring.mdx     |  2 --
 site/src/content/docs/helpers/icon-link.mdx      |  2 --
 site/src/content/docs/helpers/stacks.mdx         |  2 --
 site/src/content/docs/helpers/vertical-rule.mdx  |  2 --
 site/src/content/docs/layout/css-grid.mdx        |  2 --
 site/src/content/docs/utilities/background.mdx   |  2 --
 site/src/content/docs/utilities/borders.mdx      |  4 ----
 site/src/content/docs/utilities/colors.mdx       |  2 --
 site/src/content/docs/utilities/link.mdx         |  2 --
 site/src/content/docs/utilities/object-fit.mdx   |  2 --
 site/src/content/docs/utilities/opacity.mdx      |  2 --
 site/src/content/docs/utilities/z-index.mdx      |  2 --
 site/src/types/auto-import.d.ts                  |  1 +
 44 files changed, 33 insertions(+), 135 deletions(-)
 delete mode 100644 site/src/components/shortcodes/AddedIn.astro
 create mode 100644 site/src/components/shortcodes/CSSVariables.astro

diff --git a/site/src/components/shortcodes/AddedIn.astro b/site/src/components/shortcodes/AddedIn.astro
deleted file mode 100644
index d9a26ce50e..0000000000
--- a/site/src/components/shortcodes/AddedIn.astro
+++ /dev/null
@@ -1,16 +0,0 @@
----
-/*
- * Outputs badge to identify the first version something was added
- */
-
-interface Props {
-  version: string
-}
-
-const { version } = Astro.props
----
-
-<small
-  class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2"
-  >Added in v{version}</small
->
diff --git a/site/src/components/shortcodes/CSSVariables.astro b/site/src/components/shortcodes/CSSVariables.astro
new file mode 100644
index 0000000000..d316a797c2
--- /dev/null
+++ b/site/src/components/shortcodes/CSSVariables.astro
@@ -0,0 +1,13 @@
+---
+interface Props {
+  component: string
+  className?: string
+}
+
+const { component, className } = Astro.props
+---
+
+<p>
+  {component} use local CSS variables on <code>.{className}</code> for real-time customization.
+  Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+</p>
diff --git a/site/src/content/docs/components/accordion.mdx b/site/src/content/docs/components/accordion.mdx
index 64bb59f728..5548962fed 100644
--- a/site/src/content/docs/components/accordion.mdx
+++ b/site/src/content/docs/components/accordion.mdx
@@ -149,9 +149,7 @@ Please read the [collapse accessibility section]([[docsref:/components/collapse#
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Accordions" className="accordion" />
 
 <ScssDocs name="accordion-css-vars" file="scss/_accordion.scss" />
 
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
index 68de62d1ac..9f436197e5 100644
--- a/site/src/content/docs/components/alerts.mdx
+++ b/site/src/content/docs/components/alerts.mdx
@@ -122,9 +122,7 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Alerts" className="alert" />
 
 <ScssDocs name="alert-css-vars" file="scss/_alert.scss" />
 
diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx
index b3e574b6d8..01b6476a3e 100644
--- a/site/src/content/docs/components/badge.mdx
+++ b/site/src/content/docs/components/badge.mdx
@@ -54,8 +54,6 @@ You can also replace the `.badge` class with a few more utilities without a coun
 
 ## Background colors
 
-<AddedIn version="5.2.0" />
-
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
 
 <Example code={getData('theme-colors').map((themeColor) => `<span class="badge text-bg-${themeColor.name}">${themeColor.title}</span>`)} />
@@ -72,9 +70,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Badges" className="badge" />
 
 <ScssDocs name="badge-css-vars" file="scss/_badge.scss" />
 
diff --git a/site/src/content/docs/components/breadcrumb.mdx b/site/src/content/docs/components/breadcrumb.mdx
index b30aaa560d..435ba128ff 100644
--- a/site/src/content/docs/components/breadcrumb.mdx
+++ b/site/src/content/docs/components/breadcrumb.mdx
@@ -86,9 +86,7 @@ For more information, see the [ARIA Authoring Practices Guide breadcrumb pattern
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Breadcrumbs" className="breadcrumb" />
 
 <ScssDocs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" />
 
diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx
index 3cf99ae197..58da2a329f 100644
--- a/site/src/content/docs/components/buttons.mdx
+++ b/site/src/content/docs/components/buttons.mdx
@@ -190,9 +190,7 @@ document.querySelectorAll('.btn').forEach(buttonElement => {
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Buttons" className="btn" />
 
 <ScssDocs name="btn-css-vars" file="scss/_buttons.scss" />
 
diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx
index 1cf25220cf..b0fedd460b 100644
--- a/site/src/content/docs/components/card.mdx
+++ b/site/src/content/docs/components/card.mdx
@@ -379,8 +379,6 @@ Cards include various options for customizing their backgrounds, borders, and co
 
 ### Background and color
 
-<AddedIn version="5.2.0" />
-
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="card text-bg-${themeColor.name} mb-3" style="max-width: 18rem;">
@@ -662,9 +660,7 @@ In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Cards" className="card" />
 
 <ScssDocs name="card-css-vars" file="scss/_card.scss" />
 
diff --git a/site/src/content/docs/components/close-button.mdx b/site/src/content/docs/components/close-button.mdx
index ef70fccacc..96defaad15 100644
--- a/site/src/content/docs/components/close-button.mdx
+++ b/site/src/content/docs/components/close-button.mdx
@@ -29,9 +29,7 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv
 
 ### Variables
 
-<AddedIn version="5.3.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Close button" className="btn-close" />
 
 <ScssDocs name="close-css-vars" file="scss/_close.scss" />
 
diff --git a/site/src/content/docs/components/dropdowns.mdx b/site/src/content/docs/components/dropdowns.mdx
index 22c7e07db2..79eb5239d3 100644
--- a/site/src/content/docs/components/dropdowns.mdx
+++ b/site/src/content/docs/components/dropdowns.mdx
@@ -927,9 +927,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Dropdowns" className="dropdown-menu" />
 
 <ScssDocs name="dropdown-css-vars" file="scss/_dropdown.scss" />
 
diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
index 09938f6e65..5d4727cbd5 100644
--- a/site/src/content/docs/components/list-group.mdx
+++ b/site/src/content/docs/components/list-group.mdx
@@ -253,9 +253,7 @@ You can use `.stretched-link` on `<label>`s to make the whole list group item cl
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, list groups now use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="List groups" className="list-group" />
 
 <ScssDocs name="list-group-css-vars" file="scss/_list-group.scss" />
 
diff --git a/site/src/content/docs/components/modal.mdx b/site/src/content/docs/components/modal.mdx
index 2f2cb55557..3152fa6d6a 100644
--- a/site/src/content/docs/components/modal.mdx
+++ b/site/src/content/docs/components/modal.mdx
@@ -725,9 +725,7 @@ Another override is the option to pop up a modal that covers the user viewport,
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Modals" className="modal" />
 
 <ScssDocs name="modal-css-vars" file="scss/_modal.scss" />
 
diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 7e8007859d..9d412b3f61 100644
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -721,9 +721,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Navbars" className="navbar" />
 
 <ScssDocs name="navbar-css-vars" file="scss/_navbar.scss" />
 
diff --git a/site/src/content/docs/components/navs-tabs.mdx b/site/src/content/docs/components/navs-tabs.mdx
index fe51c69281..46be7dc773 100644
--- a/site/src/content/docs/components/navs-tabs.mdx
+++ b/site/src/content/docs/components/navs-tabs.mdx
@@ -295,9 +295,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Navs" className="nav" />
 
 On the `.nav` base class:
 
@@ -311,8 +309,6 @@ On the `.nav-pills` modifier class:
 
 <ScssDocs name="nav-pills-css-vars" file="scss/_nav.scss" />
 
-<AddedIn version="5.3.0" />
-
 On the `.nav-underline` modifier class:
 
 <ScssDocs name="nav-underline-css-vars" file="scss/_nav.scss" />
diff --git a/site/src/content/docs/components/offcanvas.mdx b/site/src/content/docs/components/offcanvas.mdx
index fecf7ed84a..c97833ee59 100644
--- a/site/src/content/docs/components/offcanvas.mdx
+++ b/site/src/content/docs/components/offcanvas.mdx
@@ -139,8 +139,6 @@ Change the appearance of offcanvases with utilities to better match them to diff
 
 ## Responsive
 
-<AddedIn version="5.2.0" />
-
 Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint. Responsive offcanvas classes are available for each breakpoint.
 
 - `.offcanvas`
@@ -221,9 +219,7 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Offcanvas" className="offcanvas" />
 
 <ScssDocs name="offcanvas-css-vars" file="scss/_offcanvas.scss" />
 
diff --git a/site/src/content/docs/components/pagination.mdx b/site/src/content/docs/components/pagination.mdx
index 063c14eef7..f420b04f02 100644
--- a/site/src/content/docs/components/pagination.mdx
+++ b/site/src/content/docs/components/pagination.mdx
@@ -156,9 +156,7 @@ Or with `.justify-content-end`:
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Pagination" className="pagination" />
 
 <ScssDocs name="pagination-css-vars" file="scss/_pagination.scss" />
 
diff --git a/site/src/content/docs/components/placeholders.mdx b/site/src/content/docs/components/placeholders.mdx
index 138e8428ed..d90cd7eadc 100644
--- a/site/src/content/docs/components/placeholders.mdx
+++ b/site/src/content/docs/components/placeholders.mdx
@@ -2,8 +2,6 @@
 title: Placeholders
 description: Use loading placeholders (skeleton loaders) for your components or pages to indicate something may still be loading.
 toc: true
-added:
-  version: "5.1"
 ---
 
 import { getData } from '@libs/data'
diff --git a/site/src/content/docs/components/popovers.mdx b/site/src/content/docs/components/popovers.mdx
index 8947fb0a1c..3808aa5a1a 100644
--- a/site/src/content/docs/components/popovers.mdx
+++ b/site/src/content/docs/components/popovers.mdx
@@ -81,8 +81,6 @@ const popover = new bootstrap.Popover('.example-popover', {
 
 ### Custom popovers
 
-<AddedIn version="5.2.0" />
-
 You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
 
 <ScssDocs name="custom-popovers" file="site/src/scss/_component-examples.scss" />
@@ -125,9 +123,7 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Popovers" className="popover" />
 
 <ScssDocs name="popover-css-vars" file="scss/_popover.scss" />
 
diff --git a/site/src/content/docs/components/progress.mdx b/site/src/content/docs/components/progress.mdx
index 7529bb9cc0..e0ae359b6e 100644
--- a/site/src/content/docs/components/progress.mdx
+++ b/site/src/content/docs/components/progress.mdx
@@ -153,9 +153,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Progress" className="progress" />
 
 <ScssDocs name="progress-css-vars" file="scss/_progress.scss" />
 
diff --git a/site/src/content/docs/components/spinners.mdx b/site/src/content/docs/components/spinners.mdx
index c02d0e9d75..4d54f3c04f 100644
--- a/site/src/content/docs/components/spinners.mdx
+++ b/site/src/content/docs/components/spinners.mdx
@@ -139,9 +139,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Spinners" className="spinner-{border|grow}" />
 
 Border spinner variables:
 
diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
index cb6afb9d6f..106b2802ca 100644
--- a/site/src/content/docs/components/toasts.mdx
+++ b/site/src/content/docs/components/toasts.mdx
@@ -294,9 +294,7 @@ While technically it’s possible to add focusable/actionable controls (such as
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Toasts" className="toast" />
 
 <ScssDocs name="toast-css-vars" file="scss/_toasts.scss" />
 
diff --git a/site/src/content/docs/components/tooltips.mdx b/site/src/content/docs/components/tooltips.mdx
index 16f215fc68..74e1447010 100644
--- a/site/src/content/docs/components/tooltips.mdx
+++ b/site/src/content/docs/components/tooltips.mdx
@@ -45,8 +45,6 @@ Hover over the links below to see tooltips:
 
 ### Custom tooltips
 
-<AddedIn version="5.2.0" />
-
 You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
 
 <ScssDocs name="custom-tooltip" file="site/src/scss/_component-examples.scss" />
@@ -108,9 +106,7 @@ With an SVG:
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Tooltips" className="tooltip" />
 
 <ScssDocs name="tooltip-css-vars" file="scss/_tooltip.scss" />
 
diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx
index 4b8f8745a0..31a0262d63 100644
--- a/site/src/content/docs/content/reboot.mdx
+++ b/site/src/content/docs/content/reboot.mdx
@@ -18,8 +18,6 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
 
 ## CSS variables
 
-<AddedIn version="5.2.0"/>
-
 With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]([[docsref:/customize/css-variables]]) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
 
 For example, consider these `:root` CSS variables for common `<body>` styles:
diff --git a/site/src/content/docs/customize/color-modes.mdx b/site/src/content/docs/customize/color-modes.mdx
index 79dd7f6a43..c16aad79fc 100644
--- a/site/src/content/docs/customize/color-modes.mdx
+++ b/site/src/content/docs/customize/color-modes.mdx
@@ -2,8 +2,6 @@
 title: Color modes
 description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
 toc: true
-added:
-  version: "5.3"
 ---
 
 import { getDocsRelativePath } from '@libs/path'
diff --git a/site/src/content/docs/customize/color.mdx b/site/src/content/docs/customize/color.mdx
index b24f14d6b0..178a74780e 100644
--- a/site/src/content/docs/customize/color.mdx
+++ b/site/src/content/docs/customize/color.mdx
@@ -9,8 +9,6 @@ import { getSequence } from '@libs/utils'
 
 ## Colors
 
-<AddedIn version="5.3.0" />
-
 Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
 
 Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
@@ -470,8 +468,6 @@ Here’s how you can use these in your Sass:
 
 ## Generating utilities
 
-<AddedIn version="5.1.0"/>
-
 Bootstrap doesn’t include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]([[docsref:/utilities/api]]) and our extended Sass maps added in v5.1.0.
 
 1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.
diff --git a/site/src/content/docs/customize/css-variables.mdx b/site/src/content/docs/customize/css-variables.mdx
index 20a0b9d44f..488d695559 100644
--- a/site/src/content/docs/customize/css-variables.mdx
+++ b/site/src/content/docs/customize/css-variables.mdx
@@ -53,8 +53,6 @@ a {
 
 ## Focus variables
 
-<AddedIn version="5.3.0"/>
-
 Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
 
 In our Sass, we set default values that can be customized before compiling.
diff --git a/site/src/content/docs/forms/validation.mdx b/site/src/content/docs/forms/validation.mdx
index cf6da63bd8..d430f1accf 100644
--- a/site/src/content/docs/forms/validation.mdx
+++ b/site/src/content/docs/forms/validation.mdx
@@ -339,8 +339,6 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 
 ### Variables
 
-<AddedIn version="5.3.0"/>
-
 As part of Bootstrap’s evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="root-form-validation-variables" file="scss/_root.scss" />
diff --git a/site/src/content/docs/getting-started/contribute.mdx b/site/src/content/docs/getting-started/contribute.mdx
index e1af5dc293..23213b860b 100644
--- a/site/src/content/docs/getting-started/contribute.mdx
+++ b/site/src/content/docs/getting-started/contribute.mdx
@@ -3,9 +3,6 @@ title: Contribute
 description: Help develop Bootstrap with our documentation build scripts and tests.
 toc: true
 aliases: "/docs/[[config:docs_version]]/getting-started/build-tools/"
-added:
-  show_badge: false
-  version: "5.1"
 ---
 ## Tooling setup
 
diff --git a/site/src/content/docs/getting-started/vite.mdx b/site/src/content/docs/getting-started/vite.mdx
index 0041285b5a..858942ef6d 100644
--- a/site/src/content/docs/getting-started/vite.mdx
+++ b/site/src/content/docs/getting-started/vite.mdx
@@ -3,9 +3,6 @@ title: Bootstrap and Vite
 description: The official guide for how to include and bundle Bootstrap’s CSS and JavaScript in your project using Vite.
 toc: true
 thumbnail: guides/bootstrap-vite@2x.png
-added:
-  show_badge: false
-  version: "5.2"
 ---
 
 <img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="" />
diff --git a/site/src/content/docs/helpers/color-background.mdx b/site/src/content/docs/helpers/color-background.mdx
index e911200576..d7251f1a6d 100644
--- a/site/src/content/docs/helpers/color-background.mdx
+++ b/site/src/content/docs/helpers/color-background.mdx
@@ -2,8 +2,6 @@
 title: Color and background
 description: Set a background color with contrasting foreground color.
 toc: true
-added:
-  version: "5.2"
 ---
 
 import { getData } from '@libs/data'
diff --git a/site/src/content/docs/helpers/colored-links.mdx b/site/src/content/docs/helpers/colored-links.mdx
index f26204df53..4240973b6e 100644
--- a/site/src/content/docs/helpers/colored-links.mdx
+++ b/site/src/content/docs/helpers/colored-links.mdx
@@ -23,8 +23,6 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class
 
 ## Link utilities
 
-<AddedIn version="5.3.0"/>
-
 Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]).
 
 <Example code={[
diff --git a/site/src/content/docs/helpers/focus-ring.mdx b/site/src/content/docs/helpers/focus-ring.mdx
index 51e4f98aa9..e1dfb92573 100644
--- a/site/src/content/docs/helpers/focus-ring.mdx
+++ b/site/src/content/docs/helpers/focus-ring.mdx
@@ -2,8 +2,6 @@
 title: Focus ring
 description: Utility classes that allows you to add and modify custom focus ring styles to elements and components.
 toc: true
-added:
-  version: "5.3"
 ---
 
 import { getData } from '@libs/data'
diff --git a/site/src/content/docs/helpers/icon-link.mdx b/site/src/content/docs/helpers/icon-link.mdx
index 201113142b..d4914cdc33 100644
--- a/site/src/content/docs/helpers/icon-link.mdx
+++ b/site/src/content/docs/helpers/icon-link.mdx
@@ -2,8 +2,6 @@
 title: Icon link
 description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
 toc: true
-added:
-  version: "5.3"
 ---
 
 The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text’s `font-size`.
diff --git a/site/src/content/docs/helpers/stacks.mdx b/site/src/content/docs/helpers/stacks.mdx
index 79b1991995..6cce2804db 100644
--- a/site/src/content/docs/helpers/stacks.mdx
+++ b/site/src/content/docs/helpers/stacks.mdx
@@ -2,8 +2,6 @@
 title: Stacks
 description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
 toc: true
-added:
-  version: "5.1"
 ---
 
 Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
diff --git a/site/src/content/docs/helpers/vertical-rule.mdx b/site/src/content/docs/helpers/vertical-rule.mdx
index 006c0f2c87..4a1efc16d4 100644
--- a/site/src/content/docs/helpers/vertical-rule.mdx
+++ b/site/src/content/docs/helpers/vertical-rule.mdx
@@ -2,8 +2,6 @@
 title: Vertical rule
 description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
 toc: true
-added:
-  version: "5.1"
 ---
 
 ## How it works
diff --git a/site/src/content/docs/layout/css-grid.mdx b/site/src/content/docs/layout/css-grid.mdx
index ac318cc618..a302ad8ea1 100644
--- a/site/src/content/docs/layout/css-grid.mdx
+++ b/site/src/content/docs/layout/css-grid.mdx
@@ -2,8 +2,6 @@
 title: CSS Grid
 description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
 toc: true
-added:
-  version: "5.1"
 ---
 
 Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.
diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx
index 365d01eb3a..720132e422 100644
--- a/site/src/content/docs/utilities/background.mdx
+++ b/site/src/content/docs/utilities/background.mdx
@@ -42,8 +42,6 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 ## Opacity
 
-<AddedIn version="5.1.0" />
-
 As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 
 ### How it works
diff --git a/site/src/content/docs/utilities/borders.mdx b/site/src/content/docs/utilities/borders.mdx
index 504044b7be..09e1dc1b13 100644
--- a/site/src/content/docs/utilities/borders.mdx
+++ b/site/src/content/docs/utilities/borders.mdx
@@ -62,8 +62,6 @@ Or modify the default `border-color` of a component:
 
 ## Opacity
 
-<AddedIn version="5.2.0" />
-
 Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 
 ### How it works
@@ -135,8 +133,6 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
 <ScssDocs name="root-border-var" file="scss/_root.scss" />
 
 ### Sass variables
diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx
index b5dffd3eff..69a9fd3308 100644
--- a/site/src/content/docs/utilities/colors.mdx
+++ b/site/src/content/docs/utilities/colors.mdx
@@ -31,8 +31,6 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 
 ## Opacity
 
-<AddedIn version="5.1.0" />
-
 As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 
 ### How it works
diff --git a/site/src/content/docs/utilities/link.mdx b/site/src/content/docs/utilities/link.mdx
index 7bfc5755ee..95c4f77a51 100644
--- a/site/src/content/docs/utilities/link.mdx
+++ b/site/src/content/docs/utilities/link.mdx
@@ -2,8 +2,6 @@
 title: Link
 description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
 toc: true
-added:
-  version: "5.3"
 ---
 
 import { getData } from '@libs/data'
diff --git a/site/src/content/docs/utilities/object-fit.mdx b/site/src/content/docs/utilities/object-fit.mdx
index 89866ab584..18df79203c 100644
--- a/site/src/content/docs/utilities/object-fit.mdx
+++ b/site/src/content/docs/utilities/object-fit.mdx
@@ -2,8 +2,6 @@
 title: Object fit
 description: Use the object fit utilities to modify how the content of a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element" target="_blank" rel="noopener noreferrer">replaced element</a>, such as an `<img>` or `<video>`, should be resized to fit its container.
 toc: true
-added:
-  version: "5.3"
 ---
 
 ## How it works
diff --git a/site/src/content/docs/utilities/opacity.mdx b/site/src/content/docs/utilities/opacity.mdx
index 17fc6ac069..e459b4f319 100644
--- a/site/src/content/docs/utilities/opacity.mdx
+++ b/site/src/content/docs/utilities/opacity.mdx
@@ -1,8 +1,6 @@
 ---
 title: Opacity
 description: Control the opacity of elements.
-added:
-  version: "5.1"
 ---
 
 The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
diff --git a/site/src/content/docs/utilities/z-index.mdx b/site/src/content/docs/utilities/z-index.mdx
index 4f0bf1e817..0549ae15f3 100644
--- a/site/src/content/docs/utilities/z-index.mdx
+++ b/site/src/content/docs/utilities/z-index.mdx
@@ -2,8 +2,6 @@
 title: Z-index
 description: Use our low-level `z-index` utilities to quickly change the stack level of an element or component.
 toc: true
-added:
-  version: "5.3"
 ---
 
 ## Example
diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts
index bd9f104484..c5f54b1563 100644
--- a/site/src/types/auto-import.d.ts
+++ b/site/src/types/auto-import.d.ts
@@ -8,6 +8,7 @@
 export declare global {
   export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default
   export const BsTable: typeof import('@shortcodes/BsTable.astro').default
+  export const CSSVariables: typeof import('@shortcodes/CSSVariables.astro').default
   export const Callout: typeof import('@shortcodes/Callout.astro').default
   export const CalloutDeprecatedDarkVariants: typeof import('@shortcodes/CalloutDeprecatedDarkVariants.astro').default
   export const Code: typeof import('@shortcodes/Code.astro').default