diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index f623800d..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/dist/**
-.eslintrc.js
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 2f74cc21..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict'
-
-module.exports = {
-  root: true, // So parent files don't get applied
-  env: {
-    es6: true,
-    browser: true,
-    node: true,
-  },
-  extends: [
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'plugin:unicorn/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
-  settings: {
-    react: {
-      pragma: 'React',
-      version: 'detect',
-    },
-  },
-  rules: {
-    'unicorn/filename-case': 'off',
-    'unicorn/no-array-for-each': 'off',
-    'unicorn/no-null': 'off',
-    'unicorn/prefer-dom-node-append': 'off',
-    'unicorn/prefer-export-from': 'off',
-    'unicorn/prefer-query-selector': 'off',
-    'unicorn/prevent-abbreviations': 'off',
-  },
-  overrides: [
-    {
-      files: ['packages/docs/build/**'],
-      env: {
-        browser: false,
-        node: true,
-      },
-      parserOptions: {
-        sourceType: 'script',
-      },
-      rules: {
-        '@typescript-eslint/no-var-requires': 'off',
-        'no-console': 'off',
-        'unicorn/prefer-module': 'off',
-        'unicorn/prefer-top-level-await': 'off',
-      },
-    },
-    {
-      files: ['packages/docs/**'],
-      rules: {
-        '@typescript-eslint/no-var-requires': 'off',
-        'unicorn/prefer-module': 'off',
-      },
-    },
-  ],
-}
diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index 415ca057..00000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  semi: false,
-  trailingComma: "all",
-  singleQuote: true,
-  printWidth: 100,
-  tabWidth: 2
-};
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
index 94e4f4d1..fbb053e0 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 creativeLabs Łukasz Holeczek
+Copyright (c) 2025 creativeLabs Łukasz Holeczek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index f1d28a27..34eede89 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.4.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
@@ -101,6 +101,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 
 - [React Accordion](https://coreui.io/react/docs/components/accordion/)
 - [React Alert](https://coreui.io/react/docs/components/alert/)
+- [React Autocomplete](https://coreui.io/react/docs/forms/autocomplete/) **PRO**
 - [React Avatar](https://coreui.io/react/docs/components/avatar/)
 - [React Badge](https://coreui.io/react/docs/components/badge/)
 - [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/)
@@ -134,7 +135,8 @@ import "bootstrap/dist/css/bootstrap.min.css";
 - [React Progress](https://coreui.io/react/docs/components/progress/)
 - [React Radio](https://coreui.io/react/docs/forms/radio/)
 - [React Range](https://coreui.io/react/docs/forms/range/)
-- [React Rating](https://coreui.io/react/docs/forms/rating/)
+- [React Range Slider](https://coreui.io/react/docs/forms/range-slider/) **PRO**
+- [React Rating](https://coreui.io/react/docs/forms/rating/) **PRO**
 - [React Select](https://coreui.io/react/docs/forms/select/)
 - [React Sidebar](https://coreui.io/react/docs/components/sidebar/)
 - [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO**
@@ -227,4 +229,4 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How
 
 ## Copyright and license
 
-Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
\ No newline at end of file
+Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..2498120d
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,104 @@
+import eslint from '@eslint/js'
+import tsParser from '@typescript-eslint/parser'
+import eslintPluginUnicorn from 'eslint-plugin-unicorn'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import eslintPluginReact from 'eslint-plugin-react'
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
+import globals from 'globals'
+import typescriptEslint from 'typescript-eslint'
+
+export default typescriptEslint.config(
+  { ignores: ['**/*.d.ts', '**/coverage', '**/dist', 'eslint.config.mjs'] },
+  {
+    extends: [
+      eslint.configs.recommended,
+      ...typescriptEslint.configs.recommended,
+      eslintPluginUnicorn.configs['flat/recommended'],
+      eslintPluginReact.configs.flat.recommended,
+      eslintPluginReact.configs.flat['jsx-runtime'],
+    ],
+    plugins: {
+      'react-hooks': eslintPluginReactHooks,
+    },
+    files: ['packages/**/src/**/*.{js,ts,tsx}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      parser: tsParser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        pragma: 'React',
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...eslintPluginReactHooks.configs.recommended.rules,
+      'no-console': 'off',
+      'no-debugger': 'off',
+      'unicorn/filename-case': 'off',
+      'unicorn/no-array-for-each': 'off',
+      'unicorn/no-null': 'off',
+      'unicorn/prefer-dom-node-append': 'off',
+      'unicorn/prefer-export-from': 'off',
+      'unicorn/prefer-query-selector': 'off',
+      'unicorn/prevent-abbreviations': 'off',
+      'vue/require-default-prop': 'off',
+    },
+  },
+  {
+    files: ['**/*.mjs'],
+    languageOptions: {
+      globals: {
+        ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+        ...globals.node,
+      },
+
+      ecmaVersion: 5,
+      sourceType: 'module',
+    },
+  },
+  {
+    files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+      },
+    },
+  },
+  {
+    files: ['packages/docs/build/**'],
+    languageOptions: {
+      globals: {
+        ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+        ...globals.node,
+      },
+
+      ecmaVersion: 5,
+      sourceType: 'commonjs',
+    },
+    rules: {
+      '@typescript-eslint/no-var-requires': 'off',
+      'no-console': 'off',
+      'unicorn/prefer-module': 'off',
+      'unicorn/prefer-top-level-await': 'off',
+    },
+  },
+  {
+    files: ['packages/docs/**'],
+    rules: {
+      '@typescript-eslint/no-var-requires': 'off',
+      'unicorn/prefer-module': 'off',
+    },
+  },
+  eslintPluginPrettierRecommended,
+)
diff --git a/lerna.json b/lerna.json
index 6fea4400..d86538ff 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.4.1",
+  "version": "5.7.1",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/package.json b/package.json
index f27bd5f4..b7e32b5f 100644
--- a/package.json
+++ b/package.json
@@ -22,17 +22,18 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.12.1",
-    "@typescript-eslint/parser": "^8.12.1",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-unicorn": "^56.0.0",
-    "lerna": "^8.1.8",
+    "@typescript-eslint/parser": "^8.36.0",
+    "eslint": "^9.31.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-unicorn": "^59.0.1",
+    "globals": "^16.3.0",
+    "lerna": "^8.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3"
+    "prettier": "^3.6.2",
+    "typescript-eslint": "^8.36.0"
   },
   "overrides": {
     "gatsby-remark-external-links": {
diff --git a/packages/coreui-react/LICENSE b/packages/coreui-react/LICENSE
index 94e4f4d1..fbb053e0 100644
--- a/packages/coreui-react/LICENSE
+++ b/packages/coreui-react/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 creativeLabs Łukasz Holeczek
+Copyright (c) 2025 creativeLabs Łukasz Holeczek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md
index 0dec4d28..190eafc0 100644
--- a/packages/coreui-react/README.md
+++ b/packages/coreui-react/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.4.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
@@ -259,4 +259,4 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back
 
 ## Copyright and license
 
-Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
index e106f5a0..4e62fee7 100644
--- a/packages/coreui-react/package.json
+++ b/packages/coreui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.4.1",
+  "version": "5.7.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,20 +41,22 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.2.0",
+    "@coreui/coreui": "^5.4.1",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/react": "^16.0.1",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-transition-group": "^4.4.11",
+    "@types/prop-types": "15.7.15",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-transition-group": "^4.4.12",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
@@ -62,10 +64,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.24.2",
-    "ts-jest": "^29.2.5",
-    "tslib": "^2.8.0",
-    "typescript": "^5.6.3"
+    "rollup": "^4.45.0",
+    "ts-jest": "^29.4.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "react": ">=17",
diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx
index 9fe4c634..a3a275ae 100644
--- a/packages/coreui-react/src/components/accordion/CAccordion.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordion.tsx
@@ -1,7 +1,9 @@
-import React, { createContext, forwardRef, HTMLAttributes, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CAccordionContext } from './CAccordionContext'
+
 export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * The active item key.
@@ -21,14 +23,6 @@ export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
   flush?: boolean
 }
 
-export interface CAccordionContextProps {
-  _activeItemKey?: number | string
-  alwaysOpen?: boolean
-  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
-}
-
-export const CAccordionContext = createContext({} as CAccordionContextProps)
-
 export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
   ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => {
     const [_activeItemKey, setActiveKey] = useState(activeItemKey)
@@ -48,8 +42,8 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
 )
 
 CAccordion.propTypes = {
-  alwaysOpen: PropTypes.bool,
   activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  alwaysOpen: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
   flush: PropTypes.bool,
diff --git a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
index 532f3ff6..d98e8c43 100644
--- a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
@@ -2,9 +2,8 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CAccordionItemContext } from './CAccordionItem'
-
 import { CCollapse } from './../collapse/CCollapse'
+import { CAccordionItemContext } from './CAccordionItemContext'
 
 export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -15,16 +14,16 @@ export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
   ({ children, className, ...rest }, ref) => {
-    const { visible } = useContext(CAccordionItemContext)
+    const { id, visible } = useContext(CAccordionItemContext)
 
     return (
-      <CCollapse className="accordion-collapse" visible={visible}>
+      <CCollapse className="accordion-collapse" id={id} visible={visible}>
         <div className={classNames('accordion-body', className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>
     )
-  },
+  }
 )
 
 CAccordionBody.propTypes = {
diff --git a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
index 4235ca6e..b5e9ca4c 100644
--- a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CAccordionItemContext } from './CAccordionItem'
+import { CAccordionItemContext } from './CAccordionItemContext'
 
 export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
   /**
@@ -13,13 +13,14 @@ export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement>
 
 export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
   ({ children, className, ...rest }, ref) => {
-    const { visible, setVisible } = useContext(CAccordionItemContext)
+    const { id, visible, setVisible } = useContext(CAccordionItemContext)
 
     return (
       <button
         type="button"
         className={classNames('accordion-button', { collapsed: !visible }, className)}
-        aria-expanded={!visible}
+        aria-controls={id}
+        aria-expanded={visible}
         onClick={() => setVisible(!visible)}
         {...rest}
         ref={ref}
@@ -27,7 +28,7 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr
         {children}
       </button>
     )
-  },
+  }
 )
 
 CAccordionButton.propTypes = {
diff --git a/packages/coreui-react/src/components/accordion/CAccordionContext.ts b/packages/coreui-react/src/components/accordion/CAccordionContext.ts
new file mode 100644
index 00000000..4b5aa46f
--- /dev/null
+++ b/packages/coreui-react/src/components/accordion/CAccordionContext.ts
@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export interface CAccordionContextProps {
+  _activeItemKey?: number | string
+  alwaysOpen?: boolean
+  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+}
+
+export const CAccordionContext = createContext({} as CAccordionContextProps)
diff --git a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
index eb26bdcd..f69fe197 100644
--- a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
@@ -1,25 +1,23 @@
 import React, {
-  createContext,
   forwardRef,
   HTMLAttributes,
   useContext,
   useEffect,
+  useId,
   useRef,
   useState,
 } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CAccordionContext } from './CAccordion'
-
-export interface CAccordionItemContextProps {
-  setVisible: (a: boolean) => void
-  visible?: boolean
-}
-
-export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)
+import { CAccordionContext } from './CAccordionContext'
+import { CAccordionItemContext } from './CAccordionItemContext'
 
 export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   */
+  id?: string
   /**
    * A string of all className you want applied to the base component.
    */
@@ -31,14 +29,18 @@ export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
-  ({ children, className, itemKey, ...rest }, ref) => {
-    const _itemKey = useRef(itemKey ?? Math.random().toString(36).slice(2, 11))
+  ({ children, className, id, itemKey, ...rest }, ref) => {
+    const uniqueId = useId()
+    const _id = id ?? uniqueId
+    const _itemKey = useRef(itemKey ?? _id)
 
     const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
     const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
 
     useEffect(() => {
-      !alwaysOpen && visible && setActiveKey(_itemKey.current)
+      if (!alwaysOpen && visible) {
+        setActiveKey(_itemKey.current)
+      }
     }, [visible])
 
     useEffect(() => {
@@ -47,12 +49,12 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
 
     return (
       <div className={classNames('accordion-item', className)} {...rest} ref={ref}>
-        <CAccordionItemContext.Provider value={{ setVisible, visible }}>
+        <CAccordionItemContext.Provider value={{ id: _id, setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CAccordionItem.propTypes = {
diff --git a/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts b/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts
new file mode 100644
index 00000000..bbdeaf74
--- /dev/null
+++ b/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts
@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export interface CAccordionItemContextProps {
+  id: string
+  setVisible: (a: boolean) => void
+  visible?: boolean
+}
+
+export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx
index 761cd0ea..e1c8e342 100644
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx
+++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAccordion } from '../../../index'
+import { CAccordion } from '../index'
 
 test('loads and displays CAccordion component', async () => {
   const { container } = render(<CAccordion>Test</CAccordion>)
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx
index 519f0f13..795dc1d6 100644
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx
+++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAccordionBody } from '../../../index'
+import { CAccordionBody } from '../index'
 
 test('loads and displays CAccordionBody component', async () => {
   const { container } = render(<CAccordionBody>Test</CAccordionBody>)
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx
index 1d40548c..265e06bb 100644
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx
+++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAccordionButton } from '../../../index'
+import { CAccordionButton } from '../index'
 
 test('loads and displays CAccordionButton component', async () => {
   const { container } = render(<CAccordionButton>Test</CAccordionButton>)
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx
index ac833186..44458eae 100644
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx
+++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAccordionHeader } from '../../../index'
+import { CAccordionHeader } from '../index'
 
 test('loads and displays CAccordionHeader component', async () => {
   const { container } = render(<CAccordionHeader>Test</CAccordionHeader>)
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx
index 10f693f3..d32330c5 100644
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx
+++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAccordionItem } from '../../../index'
+import { CAccordionItem } from '../index'
 
 test('loads and displays CAccordionItem component', async () => {
   const { container } = render(<CAccordionItem>Test</CAccordionItem>)
diff --git a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap
index b8bd2e1c..dae014eb 100644
--- a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap
+++ b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap
@@ -3,7 +3,6 @@
 exports[`CAccordionButton customize 1`] = `
 <div>
   <button
-    aria-expanded="true"
     class="accordion-button collapsed bazinga"
     type="button"
   >
@@ -15,7 +14,6 @@ exports[`CAccordionButton customize 1`] = `
 exports[`loads and displays CAccordionButton component 1`] = `
 <div>
   <button
-    aria-expanded="true"
     class="accordion-button collapsed"
     type="button"
   >
diff --git a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
index dfea0a55..7491d9d3 100644
--- a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
+++ b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
@@ -6,7 +6,6 @@ exports[`CAccordionHeader customize 1`] = `
     class="accordion-header bazinga"
   >
     <button
-      aria-expanded="true"
       class="accordion-button collapsed"
       type="button"
     >
@@ -22,7 +21,6 @@ exports[`loads and displays CAccordionHeader component 1`] = `
     class="accordion-header"
   >
     <button
-      aria-expanded="true"
       class="accordion-button collapsed"
       type="button"
     >
diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx
index a9581d0a..00e33441 100644
--- a/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx
+++ b/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx
@@ -1,41 +1,62 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { act, render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAlert } from '../../../index'
+import { CAlert } from '../index'
 
 test('loads and displays CAlert component', async () => {
-  const { container } = render(<CAlert color="primary">Test</CAlert>)
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CAlert color="primary">Test</CAlert>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CAlert customize', async () => {
-  const { container } = render(
-    <CAlert color="secondary" className="bazinga" dismissible={true} variant="solid" visible={true}>
-      Test
-    </CAlert>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('bg-secondary')
-  expect(container.firstChild).toHaveClass('text-white')
-  expect(container.firstChild).toHaveClass('alert-dismissible')
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(
+      <CAlert
+        color="secondary"
+        className="bazinga"
+        dismissible={true}
+        variant="solid"
+        visible={true}
+      >
+        Test
+      </CAlert>
+    )
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
+  expect(container!.firstChild).toHaveClass('bazinga')
+  expect(container!.firstChild).toHaveClass('bg-secondary')
+  expect(container!.firstChild).toHaveClass('text-white')
+  expect(container!.firstChild).toHaveClass('alert-dismissible')
 })
 
 test('CAlert click close button', async () => {
   jest.useFakeTimers()
+
   const onClose = jest.fn()
   render(
     <CAlert color="primary" dismissible onClose={onClose}>
       Test
-    </CAlert>,
+    </CAlert>
   )
+
   expect(onClose).toHaveBeenCalledTimes(0)
+
   const btn = document.querySelector('.btn-close')
+
   if (btn !== null) {
-    fireEvent.click(btn)
+    act(() => {
+      fireEvent.click(btn)
+      jest.runAllTimers()
+    })
   }
+
   expect(onClose).toHaveBeenCalledTimes(1)
-  jest.runAllTimers()
-  expect(onClose).toHaveBeenCalledTimes(1)
+
   jest.useRealTimers()
 })
diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx
index f7308616..cbe90bf8 100644
--- a/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx
+++ b/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAlertHeading } from '../../../index'
+import { CAlertHeading } from '../index'
 
 test('loads and displays CAlertHeading component', async () => {
   const { container } = render(<CAlertHeading>Test</CAlertHeading>)
diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx
index 47dc0afe..25c6bc04 100644
--- a/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx
+++ b/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAlertLink } from '../../../index'
+import { CAlertLink } from '../index'
 
 test('loads and displays CAlertLink component', async () => {
   const { container } = render(<CAlertLink>Test</CAlertLink>)
diff --git a/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx b/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx
index 3201afe4..2cc0b298 100644
--- a/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx
+++ b/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CAvatar } from '../../../index'
+import { CAvatar } from '../index'
 
 test('loads and displays CAvatar component', async () => {
   const { container } = render(<CAvatar color="primary">Test</CAvatar>)
diff --git a/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx b/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx
index a5cc0290..60cab767 100644
--- a/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx
+++ b/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CBackdrop } from '../../../index'
+import { CBackdrop } from '../index'
 
 test('loads and displays CBackdrop component', async () => {
   const { container } = render(<CBackdrop>Test</CBackdrop>)
diff --git a/packages/coreui-react/src/components/badge/CBadge.tsx b/packages/coreui-react/src/components/badge/CBadge.tsx
index c874f0e0..b96c3220 100644
--- a/packages/coreui-react/src/components/badge/CBadge.tsx
+++ b/packages/coreui-react/src/components/badge/CBadge.tsx
@@ -96,7 +96,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
 )
 
 CBadge.propTypes = {
-  as: PropTypes.string,
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
diff --git a/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx b/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx
index 2f8a19dd..1473d6f7 100644
--- a/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx
+++ b/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CBadge } from '../../../index'
+import { CBadge } from '../index'
 
 test('loads and displays CBadge component', async () => {
   const { container } = render(<CBadge color="primary">Test</CBadge>)
diff --git a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx
index 396a3ce7..9254313c 100644
--- a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx
+++ b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CBreadcrumb, CBreadcrumbItem } from '../../../index'
+import { CBreadcrumb, CBreadcrumbItem } from '../index'
 
 test('loads and displays CBreadcrumb component', async () => {
   const { container } = render(<CBreadcrumb></CBreadcrumb>)
diff --git a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx
index 08c3c874..fff97974 100644
--- a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx
+++ b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CBreadcrumbItem } from '../../../index'
+import { CBreadcrumbItem } from '../index'
 
 test('loads and displays CBreadcrumbItem component', async () => {
   const { container } = render(<CBreadcrumbItem>Test</CBreadcrumbItem>)
diff --git a/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
index 84671690..b7bd6195 100644
--- a/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
+++ b/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CButtonGroup, CButton } from '../../../index'
+import { CButton } from '../../button/CButton'
+import { CButtonGroup } from '../index'
 
 test('loads and displays CButtonGroup component', async () => {
   const { container } = render(<CButtonGroup></CButtonGroup>)
diff --git a/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
index f90c74cc..fd7706b8 100644
--- a/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
+++ b/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CButtonToolbar, CButtonGroup, CButton } from '../../../index'
+import { CButton } from '../../button/CButton'
+import { CButtonToolbar, CButtonGroup } from '../index'
 
 test('loads and displays CButtonToolbar component', async () => {
   const { container } = render(<CButtonToolbar></CButtonToolbar>)
diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx
index f8f5e17a..cbb003d7 100644
--- a/packages/coreui-react/src/components/button/CButton.tsx
+++ b/packages/coreui-react/src/components/button/CButton.tsx
@@ -66,7 +66,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
 >(
   (
     { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest },
-    ref,
+    ref
   ) => {
     return (
       <CLink
@@ -75,12 +75,13 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
         className={classNames(
           'btn',
           {
-            [`btn-${color}`]: color && !variant,
-            [`btn-${variant}-${color}`]: color && variant,
+            [`btn-${variant}-${color}`]: variant && color,
+            [`btn-${variant}`]: variant && !color,
+            [`btn-${color}`]: !variant && color,
             [`btn-${size}`]: size,
           },
           shape,
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -88,7 +89,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
         {children}
       </CLink>
     )
-  },
+  }
 )
 
 CButton.propTypes = {
diff --git a/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx b/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
index 27f3f8ce..2c8211c2 100644
--- a/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
+++ b/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CButton } from '../../../index'
+import { CButton } from '../index'
 
 test('loads and displays CButton component', async () => {
   const { container } = render(<CButton color="primary">Test</CButton>)
diff --git a/packages/coreui-react/src/components/button/__tests__/CButtonClose.spec.tsx b/packages/coreui-react/src/components/button/__tests__/CButtonClose.spec.tsx
deleted file mode 100644
index 64bb591f..00000000
--- a/packages/coreui-react/src/components/button/__tests__/CButtonClose.spec.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCloseButton } from '../../../index'
-
-test('loads and displays CCloseButton component', async () => {
-  const { container } = render(<CCloseButton>Test</CCloseButton>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCloseButton customize', async () => {
-  const { container } = render(
-    <CCloseButton white={true} disabled={true} className="bazinga">
-      Test
-    </CCloseButton>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('btn')
-  expect(container.firstChild).toHaveClass('btn-close')
-  expect(container.firstChild).toHaveClass('btn-close-white')
-  expect(container.firstChild).toHaveAttribute('disabled')
-})
diff --git a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
deleted file mode 100644
index 092b4a2d..00000000
--- a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCloseButton customize 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close btn-close-white bazinga"
-    disabled=""
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CCloseButton component 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
index 86f63675..637727c7 100644
--- a/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
+++ b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCallout } from '../../../index'
+import { CCallout } from '../index'
 
 test('loads and displays CCallout component', async () => {
   const { container } = render(<CCallout>Test</CCallout>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
index c22e6080..6b4f9b11 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCard } from '../../../index'
+import { CCard } from '../index'
 
 test('loads and displays CCard component', async () => {
   const { container } = render(<CCard>Test</CCard>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
index 8b79b9f5..0bf1ccd9 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardBody } from '../../../index'
+import { CCardBody } from '../index'
 
 test('loads and displays CCardBody component', async () => {
   const { container } = render(<CCardBody>Test</CCardBody>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
index 0b47f51f..991e3c7c 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardFooter } from '../../../index'
+import { CCardFooter } from '../index'
 
 test('loads and displays CCardFooter component', async () => {
   const { container } = render(<CCardFooter>Test</CCardFooter>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
index a0228126..239c1fd9 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
@@ -12,7 +12,7 @@ import {
   CCardTitle,
   CCardText,
   CCardGroup,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CCardGroup component', async () => {
   const { container } = render(<CCardGroup>Test</CCardGroup>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
index ffb43bab..0477b503 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardHeader } from '../../../index'
+import { CCardHeader } from '../index'
 
 test('loads and displays CCardHeader component', async () => {
   const { container } = render(<CCardHeader>Test</CCardHeader>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
index 88c20fd1..e1214093 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardImage } from '../../../index'
+import { CCardImage } from '../index'
 
 test('loads and displays CCardImage component', async () => {
   const { container } = render(<CCardImage />)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
index d161d9c2..6574856b 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardImageOverlay } from '../../../index'
+import { CCardImageOverlay } from '../index'
 
 test('loads and displays CCardImageOverlay component', async () => {
   const { container } = render(<CCardImageOverlay />)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
index 2251ac29..2373537f 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardLink } from '../../../index'
+import { CCardLink } from '../index'
 
 test('loads and displays CCardLink component', async () => {
   const { container } = render(<CCardLink>Test</CCardLink>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
index a44165f4..8a23f9c8 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardSubtitle } from '../../../index'
+import { CCardSubtitle } from '../index'
 
 test('loads and displays CCardSubtitle component', async () => {
   const { container } = render(<CCardSubtitle>Test</CCardSubtitle>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
index 06d2ca3a..3cbb4ab2 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardText } from '../../../index'
+import { CCardText } from '../index'
 
 test('loads and displays CCardText component', async () => {
   const { container } = render(<CCardText>Test</CCardText>)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
index ada47122..9733a7f4 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCardTitle } from '../../../index'
+import { CCardTitle } from '../index'
 
 test('loads and displays CCardTitle component', async () => {
   const { container } = render(<CCardTitle>Test</CCardTitle>)
diff --git a/packages/coreui-react/src/components/carousel/CCarousel.tsx b/packages/coreui-react/src/components/carousel/CCarousel.tsx
index 4e7e95ca..3d3186d3 100644
--- a/packages/coreui-react/src/components/carousel/CCarousel.tsx
+++ b/packages/coreui-react/src/components/carousel/CCarousel.tsx
@@ -1,6 +1,5 @@
 import React, {
   Children,
-  createContext,
   forwardRef,
   HTMLAttributes,
   TouchEvent,
@@ -14,6 +13,8 @@ import classNames from 'classnames'
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
 
+import { CCarouselContext } from './CCarouselContext'
+
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * index of the active item.
@@ -71,13 +72,6 @@ interface DataType {
   timeout?: null | ReturnType<typeof setTimeout>
 }
 
-export interface ContextProps {
-  setAnimating: (a: boolean) => void
-  setCustomInterval: (a: boolean | number) => void
-}
-
-export const CCarouselContext = createContext({} as ContextProps)
-
 export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
   (
     {
@@ -96,7 +90,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       wrap = true,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const carouselRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselRef)
@@ -141,7 +135,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       if (typeof interval === 'number') {
         data.timeout = setTimeout(
           () => nextItemWhenVisible(),
-          typeof customInterval === 'number' ? customInterval : interval,
+          typeof customInterval === 'number' ? customInterval : interval
         )
       }
     }
@@ -228,7 +222,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           {
             'carousel-fade': transition === 'crossfade',
           },
-          className,
+          className
         )}
         {...(dark && { 'data-coreui-theme': 'dark' })}
         onMouseEnter={_pause}
@@ -288,7 +282,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
         </CCarouselContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CCarousel.propTypes = {
diff --git a/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx b/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx
index 6e1cd5d1..353a6b1b 100644
--- a/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx
+++ b/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx
@@ -12,7 +12,7 @@ export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
 export const CCarouselCaption = forwardRef<HTMLDivElement, CCarouselCaptionProps>(
   ({ className, ...rest }, ref) => {
     return <div className={classNames('carousel-caption', className)} {...rest} ref={ref} />
-  },
+  }
 )
 
 CCarouselCaption.propTypes = {
diff --git a/packages/coreui-react/src/components/carousel/CCarouselContext.ts b/packages/coreui-react/src/components/carousel/CCarouselContext.ts
new file mode 100644
index 00000000..6e21932b
--- /dev/null
+++ b/packages/coreui-react/src/components/carousel/CCarouselContext.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CCarouselContextProps {
+  setAnimating: (a: boolean) => void
+  setCustomInterval: (a: boolean | number) => void
+}
+
+export const CCarouselContext = createContext({} as CCarouselContextProps)
\ No newline at end of file
diff --git a/packages/coreui-react/src/components/carousel/CCarouselItem.tsx b/packages/coreui-react/src/components/carousel/CCarouselItem.tsx
index 3b8744cc..90f4f6ca 100644
--- a/packages/coreui-react/src/components/carousel/CCarouselItem.tsx
+++ b/packages/coreui-react/src/components/carousel/CCarouselItem.tsx
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { useForkedRef } from '../../hooks'
-import { CCarouselContext } from './CCarousel'
+
+import { CCarouselContext } from './CCarouselContext'
+
 export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * @ignore
@@ -29,7 +31,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
     const carouselItemRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselItemRef)
 
-    const prevActive = useRef<boolean>()
+    const prevActive = useRef<boolean>(undefined)
     const [directionClassName, setDirectionClassName] = useState<string>()
     const [orderClassName, setOrderClassName] = useState<string>()
     const [activeClassName, setActiveClassName] = useState(active && 'active')
@@ -101,7 +103,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
           activeClassName,
           directionClassName,
           orderClassName,
-          className,
+          className
         )}
         ref={forkedRef}
         {...rest}
@@ -109,7 +111,7 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CCarouselItem.propTypes = {
diff --git a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
index 4abb647b..c681e5b7 100644
--- a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
+++ b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { getByText } from '@testing-library/dom'
+import { render, fireEvent, getByText } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCarousel, CCarouselCaption, CCarouselItem } from '../../../index'
+import { CCarousel, CCarouselCaption, CCarouselItem } from '../index'
 
 test('loads and displays CCarousel component', async () => {
   const { container } = render(
diff --git a/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx b/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx
index a70c90ea..3eb0dbc0 100644
--- a/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx
+++ b/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCloseButton } from '../../../index'
+import { CCloseButton } from '../index'
 
 test('loads and displays CCloseButton component', async () => {
   const { container } = render(<CCloseButton />)
diff --git a/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx
index 7d701afe..faee720d 100644
--- a/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx
+++ b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCollapse } from '../../../index'
+import { CCollapse } from '../index'
 
 test('loads and displays CCollapse component', async () => {
   const { container } = render(<CCollapse>Test</CCollapse>)
@@ -15,26 +15,45 @@ test('CCollapse customize', async () => {
 })
 
 test('CCollapse use case test', async () => {
+  jest.useFakeTimers()
+
   const { rerender } = render(<CCollapse visible={false}>Test</CCollapse>)
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  rerender(<CCollapse visible={true}>Test</CCollapse>)
+
+  act(() => {
+    rerender(<CCollapse visible={true}>Test</CCollapse>)
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  rerender(<CCollapse visible={false}>Test</CCollapse>)
+
+  act(() => {
+    rerender(<CCollapse visible={false}>Test</CCollapse>)
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-  jest.runAllTimers()
+
   jest.useRealTimers()
 })
diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
index 076c1812..2d8a7bbd 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
@@ -1,15 +1,18 @@
 import React, {
-  createContext,
   ElementType,
   forwardRef,
   HTMLAttributes,
-  RefObject,
+  useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import type { Options } from '@popperjs/core'
+
+import { CDropdownContext } from './CDropdownContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef, usePopper } from '../../hooks'
@@ -22,91 +25,152 @@ import { getPlacement } from './utils'
 
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
-   * Set aligment of dropdown menu.
+   * Specifies the alignment of the React Dropdown Menu within this React Dropdown.
+   *
+   * @example
+   * // Align dropdown menu to the end on large devices, otherwise start
+   * <CDropdown alignment={{ lg: 'end', xs: 'start' }}>
+   *   <CDropdownToggle>Toggle dropdown</CDropdownToggle>
+   *   <CDropdownMenu>
+   *     <CDropdownItem>Action</CDropdownItem>
+   *     <CDropdownItem>Another Action</CDropdownItem>
+   *   </CDropdownMenu>
+   * </CDropdown>
    *
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * Determines the root node component (native HTML element or a custom React component) for the React Dropdown.
    */
   as?: ElementType
+
   /**
-   * Configure the auto close behavior of the dropdown:
-   * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
-   * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
-   * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
-   * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+   * Configures automatic closing behavior for the React Dropdown:
+   * - `true` - Close on clicks inside or outside of the React Dropdown Menu.
+   * - `false` - Disable auto-close; manually call `hide` or `toggle` (also not closed by `Escape`).
+   * - `'inside'` - Close only when clicking inside the React Dropdown Menu.
+   * - `'outside'` - Close only when clicking outside the React Dropdown Menu.
+   *
+   * @example
+   * // Close only when user clicks outside of the menu
+   * <CDropdown autoClose="outside" />
    */
   autoClose?: 'inside' | 'outside' | boolean
+
   /**
-   * A string of all className you want applied to the base component.
+   * Adds custom classes to the React Dropdown root element.
    */
   className?: string
+
   /**
-   * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   * Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to `document.body`.
+   *
+   * @example
+   * // Append the menu to a custom container
+   * const myContainer = document.getElementById('my-container')
+   *
+   * <CDropdown container={myContainer} />
    *
    * @since 4.11.0
    */
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+
   /**
-   * Sets a darker color scheme to match a dark navbar.
+   * Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.
    */
   dark?: boolean
+
   /**
-   * Sets a specified  direction and location of the dropdown menu.
+   * Specifies the direction of the React Dropdown.
    */
   direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
+
   /**
-   * Offset of the dropdown menu relative to its target.
+   * Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.
+   *
+   * @example
+   * // Offset the menu 10px in X and 5px in Y direction
+   * <CDropdown offset={[10, 5]}>
+   *   ...
+   * </CDropdown>
    */
   offset?: [number, number]
+
   /**
-   * Callback fired when the component requests to be hidden.
+   * Callback fired right before the React Dropdown becomes hidden.
    *
    * @since 4.9.0
    */
   onHide?: () => void
+
   /**
-   * Callback fired when the component requests to be shown.
+   * Callback fired immediately after the React Dropdown is displayed.
    */
   onShow?: () => void
+
   /**
-   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+   * Determines the placement of the React Dropdown Menu after Popper.js modifiers.
    *
-   * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+   * @type 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
    */
   placement?: Placements
+
   /**
-   * If you want to disable dynamic positioning set this property to `true`.
+   * Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.
    */
   popper?: boolean
+
   /**
-   * Generates dropdown menu using createPortal.
+   * Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options)
+   *
+   * @example
+   * // Providing a custom popper config
+   * <CDropdown
+   *   popperConfig={{
+   *     modifiers: [
+   *       {
+   *         name: 'flip',
+   *         options: { fallbackPlacements: ['bottom', 'top'] },
+   *       },
+   *     ],
+   *   }}
+   * >...</CDropdown>
+   *
+   * @since 5.5.0
+   */
+  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+
+  /**
+   * Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.
    *
    * @since 4.8.0
    */
   portal?: boolean
+
   /**
-   * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
+   * Defines the visual variant of the React Dropdown
    */
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+
   /**
-   * Toggle the visibility of dropdown menu component.
+   * Controls the visibility of the React Dropdown Menu:
+   * - `true` - Visible
+   * - `false` - Hidden
+   *
+   * @example
+   * // Programmatically manage the dropdown visibility
+   * const [visible, setVisible] = useState(false)
+   *
+   * <CDropdown visible={visible}>
+   *   ...
+   * </CDropdown>
+   *
    */
   visible?: boolean
 }
 
-interface ContextProps extends CDropdownProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dropdownToggleRef: RefObject<any | undefined>
-  dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-  portal: boolean
-}
-
-export const CDropdownContext = createContext({} as ContextProps)
-
 export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> = forwardRef<
   HTMLDivElement | HTMLLIElement,
   CDropdownProps
@@ -126,79 +190,105 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       onShow,
       placement = 'bottom-start',
       popper = true,
+      popperConfig,
       portal = false,
       variant = 'btn-group',
       visible = false,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const dropdownToggleRef = useRef<any>(null)
     const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
+    const [dropdownToggleElement, setDropdownToggleElement] = useState<HTMLElement | null>(null)
     const [_visible, setVisible] = useState(visible)
     const { initPopper, destroyPopper } = usePopper()
 
-    const Component = variant === 'nav-item' ? 'li' : as
-
-    // Disable popper if responsive aligment is set.
-    if (typeof alignment === 'object') {
-      popper = false
-    }
+    const dropdownToggleRef = useCallback((node: HTMLElement | null) => {
+      if (node) {
+        setDropdownToggleElement(node)
+      }
+    }, [])
 
-    const contextValues = {
-      alignment,
-      container,
-      dark,
-      dropdownToggleRef,
-      dropdownMenuRef,
-      popper,
-      portal,
-      variant,
-      visible: _visible,
-      setVisible,
-    }
+    const allowPopperUse = popper && typeof alignment !== 'object'
+    const Component = variant === 'nav-item' ? 'li' : as
 
-    const popperConfig = {
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
+    const computedPopperConfig: Partial<Options> = useMemo(() => {
+      const defaultPopperConfig = {
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset,
+            },
           },
-        },
-      ],
-      placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
-    }
+        ],
+        placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
+      }
+
+      return {
+        ...defaultPopperConfig,
+        ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+      }
+    }, [offset, placement, direction, alignment, popperConfig])
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+      } else {
+        handleHide()
+      }
     }, [visible])
 
     useEffect(() => {
-      if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
-        dropdownToggleRef.current.focus()
-        popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig)
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
+      if (allowPopperUse && menuElement && toggleElement && _visible) {
+        initPopper(toggleElement, menuElement, computedPopperConfig)
+      }
+    }, [dropdownToggleElement])
+
+    const handleShow = () => {
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
+
+      if (toggleElement && menuElement) {
+        setVisible(true)
+
+        if (allowPopperUse) {
+          initPopper(toggleElement, menuElement, computedPopperConfig)
+        }
+
+        toggleElement.focus()
+        toggleElement.addEventListener('keydown', handleKeydown)
+        menuElement.addEventListener('keydown', handleKeydown)
+
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyup)
-        dropdownToggleRef.current.addEventListener('keydown', handleKeydown)
-        dropdownMenuRef.current.addEventListener('keydown', handleKeydown)
-        onShow && onShow()
+
+        onShow?.()
       }
+    }
 
-      return () => {
-        popper && destroyPopper()
-        window.removeEventListener('mouseup', handleMouseUp)
-        window.removeEventListener('keyup', handleKeyup)
-        dropdownToggleRef.current &&
-          dropdownToggleRef.current.removeEventListener('keydown', handleKeydown)
-        dropdownMenuRef.current &&
-          dropdownMenuRef.current.removeEventListener('keydown', handleKeydown)
-        onHide && onHide()
+    const handleHide = () => {
+      setVisible(false)
+
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
+
+      if (allowPopperUse) {
+        destroyPopper()
       }
-    }, [_visible])
+
+      toggleElement?.removeEventListener('keydown', handleKeydown)
+      menuElement?.removeEventListener('keydown', handleKeydown)
+
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+
+      onHide?.()
+    }
 
     const handleKeydown = (event: KeyboardEvent) => {
       if (
@@ -209,7 +299,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         event.preventDefault()
         const target = event.target as HTMLElement
         const items: HTMLElement[] = Array.from(
-          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
+          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)')
         )
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
@@ -221,16 +311,16 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       }
 
       if (event.key === 'Escape') {
-        setVisible(false)
+        handleHide()
       }
     }
 
     const handleMouseUp = (event: Event) => {
-      if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
+      if (!dropdownToggleElement || !dropdownMenuRef.current) {
         return
       }
 
-      if (dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      if (dropdownToggleElement.contains(event.target as HTMLElement)) {
         return
       }
 
@@ -239,11 +329,25 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
         (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
       ) {
-        setTimeout(() => setVisible(false), 1)
+        setTimeout(() => handleHide(), 1)
         return
       }
     }
 
+    const contextValues = {
+      alignment,
+      container,
+      dark,
+      dropdownMenuRef,
+      dropdownToggleRef,
+      handleHide,
+      handleShow,
+      popper: allowPopperUse,
+      portal,
+      variant,
+      visible: _visible,
+    }
+
     return (
       <CDropdownContext.Provider value={contextValues}>
         {variant === 'input-group' ? (
@@ -258,7 +362,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
                 [`${direction}`]:
                   direction && direction !== 'center' && direction !== 'dropup-center',
               },
-              className,
+              className
             )}
             {...rest}
             ref={forkedRef}
@@ -268,7 +372,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         )}
       </CDropdownContext.Provider>
     )
-  },
+  }
 )
 
 const alignmentDirection = PropTypes.oneOf<Directions>(['start', 'end'])
@@ -297,6 +401,7 @@ CDropdown.propTypes = {
   onShow: PropTypes.func,
   placement: placementPropType,
   popper: PropTypes.bool,
+  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   portal: PropTypes.bool,
   variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
   visible: PropTypes.bool,
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
new file mode 100644
index 00000000..d46b69d2
--- /dev/null
+++ b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
@@ -0,0 +1,18 @@
+import { createContext, RefObject } from 'react'
+import { Alignments } from './types'
+
+export interface CDropdownContextProps {
+  alignment?: Alignments
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+  dark?: boolean
+  dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
+  dropdownToggleRef: (node: HTMLElement | null) => void
+  handleHide?: () => void
+  handleShow?: () => void
+  popper?: boolean
+  portal?: boolean
+  variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+  visible?: boolean
+}
+
+export const CDropdownContext = createContext({} as CDropdownContextProps)
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx b/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
index c9fa58de..57b86e1e 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
@@ -12,7 +12,7 @@ export interface CDropdownDividerProps extends HTMLAttributes<HTMLHRElement> {
 export const CDropdownDivider = forwardRef<HTMLHRElement, CDropdownDividerProps>(
   ({ className, ...rest }, ref) => {
     return <hr className={classNames('dropdown-divider', className)} {...rest} ref={ref} />
-  },
+  }
 )
 
 CDropdownDivider.propTypes = {
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx b/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx
index 0315a0eb..89e53673 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx
@@ -23,7 +23,7 @@ export const CDropdownHeader: PolymorphicRefForwardingComponent<'h6', CDropdownH
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CDropdownHeader.propTypes = {
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
index 5b22bd40..bc4ae0bb 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
@@ -25,7 +25,7 @@ export const CDropdownItemPlain: PolymorphicRefForwardingComponent<
         {children}
       </Component>
     )
-  },
+  }
 )
 
 CDropdownItemPlain.propTypes = {
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
index 35a4e98a..59442d63 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
@@ -2,8 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CDropdownContext } from './CDropdown'
 import { CConditionalPortal } from '../conditional-portal'
+import { CDropdownContext } from './CDropdownContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
@@ -38,11 +38,10 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen
                 show: visible,
               },
               alignment && getAlignmentClassNames(alignment),
-              className,
+              className
             )}
             ref={forkedRef}
             role="menu"
-            aria-hidden={!visible}
             {...(!popper && { 'data-coreui-popper': 'static' })}
             {...(dark && { 'data-coreui-theme': 'dark' })}
             {...rest}
@@ -58,7 +57,7 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen
           </Component>
         </CConditionalPortal>
       )
-    },
+    }
   )
 
 CDropdownMenu.propTypes = {
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
index 3d7ce44c..def263e5 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CButton, CButtonProps } from '../button/CButton'
-
-import { CDropdownContext } from './CDropdown'
+import { CDropdownContext } from './CDropdownContext'
 
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
@@ -46,18 +45,24 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, handleHide, handleShow, variant, visible } =
+    useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
       onClick: (event: React.MouseEvent<HTMLElement>) => {
         event.preventDefault()
-        setVisible(!visible)
+
+        if (visible) {
+          handleHide?.()
+        } else {
+          handleShow?.()
+        }
       },
     }),
     ...((trigger === 'focus' || trigger.includes('focus')) && {
-      onFocus: () => setVisible(true),
-      onBlur: () => setVisible(false),
+      onFocus: () => handleShow?.(),
+      onBlur: () => handleHide?.(),
     }),
   }
 
@@ -69,42 +74,38 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
         'dropdown-toggle-split': split,
         show: visible,
       },
-      className,
+      className
     ),
     'aria-expanded': visible,
     ...(!rest.disabled && { ...triggers }),
   }
 
-  const Toggler = () => {
-    if (custom && React.isValidElement(children)) {
-      return (
-        <>
-          {React.cloneElement(children as React.ReactElement<any>, {
-            'aria-expanded': visible,
-            ...(!rest.disabled && { ...triggers }),
-            ref: dropdownToggleRef,
-          })}
-        </>
-      )
-    }
-
-    if (variant === 'nav-item' && navLink) {
-      return (
-        <a href="#" {...togglerProps} role="button" ref={dropdownToggleRef}>
-          {children}
-        </a>
-      )
-    }
+  if (custom && React.isValidElement(children)) {
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: dropdownToggleRef,
+        })}
+      </>
+    )
+  }
 
+  if (variant === 'nav-item' && navLink) {
     return (
-      <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
         {children}
-        {split && <span className="visually-hidden">Toggle Dropdown</span>}
-      </CButton>
+      </a>
     )
   }
 
-  return <Toggler />
+  return (
+    <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      {children}
+      {split && <span className="visually-hidden">Toggle Dropdown</span>}
+    </CButton>
+  )
 }
 
 CDropdownToggle.propTypes = {
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
index d45f8c9d..12b6e3cd 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {
   CDropdown,
@@ -9,7 +9,7 @@ import {
   CDropdownItemPlain,
   CDropdownHeader,
   CDropdownDivider,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CDropdown component', async () => {
   const { container } = render(<CDropdown>Test</CDropdown>)
@@ -52,26 +52,50 @@ test('CDropdown customize', async () => {
 //   jest.useRealTimers()
 // })
 
-test('CDropdown click', async () => {
+test('CDropdown opens on toggle click and closes on clicking outside', async () => {
   render(
-    <CDropdown>
-      <CDropdownToggle>Test</CDropdownToggle>
-      <CDropdownMenu>
-        <CDropdownItem>A</CDropdownItem>
-        <CDropdownItem>B</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>,
+    <div>
+      {/* External element to simulate clicking outside the dropdown */}
+      <div data-testid="external-area">External Area</div>
+
+      {/* The dropdown component */}
+      <CDropdown>
+        <CDropdownToggle>Test</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem>A</CDropdownItem>
+          <CDropdownItem>B</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </div>,
   )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  const el = screen.getByText('Test')
-  if (el !== null) {
-    fireEvent.click(el) //click on element
-  }
-  jest.runAllTimers()
-  expect(screen.getByText('Test').closest('div')).toHaveClass('show')
-  fireEvent.mouseUp(document.body) //click outside
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(screen.getByText('Test').closest('div')).not.toHaveClass('show')
+
+  // Ensure the dropdown is initially closed
+  const toggleButton = screen.getByText('Test')
+  expect(toggleButton).toBeInTheDocument()
+
+  // Assuming the 'show' class is applied to the CDropdownMenu
+  const dropdownMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
+  expect(dropdownMenu).not.toHaveClass('show')
+
+  // Click on the toggle to open the dropdown
+  fireEvent.click(toggleButton)
+
+  // Wait for the dropdown menu to become visible
+  await waitFor(() => {
+    const openedMenu = screen.getByRole('menu') // Adjust role if different
+    expect(openedMenu).toBeVisible()
+    expect(openedMenu).toHaveClass('show')
+  })
+
+  // Click outside the dropdown to close it
+  const externalArea = screen.getByTestId('external-area')
+  fireEvent.mouseUp(externalArea)
+
+  // Wait for the dropdown menu to be hidden
+  await waitFor(() => {
+    const closedMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
+    expect(closedMenu).not.toHaveClass('show')
+  })
 })
 
 test('CDropdown example', async () => {
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx
index bc5f6667..98b9de48 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CDropdownDivider } from '../../../index'
+import { CDropdownDivider } from '../index'
 
 test('loads and displays CDropdownDivider component', async () => {
   const { container } = render(<CDropdownDivider />)
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx
index fe11ca28..602b8d26 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CDropdownHeader } from '../../../index'
+import { CDropdownHeader } from '../index'
 
 test('loads and displays CDropdownHeader component', async () => {
   const { container } = render(<CDropdownHeader>Test</CDropdownHeader>)
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx
index 88091d6f..f484cc2f 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CDropdownItem } from '../../../index'
+import { CDropdownItem } from '../index'
 
 test('loads and displays CDropdownItem component', async () => {
   const { container } = render(<CDropdownItem>Test</CDropdownItem>)
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx
index 8407502c..b1aafd07 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CDropdownItemPlain } from '../../../index'
+import { CDropdownItemPlain } from '../index'
 
 test('loads and displays CDropdownItemPlain component', async () => {
   const { container } = render(<CDropdownItemPlain>Test</CDropdownItemPlain>)
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx
index 73300334..8b630833 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CDropdown, CDropdownMenu } from '../../../index'
+import { CDropdown, CDropdownMenu } from '../index'
 
 test('loads and displays CDropdownMenu component', async () => {
   const { container } = render(<CDropdownMenu>Test</CDropdownMenu>)
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
index 5d9db7e7..341c1048 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CDropdownToggle } from '../../../index'
+import { CDropdownToggle } from '../index'
 
 test('loads and displays CDropdownToggle component', async () => {
   const { container } = render(<CDropdownToggle>Test</CDropdownToggle>)
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
index f6741bfd..ed01b1d9 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
+++ b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
@@ -24,7 +24,6 @@ exports[`CDropdown example 1`] = `
       Test
     </button>
     <ul
-      aria-hidden="true"
       class="dropdown-menu"
       role="menu"
     >
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
index 0034410a..71044a09 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
+++ b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
@@ -6,7 +6,6 @@ exports[`CDropdownMenu customize 1`] = `
     class="btn-group"
   >
     <div
-      aria-hidden="false"
       class="dropdown-menu show bazinga"
       role="menu"
     >
@@ -19,7 +18,6 @@ exports[`CDropdownMenu customize 1`] = `
 exports[`loads and displays CDropdownMenu component 1`] = `
 <div>
   <ul
-    aria-hidden="true"
     class="dropdown-menu"
     data-coreui-popper="static"
     role="menu"
diff --git a/packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx b/packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx
index 5174ba5d..d9c114ea 100644
--- a/packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx
+++ b/packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFooter } from '../../../index'
+import { CFooter } from '../index'
 
 test('loads and displays CFooter component', async () => {
   const { container } = render(<CFooter>Test</CFooter>)
diff --git a/packages/coreui-react/src/components/form/__tests__/CForm.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CForm.spec.tsx
index abe65bc9..dd838fc8 100644
--- a/packages/coreui-react/src/components/form/__tests__/CForm.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CForm.spec.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CForm, CFormLabel, CFormInput, CFormText, CFormCheck, CButton } from '../../../index'
+import { CButton } from '../../button'
+import { CForm, CFormLabel, CFormInput, CFormText, CFormCheck } from '../index'
 
 test('loads and displays CForm component', async () => {
   const { container } = render(<CForm>Test</CForm>)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormCheck.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormCheck.spec.tsx
index eae30412..ac02b114 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormCheck.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormCheck.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormCheck } from '../../../index'
+import { CFormCheck } from '../index'
 
 test('loads and displays CFormCheck component', async () => {
   const { container } = render(<CFormCheck />)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormControl.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormControl.spec.tsx
index 905ce975..1279dc88 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormControl.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormControl.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormInput } from '../../../index'
+import { CFormInput } from '../index'
 
 test('loads and displays CFormInput component', async () => {
   const { container } = render(<CFormInput />)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormFeedback.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormFeedback.spec.tsx
index 9287b480..51a1e3c2 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormFeedback.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormFeedback.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormFeedback } from '../../../index'
+import { CFormFeedback } from '../index'
 
 test('loads and displays CFormFeedback component', async () => {
   const { container } = render(<CFormFeedback />)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormFloating.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormFloating.spec.tsx
index 8faa698c..e56e0c06 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormFloating.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormFloating.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormFloating } from '../../../index'
+import { CFormFloating } from '../index'
 
 test('loads and displays CFormFloating component', async () => {
   const { container } = render(<CFormFloating />)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormInput.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormInput.spec.tsx
index 529f79b9..0f018b6b 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormInput.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormInput.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormInput } from '../../../index'
+import { CFormInput } from '../index'
 
 test('loads and displays CFormInput component', async () => {
   const { container } = render(<CFormInput />)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx
index 991ba5b2..14b518cf 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormLabel } from '../../../index'
+import { CFormLabel } from '../index'
 
 test('loads and displays CFormLabel component', async () => {
   const { container } = render(<CFormLabel>Test</CFormLabel>)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormRange.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormRange.spec.tsx
index 522797f7..dcb62bab 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormRange.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormRange.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormRange } from '../../../index'
+import { CFormRange } from '../index'
 
 test('loads and displays CFormRange component', async () => {
   const { container } = render(<CFormRange step={3} />)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormSelect.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormSelect.spec.tsx
index a166a432..5b49e928 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormSelect.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormSelect.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormSelect } from '../../../index'
+import { CFormSelect } from '../index'
 
 test('loads and displays CFormSelect component', async () => {
   const { container } = render(<CFormSelect></CFormSelect>)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormSwitch.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormSwitch.spec.tsx
index 7451a891..77512cd7 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormSwitch.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormSwitch.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormSwitch } from '../../../index'
+import { CFormSwitch } from '../index'
 
 test('loads and displays CFormSwitch component', async () => {
   const { container } = render(<CFormSwitch />)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormText.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormText.spec.tsx
index b9a41bbe..80fa5719 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormText.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormText.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormText } from '../../../index'
+import { CFormText } from '../index'
 
 test('loads and displays CFormText component', async () => {
   const { container } = render(<CFormText>Test</CFormText>)
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormTextarea.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormTextarea.spec.tsx
index ebfbc64b..c864e7c5 100644
--- a/packages/coreui-react/src/components/form/__tests__/CFormTextarea.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CFormTextarea.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CFormTextarea } from '../../../index'
+import { CFormTextarea } from '../index'
 
 test('loads and displays CFormTextarea component', async () => {
   const { container } = render(<CFormTextarea defaultValue="Some value" />)
diff --git a/packages/coreui-react/src/components/form/__tests__/CInputGroup.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CInputGroup.spec.tsx
index 537740d1..e18ebe46 100644
--- a/packages/coreui-react/src/components/form/__tests__/CInputGroup.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CInputGroup.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CInputGroup } from '../../../index'
+import { CInputGroup } from '../index'
 
 test('loads and displays CInputGroup component', async () => {
   const { container } = render(<CInputGroup>Test</CInputGroup>)
diff --git a/packages/coreui-react/src/components/form/__tests__/CInputGroupText.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CInputGroupText.spec.tsx
index dbd14666..5c006c26 100644
--- a/packages/coreui-react/src/components/form/__tests__/CInputGroupText.spec.tsx
+++ b/packages/coreui-react/src/components/form/__tests__/CInputGroupText.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CInputGroupText } from '../../../index'
+import { CInputGroupText } from '../index'
 
 test('loads and displays CInputGroupText component', async () => {
   const { container } = render(<CInputGroupText>Test</CInputGroupText>)
diff --git a/packages/coreui-react/src/components/grid/__tests__/CCol.spec.tsx b/packages/coreui-react/src/components/grid/__tests__/CCol.spec.tsx
index f7e91c4d..4136dc58 100644
--- a/packages/coreui-react/src/components/grid/__tests__/CCol.spec.tsx
+++ b/packages/coreui-react/src/components/grid/__tests__/CCol.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CCol } from '../../../index'
+import { CCol } from '../index'
 
 test('CCol no-breakpoints', async () => {
   const { container } = render(<CCol>Test</CCol>)
diff --git a/packages/coreui-react/src/components/grid/__tests__/CContainer.spec.tsx b/packages/coreui-react/src/components/grid/__tests__/CContainer.spec.tsx
index f491d3e1..0ed38797 100644
--- a/packages/coreui-react/src/components/grid/__tests__/CContainer.spec.tsx
+++ b/packages/coreui-react/src/components/grid/__tests__/CContainer.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CContainer } from '../../../index'
+import { CContainer } from '../index'
 
 test('loads and displays CContainer component', async () => {
   const { container } = render(<CContainer>Test</CContainer>)
diff --git a/packages/coreui-react/src/components/grid/__tests__/CRow.spec.tsx b/packages/coreui-react/src/components/grid/__tests__/CRow.spec.tsx
index e1d651e6..c4e8e798 100644
--- a/packages/coreui-react/src/components/grid/__tests__/CRow.spec.tsx
+++ b/packages/coreui-react/src/components/grid/__tests__/CRow.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CRow } from '../../../index'
+import { CRow } from '../index'
 
 test('CRow not-customize', async () => {
   const { container } = render(<CRow>Test</CRow>)
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeader.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeader.spec.tsx
index 2691ca8e..f123f6f2 100644
--- a/packages/coreui-react/src/components/header/__tests__/CHeader.spec.tsx
+++ b/packages/coreui-react/src/components/header/__tests__/CHeader.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CHeader } from '../../../index'
+import { CHeader } from '../index'
 
 test('loads and displays CHeader component', async () => {
   const { container } = render(<CHeader>Test</CHeader>)
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderBrand.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderBrand.spec.tsx
index 22e835f3..eeb6d99d 100644
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderBrand.spec.tsx
+++ b/packages/coreui-react/src/components/header/__tests__/CHeaderBrand.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CHeaderBrand } from '../../../index'
+import { CHeaderBrand } from '../index'
 
 test('loads and displays CHeaderBrand component', async () => {
   const { container } = render(<CHeaderBrand>Test</CHeaderBrand>)
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderDivider.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderDivider.spec.tsx
index 663a5df1..0491da0a 100644
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderDivider.spec.tsx
+++ b/packages/coreui-react/src/components/header/__tests__/CHeaderDivider.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CHeaderDivider } from '../../../index'
+import { CHeaderDivider } from '../index'
 
 test('loads and displays CHeaderDivider component', async () => {
   const { container } = render(<CHeaderDivider>Test</CHeaderDivider>)
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderNav.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderNav.spec.tsx
index 2c5725fe..67ca01e7 100644
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderNav.spec.tsx
+++ b/packages/coreui-react/src/components/header/__tests__/CHeaderNav.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CHeaderNav } from '../../../index'
+import { CHeaderNav } from '../index'
 
 test('loads and displays CHeaderNav component', async () => {
   const { container } = render(<CHeaderNav>Test</CHeaderNav>)
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderText.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderText.spec.tsx
index cf4af9e2..14d6cd24 100644
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderText.spec.tsx
+++ b/packages/coreui-react/src/components/header/__tests__/CHeaderText.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CHeaderText } from '../../../index'
+import { CHeaderText } from '../index'
 
 test('loads and displays CHeaderText component', async () => {
   const { container } = render(<CHeaderText>Test</CHeaderText>)
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderToggler.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderToggler.spec.tsx
index 09091e51..a48bdd6c 100644
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderToggler.spec.tsx
+++ b/packages/coreui-react/src/components/header/__tests__/CHeaderToggler.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CHeaderToggler } from '../../../index'
+import { CHeaderToggler } from '../index'
 
 test('loads and displays CHeaderToggler component', async () => {
   const { container } = render(<CHeaderToggler>Test</CHeaderToggler>)
diff --git a/packages/coreui-react/src/components/image/__tests__/CImage.spec.tsx b/packages/coreui-react/src/components/image/__tests__/CImage.spec.tsx
index ae73b9b2..5844befb 100644
--- a/packages/coreui-react/src/components/image/__tests__/CImage.spec.tsx
+++ b/packages/coreui-react/src/components/image/__tests__/CImage.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CImage } from '../../../index'
+import { CImage } from '../index'
 
 test('loads and displays CImage component', async () => {
   const { container } = render(<CImage />)
diff --git a/packages/coreui-react/src/components/link/__tests__/CLink.spec.tsx b/packages/coreui-react/src/components/link/__tests__/CLink.spec.tsx
index c39d6838..2c3a982d 100644
--- a/packages/coreui-react/src/components/link/__tests__/CLink.spec.tsx
+++ b/packages/coreui-react/src/components/link/__tests__/CLink.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CLink } from '../../../index'
+import { CLink } from '../index'
 
 test('loads and displays CLink component', async () => {
   const { container } = render(<CLink>Test</CLink>)
diff --git a/packages/coreui-react/src/components/list-group/__tests__/CListGroup.spec.tsx b/packages/coreui-react/src/components/list-group/__tests__/CListGroup.spec.tsx
index c22cd8cf..ecbcd435 100644
--- a/packages/coreui-react/src/components/list-group/__tests__/CListGroup.spec.tsx
+++ b/packages/coreui-react/src/components/list-group/__tests__/CListGroup.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CListGroup, CListGroupItem } from '../../../index'
+import { CListGroup, CListGroupItem } from '../index'
 
 test('loads and displays CListGroup component', async () => {
   const { container } = render(<CListGroup>Test</CListGroup>)
diff --git a/packages/coreui-react/src/components/list-group/__tests__/CListGroupItem.spec.tsx b/packages/coreui-react/src/components/list-group/__tests__/CListGroupItem.spec.tsx
index cdf2e4d9..67460193 100644
--- a/packages/coreui-react/src/components/list-group/__tests__/CListGroupItem.spec.tsx
+++ b/packages/coreui-react/src/components/list-group/__tests__/CListGroupItem.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CListGroupItem } from '../../../index'
+import { CListGroupItem } from '../index'
 
 test('loads and displays CListGroupItem component', async () => {
   const { container } = render(<CListGroupItem>Test</CListGroupItem>)
diff --git a/packages/coreui-react/src/components/modal/CModal.tsx b/packages/coreui-react/src/components/modal/CModal.tsx
index e02c3425..1dca6d0a 100644
--- a/packages/coreui-react/src/components/modal/CModal.tsx
+++ b/packages/coreui-react/src/components/modal/CModal.tsx
@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   forwardRef,
   HTMLAttributes,
   useEffect,
@@ -14,6 +13,7 @@ import { Transition } from 'react-transition-group'
 import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
 import { CModalContent } from './CModalContent'
+import { CModalContext } from './CModalContext'
 import { CModalDialog } from './CModalDialog'
 
 import { useForkedRef } from '../../hooks'
@@ -93,13 +93,6 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   visible?: boolean
 }
 
-interface ModalContextProps {
-  visible?: boolean
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const CModalContext = createContext({} as ModalContextProps)
-
 export const CModal = forwardRef<HTMLDivElement, CModalProps>(
   (
     {
@@ -123,7 +116,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const activeElementRef = useRef<HTMLElement | null>(null)
     const modalRef = useRef<HTMLDivElement>(null)
@@ -163,8 +156,6 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
 
       setVisible(false)
-
-      return onClose && onClose()
     }
 
     useLayoutEffect(() => {
@@ -186,7 +177,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           () => {
             focus && modalRef.current?.focus()
           },
-          transition ? duration : 0,
+          transition ? duration : 0
         )
       } else {
         document.body.classList.remove('modal-open')
@@ -240,7 +231,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                       fade: transition,
                       show: state === 'entered',
                     },
-                    className,
+                    className
                   )}
                   tabIndex={-1}
                   {...(_visible
@@ -272,7 +263,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         )}
       </>
     )
-  },
+  }
 )
 
 CModal.propTypes = {
diff --git a/packages/coreui-react/src/components/modal/CModalContext.ts b/packages/coreui-react/src/components/modal/CModalContext.ts
new file mode 100644
index 00000000..0a85cbc0
--- /dev/null
+++ b/packages/coreui-react/src/components/modal/CModalContext.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CModalContextProps {
+  visible?: boolean
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CModalContext = createContext({} as CModalContextProps)
diff --git a/packages/coreui-react/src/components/modal/CModalHeader.tsx b/packages/coreui-react/src/components/modal/CModalHeader.tsx
index 2aa085b9..d4aca150 100644
--- a/packages/coreui-react/src/components/modal/CModalHeader.tsx
+++ b/packages/coreui-react/src/components/modal/CModalHeader.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CCloseButton } from '../close-button/CCloseButton'
-import { CModalContext } from './CModal'
+import { CModalContext } from './CModalContext'
 
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
index 22b6f0c9..2e0c0b8c 100644
--- a/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
+++ b/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CModal } from '../../../index'
+import { CModal } from '../index'
 
 test('loads and displays CModal component', async () => {
   const { container } = render(<CModal portal={false}>Test</CModal>)
@@ -33,34 +33,42 @@ test('CModal dialog close on press ESC', async () => {
     </CModal>,
   )
   expect(onClose).toHaveBeenCalledTimes(0)
-  const modal = document.querySelector('.modal')
+
+  const modal = screen.getByText('Test').closest('.modal')
+  expect(modal).toBeInTheDocument()
+
   if (modal !== null) {
     fireEvent.keyDown(modal, {
       key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
     })
-  }
-  await new Promise((r) => setTimeout(r, 1000))
-  console.log(modal)
-  expect(onClose).toHaveBeenCalledTimes(1)
-})
 
-test('CModal dialog close on backdrop', async () => {
-  jest.useFakeTimers()
-  const onClose = jest.fn()
-  render(
-    <CModal onClose={onClose} portal={false} visible={true}>
-      Test
-    </CModal>,
-  )
-  expect(onClose).toHaveBeenCalledTimes(0)
-  const backdrop = document.querySelector('.modal-backdrop')
-  if (backdrop !== null) {
-    fireEvent.click(backdrop)
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
   }
-  jest.runAllTimers()
-  expect(onClose).toHaveBeenCalledTimes(1)
-  jest.useRealTimers()
 })
+
+// test('CModal dialog closes when clicking outside the modal', async () => {
+//   const onClose = jest.fn()
+
+//   render(
+//     <CModal onClose={onClose} portal={false} visible>
+//       Test
+//     </CModal>,
+//   )
+
+//   // Ensure onClose hasn't been called yet
+//   expect(onClose).not.toHaveBeenCalled()
+
+//   // Optionally, verify that the modal is in the document
+//   const modal = screen.getByText('Test').closest('.modal')
+//   expect(modal).toBeInTheDocument()
+
+//   // Simulate a click on the external area (outside the modal)
+//   fireEvent.mouseDown(document.body)
+
+//   // Wait for onClose to be called once
+//   await waitFor(() => {
+//     expect(onClose).toHaveBeenCalledTimes(1)
+//   })
+// })
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalBody.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalBody.spec.tsx
index 6e14ce16..dbc9cf28 100644
--- a/packages/coreui-react/src/components/modal/__tests__/CModalBody.spec.tsx
+++ b/packages/coreui-react/src/components/modal/__tests__/CModalBody.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CModalBody } from '../../../index'
+import { CModalBody } from '../index'
 
 test('loads and displays CModalBody component', async () => {
   const { container } = render(<CModalBody>Test</CModalBody>)
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalContent.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalContent.spec.tsx
index 15cb52bb..e17bb8ef 100644
--- a/packages/coreui-react/src/components/modal/__tests__/CModalContent.spec.tsx
+++ b/packages/coreui-react/src/components/modal/__tests__/CModalContent.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CModalContent } from '../../../index'
+import { CModalContent } from '../index'
 
 test('loads and displays CModalContent component', async () => {
   const { container } = render(<CModalContent>Test</CModalContent>)
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalDialog.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalDialog.spec.tsx
index 32c4a6a5..a3450d27 100644
--- a/packages/coreui-react/src/components/modal/__tests__/CModalDialog.spec.tsx
+++ b/packages/coreui-react/src/components/modal/__tests__/CModalDialog.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CModalDialog } from '../../../index'
+import { CModalDialog } from '../index'
 
 test('loads and displays CModalDialog component', async () => {
   const { container } = render(<CModalDialog>Test</CModalDialog>)
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalFooter.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalFooter.spec.tsx
index c68d915e..cfba12ed 100644
--- a/packages/coreui-react/src/components/modal/__tests__/CModalFooter.spec.tsx
+++ b/packages/coreui-react/src/components/modal/__tests__/CModalFooter.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CModalFooter } from '../../../index'
+import { CModalFooter } from '../index'
 
 test('loads and displays CModalFooter component', async () => {
   const { container } = render(<CModalFooter>Test</CModalFooter>)
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalHeader.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalHeader.spec.tsx
index 08b41930..4e3177d7 100644
--- a/packages/coreui-react/src/components/modal/__tests__/CModalHeader.spec.tsx
+++ b/packages/coreui-react/src/components/modal/__tests__/CModalHeader.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CModalHeader } from '../../../index'
+import { CModalHeader } from '../index'
 
 test('loads and displays CModalHeader component', async () => {
   const { container } = render(<CModalHeader>Test</CModalHeader>)
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalTitle.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalTitle.spec.tsx
index b5c1abeb..e5b0cae6 100644
--- a/packages/coreui-react/src/components/modal/__tests__/CModalTitle.spec.tsx
+++ b/packages/coreui-react/src/components/modal/__tests__/CModalTitle.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CModalTitle } from '../../../index'
+import { CModalTitle } from '../index'
 
 test('loads and displays CModalTitle component', async () => {
   const { container } = render(<CModalTitle>Test</CModalTitle>)
diff --git a/packages/coreui-react/src/components/nav/CNav.tsx b/packages/coreui-react/src/components/nav/CNav.tsx
index 233994af..f056fbf7 100644
--- a/packages/coreui-react/src/components/nav/CNav.tsx
+++ b/packages/coreui-react/src/components/nav/CNav.tsx
@@ -21,7 +21,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
+  variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border'
 }
 
 export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef<
@@ -32,11 +32,12 @@ export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardR
     <Component
       className={classNames(
         'nav',
+        variant === 'enclosed-pills' && 'nav-enclosed', // Enclosed pills variant required for `.nav-enclosed` class
         {
           [`nav-${layout}`]: layout,
           [`nav-${variant}`]: variant,
         },
-        className,
+        className
       )}
       role="navigation"
       {...rest}
@@ -52,7 +53,14 @@ CNav.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
+  variant: PropTypes.oneOf([
+    'enclosed',
+    'enclosed-pills',
+    'pills',
+    'tabs',
+    'underline',
+    'underline-border',
+  ]),
 }
 
 CNav.displayName = 'CNav'
diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx
index 5a7d891e..4b680896 100644
--- a/packages/coreui-react/src/components/nav/CNavGroup.tsx
+++ b/packages/coreui-react/src/components/nav/CNavGroup.tsx
@@ -16,7 +16,7 @@ import type { TransitionStatus } from 'react-transition-group'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
@@ -62,7 +62,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const navItemsRef = useRef<any>(null)
 
-  const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
+  const { visibleGroup, setVisibleGroup } = useContext(CSidebarNavContext)
 
   const [_visible, setVisible] = useState(
     Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),
@@ -124,7 +124,11 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
       ref={ref}
     >
       {toggler && (
-        <a className="nav-link nav-group-toggle" onClick={(event) => handleTogglerOnCLick(event)}>
+        <a
+          className="nav-link nav-group-toggle"
+          href="#"
+          onClick={(event) => handleTogglerOnCLick(event)}
+        >
           {toggler}
         </a>
       )}
diff --git a/packages/coreui-react/src/components/nav/CNavLink.tsx b/packages/coreui-react/src/components/nav/CNavLink.tsx
index 00c65030..52f50b0f 100644
--- a/packages/coreui-react/src/components/nav/CNavLink.tsx
+++ b/packages/coreui-react/src/components/nav/CNavLink.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLinkProps, CLink } from '../link/CLink'
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
@@ -26,7 +26,7 @@ export const CNavLink: PolymorphicRefForwardingComponent<'a', CNavLinkProps> = f
   const navLinkRef = useRef<HTMLAnchorElement>(null)
   const forkedRef = useForkedRef(ref, navLinkRef)
 
-  const { setVisibleGroup } = useContext(CNavContext)
+  const { setVisibleGroup } = useContext(CSidebarNavContext)
 
   useEffect(() => {
     rest.active = navLinkRef.current?.classList.contains('active')
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNav.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNav.spec.tsx
index 79b75f8f..1afc468b 100644
--- a/packages/coreui-react/src/components/nav/__tests__/CNav.spec.tsx
+++ b/packages/coreui-react/src/components/nav/__tests__/CNav.spec.tsx
@@ -1,15 +1,8 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {
-  CNav,
-  CNavItem,
-  CNavLink,
-  CDropdown,
-  CDropdownToggle,
-  CDropdownMenu,
-  CDropdownItem,
-} from '../../../index'
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '../../dropdown'
+import { CNav, CNavItem, CNavLink } from '../index'
 
 test('loads and displays CNav component', async () => {
   const { container } = render(<CNav>Test</CNav>)
@@ -20,7 +13,7 @@ test('CNav customize', async () => {
   const { container } = render(
     <CNav className="bazinga" as="h3" layout="justified" variant="pills">
       Test
-    </CNav>,
+    </CNav>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('nav')
@@ -56,7 +49,7 @@ test('CNav example', async () => {
           Disabled
         </CNavLink>
       </CNavItem>
-    </CNav>,
+    </CNav>
   )
   expect(container).toMatchSnapshot()
 })
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavGroup.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavGroup.spec.tsx
index d3082288..d55d2a3c 100644
--- a/packages/coreui-react/src/components/nav/__tests__/CNavGroup.spec.tsx
+++ b/packages/coreui-react/src/components/nav/__tests__/CNavGroup.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavGroup } from '../../../index'
+import { CNavGroup } from '../index'
 
 test('loads and displays CNavGroup component', async () => {
   const { container } = render(<CNavGroup toggler="anchorText" />)
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavGroupItems.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavGroupItems.spec.tsx
index 8794739a..de24f9c2 100644
--- a/packages/coreui-react/src/components/nav/__tests__/CNavGroupItems.spec.tsx
+++ b/packages/coreui-react/src/components/nav/__tests__/CNavGroupItems.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavGroupItems } from '../../../index'
+import { CNavGroupItems } from '../index'
 
 test('loads and displays CNavGroupItems component', async () => {
   const { container } = render(<CNavGroupItems>Test</CNavGroupItems>)
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavItem.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavItem.spec.tsx
index 7f8b3b1e..570e95c1 100644
--- a/packages/coreui-react/src/components/nav/__tests__/CNavItem.spec.tsx
+++ b/packages/coreui-react/src/components/nav/__tests__/CNavItem.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavItem } from '../../../index'
+import { CNavItem } from '../index'
 
 test('loads and displays CNavItem component', async () => {
   const { container } = render(<CNavItem>Test</CNavItem>)
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavLink.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavLink.spec.tsx
index 1a1c275e..988716f5 100644
--- a/packages/coreui-react/src/components/nav/__tests__/CNavLink.spec.tsx
+++ b/packages/coreui-react/src/components/nav/__tests__/CNavLink.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavLink } from '../../../index'
+import { CNavLink } from '../index'
 
 test('loads and displays CNavLink component', async () => {
   const { container } = render(<CNavLink>Test</CNavLink>)
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavTitle.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavTitle.spec.tsx
index 00a11946..22979044 100644
--- a/packages/coreui-react/src/components/nav/__tests__/CNavTitle.spec.tsx
+++ b/packages/coreui-react/src/components/nav/__tests__/CNavTitle.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavTitle } from '../../../index'
+import { CNavTitle } from '../index'
 
 test('loads and displays CNavTitle component', async () => {
   const { container } = render(<CNavTitle>Test</CNavTitle>)
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap
index 0a6129ee..f54524cc 100644
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap
+++ b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap
@@ -50,7 +50,6 @@ exports[`CNav example 1`] = `
         A
       </a>
       <ul
-        aria-hidden="true"
         class="dropdown-menu"
         role="menu"
       >
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap
index 93e40a81..93e75ffa 100644
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap
+++ b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap
@@ -7,12 +7,13 @@ exports[`CNavGroup customize 1`] = `
   >
     <a
       class="nav-link nav-group-toggle"
+      href="#"
     >
       anchorText
     </a>
     <ul
       class="nav-group-items"
-      style="display: block; height: 0px;"
+      style="height: 0px; display: block;"
     />
   </li>
 </div>
@@ -25,11 +26,13 @@ exports[`loads and displays CNavGroup component 1`] = `
   >
     <a
       class="nav-link nav-group-toggle"
+      href="#"
     >
       anchorText
     </a>
     <ul
       class="nav-group-items"
+      style="height: 0px;"
     />
   </li>
 </div>
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbar.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbar.spec.tsx
index 27bea829..3df2fb9d 100644
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbar.spec.tsx
+++ b/packages/coreui-react/src/components/navbar/__tests__/CNavbar.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavbar } from '../../../index'
+import { CNavbar } from '../index'
 
 test('loads and displays CNavbar component', async () => {
   const { container } = render(<CNavbar>Test</CNavbar>)
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbarBrand.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbarBrand.spec.tsx
index 7b36af6b..25a6d391 100644
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbarBrand.spec.tsx
+++ b/packages/coreui-react/src/components/navbar/__tests__/CNavbarBrand.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavbarBrand } from '../../../index'
+import { CNavbarBrand } from '../index'
 
 test('loads and displays CNavbarBrand component', async () => {
   const { container } = render(<CNavbarBrand>Test</CNavbarBrand>)
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbarNav.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbarNav.spec.tsx
index 4ddeec04..48b464ca 100644
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbarNav.spec.tsx
+++ b/packages/coreui-react/src/components/navbar/__tests__/CNavbarNav.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavbarNav } from '../../../index'
+import { CNavbarNav } from '../index'
 
 test('loads and displays CNavbarNav component', async () => {
   const { container } = render(<CNavbarNav>Test</CNavbarNav>)
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbarText.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbarText.spec.tsx
index 39fe2640..b6dd3a74 100644
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbarText.spec.tsx
+++ b/packages/coreui-react/src/components/navbar/__tests__/CNavbarText.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavbarText } from '../../../index'
+import { CNavbarText } from '../index'
 
 test('loads and displays CNavbarText component', async () => {
   const { container } = render(<CNavbarText>Test</CNavbarText>)
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbarToggler.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbarToggler.spec.tsx
index 7964c4ac..eaeca9b2 100644
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbarToggler.spec.tsx
+++ b/packages/coreui-react/src/components/navbar/__tests__/CNavbarToggler.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavbarToggler } from '../../../index'
+import { CNavbarToggler } from '../index'
 
 test('CNavbarToggler witch children', async () => {
   const { container } = render(<CNavbarToggler>Test</CNavbarToggler>)
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx
index d6b6b865..a1d8590e 100644
--- a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx
+++ b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { COffcanvas } from '../../../index'
+
+import { COffcanvas } from '../index'
 
 test('loads and displays COffcanvas component', async () => {
   const { container } = render(<COffcanvas placement="top" />)
@@ -19,7 +20,7 @@ test('COffcanvas customize one', async () => {
       visible={false}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
@@ -29,7 +30,8 @@ test('COffcanvas customize one', async () => {
 })
 
 test('COffcanvas customize and event on click backdrop', async () => {
-  // jest.useFakeTimers()
+  jest.useFakeTimers()
+
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -42,8 +44,9 @@ test('COffcanvas customize and event on click backdrop', async () => {
       onHide={onHide}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
+
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
   expect(container.firstChild).toHaveClass('offcanvas-end')
@@ -51,18 +54,32 @@ test('COffcanvas customize and event on click backdrop', async () => {
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveTextContent('Test')
   expect(onHide).toHaveBeenCalledTimes(0)
+
   const backdrop = document.querySelector('.offcanvas-backdrop')
+
   if (backdrop !== null) {
-    fireEvent.click(backdrop)
+    act(() => {
+      fireEvent.click(backdrop)
+      jest.runAllTimers()
+    })
   }
+
   expect(onHide).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveClass('hiding')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(container.firstChild).not.toHaveClass('show')
+
+  jest.useRealTimers()
 })
 
 test('COffcanvas customize and event on keypress', async () => {
+  jest.useFakeTimers()
+
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -75,28 +92,39 @@ test('COffcanvas customize and event on keypress', async () => {
       onHide={onHide}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
+
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
   expect(container.firstChild).toHaveClass('offcanvas-end')
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('show')
   expect(onHide).toHaveBeenCalledTimes(0)
+
   const canvas = document.querySelector('.offcanvas')
-  if (canvas === null) {
-    expect(true).toBe(false)
-  } else {
-    fireEvent.keyDown(canvas, {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
+
+  if (canvas !== null) {
+    act(() => {
+      fireEvent.keyDown(canvas, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27,
+      })
+      jest.runAllTimers()
     })
   }
+
   expect(onHide).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveClass('hiding')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(container.firstChild).not.toHaveClass('show')
+
+  jest.useRealTimers()
 })
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx
index f4db901c..5858af68 100644
--- a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx
+++ b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { COffcanvasBody } from '../../../index'
+import { COffcanvasBody } from '../index'
 
 test('loads and displays COffcanvasBody component', async () => {
   const { container } = render(<COffcanvasBody />)
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx
index 44a66f04..54d808c3 100644
--- a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx
+++ b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { COffcanvasHeader } from '../../../index'
+import { COffcanvasHeader } from '../index'
 
 test('loads and displays COffcanvasHeader component', async () => {
   const { container } = render(<COffcanvasHeader />)
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx
index c6da29e3..4bf14bf3 100644
--- a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx
+++ b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { COffcanvasTitle } from '../../../index'
+import { COffcanvasTitle } from '../index'
 
 test('loads and displays COffcanvasTitle component', async () => {
   const { container } = render(<COffcanvasTitle />)
diff --git a/packages/coreui-react/src/components/pagination/__tests__/CPagination.spec.tsx b/packages/coreui-react/src/components/pagination/__tests__/CPagination.spec.tsx
index 78a484d9..03f5f572 100644
--- a/packages/coreui-react/src/components/pagination/__tests__/CPagination.spec.tsx
+++ b/packages/coreui-react/src/components/pagination/__tests__/CPagination.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPagination, CPaginationItem } from '../../../index'
+import { CPagination, CPaginationItem } from '../index'
 
 test('loads and displays CPagination component', async () => {
   const { container } = render(<CPagination>Test</CPagination>)
diff --git a/packages/coreui-react/src/components/pagination/__tests__/CPaginationItem.spec.tsx b/packages/coreui-react/src/components/pagination/__tests__/CPaginationItem.spec.tsx
index ddaa8416..c93a568b 100644
--- a/packages/coreui-react/src/components/pagination/__tests__/CPaginationItem.spec.tsx
+++ b/packages/coreui-react/src/components/pagination/__tests__/CPaginationItem.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPaginationItem } from '../../../index'
+import { CPaginationItem } from '../index'
 
 test('loads and displays CPaginationItem component', async () => {
   const { container } = render(<CPaginationItem>Test</CPaginationItem>)
diff --git a/packages/coreui-react/src/components/placeholder/__tests__/CPlaceholder.spec.tsx b/packages/coreui-react/src/components/placeholder/__tests__/CPlaceholder.spec.tsx
index 1e4466d7..3bf5d73e 100644
--- a/packages/coreui-react/src/components/placeholder/__tests__/CPlaceholder.spec.tsx
+++ b/packages/coreui-react/src/components/placeholder/__tests__/CPlaceholder.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPlaceholder } from '../../../index'
+import { CPlaceholder } from '../index'
 
 test('loads and displays CPlaceholder component', async () => {
   const { container } = render(<CPlaceholder color="primary" />)
diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx
index d6210f73..a6355ae3 100644
--- a/packages/coreui-react/src/components/popover/CPopover.tsx
+++ b/packages/coreui-react/src/components/popover/CPopover.tsx
@@ -9,6 +9,7 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import type { Options } from '@popperjs/core'
 
 import { CConditionalPortal } from '../conditional-portal'
 import { useForkedRef, usePopper } from '../../hooks'
@@ -18,65 +19,132 @@ import { executeAfterTransition, getRTLPlacement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
-   * Apply a CSS fade transition to the popover.
+   * Adds a fade transition animation to the React Popover.
    *
    * @since 4.9.0
    */
   animation?: boolean
+
   /**
-   * A string of all className you want applied to the component.
+   * Custom class name(s) for additional styling.
    */
   className?: string
+
   /**
-   * Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   * Defines the container element to which the React Popover is appended.
+   * Accepts:
+   * - A DOM element (`HTMLElement` or `DocumentFragment`)
+   * - A function that returns a single element
+   * - `null` (defaults to `document.body`)
+   *
+   * @example
+   * <CPopover container={document.getElementById('my-container')}>...</CPopover>
    *
+   * @default document.body
    * @since 4.11.0
    */
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+
   /**
-   * Content node for your component.
+   * Main content of the React Popover. It can be a string or any valid React node.
    */
   content: ReactNode | string
+
   /**
-   * Offset of the popover relative to its target.
-   */
-  offset?: [number, number]
-  /**
-   * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+   * Delay (in milliseconds) before showing or hiding the React Popover.
+   * - If a number is provided, that delay applies to both "show" and "hide".
+   * - If an object is provided, use separate values for "show" and "hide".
+   *
+   * @example
+   * // Delays 300ms on both show and hide
+   * <CPopover delay={300}>...</CPopover>
+   *
+   * // Delays 500ms on show and 100ms on hide
+   * <CPopover delay={{ show: 500, hide: 100 }}>...</CPopover>
    *
    * @since 4.9.0
    */
   delay?: number | { show: number; hide: number }
+
   /**
-   * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+   * Specifies the fallback placements when the preferred `placement` cannot be met.
    *
+   * @type 'top', 'right', 'bottom', 'left' | ('top', 'right', 'bottom', 'left')[]
    * @since 4.9.0
    */
   fallbackPlacements?: Placements | Placements[]
+
   /**
-   * Callback fired when the component requests to be hidden.
+   * Offset of the React Popover relative to its toggle element, in the form `[x, y]`.
+   *
+   * @example
+   * // Offset the menu 0px in X and 10px in Y direction
+   * <CPopover offset={[0, 10]}>...</CPopover>
+   *
+   * // Offset the menu 5px in both X and Y direction
+   * <CPopover offset={[5, 5]}>...</CPopover>
+   */
+  offset?: [number, number]
+
+  /**
+   * Invoked when the React Popover is about to hide.
    */
   onHide?: () => void
+
   /**
-   * Callback fired when the component requests to be shown.
+   * Invoked when the React Popover is about to show.
    */
   onShow?: () => void
+
   /**
-   * Title node for your component.
+   * Placement of the React Popover. Popper.js may override this based on available space.
    */
-  title?: ReactNode | string
+  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
+
   /**
-   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+   * Allows customization of the Popper.js configuration for the React Popover.
+   * Can be an object or a function returning a modified configuration.
+   * [Learn more](https://popper.js.org/docs/v2/constructors/#options)
+   *
+   * @example
+   * <CPopover
+   *   popperConfig={(defaultConfig) => ({
+   *     ...defaultConfig,
+   *     strategy: 'fixed',
+   *     modifiers: [
+   *       ...defaultConfig.modifiers,
+   *       { name: 'computeStyles', options: { adaptive: false } },
+   *     ],
+   *   })}
+   * >...</CPopover>
    *
-   * @type 'hover' | 'focus' | 'click'
+   * @since 5.5.0
    */
-  trigger?: Triggers | Triggers[]
+  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+
   /**
-   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+   * Title for the React Popover header. Can be a string or any valid React node.
    */
-  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
+  title?: ReactNode | string
+
   /**
-   * Toggle the visibility of popover component.
+   * Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.
+   *
+   * @example
+   * // Hover-only popover
+   * <CPopover trigger="hover">...</CPopover>
+   *
+   * // Hover + click combined
+   * <CPopover trigger={['hover', 'click']}>...</CPopover>
+   *
+   * @type 'hover' | 'focus' | 'click' | ('hover' | 'focus' | 'click')[]
+   */
+  trigger?: Triggers | Triggers[]
+
+  /**
+   * Controls the visibility of the React Popover.
+   * - `true` shows the popover.
+   * - `false` hides the popover.
    */
   visible?: boolean
 }
@@ -95,12 +163,13 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       onHide,
       onShow,
       placement = 'top',
+      popperConfig,
       title,
       trigger = 'click',
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const popoverRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
@@ -114,30 +183,20 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
 
-    const popperConfig = {
+    const defaultPopperConfig: Partial<Options> = {
       modifiers: [
-        {
-          name: 'arrow',
-          options: {
-            element: '.popover-arrow',
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: fallbackPlacements,
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
-          },
-        },
+        { name: 'arrow', options: { element: '.popover-arrow' } },
+        { name: 'flip', options: { fallbackPlacements } },
+        { name: 'offset', options: { offset } },
       ],
       placement: getRTLPlacement(placement, togglerRef.current),
     }
 
+    const computedPopperConfig: Partial<Options> = {
+      ...defaultPopperConfig,
+      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+    }
+
     useEffect(() => {
       if (visible) {
         handleShow()
@@ -149,7 +208,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
 
     useEffect(() => {
       if (mounted && togglerRef.current && popoverRef.current) {
-        initPopper(togglerRef.current, popoverRef.current, popperConfig)
+        initPopper(togglerRef.current, popoverRef.current, computedPopperConfig)
         setTimeout(() => {
           setVisible(true)
         }, _delay.show)
@@ -215,7 +274,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
                   fade: animation,
                   show: _visible,
                 },
-                className,
+                className
               )}
               id={id}
               ref={forkedRef}
@@ -230,7 +289,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
         </CConditionalPortal>
       </>
     )
-  },
+  }
 )
 
 CPopover.propTypes = {
@@ -251,6 +310,7 @@ CPopover.propTypes = {
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   trigger: triggerPropType,
   visible: PropTypes.bool,
diff --git a/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx b/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
index 95ef134b..4adab9ce 100644
--- a/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
+++ b/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
@@ -1,84 +1,92 @@
 import * as React from 'react'
-import { act, render, fireEvent } from '@testing-library/react'
+import { act, cleanup, render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPopover, CButton } from '../../../index'
+
+import { CButton } from '../../button'
+import { CPopover } from '../index'
+
+let container: HTMLDivElement | null = null
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+})
+
+afterEach(() => {
+  cleanup()
+})
 
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
       <CButton color="primary">Test</CButton>
-    </CPopover>,
+    </CPopover>
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CPopover customize', async () => {
   jest.useFakeTimers()
-  let arr, element
-  const { container } = render(
+
+  render(
     <CPopover content="content" title="title" trigger="click" placement="right">
       <CButton color="primary">Test</CButton>
     </CPopover>,
-    { container: document.body },
+    { container: container! }
   )
-  const btn = document.querySelector('.btn')
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
   act(() => {
-    if (btn !== null) {
-      fireEvent.click(btn)
-    }
+    fireEvent.click(btn)
+    jest.runAllTimers()
   })
-  jest.runAllTimers()
-  expect(container).toMatchSnapshot()
-  let arrLength = container.getElementsByClassName('popover').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('bs-popover-end').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-arrow').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-header').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-body').length
-  expect(arrLength).toBe(1)
-  arr = container.getElementsByClassName('popover-header')
-  if (arr.length > 0) {
-    element = arr[0]
-    expect(element.innerHTML).toBe('title')
-  } else {
-    expect(true).toBe(false)
-  }
-  arr = container.getElementsByClassName('popover-body')
-  if (arr.length > 0) {
-    element = arr[0]
-    expect(element.innerHTML).toBe('content')
-  } else {
-    expect(true).toBe(false)
-  }
+
+  expect(document.querySelector('.popover')).toBeInTheDocument()
+  expect(document.querySelector('.bs-popover-auto')).toBeInTheDocument()
+  expect(document.querySelector('.popover-arrow')).toBeInTheDocument()
+  expect(document.querySelector('.popover-header')).toBeInTheDocument()
+  expect(document.querySelector('.popover-body')).toBeInTheDocument()
+
+  expect(document.querySelector('.popover-header')?.innerHTML).toBe('title')
+  expect(document.querySelector('.popover-body')?.innerHTML).toBe('content')
+
   jest.useRealTimers()
 })
 
-// test('CPopover onToggle', async () => {
-//   let btn
-//   jest.useFakeTimers()
-//   const onToggle = jest.fn()
-//   render(
-//     <CPopover onToggle={onToggle} content="content" trigger="click">
-//       <CButton>Test</CButton>
-//     </CPopover>,
-//   )
-//   expect(onToggle).toHaveBeenCalledTimes(0)
-//   btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   jest.runAllTimers()
-//   expect(onToggle).toHaveBeenCalledTimes(1)
-//   btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   jest.runAllTimers()
-//   expect(onToggle).toHaveBeenCalledTimes(2)
-//   jest.useRealTimers()
-// })
-
-//TODO: test visible on focus, click and mouseEnter
+test('CPopover onShow and onHide', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <CPopover content="content" title="title" trigger="click" placement="right" visible={true}>
+      <CButton color="primary">Test</CButton>
+    </CPopover>,
+    { container: container! }
+  )
+
+  const onShow = jest.fn()
+  const onHide = jest.fn()
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
+  expect(onShow).toHaveBeenCalledTimes(0)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(1)
+
+  jest.useRealTimers()
+})
diff --git a/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap b/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
index dc4c83e6..22dfe0d2 100644
--- a/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
+++ b/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
@@ -1,38 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CPopover customize 1`] = `
-<body>
-  <button
-    aria-describedby="popover744956"
-    class="btn btn-primary"
-    type="button"
-  >
-    Test
-  </button>
-  <div
-    class="popover bs-popover-auto fade show"
-    id="popover744956"
-    role="tooltip"
-    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
-  >
-    <div
-      class="popover-arrow"
-      style="position: absolute;"
-    />
-    <div
-      class="popover-header"
-    >
-      title
-    </div>
-    <div
-      class="popover-body"
-    >
-      content
-    </div>
-  </div>
-</body>
-`;
-
 exports[`loads and displays CPopover component 1`] = `
 <div>
   <button
diff --git a/packages/coreui-react/src/components/progress/CProgress.tsx b/packages/coreui-react/src/components/progress/CProgress.tsx
index 62aab13d..99ab990e 100644
--- a/packages/coreui-react/src/components/progress/CProgress.tsx
+++ b/packages/coreui-react/src/components/progress/CProgress.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CProgressStackedContext } from './CProgressStacked'
+import { CProgressStackedContext } from './CProgressStackedContext'
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps
@@ -17,7 +17,7 @@ export interface CProgressProps
    */
   height?: number
   /**
-   * A string of all className you want applied to the <CProgressBar/> component.
+   * A string of all className you want applied to the `<CProgressBar/>` component.
    *
    * @since 4.9.0
    */
diff --git a/packages/coreui-react/src/components/progress/CProgressBar.tsx b/packages/coreui-react/src/components/progress/CProgressBar.tsx
index 0af619f4..70cf5efa 100644
--- a/packages/coreui-react/src/components/progress/CProgressBar.tsx
+++ b/packages/coreui-react/src/components/progress/CProgressBar.tsx
@@ -2,10 +2,11 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CProgressStackedContext } from './CProgressStacked'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
+import { CProgressStackedContext } from './CProgressStackedContext'
+
 export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Use to animate the stripes right to left via CSS3 animations.
diff --git a/packages/coreui-react/src/components/progress/CProgressStacked.tsx b/packages/coreui-react/src/components/progress/CProgressStacked.tsx
index b5e0a309..7a7d917f 100644
--- a/packages/coreui-react/src/components/progress/CProgressStacked.tsx
+++ b/packages/coreui-react/src/components/progress/CProgressStacked.tsx
@@ -1,7 +1,9 @@
-import React, { createContext, forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CProgressStackedContext } from './CProgressStackedContext'
+
 export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.
@@ -9,12 +11,6 @@ export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
 }
 
-export interface CProgressStackedContextProps {
-  stacked?: boolean
-}
-
-export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)
-
 export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps>(
   ({ children, className, ...rest }, ref) => {
     return (
@@ -28,7 +24,7 @@ export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps
         </CProgressStackedContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CProgressStacked.propTypes = {
diff --git a/packages/coreui-react/src/components/progress/CProgressStackedContext.ts b/packages/coreui-react/src/components/progress/CProgressStackedContext.ts
new file mode 100644
index 00000000..a0ec61e9
--- /dev/null
+++ b/packages/coreui-react/src/components/progress/CProgressStackedContext.ts
@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export interface CProgressStackedContextProps {
+  stacked?: boolean
+}
+
+export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)
diff --git a/packages/coreui-react/src/components/progress/__tests__/CProgress.spec.tsx b/packages/coreui-react/src/components/progress/__tests__/CProgress.spec.tsx
index b5c4c2c6..ee66e32c 100644
--- a/packages/coreui-react/src/components/progress/__tests__/CProgress.spec.tsx
+++ b/packages/coreui-react/src/components/progress/__tests__/CProgress.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CProgress } from '../../../index'
+import { CProgress } from '../index'
 
 test('loads and displays CProgress component', async () => {
   const { container } = render(<CProgress color="warning">Test</CProgress>)
diff --git a/packages/coreui-react/src/components/progress/__tests__/CProgressBar.spec.tsx b/packages/coreui-react/src/components/progress/__tests__/CProgressBar.spec.tsx
index c63b5798..1e084a2c 100644
--- a/packages/coreui-react/src/components/progress/__tests__/CProgressBar.spec.tsx
+++ b/packages/coreui-react/src/components/progress/__tests__/CProgressBar.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CProgressBar } from '../../../index'
+import { CProgressBar } from '../index'
 
 test('loads and displays CProgressBar component', async () => {
   const { container } = render(<CProgressBar color="warning">Test</CProgressBar>)
diff --git a/packages/coreui-react/src/components/sidebar/CSidebar.tsx b/packages/coreui-react/src/components/sidebar/CSidebar.tsx
index 4e22affd..519bc097 100644
--- a/packages/coreui-react/src/components/sidebar/CSidebar.tsx
+++ b/packages/coreui-react/src/components/sidebar/CSidebar.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -7,8 +7,13 @@ import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -65,10 +70,14 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
 
-export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
+export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> = forwardRef<
+  HTMLDivElement,
+  CSidebarProps
+>(
   (
     {
       children,
+      as: Component = 'div',
       className,
       colorScheme,
       narrow,
@@ -183,7 +192,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     return (
       <>
-        <div
+        <Component
           className={classNames(
             'sidebar',
             {
@@ -203,7 +212,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
           ref={forkedRef}
         >
           {children}
-        </div>
+        </Component>
         {typeof window !== 'undefined' &&
           mobile &&
           createPortal(
@@ -216,6 +225,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 )
 
 CSidebar.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   colorScheme: PropTypes.oneOf(['dark', 'light']),
@@ -231,4 +241,4 @@ CSidebar.propTypes = {
   visible: PropTypes.bool,
 }
 
-CSidebar.displayName = 'CSidebar'
+CSidebar.displayName = 'CSidebar'
\ No newline at end of file
diff --git a/packages/coreui-react/src/components/sidebar/CSidebarNav.tsx b/packages/coreui-react/src/components/sidebar/CSidebarNav.tsx
index b6e74086..46d07447 100644
--- a/packages/coreui-react/src/components/sidebar/CSidebarNav.tsx
+++ b/packages/coreui-react/src/components/sidebar/CSidebarNav.tsx
@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   ElementType,
   forwardRef,
   HTMLAttributes,
@@ -10,6 +9,12 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import type { CNavGroupProps } from '../nav/CNavGroup'
+import type { CNavLinkProps } from '../nav/CNavLink'
+import type { CNavItemProps } from '../nav/CNavItem'
+
+import { CSidebarNavContext } from './CSidebarNavContext'
+
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
@@ -25,42 +30,37 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
   className?: string
 }
 
-interface ContextProps {
-  visibleGroup: string
-  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+const isNavElement = (
+  child: ReactNode
+): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
+  if (!React.isValidElement(child)) return false
+  const type = child.type as { displayName?: string }
+  return (
+    type.displayName === 'CNavGroup' ||
+    type.displayName === 'CNavLink' ||
+    type.displayName === 'CNavItem'
+  )
 }
 
-export const CNavContext = createContext({} as ContextProps)
-
 const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
-  return React.Children.map(children, (child: ReactNode, index: number) => {
-    if (
-      !React.isValidElement(child) ||
-      // @ts-expect-error the `children` exist in each component. TODO: resolve
-      (child.type.displayName !== 'CNavGroup' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavLink' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavItem')
-    ) {
+  return React.Children.map(children, (child, index) => {
+    if (!isNavElement(child)) {
       return child
     }
 
     const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
 
-    if (child.props && child.props.children) {
-      return React.cloneElement(child as ReactElement<any>, {
+    if (child.props.children) {
+      const type = child.type as { displayName?: string }
+      const shouldUpdateId = type.displayName !== 'CNavItem'
+
+      return React.cloneElement(child, {
         idx: _id,
-        children: recursiveClone(
-          child.props.children,
-          _id,
-          // @ts-expect-error the `displayName` exist in each component. TODO: resolve
-          child.type.displayName === 'CNavItem' ? false : true,
-        ),
+        children: recursiveClone(child.props.children, _id, shouldUpdateId),
       })
     }
 
-    return React.cloneElement(child as ReactElement<any>, {
+    return React.cloneElement(child, {
       idx: _id,
     })
   })
@@ -77,11 +77,11 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
   }
 
   return (
-    <CNavContext.Provider value={CNavContextValues}>
+    <CSidebarNavContext.Provider value={CNavContextValues}>
       <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
         {recursiveClone(children)}
       </Component>
-    </CNavContext.Provider>
+    </CSidebarNavContext.Provider>
   )
 })
 
diff --git a/packages/coreui-react/src/components/sidebar/CSidebarNavContext.ts b/packages/coreui-react/src/components/sidebar/CSidebarNavContext.ts
new file mode 100644
index 00000000..a880a648
--- /dev/null
+++ b/packages/coreui-react/src/components/sidebar/CSidebarNavContext.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CSidebarNavContextProps {
+  visibleGroup: string
+  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+}
+
+export const CSidebarNavContext = createContext({} as CSidebarNavContextProps)
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebar.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebar.spec.tsx
index b4102a6b..5eb802a6 100644
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebar.spec.tsx
+++ b/packages/coreui-react/src/components/sidebar/__tests__/CSidebar.spec.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {
   CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CSidebar component', async () => {
   const { container } = render(<CSidebar>Test</CSidebar>)
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx
index 04f92181..5c16bd3e 100644
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx
+++ b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarBrand } from '../../../index'
+import { CSidebarBrand } from '../index'
 
 test('loads and displays CSidebarBrand component', async () => {
   const { container } = render(<CSidebarBrand color="primary">Test</CSidebarBrand>)
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx
index 4e12dd5e..765fa278 100644
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx
+++ b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarFooter } from '../../../index'
+import { CSidebarFooter } from '../index'
 
 test('loads and displays CSidebarFooter component', async () => {
   const { container } = render(<CSidebarFooter>Test</CSidebarFooter>)
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx
index dbe9f2b0..c41fd9f5 100644
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx
+++ b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarHeader } from '../../../index'
+import { CSidebarHeader } from '../index'
 
 test('loads and displays CSidebarHeader component', async () => {
   const { container } = render(<CSidebarHeader>Test</CSidebarHeader>)
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarNav.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarNav.spec.tsx
index 15732399..086f0dff 100644
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarNav.spec.tsx
+++ b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarNav.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarNav } from '../../../index'
+import { CSidebarNav } from '../index'
 
 test('loads and displays CSidebarNav component', async () => {
   const { container } = render(<CSidebarNav>Test</CSidebarNav>)
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx
index 44561696..d2b69c2a 100644
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx
+++ b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarToggler } from '../../../index'
+import { CSidebarToggler } from '../index'
 
 test('loads and displays CSidebarToggler component', async () => {
   const { container } = render(<CSidebarToggler />)
diff --git a/packages/coreui-react/src/components/spinner/__tests__/CSpinner.spec.tsx b/packages/coreui-react/src/components/spinner/__tests__/CSpinner.spec.tsx
index 51406fd3..27a8e65b 100644
--- a/packages/coreui-react/src/components/spinner/__tests__/CSpinner.spec.tsx
+++ b/packages/coreui-react/src/components/spinner/__tests__/CSpinner.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSpinner } from '../../../index'
+import { CSpinner } from '../index'
 
 test('loads and displays CSpinner component', async () => {
   const { container } = render(<CSpinner>Test</CSpinner>)
diff --git a/packages/coreui-react/src/components/table/__tests__/CTable.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTable.spec.tsx
index 916895e4..6427b3a0 100644
--- a/packages/coreui-react/src/components/table/__tests__/CTable.spec.tsx
+++ b/packages/coreui-react/src/components/table/__tests__/CTable.spec.tsx
@@ -10,7 +10,7 @@ import {
   CTableBody,
   CTableDataCell,
   CTableFoot,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CTable component', async () => {
   const { container } = render(<CTable />)
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableBody.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableBody.spec.tsx
index 626c9879..093e3e0b 100644
--- a/packages/coreui-react/src/components/table/__tests__/CTableBody.spec.tsx
+++ b/packages/coreui-react/src/components/table/__tests__/CTableBody.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableBody, CTableDataCell, CTableRow } from '../../../index'
+import { CTableBody, CTableDataCell, CTableRow } from '../index'
 
 test('loads and displays CTableBody component', async () => {
   const table = document.createElement('table')
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableCaption.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableCaption.spec.tsx
index ec27253b..607244c0 100644
--- a/packages/coreui-react/src/components/table/__tests__/CTableCaption.spec.tsx
+++ b/packages/coreui-react/src/components/table/__tests__/CTableCaption.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableCaption } from '../../../index'
+import { CTableCaption } from '../index'
 
 test('loads and displays CTableCaption component', async () => {
   const table = document.createElement('table')
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableDataCell.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableDataCell.spec.tsx
index c939f3d1..08f0057b 100644
--- a/packages/coreui-react/src/components/table/__tests__/CTableDataCell.spec.tsx
+++ b/packages/coreui-react/src/components/table/__tests__/CTableDataCell.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableDataCell } from '../../../index'
+import { CTableDataCell } from '../index'
 import { CTableBody } from '../CTableBody'
 import { CTableRow } from '../CTableRow'
 
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableFoot.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableFoot.spec.tsx
index 8f4f2972..741d44de 100644
--- a/packages/coreui-react/src/components/table/__tests__/CTableFoot.spec.tsx
+++ b/packages/coreui-react/src/components/table/__tests__/CTableFoot.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableFoot, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableFoot, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableFoot component', async () => {
   const table = document.createElement('table')
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableHead.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableHead.spec.tsx
index 0802198e..e9c65340 100644
--- a/packages/coreui-react/src/components/table/__tests__/CTableHead.spec.tsx
+++ b/packages/coreui-react/src/components/table/__tests__/CTableHead.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableHead, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableHead component', async () => {
   const table = document.createElement('table')
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableHeaderCell.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableHeaderCell.spec.tsx
index b2aba0c6..27f409cb 100644
--- a/packages/coreui-react/src/components/table/__tests__/CTableHeaderCell.spec.tsx
+++ b/packages/coreui-react/src/components/table/__tests__/CTableHeaderCell.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableHead, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableHead, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableHeaderCell component', async () => {
   const table = document.createElement('table')
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableRow.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableRow.spec.tsx
index cfbeabc1..5f462d12 100644
--- a/packages/coreui-react/src/components/table/__tests__/CTableRow.spec.tsx
+++ b/packages/coreui-react/src/components/table/__tests__/CTableRow.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTableBody, CTableHeaderCell, CTableRow } from '../../../index'
+import { CTableBody, CTableHeaderCell, CTableRow } from '../index'
 
 test('loads and displays CTableRow component', async () => {
   const table = document.createElement('table')
diff --git a/packages/coreui-react/src/components/tabs/CTab.tsx b/packages/coreui-react/src/components/tabs/CTab.tsx
index 88e892d7..a84e2cc8 100644
--- a/packages/coreui-react/src/components/tabs/CTab.tsx
+++ b/packages/coreui-react/src/components/tabs/CTab.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { TabsContext } from './CTabs'
+import { CTabsContext } from './CTabsContext'
 
 export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
   /**
@@ -21,7 +21,7 @@ export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
   ({ children, className, itemKey, ...rest }, ref) => {
-    const { _activeItemKey, setActiveItemKey, id } = useContext(TabsContext)
+    const { _activeItemKey, setActiveItemKey, id } = useContext(CTabsContext)
 
     const isActive = () => itemKey === _activeItemKey
 
diff --git a/packages/coreui-react/src/components/tabs/CTabList.tsx b/packages/coreui-react/src/components/tabs/CTabList.tsx
index 7349a364..ee7b9fe5 100644
--- a/packages/coreui-react/src/components/tabs/CTabList.tsx
+++ b/packages/coreui-react/src/components/tabs/CTabList.tsx
@@ -17,7 +17,7 @@ export interface CTabListProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
+  variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border'
 }
 
 export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
@@ -39,7 +39,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
         const target = event.target as HTMLElement
         // eslint-disable-next-line unicorn/prefer-spread
         const items: HTMLElement[] = Array.from(
-          tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
+          tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)')
         )
 
         let nextActiveElement
@@ -51,7 +51,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
             items,
             target,
             event.key === 'ArrowDown' || event.key === 'ArrowRight',
-            true,
+            true
           )
         }
 
@@ -65,11 +65,12 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
       <div
         className={classNames(
           'nav',
+          variant === 'enclosed-pills' && 'nav-enclosed', // Enclosed pills variant required for `.nav-enclosed` class
           {
             [`nav-${layout}`]: layout,
             [`nav-${variant}`]: variant,
           },
-          className,
+          className
         )}
         role="tablist"
         onKeyDown={handleKeydown}
@@ -79,14 +80,21 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CTabList.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
+  variant: PropTypes.oneOf([
+    'enclosed',
+    'enclosed-pills',
+    'pills',
+    'tabs',
+    'underline',
+    'underline-border',
+  ]),
 }
 
 CTabList.displayName = 'CTabList'
diff --git a/packages/coreui-react/src/components/tabs/CTabPane.tsx b/packages/coreui-react/src/components/tabs/CTabPane.tsx
index 9cc2e15b..07e9ab42 100644
--- a/packages/coreui-react/src/components/tabs/CTabPane.tsx
+++ b/packages/coreui-react/src/components/tabs/CTabPane.tsx
@@ -32,7 +32,7 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
   ({ children, className, onHide, onShow, transition = true, visible, ...rest }, ref) => {
-    const tabPaneRef = useRef()
+    const tabPaneRef = useRef(null)
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
     return (
diff --git a/packages/coreui-react/src/components/tabs/CTabPanel.tsx b/packages/coreui-react/src/components/tabs/CTabPanel.tsx
index 97acd374..fe770d6e 100644
--- a/packages/coreui-react/src/components/tabs/CTabPanel.tsx
+++ b/packages/coreui-react/src/components/tabs/CTabPanel.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { TabsContext } from './CTabs'
+import { CTabsContext } from './CTabsContext'
 import { useForkedRef } from '../../hooks'
 import { getTransitionDurationFromElement } from '../../utils'
 
@@ -36,9 +36,9 @@ export interface CTabPanelProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
   ({ children, className, itemKey, onHide, onShow, transition = true, visible, ...rest }, ref) => {
-    const { _activeItemKey, id } = useContext(TabsContext)
+    const { _activeItemKey, id } = useContext(CTabsContext)
 
-    const tabPaneRef = useRef()
+    const tabPaneRef = useRef(null)
     const forkedRef = useForkedRef(ref, tabPaneRef)
 
     const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)
diff --git a/packages/coreui-react/src/components/tabs/CTabs.tsx b/packages/coreui-react/src/components/tabs/CTabs.tsx
index 76a78b4f..bcfcb17e 100644
--- a/packages/coreui-react/src/components/tabs/CTabs.tsx
+++ b/packages/coreui-react/src/components/tabs/CTabs.tsx
@@ -1,53 +1,86 @@
-import React, { createContext, forwardRef, HTMLAttributes, useEffect, useId, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, useId, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CTabsContext } from './CTabsContext'
+
 export interface CTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /**
-   * The active item key.
+   * Controls the currently active tab.
+   *
+   * When provided, the component operates in a controlled mode.
+   * You must handle tab switching manually by updating this prop.
+   *
+   * @example
+   * const [activeTab, setActiveTab] = useState(0);
+   * <CTabs activeItemKey={activeTab} onChange={setActiveTab} />
    */
-  activeItemKey: number | string
+  activeItemKey?: number | string
+
   /**
    * A string of all className you want applied to the base component.
    */
   className?: string
+
   /**
-   * The callback is fired when the active tab changes.
+   * Sets the initially active tab when the component mounts.
+   *
+   * After initialization, the component manages active tab changes internally.
+   *
+   * Use `defaultActiveItemKey` for uncontrolled usage.
+   *
+   * @example
+   * <CTabs defaultActiveItemKey={1} />
    */
-  onChange?: (value: number | string) => void
-}
+  defaultActiveItemKey?: number | string
 
-export interface TabsContextProps {
-  _activeItemKey?: number | string
-  setActiveItemKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
-  id?: string
+  /**
+   * Callback fired when the active tab changes.
+   *
+   * - In controlled mode (`activeItemKey` provided), you must update `activeItemKey` yourself based on the value received.
+   * - In uncontrolled mode, this callback is called after internal state updates.
+   *
+   * @param value - The newly selected tab key.
+   *
+   * @example
+   * <CTabs onChange={(key) => console.log('Tab changed to', key)} />
+   */
+  onChange?: (value: number | string) => void
 }
 
-export const TabsContext = createContext({} as TabsContextProps)
-
 export const CTabs = forwardRef<HTMLDivElement, CTabsProps>(
-  ({ children, activeItemKey, className, onChange }, ref) => {
+  ({ children, activeItemKey, className, defaultActiveItemKey, onChange }, ref) => {
     const id = useId()
-    const [_activeItemKey, setActiveItemKey] = useState(activeItemKey)
+    const isControlled = activeItemKey !== undefined
+    const [internalActiveItemKey, setInternalActiveItemKey] = useState<number | string | undefined>(
+      () => (isControlled ? undefined : defaultActiveItemKey)
+    )
+
+    const currentActiveItemKey = isControlled ? activeItemKey : internalActiveItemKey
+
+    const setActiveItemKey = (value: number | string) => {
+      if (!isControlled) {
+        setInternalActiveItemKey(value)
+      }
 
-    useEffect(() => {
-      _activeItemKey && onChange && onChange(_activeItemKey)
-    }, [_activeItemKey])
+      onChange?.(value)
+    }
 
     return (
-      <TabsContext.Provider value={{ _activeItemKey, setActiveItemKey, id }}>
+      <CTabsContext.Provider value={{ _activeItemKey: currentActiveItemKey, setActiveItemKey, id }}>
         <div className={classNames('tabs', className)} ref={ref}>
           {children}
         </div>
-      </TabsContext.Provider>
+      </CTabsContext.Provider>
     )
-  },
+  }
 )
 
 CTabs.propTypes = {
-  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
+  defaultActiveItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   onChange: PropTypes.func,
 }
 
diff --git a/packages/coreui-react/src/components/tabs/CTabsContext.ts b/packages/coreui-react/src/components/tabs/CTabsContext.ts
new file mode 100644
index 00000000..87f0c215
--- /dev/null
+++ b/packages/coreui-react/src/components/tabs/CTabsContext.ts
@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export interface CTabsContextProps {
+  _activeItemKey?: number | string
+  setActiveItemKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+  id?: string
+}
+
+export const CTabsContext = createContext({} as CTabsContextProps)
\ No newline at end of file
diff --git a/packages/coreui-react/src/components/tabs/__tests__/CTabContent.spec.tsx b/packages/coreui-react/src/components/tabs/__tests__/CTabContent.spec.tsx
index 5e465cc4..ea0ffcd1 100644
--- a/packages/coreui-react/src/components/tabs/__tests__/CTabContent.spec.tsx
+++ b/packages/coreui-react/src/components/tabs/__tests__/CTabContent.spec.tsx
@@ -1,16 +1,25 @@
 import * as React from 'react'
-import { render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTabContent } from '../../../index'
+
+import { CTabContent } from '../index'
 
 test('loads and displays CTabContent component', async () => {
-  const { container } = render(<CTabContent>Test</CTabContent>)
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CTabContent>Test</CTabContent>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CTabContent customize', async () => {
-  const { container } = render(<CTabContent className="bazinga">Test</CTabContent>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('tab-content')
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CTabContent className="bazinga">Test</CTabContent>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
+  expect(container!.firstChild).toHaveClass('bazinga')
+  expect(container!.firstChild).toHaveClass('tab-content')
 })
diff --git a/packages/coreui-react/src/components/tabs/__tests__/CTabPane.spec.tsx b/packages/coreui-react/src/components/tabs/__tests__/CTabPane.spec.tsx
index 92a6e688..4d602623 100644
--- a/packages/coreui-react/src/components/tabs/__tests__/CTabPane.spec.tsx
+++ b/packages/coreui-react/src/components/tabs/__tests__/CTabPane.spec.tsx
@@ -1,48 +1,68 @@
 import * as React from 'react'
-import { render, screen } from '@testing-library/react'
+import { act, render, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTabPane, CTabContent } from '../../../index'
+
+import { CTabPane, CTabContent } from '../index'
 
 test('loads and displays CTabPane component', async () => {
-  const { container } = render(<CTabPane>Test</CTabPane>)
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CTabPane>Test</CTabPane>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CTabPane customize', async () => {
-  const { container } = render(
-    <CTabPane className="bazinga" visible={true}>
-      Test
-    </CTabPane>,
-  )
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(
+      <CTabPane className="bazinga" visible={true}>
+        Test
+      </CTabPane>
+    )
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CTabContent use case test', async () => {
+  jest.useFakeTimers()
+
   const { rerender } = render(
     <CTabContent>
       <CTabPane visible={false}>Test</CTabPane>
-    </CTabContent>,
-  )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('active')
-  rerender(
-    <CTabContent>
-      <CTabPane visible={true}>Test</CTabPane>
-    </CTabContent>,
-  )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('active')
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(screen.getByText('Test')).toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('active')
-  rerender(
-    <CTabContent>
-      <CTabPane visible={false}>Test</CTabPane>
-    </CTabContent>,
+    </CTabContent>
   )
+
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    rerender(
+      <CTabContent>
+        <CTabPane visible={true}>Test</CTabPane>
+      </CTabContent>
+    )
+    jest.runAllTimers()
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText('Test')).toHaveClass('active')
+    expect(screen.getByText('Test')).toHaveClass('show')
+  })
+
+  act(() => {
+    rerender(
+      <CTabContent>
+        <CTabPane visible={false}>Test</CTabPane>
+      </CTabContent>
+    )
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
+
+  jest.useRealTimers()
 })
diff --git a/packages/coreui-react/src/components/toast/CToast.tsx b/packages/coreui-react/src/components/toast/CToast.tsx
index acc405b3..0b7fa28a 100644
--- a/packages/coreui-react/src/components/toast/CToast.tsx
+++ b/packages/coreui-react/src/components/toast/CToast.tsx
@@ -1,15 +1,10 @@
-import React, {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
+import { CToastContext } from './CToastContext'
+
 import { useForkedRef } from '../../hooks'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
@@ -59,13 +54,6 @@ export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
   visible?: boolean
 }
 
-interface ContextProps extends CToastProps {
-  visible?: boolean
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const CToastContext = createContext({} as ContextProps)
-
 export const CToast = forwardRef<HTMLDivElement, CToastProps>(
   (
     {
@@ -82,12 +70,12 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
       onShow,
       ...rest
     },
-    ref,
+    ref
   ) => {
-    const toastRef = useRef()
+    const toastRef = useRef(null)
     const forkedRef = useForkedRef(ref, toastRef)
     const [_visible, setVisible] = useState(false)
-    const timeout = useRef<number>()
+    const timeout = useRef<number>(undefined)
 
     useEffect(() => {
       setVisible(visible)
@@ -135,7 +123,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                   'show showing': state === 'entering' || state === 'exiting',
                   show: state === 'entered',
                 },
-                className,
+                className
               )}
               aria-live="assertive"
               aria-atomic="true"
@@ -152,7 +140,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CToast.propTypes = {
@@ -163,10 +151,7 @@ CToast.propTypes = {
   color: colorPropType,
   delay: PropTypes.number,
   index: PropTypes.number,
-  innerKey: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]),
+  innerKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   onClose: PropTypes.func,
   onShow: PropTypes.func,
   visible: PropTypes.bool,
diff --git a/packages/coreui-react/src/components/toast/CToastClose.tsx b/packages/coreui-react/src/components/toast/CToastClose.tsx
index 7b499026..a7f421ee 100644
--- a/packages/coreui-react/src/components/toast/CToastClose.tsx
+++ b/packages/coreui-react/src/components/toast/CToastClose.tsx
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 
 import { CButtonProps } from '../button/CButton'
 import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
-
-import { CToastContext } from './CToast'
+import { CToastContext } from './CToastContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
diff --git a/packages/coreui-react/src/components/toast/CToastContext.ts b/packages/coreui-react/src/components/toast/CToastContext.ts
new file mode 100644
index 00000000..3c0144dd
--- /dev/null
+++ b/packages/coreui-react/src/components/toast/CToastContext.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CToastContextProps {
+  visible?: boolean
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CToastContext = createContext({} as CToastContextProps)
diff --git a/packages/coreui-react/src/components/toast/CToaster.tsx b/packages/coreui-react/src/components/toast/CToaster.tsx
index 7ad9b823..c10d93c1 100644
--- a/packages/coreui-react/src/components/toast/CToaster.tsx
+++ b/packages/coreui-react/src/components/toast/CToaster.tsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CConditionalPortal } from '../conditional-portal'
 
+import type { CToastProps } from './CToast'
+
 export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -27,20 +29,22 @@ export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Adds new `CToast` to `CToaster`.
    */
-  push?: ReactElement
+  push?: ReactElement<CToastProps>
 }
 
 export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
   ({ children, className, placement, push, ...rest }, ref) => {
-    const [toasts, setToasts] = useState<ReactElement[]>([])
+    const [toasts, setToasts] = useState<ReactElement<CToastProps>[]>([])
     const index = useRef<number>(0)
 
     useEffect(() => {
       index.current++
-      push && addToast(push)
+      if (push) {
+        addToast(push)
+      }
     }, [push])
 
-    const addToast = (push: ReactElement) => {
+    const addToast = (push: ReactElement<CToastProps>) => {
       setToasts((state) => [
         ...state,
         React.cloneElement(push, {
@@ -67,18 +71,18 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
                 'start-50 translate-middle-x': placement && placement.includes('center'),
                 'end-0': placement && placement.includes('end'),
               },
-              className,
+              className
             )}
             {...rest}
             ref={ref}
           >
             {children}
-            {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}
+            {toasts.map((toast, index) => React.cloneElement(toast, { visible: true, key: index }))}
           </div>
         ) : null}
       </CConditionalPortal>
     )
-  },
+  }
 )
 
 CToaster.propTypes = {
diff --git a/packages/coreui-react/src/components/toast/__tests__/CToast.spec.tsx b/packages/coreui-react/src/components/toast/__tests__/CToast.spec.tsx
index ba387d70..97b3ebfb 100644
--- a/packages/coreui-react/src/components/toast/__tests__/CToast.spec.tsx
+++ b/packages/coreui-react/src/components/toast/__tests__/CToast.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { render, fireEvent, waitFor } from '@testing-library/react'
+import { render, fireEvent, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToast, CToastBody, CToastHeader } from '../../../index'
+import { CToast, CToastBody, CToastHeader } from '../index'
 
 test('loads and displays CToast component', async () => {
   const { container } = render(<CToast>Test</CToast>)
@@ -10,16 +10,9 @@ test('loads and displays CToast component', async () => {
 
 test('CToast customize', async () => {
   const { container } = render(
-    <CToast
-      className="bazinga"
-      autohide={false}
-      color="warning"
-      delay={100}
-      visible={true}
-      //onClose
-    >
+    <CToast className="bazinga" autohide={false} color="warning" delay={100} visible={true}>
       Test
-    </CToast>,
+    </CToast>
   )
   await waitFor(() => {
     expect(container).toMatchSnapshot()
@@ -32,7 +25,8 @@ test('CToast customize', async () => {
 })
 
 test('CToast click on dismiss button', async () => {
-  // jest.useFakeTimers()
+  jest.useFakeTimers()
+
   const onClose = jest.fn()
   const { container } = render(
     <CToast
@@ -59,41 +53,52 @@ test('CToast click on dismiss button', async () => {
         <small>7 min ago</small>
       </CToastHeader>
       <CToastBody>Hello, world! This is a toast message.</CToastBody>
-    </CToast>,
+    </CToast>
   )
+
   await waitFor(() => {
     expect(container.firstChild).toHaveClass('show')
   })
 
   expect(onClose).toHaveBeenCalledTimes(0)
+
   const btn = document.querySelector('.btn-close')
+
   if (btn !== null) {
-    fireEvent.click(btn)
+    act(() => {
+      fireEvent.click(btn)
+      jest.runAllTimers()
+    })
   }
-  jest.runAllTimers()
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(onClose).toHaveBeenCalledTimes(1)
-  expect(container.firstChild).toBeNull()
+
+  await waitFor(() => {
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(container.firstChild).toBeNull()
+  })
+
   jest.useRealTimers()
 })
 
 test('CToast test autohide', async () => {
+  jest.useFakeTimers()
+
   const { container } = render(
     <CToast autohide={true} delay={1000} visible={true}>
       Test
-    </CToast>,
+    </CToast>
   )
 
   await waitFor(() => {
     expect(container.firstChild).toHaveClass('show')
   })
 
-  await waitFor(
-    () => {
-      expect(container.firstChild).toBeNull()
-    },
-    {
-      timeout: 5000,
-    },
-  )
+  act(() => {
+    jest.advanceTimersByTime(1000)
+  })
+
+  await waitFor(() => {
+    expect(container.firstChild).toBeNull()
+  })
+
+  jest.useRealTimers()
 })
diff --git a/packages/coreui-react/src/components/toast/__tests__/CToastBody.spec.tsx b/packages/coreui-react/src/components/toast/__tests__/CToastBody.spec.tsx
index 804b98ca..3b0db757 100644
--- a/packages/coreui-react/src/components/toast/__tests__/CToastBody.spec.tsx
+++ b/packages/coreui-react/src/components/toast/__tests__/CToastBody.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToastBody } from '../../../index'
+import { CToastBody } from '../index'
 
 test('loads and displays CToastBody component', async () => {
   const { container } = render(<CToastBody>Test</CToastBody>)
diff --git a/packages/coreui-react/src/components/toast/__tests__/CToastHeader.spec.tsx b/packages/coreui-react/src/components/toast/__tests__/CToastHeader.spec.tsx
index 5939f62d..4ba19ff9 100644
--- a/packages/coreui-react/src/components/toast/__tests__/CToastHeader.spec.tsx
+++ b/packages/coreui-react/src/components/toast/__tests__/CToastHeader.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToastHeader } from '../../../index'
+import { CToastHeader } from '../index'
 
 test('loads and displays CToastHeader component', async () => {
   const { container } = render(<CToastHeader>Test</CToastHeader>)
diff --git a/packages/coreui-react/src/components/toast/__tests__/CToaster.spec.tsx b/packages/coreui-react/src/components/toast/__tests__/CToaster.spec.tsx
index 342edd39..fb18c583 100644
--- a/packages/coreui-react/src/components/toast/__tests__/CToaster.spec.tsx
+++ b/packages/coreui-react/src/components/toast/__tests__/CToaster.spec.tsx
@@ -1,7 +1,8 @@
 import React from 'react' //  useState,
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToast, CToaster, CToastBody, CToastHeader, CButton } from '../../../index'
+import { CButton } from '../../button'
+import { CToast, CToaster, CToastBody, CToastHeader } from '../index'
 
 test('loads and displays CToaster component', async () => {
   const { container } = render(<CToaster>Test</CToaster>)
diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx
index 143051c5..4e2aad16 100644
--- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx
+++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx
@@ -9,6 +9,7 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import type { Options } from '@popperjs/core'
 
 import { CConditionalPortal } from '../conditional-portal'
 import { useForkedRef, usePopper } from '../../hooks'
@@ -18,61 +19,124 @@ import { executeAfterTransition, getRTLPlacement } from '../../utils'
 
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
-   * Apply a CSS fade transition to the tooltip.
+   * Enables or disables the CSS fade transition for the React Tooltip.
    *
    * @since 4.9.0
    */
   animation?: boolean
+
   /**
-   * A string of all className you want applied to the component.
+   * Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices.
    */
   className?: string
+
   /**
-   * Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   * Appends the React Tooltip to a specific element instead of the default `document.body`. You may pass:
+   * - A DOM element (`HTMLElement` or `DocumentFragment`)
+   * - A function that returns a single element
+   * - `null`
    *
+   * @example
+   * <CTooltip container={document.getElementById('my-container')}>...</CTooltip>
+   *
+   * @default document.body
    * @since 4.11.0
    */
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+
   /**
-   * Content node for your component.
+   * Content to be displayed within the React Tooltip. Can be a string or any valid React node.
    */
   content: ReactNode | string
+
   /**
-   * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+   * The delay (in milliseconds) before showing or hiding the React Tooltip.
+   * - If provided as a number, the delay is applied to both "show" and "hide".
+   * - If provided as an object, it should have distinct "show" and "hide" values.
+   *
+   * @example
+   * // Delays 300ms on both show and hide
+   * <CTooltip delay={300}>...</CTooltip>
+   *
+   * // Delays 500ms on show and 100ms on hide
+   * <CTooltip delay={{ show: 500, hide: 100 }}>...</CTooltip>
    *
    * @since 4.9.0
    */
   delay?: number | { show: number; hide: number }
+
   /**
-   * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+   * Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order.
    *
+   * @type 'top', 'right', 'bottom', 'left' | ('top', 'right', 'bottom', 'left')[]
    * @since 4.9.0
    */
   fallbackPlacements?: Placements | Placements[]
+
   /**
-   * Offset of the tooltip relative to its target.
+   * Adjusts the offset of the React Tooltip relative to its target. Expects a tuple `[x-axis, y-axis]`.
+   *
+   * @example
+   * // Offset the menu 0px in X and 10px in Y direction
+   * <CTooltip offset={[0, 10]}>...</CTooltip>
+   *
+   * // Offset the menu 5px in both X and Y direction
+   * <CTooltip offset={[5, 5]}>...</CTooltip>
    */
   offset?: [number, number]
+
   /**
-   * Callback fired when the component requests to be hidden.
+   * Callback fired immediately after the React Tooltip is hidden.
    */
   onHide?: () => void
+
   /**
-   * Callback fired when the component requests to be shown.
+   * Callback fired immediately after the React Tooltip is shown.
    */
   onShow?: () => void
+
   /**
-   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+   * Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position.
+   */
+  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
+
+  /**
+   * Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. [Learn more](https://popper.js.org/docs/v2/constructors/#options)
+   *
+   * @example
+   * <CTooltip
+   *   popperConfig={(defaultConfig) => ({
+   *     ...defaultConfig,
+   *     strategy: 'fixed',
+   *     modifiers: [
+   *       ...defaultConfig.modifiers,
+   *       { name: 'computeStyles', options: { adaptive: false } },
+   *     ],
+   *   })}
+   * >...</CTooltip>
    *
-   * @type 'hover' | 'focus' | 'click'
+   * @since 5.5.0
    */
-  trigger?: Triggers | Triggers[]
+  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+
   /**
-   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+   * Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers.
+   *
+   * @example
+   * // Hover-only tooltip
+   * <CTooltip trigger="hover">...</CTooltip>
+   *
+   * // Hover + click combined
+   * <CTooltip trigger={['hover', 'click']}>...</CTooltip>
+   *
+   * @type 'hover' | 'focus' | 'click' | ('hover' | 'focus' | 'click')[]
    */
-  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
+  trigger?: Triggers | Triggers[]
+
   /**
-   * Toggle the visibility of tooltip component.
+   * Controls the visibility of the React Tooltip.
+   * - `true` to show the tooltip.
+   * - `false` to hide the tooltip.
    */
   visible?: boolean
 }
@@ -91,11 +155,12 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       onHide,
       onShow,
       placement = 'top',
+      popperConfig,
       trigger = ['hover', 'focus'],
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const tooltipRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
@@ -109,30 +174,20 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
 
-    const popperConfig = {
+    const defaultPopperConfig: Partial<Options> = {
       modifiers: [
-        {
-          name: 'arrow',
-          options: {
-            element: '.tooltip-arrow',
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: fallbackPlacements,
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
-          },
-        },
+        { name: 'arrow', options: { element: '.tooltip-arrow' } },
+        { name: 'flip', options: { fallbackPlacements } },
+        { name: 'offset', options: { offset } },
       ],
       placement: getRTLPlacement(placement, togglerRef.current),
     }
 
+    const computedPopperConfig: Partial<Options> = {
+      ...defaultPopperConfig,
+      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+    }
+
     useEffect(() => {
       if (visible) {
         handleShow()
@@ -144,7 +199,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
 
     useEffect(() => {
       if (mounted && togglerRef.current && tooltipRef.current) {
-        initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+        initPopper(togglerRef.current, tooltipRef.current, computedPopperConfig)
         setTimeout(() => {
           setVisible(true)
         }, _delay.show)
@@ -214,7 +269,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
                   fade: animation,
                   show: _visible,
                 },
-                className,
+                className
               )}
               id={id}
               ref={forkedRef}
@@ -228,7 +283,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
         </CConditionalPortal>
       </>
     )
-  },
+  }
 )
 
 CTooltip.propTypes = {
@@ -248,6 +303,7 @@ CTooltip.propTypes = {
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   trigger: triggerPropType,
   visible: PropTypes.bool,
 }
diff --git a/packages/coreui-react/src/components/tooltip/__tests__/CTooltip.spec.tsx b/packages/coreui-react/src/components/tooltip/__tests__/CTooltip.spec.tsx
index fa58d995..31a194b9 100644
--- a/packages/coreui-react/src/components/tooltip/__tests__/CTooltip.spec.tsx
+++ b/packages/coreui-react/src/components/tooltip/__tests__/CTooltip.spec.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
-import { act } from 'react-dom/test-utils'
-import { fireEvent, render } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTooltip, CLink } from '../../../index'
+import { CLink } from '../../link'
+import { CTooltip } from '../index'
+import { CButton } from '../../button'
 
 let container: HTMLDivElement | null
 
@@ -20,44 +21,64 @@ test('loads and displays CTooltip component', async () => {
   const { container } = render(
     <CTooltip content="content">
       <CLink>Test</CLink>
-    </CTooltip>,
+    </CTooltip>
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CTooltip customize', async () => {
-  const { container } = render(
+  jest.useFakeTimers()
+
+  render(
     <CTooltip trigger="hover" placement="right" content="content">
-      <CLink className="link">Test</CLink>
-    </CTooltip>,
+      <CLink href="#">Test</CLink>
+    </CTooltip>
   )
-  const link = document.querySelector('.link')
+
+  const link = screen.getByText('Test')
+
   act(() => {
-    if (link !== null) {
-      fireEvent.mouseOver(link)
-    }
+    fireEvent.mouseOver(link)
+    jest.runAllTimers()
   })
-  expect(container).toMatchSnapshot()
+
+  expect(document.querySelector('.tooltip')).toBeInTheDocument()
+
+  jest.useRealTimers()
 })
 
-// test('CTooltip on toggle', async () => {
-//   jest.useFakeTimers()
-//   const onToggle = jest.fn()
-//   render(
-//     <CTooltip
-//       trigger="click"
-//       placement="right-end"
-//       content="content"
-//       visible={true}
-//       onToggle={onToggle}
-//     >
-//       <CButton>Test</CButton>
-//     </CTooltip>,
-//   )
-//   expect(onToggle).toHaveBeenCalledTimes(0)
-//   const btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   expect(onToggle).toHaveBeenCalledTimes(1)
-// })
+test('CTooltip onShow and onHide', async () => {
+  jest.useFakeTimers()
+
+  const onShow = jest.fn()
+  const onHide = jest.fn()
+
+  render(
+    <CTooltip trigger="click" placement="right" content="content" onShow={onShow} onHide={onHide}>
+      <CButton>Test</CButton>
+    </CTooltip>
+  )
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
+  expect(onShow).toHaveBeenCalledTimes(0)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(1)
+
+  jest.useRealTimers()
+})
diff --git a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap b/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
index aed23818..ee2b49cb 100644
--- a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
+++ b/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
@@ -1,16 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CTooltip customize 1`] = `
-<div>
-  <a
-    aria-describedby="tooltip97108"
-    class="link"
-  >
-    Test
-  </a>
-</div>
-`;
-
 exports[`loads and displays CTooltip component 1`] = `
 <div>
   <a
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx
index 1b59149d..22b080e8 100644
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx
+++ b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CWidgetStatsA } from '../../../index'
+import { CWidgetStatsA } from '../index'
 
 test('loads and displays CWidgetStatsA component', async () => {
   const { container } = render(<CWidgetStatsA />)
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx
index 1fc159c3..fb87296d 100644
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx
+++ b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CWidgetStatsB } from '../../../index'
+import { CWidgetStatsB } from '../index'
 
 test('loads and displays CWidgetStatsB component', async () => {
   const { container } = render(<CWidgetStatsB />)
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx
index 16377474..390dae43 100644
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx
+++ b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CWidgetStatsC } from '../../../index'
+import { CWidgetStatsC } from '../index'
 
 test('loads and displays CWidgetStatsC component', async () => {
   const { container } = render(<CWidgetStatsC />)
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx
index 50cf479d..1cbd6f95 100644
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx
+++ b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CWidgetStatsD } from '../../../index'
+import { CWidgetStatsD } from '../index'
 
 test('loads and displays CWidgetStatsD component', async () => {
   const { container } = render(<CWidgetStatsD />)
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx
index ae041e76..f2a7a196 100644
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx
+++ b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CWidgetStatsE } from '../../../index'
+import { CWidgetStatsE } from '../index'
 
 test('loads and displays CWidgetStatsE component', async () => {
   const { container } = render(<CWidgetStatsE />)
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx
index ac828b8f..d9a00098 100644
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx
+++ b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CWidgetStatsF } from '../../../index'
+import { CWidgetStatsF } from '../index'
 
 test('loads and displays CWidgetStatsF component', async () => {
   const { container } = render(<CWidgetStatsF />)
diff --git a/packages/coreui-react/src/hooks/index.ts b/packages/coreui-react/src/hooks/index.ts
index 5ee1b5e3..701225e6 100644
--- a/packages/coreui-react/src/hooks/index.ts
+++ b/packages/coreui-react/src/hooks/index.ts
@@ -1,5 +1,6 @@
+import { useClipboard } from './useClipboard'
 import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
 import { usePopper } from './usePopper'
 
-export { useColorModes, useForkedRef, usePopper }
+export { useClipboard, useColorModes, useForkedRef, usePopper }
diff --git a/packages/coreui-react/src/hooks/useClipboard.ts b/packages/coreui-react/src/hooks/useClipboard.ts
new file mode 100644
index 00000000..0b6ad7a2
--- /dev/null
+++ b/packages/coreui-react/src/hooks/useClipboard.ts
@@ -0,0 +1,38 @@
+import { useState, useCallback } from 'react'
+
+/**
+ * useClipboard Hook
+ *
+ * Provides functionality to copy text to the clipboard and track the copy status.
+ *
+ * @returns An object containing the copy function, copy status, and any error encountered.
+ */
+export const useClipboard = () => {
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  /**
+   * Copies the provided text to the clipboard.
+   *
+   * @param text - The text to be copied to the clipboard.
+   */
+  const copy = useCallback(async (text: string) => {
+    if (!navigator?.clipboard) {
+      setError(new Error('Clipboard API is not available'))
+      return
+    }
+
+    try {
+      await navigator.clipboard.writeText(text)
+      setIsCopied(true)
+      setError(null)
+      // Reset the isCopied state after 2 seconds
+      setTimeout(() => setIsCopied(false), 2000)
+    } catch (_error) {
+      setError(_error as Error)
+      setIsCopied(false)
+    }
+  }, [])
+
+  return { copy, isCopied, error }
+}
diff --git a/packages/coreui-react/src/hooks/usePopper.ts b/packages/coreui-react/src/hooks/usePopper.ts
index 26815ca3..69830552 100644
--- a/packages/coreui-react/src/hooks/usePopper.ts
+++ b/packages/coreui-react/src/hooks/usePopper.ts
@@ -10,8 +10,8 @@ interface UsePopperOutput {
 }
 
 export const usePopper = (): UsePopperOutput => {
-  const _popper = useRef<Instance>()
-  const el = useRef<HTMLElement>()
+  const _popper = useRef<Instance>(undefined)
+  const el = useRef<HTMLElement>(null)
 
   const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
     _popper.current = createPopper(reference, popper, options)
diff --git a/packages/coreui-react/src/utils/index.ts b/packages/coreui-react/src/utils/index.ts
index bcdb558e..9d965598 100644
--- a/packages/coreui-react/src/utils/index.ts
+++ b/packages/coreui-react/src/utils/index.ts
@@ -4,6 +4,7 @@ import getRTLPlacement from './getRTLPlacement'
 import getTransitionDurationFromElement from './getTransitionDurationFromElement'
 import isInViewport from './isInViewport'
 import isRTL from './isRTL'
+import mergeClassNames from './mergeClassNames'
 
 export {
   executeAfterTransition,
@@ -12,4 +13,5 @@ export {
   getTransitionDurationFromElement,
   isInViewport,
   isRTL,
+  mergeClassNames,
 }
diff --git a/packages/coreui-react/src/utils/mergeClassNames.ts b/packages/coreui-react/src/utils/mergeClassNames.ts
new file mode 100644
index 00000000..e2013440
--- /dev/null
+++ b/packages/coreui-react/src/utils/mergeClassNames.ts
@@ -0,0 +1,25 @@
+const mergeClassNames = <T extends object>(
+  defaultClassNames: T,
+  customClassNames?: Partial<T>,
+): T => {
+  if (customClassNames === undefined || typeof customClassNames !== 'object') {
+    return defaultClassNames
+  }
+
+  const classNames: T = { ...defaultClassNames }
+
+  for (const key in customClassNames) {
+    if (customClassNames.hasOwnProperty(key)) {
+      const typedKey = key as keyof T
+      const customClassName = customClassNames[typedKey]?.toString()
+
+      classNames[typedKey] = customClassName?.startsWith('!')
+        ? (customClassName.slice(1).trim() as T[keyof T])
+        : (`${classNames[typedKey]} ${customClassName}`.trim() as T[keyof T])
+    }
+  }
+
+  return classNames
+}
+
+export default mergeClassNames
diff --git a/packages/docs/build/api.mjs b/packages/docs/build/api.mjs
index 7d92602e..5ce20f3c 100644
--- a/packages/docs/build/api.mjs
+++ b/packages/docs/build/api.mjs
@@ -3,129 +3,364 @@
 'use strict'
 
 import { globby } from 'globby'
-import { writeFile } from 'node:fs/promises'
+import { writeFile, mkdir } from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { parse } from 'react-docgen-typescript'
+import showdown from 'showdown'
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
+/**
+ * Derive __dirname in ESM
+ */
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const converter = new showdown.Converter({ simpleLineBreaks: true })
 
-const GLOB = [
+/**
+ * Glob patterns to locate .tsx files for documentation.
+ */
+const GLOB_PATTERNS = [
   '**/src/**/*.tsx',
   '../node_modules/@coreui/icons-react/src/**/*.tsx',
   '../node_modules/@coreui/react-chartjs/src/**/*.tsx',
 ]
+
+/**
+ * Options for globby to control file matching behavior.
+ */
 const GLOBBY_OPTIONS = {
   absolute: true,
   cwd: path.join(__dirname, '..', '..'),
   gitignore: false,
   ignore: ['**/docs/**', '**/__tests__/**'],
 }
-const EXCLUDED_FILES = []
 
-const options = {
-  savePropValueAsString: true,
+/**
+ * Excluded files list (currently unused).
+ */
+const EXCLUDED_FILES = [] // Currently unused, but can be utilized if needed
+
+/**
+ * Options for react-docgen-typescript parser.
+ */
+const DOCGEN_OPTIONS = {
   shouldIncludePropTagMap: true,
 }
 
-const PRO_COMPONENTS = []
+/**
+ * List of pro components that require special handling.
+ */
+const PRO_COMPONENTS = [
+  'CCalendar',
+  'CDatePicker',
+  'CDateRangePicker',
+  'CFormMask',
+  'CLoadingButton',
+  'CMultiSelect',
+  'CRating',
+  'CRangeSlider',
+  'CRating',
+  'CSmartPagination',
+  'CSmartTable',
+  'CTimePicker',
+  'CVirtualScroller',
+]
 
-const replace = (text) =>
-  text
-    .replaceAll('(<', '(\\<')
-    .replace(/<C(.*)\/>/g, '`<C$1/>`')
+/**
+ * Text replacements for certain components.
+ */
+const TEXT_REPLACEMENTS = {
+  CDatePicker: {
+    description: [{ 'React Calendar': 'React Date Picker' }],
+    example: [{ CCalendar: 'CDatePicker' }],
+  },
+  CDateRangePicker: {
+    description: [{ 'React Calendar': 'React Date Range Picker' }],
+    example: [{ CCalendar: 'CDateRangePicker' }],
+  },
+  CFormInput: {
+    example: [{ CFormControlValidation: 'CFormInput' }, { CFormControlWrapper: 'CFormInput' }],
+  },
+  CFormTextarea: {
+    example: [
+      { CFormControlValidation: 'CFormTextarea' },
+      { CFormControlWrapper: 'CFormTextarea' },
+    ],
+  },
+}
+
+/**
+ * Escapes special characters in text to prevent Markdown rendering issues.
+ *
+ * @param {string} text - The text to escape.
+ * @returns {string} - The escaped text.
+ */
+const escapeMarkdown = (text) => {
+  if (typeof text !== 'string') return text
+  return text
+    .replaceAll(/(<)/g, String.raw`\$1`)
     .replaceAll('\n', '<br/>')
+    .replaceAll(/`([^`]+)`/g, '<code>{`$1`}</code>')
+}
+
+/**
+ * Generates the relative filename based on the file path.
+ *
+ * @param {string} file - The absolute file path.
+ * @returns {string} - The relative filename.
+ */
+const getRelativeFilename = (file) => {
+  let relativePath = file.includes('node_modules')
+    ? file.split('node_modules/@coreui/')[1]
+    : path.relative(GLOBBY_OPTIONS.cwd, file).replace('coreui-', '')
 
-async function createMdx(file, filename, name, props) {
-  if (typeof props === 'undefined') {
-    return
+  // Remove '-pro' from the filename if not a pro component
+  const isPro = PRO_COMPONENTS.some((component) => file.includes(component))
+  if (!isPro) {
+    relativePath = relativePath.replace('-pro', '')
   }
 
-  const pro = PRO_COMPONENTS.some((v) => file.includes(v))
-  let relativeFilename
-  if (file.includes('node_modules')) {
-    relativeFilename = file.replace(path.join(file, '..', '..', '..'), '').replace('coreui-', '')
-  } else {
-    relativeFilename = file.replace(GLOBBY_OPTIONS.cwd, '').replace('coreui-', '')
+  return relativePath
+}
+
+/**
+ * Splits the input string by the '|' character, but only when the '|' is outside of any curly braces {} and parentheses ().
+ *
+ * @param {string} input - The string to be split.
+ * @returns {string[]} An array of split parts, trimmed of whitespace.
+ * @throws {Error} Throws an error if there are unmatched braces or parentheses in the input.
+ */
+const splitOutsideBracesAndParentheses = (input) => {
+  if (input.endsWith('...')) {
+    return [input]
+  }
+
+  const parts = []
+  let currentPart = ''
+  let braceDepth = 0
+  let parenthesisDepth = 0
+
+  for (const char of input) {
+    switch (char) {
+      case '{': {
+        braceDepth++
+        break
+      }
+      case '}': {
+        braceDepth--
+        if (braceDepth < 0) {
+          throw new Error('Unmatched closing curly brace detected.')
+        }
+        break
+      }
+      case '(': {
+        parenthesisDepth++
+        break
+      }
+      case ')': {
+        parenthesisDepth--
+        if (parenthesisDepth < 0) {
+          throw new Error('Unmatched closing parenthesis detected.')
+        }
+        break
+      }
+      case '|': {
+        // Split only if not inside any braces or parentheses
+        if (braceDepth === 0 && parenthesisDepth === 0 && currentPart.trim()) {
+          parts.push(currentPart.trim())
+          currentPart = ''
+          continue
+        }
+        break
+      }
+      default: {
+        break
+      }
+    }
+    currentPart += char
+  }
+
+  if (braceDepth !== 0) {
+    throw new Error('Unmatched opening curly brace detected.')
+  }
+  if (parenthesisDepth !== 0) {
+    throw new Error('Unmatched opening parenthesis detected.')
+  }
+
+  if (currentPart.trim()) {
+    parts.push(currentPart.trim())
   }
 
-  if (!pro) {
-    relativeFilename = relativeFilename.replace('-pro', '')
+  return parts
+}
+
+/**
+ * Replaces specified text within component documentation.
+ *
+ * @param {string} componenName - The name of the component.
+ * @param {string} keyName - The key of the text replacement (e.g., 'description', 'example').
+ * @param {string} text - The text to be replaced.
+ * @returns {string} The replaced text.
+ */
+const replaceText = (componenName, keyName, text) => {
+  const keyNames = Object.keys(TEXT_REPLACEMENTS)
+
+  if (keyNames.includes(componenName) && TEXT_REPLACEMENTS[componenName][keyName]) {
+    const replacements = TEXT_REPLACEMENTS[componenName][keyName]
+    for (const replacement of replacements) {
+      for (const [key, value] of Object.entries(replacement)) {
+        if (text && key && value) {
+          return text.replaceAll(key, value)
+        }
+      }
+    }
+  } else {
+    return text
   }
+}
+
+/**
+ * Creates an MDX file with the component's API documentation.
+ *
+ * @param {string} file - The absolute path to the component file.
+ * @param {object} component - The component info extracted by react-docgen-typescript.
+ */
+const createMdx = async (file, component) => {
+  if (!component) return
 
-  let content = `\n`
-  content += `\`\`\`jsx\n`
-  content += `import { ${name} } from '@coreui/${relativeFilename.split('/')[1]}'\n`
+  const filename = path.basename(file, '.tsx')
+  const relativeFilename = getRelativeFilename(file)
+
+  let content = `\n\`\`\`jsx\n`
+  const importPathParts = relativeFilename.split('/')
+  if (importPathParts.length > 1) {
+    content += `import { ${component.displayName} } from '@coreui/${importPathParts[0]}'\n`
+  }
   content += `// or\n`
-  content += `import ${name} from '@coreui${relativeFilename.replace('.tsx', '')}'\n`
+  content += `import ${component.displayName} from '@coreui/${relativeFilename.replace('.tsx', '')}'\n`
   content += `\`\`\`\n\n`
 
-  let index = 0
-  for (const [key, value] of Object.entries(props).sort()) {
-    if (
-      value.parent.fileName.includes('@types/react/index.d.ts') ||
-      value.parent.fileName.includes('@types/react/ts5.0/index.d.ts')
-    ) {
-      continue
+  const filteredProps = Object.entries(component.props)
+    .filter(([_, value]) => {
+      if (!value.parent?.fileName) return true
+      return (
+        !value.parent.fileName.includes('@types/react/index.d.ts') &&
+        !value.parent.fileName.includes('@types/react/ts5.0/index.d.ts')
+      )
+    })
+    .sort(([a], [b]) => a.localeCompare(b))
+
+  for (const [index, [propName, propInfo]] of filteredProps.entries()) {
+    if (index === 0) {
+      content += `<div className="table-responsive table-api border rounded mb-3">\n`
+      content += `  <table className="table">\n`
+      content += `    <thead>\n`
+      content += `      <tr>\n`
+      content += `        <th>Property</th>\n`
+      content += `        <th>Default</th>\n`
+      content += `        <th>Type</th>\n`
+      content += `      </tr>\n`
+      content += `    </thead>\n`
+      content += `    <tbody>\n`
     }
 
-    if (value.tags.ignore === '') {
+    // Skip props marked to be ignored
+    if (propInfo.tags?.ignore === '') {
       continue
     }
 
-    if (index === 0) {
-      content += `| Property | Description | Type | Default |\n`
-      content += `| --- | --- | --- | --- |\n`
-    }
-    let name = value.name || ''
-    const since = value.tags.since ? ` **_${value.tags.since}+_**` : ''
-    const deprecated = value.tags.deprecated ? ` **_Deprecated ${value.tags.deprecated}+_**` : ''
-    const description = value.description || '-'
-    const type = value.type
-      ? value.type.name.includes('ReactElement')
-        ? 'ReactElement'
-        : value.type.name
+    const displayName = propInfo.name || ''
+    const since = propInfo.tags?.since
+      ? `<span className="badge bg-success">${propInfo.tags.since}+</span>`
       : ''
-    const defaultValue = value.defaultValue
-      ? value.defaultValue.value.replace('undefined', '-')
+    const deprecated = propInfo.tags?.deprecated
+      ? `<span className="badge bg-danger">Deprecated ${propInfo.tags.deprecated}</span>`
+      : ''
+    const description = propInfo.description
+      ? replaceText(component.displayName, 'description', propInfo.description)
       : '-'
-    const types = []
-    type.split(' | ').map((element) => {
-      types.push(`\`${element.replace(/"/g, "'")}\``)
-    })
+    const type = propInfo.type
+      ? propInfo.type.name.includes('ReactElement')
+        ? 'ReactElement'
+        : propInfo.type.name
+      : ''
+    const defaultValue = propInfo.defaultValue ? `\`${propInfo.defaultValue.value}\`` : '-'
+    const example = propInfo.tags?.example
+      ? replaceText(component.displayName, 'example', propInfo.tags.example)
+      : false
+
+    // Format types as inline code
+    const types = splitOutsideBracesAndParentheses(type)
+      .map((_type) => `\`${_type.trim().replaceAll('"', "'")}\``)
+      .join(', ')
+
+    const id = `${component.displayName.toLowerCase()}-${propName.replaceAll(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`
+    const anchor = `<a href="#${id}" aria-label="${component.displayName} ${displayName} permalink" className="anchor-link after">#</a>`
+
+    content += `      <tr id="${id}">\n`
+    content += `        <td className="text-primary fw-semibold">${displayName}${anchor}${since}${deprecated}</td>\n`
+    content += `        <td>${escapeMarkdown(defaultValue)}</td>\n`
+    content += `        <td>${escapeMarkdown(types)}</td>\n`
+    content += `      </tr>\n`
+    content += `      <tr>\n`
+    content += `        <td colSpan="3">\n`
+    content += `          ${converter
+      .makeHtml(description)
+      .replaceAll(/<code>(.*?)<\/code>/g, '<code>{`$1`}</code>')
+      .replaceAll(/<code>{`&lt;(.*?)&gt;`}<\/code>/g, '<code>{`<$1>`}</code>')}\n`
 
-    content += `| **${name}**${since}${deprecated} | ${replace(description)} | ${types.join(
-      ' \\| ',
-    )} | ${replace(defaultValue)} |\n`
-    index++
+    if (example) {
+      content += `        <JSXDocs code={\`${example.trim()}\`} />\n`
+    }
+
+    content += `        </td>\n`
+    content += `      </tr>\n`
   }
 
-  await writeFile(`content/api/${filename}.api.mdx`, content, {
-    encoding: 'utf8',
-  }).then(() => {
+  content += `    </tbody>\n`
+  content += `  </table>\n`
+  content += `</div>\n`
+
+  const outputDir = path.join('content', 'api')
+  const outputPath = path.join(outputDir, `${filename}.api.mdx`)
+
+  try {
+    await mkdir(outputDir, { recursive: true })
+    await writeFile(outputPath, content, { encoding: 'utf8' })
     console.log(`File created: ${filename}.api.mdx`)
-  })
+  } catch (error) {
+    console.error(`Failed to write file ${outputPath}:`, error)
+  }
 }
 
-async function main() {
+/**
+ * Main execution function.
+ */
+const main = async () => {
   try {
-    const files = await globby(GLOB, GLOBBY_OPTIONS, EXCLUDED_FILES)
-
-    await Promise.all(
-      files.map((file) => {
-        console.log(file)
-        // const props = docgen.parse(file, options)
-        const props = parse(file, options)
-        if (props && typeof props[0] !== 'undefined') {
-          const filename = path.basename(file, '.tsx')
-          createMdx(file, filename, props[0].displayName, props[0].props)
+    const files = await globby(GLOB_PATTERNS, GLOBBY_OPTIONS)
+
+    for (const file of files) {
+      console.log(`Processing file: ${file}`)
+      let components
+      try {
+        components = parse(file, DOCGEN_OPTIONS)
+      } catch (parseError) {
+        console.error(`Failed to parse ${file}:`, parseError)
+        continue // Skip to the next file
+      }
+
+      if (components && components.length > 0) {
+        for (const component of components) {
+          await createMdx(file, component) // Sequentially create MDX files
         }
-      }),
-    )
+      }
+    }
   } catch (error) {
-    console.error(error)
+    console.error('An error occurred:', error)
     process.exit(1)
   }
 }
 
+// Execute the main function
 main()
diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx
index 0a27911d..296cb12a 100644
--- a/packages/docs/content/api/CAccordion.api.mdx
+++ b/packages/docs/content/api/CAccordion.api.mdx
@@ -5,9 +5,56 @@ import { CAccordion } from '@coreui/react'
 import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **activeItemKey** | The active item key. | `string` \| `number` | - |
-| **alwaysOpen** | Make accordion items stay open when another item is opened | `boolean` | false |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **flush** | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="caccordion-active-item-key">
+        <td className="text-primary fw-semibold">activeItemKey<a href="#caccordion-active-item-key" aria-label="CAccordion activeItemKey permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The active item key.</p>
+        </td>
+      </tr>
+      <tr id="caccordion-always-open">
+        <td className="text-primary fw-semibold">alwaysOpen<a href="#caccordion-always-open" aria-label="CAccordion alwaysOpen permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Make accordion items stay open when another item is opened</p>
+        </td>
+      </tr>
+      <tr id="caccordion-class-name">
+        <td className="text-primary fw-semibold">className<a href="#caccordion-class-name" aria-label="CAccordion className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="caccordion-flush">
+        <td className="text-primary fw-semibold">flush<a href="#caccordion-flush" aria-label="CAccordion flush permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx
index 9665e4d0..fa507a2f 100644
--- a/packages/docs/content/api/CAccordionBody.api.mdx
+++ b/packages/docs/content/api/CAccordionBody.api.mdx
@@ -5,6 +5,26 @@ import { CAccordionBody } from '@coreui/react'
 import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBody'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="caccordionbody-class-name">
+        <td className="text-primary fw-semibold">className<a href="#caccordionbody-class-name" aria-label="CAccordionBody className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx
index 885e6448..67fb1438 100644
--- a/packages/docs/content/api/CAccordionButton.api.mdx
+++ b/packages/docs/content/api/CAccordionButton.api.mdx
@@ -5,6 +5,26 @@ import { CAccordionButton } from '@coreui/react'
 import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionButton'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="caccordionbutton-class-name">
+        <td className="text-primary fw-semibold">className<a href="#caccordionbutton-class-name" aria-label="CAccordionButton className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx
index ac19753c..e3ea183f 100644
--- a/packages/docs/content/api/CAccordionHeader.api.mdx
+++ b/packages/docs/content/api/CAccordionHeader.api.mdx
@@ -5,6 +5,26 @@ import { CAccordionHeader } from '@coreui/react'
 import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionHeader'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="caccordionheader-class-name">
+        <td className="text-primary fw-semibold">className<a href="#caccordionheader-class-name" aria-label="CAccordionHeader className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx
index 5ef85d86..8691cb6b 100644
--- a/packages/docs/content/api/CAccordionItem.api.mdx
+++ b/packages/docs/content/api/CAccordionItem.api.mdx
@@ -5,7 +5,46 @@ import { CAccordionItem } from '@coreui/react'
 import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionItem'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **itemKey** | Item key. | `string` \| `number` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="caccordionitem-class-name">
+        <td className="text-primary fw-semibold">className<a href="#caccordionitem-class-name" aria-label="CAccordionItem className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="caccordionitem-id">
+        <td className="text-primary fw-semibold">id<a href="#caccordionitem-id" aria-label="CAccordionItem id permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The id global attribute defines an identifier (ID) that must be unique in the whole document.</p>
+        </td>
+      </tr>
+      <tr id="caccordionitem-item-key">
+        <td className="text-primary fw-semibold">itemKey<a href="#caccordionitem-item-key" aria-label="CAccordionItem itemKey permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Item key.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx
index f2ed443c..3fc61b0f 100644
--- a/packages/docs/content/api/CAlert.api.mdx
+++ b/packages/docs/content/api/CAlert.api.mdx
@@ -5,11 +5,76 @@ import { CAlert } from '@coreui/react'
 import CAlert from '@coreui/react/src/components/alert/CAlert'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | primary |
-| **dismissible** | Optionally add a close button to alert and allow it to self dismiss. | `boolean` | - |
-| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - |
-| **variant** | Set the alert variant to a solid. | `string` | - |
-| **visible** | Toggle the visibility of component. | `boolean` | true |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="calert-class-name">
+        <td className="text-primary fw-semibold">className<a href="#calert-class-name" aria-label="CAlert className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="calert-color">
+        <td className="text-primary fw-semibold">color<a href="#calert-color" aria-label="CAlert color permalink" className="anchor-link after">#</a></td>
+        <td><code>{`primary`}</code></td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="calert-dismissible">
+        <td className="text-primary fw-semibold">dismissible<a href="#calert-dismissible" aria-label="CAlert dismissible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Optionally add a close button to alert and allow it to self dismiss.</p>
+        </td>
+      </tr>
+      <tr id="calert-on-close">
+        <td className="text-primary fw-semibold">onClose<a href="#calert-on-close" aria-label="CAlert onClose permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be closed.</p>
+        </td>
+      </tr>
+      <tr id="calert-variant">
+        <td className="text-primary fw-semibold">variant<a href="#calert-variant" aria-label="CAlert variant permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the alert variant to a solid.</p>
+        </td>
+      </tr>
+      <tr id="calert-visible">
+        <td className="text-primary fw-semibold">visible<a href="#calert-visible" aria-label="CAlert visible permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx
index 25150dea..c0a7e697 100644
--- a/packages/docs/content/api/CAlertHeading.api.mdx
+++ b/packages/docs/content/api/CAlertHeading.api.mdx
@@ -5,7 +5,36 @@ import { CAlertHeading } from '@coreui/react'
 import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h4')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="calertheading-as">
+        <td className="text-primary fw-semibold">as<a href="#calertheading-as" aria-label="CAlertHeading as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h4')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="calertheading-class-name">
+        <td className="text-primary fw-semibold">className<a href="#calertheading-class-name" aria-label="CAlertHeading className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx
index 027b3254..8130ef08 100644
--- a/packages/docs/content/api/CAlertLink.api.mdx
+++ b/packages/docs/content/api/CAlertLink.api.mdx
@@ -5,6 +5,26 @@ import { CAlertLink } from '@coreui/react'
 import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="calertlink-class-name">
+        <td className="text-primary fw-semibold">className<a href="#calertlink-class-name" aria-label="CAlertLink className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx
index 5e6f6399..3b2746fb 100644
--- a/packages/docs/content/api/CAvatar.api.mdx
+++ b/packages/docs/content/api/CAvatar.api.mdx
@@ -5,12 +5,86 @@ import { CAvatar } from '@coreui/react'
 import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
-| **size** | Size the component small, large, or extra large. | `string` | - |
-| **src** | The src attribute for the img element. | `string` | - |
-| **status** | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cavatar-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cavatar-class-name" aria-label="CAvatar className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cavatar-color">
+        <td className="text-primary fw-semibold">color<a href="#cavatar-color" aria-label="CAvatar color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cavatar-shape">
+        <td className="text-primary fw-semibold">shape<a href="#cavatar-shape" aria-label="CAvatar shape permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Select the shape of the component.</p>
+        </td>
+      </tr>
+      <tr id="cavatar-size">
+        <td className="text-primary fw-semibold">size<a href="#cavatar-size" aria-label="CAvatar size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small, large, or extra large.</p>
+        </td>
+      </tr>
+      <tr id="cavatar-src">
+        <td className="text-primary fw-semibold">src<a href="#cavatar-src" aria-label="CAvatar src permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The src attribute for the img element.</p>
+        </td>
+      </tr>
+      <tr id="cavatar-status">
+        <td className="text-primary fw-semibold">status<a href="#cavatar-status" aria-label="CAvatar status permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the status indicator to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cavatar-text-color">
+        <td className="text-primary fw-semibold">textColor<a href="#cavatar-text-color" aria-label="CAvatar textColor permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the text color of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx
index 0e202b4e..570bae5a 100644
--- a/packages/docs/content/api/CBackdrop.api.mdx
+++ b/packages/docs/content/api/CBackdrop.api.mdx
@@ -5,7 +5,36 @@ import { CBackdrop } from '@coreui/react'
 import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | modal-backdrop |
-| **visible** | Toggle the visibility of modal component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cbackdrop-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cbackdrop-class-name" aria-label="CBackdrop className permalink" className="anchor-link after">#</a></td>
+        <td><code>{`modal-backdrop`}</code></td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cbackdrop-visible">
+        <td className="text-primary fw-semibold">visible<a href="#cbackdrop-visible" aria-label="CBackdrop visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of modal component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx
index b8231272..3db91f39 100644
--- a/packages/docs/content/api/CBadge.api.mdx
+++ b/packages/docs/content/api/CBadge.api.mdx
@@ -5,13 +5,96 @@ import { CBadge } from '@coreui/react'
 import CBadge from '@coreui/react/src/components/badge/CBadge'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **position** | Position badge in one of the corners of a link or button. | `'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'` | - |
-| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
-| **size** | Size the component small. | `'sm'` | - |
-| **textBgColor** **_5.0.0+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cbadge-as">
+        <td className="text-primary fw-semibold">as<a href="#cbadge-as" aria-label="CBadge as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'span')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cbadge-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cbadge-class-name" aria-label="CBadge className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cbadge-color">
+        <td className="text-primary fw-semibold">color<a href="#cbadge-color" aria-label="CBadge color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cbadge-position">
+        <td className="text-primary fw-semibold">position<a href="#cbadge-position" aria-label="CBadge position permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'top-start'`}</code>, <code>{`'top-end'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`'bottom-start'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Position badge in one of the corners of a link or button.</p>
+        </td>
+      </tr>
+      <tr id="cbadge-shape">
+        <td className="text-primary fw-semibold">shape<a href="#cbadge-shape" aria-label="CBadge shape permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Select the shape of the component.</p>
+        </td>
+      </tr>
+      <tr id="cbadge-size">
+        <td className="text-primary fw-semibold">size<a href="#cbadge-size" aria-label="CBadge size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small.</p>
+        </td>
+      </tr>
+      <tr id="cbadge-text-bg-color">
+        <td className="text-primary fw-semibold">textBgColor<a href="#cbadge-text-bg-color" aria-label="CBadge textBgColor permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</p>
+        </td>
+      </tr>
+      <tr id="cbadge-text-color">
+        <td className="text-primary fw-semibold">textColor<a href="#cbadge-text-color" aria-label="CBadge textColor permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the text color of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx
index 51e20bf3..e423b7c4 100644
--- a/packages/docs/content/api/CBreadcrumb.api.mdx
+++ b/packages/docs/content/api/CBreadcrumb.api.mdx
@@ -5,6 +5,26 @@ import { CBreadcrumb } from '@coreui/react'
 import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cbreadcrumb-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cbreadcrumb-class-name" aria-label="CBreadcrumb className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx
index e3b91512..1a6c186f 100644
--- a/packages/docs/content/api/CBreadcrumbItem.api.mdx
+++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx
@@ -5,9 +5,56 @@ import { CBreadcrumbItem } from '@coreui/react'
 import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumbItem'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** **_5.4.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **href** | The `href` attribute for the inner `<CLink>` component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cbreadcrumbitem-active">
+        <td className="text-primary fw-semibold">active<a href="#cbreadcrumbitem-active" aria-label="CBreadcrumbItem active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cbreadcrumbitem-as">
+        <td className="text-primary fw-semibold">as<a href="#cbreadcrumbitem-as" aria-label="CBreadcrumbItem as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.4.0+</span></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cbreadcrumbitem-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cbreadcrumbitem-class-name" aria-label="CBreadcrumbItem className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cbreadcrumbitem-href">
+        <td className="text-primary fw-semibold">href<a href="#cbreadcrumbitem-href" aria-label="CBreadcrumbItem href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The <code>{`href`}</code> attribute for the inner <code>{`<CLink>`}</code> component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx
index 68209926..47140b1a 100644
--- a/packages/docs/content/api/CButton.api.mdx
+++ b/packages/docs/content/api/CButton.api.mdx
@@ -5,16 +5,127 @@ import { CButton } from '@coreui/react'
 import CButton from '@coreui/react/src/components/button/CButton'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'button')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | button |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
-| **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - |
-| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
-| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
-| **type** | Specifies the type of button. Always specify the type attribute for the `<button>` element.<br/>Different browsers may use different default types for the `<button>` element. | `'button'` \| `'submit'` \| `'reset'` | button |
-| **variant** | Set the button variant to an outlined button or a ghost button. | `'outline'` \| `'ghost'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cbutton-active">
+        <td className="text-primary fw-semibold">active<a href="#cbutton-active" aria-label="CButton active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-as">
+        <td className="text-primary fw-semibold">as<a href="#cbutton-as" aria-label="CButton as permalink" className="anchor-link after">#</a></td>
+        <td><code>{`button`}</code></td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'button')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cbutton-class-name" aria-label="CButton className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-color">
+        <td className="text-primary fw-semibold">color<a href="#cbutton-color" aria-label="CButton color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cbutton-disabled" aria-label="CButton disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-href">
+        <td className="text-primary fw-semibold">href<a href="#cbutton-href" aria-label="CButton href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-role">
+        <td className="text-primary fw-semibold">role<a href="#cbutton-role" aria-label="CButton role permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-shape">
+        <td className="text-primary fw-semibold">shape<a href="#cbutton-shape" aria-label="CButton shape permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Select the shape of the component.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-size">
+        <td className="text-primary fw-semibold">size<a href="#cbutton-size" aria-label="CButton size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-type">
+        <td className="text-primary fw-semibold">type<a href="#cbutton-type" aria-label="CButton type permalink" className="anchor-link after">#</a></td>
+        <td><code>{`button`}</code></td>
+        <td><code>{`'button'`}</code>, <code>{`'submit'`}</code>, <code>{`'reset'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the type of button. Always specify the type attribute for the <code>{`<button>`}</code> element.<br />
+Different browsers may use different default types for the <code>{`<button>`}</code> element.</p>
+        </td>
+      </tr>
+      <tr id="cbutton-variant">
+        <td className="text-primary fw-semibold">variant<a href="#cbutton-variant" aria-label="CButton variant permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'outline'`}</code>, <code>{`'ghost'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the button variant to an outlined button or a ghost button.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CButtonGroup.api.mdx b/packages/docs/content/api/CButtonGroup.api.mdx
index 6b5018ff..fa96bcc3 100644
--- a/packages/docs/content/api/CButtonGroup.api.mdx
+++ b/packages/docs/content/api/CButtonGroup.api.mdx
@@ -5,8 +5,46 @@ import { CButtonGroup } from '@coreui/react'
 import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
-| **vertical** | Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cbuttongroup-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cbuttongroup-class-name" aria-label="CButtonGroup className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cbuttongroup-size">
+        <td className="text-primary fw-semibold">size<a href="#cbuttongroup-size" aria-label="CButtonGroup size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
+      </tr>
+      <tr id="cbuttongroup-vertical">
+        <td className="text-primary fw-semibold">vertical<a href="#cbuttongroup-vertical" aria-label="CButtonGroup vertical permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CButtonToolbar.api.mdx b/packages/docs/content/api/CButtonToolbar.api.mdx
index ecaca63e..2bfb6c0d 100644
--- a/packages/docs/content/api/CButtonToolbar.api.mdx
+++ b/packages/docs/content/api/CButtonToolbar.api.mdx
@@ -5,6 +5,26 @@ import { CButtonToolbar } from '@coreui/react'
 import CButtonToolbar from '@coreui/react/src/components/button-group/CButtonToolbar'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cbuttontoolbar-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cbuttontoolbar-class-name" aria-label="CButtonToolbar className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCallout.api.mdx b/packages/docs/content/api/CCallout.api.mdx
index c76930c5..63e8222e 100644
--- a/packages/docs/content/api/CCallout.api.mdx
+++ b/packages/docs/content/api/CCallout.api.mdx
@@ -5,7 +5,36 @@ import { CCallout } from '@coreui/react'
 import CCallout from '@coreui/react/src/components/callout/CCallout'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccallout-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccallout-class-name" aria-label="CCallout className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccallout-color">
+        <td className="text-primary fw-semibold">color<a href="#ccallout-color" aria-label="CCallout color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCard.api.mdx b/packages/docs/content/api/CCard.api.mdx
index ea056e72..3f342cc4 100644
--- a/packages/docs/content/api/CCard.api.mdx
+++ b/packages/docs/content/api/CCard.api.mdx
@@ -5,9 +5,56 @@ import { CCard } from '@coreui/react'
 import CCard from '@coreui/react/src/components/card/CCard'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **textBgColor** **_5.0.0+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **textColor** | Sets the text color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccard-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccard-class-name" aria-label="CCard className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccard-color">
+        <td className="text-primary fw-semibold">color<a href="#ccard-color" aria-label="CCard color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="ccard-text-bg-color">
+        <td className="text-primary fw-semibold">textBgColor<a href="#ccard-text-bg-color" aria-label="CCard textBgColor permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</p>
+        </td>
+      </tr>
+      <tr id="ccard-text-color">
+        <td className="text-primary fw-semibold">textColor<a href="#ccard-text-color" aria-label="CCard textColor permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the text color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardBody.api.mdx b/packages/docs/content/api/CCardBody.api.mdx
index 88022993..c5c0ee2d 100644
--- a/packages/docs/content/api/CCardBody.api.mdx
+++ b/packages/docs/content/api/CCardBody.api.mdx
@@ -5,6 +5,26 @@ import { CCardBody } from '@coreui/react'
 import CCardBody from '@coreui/react/src/components/card/CCardBody'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardbody-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardbody-class-name" aria-label="CCardBody className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardFooter.api.mdx b/packages/docs/content/api/CCardFooter.api.mdx
index 184f37ee..8a1b7124 100644
--- a/packages/docs/content/api/CCardFooter.api.mdx
+++ b/packages/docs/content/api/CCardFooter.api.mdx
@@ -5,6 +5,26 @@ import { CCardFooter } from '@coreui/react'
 import CCardFooter from '@coreui/react/src/components/card/CCardFooter'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardfooter-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardfooter-class-name" aria-label="CCardFooter className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardGroup.api.mdx b/packages/docs/content/api/CCardGroup.api.mdx
index 359d7032..9c71e8cb 100644
--- a/packages/docs/content/api/CCardGroup.api.mdx
+++ b/packages/docs/content/api/CCardGroup.api.mdx
@@ -5,6 +5,26 @@ import { CCardGroup } from '@coreui/react'
 import CCardGroup from '@coreui/react/src/components/card/CCardGroup'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardgroup-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardgroup-class-name" aria-label="CCardGroup className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardHeader.api.mdx b/packages/docs/content/api/CCardHeader.api.mdx
index 6b860868..4941a94d 100644
--- a/packages/docs/content/api/CCardHeader.api.mdx
+++ b/packages/docs/content/api/CCardHeader.api.mdx
@@ -5,7 +5,36 @@ import { CCardHeader } from '@coreui/react'
 import CCardHeader from '@coreui/react/src/components/card/CCardHeader'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardheader-as">
+        <td className="text-primary fw-semibold">as<a href="#ccardheader-as" aria-label="CCardHeader as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="ccardheader-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardheader-class-name" aria-label="CCardHeader className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardImage.api.mdx b/packages/docs/content/api/CCardImage.api.mdx
index beb4d840..5694d515 100644
--- a/packages/docs/content/api/CCardImage.api.mdx
+++ b/packages/docs/content/api/CCardImage.api.mdx
@@ -5,8 +5,46 @@ import { CCardImage } from '@coreui/react'
 import CCardImage from '@coreui/react/src/components/card/CCardImage'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'img')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **orientation** | Optionally orientate the image to the top, bottom, or make it overlaid across the card. | `'top'` \| `'bottom'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardimage-as">
+        <td className="text-primary fw-semibold">as<a href="#ccardimage-as" aria-label="CCardImage as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'img')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="ccardimage-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardimage-class-name" aria-label="CCardImage className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccardimage-orientation">
+        <td className="text-primary fw-semibold">orientation<a href="#ccardimage-orientation" aria-label="CCardImage orientation permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'top'`}</code>, <code>{`'bottom'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Optionally orientate the image to the top, bottom, or make it overlaid across the card.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardImageOverlay.api.mdx b/packages/docs/content/api/CCardImageOverlay.api.mdx
index 4716925b..779ea0b9 100644
--- a/packages/docs/content/api/CCardImageOverlay.api.mdx
+++ b/packages/docs/content/api/CCardImageOverlay.api.mdx
@@ -5,6 +5,26 @@ import { CCardImageOverlay } from '@coreui/react'
 import CCardImageOverlay from '@coreui/react/src/components/card/CCardImageOverlay'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardimageoverlay-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardimageoverlay-class-name" aria-label="CCardImageOverlay className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardLink.api.mdx b/packages/docs/content/api/CCardLink.api.mdx
index 609a003d..38164730 100644
--- a/packages/docs/content/api/CCardLink.api.mdx
+++ b/packages/docs/content/api/CCardLink.api.mdx
@@ -5,7 +5,36 @@ import { CCardLink } from '@coreui/react'
 import CCardLink from '@coreui/react/src/components/card/CCardLink'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardlink-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardlink-class-name" aria-label="CCardLink className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccardlink-href">
+        <td className="text-primary fw-semibold">href<a href="#ccardlink-href" aria-label="CCardLink href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardSubtitle.api.mdx b/packages/docs/content/api/CCardSubtitle.api.mdx
index 0abb9a3c..9c49fea5 100644
--- a/packages/docs/content/api/CCardSubtitle.api.mdx
+++ b/packages/docs/content/api/CCardSubtitle.api.mdx
@@ -5,7 +5,36 @@ import { CCardSubtitle } from '@coreui/react'
 import CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardsubtitle-as">
+        <td className="text-primary fw-semibold">as<a href="#ccardsubtitle-as" aria-label="CCardSubtitle as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h6')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="ccardsubtitle-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardsubtitle-class-name" aria-label="CCardSubtitle className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardText.api.mdx b/packages/docs/content/api/CCardText.api.mdx
index da5e9199..ff4ff0d6 100644
--- a/packages/docs/content/api/CCardText.api.mdx
+++ b/packages/docs/content/api/CCardText.api.mdx
@@ -5,7 +5,36 @@ import { CCardText } from '@coreui/react'
 import CCardText from '@coreui/react/src/components/card/CCardText'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'p')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardtext-as">
+        <td className="text-primary fw-semibold">as<a href="#ccardtext-as" aria-label="CCardText as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'p')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="ccardtext-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardtext-class-name" aria-label="CCardText className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCardTitle.api.mdx b/packages/docs/content/api/CCardTitle.api.mdx
index 718ea102..a05940f4 100644
--- a/packages/docs/content/api/CCardTitle.api.mdx
+++ b/packages/docs/content/api/CCardTitle.api.mdx
@@ -5,7 +5,36 @@ import { CCardTitle } from '@coreui/react'
 import CCardTitle from '@coreui/react/src/components/card/CCardTitle'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccardtitle-as">
+        <td className="text-primary fw-semibold">as<a href="#ccardtitle-as" aria-label="CCardTitle as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h5')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="ccardtitle-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccardtitle-class-name" aria-label="CCardTitle className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCarousel.api.mdx b/packages/docs/content/api/CCarousel.api.mdx
index 6a2f8cdf..067f171a 100644
--- a/packages/docs/content/api/CCarousel.api.mdx
+++ b/packages/docs/content/api/CCarousel.api.mdx
@@ -5,17 +5,136 @@ import { CCarousel } from '@coreui/react'
 import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **activeIndex** | index of the active item. | `number` | 0 |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **controls** | Adding in the previous and next controls. | `boolean` | - |
-| **dark** | Add darker controls, indicators, and captions. | `boolean` | - |
-| **indicators** | Adding indicators at the bottom of the carousel for each item. | `boolean` | - |
-| **interval** | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | `number` \| `boolean` | 5000 |
-| **onSlid** | Callback fired when a slide transition end. | `(active: number, direction: string) => void` | - |
-| **onSlide** | Callback fired when a slide transition starts. | `(active: number, direction: string) => void` | - |
-| **pause** | If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. | `boolean` \| `'hover'` | hover |
-| **touch** **_4.5.0+_** | Set whether the carousel should support left/right swipe interactions on touchscreen devices. | `boolean` | true |
-| **transition** | Set type of the transition. | `'slide'` \| `'crossfade'` | - |
-| **wrap** | Set whether the carousel should cycle continuously or have hard stops. | `boolean` | true |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccarousel-active-index">
+        <td className="text-primary fw-semibold">activeIndex<a href="#ccarousel-active-index" aria-label="CCarousel activeIndex permalink" className="anchor-link after">#</a></td>
+        <td><code>{`0`}</code></td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>index of the active item.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccarousel-class-name" aria-label="CCarousel className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-controls">
+        <td className="text-primary fw-semibold">controls<a href="#ccarousel-controls" aria-label="CCarousel controls permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Adding in the previous and next controls.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-dark">
+        <td className="text-primary fw-semibold">dark<a href="#ccarousel-dark" aria-label="CCarousel dark permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add darker controls, indicators, and captions.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-indicators">
+        <td className="text-primary fw-semibold">indicators<a href="#ccarousel-indicators" aria-label="CCarousel indicators permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Adding indicators at the bottom of the carousel for each item.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-interval">
+        <td className="text-primary fw-semibold">interval<a href="#ccarousel-interval" aria-label="CCarousel interval permalink" className="anchor-link after">#</a></td>
+        <td><code>{`5000`}</code></td>
+        <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-on-slid">
+        <td className="text-primary fw-semibold">onSlid<a href="#ccarousel-on-slid" aria-label="CCarousel onSlid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(active: number, direction: string) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when a slide transition end.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-on-slide">
+        <td className="text-primary fw-semibold">onSlide<a href="#ccarousel-on-slide" aria-label="CCarousel onSlide permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(active: number, direction: string) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when a slide transition starts.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-pause">
+        <td className="text-primary fw-semibold">pause<a href="#ccarousel-pause" aria-label="CCarousel pause permalink" className="anchor-link after">#</a></td>
+        <td><code>{`hover`}</code></td>
+        <td><code>{`boolean`}</code>, <code>{`'hover'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-touch">
+        <td className="text-primary fw-semibold">touch<a href="#ccarousel-touch" aria-label="CCarousel touch permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set whether the carousel should support left/right swipe interactions on touchscreen devices.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-transition">
+        <td className="text-primary fw-semibold">transition<a href="#ccarousel-transition" aria-label="CCarousel transition permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'slide'`}</code>, <code>{`'crossfade'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set type of the transition.</p>
+        </td>
+      </tr>
+      <tr id="ccarousel-wrap">
+        <td className="text-primary fw-semibold">wrap<a href="#ccarousel-wrap" aria-label="CCarousel wrap permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set whether the carousel should cycle continuously or have hard stops.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCarouselCaption.api.mdx b/packages/docs/content/api/CCarouselCaption.api.mdx
index 97c68639..155f973a 100644
--- a/packages/docs/content/api/CCarouselCaption.api.mdx
+++ b/packages/docs/content/api/CCarouselCaption.api.mdx
@@ -5,6 +5,26 @@ import { CCarouselCaption } from '@coreui/react'
 import CCarouselCaption from '@coreui/react/src/components/carousel/CCarouselCaption'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccarouselcaption-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccarouselcaption-class-name" aria-label="CCarouselCaption className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCarouselItem.api.mdx b/packages/docs/content/api/CCarouselItem.api.mdx
index e7c469d1..eedb86a1 100644
--- a/packages/docs/content/api/CCarouselItem.api.mdx
+++ b/packages/docs/content/api/CCarouselItem.api.mdx
@@ -5,7 +5,36 @@ import { CCarouselItem } from '@coreui/react'
 import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **interval** | The amount of time to delay between automatically cycling an item. | `number` \| `boolean` | false |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccarouselitem-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccarouselitem-class-name" aria-label="CCarouselItem className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccarouselitem-interval">
+        <td className="text-primary fw-semibold">interval<a href="#ccarouselitem-interval" aria-label="CCarouselItem interval permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The amount of time to delay between automatically cycling an item.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CChart.api.mdx b/packages/docs/content/api/CChart.api.mdx
index 4a328e1c..14787f9f 100644
--- a/packages/docs/content/api/CChart.api.mdx
+++ b/packages/docs/content/api/CChart.api.mdx
@@ -5,20 +5,166 @@ import { CChart } from '@coreui/react-chartjs'
 import CChart from '@coreui/react-chartjs/src/CChart'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **customTooltips** | Enables custom html based tooltips instead of standard tooltips. | `boolean` | true |
-| **data** | The data object that is passed into the Chart.js chart (more info). | `ChartData<keyof ChartTypeRegistry, (number` \| `[number, number]` \| `Point` \| `BubbleDataPoint)[], unknown>` \| `((canvas: HTMLCanvasElement) => ChartData<...>)` | - |
-| **fallbackContent** | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. | `React.ReactNode` | - |
-| **getDatasetAtEvent** | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. | `(dataset: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
-| **getElementAtEvent** | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. | `(element: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
-| **getElementsAtEvent** | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. | `(elements: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
-| **height** | Height attribute applied to the rendered canvas. | `number` | 150 |
-| **id** | ID attribute applied to the rendered canvas. | `string` | - |
-| **options** | The options object that is passed into the Chart.js chart. | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - |
-| **plugins** | The plugins array that is passed into the Chart.js chart (more info) | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | [] |
-| **redraw** | If true, will tear down and redraw chart on all updates. | `boolean` | false |
-| **type** | Chart.js chart type. | `{'line'` \| `'bar'` \| `'radar'` \| `'doughnut'` \| `'polarArea'` \| `'bubble'` \| `'pie'` \| `'scatter'}` | bar |
-| **width** | Width attribute applied to the rendered canvas. | `number` | 300 |
-| **wrapper** | Put the chart into the wrapper div element. | `boolean` | true |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cchart-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cchart-class-name" aria-label="CChart className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cchart-custom-tooltips">
+        <td className="text-primary fw-semibold">customTooltips<a href="#cchart-custom-tooltips" aria-label="CChart customTooltips permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Enables custom html based tooltips instead of standard tooltips.</p>
+        </td>
+      </tr>
+      <tr id="cchart-data">
+        <td className="text-primary fw-semibold">data<a href="#cchart-data" aria-label="CChart data permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ChartData\<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The data object that is passed into the Chart.js chart (more info).</p>
+        </td>
+      </tr>
+      <tr id="cchart-fallback-content">
+        <td className="text-primary fw-semibold">fallbackContent<a href="#cchart-fallback-content" aria-label="CChart fallbackContent permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`React.ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p>
+        </td>
+      </tr>
+      <tr id="cchart-get-dataset-at-event">
+        <td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchart-get-dataset-at-event" aria-label="CChart getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(dataset: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
+        </td>
+      </tr>
+      <tr id="cchart-get-element-at-event">
+        <td className="text-primary fw-semibold">getElementAtEvent<a href="#cchart-get-element-at-event" aria-label="CChart getElementAtEvent permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(element: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
+        </td>
+      </tr>
+      <tr id="cchart-get-elements-at-event">
+        <td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchart-get-elements-at-event" aria-label="CChart getElementsAtEvent permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(elements: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p>
+        </td>
+      </tr>
+      <tr id="cchart-height">
+        <td className="text-primary fw-semibold">height<a href="#cchart-height" aria-label="CChart height permalink" className="anchor-link after">#</a></td>
+        <td><code>{`150`}</code></td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Height attribute applied to the rendered canvas.</p>
+        </td>
+      </tr>
+      <tr id="cchart-id">
+        <td className="text-primary fw-semibold">id<a href="#cchart-id" aria-label="CChart id permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>ID attribute applied to the rendered canvas.</p>
+        </td>
+      </tr>
+      <tr id="cchart-options">
+        <td className="text-primary fw-semibold">options<a href="#cchart-options" aria-label="CChart options permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`_DeepPartialObject\<CoreChartOptions\<keyof ChartTypeRegistry> & ElementChartOptions\<keyof ChartTypeRegistry> & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The options object that is passed into the Chart.js chart.</p>
+        </td>
+      </tr>
+      <tr id="cchart-plugins">
+        <td className="text-primary fw-semibold">plugins<a href="#cchart-plugins" aria-label="CChart plugins permalink" className="anchor-link after">#</a></td>
+        <td><code>{`[]`}</code></td>
+        <td><code>{`Plugin\<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The plugins array that is passed into the Chart.js chart (more info)</p>
+        </td>
+      </tr>
+      <tr id="cchart-redraw">
+        <td className="text-primary fw-semibold">redraw<a href="#cchart-redraw" aria-label="CChart redraw permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>If true, will tear down and redraw chart on all updates.</p>
+        </td>
+      </tr>
+      <tr id="cchart-type">
+        <td className="text-primary fw-semibold">type<a href="#cchart-type" aria-label="CChart type permalink" className="anchor-link after">#</a></td>
+        <td><code>{`bar`}</code></td>
+        <td><code>{`{'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Chart.js chart type.</p>
+        </td>
+      </tr>
+      <tr id="cchart-width">
+        <td className="text-primary fw-semibold">width<a href="#cchart-width" aria-label="CChart width permalink" className="anchor-link after">#</a></td>
+        <td><code>{`300`}</code></td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Width attribute applied to the rendered canvas.</p>
+        </td>
+      </tr>
+      <tr id="cchart-wrapper">
+        <td className="text-primary fw-semibold">wrapper<a href="#cchart-wrapper" aria-label="CChart wrapper permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Put the chart into the wrapper div element.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx
index 8ab5082b..79ff901e 100644
--- a/packages/docs/content/api/CCharts.api.mdx
+++ b/packages/docs/content/api/CCharts.api.mdx
@@ -5,19 +5,156 @@ import { CChartBar } from '@coreui/react-chartjs'
 import CChartBar from '@coreui/react-chartjs/src/CCharts'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **customTooltips** | Enables custom html based tooltips instead of standard tooltips. | `boolean` | true |
-| **data** | The data object that is passed into the Chart.js chart (more info). | `ChartData<keyof ChartTypeRegistry, (number` \| `[number, number]` \| `Point` \| `BubbleDataPoint)[], unknown>` \| `((canvas: HTMLCanvasElement) => ChartData<...>)` | - |
-| **fallbackContent** | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. | `React.ReactNode` | - |
-| **getDatasetAtEvent** | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. | `(dataset: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
-| **getElementAtEvent** | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. | `(element: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
-| **getElementsAtEvent** | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. | `(elements: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void` | - |
-| **height** | Height attribute applied to the rendered canvas. | `number` | 150 |
-| **id** | ID attribute applied to the rendered canvas. | `string` | - |
-| **options** | The options object that is passed into the Chart.js chart. | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - |
-| **plugins** | The plugins array that is passed into the Chart.js chart (more info) | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | - |
-| **redraw** | If true, will tear down and redraw chart on all updates. | `boolean` | false |
-| **width** | Width attribute applied to the rendered canvas. | `number` | 300 |
-| **wrapper** | Put the chart into the wrapper div element. | `boolean` | true |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cchartbar-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cchartbar-class-name" aria-label="CChartBar className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-custom-tooltips">
+        <td className="text-primary fw-semibold">customTooltips<a href="#cchartbar-custom-tooltips" aria-label="CChartBar customTooltips permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Enables custom html based tooltips instead of standard tooltips.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-data">
+        <td className="text-primary fw-semibold">data<a href="#cchartbar-data" aria-label="CChartBar data permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ChartData\<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The data object that is passed into the Chart.js chart (more info).</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-fallback-content">
+        <td className="text-primary fw-semibold">fallbackContent<a href="#cchartbar-fallback-content" aria-label="CChartBar fallbackContent permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`React.ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-get-dataset-at-event">
+        <td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchartbar-get-dataset-at-event" aria-label="CChartBar getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(dataset: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-get-element-at-event">
+        <td className="text-primary fw-semibold">getElementAtEvent<a href="#cchartbar-get-element-at-event" aria-label="CChartBar getElementAtEvent permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(element: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-get-elements-at-event">
+        <td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchartbar-get-elements-at-event" aria-label="CChartBar getElementsAtEvent permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(elements: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-height">
+        <td className="text-primary fw-semibold">height<a href="#cchartbar-height" aria-label="CChartBar height permalink" className="anchor-link after">#</a></td>
+        <td><code>{`150`}</code></td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Height attribute applied to the rendered canvas.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-id">
+        <td className="text-primary fw-semibold">id<a href="#cchartbar-id" aria-label="CChartBar id permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>ID attribute applied to the rendered canvas.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-options">
+        <td className="text-primary fw-semibold">options<a href="#cchartbar-options" aria-label="CChartBar options permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`_DeepPartialObject\<CoreChartOptions\<keyof ChartTypeRegistry> & ElementChartOptions\<keyof ChartTypeRegistry> & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The options object that is passed into the Chart.js chart.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-plugins">
+        <td className="text-primary fw-semibold">plugins<a href="#cchartbar-plugins" aria-label="CChartBar plugins permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`Plugin\<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The plugins array that is passed into the Chart.js chart (more info)</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-redraw">
+        <td className="text-primary fw-semibold">redraw<a href="#cchartbar-redraw" aria-label="CChartBar redraw permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>If true, will tear down and redraw chart on all updates.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-width">
+        <td className="text-primary fw-semibold">width<a href="#cchartbar-width" aria-label="CChartBar width permalink" className="anchor-link after">#</a></td>
+        <td><code>{`300`}</code></td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Width attribute applied to the rendered canvas.</p>
+        </td>
+      </tr>
+      <tr id="cchartbar-wrapper">
+        <td className="text-primary fw-semibold">wrapper<a href="#cchartbar-wrapper" aria-label="CChartBar wrapper permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Put the chart into the wrapper div element.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx
index c7517889..5e87320d 100644
--- a/packages/docs/content/api/CCloseButton.api.mdx
+++ b/packages/docs/content/api/CCloseButton.api.mdx
@@ -5,9 +5,56 @@ import { CCloseButton } from '@coreui/react'
 import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **dark** | Invert the default color. | `boolean` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **white** **_Deprecated 5.0.0+_** | Change the default color to white. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cclosebutton-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cclosebutton-class-name" aria-label="CCloseButton className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cclosebutton-dark">
+        <td className="text-primary fw-semibold">dark<a href="#cclosebutton-dark" aria-label="CCloseButton dark permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Invert the default color.</p>
+        </td>
+      </tr>
+      <tr id="cclosebutton-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cclosebutton-disabled" aria-label="CCloseButton disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cclosebutton-white">
+        <td className="text-primary fw-semibold">white<a href="#cclosebutton-white" aria-label="CCloseButton white permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 5.0.0</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Change the default color to white.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx
index c0c1566d..a4158913 100644
--- a/packages/docs/content/api/CCol.api.mdx
+++ b/packages/docs/content/api/CCol.api.mdx
@@ -5,12 +5,86 @@ import { CCol } from '@coreui/react'
 import CCol from '@coreui/react/src/components/grid/CCol'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **lg** | The number of columns/offset/order on large devices (\<1200px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **md** | The number of columns/offset/order on medium devices (\<992px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **sm** | The number of columns/offset/order on small devices (\<768px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **xl** | The number of columns/offset/order on X-Large devices (\<1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **xs** | The number of columns/offset/order on extra small devices (\<576px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
-| **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccol-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccol-class-name" aria-label="CCol className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccol-lg">
+        <td className="text-primary fw-semibold">lg<a href="#ccol-lg" aria-label="CCol lg permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on large devices (&lt;1200px).</p>
+        </td>
+      </tr>
+      <tr id="ccol-md">
+        <td className="text-primary fw-semibold">md<a href="#ccol-md" aria-label="CCol md permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on medium devices (&lt;992px).</p>
+        </td>
+      </tr>
+      <tr id="ccol-sm">
+        <td className="text-primary fw-semibold">sm<a href="#ccol-sm" aria-label="CCol sm permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on small devices (&lt;768px).</p>
+        </td>
+      </tr>
+      <tr id="ccol-xl">
+        <td className="text-primary fw-semibold">xl<a href="#ccol-xl" aria-label="CCol xl permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on X-Large devices (&lt;1400px).</p>
+        </td>
+      </tr>
+      <tr id="ccol-xs">
+        <td className="text-primary fw-semibold">xs<a href="#ccol-xs" aria-label="CCol xs permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on extra small devices (&lt;576px).</p>
+        </td>
+      </tr>
+      <tr id="ccol-xxl">
+        <td className="text-primary fw-semibold">xxl<a href="#ccol-xxl" aria-label="CCol xxl permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx
index c2b78d28..c2943464 100644
--- a/packages/docs/content/api/CCollapse.api.mdx
+++ b/packages/docs/content/api/CCollapse.api.mdx
@@ -5,10 +5,66 @@ import { CCollapse } from '@coreui/react'
 import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **horizontal** | Set horizontal collapsing to transition the width instead of height. | `boolean` | - |
-| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **visible** | Toggle the visibility of component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccollapse-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccollapse-class-name" aria-label="CCollapse className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccollapse-horizontal">
+        <td className="text-primary fw-semibold">horizontal<a href="#ccollapse-horizontal" aria-label="CCollapse horizontal permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set horizontal collapsing to transition the width instead of height.</p>
+        </td>
+      </tr>
+      <tr id="ccollapse-on-hide">
+        <td className="text-primary fw-semibold">onHide<a href="#ccollapse-on-hide" aria-label="CCollapse onHide permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
+      </tr>
+      <tr id="ccollapse-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#ccollapse-on-show" aria-label="CCollapse onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</p>
+        </td>
+      </tr>
+      <tr id="ccollapse-visible">
+        <td className="text-primary fw-semibold">visible<a href="#ccollapse-visible" aria-label="CCollapse visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx
index 9a90013e..9afb8ca0 100644
--- a/packages/docs/content/api/CConditionalPortal.api.mdx
+++ b/packages/docs/content/api/CConditionalPortal.api.mdx
@@ -5,7 +5,36 @@ import { CConditionalPortal } from '@coreui/react'
 import CConditionalPortal from '@coreui/react/src/components/conditional-portal/CConditionalPortal'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **container** **_4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `DocumentFragment` \| `Element` \| `(() => DocumentFragment` \| `Element)` | - |
-| **portal** | Render some children into a different part of the DOM | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cconditionalportal-container">
+        <td className="text-primary fw-semibold">container<a href="#cconditionalportal-container" aria-label="CConditionalPortal container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
+        <td>-</td>
+        <td><code>{`DocumentFragment`}</code>, <code>{`Element`}</code>, <code>{`(() => DocumentFragment | Element)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>An HTML element or function that returns a single element, with <code>{`document.body`}</code> as the default.</p>
+        </td>
+      </tr>
+      <tr id="cconditionalportal-portal">
+        <td className="text-primary fw-semibold">portal<a href="#cconditionalportal-portal" aria-label="CConditionalPortal portal permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Render some children into a different part of the DOM</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx
index db6dcb4a..86ab71f8 100644
--- a/packages/docs/content/api/CContainer.api.mdx
+++ b/packages/docs/content/api/CContainer.api.mdx
@@ -5,12 +5,86 @@ import { CContainer } from '@coreui/react'
 import CContainer from '@coreui/react/src/components/grid/CContainer'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **fluid** | Set container 100% wide, spanning the entire width of the viewport. | `boolean` | - |
-| **lg** | Set container 100% wide until large breakpoint. | `boolean` | - |
-| **md** | Set container 100% wide until medium breakpoint. | `boolean` | - |
-| **sm** | Set container 100% wide until small breakpoint. | `boolean` | - |
-| **xl** | Set container 100% wide until X-large breakpoint. | `boolean` | - |
-| **xxl** | Set container 100% wide until XX-large breakpoint. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ccontainer-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ccontainer-class-name" aria-label="CContainer className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ccontainer-fluid">
+        <td className="text-primary fw-semibold">fluid<a href="#ccontainer-fluid" aria-label="CContainer fluid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set container 100% wide, spanning the entire width of the viewport.</p>
+        </td>
+      </tr>
+      <tr id="ccontainer-lg">
+        <td className="text-primary fw-semibold">lg<a href="#ccontainer-lg" aria-label="CContainer lg permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set container 100% wide until large breakpoint.</p>
+        </td>
+      </tr>
+      <tr id="ccontainer-md">
+        <td className="text-primary fw-semibold">md<a href="#ccontainer-md" aria-label="CContainer md permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set container 100% wide until medium breakpoint.</p>
+        </td>
+      </tr>
+      <tr id="ccontainer-sm">
+        <td className="text-primary fw-semibold">sm<a href="#ccontainer-sm" aria-label="CContainer sm permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set container 100% wide until small breakpoint.</p>
+        </td>
+      </tr>
+      <tr id="ccontainer-xl">
+        <td className="text-primary fw-semibold">xl<a href="#ccontainer-xl" aria-label="CContainer xl permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set container 100% wide until X-large breakpoint.</p>
+        </td>
+      </tr>
+      <tr id="ccontainer-xxl">
+        <td className="text-primary fw-semibold">xxl<a href="#ccontainer-xxl" aria-label="CContainer xxl permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set container 100% wide until XX-large breakpoint.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx
index 80106e4d..765fbd96 100644
--- a/packages/docs/content/api/CDropdown.api.mdx
+++ b/packages/docs/content/api/CDropdown.api.mdx
@@ -5,20 +5,221 @@ import { CDropdown } from '@coreui/react'
 import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **alignment** | Set aligment of dropdown menu. | `'start'` \| `'end'` \| `{ xs: 'start'` \| `'end' }` \| `{ sm: 'start'` \| `'end' }` \| `{ md: 'start'` \| `'end' }` \| `{ lg: 'start'` \| `'end' }` \| `{ xl: 'start'` \| `'end'}` \| `{ xxl: 'start'` \| `'end'}` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | div |
-| **autoClose** | Configure the auto close behavior of the dropdown:<br/>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br/>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br/>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br/>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | `boolean` \| `'inside'` \| `'outside'` | true |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **container** **_4.11.0+_** | Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - |
-| **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - |
-| **direction** | Sets a specified  direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - |
-| **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] |
-| **onHide** **_4.9.0+_** | Callback fired when the component requests to be hidden. | `() => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start |
-| **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true |
-| **portal** **_4.8.0+_** | Generates dropdown menu using createPortal. | `boolean` | false |
-| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | `'btn-group'` \| `'dropdown'` \| `'input-group'` \| `'nav-item'` | btn-group |
-| **visible** | Toggle the visibility of dropdown menu component. | `boolean` | false |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cdropdown-alignment">
+        <td className="text-primary fw-semibold">alignment<a href="#cdropdown-alignment" aria-label="CDropdown alignment permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'start'`}</code>, <code>{`'end'`}</code>, <code>{`{ xs: 'start' | 'end' }`}</code>, <code>{`{ sm: 'start' | 'end' }`}</code>, <code>{`{ md: 'start' | 'end' }`}</code>, <code>{`{ lg: 'start' | 'end' }`}</code>, <code>{`{ xl: 'start' | 'end'}`}</code>, <code>{`{ xxl: 'start' | 'end'}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the alignment of the React Dropdown Menu within this React Dropdown.</p>
+        <JSXDocs code={`// Align dropdown menu to the end on large devices, otherwise start
+<CDropdown alignment={{ lg: 'end', xs: 'start' }}>
+  <CDropdownToggle>Toggle dropdown</CDropdownToggle>
+  <CDropdownMenu>
+    <CDropdownItem>Action</CDropdownItem>
+    <CDropdownItem>Another Action</CDropdownItem>
+  </CDropdownMenu>
+</CDropdown>`} />
+        </td>
+      </tr>
+      <tr id="cdropdown-as">
+        <td className="text-primary fw-semibold">as<a href="#cdropdown-as" aria-label="CDropdown as permalink" className="anchor-link after">#</a></td>
+        <td><code>{`div`}</code></td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Determines the root node component (native HTML element or a custom React component) for the React Dropdown.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-auto-close">
+        <td className="text-primary fw-semibold">autoClose<a href="#cdropdown-auto-close" aria-label="CDropdown autoClose permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code>, <code>{`'inside'`}</code>, <code>{`'outside'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Configures automatic closing behavior for the React Dropdown:</p>
+<ul>
+<li><code>{`true`}</code> - Close on clicks inside or outside of the React Dropdown Menu.</li>
+<li><code>{`false`}</code> - Disable auto-close; manually call <code>{`hide`}</code> or <code>{`toggle`}</code> (also not closed by <code>{`Escape`}</code>).</li>
+<li><code>{`'inside'`}</code> - Close only when clicking inside the React Dropdown Menu.</li>
+<li><code>{`'outside'`}</code> - Close only when clicking outside the React Dropdown Menu.</li>
+</ul>
+        <JSXDocs code={`// Close only when user clicks outside of the menu
+<CDropdown autoClose="outside" />`} />
+        </td>
+      </tr>
+      <tr id="cdropdown-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cdropdown-class-name" aria-label="CDropdown className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Adds custom classes to the React Dropdown root element.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-container">
+        <td className="text-primary fw-semibold">container<a href="#cdropdown-container" aria-label="CDropdown container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
+        <td>-</td>
+        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to <code>{`document.body`}</code>.</p>
+        <JSXDocs code={`// Append the menu to a custom container
+const myContainer = document.getElementById('my-container')
+
+<CDropdown container={myContainer} />`} />
+        </td>
+      </tr>
+      <tr id="cdropdown-dark">
+        <td className="text-primary fw-semibold">dark<a href="#cdropdown-dark" aria-label="CDropdown dark permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-direction">
+        <td className="text-primary fw-semibold">direction<a href="#cdropdown-direction" aria-label="CDropdown direction permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'center'`}</code>, <code>{`'dropup'`}</code>, <code>{`'dropup-center'`}</code>, <code>{`'dropend'`}</code>, <code>{`'dropstart'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the direction of the React Dropdown.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-offset">
+        <td className="text-primary fw-semibold">offset<a href="#cdropdown-offset" aria-label="CDropdown offset permalink" className="anchor-link after">#</a></td>
+        <td><code>{`[0, 2]`}</code></td>
+        <td><code>{`[number, number]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.</p>
+        <JSXDocs code={`// Offset the menu 10px in X and 5px in Y direction
+<CDropdown offset={[10, 5]}>
+  ...
+</CDropdown>`} />
+        </td>
+      </tr>
+      <tr id="cdropdown-on-hide">
+        <td className="text-primary fw-semibold">onHide<a href="#cdropdown-on-hide" aria-label="CDropdown onHide permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired right before the React Dropdown becomes hidden.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#cdropdown-on-show" aria-label="CDropdown onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired immediately after the React Dropdown is displayed.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-placement">
+        <td className="text-primary fw-semibold">placement<a href="#cdropdown-placement" aria-label="CDropdown placement permalink" className="anchor-link after">#</a></td>
+        <td><code>{`bottom-start`}</code></td>
+        <td><code>{`'auto'`}</code>, <code>{`'auto-start'`}</code>, <code>{`'auto-end'`}</code>, <code>{`'top-end'`}</code>, <code>{`'top'`}</code>, <code>{`'top-start'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`'bottom'`}</code>, <code>{`'bottom-start'`}</code>, <code>{`'right-start'`}</code>, <code>{`'right'`}</code>, <code>{`'right-end'`}</code>, <code>{`'left-start'`}</code>, <code>{`'left'`}</code>, <code>{`'left-end'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Determines the placement of the React Dropdown Menu after Popper.js modifiers.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-popper">
+        <td className="text-primary fw-semibold">popper<a href="#cdropdown-popper" aria-label="CDropdown popper permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-popper-config">
+        <td className="text-primary fw-semibold">popperConfig<a href="#cdropdown-popper-config" aria-label="CDropdown popperConfig permalink" className="anchor-link after">#</a><span className="badge bg-success">5.5.0+</span></td>
+        <td>-</td>
+        <td><code>{`Partial\<Options>`}</code>, <code>{`((defaultPopperConfig: Partial\<Options>) => Partial\<Options>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. <a href="https://popper.js.org/docs/v2/constructors/#options">Read more</a></p>
+        <JSXDocs code={`// Providing a custom popper config
+<CDropdown
+  popperConfig={{
+    modifiers: [
+      {
+        name: 'flip',
+        options: { fallbackPlacements: ['bottom', 'top'] },
+      },
+    ],
+  }}
+>...</CDropdown>`} />
+        </td>
+      </tr>
+      <tr id="cdropdown-portal">
+        <td className="text-primary fw-semibold">portal<a href="#cdropdown-portal" aria-label="CDropdown portal permalink" className="anchor-link after">#</a><span className="badge bg-success">4.8.0+</span></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-variant">
+        <td className="text-primary fw-semibold">variant<a href="#cdropdown-variant" aria-label="CDropdown variant permalink" className="anchor-link after">#</a></td>
+        <td><code>{`btn-group`}</code></td>
+        <td><code>{`'btn-group'`}</code>, <code>{`'dropdown'`}</code>, <code>{`'input-group'`}</code>, <code>{`'nav-item'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Defines the visual variant of the React Dropdown</p>
+        </td>
+      </tr>
+      <tr id="cdropdown-visible">
+        <td className="text-primary fw-semibold">visible<a href="#cdropdown-visible" aria-label="CDropdown visible permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Controls the visibility of the React Dropdown Menu:</p>
+<ul>
+<li><code>{`true`}</code> - Visible</li>
+<li><code>{`false`}</code> - Hidden</li>
+</ul>
+        <JSXDocs code={`// Programmatically manage the dropdown visibility
+const [visible, setVisible] = useState(false)
+
+<CDropdown visible={visible}>
+  ...
+</CDropdown>`} />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx
index 9228a01f..35021a7c 100644
--- a/packages/docs/content/api/CDropdownDivider.api.mdx
+++ b/packages/docs/content/api/CDropdownDivider.api.mdx
@@ -5,6 +5,26 @@ import { CDropdownDivider } from '@coreui/react'
 import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDivider'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cdropdowndivider-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cdropdowndivider-class-name" aria-label="CDropdownDivider className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx
index f8f2f909..60f8423c 100644
--- a/packages/docs/content/api/CDropdownHeader.api.mdx
+++ b/packages/docs/content/api/CDropdownHeader.api.mdx
@@ -5,7 +5,36 @@ import { CDropdownHeader } from '@coreui/react'
 import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHeader'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cdropdownheader-as">
+        <td className="text-primary fw-semibold">as<a href="#cdropdownheader-as" aria-label="CDropdownHeader as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h6')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdownheader-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cdropdownheader-class-name" aria-label="CDropdownHeader className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx
index a3aa0617..4bcb66a0 100644
--- a/packages/docs/content/api/CDropdownItem.api.mdx
+++ b/packages/docs/content/api/CDropdownItem.api.mdx
@@ -5,10 +5,66 @@ import { CDropdownItem } from '@coreui/react'
 import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | a |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cdropdownitem-active">
+        <td className="text-primary fw-semibold">active<a href="#cdropdownitem-active" aria-label="CDropdownItem active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdownitem-as">
+        <td className="text-primary fw-semibold">as<a href="#cdropdownitem-as" aria-label="CDropdownItem as permalink" className="anchor-link after">#</a></td>
+        <td><code>{`a`}</code></td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdownitem-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cdropdownitem-class-name" aria-label="CDropdownItem className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdownitem-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cdropdownitem-disabled" aria-label="CDropdownItem disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdownitem-href">
+        <td className="text-primary fw-semibold">href<a href="#cdropdownitem-href" aria-label="CDropdownItem href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx
index 64737fa7..b4a8456d 100644
--- a/packages/docs/content/api/CDropdownItemPlain.api.mdx
+++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx
@@ -5,7 +5,36 @@ import { CDropdownItemPlain } from '@coreui/react'
 import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownItemPlain'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cdropdownitemplain-as">
+        <td className="text-primary fw-semibold">as<a href="#cdropdownitemplain-as" aria-label="CDropdownItemPlain as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'span')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdownitemplain-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cdropdownitemplain-class-name" aria-label="CDropdownItemPlain className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx
index 05b746f4..8aa5c1ef 100644
--- a/packages/docs/content/api/CDropdownMenu.api.mdx
+++ b/packages/docs/content/api/CDropdownMenu.api.mdx
@@ -5,7 +5,36 @@ import { CDropdownMenu } from '@coreui/react'
 import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cdropdownmenu-as">
+        <td className="text-primary fw-semibold">as<a href="#cdropdownmenu-as" aria-label="CDropdownMenu as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdownmenu-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cdropdownmenu-class-name" aria-label="CDropdownMenu className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx
index 7a4ecef2..7ec36a8e 100644
--- a/packages/docs/content/api/CDropdownToggle.api.mdx
+++ b/packages/docs/content/api/CDropdownToggle.api.mdx
@@ -5,20 +5,166 @@ import { CDropdownToggle } from '@coreui/react'
 import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownToggle'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `ElementType` | - |
-| **caret** | Enables pseudo element caret on toggler. | `boolean` | true |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **custom** | Create a custom toggler which accepts any content. | `boolean` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
-| **navLink** **_5.0.0+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true |
-| **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - |
-| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
-| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
-| **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | `boolean` | - |
-| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click |
-| **variant** | Set the button variant to an outlined button or a ghost button. | `'outline'` \| `'ghost'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cdropdowntoggle-active">
+        <td className="text-primary fw-semibold">active<a href="#cdropdowntoggle-active" aria-label="CDropdownToggle active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-as">
+        <td className="text-primary fw-semibold">as<a href="#cdropdowntoggle-as" aria-label="CDropdownToggle as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ElementType`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-caret">
+        <td className="text-primary fw-semibold">caret<a href="#cdropdowntoggle-caret" aria-label="CDropdownToggle caret permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Enables pseudo element caret on toggler.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cdropdowntoggle-class-name" aria-label="CDropdownToggle className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-color">
+        <td className="text-primary fw-semibold">color<a href="#cdropdowntoggle-color" aria-label="CDropdownToggle color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-custom">
+        <td className="text-primary fw-semibold">custom<a href="#cdropdowntoggle-custom" aria-label="CDropdownToggle custom permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Create a custom toggler which accepts any content.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cdropdowntoggle-disabled" aria-label="CDropdownToggle disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-href">
+        <td className="text-primary fw-semibold">href<a href="#cdropdowntoggle-href" aria-label="CDropdownToggle href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-nav-link">
+        <td className="text-primary fw-semibold">navLink<a href="#cdropdowntoggle-nav-link" aria-label="CDropdownToggle navLink permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>If a dropdown <code>{`variant`}</code> is set to <code>{`nav-item`}</code> then render the toggler as a link instead of a button.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-role">
+        <td className="text-primary fw-semibold">role<a href="#cdropdowntoggle-role" aria-label="CDropdownToggle role permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-shape">
+        <td className="text-primary fw-semibold">shape<a href="#cdropdowntoggle-shape" aria-label="CDropdownToggle shape permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Select the shape of the component.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-size">
+        <td className="text-primary fw-semibold">size<a href="#cdropdowntoggle-size" aria-label="CDropdownToggle size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-split">
+        <td className="text-primary fw-semibold">split<a href="#cdropdowntoggle-split" aria-label="CDropdownToggle split permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>{`.dropdown-toggle-split`}</code> className for proper spacing around the dropdown caret.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-trigger">
+        <td className="text-primary fw-semibold">trigger<a href="#cdropdowntoggle-trigger" aria-label="CDropdownToggle trigger permalink" className="anchor-link after">#</a></td>
+        <td><code>{`click`}</code></td>
+        <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</p>
+        </td>
+      </tr>
+      <tr id="cdropdowntoggle-variant">
+        <td className="text-primary fw-semibold">variant<a href="#cdropdowntoggle-variant" aria-label="CDropdownToggle variant permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'outline'`}</code>, <code>{`'ghost'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the button variant to an outlined button or a ghost button.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx
index b6d11d4b..a163a037 100644
--- a/packages/docs/content/api/CFooter.api.mdx
+++ b/packages/docs/content/api/CFooter.api.mdx
@@ -5,7 +5,36 @@ import { CFooter } from '@coreui/react'
 import CFooter from '@coreui/react/src/components/footer/CFooter'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **position** | Place footer in non-static positions. | `'fixed'` \| `'sticky'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cfooter-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cfooter-class-name" aria-label="CFooter className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cfooter-position">
+        <td className="text-primary fw-semibold">position<a href="#cfooter-position" aria-label="CFooter position permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'fixed'`}</code>, <code>{`'sticky'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Place footer in non-static positions.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx
index 9759844f..f5ad1ef4 100644
--- a/packages/docs/content/api/CForm.api.mdx
+++ b/packages/docs/content/api/CForm.api.mdx
@@ -5,7 +5,36 @@ import { CForm } from '@coreui/react'
 import CForm from '@coreui/react/src/components/form/CForm'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **validated** | Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cform-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cform-class-name" aria-label="CForm className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cform-validated">
+        <td className="text-primary fw-semibold">validated<a href="#cform-validated" aria-label="CForm validated permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Mark a form as validated. If you set it <code>{`true`}</code>, all validation styles will be applied to the forms component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx
index 43472818..04c01d5b 100644
--- a/packages/docs/content/api/CFormCheck.api.mdx
+++ b/packages/docs/content/api/CFormCheck.api.mdx
@@ -5,21 +5,176 @@ import { CFormCheck } from '@coreui/react'
 import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **button** | Create button-like checkboxes and radio buttons. | `ButtonObject` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **hitArea** | Sets hit area to the full area of the component. | `'full'` | - |
-| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - |
-| **indeterminate** | Input Checkbox indeterminate Property. | `boolean` | - |
-| **inline** | Group checkboxes or radios on the same horizontal row. | `boolean` | - |
-| **invalid** | Set component validation state to invalid. | `boolean` | - |
-| **label** | The element represents a caption for a component. | `ReactNode` | - |
-| **reverse** | Put checkboxes or radios on the opposite side. | `boolean` | - |
-| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - |
-| **type** | Specifies the type of component. | `'checkbox'` \| `'radio'` | checkbox |
-| **valid** | Set component validation state to valid. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformcheck-button">
+        <td className="text-primary fw-semibold">button<a href="#cformcheck-button" aria-label="CFormCheck button permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ButtonObject`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Create button-like checkboxes and radio buttons.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformcheck-class-name" aria-label="CFormCheck className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-feedback">
+        <td className="text-primary fw-semibold">feedback<a href="#cformcheck-feedback" aria-label="CFormCheck feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-feedback-invalid">
+        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcheck-feedback-invalid" aria-label="CFormCheck feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-feedback-valid">
+        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcheck-feedback-valid" aria-label="CFormCheck feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-floating-label">
+        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcheck-floating-label" aria-label="CFormCheck floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-hit-area">
+        <td className="text-primary fw-semibold">hitArea<a href="#cformcheck-hit-area" aria-label="CFormCheck hitArea permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'full'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets hit area to the full area of the component.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-id">
+        <td className="text-primary fw-semibold">id<a href="#cformcheck-id" aria-label="CFormCheck id permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The id global attribute defines an identifier (ID) that must be unique in the whole document.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-indeterminate">
+        <td className="text-primary fw-semibold">indeterminate<a href="#cformcheck-indeterminate" aria-label="CFormCheck indeterminate permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Input Checkbox indeterminate Property.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-inline">
+        <td className="text-primary fw-semibold">inline<a href="#cformcheck-inline" aria-label="CFormCheck inline permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Group checkboxes or radios on the same horizontal row.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-invalid">
+        <td className="text-primary fw-semibold">invalid<a href="#cformcheck-invalid" aria-label="CFormCheck invalid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to invalid.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-label">
+        <td className="text-primary fw-semibold">label<a href="#cformcheck-label" aria-label="CFormCheck label permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The element represents a caption for a component.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-reverse">
+        <td className="text-primary fw-semibold">reverse<a href="#cformcheck-reverse" aria-label="CFormCheck reverse permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Put checkboxes or radios on the opposite side.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-tooltip-feedback">
+        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcheck-tooltip-feedback" aria-label="CFormCheck tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Display validation feedback in a styled tooltip.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-type">
+        <td className="text-primary fw-semibold">type<a href="#cformcheck-type" aria-label="CFormCheck type permalink" className="anchor-link after">#</a></td>
+        <td><code>{`checkbox`}</code></td>
+        <td><code>{`'checkbox'`}</code>, <code>{`'radio'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the type of component.</p>
+        </td>
+      </tr>
+      <tr id="cformcheck-valid">
+        <td className="text-primary fw-semibold">valid<a href="#cformcheck-valid" aria-label="CFormCheck valid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx
index 371e9918..a664895d 100644
--- a/packages/docs/content/api/CFormControlValidation.api.mdx
+++ b/packages/docs/content/api/CFormControlValidation.api.mdx
@@ -5,12 +5,86 @@ import { CFormControlValidation } from '@coreui/react'
 import CFormControlValidation from '@coreui/react/src/components/form/CFormControlValidation'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **invalid** | Set component validation state to invalid. | `boolean` | - |
-| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - |
-| **valid** | Set component validation state to valid. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformcontrolvalidation-feedback">
+        <td className="text-primary fw-semibold">feedback<a href="#cformcontrolvalidation-feedback" aria-label="CFormControlValidation feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolvalidation-feedback-invalid">
+        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcontrolvalidation-feedback-invalid" aria-label="CFormControlValidation feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolvalidation-feedback-valid">
+        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcontrolvalidation-feedback-valid" aria-label="CFormControlValidation feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolvalidation-floating-label">
+        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcontrolvalidation-floating-label" aria-label="CFormControlValidation floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolvalidation-invalid">
+        <td className="text-primary fw-semibold">invalid<a href="#cformcontrolvalidation-invalid" aria-label="CFormControlValidation invalid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to invalid.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolvalidation-tooltip-feedback">
+        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcontrolvalidation-tooltip-feedback" aria-label="CFormControlValidation tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Display validation feedback in a styled tooltip.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolvalidation-valid">
+        <td className="text-primary fw-semibold">valid<a href="#cformcontrolvalidation-valid" aria-label="CFormControlValidation valid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx
index 4f412d96..6169bf48 100644
--- a/packages/docs/content/api/CFormControlWrapper.api.mdx
+++ b/packages/docs/content/api/CFormControlWrapper.api.mdx
@@ -5,15 +5,116 @@ import { CFormControlWrapper } from '@coreui/react'
 import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlWrapper'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - |
-| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **invalid** | Set component validation state to invalid. | `boolean` | - |
-| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - |
-| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - |
-| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - |
-| **valid** | Set component validation state to valid. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformcontrolwrapper-feedback">
+        <td className="text-primary fw-semibold">feedback<a href="#cformcontrolwrapper-feedback" aria-label="CFormControlWrapper feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-feedback-invalid">
+        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcontrolwrapper-feedback-invalid" aria-label="CFormControlWrapper feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-feedback-valid">
+        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcontrolwrapper-feedback-valid" aria-label="CFormControlWrapper feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-floating-class-name">
+        <td className="text-primary fw-semibold">floatingClassName<a href="#cformcontrolwrapper-floating-class-name" aria-label="CFormControlWrapper floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the floating label wrapper.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-floating-label">
+        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcontrolwrapper-floating-label" aria-label="CFormControlWrapper floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-invalid">
+        <td className="text-primary fw-semibold">invalid<a href="#cformcontrolwrapper-invalid" aria-label="CFormControlWrapper invalid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to invalid.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-label">
+        <td className="text-primary fw-semibold">label<a href="#cformcontrolwrapper-label" aria-label="CFormControlWrapper label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add a caption for a component.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-text">
+        <td className="text-primary fw-semibold">text<a href="#cformcontrolwrapper-text" aria-label="CFormControlWrapper text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add helper text to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-tooltip-feedback">
+        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcontrolwrapper-tooltip-feedback" aria-label="CFormControlWrapper tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Display validation feedback in a styled tooltip.</p>
+        </td>
+      </tr>
+      <tr id="cformcontrolwrapper-valid">
+        <td className="text-primary fw-semibold">valid<a href="#cformcontrolwrapper-valid" aria-label="CFormControlWrapper valid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx
index f763006a..19a38f2d 100644
--- a/packages/docs/content/api/CFormFeedback.api.mdx
+++ b/packages/docs/content/api/CFormFeedback.api.mdx
@@ -5,10 +5,66 @@ import { CFormFeedback } from '@coreui/react'
 import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **invalid** | Method called immediately after the `value` prop changes. | `boolean` | - |
-| **tooltip** | If your form layout allows it, you can display validation feedback in a styled tooltip. | `boolean` | - |
-| **valid** | Set component validation state to valid. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformfeedback-as">
+        <td className="text-primary fw-semibold">as<a href="#cformfeedback-as" aria-label="CFormFeedback as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cformfeedback-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformfeedback-class-name" aria-label="CFormFeedback className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformfeedback-invalid">
+        <td className="text-primary fw-semibold">invalid<a href="#cformfeedback-invalid" aria-label="CFormFeedback invalid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
+        </td>
+      </tr>
+      <tr id="cformfeedback-tooltip">
+        <td className="text-primary fw-semibold">tooltip<a href="#cformfeedback-tooltip" aria-label="CFormFeedback tooltip permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>If your form layout allows it, you can display validation feedback in a styled tooltip.</p>
+        </td>
+      </tr>
+      <tr id="cformfeedback-valid">
+        <td className="text-primary fw-semibold">valid<a href="#cformfeedback-valid" aria-label="CFormFeedback valid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx
index 5a7f7d76..4fb9bbc1 100644
--- a/packages/docs/content/api/CFormFloating.api.mdx
+++ b/packages/docs/content/api/CFormFloating.api.mdx
@@ -5,6 +5,26 @@ import { CFormFloating } from '@coreui/react'
 import CFormFloating from '@coreui/react/src/components/form/CFormFloating'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformfloating-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformfloating-class-name" aria-label="CFormFloating className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx
index a48c769f..a5dbbbd9 100644
--- a/packages/docs/content/api/CFormInput.api.mdx
+++ b/packages/docs/content/api/CFormInput.api.mdx
@@ -5,24 +5,206 @@ import { CFormInput } from '@coreui/react'
 import CFormInput from '@coreui/react/src/components/form/CFormInput'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **delay** | Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event. | `number` \| `boolean` | false |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - |
-| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **invalid** | Set component validation state to invalid. | `boolean` | - |
-| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - |
-| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler<HTMLInputElement>` | - |
-| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | `boolean` | - |
-| **readOnly** | Toggle the readonly state for the component. | `boolean` | - |
-| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
-| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - |
-| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - |
-| **type** | Specifies the type of component. | `string` | text |
-| **valid** | Set component validation state to valid. | `boolean` | - |
-| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cforminput-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cforminput-class-name" aria-label="CFormInput className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-delay">
+        <td className="text-primary fw-semibold">delay<a href="#cforminput-delay" aria-label="CFormInput delay permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cforminput-disabled" aria-label="CFormInput disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-feedback">
+        <td className="text-primary fw-semibold">feedback<a href="#cforminput-feedback" aria-label="CFormInput feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-feedback-invalid">
+        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cforminput-feedback-invalid" aria-label="CFormInput feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-feedback-valid">
+        <td className="text-primary fw-semibold">feedbackValid<a href="#cforminput-feedback-valid" aria-label="CFormInput feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-floating-class-name">
+        <td className="text-primary fw-semibold">floatingClassName<a href="#cforminput-floating-class-name" aria-label="CFormInput floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the floating label wrapper.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-floating-label">
+        <td className="text-primary fw-semibold">floatingLabel<a href="#cforminput-floating-label" aria-label="CFormInput floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-invalid">
+        <td className="text-primary fw-semibold">invalid<a href="#cforminput-invalid" aria-label="CFormInput invalid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to invalid.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-label">
+        <td className="text-primary fw-semibold">label<a href="#cforminput-label" aria-label="CFormInput label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add a caption for a component.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-on-change">
+        <td className="text-primary fw-semibold">onChange<a href="#cforminput-on-change" aria-label="CFormInput onChange permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-plain-text">
+        <td className="text-primary fw-semibold">plainText<a href="#cforminput-plain-text" aria-label="CFormInput plainText permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>{`readonly`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-read-only">
+        <td className="text-primary fw-semibold">readOnly<a href="#cforminput-read-only" aria-label="CFormInput readOnly permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the readonly state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-size">
+        <td className="text-primary fw-semibold">size<a href="#cforminput-size" aria-label="CFormInput size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-text">
+        <td className="text-primary fw-semibold">text<a href="#cforminput-text" aria-label="CFormInput text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add helper text to the component.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-tooltip-feedback">
+        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cforminput-tooltip-feedback" aria-label="CFormInput tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Display validation feedback in a styled tooltip.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-type">
+        <td className="text-primary fw-semibold">type<a href="#cforminput-type" aria-label="CFormInput type permalink" className="anchor-link after">#</a></td>
+        <td><code>{`text`}</code></td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the type of component.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-valid">
+        <td className="text-primary fw-semibold">valid<a href="#cforminput-valid" aria-label="CFormInput valid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
+      </tr>
+      <tr id="cforminput-value">
+        <td className="text-primary fw-semibold">value<a href="#cforminput-value" aria-label="CFormInput value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The <code>{`value`}</code> attribute of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx
index 8d6d5ffc..ab70a347 100644
--- a/packages/docs/content/api/CFormLabel.api.mdx
+++ b/packages/docs/content/api/CFormLabel.api.mdx
@@ -5,7 +5,36 @@ import { CFormLabel } from '@coreui/react'
 import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **customClassName** | A string of all className you want to be applied to the component, and override standard className value. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformlabel-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformlabel-class-name" aria-label="CFormLabel className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformlabel-custom-class-name">
+        <td className="text-primary fw-semibold">customClassName<a href="#cformlabel-custom-class-name" aria-label="CFormLabel customClassName permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want to be applied to the component, and override standard className value.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx
index f2b5a83f..f60faa87 100644
--- a/packages/docs/content/api/CFormRange.api.mdx
+++ b/packages/docs/content/api/CFormRange.api.mdx
@@ -5,14 +5,106 @@ import { CFormRange } from '@coreui/react'
 import CFormRange from '@coreui/react/src/components/form/CFormRange'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - |
-| **max** | Specifies the maximum value for the component. | `number` | - |
-| **min** | Specifies the minimum value for the component. | `number` | - |
-| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler<HTMLInputElement>` | - |
-| **readOnly** | Toggle the readonly state for the component. | `boolean` | - |
-| **step** | Specifies the interval between legal numbers in the component. | `number` | - |
-| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformrange-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformrange-class-name" aria-label="CFormRange className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformrange-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cformrange-disabled" aria-label="CFormRange disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cformrange-label">
+        <td className="text-primary fw-semibold">label<a href="#cformrange-label" aria-label="CFormRange label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add a caption for a component.</p>
+        </td>
+      </tr>
+      <tr id="cformrange-max">
+        <td className="text-primary fw-semibold">max<a href="#cformrange-max" aria-label="CFormRange max permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the maximum value for the component.</p>
+        </td>
+      </tr>
+      <tr id="cformrange-min">
+        <td className="text-primary fw-semibold">min<a href="#cformrange-min" aria-label="CFormRange min permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the minimum value for the component.</p>
+        </td>
+      </tr>
+      <tr id="cformrange-on-change">
+        <td className="text-primary fw-semibold">onChange<a href="#cformrange-on-change" aria-label="CFormRange onChange permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
+        </td>
+      </tr>
+      <tr id="cformrange-read-only">
+        <td className="text-primary fw-semibold">readOnly<a href="#cformrange-read-only" aria-label="CFormRange readOnly permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the readonly state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cformrange-step">
+        <td className="text-primary fw-semibold">step<a href="#cformrange-step" aria-label="CFormRange step permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the interval between legal numbers in the component.</p>
+        </td>
+      </tr>
+      <tr id="cformrange-value">
+        <td className="text-primary fw-semibold">value<a href="#cformrange-value" aria-label="CFormRange value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The <code>{`value`}</code> attribute of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx
index f507ca9f..9b3db1a5 100644
--- a/packages/docs/content/api/CFormSelect.api.mdx
+++ b/packages/docs/content/api/CFormSelect.api.mdx
@@ -5,21 +5,181 @@ import { CFormSelect } from '@coreui/react'
 import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - |
-| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **htmlSize** | Specifies the number of visible options in a drop-down list. | `number` | - |
-| **invalid** | Set component validation state to invalid. | `boolean` | - |
-| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - |
-| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler<HTMLSelectElement>` | - |
-| **options** | Options list of the select component. Available keys: `label`, `value`, `disabled`.<br/>Examples:<br/>- `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`<br/>- `options={['js', 'html']}` | `Option[]` \| `string[]` | - |
-| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
-| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - |
-| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - |
-| **valid** | Set component validation state to valid. | `boolean` | - |
-| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformselect-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformselect-class-name" aria-label="CFormSelect className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-feedback">
+        <td className="text-primary fw-semibold">feedback<a href="#cformselect-feedback" aria-label="CFormSelect feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-feedback-invalid">
+        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformselect-feedback-invalid" aria-label="CFormSelect feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-feedback-valid">
+        <td className="text-primary fw-semibold">feedbackValid<a href="#cformselect-feedback-valid" aria-label="CFormSelect feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-floating-class-name">
+        <td className="text-primary fw-semibold">floatingClassName<a href="#cformselect-floating-class-name" aria-label="CFormSelect floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the floating label wrapper.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-floating-label">
+        <td className="text-primary fw-semibold">floatingLabel<a href="#cformselect-floating-label" aria-label="CFormSelect floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-html-size">
+        <td className="text-primary fw-semibold">htmlSize<a href="#cformselect-html-size" aria-label="CFormSelect htmlSize permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the number of visible options in a drop-down list.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-invalid">
+        <td className="text-primary fw-semibold">invalid<a href="#cformselect-invalid" aria-label="CFormSelect invalid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to invalid.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-label">
+        <td className="text-primary fw-semibold">label<a href="#cformselect-label" aria-label="CFormSelect label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add a caption for a component.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-on-change">
+        <td className="text-primary fw-semibold">onChange<a href="#cformselect-on-change" aria-label="CFormSelect onChange permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ChangeEventHandler\<HTMLSelectElement>`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-options">
+        <td className="text-primary fw-semibold">options<a href="#cformselect-options" aria-label="CFormSelect options permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`Option[]`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Options list of the select component. Available keys: <code>{`label`}</code>, <code>{`value`}</code>, <code>{`disabled`}</code>.<br />
+Examples:</p>
+<ul>
+<li><code>{`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}</code></li>
+<li><code>{`options={['js', 'html']}`}</code></li>
+</ul>
+        </td>
+      </tr>
+      <tr id="cformselect-size">
+        <td className="text-primary fw-semibold">size<a href="#cformselect-size" aria-label="CFormSelect size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-text">
+        <td className="text-primary fw-semibold">text<a href="#cformselect-text" aria-label="CFormSelect text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add helper text to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-tooltip-feedback">
+        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformselect-tooltip-feedback" aria-label="CFormSelect tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Display validation feedback in a styled tooltip.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-valid">
+        <td className="text-primary fw-semibold">valid<a href="#cformselect-valid" aria-label="CFormSelect valid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
+      </tr>
+      <tr id="cformselect-value">
+        <td className="text-primary fw-semibold">value<a href="#cformselect-value" aria-label="CFormSelect value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The <code>{`value`}</code> attribute of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx
index fa8e1bf0..a53296f0 100644
--- a/packages/docs/content/api/CFormSwitch.api.mdx
+++ b/packages/docs/content/api/CFormSwitch.api.mdx
@@ -5,13 +5,96 @@ import { CFormSwitch } from '@coreui/react'
 import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - |
-| **invalid** | Set component validation state to invalid. | `boolean` | - |
-| **label** | The element represents a caption for a component. | `ReactNode` | - |
-| **reverse** | Put switch on the opposite side. | `boolean` | - |
-| **size** | Size the component large or extra large. Works only with `switch`. | `'lg'` \| `'xl'` | - |
-| **type** | Specifies the type of component. | `'checkbox'` \| `'radio'` | checkbox |
-| **valid** | Set component validation state to valid. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformswitch-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformswitch-class-name" aria-label="CFormSwitch className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformswitch-id">
+        <td className="text-primary fw-semibold">id<a href="#cformswitch-id" aria-label="CFormSwitch id permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The id global attribute defines an identifier (ID) that must be unique in the whole document.</p>
+        </td>
+      </tr>
+      <tr id="cformswitch-invalid">
+        <td className="text-primary fw-semibold">invalid<a href="#cformswitch-invalid" aria-label="CFormSwitch invalid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to invalid.</p>
+        </td>
+      </tr>
+      <tr id="cformswitch-label">
+        <td className="text-primary fw-semibold">label<a href="#cformswitch-label" aria-label="CFormSwitch label permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The element represents a caption for a component.</p>
+        </td>
+      </tr>
+      <tr id="cformswitch-reverse">
+        <td className="text-primary fw-semibold">reverse<a href="#cformswitch-reverse" aria-label="CFormSwitch reverse permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Put switch on the opposite side.</p>
+        </td>
+      </tr>
+      <tr id="cformswitch-size">
+        <td className="text-primary fw-semibold">size<a href="#cformswitch-size" aria-label="CFormSwitch size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component large or extra large. Works only with <code>{`switch`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformswitch-type">
+        <td className="text-primary fw-semibold">type<a href="#cformswitch-type" aria-label="CFormSwitch type permalink" className="anchor-link after">#</a></td>
+        <td><code>{`checkbox`}</code></td>
+        <td><code>{`'checkbox'`}</code>, <code>{`'radio'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the type of component.</p>
+        </td>
+      </tr>
+      <tr id="cformswitch-valid">
+        <td className="text-primary fw-semibold">valid<a href="#cformswitch-valid" aria-label="CFormSwitch valid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx
index 98e40c42..913a03b8 100644
--- a/packages/docs/content/api/CFormText.api.mdx
+++ b/packages/docs/content/api/CFormText.api.mdx
@@ -5,7 +5,36 @@ import { CFormText } from '@coreui/react'
 import CFormText from '@coreui/react/src/components/form/CFormText'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformtext-as">
+        <td className="text-primary fw-semibold">as<a href="#cformtext-as" aria-label="CFormText as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cformtext-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformtext-class-name" aria-label="CFormText className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx
index 552a328a..c1f9db42 100644
--- a/packages/docs/content/api/CFormTextarea.api.mdx
+++ b/packages/docs/content/api/CFormTextarea.api.mdx
@@ -5,21 +5,176 @@ import { CFormTextarea } from '@coreui/react'
 import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - |
-| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - |
-| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - |
-| **invalid** | Set component validation state to invalid. | `boolean` | - |
-| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - |
-| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler<HTMLTextAreaElement>` | - |
-| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | `boolean` | - |
-| **readOnly** | Toggle the readonly state for the component. | `boolean` | - |
-| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - |
-| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - |
-| **valid** | Set component validation state to valid. | `boolean` | - |
-| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cformtextarea-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cformtextarea-class-name" aria-label="CFormTextarea className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cformtextarea-disabled" aria-label="CFormTextarea disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-feedback">
+        <td className="text-primary fw-semibold">feedback<a href="#cformtextarea-feedback" aria-label="CFormTextarea feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-feedback-invalid">
+        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformtextarea-feedback-invalid" aria-label="CFormTextarea feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-feedback-valid">
+        <td className="text-primary fw-semibold">feedbackValid<a href="#cformtextarea-feedback-valid" aria-label="CFormTextarea feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-floating-class-name">
+        <td className="text-primary fw-semibold">floatingClassName<a href="#cformtextarea-floating-class-name" aria-label="CFormTextarea floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the floating label wrapper.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-floating-label">
+        <td className="text-primary fw-semibold">floatingLabel<a href="#cformtextarea-floating-label" aria-label="CFormTextarea floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-invalid">
+        <td className="text-primary fw-semibold">invalid<a href="#cformtextarea-invalid" aria-label="CFormTextarea invalid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to invalid.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-label">
+        <td className="text-primary fw-semibold">label<a href="#cformtextarea-label" aria-label="CFormTextarea label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add a caption for a component.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-on-change">
+        <td className="text-primary fw-semibold">onChange<a href="#cformtextarea-on-change" aria-label="CFormTextarea onChange permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ChangeEventHandler\<HTMLTextAreaElement>`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-plain-text">
+        <td className="text-primary fw-semibold">plainText<a href="#cformtextarea-plain-text" aria-label="CFormTextarea plainText permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>{`readonly`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-read-only">
+        <td className="text-primary fw-semibold">readOnly<a href="#cformtextarea-read-only" aria-label="CFormTextarea readOnly permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the readonly state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-text">
+        <td className="text-primary fw-semibold">text<a href="#cformtextarea-text" aria-label="CFormTextarea text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add helper text to the component.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-tooltip-feedback">
+        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformtextarea-tooltip-feedback" aria-label="CFormTextarea tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Display validation feedback in a styled tooltip.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-valid">
+        <td className="text-primary fw-semibold">valid<a href="#cformtextarea-valid" aria-label="CFormTextarea valid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
+      </tr>
+      <tr id="cformtextarea-value">
+        <td className="text-primary fw-semibold">value<a href="#cformtextarea-value" aria-label="CFormTextarea value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The <code>{`value`}</code> attribute of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx
index ae583495..44632878 100644
--- a/packages/docs/content/api/CHeader.api.mdx
+++ b/packages/docs/content/api/CHeader.api.mdx
@@ -5,8 +5,46 @@ import { CHeader } from '@coreui/react'
 import CHeader from '@coreui/react/src/components/header/CHeader'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **container** | Defines optional container wrapping children elements. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'fluid'` | - |
-| **position** | Place header in non-static positions. | `'fixed'` \| `'sticky'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cheader-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cheader-class-name" aria-label="CHeader className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cheader-container">
+        <td className="text-primary fw-semibold">container<a href="#cheader-container" aria-label="CHeader container permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'fluid'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Defines optional container wrapping children elements.</p>
+        </td>
+      </tr>
+      <tr id="cheader-position">
+        <td className="text-primary fw-semibold">position<a href="#cheader-position" aria-label="CHeader position permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'fixed'`}</code>, <code>{`'sticky'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Place header in non-static positions.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx
index 7d81e72d..77a0ecc2 100644
--- a/packages/docs/content/api/CHeaderBrand.api.mdx
+++ b/packages/docs/content/api/CHeaderBrand.api.mdx
@@ -5,7 +5,36 @@ import { CHeaderBrand } from '@coreui/react'
 import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cheaderbrand-as">
+        <td className="text-primary fw-semibold">as<a href="#cheaderbrand-as" aria-label="CHeaderBrand as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cheaderbrand-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cheaderbrand-class-name" aria-label="CHeaderBrand className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx
index b779fdf3..1af7b1d8 100644
--- a/packages/docs/content/api/CHeaderDivider.api.mdx
+++ b/packages/docs/content/api/CHeaderDivider.api.mdx
@@ -5,6 +5,26 @@ import { CHeaderDivider } from '@coreui/react'
 import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cheaderdivider-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cheaderdivider-class-name" aria-label="CHeaderDivider className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx
index e839f694..79bb4e92 100644
--- a/packages/docs/content/api/CHeaderNav.api.mdx
+++ b/packages/docs/content/api/CHeaderNav.api.mdx
@@ -5,7 +5,36 @@ import { CHeaderNav } from '@coreui/react'
 import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cheadernav-as">
+        <td className="text-primary fw-semibold">as<a href="#cheadernav-as" aria-label="CHeaderNav as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cheadernav-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cheadernav-class-name" aria-label="CHeaderNav className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx
index bcae33fa..dab08603 100644
--- a/packages/docs/content/api/CHeaderText.api.mdx
+++ b/packages/docs/content/api/CHeaderText.api.mdx
@@ -5,6 +5,26 @@ import { CHeaderText } from '@coreui/react'
 import CHeaderText from '@coreui/react/src/components/header/CHeaderText'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cheadertext-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cheadertext-class-name" aria-label="CHeaderText className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx
index 63b8d754..0f15f26b 100644
--- a/packages/docs/content/api/CHeaderToggler.api.mdx
+++ b/packages/docs/content/api/CHeaderToggler.api.mdx
@@ -5,6 +5,26 @@ import { CHeaderToggler } from '@coreui/react'
 import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cheadertoggler-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cheadertoggler-class-name" aria-label="CHeaderToggler className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx
index 83244b3c..0e5e3056 100644
--- a/packages/docs/content/api/CIcon.api.mdx
+++ b/packages/docs/content/api/CIcon.api.mdx
@@ -5,16 +5,126 @@ import { CIcon } from '@coreui/icons-react'
 import CIcon from '@coreui/icons-react/src/CIcon'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **content** **_Deprecated 3.0+_** | Use `icon={...}` instead of | `string` \| `string[]` | - |
-| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `string[]` | - |
-| **height** | The height attribute defines the vertical length of an icon. | `number` | - |
-| **icon** | Name of the icon placed in React object or SVG content. | `string` \| `string[]` | - |
-| **name** **_Deprecated 3.0+_** | Use `icon="..."` instead of | `string` | - |
-| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom'` \| `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - |
-| **title** | Title tag content. | `string` | - |
-| **use** | If defined component will be rendered using 'use' tag. | `string` | - |
-| **viewBox** | The viewBox attribute defines the position and dimension of an SVG viewport. | `string` | - |
-| **width** | The width attribute defines the horizontal length of an icon. | `number` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cicon-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cicon-class-name" aria-label="CIcon className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cicon-content">
+        <td className="text-primary fw-semibold">content<a href="#cicon-content" aria-label="CIcon content permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 3.0</span></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Use <code>{`icon={...}`}</code> instead of</p>
+        </td>
+      </tr>
+      <tr id="cicon-custom-class-name">
+        <td className="text-primary fw-semibold">customClassName<a href="#cicon-custom-class-name" aria-label="CIcon customClassName permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</p>
+        </td>
+      </tr>
+      <tr id="cicon-height">
+        <td className="text-primary fw-semibold">height<a href="#cicon-height" aria-label="CIcon height permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The height attribute defines the vertical length of an icon.</p>
+        </td>
+      </tr>
+      <tr id="cicon-icon">
+        <td className="text-primary fw-semibold">icon<a href="#cicon-icon" aria-label="CIcon icon permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Name of the icon placed in React object or SVG content.</p>
+        </td>
+      </tr>
+      <tr id="cicon-name">
+        <td className="text-primary fw-semibold">name<a href="#cicon-name" aria-label="CIcon name permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 3.0</span></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Use <code>{`icon="..."`}</code> instead of</p>
+        </td>
+      </tr>
+      <tr id="cicon-size">
+        <td className="text-primary fw-semibold">size<a href="#cicon-size" aria-label="CIcon size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'custom'`}</code>, <code>{`'custom-size'`}</code>, <code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'3xl'`}</code>, <code>{`'4xl'`}</code>, <code>{`'5xl'`}</code>, <code>{`'6xl'`}</code>, <code>{`'7xl'`}</code>, <code>{`'8xl'`}</code>, <code>{`'9xl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.</p>
+        </td>
+      </tr>
+      <tr id="cicon-title">
+        <td className="text-primary fw-semibold">title<a href="#cicon-title" aria-label="CIcon title permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Title tag content.</p>
+        </td>
+      </tr>
+      <tr id="cicon-use">
+        <td className="text-primary fw-semibold">use<a href="#cicon-use" aria-label="CIcon use permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>If defined component will be rendered using 'use' tag.</p>
+        </td>
+      </tr>
+      <tr id="cicon-view-box">
+        <td className="text-primary fw-semibold">viewBox<a href="#cicon-view-box" aria-label="CIcon viewBox permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The viewBox attribute defines the position and dimension of an SVG viewport.</p>
+        </td>
+      </tr>
+      <tr id="cicon-width">
+        <td className="text-primary fw-semibold">width<a href="#cicon-width" aria-label="CIcon width permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The width attribute defines the horizontal length of an icon.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx
index 29a8ed9f..808446ad 100644
--- a/packages/docs/content/api/CIconSvg.api.mdx
+++ b/packages/docs/content/api/CIconSvg.api.mdx
@@ -5,11 +5,76 @@ import { CIconSvg } from '@coreui/icons-react'
 import CIconSvg from '@coreui/icons-react/src/CIconSvg'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `string[]` | - |
-| **height** | The height attribute defines the vertical length of an icon. | `number` | - |
-| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom'` \| `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - |
-| **title** | Title tag content. | `string` | - |
-| **width** | The width attribute defines the horizontal length of an icon. | `number` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ciconsvg-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ciconsvg-class-name" aria-label="CIconSvg className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="ciconsvg-custom-class-name">
+        <td className="text-primary fw-semibold">customClassName<a href="#ciconsvg-custom-class-name" aria-label="CIconSvg customClassName permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</p>
+        </td>
+      </tr>
+      <tr id="ciconsvg-height">
+        <td className="text-primary fw-semibold">height<a href="#ciconsvg-height" aria-label="CIconSvg height permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The height attribute defines the vertical length of an icon.</p>
+        </td>
+      </tr>
+      <tr id="ciconsvg-size">
+        <td className="text-primary fw-semibold">size<a href="#ciconsvg-size" aria-label="CIconSvg size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'custom'`}</code>, <code>{`'custom-size'`}</code>, <code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'3xl'`}</code>, <code>{`'4xl'`}</code>, <code>{`'5xl'`}</code>, <code>{`'6xl'`}</code>, <code>{`'7xl'`}</code>, <code>{`'8xl'`}</code>, <code>{`'9xl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.</p>
+        </td>
+      </tr>
+      <tr id="ciconsvg-title">
+        <td className="text-primary fw-semibold">title<a href="#ciconsvg-title" aria-label="CIconSvg title permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Title tag content.</p>
+        </td>
+      </tr>
+      <tr id="ciconsvg-width">
+        <td className="text-primary fw-semibold">width<a href="#ciconsvg-width" aria-label="CIconSvg width permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The width attribute defines the horizontal length of an icon.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx
index 1c5a685c..de5157c7 100644
--- a/packages/docs/content/api/CImage.api.mdx
+++ b/packages/docs/content/api/CImage.api.mdx
@@ -5,10 +5,66 @@ import { CImage } from '@coreui/react'
 import CImage from '@coreui/react/src/components/image/CImage'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **align** | Set the horizontal aligment. | `'start'` \| `'center'` \| `'end'` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **fluid** | Make image responsive. | `boolean` | - |
-| **rounded** | Make image rounded. | `boolean` | - |
-| **thumbnail** | Give an image a rounded 1px border appearance. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cimage-align">
+        <td className="text-primary fw-semibold">align<a href="#cimage-align" aria-label="CImage align permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'start'`}</code>, <code>{`'center'`}</code>, <code>{`'end'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the horizontal aligment.</p>
+        </td>
+      </tr>
+      <tr id="cimage-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cimage-class-name" aria-label="CImage className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cimage-fluid">
+        <td className="text-primary fw-semibold">fluid<a href="#cimage-fluid" aria-label="CImage fluid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Make image responsive.</p>
+        </td>
+      </tr>
+      <tr id="cimage-rounded">
+        <td className="text-primary fw-semibold">rounded<a href="#cimage-rounded" aria-label="CImage rounded permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Make image rounded.</p>
+        </td>
+      </tr>
+      <tr id="cimage-thumbnail">
+        <td className="text-primary fw-semibold">thumbnail<a href="#cimage-thumbnail" aria-label="CImage thumbnail permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Give an image a rounded 1px border appearance.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx
index 25adc26c..ed37df4f 100644
--- a/packages/docs/content/api/CInputGroup.api.mdx
+++ b/packages/docs/content/api/CInputGroup.api.mdx
@@ -5,7 +5,36 @@ import { CInputGroup } from '@coreui/react'
 import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cinputgroup-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cinputgroup-class-name" aria-label="CInputGroup className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cinputgroup-size">
+        <td className="text-primary fw-semibold">size<a href="#cinputgroup-size" aria-label="CInputGroup size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx
index b76f7fd8..b067a1e9 100644
--- a/packages/docs/content/api/CInputGroupText.api.mdx
+++ b/packages/docs/content/api/CInputGroupText.api.mdx
@@ -5,7 +5,36 @@ import { CInputGroupText } from '@coreui/react'
 import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'form')` \| `(ElementType & 'slot')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cinputgrouptext-as">
+        <td className="text-primary fw-semibold">as<a href="#cinputgrouptext-as" aria-label="CInputGroupText as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'span')`}</code>, <code>{`(ElementType & 'form')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cinputgrouptext-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cinputgrouptext-class-name" aria-label="CInputGroupText className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx
index e2993154..714ce42e 100644
--- a/packages/docs/content/api/CLink.api.mdx
+++ b/packages/docs/content/api/CLink.api.mdx
@@ -5,10 +5,66 @@ import { CLink } from '@coreui/react'
 import CLink from '@coreui/react/src/components/link/CLink'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="clink-active">
+        <td className="text-primary fw-semibold">active<a href="#clink-active" aria-label="CLink active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="clink-as">
+        <td className="text-primary fw-semibold">as<a href="#clink-as" aria-label="CLink as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="clink-class-name">
+        <td className="text-primary fw-semibold">className<a href="#clink-class-name" aria-label="CLink className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="clink-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#clink-disabled" aria-label="CLink disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="clink-href">
+        <td className="text-primary fw-semibold">href<a href="#clink-href" aria-label="CLink href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx
index b2bbff7e..5846f702 100644
--- a/packages/docs/content/api/CListGroup.api.mdx
+++ b/packages/docs/content/api/CListGroup.api.mdx
@@ -5,9 +5,56 @@ import { CListGroup } from '@coreui/react'
 import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **flush** | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`). | `boolean` | - |
-| **layout** | Specify a layout type. | `'horizontal'` \| `'horizontal-sm'` \| `'horizontal-md'` \| `'horizontal-lg'` \| `'horizontal-xl'` \| `'horizontal-xxl'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="clistgroup-as">
+        <td className="text-primary fw-semibold">as<a href="#clistgroup-as" aria-label="CListGroup as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="clistgroup-class-name">
+        <td className="text-primary fw-semibold">className<a href="#clistgroup-class-name" aria-label="CListGroup className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="clistgroup-flush">
+        <td className="text-primary fw-semibold">flush<a href="#clistgroup-flush" aria-label="CListGroup flush permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>{`<CCard>`}</code>).</p>
+        </td>
+      </tr>
+      <tr id="clistgroup-layout">
+        <td className="text-primary fw-semibold">layout<a href="#clistgroup-layout" aria-label="CListGroup layout permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'horizontal'`}</code>, <code>{`'horizontal-sm'`}</code>, <code>{`'horizontal-md'`}</code>, <code>{`'horizontal-lg'`}</code>, <code>{`'horizontal-xl'`}</code>, <code>{`'horizontal-xxl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specify a layout type.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx
index b39ab4f1..b2effb43 100644
--- a/packages/docs/content/api/CListGroupItem.api.mdx
+++ b/packages/docs/content/api/CListGroupItem.api.mdx
@@ -5,10 +5,66 @@ import { CListGroupItem } from '@coreui/react'
 import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupItem'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | li |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="clistgroupitem-active">
+        <td className="text-primary fw-semibold">active<a href="#clistgroupitem-active" aria-label="CListGroupItem active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="clistgroupitem-as">
+        <td className="text-primary fw-semibold">as<a href="#clistgroupitem-as" aria-label="CListGroupItem as permalink" className="anchor-link after">#</a></td>
+        <td><code>{`li`}</code></td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="clistgroupitem-class-name">
+        <td className="text-primary fw-semibold">className<a href="#clistgroupitem-class-name" aria-label="CListGroupItem className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="clistgroupitem-color">
+        <td className="text-primary fw-semibold">color<a href="#clistgroupitem-color" aria-label="CListGroupItem color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="clistgroupitem-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#clistgroupitem-disabled" aria-label="CListGroupItem disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx
index 1f5a391a..a8e467cd 100644
--- a/packages/docs/content/api/CModal.api.mdx
+++ b/packages/docs/content/api/CModal.api.mdx
@@ -5,21 +5,176 @@ import { CModal } from '@coreui/react'
 import CModal from '@coreui/react/src/components/modal/CModal'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - |
-| **backdrop** | Apply a backdrop on body while modal is open. | `boolean` \| `'static'` | true |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **container** **_5.3.0+_** | Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - |
-| **focus** **_4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true |
-| **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |
-| **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true |
-| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - |
-| **onClosePrevented** | Callback fired when the component requests to be closed. | `() => void` | - |
-| **onShow** | Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false. | `() => void` | - |
-| **portal** | Generates modal using createPortal. | `boolean` | true |
-| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | `boolean` | - |
-| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - |
-| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | `boolean` | true |
-| **unmountOnClose** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | `boolean` | true |
-| **visible** | Toggle the visibility of modal component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cmodal-alignment">
+        <td className="text-primary fw-semibold">alignment<a href="#cmodal-alignment" aria-label="CModal alignment permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'top'`}</code>, <code>{`'center'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Align the modal in the center or top of the screen.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-backdrop">
+        <td className="text-primary fw-semibold">backdrop<a href="#cmodal-backdrop" aria-label="CModal backdrop permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code>, <code>{`'static'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Apply a backdrop on body while modal is open.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cmodal-class-name" aria-label="CModal className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-container">
+        <td className="text-primary fw-semibold">container<a href="#cmodal-container" aria-label="CModal container permalink" className="anchor-link after">#</a><span className="badge bg-success">5.3.0+</span></td>
+        <td>-</td>
+        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-focus">
+        <td className="text-primary fw-semibold">focus<a href="#cmodal-focus" aria-label="CModal focus permalink" className="anchor-link after">#</a><span className="badge bg-success">4.10.0+</span></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Puts the focus on the modal when shown.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-fullscreen">
+        <td className="text-primary fw-semibold">fullscreen<a href="#cmodal-fullscreen" aria-label="CModal fullscreen permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set modal to covers the entire user viewport.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-keyboard">
+        <td className="text-primary fw-semibold">keyboard<a href="#cmodal-keyboard" aria-label="CModal keyboard permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Closes the modal when escape key is pressed.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-on-close">
+        <td className="text-primary fw-semibold">onClose<a href="#cmodal-on-close" aria-label="CModal onClose permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be closed.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-on-close-prevented">
+        <td className="text-primary fw-semibold">onClosePrevented<a href="#cmodal-on-close-prevented" aria-label="CModal onClosePrevented permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be closed.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#cmodal-on-show" aria-label="CModal onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-portal">
+        <td className="text-primary fw-semibold">portal<a href="#cmodal-portal" aria-label="CModal portal permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Generates modal using createPortal.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-scrollable">
+        <td className="text-primary fw-semibold">scrollable<a href="#cmodal-scrollable" aria-label="CModal scrollable permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Create a scrollable modal that allows scrolling the modal body.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-size">
+        <td className="text-primary fw-semibold">size<a href="#cmodal-size" aria-label="CModal size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small, large, or extra large.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-transition">
+        <td className="text-primary fw-semibold">transition<a href="#cmodal-transition" aria-label="CModal transition permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Remove animation to create modal that simply appear rather than fade in to view.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-unmount-on-close">
+        <td className="text-primary fw-semibold">unmountOnClose<a href="#cmodal-unmount-on-close" aria-label="CModal unmountOnClose permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</p>
+        </td>
+      </tr>
+      <tr id="cmodal-visible">
+        <td className="text-primary fw-semibold">visible<a href="#cmodal-visible" aria-label="CModal visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of modal component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx
index be05908c..6f12c3d7 100644
--- a/packages/docs/content/api/CModalBody.api.mdx
+++ b/packages/docs/content/api/CModalBody.api.mdx
@@ -5,6 +5,26 @@ import { CModalBody } from '@coreui/react'
 import CModalBody from '@coreui/react/src/components/modal/CModalBody'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cmodalbody-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cmodalbody-class-name" aria-label="CModalBody className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx
index 3e4986c5..0d4c4280 100644
--- a/packages/docs/content/api/CModalContent.api.mdx
+++ b/packages/docs/content/api/CModalContent.api.mdx
@@ -5,6 +5,26 @@ import { CModalContent } from '@coreui/react'
 import CModalContent from '@coreui/react/src/components/modal/CModalContent'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cmodalcontent-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cmodalcontent-class-name" aria-label="CModalContent className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx
index 4697259f..a4d58792 100644
--- a/packages/docs/content/api/CModalDialog.api.mdx
+++ b/packages/docs/content/api/CModalDialog.api.mdx
@@ -5,10 +5,66 @@ import { CModalDialog } from '@coreui/react'
 import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |
-| **scrollable** | Does the modal dialog itself scroll, or does the whole dialog scroll within the window. | `boolean` | - |
-| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cmodaldialog-alignment">
+        <td className="text-primary fw-semibold">alignment<a href="#cmodaldialog-alignment" aria-label="CModalDialog alignment permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'top'`}</code>, <code>{`'center'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Align the modal in the center or top of the screen.</p>
+        </td>
+      </tr>
+      <tr id="cmodaldialog-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cmodaldialog-class-name" aria-label="CModalDialog className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cmodaldialog-fullscreen">
+        <td className="text-primary fw-semibold">fullscreen<a href="#cmodaldialog-fullscreen" aria-label="CModalDialog fullscreen permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set modal to covers the entire user viewport.</p>
+        </td>
+      </tr>
+      <tr id="cmodaldialog-scrollable">
+        <td className="text-primary fw-semibold">scrollable<a href="#cmodaldialog-scrollable" aria-label="CModalDialog scrollable permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Does the modal dialog itself scroll, or does the whole dialog scroll within the window.</p>
+        </td>
+      </tr>
+      <tr id="cmodaldialog-size">
+        <td className="text-primary fw-semibold">size<a href="#cmodaldialog-size" aria-label="CModalDialog size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small, large, or extra large.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx
index 3f52a784..2ac39de7 100644
--- a/packages/docs/content/api/CModalFooter.api.mdx
+++ b/packages/docs/content/api/CModalFooter.api.mdx
@@ -5,6 +5,26 @@ import { CModalFooter } from '@coreui/react'
 import CModalFooter from '@coreui/react/src/components/modal/CModalFooter'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cmodalfooter-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cmodalfooter-class-name" aria-label="CModalFooter className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx
index 9c78e6e8..42f592c5 100644
--- a/packages/docs/content/api/CModalHeader.api.mdx
+++ b/packages/docs/content/api/CModalHeader.api.mdx
@@ -5,7 +5,36 @@ import { CModalHeader } from '@coreui/react'
 import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **closeButton** | Add a close button component to the header. | `boolean` | true |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cmodalheader-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cmodalheader-class-name" aria-label="CModalHeader className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cmodalheader-close-button">
+        <td className="text-primary fw-semibold">closeButton<a href="#cmodalheader-close-button" aria-label="CModalHeader closeButton permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add a close button component to the header.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx
index c476b185..8bc445c1 100644
--- a/packages/docs/content/api/CModalTitle.api.mdx
+++ b/packages/docs/content/api/CModalTitle.api.mdx
@@ -5,7 +5,36 @@ import { CModalTitle } from '@coreui/react'
 import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cmodaltitle-as">
+        <td className="text-primary fw-semibold">as<a href="#cmodaltitle-as" aria-label="CModalTitle as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h5')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cmodaltitle-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cmodaltitle-class-name" aria-label="CModalTitle className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx
index 9bb57841..bb8b1ddd 100644
--- a/packages/docs/content/api/CNav.api.mdx
+++ b/packages/docs/content/api/CNav.api.mdx
@@ -5,9 +5,56 @@ import { CNav } from '@coreui/react'
 import CNav from '@coreui/react/src/components/nav/CNav'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - |
-| **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` \| `'underline-border'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnav-as">
+        <td className="text-primary fw-semibold">as<a href="#cnav-as" aria-label="CNav as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnav-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnav-class-name" aria-label="CNav className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cnav-layout">
+        <td className="text-primary fw-semibold">layout<a href="#cnav-layout" aria-label="CNav layout permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'fill'`}</code>, <code>{`'justified'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specify a layout type for component.</p>
+        </td>
+      </tr>
+      <tr id="cnav-variant">
+        <td className="text-primary fw-semibold">variant<a href="#cnav-variant" aria-label="CNav variant permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'pills'`}</code>, <code>{`'tabs'`}</code>, <code>{`'underline'`}</code>, <code>{`'underline-border'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the nav variant to tabs or pills.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx
index 31413677..590fdd74 100644
--- a/packages/docs/content/api/CNavGroup.api.mdx
+++ b/packages/docs/content/api/CNavGroup.api.mdx
@@ -5,10 +5,66 @@ import { CNavGroup } from '@coreui/react'
 import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **compact** | Make nav group more compact by cutting all `padding` in half. | `boolean` | - |
-| **toggler** | Set group toggler label. | `ReactNode` | - |
-| **visible** | Show nav group items. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavgroup-as">
+        <td className="text-primary fw-semibold">as<a href="#cnavgroup-as" aria-label="CNavGroup as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnavgroup-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavgroup-class-name" aria-label="CNavGroup className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavgroup-compact">
+        <td className="text-primary fw-semibold">compact<a href="#cnavgroup-compact" aria-label="CNavGroup compact permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Make nav group more compact by cutting all <code>{`padding`}</code> in half.</p>
+        </td>
+      </tr>
+      <tr id="cnavgroup-toggler">
+        <td className="text-primary fw-semibold">toggler<a href="#cnavgroup-toggler" aria-label="CNavGroup toggler permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set group toggler label.</p>
+        </td>
+      </tr>
+      <tr id="cnavgroup-visible">
+        <td className="text-primary fw-semibold">visible<a href="#cnavgroup-visible" aria-label="CNavGroup visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Show nav group items.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx
index 467622bc..b3cd73c9 100644
--- a/packages/docs/content/api/CNavGroupItems.api.mdx
+++ b/packages/docs/content/api/CNavGroupItems.api.mdx
@@ -5,7 +5,36 @@ import { CNavGroupItems } from '@coreui/react'
 import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavgroupitems-as">
+        <td className="text-primary fw-semibold">as<a href="#cnavgroupitems-as" aria-label="CNavGroupItems as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnavgroupitems-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavgroupitems-class-name" aria-label="CNavGroupItems className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx
index 426df0b1..9705e93b 100644
--- a/packages/docs/content/api/CNavItem.api.mdx
+++ b/packages/docs/content/api/CNavItem.api.mdx
@@ -5,10 +5,66 @@ import { CNavItem } from '@coreui/react'
 import CNavItem from '@coreui/react/src/components/nav/CNavItem'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavitem-active">
+        <td className="text-primary fw-semibold">active<a href="#cnavitem-active" aria-label="CNavItem active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavitem-as">
+        <td className="text-primary fw-semibold">as<a href="#cnavitem-as" aria-label="CNavItem as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnavitem-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavitem-class-name" aria-label="CNavItem className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavitem-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cnavitem-disabled" aria-label="CNavItem disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavitem-href">
+        <td className="text-primary fw-semibold">href<a href="#cnavitem-href" aria-label="CNavItem href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx
index 6d4c07e2..d99db6a8 100644
--- a/packages/docs/content/api/CNavLink.api.mdx
+++ b/packages/docs/content/api/CNavLink.api.mdx
@@ -5,10 +5,66 @@ import { CNavLink } from '@coreui/react'
 import CNavLink from '@coreui/react/src/components/nav/CNavLink'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavlink-active">
+        <td className="text-primary fw-semibold">active<a href="#cnavlink-active" aria-label="CNavLink active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavlink-as">
+        <td className="text-primary fw-semibold">as<a href="#cnavlink-as" aria-label="CNavLink as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnavlink-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavlink-class-name" aria-label="CNavLink className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavlink-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cnavlink-disabled" aria-label="CNavLink disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavlink-href">
+        <td className="text-primary fw-semibold">href<a href="#cnavlink-href" aria-label="CNavLink href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx
index 74c2c7b6..b393d3d7 100644
--- a/packages/docs/content/api/CNavTitle.api.mdx
+++ b/packages/docs/content/api/CNavTitle.api.mdx
@@ -5,7 +5,36 @@ import { CNavTitle } from '@coreui/react'
 import CNavTitle from '@coreui/react/src/components/nav/CNavTitle'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavtitle-as">
+        <td className="text-primary fw-semibold">as<a href="#cnavtitle-as" aria-label="CNavTitle as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnavtitle-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavtitle-class-name" aria-label="CNavTitle className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx
index 67a11a51..f26f79ea 100644
--- a/packages/docs/content/api/CNavbar.api.mdx
+++ b/packages/docs/content/api/CNavbar.api.mdx
@@ -5,12 +5,86 @@ import { CNavbar } from '@coreui/react'
 import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'nav')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **colorScheme** | Sets if the color of text should be colored for a light or dark background. | `'dark'` \| `'light'` | - |
-| **container** | Defines optional container wrapping children elements. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'fluid'` | - |
-| **expand** | Defines the responsive breakpoint to determine when content collapses. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |
-| **placement** | Place component in non-static positions. | `'fixed-top'` \| `'fixed-bottom'` \| `'sticky-top'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavbar-as">
+        <td className="text-primary fw-semibold">as<a href="#cnavbar-as" aria-label="CNavbar as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'nav')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnavbar-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavbar-class-name" aria-label="CNavbar className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavbar-color">
+        <td className="text-primary fw-semibold">color<a href="#cnavbar-color" aria-label="CNavbar color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cnavbar-color-scheme">
+        <td className="text-primary fw-semibold">colorScheme<a href="#cnavbar-color-scheme" aria-label="CNavbar colorScheme permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'dark'`}</code>, <code>{`'light'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets if the color of text should be colored for a light or dark background.</p>
+        </td>
+      </tr>
+      <tr id="cnavbar-container">
+        <td className="text-primary fw-semibold">container<a href="#cnavbar-container" aria-label="CNavbar container permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'fluid'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Defines optional container wrapping children elements.</p>
+        </td>
+      </tr>
+      <tr id="cnavbar-expand">
+        <td className="text-primary fw-semibold">expand<a href="#cnavbar-expand" aria-label="CNavbar expand permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Defines the responsive breakpoint to determine when content collapses.</p>
+        </td>
+      </tr>
+      <tr id="cnavbar-placement">
+        <td className="text-primary fw-semibold">placement<a href="#cnavbar-placement" aria-label="CNavbar placement permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'fixed-top'`}</code>, <code>{`'fixed-bottom'`}</code>, <code>{`'sticky-top'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Place component in non-static positions.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx
index ba23022d..c05b546e 100644
--- a/packages/docs/content/api/CNavbarBrand.api.mdx
+++ b/packages/docs/content/api/CNavbarBrand.api.mdx
@@ -5,8 +5,46 @@ import { CNavbarBrand } from '@coreui/react'
 import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavbarbrand-as">
+        <td className="text-primary fw-semibold">as<a href="#cnavbarbrand-as" aria-label="CNavbarBrand as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnavbarbrand-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavbarbrand-class-name" aria-label="CNavbarBrand className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cnavbarbrand-href">
+        <td className="text-primary fw-semibold">href<a href="#cnavbarbrand-href" aria-label="CNavbarBrand href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx
index 0d7f3c28..14d1c0e7 100644
--- a/packages/docs/content/api/CNavbarNav.api.mdx
+++ b/packages/docs/content/api/CNavbarNav.api.mdx
@@ -5,7 +5,36 @@ import { CNavbarNav } from '@coreui/react'
 import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavbarnav-as">
+        <td className="text-primary fw-semibold">as<a href="#cnavbarnav-as" aria-label="CNavbarNav as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cnavbarnav-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavbarnav-class-name" aria-label="CNavbarNav className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx
index 115a93b5..716bc9a8 100644
--- a/packages/docs/content/api/CNavbarText.api.mdx
+++ b/packages/docs/content/api/CNavbarText.api.mdx
@@ -5,6 +5,26 @@ import { CNavbarText } from '@coreui/react'
 import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavbartext-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavbartext-class-name" aria-label="CNavbarText className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx
index 23763e4e..94849ee1 100644
--- a/packages/docs/content/api/CNavbarToggler.api.mdx
+++ b/packages/docs/content/api/CNavbarToggler.api.mdx
@@ -5,6 +5,26 @@ import { CNavbarToggler } from '@coreui/react'
 import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cnavbartoggler-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cnavbartoggler-class-name" aria-label="CNavbarToggler className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx
index 5fc4c054..57ddbfb8 100644
--- a/packages/docs/content/api/COffcanvas.api.mdx
+++ b/packages/docs/content/api/COffcanvas.api.mdx
@@ -5,16 +5,126 @@ import { COffcanvas } from '@coreui/react'
 import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **backdrop** | Apply a backdrop on body while offcanvas is open. | `boolean` \| `'static'` | true |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **dark** | Sets a darker color scheme. | `boolean` | - |
-| **keyboard** | Closes the offcanvas when escape key is pressed. | `boolean` | true |
-| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **placement** | Components placement, there’s no default placement. | `'start'` \| `'end'` \| `'top'` \| `'bottom'` | - |
-| **portal** | Generates modal using createPortal. | `boolean` | false |
-| **responsive** **_4.6.0+_** | Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | true |
-| **scroll** | Allow body scrolling while offcanvas is open | `boolean` | false |
-| **visible** | Toggle the visibility of offcanvas component. | `boolean` | false |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="coffcanvas-backdrop">
+        <td className="text-primary fw-semibold">backdrop<a href="#coffcanvas-backdrop" aria-label="COffcanvas backdrop permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code>, <code>{`'static'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Apply a backdrop on body while offcanvas is open.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-class-name">
+        <td className="text-primary fw-semibold">className<a href="#coffcanvas-class-name" aria-label="COffcanvas className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-dark">
+        <td className="text-primary fw-semibold">dark<a href="#coffcanvas-dark" aria-label="COffcanvas dark permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets a darker color scheme.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-keyboard">
+        <td className="text-primary fw-semibold">keyboard<a href="#coffcanvas-keyboard" aria-label="COffcanvas keyboard permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Closes the offcanvas when escape key is pressed.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-on-hide">
+        <td className="text-primary fw-semibold">onHide<a href="#coffcanvas-on-hide" aria-label="COffcanvas onHide permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#coffcanvas-on-show" aria-label="COffcanvas onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-placement">
+        <td className="text-primary fw-semibold">placement<a href="#coffcanvas-placement" aria-label="COffcanvas placement permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'start'`}</code>, <code>{`'end'`}</code>, <code>{`'top'`}</code>, <code>{`'bottom'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Components placement, there’s no default placement.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-portal">
+        <td className="text-primary fw-semibold">portal<a href="#coffcanvas-portal" aria-label="COffcanvas portal permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Generates modal using createPortal.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-responsive">
+        <td className="text-primary fw-semibold">responsive<a href="#coffcanvas-responsive" aria-label="COffcanvas responsive permalink" className="anchor-link after">#</a><span className="badge bg-success">4.6.0+</span></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-scroll">
+        <td className="text-primary fw-semibold">scroll<a href="#coffcanvas-scroll" aria-label="COffcanvas scroll permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Allow body scrolling while offcanvas is open</p>
+        </td>
+      </tr>
+      <tr id="coffcanvas-visible">
+        <td className="text-primary fw-semibold">visible<a href="#coffcanvas-visible" aria-label="COffcanvas visible permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of offcanvas component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx
index 07838824..7baef6ab 100644
--- a/packages/docs/content/api/COffcanvasBody.api.mdx
+++ b/packages/docs/content/api/COffcanvasBody.api.mdx
@@ -5,6 +5,26 @@ import { COffcanvasBody } from '@coreui/react'
 import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBody'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="coffcanvasbody-class-name">
+        <td className="text-primary fw-semibold">className<a href="#coffcanvasbody-class-name" aria-label="COffcanvasBody className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx
index 6edbcc05..02b1c5a1 100644
--- a/packages/docs/content/api/COffcanvasHeader.api.mdx
+++ b/packages/docs/content/api/COffcanvasHeader.api.mdx
@@ -5,6 +5,26 @@ import { COffcanvasHeader } from '@coreui/react'
 import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasHeader'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="coffcanvasheader-class-name">
+        <td className="text-primary fw-semibold">className<a href="#coffcanvasheader-class-name" aria-label="COffcanvasHeader className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx
index ed737933..05b4767e 100644
--- a/packages/docs/content/api/COffcanvasTitle.api.mdx
+++ b/packages/docs/content/api/COffcanvasTitle.api.mdx
@@ -5,7 +5,36 @@ import { COffcanvasTitle } from '@coreui/react'
 import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="coffcanvastitle-as">
+        <td className="text-primary fw-semibold">as<a href="#coffcanvastitle-as" aria-label="COffcanvasTitle as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h5')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="coffcanvastitle-class-name">
+        <td className="text-primary fw-semibold">className<a href="#coffcanvastitle-class-name" aria-label="COffcanvasTitle className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx
index 39f9ea2d..22d8773a 100644
--- a/packages/docs/content/api/CPagination.api.mdx
+++ b/packages/docs/content/api/CPagination.api.mdx
@@ -5,8 +5,46 @@ import { CPagination } from '@coreui/react'
 import CPagination from '@coreui/react/src/components/pagination/CPagination'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **align** | Set the alignment of pagination components. | `'start'` \| `'center'` \| `'end'` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cpagination-align">
+        <td className="text-primary fw-semibold">align<a href="#cpagination-align" aria-label="CPagination align permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'start'`}</code>, <code>{`'center'`}</code>, <code>{`'end'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the alignment of pagination components.</p>
+        </td>
+      </tr>
+      <tr id="cpagination-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cpagination-class-name" aria-label="CPagination className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cpagination-size">
+        <td className="text-primary fw-semibold">size<a href="#cpagination-size" aria-label="CPagination size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx
index d63d72e4..3587dabe 100644
--- a/packages/docs/content/api/CPaginationItem.api.mdx
+++ b/packages/docs/content/api/CPaginationItem.api.mdx
@@ -5,8 +5,46 @@ import { CPaginationItem } from '@coreui/react'
 import CPaginationItem from '@coreui/react/src/components/pagination/CPaginationItem'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & string)` \| `(ElementType & ComponentClass<any, any>)` \| `(ElementType & FunctionComponent<any>)` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cpaginationitem-active">
+        <td className="text-primary fw-semibold">active<a href="#cpaginationitem-active" aria-label="CPaginationItem active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="cpaginationitem-as">
+        <td className="text-primary fw-semibold">as<a href="#cpaginationitem-as" aria-label="CPaginationItem as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass\<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent\<any>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cpaginationitem-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#cpaginationitem-disabled" aria-label="CPaginationItem disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx
index d7907a96..ad81da9e 100644
--- a/packages/docs/content/api/CPlaceholder.api.mdx
+++ b/packages/docs/content/api/CPlaceholder.api.mdx
@@ -5,16 +5,126 @@ import { CPlaceholder } from '@coreui/react'
 import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **animation** | Set animation type to better convey the perception of something being actively loaded. | `'glow'` \| `'wave'` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **lg** | The number of columns on large devices (\<1200px). | `number` | - |
-| **md** | The number of columns on medium devices (\<992px). | `number` | - |
-| **size** | Size the component extra small, small, or large. | `'xs'` \| `'sm'` \| `'lg'` | - |
-| **sm** | The number of columns on small devices (\<768px). | `number` | - |
-| **xl** | The number of columns on X-Large devices (\<1400px). | `number` | - |
-| **xs** | The number of columns on extra small devices (\<576px). | `number` | - |
-| **xxl** | The number of columns on XX-Large devices (≥1400px). | `number` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cplaceholder-animation">
+        <td className="text-primary fw-semibold">animation<a href="#cplaceholder-animation" aria-label="CPlaceholder animation permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'glow'`}</code>, <code>{`'wave'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set animation type to better convey the perception of something being actively loaded.</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-as">
+        <td className="text-primary fw-semibold">as<a href="#cplaceholder-as" aria-label="CPlaceholder as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'span')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cplaceholder-class-name" aria-label="CPlaceholder className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-color">
+        <td className="text-primary fw-semibold">color<a href="#cplaceholder-color" aria-label="CPlaceholder color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-lg">
+        <td className="text-primary fw-semibold">lg<a href="#cplaceholder-lg" aria-label="CPlaceholder lg permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns on large devices (&lt;1200px).</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-md">
+        <td className="text-primary fw-semibold">md<a href="#cplaceholder-md" aria-label="CPlaceholder md permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns on medium devices (&lt;992px).</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-size">
+        <td className="text-primary fw-semibold">size<a href="#cplaceholder-size" aria-label="CPlaceholder size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'xs'`}</code>, <code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component extra small, small, or large.</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-sm">
+        <td className="text-primary fw-semibold">sm<a href="#cplaceholder-sm" aria-label="CPlaceholder sm permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns on small devices (&lt;768px).</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-xl">
+        <td className="text-primary fw-semibold">xl<a href="#cplaceholder-xl" aria-label="CPlaceholder xl permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns on X-Large devices (&lt;1400px).</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-xs">
+        <td className="text-primary fw-semibold">xs<a href="#cplaceholder-xs" aria-label="CPlaceholder xs permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns on extra small devices (&lt;576px).</p>
+        </td>
+      </tr>
+      <tr id="cplaceholder-xxl">
+        <td className="text-primary fw-semibold">xxl<a href="#cplaceholder-xxl" aria-label="CPlaceholder xxl permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns on XX-Large devices (≥1400px).</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx
index c850d297..1f381f44 100644
--- a/packages/docs/content/api/CPopover.api.mdx
+++ b/packages/docs/content/api/CPopover.api.mdx
@@ -5,18 +5,198 @@ import { CPopover } from '@coreui/react'
 import CPopover from '@coreui/react/src/components/popover/CPopover'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **animation** **_4.9.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **container** **_4.11.0+_** | Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - |
-| **content** | Content node for your component. | `ReactNode` | - |
-| **delay** **_4.9.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 |
-| **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] |
-| **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] |
-| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top |
-| **title** | Title node for your component. | `ReactNode` | - |
-| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click |
-| **visible** | Toggle the visibility of popover component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cpopover-animation">
+        <td className="text-primary fw-semibold">animation<a href="#cpopover-animation" aria-label="CPopover animation permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Adds a fade transition animation to the React Popover.</p>
+        </td>
+      </tr>
+      <tr id="cpopover-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cpopover-class-name" aria-label="CPopover className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Custom class name(s) for additional styling.</p>
+        </td>
+      </tr>
+      <tr id="cpopover-container">
+        <td className="text-primary fw-semibold">container<a href="#cpopover-container" aria-label="CPopover container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
+        <td><code>{`document.body`}</code></td>
+        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Defines the container element to which the React Popover is appended.<br />
+Accepts:</p>
+<ul>
+<li>A DOM element (<code>{`HTMLElement`}</code> or <code>{`DocumentFragment`}</code>)</li>
+<li>A function that returns a single element</li>
+<li><code>{`null`}</code> (defaults to <code>{`document.body`}</code>)</li>
+</ul>
+        <JSXDocs code={`<CPopover container={document.getElementById('my-container')}>...</CPopover>`} />
+        </td>
+      </tr>
+      <tr id="cpopover-content">
+        <td className="text-primary fw-semibold">content<a href="#cpopover-content" aria-label="CPopover content permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Main content of the React Popover. It can be a string or any valid React node.</p>
+        </td>
+      </tr>
+      <tr id="cpopover-delay">
+        <td className="text-primary fw-semibold">delay<a href="#cpopover-delay" aria-label="CPopover delay permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+        <td><code>{`0`}</code></td>
+        <td><code>{`number`}</code>, <code>{`{ show: number; hide: number; }`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Delay (in milliseconds) before showing or hiding the React Popover.</p>
+<ul>
+<li>If a number is provided, that delay applies to both "show" and "hide".</li>
+<li>If an object is provided, use separate values for "show" and "hide".</li>
+</ul>
+        <JSXDocs code={`// Delays 300ms on both show and hide
+<CPopover delay={300}>...</CPopover>
+
+// Delays 500ms on show and 100ms on hide
+<CPopover delay={{ show: 500, hide: 100 }}>...</CPopover>`} />
+        </td>
+      </tr>
+      <tr id="cpopover-fallback-placements">
+        <td className="text-primary fw-semibold">fallbackPlacements<a href="#cpopover-fallback-placements" aria-label="CPopover fallbackPlacements permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+        <td><code>{`['top', 'right', 'bottom', 'left']`}</code></td>
+        <td><code>{`'top', 'right', 'bottom', 'left'`}</code>, <code>{`('top', 'right', 'bottom', 'left')[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the fallback placements when the preferred <code>{`placement`}</code> cannot be met.</p>
+        </td>
+      </tr>
+      <tr id="cpopover-offset">
+        <td className="text-primary fw-semibold">offset<a href="#cpopover-offset" aria-label="CPopover offset permalink" className="anchor-link after">#</a></td>
+        <td><code>{`[0, 8]`}</code></td>
+        <td><code>{`[number, number]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Offset of the React Popover relative to its toggle element, in the form <code>{`[x, y]`}</code>.</p>
+        <JSXDocs code={`// Offset the menu 0px in X and 10px in Y direction
+<CPopover offset={[0, 10]}>...</CPopover>
+
+// Offset the menu 5px in both X and Y direction
+<CPopover offset={[5, 5]}>...</CPopover>`} />
+        </td>
+      </tr>
+      <tr id="cpopover-on-hide">
+        <td className="text-primary fw-semibold">onHide<a href="#cpopover-on-hide" aria-label="CPopover onHide permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Invoked when the React Popover is about to hide.</p>
+        </td>
+      </tr>
+      <tr id="cpopover-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#cpopover-on-show" aria-label="CPopover onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Invoked when the React Popover is about to show.</p>
+        </td>
+      </tr>
+      <tr id="cpopover-placement">
+        <td className="text-primary fw-semibold">placement<a href="#cpopover-placement" aria-label="CPopover placement permalink" className="anchor-link after">#</a></td>
+        <td><code>{`top`}</code></td>
+        <td><code>{`'auto'`}</code>, <code>{`'top'`}</code>, <code>{`'bottom'`}</code>, <code>{`'right'`}</code>, <code>{`'left'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Placement of the React Popover. Popper.js may override this based on available space.</p>
+        </td>
+      </tr>
+      <tr id="cpopover-popper-config">
+        <td className="text-primary fw-semibold">popperConfig<a href="#cpopover-popper-config" aria-label="CPopover popperConfig permalink" className="anchor-link after">#</a><span className="badge bg-success">5.5.0+</span></td>
+        <td>-</td>
+        <td><code>{`Partial\<Options>`}</code>, <code>{`((defaultPopperConfig: Partial\<Options>) => Partial\<Options>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Allows customization of the Popper.js configuration for the React Popover.<br />
+Can be an object or a function returning a modified configuration.<br />
+<a href="https://popper.js.org/docs/v2/constructors/#options">Learn more</a></p>
+        <JSXDocs code={`<CPopover
+  popperConfig={(defaultConfig) => ({
+    ...defaultConfig,
+    strategy: 'fixed',
+    modifiers: [
+      ...defaultConfig.modifiers,
+      { name: 'computeStyles', options: { adaptive: false } },
+    ],
+  })}
+>...</CPopover>`} />
+        </td>
+      </tr>
+      <tr id="cpopover-title">
+        <td className="text-primary fw-semibold">title<a href="#cpopover-title" aria-label="CPopover title permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Title for the React Popover header. Can be a string or any valid React node.</p>
+        </td>
+      </tr>
+      <tr id="cpopover-trigger">
+        <td className="text-primary fw-semibold">trigger<a href="#cpopover-trigger" aria-label="CPopover trigger permalink" className="anchor-link after">#</a></td>
+        <td><code>{`click`}</code></td>
+        <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code>, <code>{`('hover' | 'focus' | 'click')[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.</p>
+        <JSXDocs code={`// Hover-only popover
+<CPopover trigger="hover">...</CPopover>
+
+// Hover + click combined
+<CPopover trigger={['hover', 'click']}>...</CPopover>`} />
+        </td>
+      </tr>
+      <tr id="cpopover-visible">
+        <td className="text-primary fw-semibold">visible<a href="#cpopover-visible" aria-label="CPopover visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Controls the visibility of the React Popover.</p>
+<ul>
+<li><code>{`true`}</code> shows the popover.</li>
+<li><code>{`false`}</code> hides the popover.</li>
+</ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx
index e7d61f16..be1efeea 100644
--- a/packages/docs/content/api/CProgress.api.mdx
+++ b/packages/docs/content/api/CProgress.api.mdx
@@ -5,14 +5,106 @@ import { CProgress } from '@coreui/react'
 import CProgress from '@coreui/react/src/components/progress/CProgress'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **animated** | Use to animate the stripes right to left via CSS3 animations. | `boolean` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **height** | Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly. | `number` | - |
-| **progressBarClassName** **_4.9.0+_** | A string of all className you want applied to the `<CProgressBar/>` component. | `string` | - |
-| **thin** | Makes progress bar thinner. | `boolean` | - |
-| **value** | The percent to progress the ProgressBar (out of 100). | `number` | - |
-| **variant** | Set the progress bar variant to optional striped. | `'striped'` | - |
-| **white** | Change the default color to white. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cprogress-animated">
+        <td className="text-primary fw-semibold">animated<a href="#cprogress-animated" aria-label="CProgress animated permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Use to animate the stripes right to left via CSS3 animations.</p>
+        </td>
+      </tr>
+      <tr id="cprogress-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cprogress-class-name" aria-label="CProgress className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cprogress-color">
+        <td className="text-primary fw-semibold">color<a href="#cprogress-color" aria-label="CProgress color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cprogress-height">
+        <td className="text-primary fw-semibold">height<a href="#cprogress-height" aria-label="CProgress height permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the height of the component. If you set that value the inner <code>{`<CProgressBar>`}</code> will automatically resize accordingly.</p>
+        </td>
+      </tr>
+      <tr id="cprogress-progress-bar-class-name">
+        <td className="text-primary fw-semibold">progressBarClassName<a href="#cprogress-progress-bar-class-name" aria-label="CProgress progressBarClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the <code>{`<CProgressBar/>`}</code> component.</p>
+        </td>
+      </tr>
+      <tr id="cprogress-thin">
+        <td className="text-primary fw-semibold">thin<a href="#cprogress-thin" aria-label="CProgress thin permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Makes progress bar thinner.</p>
+        </td>
+      </tr>
+      <tr id="cprogress-value">
+        <td className="text-primary fw-semibold">value<a href="#cprogress-value" aria-label="CProgress value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The percent to progress the ProgressBar (out of 100).</p>
+        </td>
+      </tr>
+      <tr id="cprogress-variant">
+        <td className="text-primary fw-semibold">variant<a href="#cprogress-variant" aria-label="CProgress variant permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'striped'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the progress bar variant to optional striped.</p>
+        </td>
+      </tr>
+      <tr id="cprogress-white">
+        <td className="text-primary fw-semibold">white<a href="#cprogress-white" aria-label="CProgress white permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Change the default color to white.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx
index 844d98e8..481b40ba 100644
--- a/packages/docs/content/api/CProgressBar.api.mdx
+++ b/packages/docs/content/api/CProgressBar.api.mdx
@@ -5,10 +5,66 @@ import { CProgressBar } from '@coreui/react'
 import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **animated** | Use to animate the stripes right to left via CSS3 animations. | `boolean` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **value** | The percent to progress the ProgressBar. | `number` | 0 |
-| **variant** | Set the progress bar variant to optional striped. | `'striped'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cprogressbar-animated">
+        <td className="text-primary fw-semibold">animated<a href="#cprogressbar-animated" aria-label="CProgressBar animated permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Use to animate the stripes right to left via CSS3 animations.</p>
+        </td>
+      </tr>
+      <tr id="cprogressbar-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cprogressbar-class-name" aria-label="CProgressBar className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cprogressbar-color">
+        <td className="text-primary fw-semibold">color<a href="#cprogressbar-color" aria-label="CProgressBar color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cprogressbar-value">
+        <td className="text-primary fw-semibold">value<a href="#cprogressbar-value" aria-label="CProgressBar value permalink" className="anchor-link after">#</a></td>
+        <td><code>{`0`}</code></td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The percent to progress the ProgressBar.</p>
+        </td>
+      </tr>
+      <tr id="cprogressbar-variant">
+        <td className="text-primary fw-semibold">variant<a href="#cprogressbar-variant" aria-label="CProgressBar variant permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'striped'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the progress bar variant to optional striped.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx
index 109af3cf..0aa39597 100644
--- a/packages/docs/content/api/CProgressStacked.api.mdx
+++ b/packages/docs/content/api/CProgressStacked.api.mdx
@@ -5,6 +5,26 @@ import { CProgressStacked } from '@coreui/react'
 import CProgressStacked from '@coreui/react/src/components/progress/CProgressStacked'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cprogressstacked-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cprogressstacked-class-name" aria-label="CProgressStacked className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx
index e0103350..578a2184 100644
--- a/packages/docs/content/api/CRow.api.mdx
+++ b/packages/docs/content/api/CRow.api.mdx
@@ -5,12 +5,86 @@ import { CRow } from '@coreui/react'
 import CRow from '@coreui/react/src/components/grid/CRow'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **lg** | The number of columns/offset/order on large devices (\<1200px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - |
-| **md** | The number of columns/offset/order on medium devices (\<992px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - |
-| **sm** | The number of columns/offset/order on small devices (\<768px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - |
-| **xl** | The number of columns/offset/order on X-Large devices (\<1400px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - |
-| **xs** | The number of columns/offset/order on extra small devices (\<576px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - |
-| **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="crow-class-name">
+        <td className="text-primary fw-semibold">className<a href="#crow-class-name" aria-label="CRow className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="crow-lg">
+        <td className="text-primary fw-semibold">lg<a href="#crow-lg" aria-label="CRow lg permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on large devices (&lt;1200px).</p>
+        </td>
+      </tr>
+      <tr id="crow-md">
+        <td className="text-primary fw-semibold">md<a href="#crow-md" aria-label="CRow md permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on medium devices (&lt;992px).</p>
+        </td>
+      </tr>
+      <tr id="crow-sm">
+        <td className="text-primary fw-semibold">sm<a href="#crow-sm" aria-label="CRow sm permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on small devices (&lt;768px).</p>
+        </td>
+      </tr>
+      <tr id="crow-xl">
+        <td className="text-primary fw-semibold">xl<a href="#crow-xl" aria-label="CRow xl permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on X-Large devices (&lt;1400px).</p>
+        </td>
+      </tr>
+      <tr id="crow-xs">
+        <td className="text-primary fw-semibold">xs<a href="#crow-xs" aria-label="CRow xs permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on extra small devices (&lt;576px).</p>
+        </td>
+      </tr>
+      <tr id="crow-xxl">
+        <td className="text-primary fw-semibold">xxl<a href="#crow-xxl" aria-label="CRow xxl permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx
index 8cd6ab08..f6ff8f25 100644
--- a/packages/docs/content/api/CSidebar.api.mdx
+++ b/packages/docs/content/api/CSidebar.api.mdx
@@ -5,17 +5,146 @@ import { CSidebar } from '@coreui/react'
 import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **colorScheme** | Sets if the color of text should be colored for a light or dark dark background. | `'dark'` \| `'light'` | - |
-| **narrow** | Make sidebar narrow. | `boolean` | - |
-| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **onVisibleChange** | Event emitted after visibility of component changed. | `(visible: boolean) => void` | - |
-| **overlaid** | Set sidebar to overlaid variant. | `boolean` | - |
-| **placement** | Components placement, there’s no default placement. | `'start'` \| `'end'` | - |
-| **position** | Place sidebar in non-static positions. | `'fixed'` \| `'sticky'` | - |
-| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - |
-| **unfoldable** | Expand narrowed sidebar on hover. | `boolean` | - |
-| **visible** | Toggle the visibility of sidebar component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="csidebar-as">
+        <td className="text-primary fw-semibold">as<a href="#csidebar-as" aria-label="CSidebar as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-class-name">
+        <td className="text-primary fw-semibold">className<a href="#csidebar-class-name" aria-label="CSidebar className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-color-scheme">
+        <td className="text-primary fw-semibold">colorScheme<a href="#csidebar-color-scheme" aria-label="CSidebar colorScheme permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'dark'`}</code>, <code>{`'light'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets if the color of text should be colored for a light or dark dark background.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-narrow">
+        <td className="text-primary fw-semibold">narrow<a href="#csidebar-narrow" aria-label="CSidebar narrow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Make sidebar narrow.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-on-hide">
+        <td className="text-primary fw-semibold">onHide<a href="#csidebar-on-hide" aria-label="CSidebar onHide permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#csidebar-on-show" aria-label="CSidebar onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-on-visible-change">
+        <td className="text-primary fw-semibold">onVisibleChange<a href="#csidebar-on-visible-change" aria-label="CSidebar onVisibleChange permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(visible: boolean) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Event emitted after visibility of component changed.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-overlaid">
+        <td className="text-primary fw-semibold">overlaid<a href="#csidebar-overlaid" aria-label="CSidebar overlaid permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set sidebar to overlaid variant.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-placement">
+        <td className="text-primary fw-semibold">placement<a href="#csidebar-placement" aria-label="CSidebar placement permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'start'`}</code>, <code>{`'end'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Components placement, there’s no default placement.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-position">
+        <td className="text-primary fw-semibold">position<a href="#csidebar-position" aria-label="CSidebar position permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'fixed'`}</code>, <code>{`'sticky'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Place sidebar in non-static positions.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-size">
+        <td className="text-primary fw-semibold">size<a href="#csidebar-size" aria-label="CSidebar size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small, large, or extra large.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-unfoldable">
+        <td className="text-primary fw-semibold">unfoldable<a href="#csidebar-unfoldable" aria-label="CSidebar unfoldable permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Expand narrowed sidebar on hover.</p>
+        </td>
+      </tr>
+      <tr id="csidebar-visible">
+        <td className="text-primary fw-semibold">visible<a href="#csidebar-visible" aria-label="CSidebar visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of sidebar component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx
index bd665b8c..ef80faed 100644
--- a/packages/docs/content/api/CSidebarBrand.api.mdx
+++ b/packages/docs/content/api/CSidebarBrand.api.mdx
@@ -5,7 +5,36 @@ import { CSidebarBrand } from '@coreui/react'
 import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="csidebarbrand-as">
+        <td className="text-primary fw-semibold">as<a href="#csidebarbrand-as" aria-label="CSidebarBrand as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="csidebarbrand-class-name">
+        <td className="text-primary fw-semibold">className<a href="#csidebarbrand-class-name" aria-label="CSidebarBrand className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx
index ec781c61..b381e326 100644
--- a/packages/docs/content/api/CSidebarFooter.api.mdx
+++ b/packages/docs/content/api/CSidebarFooter.api.mdx
@@ -5,6 +5,26 @@ import { CSidebarFooter } from '@coreui/react'
 import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="csidebarfooter-class-name">
+        <td className="text-primary fw-semibold">className<a href="#csidebarfooter-class-name" aria-label="CSidebarFooter className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx
index a854177d..0b4d9468 100644
--- a/packages/docs/content/api/CSidebarHeader.api.mdx
+++ b/packages/docs/content/api/CSidebarHeader.api.mdx
@@ -5,6 +5,26 @@ import { CSidebarHeader } from '@coreui/react'
 import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="csidebarheader-class-name">
+        <td className="text-primary fw-semibold">className<a href="#csidebarheader-class-name" aria-label="CSidebarHeader className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx
index 52cc8df7..635ec4d8 100644
--- a/packages/docs/content/api/CSidebarNav.api.mdx
+++ b/packages/docs/content/api/CSidebarNav.api.mdx
@@ -5,7 +5,36 @@ import { CSidebarNav } from '@coreui/react'
 import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="csidebarnav-as">
+        <td className="text-primary fw-semibold">as<a href="#csidebarnav-as" aria-label="CSidebarNav as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="csidebarnav-class-name">
+        <td className="text-primary fw-semibold">className<a href="#csidebarnav-class-name" aria-label="CSidebarNav className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx
index 0ff604df..89f62377 100644
--- a/packages/docs/content/api/CSidebarToggler.api.mdx
+++ b/packages/docs/content/api/CSidebarToggler.api.mdx
@@ -5,6 +5,26 @@ import { CSidebarToggler } from '@coreui/react'
 import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="csidebartoggler-class-name">
+        <td className="text-primary fw-semibold">className<a href="#csidebartoggler-class-name" aria-label="CSidebarToggler className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx
index 4ff6306f..85bef5fe 100644
--- a/packages/docs/content/api/CSpinner.api.mdx
+++ b/packages/docs/content/api/CSpinner.api.mdx
@@ -5,11 +5,76 @@ import { CSpinner } from '@coreui/react'
 import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **size** | Size the component small. | `'sm'` | - |
-| **variant** | Set the button variant to an outlined button or a ghost button. | `'border'` \| `'grow'` | border |
-| **visuallyHiddenLabel** | Set visually hidden label for accessibility purposes. | `string` | Loading... |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cspinner-as">
+        <td className="text-primary fw-semibold">as<a href="#cspinner-as" aria-label="CSpinner as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="cspinner-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cspinner-class-name" aria-label="CSpinner className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="cspinner-color">
+        <td className="text-primary fw-semibold">color<a href="#cspinner-color" aria-label="CSpinner color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cspinner-size">
+        <td className="text-primary fw-semibold">size<a href="#cspinner-size" aria-label="CSpinner size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small.</p>
+        </td>
+      </tr>
+      <tr id="cspinner-variant">
+        <td className="text-primary fw-semibold">variant<a href="#cspinner-variant" aria-label="CSpinner variant permalink" className="anchor-link after">#</a></td>
+        <td><code>{`border`}</code></td>
+        <td><code>{`'border'`}</code>, <code>{`'grow'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the button variant to an outlined button or a ghost button.</p>
+        </td>
+      </tr>
+      <tr id="cspinner-visually-hidden-label">
+        <td className="text-primary fw-semibold">visuallyHiddenLabel<a href="#cspinner-visually-hidden-label" aria-label="CSpinner visuallyHiddenLabel permalink" className="anchor-link after">#</a></td>
+        <td><code>{`Loading...`}</code></td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set visually hidden label for accessibility purposes.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx
index 9a9835e5..96b8adf7 100644
--- a/packages/docs/content/api/CTab.api.mdx
+++ b/packages/docs/content/api/CTab.api.mdx
@@ -5,8 +5,46 @@ import { CTab } from '@coreui/react'
 import CTab from '@coreui/react/src/components/tabs/CTab'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **itemKey** | Item key. | `string` \| `number` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctab-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctab-class-name" aria-label="CTab className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctab-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#ctab-disabled" aria-label="CTab disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="ctab-item-key">
+        <td className="text-primary fw-semibold">itemKey<a href="#ctab-item-key" aria-label="CTab itemKey permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Item key.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx
index 49ebd3b6..1ed42368 100644
--- a/packages/docs/content/api/CTabContent.api.mdx
+++ b/packages/docs/content/api/CTabContent.api.mdx
@@ -5,6 +5,26 @@ import { CTabContent } from '@coreui/react'
 import CTabContent from '@coreui/react/src/components/tabs/CTabContent'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctabcontent-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctabcontent-class-name" aria-label="CTabContent className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx
index 0625b962..3d4a2202 100644
--- a/packages/docs/content/api/CTabList.api.mdx
+++ b/packages/docs/content/api/CTabList.api.mdx
@@ -5,8 +5,46 @@ import { CTabList } from '@coreui/react'
 import CTabList from '@coreui/react/src/components/tabs/CTabList'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - |
-| **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` \| `'underline-border'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctablist-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctablist-class-name" aria-label="CTabList className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctablist-layout">
+        <td className="text-primary fw-semibold">layout<a href="#ctablist-layout" aria-label="CTabList layout permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'fill'`}</code>, <code>{`'justified'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specify a layout type for component.</p>
+        </td>
+      </tr>
+      <tr id="ctablist-variant">
+        <td className="text-primary fw-semibold">variant<a href="#ctablist-variant" aria-label="CTabList variant permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'pills'`}</code>, <code>{`'tabs'`}</code>, <code>{`'underline'`}</code>, <code>{`'underline-border'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the nav variant to tabs or pills.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx
index e37cc210..caf5c27b 100644
--- a/packages/docs/content/api/CTabPane.api.mdx
+++ b/packages/docs/content/api/CTabPane.api.mdx
@@ -5,10 +5,66 @@ import { CTabPane } from '@coreui/react'
 import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **transition** **_5.1.0+_** | Enable fade in and fade out transition. | `boolean` | true |
-| **visible** | Toggle the visibility of component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctabpane-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctabpane-class-name" aria-label="CTabPane className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctabpane-on-hide">
+        <td className="text-primary fw-semibold">onHide<a href="#ctabpane-on-hide" aria-label="CTabPane onHide permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
+      </tr>
+      <tr id="ctabpane-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#ctabpane-on-show" aria-label="CTabPane onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</p>
+        </td>
+      </tr>
+      <tr id="ctabpane-transition">
+        <td className="text-primary fw-semibold">transition<a href="#ctabpane-transition" aria-label="CTabPane transition permalink" className="anchor-link after">#</a><span className="badge bg-success">5.1.0+</span></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Enable fade in and fade out transition.</p>
+        </td>
+      </tr>
+      <tr id="ctabpane-visible">
+        <td className="text-primary fw-semibold">visible<a href="#ctabpane-visible" aria-label="CTabPane visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx
index 02745245..704ae2af 100644
--- a/packages/docs/content/api/CTabPanel.api.mdx
+++ b/packages/docs/content/api/CTabPanel.api.mdx
@@ -5,11 +5,76 @@ import { CTabPanel } from '@coreui/react'
 import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **itemKey** | Item key. | `string` \| `number` | - |
-| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **transition** | Enable fade in and fade out transition. | `boolean` | true |
-| **visible** | Toggle the visibility of component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctabpanel-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctabpanel-class-name" aria-label="CTabPanel className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctabpanel-item-key">
+        <td className="text-primary fw-semibold">itemKey<a href="#ctabpanel-item-key" aria-label="CTabPanel itemKey permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Item key.</p>
+        </td>
+      </tr>
+      <tr id="ctabpanel-on-hide">
+        <td className="text-primary fw-semibold">onHide<a href="#ctabpanel-on-hide" aria-label="CTabPanel onHide permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
+      </tr>
+      <tr id="ctabpanel-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#ctabpanel-on-show" aria-label="CTabPanel onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</p>
+        </td>
+      </tr>
+      <tr id="ctabpanel-transition">
+        <td className="text-primary fw-semibold">transition<a href="#ctabpanel-transition" aria-label="CTabPanel transition permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Enable fade in and fade out transition.</p>
+        </td>
+      </tr>
+      <tr id="ctabpanel-visible">
+        <td className="text-primary fw-semibold">visible<a href="#ctabpanel-visible" aria-label="CTabPanel visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx
index 3bb76f86..26743c37 100644
--- a/packages/docs/content/api/CTable.api.mdx
+++ b/packages/docs/content/api/CTable.api.mdx
@@ -5,23 +5,211 @@ import { CTable } from '@coreui/react'
 import CTable from '@coreui/react/src/components/table/CTable'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **align** | Set the vertical aligment. | `string` | - |
-| **borderColor** | Sets the border color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **bordered** | Add borders on all sides of the table and cells. | `boolean` | - |
-| **borderless** | Remove borders on all sides of the table and cells. | `boolean` | - |
-| **caption** | Put the caption on the top if you set `caption="top"` of the table or set the text of the table caption. | `string` | - |
-| **captionTop** **_4.3.0+_** | Set the text of the table caption and the caption on the top of the table. | `string` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **columns** **_4.3.0+_** | Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')<br/><br/>In columns prop each array item represents one column. Item might be specified in two ways:<br/>String: each item define column name equal to item value.<br/>Object: item is object with following keys available as column configuration:<br/>- key (required)(String) - define column name equal to item key.<br/>- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.<br/>- _props (Object) - adds classes to all cels in column, ex. `_props: { scope: 'col', className: 'custom-class' }`,<br/>- _style (Object) - adds styles to the column header (useful for defining widths) | `(string` \| `Column)[]` | - |
-| **footer** **_4.3.0+_** | Array of objects or strings, where each element represents one cell in the table footer.<br/><br/>Example items:<br/>`['FooterCell', 'FooterCell', 'FooterCell']`<br/>or<br/>`[{ label: 'FooterCell', _props: { color: 'success' }, ...]` | `(string` \| `FooterItem)[]` | - |
-| **hover** | Enable a hover state on table rows within a `<CTableBody>`. | `boolean` | - |
-| **items** **_4.3.0+_** | Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.<br/><br/>Example item:<br/>`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}` | `Item[]` | - |
-| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |
-| **small** | Make table more compact by cutting all cell `padding` in half. | `boolean` | - |
-| **striped** | Add zebra-striping to any table row within the `<CTableBody>`. | `boolean` | - |
-| **stripedColumns** **_4.3.0+_** | Add zebra-striping to any table column. | `boolean` | - |
-| **tableFootProps** **_4.3.0+_** | Properties that will be passed to the table footer component. | `CTableFootProps` | - |
-| **tableHeadProps** **_4.3.0+_** | Properties that will be passed to the table head component. | `CTableHeadProps` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctable-align">
+        <td className="text-primary fw-semibold">align<a href="#ctable-align" aria-label="CTable align permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the vertical aligment.</p>
+        </td>
+      </tr>
+      <tr id="ctable-border-color">
+        <td className="text-primary fw-semibold">borderColor<a href="#ctable-border-color" aria-label="CTable borderColor permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the border color of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="ctable-bordered">
+        <td className="text-primary fw-semibold">bordered<a href="#ctable-bordered" aria-label="CTable bordered permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add borders on all sides of the table and cells.</p>
+        </td>
+      </tr>
+      <tr id="ctable-borderless">
+        <td className="text-primary fw-semibold">borderless<a href="#ctable-borderless" aria-label="CTable borderless permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Remove borders on all sides of the table and cells.</p>
+        </td>
+      </tr>
+      <tr id="ctable-caption">
+        <td className="text-primary fw-semibold">caption<a href="#ctable-caption" aria-label="CTable caption permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Put the caption on the top if you set <code>{`caption="top"`}</code> of the table or set the text of the table caption.</p>
+        </td>
+      </tr>
+      <tr id="ctable-caption-top">
+        <td className="text-primary fw-semibold">captionTop<a href="#ctable-caption-top" aria-label="CTable captionTop permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the text of the table caption and the caption on the top of the table.</p>
+        </td>
+      </tr>
+      <tr id="ctable-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctable-class-name" aria-label="CTable className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="ctable-color">
+        <td className="text-primary fw-semibold">color<a href="#ctable-color" aria-label="CTable color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="ctable-columns">
+        <td className="text-primary fw-semibold">columns<a href="#ctable-columns" aria-label="CTable columns permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+        <td>-</td>
+        <td><code>{`(string | Column)[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')</p>
+<p>In columns prop each array item represents one column. Item might be specified in two ways:<br />
+String: each item define column name equal to item value.<br />
+Object: item is object with following keys available as column configuration:</p>
+<ul>
+<li>key (required)(String) - define column name equal to item key.</li>
+<li>label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.</li>
+<li>_props (Object) - adds classes to all cels in column, ex. <code>{`_props: { scope: 'col', className: 'custom-class' }`}</code>,</li>
+<li>_style (Object) - adds styles to the column header (useful for defining widths)</li>
+</ul>
+        </td>
+      </tr>
+      <tr id="ctable-footer">
+        <td className="text-primary fw-semibold">footer<a href="#ctable-footer" aria-label="CTable footer permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+        <td>-</td>
+        <td><code>{`(string | FooterItem)[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Array of objects or strings, where each element represents one cell in the table footer.</p>
+<p>Example items:<br />
+<code>{`['FooterCell', 'FooterCell', 'FooterCell']`}</code><br />
+or<br />
+<code>{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}</code></p>
+        </td>
+      </tr>
+      <tr id="ctable-hover">
+        <td className="text-primary fw-semibold">hover<a href="#ctable-hover" aria-label="CTable hover permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Enable a hover state on table rows within a <code>{`<CTableBody>`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="ctable-items">
+        <td className="text-primary fw-semibold">items<a href="#ctable-items" aria-label="CTable items permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+        <td>-</td>
+        <td><code>{`Item[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '<em>props' key and to single cell by '</em>cellProps'.</p>
+<p>Example item:<br />
+<code>{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}</code></p>
+        </td>
+      </tr>
+      <tr id="ctable-responsive">
+        <td className="text-primary fw-semibold">responsive<a href="#ctable-responsive" aria-label="CTable responsive permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</p>
+        </td>
+      </tr>
+      <tr id="ctable-small">
+        <td className="text-primary fw-semibold">small<a href="#ctable-small" aria-label="CTable small permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Make table more compact by cutting all cell <code>{`padding`}</code> in half.</p>
+        </td>
+      </tr>
+      <tr id="ctable-striped">
+        <td className="text-primary fw-semibold">striped<a href="#ctable-striped" aria-label="CTable striped permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add zebra-striping to any table row within the <code>{`<CTableBody>`}</code>.</p>
+        </td>
+      </tr>
+      <tr id="ctable-striped-columns">
+        <td className="text-primary fw-semibold">stripedColumns<a href="#ctable-striped-columns" aria-label="CTable stripedColumns permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Add zebra-striping to any table column.</p>
+        </td>
+      </tr>
+      <tr id="ctable-table-foot-props">
+        <td className="text-primary fw-semibold">tableFootProps<a href="#ctable-table-foot-props" aria-label="CTable tableFootProps permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+        <td>-</td>
+        <td><code>{`CTableFootProps`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Properties that will be passed to the table footer component.</p>
+        </td>
+      </tr>
+      <tr id="ctable-table-head-props">
+        <td className="text-primary fw-semibold">tableHeadProps<a href="#ctable-table-head-props" aria-label="CTable tableHeadProps permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+        <td>-</td>
+        <td><code>{`CTableHeadProps`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Properties that will be passed to the table head component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx
index ad8c2c61..f97cb4dc 100644
--- a/packages/docs/content/api/CTableBody.api.mdx
+++ b/packages/docs/content/api/CTableBody.api.mdx
@@ -5,7 +5,36 @@ import { CTableBody } from '@coreui/react'
 import CTableBody from '@coreui/react/src/components/table/CTableBody'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctablebody-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctablebody-class-name" aria-label="CTableBody className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="ctablebody-color">
+        <td className="text-primary fw-semibold">color<a href="#ctablebody-color" aria-label="CTableBody color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx
index 3bebec25..73372f90 100644
--- a/packages/docs/content/api/CTableCaption.api.mdx
+++ b/packages/docs/content/api/CTableCaption.api.mdx
@@ -5,3 +5,6 @@ import { CTableCaption } from '@coreui/react'
 import CTableCaption from '@coreui/react/src/components/table/CTableCaption'
 ```
 
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx
index 5c5c2c3f..bd076614 100644
--- a/packages/docs/content/api/CTableDataCell.api.mdx
+++ b/packages/docs/content/api/CTableDataCell.api.mdx
@@ -5,9 +5,56 @@ import { CTableDataCell } from '@coreui/react'
 import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Highlight a table row or cell. | `boolean` | - |
-| **align** | Set the vertical aligment. | `string` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctabledatacell-active">
+        <td className="text-primary fw-semibold">active<a href="#ctabledatacell-active" aria-label="CTableDataCell active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Highlight a table row or cell.</p>
+        </td>
+      </tr>
+      <tr id="ctabledatacell-align">
+        <td className="text-primary fw-semibold">align<a href="#ctabledatacell-align" aria-label="CTableDataCell align permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the vertical aligment.</p>
+        </td>
+      </tr>
+      <tr id="ctabledatacell-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctabledatacell-class-name" aria-label="CTableDataCell className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="ctabledatacell-color">
+        <td className="text-primary fw-semibold">color<a href="#ctabledatacell-color" aria-label="CTableDataCell color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx
index 9a363ce4..532b8d60 100644
--- a/packages/docs/content/api/CTableFoot.api.mdx
+++ b/packages/docs/content/api/CTableFoot.api.mdx
@@ -5,7 +5,36 @@ import { CTableFoot } from '@coreui/react'
 import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctablefoot-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctablefoot-class-name" aria-label="CTableFoot className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="ctablefoot-color">
+        <td className="text-primary fw-semibold">color<a href="#ctablefoot-color" aria-label="CTableFoot color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx
index f890796d..3c7b6463 100644
--- a/packages/docs/content/api/CTableHead.api.mdx
+++ b/packages/docs/content/api/CTableHead.api.mdx
@@ -5,7 +5,36 @@ import { CTableHead } from '@coreui/react'
 import CTableHead from '@coreui/react/src/components/table/CTableHead'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctablehead-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctablehead-class-name" aria-label="CTableHead className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="ctablehead-color">
+        <td className="text-primary fw-semibold">color<a href="#ctablehead-color" aria-label="CTableHead color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx
index ec0ce6e8..504b445d 100644
--- a/packages/docs/content/api/CTableHeaderCell.api.mdx
+++ b/packages/docs/content/api/CTableHeaderCell.api.mdx
@@ -5,7 +5,36 @@ import { CTableHeaderCell } from '@coreui/react'
 import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCell'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctableheadercell-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctableheadercell-class-name" aria-label="CTableHeaderCell className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="ctableheadercell-color">
+        <td className="text-primary fw-semibold">color<a href="#ctableheadercell-color" aria-label="CTableHeaderCell color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
index 70181df4..31079177 100644
--- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
+++ b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
@@ -5,6 +5,26 @@ import { CTableResponsiveWrapper } from '@coreui/react'
 import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableResponsiveWrapper'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctableresponsivewrapper-responsive">
+        <td className="text-primary fw-semibold">responsive<a href="#ctableresponsivewrapper-responsive" aria-label="CTableResponsiveWrapper responsive permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx
index 0b0adefc..e38e513a 100644
--- a/packages/docs/content/api/CTableRow.api.mdx
+++ b/packages/docs/content/api/CTableRow.api.mdx
@@ -5,9 +5,56 @@ import { CTableRow } from '@coreui/react'
 import CTableRow from '@coreui/react/src/components/table/CTableRow'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Highlight a table row or cell.. | `boolean` | - |
-| **align** | Set the vertical aligment. | `string` | - |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctablerow-active">
+        <td className="text-primary fw-semibold">active<a href="#ctablerow-active" aria-label="CTableRow active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Highlight a table row or cell..</p>
+        </td>
+      </tr>
+      <tr id="ctablerow-align">
+        <td className="text-primary fw-semibold">align<a href="#ctablerow-align" aria-label="CTableRow align permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the vertical aligment.</p>
+        </td>
+      </tr>
+      <tr id="ctablerow-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctablerow-class-name" aria-label="CTableRow className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
+      </tr>
+      <tr id="ctablerow-color">
+        <td className="text-primary fw-semibold">color<a href="#ctablerow-color" aria-label="CTableRow color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx
index 3a31ef16..18290159 100644
--- a/packages/docs/content/api/CTabs.api.mdx
+++ b/packages/docs/content/api/CTabs.api.mdx
@@ -5,8 +5,68 @@ import { CTabs } from '@coreui/react'
 import CTabs from '@coreui/react/src/components/tabs/CTabs'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **activeItemKey** | The active item key. | `string` \| `number` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **onChange** | The callback is fired when the active tab changes. | `(value: string` \| `number) => void` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctabs-active-item-key">
+        <td className="text-primary fw-semibold">activeItemKey<a href="#ctabs-active-item-key" aria-label="CTabs activeItemKey permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Controls the currently active tab.</p>
+<p>When provided, the component operates in a controlled mode.<br />
+You must handle tab switching manually by updating this prop.</p>
+        <JSXDocs code={`const [activeTab, setActiveTab] = useState(0);
+<CTabs activeItemKey={activeTab} onChange={setActiveTab} />`} />
+        </td>
+      </tr>
+      <tr id="ctabs-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctabs-class-name" aria-label="CTabs className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctabs-default-active-item-key">
+        <td className="text-primary fw-semibold">defaultActiveItemKey<a href="#ctabs-default-active-item-key" aria-label="CTabs defaultActiveItemKey permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code>, <code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the initially active tab when the component mounts.</p>
+<p>After initialization, the component manages active tab changes internally.</p>
+<p>Use <code>{`defaultActiveItemKey`}</code> for uncontrolled usage.</p>
+        <JSXDocs code={`<CTabs defaultActiveItemKey={1} />`} />
+        </td>
+      </tr>
+      <tr id="ctabs-on-change">
+        <td className="text-primary fw-semibold">onChange<a href="#ctabs-on-change" aria-label="CTabs onChange permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(value: string | number) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the active tab changes.</p>
+<ul>
+<li>In controlled mode (<code>{`activeItemKey`}</code> provided), you must update <code>{`activeItemKey`}</code> yourself based on the value received.</li>
+<li>In uncontrolled mode, this callback is called after internal state updates.</li>
+</ul>
+        <JSXDocs code={`<CTabs onChange={(key) => console.log('Tab changed to', key)} />`} />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx
index ac0aba30..67c568fa 100644
--- a/packages/docs/content/api/CToast.api.mdx
+++ b/packages/docs/content/api/CToast.api.mdx
@@ -5,13 +5,96 @@ import { CToast } from '@coreui/react'
 import CToast from '@coreui/react/src/components/toast/CToast'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **animation** | Apply a CSS fade transition to the toast. | `boolean` | true |
-| **autohide** | Auto hide the toast. | `boolean` | true |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **delay** | Delay hiding the toast (ms). | `number` | 5000 |
-| **onClose** | Callback fired when the component requests to be closed. | `(index: number) => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `(index: number) => void` | - |
-| **visible** | Toggle the visibility of component. | `boolean` | false |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctoast-animation">
+        <td className="text-primary fw-semibold">animation<a href="#ctoast-animation" aria-label="CToast animation permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Apply a CSS fade transition to the toast.</p>
+        </td>
+      </tr>
+      <tr id="ctoast-autohide">
+        <td className="text-primary fw-semibold">autohide<a href="#ctoast-autohide" aria-label="CToast autohide permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Auto hide the toast.</p>
+        </td>
+      </tr>
+      <tr id="ctoast-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctoast-class-name" aria-label="CToast className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctoast-color">
+        <td className="text-primary fw-semibold">color<a href="#ctoast-color" aria-label="CToast color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="ctoast-delay">
+        <td className="text-primary fw-semibold">delay<a href="#ctoast-delay" aria-label="CToast delay permalink" className="anchor-link after">#</a></td>
+        <td><code>{`5000`}</code></td>
+        <td><code>{`number`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Delay hiding the toast (ms).</p>
+        </td>
+      </tr>
+      <tr id="ctoast-on-close">
+        <td className="text-primary fw-semibold">onClose<a href="#ctoast-on-close" aria-label="CToast onClose permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(index: number) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be closed.</p>
+        </td>
+      </tr>
+      <tr id="ctoast-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#ctoast-on-show" aria-label="CToast onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(index: number) => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</p>
+        </td>
+      </tr>
+      <tr id="ctoast-visible">
+        <td className="text-primary fw-semibold">visible<a href="#ctoast-visible" aria-label="CToast visible permalink" className="anchor-link after">#</a></td>
+        <td><code>{`false`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx
index b6ee2bb4..7227bece 100644
--- a/packages/docs/content/api/CToastBody.api.mdx
+++ b/packages/docs/content/api/CToastBody.api.mdx
@@ -5,6 +5,26 @@ import { CToastBody } from '@coreui/react'
 import CToastBody from '@coreui/react/src/components/toast/CToastBody'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctoastbody-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctoastbody-class-name" aria-label="CToastBody className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx
index 1d5b0ca4..f96a63a0 100644
--- a/packages/docs/content/api/CToastClose.api.mdx
+++ b/packages/docs/content/api/CToastClose.api.mdx
@@ -5,16 +5,127 @@ import { CToastClose } from '@coreui/react'
 import CToastClose from '@coreui/react/src/components/toast/CToastClose'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **active** | Toggle the active state for the component. | `boolean` | - |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & string)` \| `(ElementType & ComponentClass<any, any>)` \| `(ElementType & FunctionComponent<any>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **dark** | Invert the default color. | `boolean` | - |
-| **disabled** | Toggle the disabled state for the component. | `boolean` | - |
-| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
-| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
-| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
-| **type** | Specifies the type of button. Always specify the type attribute for the `<button>` element.<br/>Different browsers may use different default types for the `<button>` element. | `'button'` \| `'submit'` \| `'reset'` | - |
-| **variant** | Set the button variant to an outlined button or a ghost button. | `'outline'` \| `'ghost'` | - |
-| **white** **_Deprecated 5.0.0+_** | Change the default color to white. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctoastclose-active">
+        <td className="text-primary fw-semibold">active<a href="#ctoastclose-active" aria-label="CToastClose active permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the active state for the component.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-as">
+        <td className="text-primary fw-semibold">as<a href="#ctoastclose-as" aria-label="CToastClose as permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass\<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent\<any>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctoastclose-class-name" aria-label="CToastClose className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-dark">
+        <td className="text-primary fw-semibold">dark<a href="#ctoastclose-dark" aria-label="CToastClose dark permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Invert the default color.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-disabled">
+        <td className="text-primary fw-semibold">disabled<a href="#ctoastclose-disabled" aria-label="CToastClose disabled permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-href">
+        <td className="text-primary fw-semibold">href<a href="#ctoastclose-href" aria-label="CToastClose href permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-shape">
+        <td className="text-primary fw-semibold">shape<a href="#ctoastclose-shape" aria-label="CToastClose shape permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Select the shape of the component.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-size">
+        <td className="text-primary fw-semibold">size<a href="#ctoastclose-size" aria-label="CToastClose size permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-type">
+        <td className="text-primary fw-semibold">type<a href="#ctoastclose-type" aria-label="CToastClose type permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'button'`}</code>, <code>{`'submit'`}</code>, <code>{`'reset'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Specifies the type of button. Always specify the type attribute for the <code>{`<button>`}</code> element.<br />
+Different browsers may use different default types for the <code>{`<button>`}</code> element.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-variant">
+        <td className="text-primary fw-semibold">variant<a href="#ctoastclose-variant" aria-label="CToastClose variant permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'outline'`}</code>, <code>{`'ghost'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set the button variant to an outlined button or a ghost button.</p>
+        </td>
+      </tr>
+      <tr id="ctoastclose-white">
+        <td className="text-primary fw-semibold">white<a href="#ctoastclose-white" aria-label="CToastClose white permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 5.0.0</span></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Change the default color to white.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CToastHeader.api.mdx b/packages/docs/content/api/CToastHeader.api.mdx
index c157a9df..b3412e05 100644
--- a/packages/docs/content/api/CToastHeader.api.mdx
+++ b/packages/docs/content/api/CToastHeader.api.mdx
@@ -5,7 +5,36 @@ import { CToastHeader } from '@coreui/react'
 import CToastHeader from '@coreui/react/src/components/toast/CToastHeader'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **closeButton** | Automatically add a close button to the header. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctoastheader-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctoastheader-class-name" aria-label="CToastHeader className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctoastheader-close-button">
+        <td className="text-primary fw-semibold">closeButton<a href="#ctoastheader-close-button" aria-label="CToastHeader closeButton permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Automatically add a close button to the header.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CToaster.api.mdx b/packages/docs/content/api/CToaster.api.mdx
index 9b62fdd4..a0738d3f 100644
--- a/packages/docs/content/api/CToaster.api.mdx
+++ b/packages/docs/content/api/CToaster.api.mdx
@@ -5,8 +5,46 @@ import { CToaster } from '@coreui/react'
 import CToaster from '@coreui/react/src/components/toast/CToaster'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **placement** | Describes the placement of your component. | `'top-start'` \| `'top'` \| `'top-end'` \| `'middle-start'` \| `'middle'` \| `'middle-end'` \| `'bottom-start'` \| `'bottom'` \| `'bottom-end'` \| `string` | - |
-| **push** | Adds new `CToast` to `CToaster`. | `ReactElement` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctoaster-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctoaster-class-name" aria-label="CToaster className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="ctoaster-placement">
+        <td className="text-primary fw-semibold">placement<a href="#ctoaster-placement" aria-label="CToaster placement permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'top-start'`}</code>, <code>{`'top'`}</code>, <code>{`'top-end'`}</code>, <code>{`'middle-start'`}</code>, <code>{`'middle'`}</code>, <code>{`'middle-end'`}</code>, <code>{`'bottom-start'`}</code>, <code>{`'bottom'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Describes the placement of your component.</p>
+        </td>
+      </tr>
+      <tr id="ctoaster-push">
+        <td className="text-primary fw-semibold">push<a href="#ctoaster-push" aria-label="CToaster push permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactElement`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Adds new <code>{`CToast`}</code> to <code>{`CToaster`}</code>.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx
index 37d86e6c..74a7e295 100644
--- a/packages/docs/content/api/CTooltip.api.mdx
+++ b/packages/docs/content/api/CTooltip.api.mdx
@@ -5,17 +5,185 @@ import { CTooltip } from '@coreui/react'
 import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **animation** **_4.9.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **container** **_4.11.0+_** | Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - |
-| **content** | Content node for your component. | `ReactNode` | - |
-| **delay** **_4.9.0+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 |
-| **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] |
-| **offset** | Offset of the tooltip relative to its target. | `[number, number]` | [0, 6] |
-| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
-| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
-| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top |
-| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | ['hover', 'focus'] |
-| **visible** | Toggle the visibility of tooltip component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="ctooltip-animation">
+        <td className="text-primary fw-semibold">animation<a href="#ctooltip-animation" aria-label="CTooltip animation permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Enables or disables the CSS fade transition for the React Tooltip.</p>
+        </td>
+      </tr>
+      <tr id="ctooltip-class-name">
+        <td className="text-primary fw-semibold">className<a href="#ctooltip-class-name" aria-label="CTooltip className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices.</p>
+        </td>
+      </tr>
+      <tr id="ctooltip-container">
+        <td className="text-primary fw-semibold">container<a href="#ctooltip-container" aria-label="CTooltip container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
+        <td><code>{`document.body`}</code></td>
+        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Appends the React Tooltip to a specific element instead of the default <code>{`document.body`}</code>. You may pass:</p>
+<ul>
+<li>A DOM element (<code>{`HTMLElement`}</code> or <code>{`DocumentFragment`}</code>)</li>
+<li>A function that returns a single element</li>
+<li><code>{`null`}</code></li>
+</ul>
+        <JSXDocs code={`<CTooltip container={document.getElementById('my-container')}>...</CTooltip>`} />
+        </td>
+      </tr>
+      <tr id="ctooltip-content">
+        <td className="text-primary fw-semibold">content<a href="#ctooltip-content" aria-label="CTooltip content permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Content to be displayed within the React Tooltip. Can be a string or any valid React node.</p>
+        </td>
+      </tr>
+      <tr id="ctooltip-delay">
+        <td className="text-primary fw-semibold">delay<a href="#ctooltip-delay" aria-label="CTooltip delay permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+        <td><code>{`0`}</code></td>
+        <td><code>{`number`}</code>, <code>{`{ show: number; hide: number; }`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>The delay (in milliseconds) before showing or hiding the React Tooltip.</p>
+<ul>
+<li>If provided as a number, the delay is applied to both "show" and "hide".</li>
+<li>If provided as an object, it should have distinct "show" and "hide" values.</li>
+</ul>
+        <JSXDocs code={`// Delays 300ms on both show and hide
+<CTooltip delay={300}>...</CTooltip>
+
+// Delays 500ms on show and 100ms on hide
+<CTooltip delay={{ show: 500, hide: 100 }}>...</CTooltip>`} />
+        </td>
+      </tr>
+      <tr id="ctooltip-fallback-placements">
+        <td className="text-primary fw-semibold">fallbackPlacements<a href="#ctooltip-fallback-placements" aria-label="CTooltip fallbackPlacements permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+        <td><code>{`['top', 'right', 'bottom', 'left']`}</code></td>
+        <td><code>{`'top', 'right', 'bottom', 'left'`}</code>, <code>{`('top', 'right', 'bottom', 'left')[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order.</p>
+        </td>
+      </tr>
+      <tr id="ctooltip-offset">
+        <td className="text-primary fw-semibold">offset<a href="#ctooltip-offset" aria-label="CTooltip offset permalink" className="anchor-link after">#</a></td>
+        <td><code>{`[0, 6]`}</code></td>
+        <td><code>{`[number, number]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Adjusts the offset of the React Tooltip relative to its target. Expects a tuple <code>{`[x-axis, y-axis]`}</code>.</p>
+        <JSXDocs code={`// Offset the menu 0px in X and 10px in Y direction
+<CTooltip offset={[0, 10]}>...</CTooltip>
+
+// Offset the menu 5px in both X and Y direction
+<CTooltip offset={[5, 5]}>...</CTooltip>`} />
+        </td>
+      </tr>
+      <tr id="ctooltip-on-hide">
+        <td className="text-primary fw-semibold">onHide<a href="#ctooltip-on-hide" aria-label="CTooltip onHide permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired immediately after the React Tooltip is hidden.</p>
+        </td>
+      </tr>
+      <tr id="ctooltip-on-show">
+        <td className="text-primary fw-semibold">onShow<a href="#ctooltip-on-show" aria-label="CTooltip onShow permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Callback fired immediately after the React Tooltip is shown.</p>
+        </td>
+      </tr>
+      <tr id="ctooltip-placement">
+        <td className="text-primary fw-semibold">placement<a href="#ctooltip-placement" aria-label="CTooltip placement permalink" className="anchor-link after">#</a></td>
+        <td><code>{`top`}</code></td>
+        <td><code>{`'auto'`}</code>, <code>{`'top'`}</code>, <code>{`'bottom'`}</code>, <code>{`'right'`}</code>, <code>{`'left'`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position.</p>
+        </td>
+      </tr>
+      <tr id="ctooltip-popper-config">
+        <td className="text-primary fw-semibold">popperConfig<a href="#ctooltip-popper-config" aria-label="CTooltip popperConfig permalink" className="anchor-link after">#</a><span className="badge bg-success">5.5.0+</span></td>
+        <td>-</td>
+        <td><code>{`Partial\<Options>`}</code>, <code>{`((defaultPopperConfig: Partial\<Options>) => Partial\<Options>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. <a href="https://popper.js.org/docs/v2/constructors/#options">Learn more</a></p>
+        <JSXDocs code={`<CTooltip
+  popperConfig={(defaultConfig) => ({
+    ...defaultConfig,
+    strategy: 'fixed',
+    modifiers: [
+      ...defaultConfig.modifiers,
+      { name: 'computeStyles', options: { adaptive: false } },
+    ],
+  })}
+>...</CTooltip>`} />
+        </td>
+      </tr>
+      <tr id="ctooltip-trigger">
+        <td className="text-primary fw-semibold">trigger<a href="#ctooltip-trigger" aria-label="CTooltip trigger permalink" className="anchor-link after">#</a></td>
+        <td><code>{`['hover', 'focus']`}</code></td>
+        <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code>, <code>{`('hover' | 'focus' | 'click')[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers.</p>
+        <JSXDocs code={`// Hover-only tooltip
+<CTooltip trigger="hover">...</CTooltip>
+
+// Hover + click combined
+<CTooltip trigger={['hover', 'click']}>...</CTooltip>`} />
+        </td>
+      </tr>
+      <tr id="ctooltip-visible">
+        <td className="text-primary fw-semibold">visible<a href="#ctooltip-visible" aria-label="CTooltip visible permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Controls the visibility of the React Tooltip.</p>
+<ul>
+<li><code>{`true`}</code> to show the tooltip.</li>
+<li><code>{`false`}</code> to hide the tooltip.</li>
+</ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CWidgetStatsA.api.mdx b/packages/docs/content/api/CWidgetStatsA.api.mdx
index c9d3d44e..c67a83f0 100644
--- a/packages/docs/content/api/CWidgetStatsA.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsA.api.mdx
@@ -5,11 +5,76 @@ import { CWidgetStatsA } from '@coreui/react'
 import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **action** | Action node for your component. | `ReactNode` | - |
-| **chart** | Chart node for your component. | `ReactNode` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **title** | Title node for your component. | `ReactNode` | - |
-| **value** | Value node for your component. | `ReactNode` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cwidgetstatsa-action">
+        <td className="text-primary fw-semibold">action<a href="#cwidgetstatsa-action" aria-label="CWidgetStatsA action permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Action node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsa-chart">
+        <td className="text-primary fw-semibold">chart<a href="#cwidgetstatsa-chart" aria-label="CWidgetStatsA chart permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Chart node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsa-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsa-class-name" aria-label="CWidgetStatsA className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsa-color">
+        <td className="text-primary fw-semibold">color<a href="#cwidgetstatsa-color" aria-label="CWidgetStatsA color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsa-title">
+        <td className="text-primary fw-semibold">title<a href="#cwidgetstatsa-title" aria-label="CWidgetStatsA title permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Title node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsa-value">
+        <td className="text-primary fw-semibold">value<a href="#cwidgetstatsa-value" aria-label="CWidgetStatsA value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CWidgetStatsB.api.mdx b/packages/docs/content/api/CWidgetStatsB.api.mdx
index fd1d98ea..87136d52 100644
--- a/packages/docs/content/api/CWidgetStatsB.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsB.api.mdx
@@ -5,12 +5,86 @@ import { CWidgetCWidgetStatsB } from '@coreui/react'
 import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetStatsB'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **inverse** | Colors have been inverted from their default dark shade. | `boolean` | - |
-| **progress** | Sets the color context of the progress bar to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **text** | Helper text for your component. | `string` | - |
-| **title** | Title node for your component. | `ReactNode` | - |
-| **value** | Value node for your component. | `ReactNode` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cwidgetcwidgetstatsb-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cwidgetcwidgetstatsb-class-name" aria-label="CWidgetCWidgetStatsB className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetcwidgetstatsb-color">
+        <td className="text-primary fw-semibold">color<a href="#cwidgetcwidgetstatsb-color" aria-label="CWidgetCWidgetStatsB color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetcwidgetstatsb-inverse">
+        <td className="text-primary fw-semibold">inverse<a href="#cwidgetcwidgetstatsb-inverse" aria-label="CWidgetCWidgetStatsB inverse permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Colors have been inverted from their default dark shade.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetcwidgetstatsb-progress">
+        <td className="text-primary fw-semibold">progress<a href="#cwidgetcwidgetstatsb-progress" aria-label="CWidgetCWidgetStatsB progress permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the progress bar to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetcwidgetstatsb-text">
+        <td className="text-primary fw-semibold">text<a href="#cwidgetcwidgetstatsb-text" aria-label="CWidgetCWidgetStatsB text permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Helper text for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetcwidgetstatsb-title">
+        <td className="text-primary fw-semibold">title<a href="#cwidgetcwidgetstatsb-title" aria-label="CWidgetCWidgetStatsB title permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Title node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetcwidgetstatsb-value">
+        <td className="text-primary fw-semibold">value<a href="#cwidgetcwidgetstatsb-value" aria-label="CWidgetCWidgetStatsB value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CWidgetStatsC.api.mdx b/packages/docs/content/api/CWidgetStatsC.api.mdx
index 8ec1d46c..d0e62bc7 100644
--- a/packages/docs/content/api/CWidgetStatsC.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsC.api.mdx
@@ -5,12 +5,86 @@ import { CWidgetStatsCWidgetStatsC } from '@coreui/react'
 import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWidgetStatsC'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **icon** | Icon node for your component. | `ReactNode` | - |
-| **inverse** | Colors have been inverted from their default dark shade. | `boolean` | - |
-| **progress** | Sets the color context of the progress bar to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **title** | Title node for your component. | `ReactNode` | - |
-| **value** | Value node for your component. | `ReactNode` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cwidgetstatscwidgetstatsc-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cwidgetstatscwidgetstatsc-class-name" aria-label="CWidgetStatsCWidgetStatsC className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatscwidgetstatsc-color">
+        <td className="text-primary fw-semibold">color<a href="#cwidgetstatscwidgetstatsc-color" aria-label="CWidgetStatsCWidgetStatsC color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatscwidgetstatsc-icon">
+        <td className="text-primary fw-semibold">icon<a href="#cwidgetstatscwidgetstatsc-icon" aria-label="CWidgetStatsCWidgetStatsC icon permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Icon node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatscwidgetstatsc-inverse">
+        <td className="text-primary fw-semibold">inverse<a href="#cwidgetstatscwidgetstatsc-inverse" aria-label="CWidgetStatsCWidgetStatsC inverse permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Colors have been inverted from their default dark shade.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatscwidgetstatsc-progress">
+        <td className="text-primary fw-semibold">progress<a href="#cwidgetstatscwidgetstatsc-progress" aria-label="CWidgetStatsCWidgetStatsC progress permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the progress bar to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatscwidgetstatsc-title">
+        <td className="text-primary fw-semibold">title<a href="#cwidgetstatscwidgetstatsc-title" aria-label="CWidgetStatsCWidgetStatsC title permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Title node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatscwidgetstatsc-value">
+        <td className="text-primary fw-semibold">value<a href="#cwidgetstatscwidgetstatsc-value" aria-label="CWidgetStatsCWidgetStatsC value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CWidgetStatsD.api.mdx b/packages/docs/content/api/CWidgetStatsD.api.mdx
index 9fffcde5..dc00f1c8 100644
--- a/packages/docs/content/api/CWidgetStatsD.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsD.api.mdx
@@ -5,10 +5,66 @@ import { CWidgetStatsD } from '@coreui/react'
 import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **chart** | Chart node for your component. | `ReactNode` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **icon** | Icon node for your component. | `ReactNode` | - |
-| **values** | Values and titles for your component. | `Value[]` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cwidgetstatsd-chart">
+        <td className="text-primary fw-semibold">chart<a href="#cwidgetstatsd-chart" aria-label="CWidgetStatsD chart permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Chart node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsd-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsd-class-name" aria-label="CWidgetStatsD className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsd-color">
+        <td className="text-primary fw-semibold">color<a href="#cwidgetstatsd-color" aria-label="CWidgetStatsD color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsd-icon">
+        <td className="text-primary fw-semibold">icon<a href="#cwidgetstatsd-icon" aria-label="CWidgetStatsD icon permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Icon node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsd-values">
+        <td className="text-primary fw-semibold">values<a href="#cwidgetstatsd-values" aria-label="CWidgetStatsD values permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`Value[]`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Values and titles for your component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CWidgetStatsE.api.mdx b/packages/docs/content/api/CWidgetStatsE.api.mdx
index c8b652f3..01db0735 100644
--- a/packages/docs/content/api/CWidgetStatsE.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsE.api.mdx
@@ -5,9 +5,56 @@ import { CWidgetStatsE } from '@coreui/react'
 import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **chart** | Chart node for your component. | `ReactNode` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **title** | Title node for your component. | `ReactNode` | - |
-| **value** | Value node for your component. | `ReactNode` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cwidgetstatse-chart">
+        <td className="text-primary fw-semibold">chart<a href="#cwidgetstatse-chart" aria-label="CWidgetStatsE chart permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Chart node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatse-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cwidgetstatse-class-name" aria-label="CWidgetStatsE className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatse-title">
+        <td className="text-primary fw-semibold">title<a href="#cwidgetstatse-title" aria-label="CWidgetStatsE title permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Title node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatse-value">
+        <td className="text-primary fw-semibold">value<a href="#cwidgetstatse-value" aria-label="CWidgetStatsE value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CWidgetStatsF.api.mdx b/packages/docs/content/api/CWidgetStatsF.api.mdx
index 90d5c0ce..e9caf466 100644
--- a/packages/docs/content/api/CWidgetStatsF.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsF.api.mdx
@@ -5,12 +5,86 @@ import { CWidgetStatsF } from '@coreui/react'
 import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **footer** | Footer node for your component. | `ReactNode` | - |
-| **icon** | Icon node for your component. | `ReactNode` | - |
-| **padding** | Set padding of your component. | `boolean` | true |
-| **title** | Title node for your component. | `ReactNode` | - |
-| **value** | Value node for your component. | `ReactNode` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cwidgetstatsf-class-name">
+        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsf-class-name" aria-label="CWidgetStatsF className permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsf-color">
+        <td className="text-primary fw-semibold">color<a href="#cwidgetstatsf-color" aria-label="CWidgetStatsF color permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsf-footer">
+        <td className="text-primary fw-semibold">footer<a href="#cwidgetstatsf-footer" aria-label="CWidgetStatsF footer permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Footer node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsf-icon">
+        <td className="text-primary fw-semibold">icon<a href="#cwidgetstatsf-icon" aria-label="CWidgetStatsF icon permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Icon node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsf-padding">
+        <td className="text-primary fw-semibold">padding<a href="#cwidgetstatsf-padding" aria-label="CWidgetStatsF padding permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Set padding of your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsf-title">
+        <td className="text-primary fw-semibold">title<a href="#cwidgetstatsf-title" aria-label="CWidgetStatsF title permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Title node for your component.</p>
+        </td>
+      </tr>
+      <tr id="cwidgetstatsf-value">
+        <td className="text-primary fw-semibold">value<a href="#cwidgetstatsf-value" aria-label="CWidgetStatsF value permalink" className="anchor-link after">#</a></td>
+        <td>-</td>
+        <td><code>{`ReactNode`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/components/accordion.mdx b/packages/docs/content/components/accordion.mdx
deleted file mode 100644
index 3dd6c723..00000000
--- a/packages/docs/content/components/accordion.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: React Accordion Component
-name: Accordion
-description: Build vertically collapsing accordions in combination with our React Accordion component.
-menu: Components
-route: /components/accordion
-other_frameworks: accordion
-pro_component: false
----
-
-import { useState } from 'react'
-
-import {
-  CAccordion,
-  CAccordionBody,
-  CAccordionCollapse,
-  CAccordionHeader,
-  CAccordionItem,
-} from '@coreui/react/src/index'
-
-## How to use React Accordion component.
-
-Click the accordions below to expand/collapse the accordion content.
-
-```jsx preview
-<CAccordion activeItemKey={2}>
-  <CAccordionItem itemKey={1}>
-    <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the first item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-  <CAccordionItem itemKey={2}>
-    <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the second item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-  <CAccordionItem itemKey={3}>
-    <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the second item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-</CAccordion>
-```
-
-### Flush
-
-Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
-
-```jsx preview
-<CAccordion flush>
-  <CAccordionItem itemKey={1}>
-    <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the first item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-  <CAccordionItem itemKey={2}>
-    <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the second item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-  <CAccordionItem itemKey={3}>
-    <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the third item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-</CAccordion>
-```
-
-### Always open
-
-Add `alwaysOpen` property to make react accordion items stay open when another item is opened.
-
-```jsx preview
-<CAccordion alwaysOpen activeItemKey={2}>
-  <CAccordionItem itemKey={1}>
-    <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the first item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-  <CAccordionItem itemKey={2}>
-    <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the second item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-  <CAccordionItem itemKey={3}>
-    <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-    <CAccordionBody>
-      <strong>This is the second item's accordion body.</strong> It is hidden by default, until the
-      collapse plugin adds the appropriate classes that we use to style each element. These classes
-      control the overall appearance, as well as the showing and hiding via CSS transitions. You can
-      modify any of this with custom CSS or overriding our default variables. It's also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>, though the transition
-      does limit overflow.
-    </CAccordionBody>
-  </CAccordionItem>
-</CAccordion>
-```
-
-## Customizing
-
-### CSS variables
-
-React accordions 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.
-
-<ScssDocs file="_accordion.scss" capture="accordion-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CAccordion style={vars}>...</CAccordion>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="accordion-variables"/>
-
-## API
-
-### CAccordion
-
-`markdown:CAccordion.api.mdx`
-
-### CAccordionBody
-
-`markdown:CAccordionBody.api.mdx`
-
-### CAccordionHeader
-
-`markdown:CAccordionHeader.api.mdx`
-
-### CAccordionItem
-
-`markdown:CAccordionItem.api.mdx`
diff --git a/packages/docs/content/components/accordion/accessibility.mdx b/packages/docs/content/components/accordion/accessibility.mdx
new file mode 100644
index 00000000..8dd1f95b
--- /dev/null
+++ b/packages/docs/content/components/accordion/accessibility.mdx
@@ -0,0 +1,66 @@
+---
+title: React Accordion Component Accesibility
+name: Accordion Accesibility
+description: Detailed overview of the accessibility features implemented in CoreUI React Accordion, ensuring compliance with WAI-ARIA guidelines.
+route: /components/accordion/
+---
+
+## Accessible React Accordion
+
+Accordions are a common UI pattern used to toggle the visibility of content. Ensuring that accordions are accessible is crucial for users who rely on assistive technologies. This guide demonstrates how to create an accessible accordion using CoreUI React components, adhering to the [WAI-ARIA Accordion Design Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+### Semantic Structure
+
+- **Button Headers**: Each accordion header is rendered as a native `<button>` element. This ensures that headers are inherently focusable and operable via keyboard without additional scripting.
+  
+- **Proper HTML Elements**: Utilizes appropriate HTML elements (`<button>`, `<div>`, etc.) to convey the correct semantic meaning, enhancing compatibility with screen readers and other assistive technologies.
+
+### ARIA Attributes
+
+CoreUI React Accordion incorporates essential ARIA attributes to communicate the state and relationships of accordion items to assistive technologies:
+
+- **`aria-expanded`**: Reflects the current state of the accordion item (`true` when expanded, `false` when collapsed).
+  
+- **`aria-controls`**: Associates each header with its corresponding content panel by referencing the panel's `id`.
+  
+- **`id`**: Unique identifiers for both headers and panels establish clear relationships, ensuring that screen readers can accurately describe the accordion structure.
+
+### Focus Management
+
+- **Automatic Focus Handling**: When an accordion panel is expanded or collapsed, focus is managed to ensure a seamless user experience. This prevents focus from being lost or trapped within the accordion, maintaining accessibility standards.
+
+### Visual Indicators
+
+- **Focus Styles**: Clear visual indicators are provided for focused elements, aiding users who navigate via keyboard.
+  
+- **Active States**: Distinct styling for active (expanded) accordion items helps users identify the current state of each section.
+
+
+### Keyboard Support
+
+The Accordion component supports comprehensive keyboard navigation out of the box:
+
+<div className="table-api table-responsive border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Key</th>
+        <th>Function</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><kbd>Tab</kbd></td>
+        <td>Moves focus to the next focusable element.</td>
+      </tr>
+      <tr>
+        <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+        <td>Moves focus to the previous focusable element.</td>
+      </tr>
+      <tr>
+        <td><kbd>Space</kbd> or <kbd>Enter</kbd></td>
+        <td>Toggle the expansion of the focused accordion header.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/components/accordion/api.mdx b/packages/docs/content/components/accordion/api.mdx
new file mode 100644
index 00000000..e2257eb1
--- /dev/null
+++ b/packages/docs/content/components/accordion/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Accordion Component API
+name: Accordion API
+description: Explore the API reference for the React Accordion component and discover how to effectively utilize its props for customization.
+route: /components/accordion/
+---
+
+import CAccordionAPI from '../../api/CAccordion.api.mdx'
+import CAccordionBodyAPI from '../../api/CAccordionBody.api.mdx'
+import CAccordionHeaderAPI from '../../api/CAccordionHeader.api.mdx'
+import CAccordionItemAPI from '../../api/CAccordionItem.api.mdx'
+
+## CAccordion
+
+<CAccordionAPI />
+
+## CAccordionBody
+
+<CAccordionBodyAPI />
+
+## CAccordionHeader
+
+<CAccordionHeaderAPI />
+
+## CAccordionItem
+
+<CAccordionItemAPI />
diff --git a/packages/docs/content/components/accordion/bootstrap.mdx b/packages/docs/content/components/accordion/bootstrap.mdx
new file mode 100644
index 00000000..59c789e9
--- /dev/null
+++ b/packages/docs/content/components/accordion/bootstrap.mdx
@@ -0,0 +1,34 @@
+---
+title: React Bootstrap Accordion Component
+name: Accordion with Bootstrap Styling
+description: Learn how to create vertically collapsing Bootstrap-style accordions using CoreUI’s React components.
+route: /components/accordion/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Accordion component
+
+Use CoreUI's React components styled with Bootstrap to build interactive and collapsible accordion sections.
+
+<ExampleSnippet className="theme-bootstrap" component="AccordionExample" componentName="React Bootstrap Accordion" />
+
+### Flush style
+
+Add the `flush` prop to remove default borders, background colors, and border radius — making the accordion items align flush with their container, following Bootstrap’s visual style.
+
+<ExampleSnippet className="theme-bootstrap" component="AccordionFlushExample" componentName="React Bootstrap Accordion" />
+
+### Always open behavior
+
+Use the `alwaysOpen` property to keep multiple accordion items expanded at the same time, mimicking Bootstrap’s multiple-item open functionality.
+
+<ExampleSnippet className="theme-bootstrap" component="AccordionAlwaysOpenExample" componentName="React Bootstrap Accordion" />
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of all the available props and components used to create Bootstrap-styled accordions in React.
+
+- [&lt;CAccordion /&gt;](../api/#caccordion)
+- [&lt;CAccordionBody /&gt;](../api/#caccordionbody)
+- [&lt;CAccordionHeader /&gt;](../api/#caccordionheader)
+- [&lt;CAccordionItem /&gt;](../api/#caccordionitem)
\ No newline at end of file
diff --git a/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx b/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx
new file mode 100644
index 00000000..04091e0f
--- /dev/null
+++ b/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
+
+export const AccordionAlwaysOpenExample = () => {
+  return (
+    <CAccordion alwaysOpen activeItemKey={2}>
+      <CAccordionItem itemKey={1}>
+        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+      <CAccordionItem itemKey={2}>
+        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+      <CAccordionItem itemKey={3}>
+        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+    </CAccordion>
+  )
+}
diff --git a/packages/docs/content/components/accordion/examples/AccordionExample.tsx b/packages/docs/content/components/accordion/examples/AccordionExample.tsx
new file mode 100644
index 00000000..e46f34ef
--- /dev/null
+++ b/packages/docs/content/components/accordion/examples/AccordionExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
+
+export const AccordionExample = () => {
+  return (
+    <CAccordion activeItemKey={2}>
+      <CAccordionItem itemKey={1}>
+        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+      <CAccordionItem itemKey={2}>
+        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+      <CAccordionItem itemKey={3}>
+        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+    </CAccordion>
+  )
+}
diff --git a/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx b/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx
new file mode 100644
index 00000000..0b9e1ed4
--- /dev/null
+++ b/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
+
+export const AccordionFlushExample = () => {
+  return (
+    <CAccordion flush>
+      <CAccordionItem itemKey={1}>
+        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+      <CAccordionItem itemKey={2}>
+        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+      <CAccordionItem itemKey={3}>
+        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
+        <CAccordionBody>
+          <strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
+          until the collapse plugin adds the appropriate classes that we use to style each element.
+          These classes control the overall appearance, as well as the showing and hiding via CSS
+          transitions. You can modify any of this with custom CSS or overriding our default
+          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
+          <code>.accordion-body</code>, though the transition does limit overflow.
+        </CAccordionBody>
+      </CAccordionItem>
+    </CAccordion>
+  )
+}
diff --git a/packages/docs/content/components/accordion/index.mdx b/packages/docs/content/components/accordion/index.mdx
new file mode 100644
index 00000000..6bacb217
--- /dev/null
+++ b/packages/docs/content/components/accordion/index.mdx
@@ -0,0 +1,35 @@
+---
+title: React Accordion Component
+name: Accordion
+description: Build vertically collapsing accordions in combination with our React Accordion component.
+route: /components/accordion/
+other_frameworks: accordion
+---
+
+## How to use React Accordion component.
+
+Click the accordions below to expand/collapse the accordion content.
+
+<ExampleSnippet component="AccordionExample" componentName="React Accordion" />
+
+### Flush
+
+Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
+
+<ExampleSnippet component="AccordionFlushExample" componentName="React Accordion" />
+
+### Always open
+
+Add `alwaysOpen` property to make react accordion items stay open when another item is opened.
+
+<ExampleSnippet component="AccordionAlwaysOpenExample" componentName="React Accordion" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CAccordion /&gt;](./api/#caccordion)
+- [&lt;CAccordionBody /&gt;](./api/#caccordionbody)
+- [&lt;CAccordionHeader /&gt;](./api/#caccordionheader)
+- [&lt;CAccordionItem /&gt;](./api/#caccordionitem)
+
diff --git a/packages/docs/content/components/accordion/styling.mdx b/packages/docs/content/components/accordion/styling.mdx
new file mode 100644
index 00000000..17dadcea
--- /dev/null
+++ b/packages/docs/content/components/accordion/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Accordion Component Styling
+name: Accordion Styling
+description: Learn how to customize the React Accordion component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/accordion/
+---
+
+### CSS variables
+
+React Accordion supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_accordion.scss" capture="accordion-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-accordion-color': '#333',
+  '--cui-accordion-bg': '#f8f9fa',
+}
+
+return <CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="accordion-variables" />
diff --git a/packages/docs/content/components/alert.mdx b/packages/docs/content/components/alert.mdx
deleted file mode 100644
index bb802c4b..00000000
--- a/packages/docs/content/components/alert.mdx
+++ /dev/null
@@ -1,262 +0,0 @@
----
-title: React Alert Component
-name: Alert
-description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
-menu: Components
-route: /components/alert
-other_frameworks: alert
----
-
-import { useState } from 'react'
-import { CAlert, CAlertHeading, CAlertLink, CButton } from '@coreui/react/src/index'
-
-import CIcon from '@coreui/icons-react'
-
-import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'
-
-## How to use React Alert Component.
-
-React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing).
-
-```jsx preview
-<CAlert color="primary">
-  A simple primary alert—check it out!
-</CAlert>
-<CAlert color="secondary">
-  A simple secondary alert—check it out!
-</CAlert>
-<CAlert color="success">
-  A simple success alert—check it out!
-</CAlert>
-<CAlert color="danger">
-  A simple danger alert—check it out!
-</CAlert>
-<CAlert color="warning">
-  A simple warning alert—check it out!
-</CAlert>
-<CAlert color="info">
-  A simple info alert—check it out!
-</CAlert>
-<CAlert color="light">
-  A simple light alert—check it out!
-</CAlert>
-<CAlert color="dark">
-  A simple dark alert—check it out!
-</CAlert>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
-  Using color to add meaning only provides a visual indication, which will not be conveyed to
-  users of assistive technologies – such as screen readers. Ensure that information denoted by the
-  color is either obvious from the content itself (e.g. the visible text), or is included through
-  alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-### Live example
-
-Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
-
-export const LiveExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>A simple primary alert—check it out!
-      </CAlert>
-      <CButton color="primary" onClick={() => setVisible(true)}>Show live alert</CButton>
-    </>
-  )
-}
-
-<Example>
-  <LiveExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>
-      A simple primary alert—check it out!
-    </CAlert>
-    <CButton color="primary" onClick={() => setVisible(true)}>
-      Show live alert
-    </CButton>
-  </>
-)
-```
-
-### Link color
-
-Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
-
-```jsx preview
-<CAlert color="primary">
-  A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="secondary">
-  A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="success">
-  A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="danger">
-  A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="warning">
-  A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="info">
-  A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="light">
-  A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-<CAlert color="dark">
-  A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
-</CAlert>
-```
-
-### Additional content
-
-React Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
-
-```jsx preview
-<CAlert color="success">
-  <CAlertHeading as="h4">Well done!</CAlertHeading>
-  <p>
-    Aww yeah, you successfully read this important alert message. This example text is going to run
-    a bit longer so that you can see how spacing within an alert works with this kind of content.
-  </p>
-  <hr />
-  <p className="mb-0">
-    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-  </p>
-</CAlert>
-```
-
-### Icons
-
-Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
-
-```jsx preview
-<CAlert color="primary" className="d-flex align-items-center">
-  <svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
-    <rect
-      width="32"
-      height="176"
-      x="240"
-      y="176"
-      fill="var(--ci-primary-color, currentColor)"
-      className="ci-primary"
-    ></rect>
-    <rect
-      width="32"
-      height="32"
-      x="240"
-      y="384"
-      fill="var(--ci-primary-color, currentColor)"
-      className="ci-primary"
-    ></rect>
-    <path
-      fill="var(--ci-primary-color, currentColor)"
-      d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"
-      className="ci-primary"
-    ></path>
-  </svg>
-  <div>An example alert with an icon</div>
-</CAlert>
-```
-
-Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://icons.coreui.io).
-
-```jsx preview
-<CAlert color="primary" className="d-flex align-items-center">
-  <CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
-  <div>An example alert with an icon</div>
-</CAlert>
-<CAlert color="success" className="d-flex align-items-center">
-  <CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
-  <div>An example success alert with an icon</div>
-</CAlert>
-<CAlert color="warning" className="d-flex align-items-center">
-  <CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
-  <div>An example warning alert with an icon</div>
-</CAlert>
-<CAlert color="danger" className="d-flex align-items-center">
-  <CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
-  <div>An example danger alert with an icon</div>
-</CAlert>
-```
-
-### Solid
-
-Use `variant="solid"` to change contextual colors to solid.
-
-```jsx preview
-<CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
-<CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
-<CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
-<CAlert color="danger" variant="solid">A simple solid danger alert—check it out!</CAlert>
-<CAlert color="warning" variant="solid">A simple solid warning alert—check it out!</CAlert>
-<CAlert color="info" variant="solid">A simple solid info alert—check it out!</CAlert>
-<CAlert color="light" variant="solid" className="text-high-emphasis">A simple solid light alert—check it out!</CAlert>
-<CAlert color="dark" variant="solid">A simple solid dark alert—check it out!</CAlert>
-```
-
-### Dismissing
-
-React Alert component can also be easily dismissed. Just add the `dismissible` prop.
-
-```jsx preview
-<CAlert
-  color="warning"
-  dismissible
-  onClose={() => {
-    alert('👋 Well, hi there! Thanks for dismissing me.')
-  }}
->
-  <strong>Go right ahead</strong> and click that dimiss over there on the right.
-</CAlert>
-```
-
-<Callout color="warning">
-  When an alert is dismissed, the element is completely removed from the page structure. If a
-  keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
-  depending on the browser, reset to the start of the page/document.
-</Callout>
-
-## Customizing
-
-### CSS variables
-
-React alerts 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.
-
-<ScssDocs file="_alert.scss" capture="alert-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
-  '--my-css-var': 10,
-  '--my-another-css-var': 'red',
-}
-return <CAlert style={vars}>...</CAlert>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="alert-variables"/>
-
-## API
-
-### CAlert
-
-`markdown:CAlert.api.mdx`
-
-### CAlertHeading
-
-`markdown:CAlertHeading.api.mdx`
-
-### CAlertLink
-
-`markdown:CAlertLink.api.mdx`
diff --git a/packages/docs/content/components/alert/api.mdx b/packages/docs/content/components/alert/api.mdx
new file mode 100644
index 00000000..287df6f8
--- /dev/null
+++ b/packages/docs/content/components/alert/api.mdx
@@ -0,0 +1,22 @@
+---
+title: React Alert Component API
+name: Alert API
+description: Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization.
+route: /components/alert/
+---
+
+import CAlertAPI from '../../api/CAlert.api.mdx'
+import CAlertHeadingAPI from '../../api/CAlertHeading.api.mdx'
+import CAlertLinkAPI from '../../api/CAlertLink.api.mdx'
+
+## CAlert
+
+<CAlertAPI />
+
+## CAlertHeading
+
+<CAlertHeadingAPI />
+
+## CAlertLink
+
+<CAlertLinkAPI />
diff --git a/packages/docs/content/components/alert/bootstrap.mdx b/packages/docs/content/components/alert/bootstrap.mdx
new file mode 100644
index 00000000..225a0735
--- /dev/null
+++ b/packages/docs/content/components/alert/bootstrap.mdx
@@ -0,0 +1,70 @@
+---
+title: React Bootstrap Alert Component
+name: Alert with Bootstrap Styling
+description: Learn how to use CoreUI’s React Alert component styled with Bootstrap for contextual feedback messages and dismissible UI alerts.
+menu: Components
+route: /components/alert/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Alert component
+
+CoreUI’s React Bootstrap Alerts provide contextual feedback messages for typical user interactions. Each alert supports Bootstrap-based colors and can include additional content and dismiss functionality.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertExample" componentName="React Bootstrap Alert" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+### Live example
+
+Click the button below to display an alert (initially hidden), then dismiss it using the built-in close button — styled the Bootstrap way.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertLiveExample" componentName="React Bootstrap Alert" />
+
+### Link color
+
+To include links inside your alert, use the `<CAlertLink>` component — it automatically adopts the contextual Bootstrap color of the parent alert.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertLinkColorExample" componentName="React Bootstrap Alert" />
+
+### Additional content
+
+React Bootstrap Alerts can include extra structured content such as headings, paragraphs, and horizontal rules for enhanced readability.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertAdditionalContentExample" componentName="React Bootstrap Alert" />
+
+### Icons
+
+Use CoreUI Icons and flexbox utilities to add icons to your alerts. Combine them with spacing utilities for precise layout control.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertIcons1Example" componentName="React Bootstrap Alert" />
+
+Need more than one icon in your alert? CoreUI Icons can be stacked or arranged using flex utilities.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertIcons2Example" componentName="React Bootstrap Alert" />
+
+### Solid style
+
+Add `variant="solid"` to give the alert a solid background color, in line with Bootstrap’s solid alert variants.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertSolidExample" componentName="React Bootstrap Alert" />
+
+### Dismissing
+
+Use the `dismissible` prop to allow users to close the alert. This will completely remove it from the DOM.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertDismissingExample" componentName="React Bootstrap Alert" />
+
+<Callout color="warning">
+  When an alert is dismissed, the element is completely removed from the page structure. If a
+  keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
+  depending on the browser, reset to the start of the page/document.
+</Callout>
+
+## API reference
+
+Review the API documentation for detailed information about the props available in the Bootstrap-styled React Alert component.
+
+- [&lt;CAlert /&gt;](../api/#calert)
+- [&lt;CAlertHeading /&gt;](../api/#calertheading)
+- [&lt;CAlertLink /&gt;](../api/#calertlink)
diff --git a/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx b/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx
new file mode 100644
index 00000000..d51a8ea1
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CAlert, CAlertHeading } from '@coreui/react'
+
+export const AlertAdditionalContentExample = () => {
+  return (
+    <CAlert color="success">
+      <CAlertHeading as="h4">Well done!</CAlertHeading>
+      <p>
+        Aww yeah, you successfully read this important alert message. This example text is going to
+        run a bit longer so that you can see how spacing within an alert works with this kind of
+        content.
+      </p>
+      <hr />
+      <p className="mb-0">
+        Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+      </p>
+    </CAlert>
+  )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx b/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx
new file mode 100644
index 00000000..0e3825ab
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+
+export const AlertDismissingExample = () => {
+  return (
+    <CAlert
+      color="warning"
+      dismissible
+      onClose={() => {
+        alert('👋 Well, hi there! Thanks for dismissing me.')
+      }}
+    >
+      <strong>Go right ahead</strong> and click that dimiss over there on the right.
+    </CAlert>
+  )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertExample.tsx b/packages/docs/content/components/alert/examples/AlertExample.tsx
new file mode 100644
index 00000000..b9454ba7
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+
+export const AlertExample = () => {
+  return (
+    <>
+      <CAlert color="primary">A simple primary alert—check it out!</CAlert>
+      <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
+      <CAlert color="success">A simple success alert—check it out!</CAlert>
+      <CAlert color="danger">A simple danger alert—check it out!</CAlert>
+      <CAlert color="warning">A simple warning alert—check it out!</CAlert>
+      <CAlert color="info">A simple info alert—check it out!</CAlert>
+      <CAlert color="light">A simple light alert—check it out!</CAlert>
+      <CAlert color="dark">A simple dark alert—check it out!</CAlert>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx b/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx
new file mode 100644
index 00000000..7c47cc48
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+
+export const AlertIcons1Example = () => {
+  return (
+    <CAlert color="primary" className="d-flex align-items-center">
+      <svg className="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
+        <rect
+          width="32"
+          height="176"
+          x="240"
+          y="176"
+          fill="var(--ci-primary-color, currentColor)"
+          className="ci-primary"
+        ></rect>
+        <rect
+          width="32"
+          height="32"
+          x="240"
+          y="384"
+          fill="var(--ci-primary-color, currentColor)"
+          className="ci-primary"
+        ></rect>
+        <path
+          fill="var(--ci-primary-color, currentColor)"
+          d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z"
+          className="ci-primary"
+        ></path>
+      </svg>
+      <div>An example alert with an icon</div>
+    </CAlert>
+  )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx b/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx
new file mode 100644
index 00000000..64be2cc8
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilBurn, cilCheckCircle, cilInfo, cilWarning } from '@coreui/icons'
+
+export const AlertIcons2Example = () => {
+  return (
+    <>
+      <CAlert color="primary" className="d-flex align-items-center">
+        <CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
+        <div>An example alert with an icon</div>
+      </CAlert>
+      <CAlert color="success" className="d-flex align-items-center">
+        <CIcon icon={cilCheckCircle} className="flex-shrink-0 me-2" width={24} height={24} />
+        <div>An example success alert with an icon</div>
+      </CAlert>
+      <CAlert color="warning" className="d-flex align-items-center">
+        <CIcon icon={cilWarning} className="flex-shrink-0 me-2" width={24} height={24} />
+        <div>An example warning alert with an icon</div>
+      </CAlert>
+      <CAlert color="danger" className="d-flex align-items-center">
+        <CIcon icon={cilBurn} className="flex-shrink-0 me-2" width={24} height={24} />
+        <div>An example danger alert with an icon</div>
+      </CAlert>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx b/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx
new file mode 100644
index 00000000..aa5e47ce
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { CAlert, CAlertLink } from '@coreui/react'
+
+export const AlertLinkColorExample = () => {
+  return (
+    <>
+      <CAlert color="primary">
+        A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+        click if you like.
+      </CAlert>
+      <CAlert color="secondary">
+        A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+        click if you like.
+      </CAlert>
+      <CAlert color="success">
+        A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+        click if you like.
+      </CAlert>
+      <CAlert color="danger">
+        A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+        click if you like.
+      </CAlert>
+      <CAlert color="warning">
+        A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a
+        click if you like.
+      </CAlert>
+      <CAlert color="info">
+        A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+        if you like.
+      </CAlert>
+      <CAlert color="light">
+        A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+        if you like.
+      </CAlert>
+      <CAlert color="dark">
+        A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click
+        if you like.
+      </CAlert>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertLiveExample.tsx b/packages/docs/content/components/alert/examples/AlertLiveExample.tsx
new file mode 100644
index 00000000..68584534
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertLiveExample.tsx
@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import { CAlert, CButton } from '@coreui/react'
+
+export const AlertLiveExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>
+        A simple primary alert—check it out!
+      </CAlert>
+      <CButton color="primary" onClick={() => setVisible(true)}>
+        Show live alert
+      </CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/alert/examples/AlertSolidExample.tsx b/packages/docs/content/components/alert/examples/AlertSolidExample.tsx
new file mode 100644
index 00000000..98917b57
--- /dev/null
+++ b/packages/docs/content/components/alert/examples/AlertSolidExample.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { CAlert } from '@coreui/react'
+
+export const AlertSolidExample = () => {
+  return (
+    <>
+      <CAlert color="primary" variant="solid">
+        A simple solid primary alert—check it out!
+      </CAlert>
+      <CAlert color="secondary" variant="solid">
+        A simple solid secondary alert—check it out!
+      </CAlert>
+      <CAlert color="success" variant="solid">
+        A simple solid success alert—check it out!
+      </CAlert>
+      <CAlert color="danger" variant="solid">
+        A simple solid danger alert—check it out!
+      </CAlert>
+      <CAlert color="warning" variant="solid">
+        A simple solid warning alert—check it out!
+      </CAlert>
+      <CAlert color="info" variant="solid">
+        A simple solid info alert—check it out!
+      </CAlert>
+      <CAlert color="light" variant="solid" className="text-high-emphasis">
+        A simple solid light alert—check it out!
+      </CAlert>
+      <CAlert color="dark" variant="solid">
+        A simple solid dark alert—check it out!
+      </CAlert>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/alert/index.mdx b/packages/docs/content/components/alert/index.mdx
new file mode 100644
index 00000000..d6e4064a
--- /dev/null
+++ b/packages/docs/content/components/alert/index.mdx
@@ -0,0 +1,70 @@
+---
+title: React Alert Component
+name: Alert
+description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
+menu: Components
+route: /components/alert/
+other_frameworks: alert
+---
+
+## How to use React Alert Component.
+
+React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing).
+
+<ExampleSnippet component="AlertExample" componentName="React Alert" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+### Live example
+
+Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
+
+<ExampleSnippet component="AlertLiveExample" componentName="React Alert" />
+
+### Link color
+
+Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
+
+<ExampleSnippet component="AlertLinkColorExample" componentName="React Alert" />
+
+### Additional content
+
+React Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
+
+<ExampleSnippet component="AlertAdditionalContentExample" componentName="React Alert" />
+
+### Icons
+
+Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://coreui.io/icons/) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
+
+<ExampleSnippet component="AlertIcons1Example" componentName="React Alert" />
+
+Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://coreui.io/icons/).
+
+<ExampleSnippet component="AlertIcons2Example" componentName="React Alert" />
+
+### Solid
+
+Use `variant="solid"` to change contextual colors to solid.
+
+<ExampleSnippet component="AlertSolidExample" componentName="React Alert" />
+
+### Dismissing
+
+React Alert component can also be easily dismissed. Just add the `dismissible` prop.
+
+<ExampleSnippet component="AlertDismissingExample" componentName="React Alert" />
+
+<Callout color="warning">
+  When an alert is dismissed, the element is completely removed from the page structure. If a
+  keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
+  depending on the browser, reset to the start of the page/document.
+</Callout>
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CAlert /&gt;](./api/#calert)
+- [&lt;CAlertHeading /&gt;](./api/#calertheading)
+- [&lt;CAlertLink /&gt;](./api/#calertlink)
diff --git a/packages/docs/content/components/alert/styling.mdx b/packages/docs/content/components/alert/styling.mdx
new file mode 100644
index 00000000..07d572f3
--- /dev/null
+++ b/packages/docs/content/components/alert/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Alert Component Styling
+name: Alert Styling
+description: Learn how to customize the React Alert component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/alert/
+---
+
+### CSS variables
+
+React Alert supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_alert.scss" capture="alert-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-alert-color': '#333',
+  '--cui-alert-bg': '#f8f9fa',
+}
+
+return <CAlert style={customVars}>{/* Alert content */}</CAlert>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="alert-variables" />
diff --git a/packages/docs/content/components/avatar.mdx b/packages/docs/content/components/avatar.mdx
deleted file mode 100644
index ebc7bae1..00000000
--- a/packages/docs/content/components/avatar.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: React Avatar Component
-name: Avatar
-description: The React Avatar component is used to display circular user profile pictures. React avatars can portray people or objects and support images, icons, or letters.
-menu: Components
-route: /components/avatar
-other_frameworks: avatar
----
-
-import { CAvatar } from '@coreui/react/src/index'
-
-import Avatar1 from './../assets/images/avatars/1.jpg'
-import Avatar2 from './../assets/images/avatars/2.jpg'
-import Avatar3 from './../assets/images/avatars/3.jpg'
-
-## Image avatars
-
-Showcase React avatars using images. These avatars are typically circular and can display user profile pictures.
-
-```jsx preview
-<CAvatar src={Avatar1} />
-<CAvatar src={Avatar2} />
-<CAvatar src={Avatar3} />
-```
-
-## Letter avatars
-
-Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
-
-```jsx preview
-<CAvatar color="primary" textColor="white">CUI</CAvatar>
-<CAvatar color="secondary">CUI</CAvatar>
-<CAvatar color="warning" textColor="white">CUI</CAvatar>
-```
-
-## Icons avatars 
-
-Incorporate icons within React avatars, allowing for a visual representation using scalable vector graphics (SVG).
-
-```jsx preview
-<CAvatar color="info" textColor="white">
-  <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
-    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
-  </svg>
-</CAvatar>
-<CAvatar color="success" textColor="white">
-  <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
-    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
-  </svg>
-</CAvatar>
-<CAvatar color="danger" textColor="white">
-  <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
-    <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
-  </svg>
-</CAvatar>
-```
-
-## Rounded avatars
-
-Use the `shape="rounded"` prop to make react avatars squared with rounded corners.
-
-```jsx preview
-<CAvatar color="primary" textColor="white" shape="rounded">CUI</CAvatar>
-<CAvatar color="secondary" shape="rounded">CUI</CAvatar>
-<CAvatar color="warning" textColor="white" shape="rounded">CUI</CAvatar>
-```
-
-## Square avatars
-
-Use the `shape="rounded-0"` prop to make react avatars squared.
-
-```jsx preview
-<CAvatar color="primary" textColor="white" shape="rounded-0">CUI</CAvatar>
-<CAvatar color="secondary" shape="rounded-0">CUI</CAvatar>
-<CAvatar color="warning" textColor="white" shape="rounded-0">CUI</CAvatar>
-```
-
-## Sizes
-
-Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.
-
-```jsx preview
-<CAvatar color="secondary" size="xl">CUI</CAvatar>
-<CAvatar color="secondary" size="lg">CUI</CAvatar>
-<CAvatar color="secondary" size="md">CUI</CAvatar>
-<CAvatar color="secondary">CUI</CAvatar>
-<CAvatar color="secondary" size="sm">CUI</CAvatar>
-```
-
-## Avatars with status
-
-Add a status indicator to avatars using the `status` property to show online or offline status.
-
-```jsx preview
-<CAvatar src={Avatar1} status="success" />
-<CAvatar color="secondary" status="danger">CUI</CAvatar>
-```
-
-## Customizing
-
-### CSS variables
-
-React avatars use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_avatar.scss" capture="avatar-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
-  '--my-css-var': 10,
-  '--my-another-css-var': 'red',
-}
-return <CAvatar style={vars}>...</CAvatar>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="avatar-variables"/>
-
-## API
-
-### CAvatar
-
-`markdown:CAvatar.api.mdx`
diff --git a/packages/docs/content/components/avatar/api.mdx b/packages/docs/content/components/avatar/api.mdx
new file mode 100644
index 00000000..43f01720
--- /dev/null
+++ b/packages/docs/content/components/avatar/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Avatar Component API
+name: Avatar API
+description: Explore the API reference for the React Avatar component and discover how to effectively utilize its props for customization.
+route: /components/avatar/
+---
+
+import CAvatarAPI from '../../api/CAvatar.api.mdx'
+
+## CAvatar
+
+<CAvatarAPI />
diff --git a/packages/docs/content/components/avatar/bootstrap.mdx b/packages/docs/content/components/avatar/bootstrap.mdx
new file mode 100644
index 00000000..4dfa9db8
--- /dev/null
+++ b/packages/docs/content/components/avatar/bootstrap.mdx
@@ -0,0 +1,55 @@
+---
+title: React Bootstrap Avatar Component
+name: Avatar with Bootstrap Styling
+description: Learn how to use CoreUI’s React Avatar component styled with Bootstrap to display profile images, icons, initials, and status indicators in a consistent and responsive design.
+route: /components/avatar/
+bootstrap_component: true
+---
+
+## Image avatars
+
+Use Bootstrap-styled React avatars to display user profile images in a circular format — ideal for representing user accounts and contacts.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarImage" componentName="React Bootstrap Avatar" />
+
+## Letter avatars
+
+Display user initials using letter-based avatars. A perfect fallback when images aren’t available, and still visually consistent with Bootstrap styling.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarLetter" componentName="React Bootstrap Avatar" />
+
+## Icon avatars
+
+Insert icons into avatars for representing roles, objects, or placeholder users. Supports vector icons with Bootstrap-friendly layout.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarIcon" componentName="React Bootstrap Avatar" />
+
+## Rounded avatars
+
+Use the `shape="rounded"` prop to apply Bootstrap’s rounded corners to the avatar, giving it a subtle square-rounded appearance.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarRounded" componentName="React Bootstrap Avatar" />
+
+## Square avatars
+
+To make avatars fully square with no border radius, apply `shape="rounded-0"`, matching Bootstrap’s `rounded-0` utility style.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarSquare" componentName="React Bootstrap Avatar" />
+
+## Sizes
+
+Customize avatar size using the `size` prop. Available options include `xl`, `lg`, `md`, and `sm`, aligning with Bootstrap’s scalable design system.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarSizes" componentName="React Bootstrap Avatar" />
+
+## Avatars with status
+
+Add a small status indicator (e.g. online, offline) to avatars using the `status` prop — useful for chat interfaces or user dashboards.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarWithStatus" componentName="React Bootstrap Avatar" />
+
+## API reference
+
+Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component.
+
+- [&lt;CAvatar /&gt;](../api/#cavatar)
diff --git a/packages/docs/content/components/avatar/examples/AvatarIcon.tsx b/packages/docs/content/components/avatar/examples/AvatarIcon.tsx
new file mode 100644
index 00000000..80a56932
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarIcon = () => {
+  return (
+    <>
+      <CAvatar color="info" textColor="white">
+        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
+          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+        </svg>
+      </CAvatar>
+      <CAvatar color="success" textColor="white">
+        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
+          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+        </svg>
+      </CAvatar>
+      <CAvatar color="danger" textColor="white">
+        <svg id="cib-coreui-c" className="icon" viewBox="0 0 32 32">
+          <path d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path>
+          <path d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path>
+        </svg>
+      </CAvatar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarImage.tsx b/packages/docs/content/components/avatar/examples/AvatarImage.tsx
new file mode 100644
index 00000000..266a306e
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarImage.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarImage = () => {
+  return (
+    <>
+      <CAvatar src={withPrefix('/images/avatars/1.jpg')} />
+      <CAvatar src={withPrefix('/images/avatars/2.jpg')} />
+      <CAvatar src={withPrefix('/images/avatars/3.jpg')} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarLetter.tsx b/packages/docs/content/components/avatar/examples/AvatarLetter.tsx
new file mode 100644
index 00000000..a67c7406
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarLetter.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarLetter = () => {
+  return (
+    <>
+      <CAvatar color="primary" textColor="white">
+        CUI
+      </CAvatar>
+      <CAvatar color="secondary">CUI</CAvatar>
+      <CAvatar color="warning" textColor="white">
+        CUI
+      </CAvatar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarRounded.tsx b/packages/docs/content/components/avatar/examples/AvatarRounded.tsx
new file mode 100644
index 00000000..b2d69418
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarRounded.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarRounded = () => {
+  return (
+    <>
+      <CAvatar color="primary" textColor="white" shape="rounded">
+        CUI
+      </CAvatar>
+      <CAvatar color="secondary" shape="rounded">
+        CUI
+      </CAvatar>
+      <CAvatar color="warning" textColor="white" shape="rounded">
+        CUI
+      </CAvatar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarSizes.tsx b/packages/docs/content/components/avatar/examples/AvatarSizes.tsx
new file mode 100644
index 00000000..7cf52140
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarSizes.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarSizes = () => {
+  return (
+    <>
+      <CAvatar color="secondary" size="xl">
+        CUI
+      </CAvatar>
+      <CAvatar color="secondary" size="lg">
+        CUI
+      </CAvatar>
+      <CAvatar color="secondary" size="md">
+        CUI
+      </CAvatar>
+      <CAvatar color="secondary">CUI</CAvatar>
+      <CAvatar color="secondary" size="sm">
+        CUI
+      </CAvatar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarSquare.tsx b/packages/docs/content/components/avatar/examples/AvatarSquare.tsx
new file mode 100644
index 00000000..1a35ac8f
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarSquare.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarSquare = () => {
+  return (
+    <>
+      <CAvatar color="primary" textColor="white" shape="rounded-0">
+        CUI
+      </CAvatar>
+      <CAvatar color="secondary" shape="rounded-0">
+        CUI
+      </CAvatar>
+      <CAvatar color="warning" textColor="white" shape="rounded-0">
+        CUI
+      </CAvatar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx
new file mode 100644
index 00000000..ce8141fa
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CAvatar } from '@coreui/react'
+
+export const AvatarWithStatus = () => {
+  return (
+    <>
+      <CAvatar src={withPrefix('/images/avatars/1.jpg')} status="success" />
+      <CAvatar color="secondary" status="danger">
+        CUI
+      </CAvatar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/avatar/index.mdx b/packages/docs/content/components/avatar/index.mdx
new file mode 100644
index 00000000..2789b003
--- /dev/null
+++ b/packages/docs/content/components/avatar/index.mdx
@@ -0,0 +1,56 @@
+---
+title: React Avatar Component
+name: Avatar
+description: The React Avatar component is used to display circular user profile pictures. React avatars can portray people or objects and support images, icons, or letters.
+route: /components/avatar/
+other_frameworks: avatar
+---
+
+## Image avatars
+
+Showcase React avatars using images. These avatars are typically circular and can display user profile pictures.
+
+<ExampleSnippet component="AvatarImage" componentName="React Avatar" />
+
+## Letter avatars
+
+Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
+
+<ExampleSnippet component="AvatarLetter" componentName="React Avatar" />
+
+## Icons avatars 
+
+Incorporate icons within React avatars, allowing for a visual representation using scalable vector graphics (SVG).
+
+<ExampleSnippet component="AvatarIcon" componentName="React Avatar" />
+
+## Rounded avatars
+
+Use the `shape="rounded"` prop to make react avatars squared with rounded corners.
+
+<ExampleSnippet component="AvatarRounded" componentName="React Avatar" />
+
+## Square avatars
+
+Use the `shape="rounded-0"` prop to make react avatars squared.
+
+<ExampleSnippet component="AvatarSquare" componentName="React Avatar" />
+
+## Sizes
+
+Fancy larger or smaller react avatar component? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.
+
+<ExampleSnippet component="AvatarSizes" componentName="React Avatar" />
+
+## Avatars with status
+
+Add a status indicator to avatars using the `status` property to show online or offline status.
+
+<ExampleSnippet component="AvatarWithStatus" componentName="React Avatar" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CAvatar /&gt;](./api/#cavatar)
+
diff --git a/packages/docs/content/components/avatar/styling.mdx b/packages/docs/content/components/avatar/styling.mdx
new file mode 100644
index 00000000..eaefe78d
--- /dev/null
+++ b/packages/docs/content/components/avatar/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Avatar Component Styling
+name: Avatar Styling
+description: Learn how to customize the React Avatar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/avatar/
+---
+
+### CSS variables
+
+React Avatar supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_avatar.scss" capture="avatar-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-avatar-font-size': '1rem',
+  '--cui-avatar-status-width': '0.125rem',
+}
+
+return <CAvatar style={customVars} />
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="avatar-variables" />
diff --git a/packages/docs/content/components/badge.mdx b/packages/docs/content/components/badge.mdx
deleted file mode 100644
index 10501457..00000000
--- a/packages/docs/content/components/badge.mdx
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: React Badge Component
-name: Badge
-description: React badge component is small count and labeling component.
-menu: Components
-route: /components/badge
-other_frameworks: badge
----
-
-import { CBadge, CButton } from '@coreui/react/src/index'
-
-## How to use React Badge Component.
-
-React badge component scales to suit the size of the parent element by using relative font sizing and `em` units.
-
-```jsx preview
-<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
-<h2>Example heading <CBadge color="secondary">New</CBadge></h2>
-<h3>Example heading <CBadge color="secondary">New</CBadge></h3>
-<h4>Example heading <CBadge color="secondary">New</CBadge></h4>
-<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
-<h6>Example heading <CBadge color="secondary">New</CBadge></h6>
-```
-
-React badges can be used as part of links or buttons to provide a counter.
-
-```jsx preview
-<CButton color="primary">
-  Notifications <CBadge color="secondary">4</CBadge>
-</CButton>
-```
-
-Remark that depending on how you use them, react badges may be complicated for users of screen readers and related assistive technologies.
-
-Unless the context is clear, consider including additional context with a visually hidden piece of additional text.
-
-```jsx preview
-<CButton color="primary">
-  Profile <CBadge color="secondary">9</CBadge>
-  <span className="visually-hidden">unread messages</span>
-</CButton>
-```
-
-### Positioned
-
-Use `position` prop to modify a component and position it in the corner of a link or button.
-
-```jsx preview
-<CButton color="primary" className="position-relative">
-  Profile
-  <CBadge color="danger" position="top-start" shape="rounded-pill">
-    99+ <span className="visually-hidden">unread messages</span>
-  </CBadge>
-</CButton>
-<CButton color="primary" className="position-relative">
-  Profile
-  <CBadge color="danger" position="top-end" shape="rounded-pill">
-    99+ <span className="visually-hidden">unread messages</span>
-  </CBadge>
-</CButton>
-<br/>
-<CButton color="primary" className="position-relative">
-  Profile
-  <CBadge color="danger" position="bottom-start" shape="rounded-pill">
-    99+ <span className="visually-hidden">unread messages</span>
-  </CBadge>
-</CButton>
-<CButton color="primary" className="position-relative">
-  Profile
-  <CBadge color="danger" position="bottom-end" shape="rounded-pill">
-    99+ <span className="visually-hidden">unread messages</span>
-  </CBadge>
-</CButton>
-```
-
-You can also create more generic indicators without a counter using a few more utilities.
-
-```jsx preview
-<CButton color="primary" className="position-relative">
-  Profile
-  <CBadge
-    className="border border-light p-2"
-    color="danger"
-    position="top-end"
-    shape="rounded-circle"
-  >
-    <span className="visually-hidden">New alerts</span>
-  </CBadge>
-</CButton>
-```
-
-## Contextual variations
-
-Add any of the below-mentioned `color` props to modify the presentation of a react badge.
-
-```jsx preview
-<CBadge color="primary">primary</CBadge>
-<CBadge color="success">success</CBadge>
-<CBadge color="danger">danger</CBadge>
-<CBadge color="warning">warning</CBadge>
-<CBadge color="info">info</CBadge>
-<CBadge textBgColor="light">light</CBadge>
-<CBadge color="dark">dark</CBadge>
-```
-
-You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
-
-```jsx preview
-<CBadge textBgColor="primary">primary</CBadge>
-<CBadge textBgColor="success">success</CBadge>
-<CBadge textBgColor="danger">danger</CBadge>
-<CBadge textBgColor="warning">warning</CBadge>
-<CBadge textBgColor="info">info</CBadge>
-<CBadge textBgColor="light">light</CBadge>
-<CBadge textBgColor="dark">dark</CBadge>
-```
-
-## Pill badges
-
-Apply the `shape="rounded-pill"` prop to make badges rounded.
-
-```jsx preview
-<CBadge color="primary" shape="rounded-pill">primary</CBadge>
-<CBadge color="success" shape="rounded-pill">success</CBadge>
-<CBadge color="danger" shape="rounded-pill">danger</CBadge>
-<CBadge color="warning" shape="rounded-pill">warning</CBadge>
-<CBadge color="info" shape="rounded-pill">info</CBadge>
-<CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
-<CBadge color="dark" shape="rounded-pill">dark</CBadge>
-```
-
-## Customizing
-
-### CSS variables
-
-React badges use local CSS variables on `.badges` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_badge.scss" capture="badge-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
-  '--my-css-var': 10,
-  '--my-another-css-var': 'red',
-}
-return <CBadge style={vars}>...</CBadge>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="badge-variables"/>
-
-## API
-
-### CBadge
-
-`markdown:CBadge.api.mdx`
diff --git a/packages/docs/content/components/badge/api.mdx b/packages/docs/content/components/badge/api.mdx
new file mode 100644
index 00000000..0cf7ef43
--- /dev/null
+++ b/packages/docs/content/components/badge/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Badge Component API
+name: Badge API
+description: Explore the API reference for the React Badge component and discover how to effectively utilize its props for customization.
+route: /components/badge/
+---
+
+import CBadgeAPI from '../../api/CBadge.api.mdx'
+
+## CBadge
+
+<CBadgeAPI />
diff --git a/packages/docs/content/components/badge/bootstrap.mdx b/packages/docs/content/components/badge/bootstrap.mdx
new file mode 100644
index 00000000..26481218
--- /dev/null
+++ b/packages/docs/content/components/badge/bootstrap.mdx
@@ -0,0 +1,53 @@
+---
+title: React Bootstrap Badge Component
+name: Badge with Bootstrap Styling
+description: Learn how to use CoreUI’s React Badge component with Bootstrap styles to display counters, labels, and indicators within buttons, links, and UI elements.
+route: /components/badge/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Badge component
+
+React Bootstrap Badges scale based on their parent using `em` units, making them easy to embed inside headings, buttons, or navigation items.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgeExample" componentName="React Bootstrap Badge" />
+
+You can also use badges inside buttons and links to display counters or notifications.
+
+<ExampleSnippet className="theme-bootstrap" component="Badge2Example" componentName="React Bootstrap Badge" />
+
+Keep in mind that depending on usage, badges might be challenging for screen reader users. Add visually hidden helper text when needed to improve accessibility.
+
+<ExampleSnippet className="theme-bootstrap" component="Badge3Example" componentName="React Bootstrap Badge" />
+
+### Positioned badges
+
+Use the `position` prop to place the badge in the corner of a button or link, mimicking the Bootstrap positioning helpers.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgePositionedExample" componentName="React Bootstrap Badge" />
+
+You can also create generic status indicators without a number by combining badges with utility classes.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgePositioned2Example" componentName="React Bootstrap Badge" />
+
+## Contextual variations
+
+Apply `color` props like `primary`, `danger`, or `success` to control the background color of the badge in a Bootstrap-consistent way.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgeContextualVariations" componentName="React Bootstrap Badge" />
+
+Use `textBgColor` to automatically set contrasting text and background colors according to WCAG accessibility standards.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgeContextual2Variations" componentName="React Bootstrap Badge" />
+
+## Pill badges
+
+To make badges more rounded, use the `shape="rounded-pill"` prop. This mirrors Bootstrap’s pill-style badge appearance.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgePillExample" componentName="React Bootstrap Badge" />
+
+## API reference
+
+See below for the full API reference for all available props for the Bootstrap-styled React Badge component.
+
+- [&lt;CBadge /&gt;](../api/#cbadge)
diff --git a/packages/docs/content/components/badge/examples/Badge2Example.tsx b/packages/docs/content/components/badge/examples/Badge2Example.tsx
new file mode 100644
index 00000000..c5af3862
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/Badge2Example.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CBadge, CButton } from '@coreui/react'
+
+export const Badge2Example = () => {
+  return (
+    <CButton color="primary">
+      Notifications <CBadge color="secondary">4</CBadge>
+    </CButton>
+  )
+}
diff --git a/packages/docs/content/components/badge/examples/Badge3Example.tsx b/packages/docs/content/components/badge/examples/Badge3Example.tsx
new file mode 100644
index 00000000..ee8f2ef9
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/Badge3Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBadge, CButton } from '@coreui/react'
+
+export const Badge3Example = () => {
+  return (
+    <CButton color="primary">
+      Profile <CBadge color="secondary">9</CBadge>
+      <span className="visually-hidden">unread messages</span>
+    </CButton>
+  )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx b/packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx
new file mode 100644
index 00000000..363ec2aa
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CBadge } from '@coreui/react'
+
+export const BadgeContextual2Variations = () => {
+  return (
+    <>
+      <CBadge textBgColor="primary">primary</CBadge>
+      <CBadge textBgColor="success">success</CBadge>
+      <CBadge textBgColor="danger">danger</CBadge>
+      <CBadge textBgColor="warning">warning</CBadge>
+      <CBadge textBgColor="info">info</CBadge>
+      <CBadge textBgColor="light">light</CBadge>
+      <CBadge textBgColor="dark">dark</CBadge>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx b/packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx
new file mode 100644
index 00000000..7f601c5f
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CBadge } from '@coreui/react'
+
+export const BadgeContextualVariations = () => {
+  return (
+    <>
+      <CBadge color="primary">primary</CBadge>
+      <CBadge color="success">success</CBadge>
+      <CBadge color="danger">danger</CBadge>
+      <CBadge color="warning">warning</CBadge>
+      <CBadge color="info">info</CBadge>
+      <CBadge textBgColor="light">light</CBadge>
+      <CBadge color="dark">dark</CBadge>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgeExample.tsx b/packages/docs/content/components/badge/examples/BadgeExample.tsx
new file mode 100644
index 00000000..83812e06
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgeExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CBadge } from '@coreui/react'
+
+export const BadgeExample = () => {
+  return (
+    <>
+      <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
+      <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
+      <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
+      <h4>Example heading <CBadge color="secondary">New</CBadge></h4>
+      <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
+      <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgePillExample.tsx b/packages/docs/content/components/badge/examples/BadgePillExample.tsx
new file mode 100644
index 00000000..fad582a6
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgePillExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CBadge } from '@coreui/react'
+
+export const BadgePillExample = () => {
+  return (
+    <>
+      <CBadge color="primary" shape="rounded-pill">primary</CBadge>
+      <CBadge color="success" shape="rounded-pill">success</CBadge>
+      <CBadge color="danger" shape="rounded-pill">danger</CBadge>
+      <CBadge color="warning" shape="rounded-pill">warning</CBadge>
+      <CBadge color="info" shape="rounded-pill">info</CBadge>
+      <CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
+      <CBadge color="dark" shape="rounded-pill">dark</CBadge>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx b/packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx
new file mode 100644
index 00000000..53a01aef
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CBadge, CButton } from '@coreui/react'
+
+export const BadgePositioned2Example = () => {
+  return (
+    <CButton color="primary" className="position-relative">
+      Profile
+      <CBadge
+        className="border border-light p-2"
+        color="danger"
+        position="top-end"
+        shape="rounded-circle"
+      >
+        <span className="visually-hidden">New alerts</span>
+      </CBadge>
+    </CButton>
+  )
+}
diff --git a/packages/docs/content/components/badge/examples/BadgePositionedExample.tsx b/packages/docs/content/components/badge/examples/BadgePositionedExample.tsx
new file mode 100644
index 00000000..b12cf61a
--- /dev/null
+++ b/packages/docs/content/components/badge/examples/BadgePositionedExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CBadge, CButton } from '@coreui/react'
+
+export const BadgePositionedExample = () => {
+  return (
+    <>
+      <CButton color="primary" className="position-relative">
+        Profile
+        <CBadge color="danger" position="top-start" shape="rounded-pill">
+          99+ <span className="visually-hidden">unread messages</span>
+        </CBadge>
+      </CButton>
+      <CButton color="primary" className="position-relative">
+        Profile
+        <CBadge color="danger" position="top-end" shape="rounded-pill">
+          99+ <span className="visually-hidden">unread messages</span>
+        </CBadge>
+      </CButton>
+      <br />
+      <CButton color="primary" className="position-relative">
+        Profile
+        <CBadge color="danger" position="bottom-start" shape="rounded-pill">
+          99+ <span className="visually-hidden">unread messages</span>
+        </CBadge>
+      </CButton>
+      <CButton color="primary" className="position-relative">
+        Profile
+        <CBadge color="danger" position="bottom-end" shape="rounded-pill">
+          99+ <span className="visually-hidden">unread messages</span>
+        </CBadge>
+      </CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/badge/index.mdx b/packages/docs/content/components/badge/index.mdx
new file mode 100644
index 00000000..a0cda7bd
--- /dev/null
+++ b/packages/docs/content/components/badge/index.mdx
@@ -0,0 +1,55 @@
+---
+title: React Badge Component
+name: Badge
+description: React badge component is small count and labeling component.
+route: /components/badge/
+other_frameworks: badge
+---
+
+## How to use React Badge Component.
+
+React badge component scales to suit the size of the parent element by using relative font sizing and `em` units.
+
+<ExampleSnippet component="BadgeExample" componentName="React Badge" />
+
+React badges can be used as part of links or buttons to provide a counter.
+
+<ExampleSnippet component="Badge2Example" componentName="React Badge" />
+
+Remark that depending on how you use them, react badges may be complicated for users of screen readers and related assistive technologies.
+
+Unless the context is clear, consider including additional context with a visually hidden piece of additional text.
+
+<ExampleSnippet component="Badge3Example" componentName="React Badge" />
+
+### Positioned
+
+Use `position` prop to modify a component and position it in the corner of a link or button.
+
+<ExampleSnippet component="BadgePositionedExample" componentName="React Badge" />
+
+You can also create more generic indicators without a counter using a few more utilities.
+
+<ExampleSnippet component="BadgePositioned2Example" componentName="React Badge" />
+
+## Contextual variations
+
+Add any of the below-mentioned `color` props to modify the presentation of a react badge.
+
+<ExampleSnippet component="BadgeContextualVariations" componentName="React Badge" />
+
+You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
+
+<ExampleSnippet component="BadgeContextual2Variations" componentName="React Badge" />
+
+## Pill badges
+
+Apply the `shape="rounded-pill"` prop to make badges rounded.
+
+<ExampleSnippet component="BadgePillExample" componentName="React Badge" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CBadge /&gt;](./api/#cbadge)
diff --git a/packages/docs/content/components/badge/styling.mdx b/packages/docs/content/components/badge/styling.mdx
new file mode 100644
index 00000000..4dcbb45c
--- /dev/null
+++ b/packages/docs/content/components/badge/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Badge Component Styling
+name: Badge Styling
+description: Learn how to customize the React Badge component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/badge/
+---
+
+### CSS variables
+
+React Badge supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_badge.scss" capture="badge-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-avatar-font-size': '2rem',
+  '--cui-avatar-color': '#f2f3f4',
+}
+
+return <CBadge style={customVars} />
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="badge-variables" />
diff --git a/packages/docs/content/components/breadcrumb.mdx b/packages/docs/content/components/breadcrumb.mdx
deleted file mode 100644
index 96c0d6df..00000000
--- a/packages/docs/content/components/breadcrumb.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: React Breadcrumb Component
-name: Breadcrumb
-description: React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
-menu: Components
-route: /components/breadcrumb
-other_frameworks: breadcrumb
----
-
-import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react/src/index'
-
-## How to use React Breadcrumb Component.
-
-The react breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.
-
-```jsx preview
-<CBreadcrumb>
-  <CBreadcrumbItem active>Home</CBreadcrumbItem>
-</CBreadcrumb>
-
-<CBreadcrumb>
-  <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
-  <CBreadcrumbItem active>Library</CBreadcrumbItem>
-</CBreadcrumb>
-
-<CBreadcrumb>
-  <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
-  <CBreadcrumbItem href="#">Library</CBreadcrumbItem>
-  <CBreadcrumbItem active>Data</CBreadcrumbItem>
-</CBreadcrumb>
-```
-
-## Dividers
-
-Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--coreui-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
-
-```jsx preview
-<CBreadcrumb style={{"--cui-breadcrumb-divider": "'>'"}}>
-  <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
-  <CBreadcrumbItem active>Library</CBreadcrumbItem>
-</CBreadcrumb>
-```
-
-When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
-
-```scss
-$breadcrumb-divider: quote(">");
-```
-
-It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
-
-```jsx preview
-<CBreadcrumb style={{"--cui-breadcrumb-divider": "url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"}}>
-  <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
-  <CBreadcrumbItem active>Library</CBreadcrumbItem>
-</CBreadcrumb>
-```
-
-```scss
-$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
-width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
-```
-
-You can also remove the divider setting `--cui-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
-
-```jsx preview
-<CBreadcrumb style={{"--cui-breadcrumb-divider": "'';"}}>
-  <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
-  <CBreadcrumbItem active>Library</CBreadcrumbItem>
-</CBreadcrumb>
-```
-
-```scss
-$breadcrumb-divider: none;
-```
-
-## Accessibility
-
-Since react breadcrumbs provide navigation, it's useful to add a significant label such as `aria-label="breadcrumb"` to explain the type of navigation implemented in the `<nav>` element. You should also add an `aria-current="page"` to the last item of the set to show that it represents the current page. **CoreUI for React.js automatically add all of this labels to breadcrumb's components.** 
-
-For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
-
-## Customizing
-
-### CSS variables
-
-React breadcrumbs 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.
-
-<ScssDocs file="_breadcrumb.scss" capture="breadcrumb-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CBreadcrumb style={vars}>...</CBreadcrumb>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="breadcrumb-variables"/>
-
-## API
-
-### CBreadcrumb
-
-`markdown:CBreadcrumb.api.mdx`
-
-### CBreadcrumbItem
-
-`markdown:CBreadcrumbItem.api.mdx`
diff --git a/packages/docs/content/components/breadcrumb/api.mdx b/packages/docs/content/components/breadcrumb/api.mdx
new file mode 100644
index 00000000..a2f37b3f
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Breadcrumb Component API
+name: Breadcrumb API
+description: Explore the API reference for the React Breadcrumb component and discover how to effectively utilize its props for customization.
+route: /components/breadcrumb/
+---
+
+import CBreadcrumbAPI from '../../api/CBreadcrumb.api.mdx'
+import CBreadcrumbItemAPI from '../../api/CBreadcrumbItem.api.mdx'
+
+## CBreadcrumb
+
+<CBreadcrumbAPI />
+
+## CBreadcrumbItem
+
+<CBreadcrumbItemAPI />
diff --git a/packages/docs/content/components/breadcrumb/bootstrap.mdx b/packages/docs/content/components/breadcrumb/bootstrap.mdx
new file mode 100644
index 00000000..56b1f06d
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/bootstrap.mdx
@@ -0,0 +1,57 @@
+---
+title: React Bootstrap Breadcrumb Component
+name: Breadcrumb with Bootstrap Styling
+description: Learn how to use CoreUI’s React Breadcrumb component styled with Bootstrap to indicate navigation hierarchy and enhance user orientation within your app or website.
+route: /components/breadcrumb/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Breadcrumb component
+
+The React Bootstrap Breadcrumb navigation component shows users where they are in the application hierarchy. It automatically inserts visual separators via CSS, so you don’t have to manually include them.
+
+<ExampleSnippet className="theme-bootstrap" component="BreadcrumbExample" componentName="React Bootstrap Breadcrumb" />
+
+## Custom dividers
+
+Separators between breadcrumb items are automatically inserted using CSS via [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and the [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property.
+
+You can customize the divider using the CSS variable `--cui-breadcrumb-divider` or the Sass variable `$breadcrumb-divider`. For RTL support, there’s also `$breadcrumb-divider-flipped`.
+
+<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividersExample" componentName="React Bootstrap Breadcrumb" />
+
+To change the divider in Sass, use the `quote` function. For example, to use a `>` character:
+
+```scss
+$breadcrumb-divider: quote('>');
+```
+
+It’s also possible to use an **embedded SVG icon** as a divider by assigning it to the custom property or Sass variable:
+
+<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividers2Example" componentName="React Bootstrap Breadcrumb" />
+
+```scss
+$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
+width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
+```
+
+To remove dividers entirely, set the CSS custom property to an empty string or the Sass variable to `none`.
+
+<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividers3Example" componentName="React Bootstrap Breadcrumb" />
+
+```scss
+$breadcrumb-divider: none;
+```
+
+## Accessibility
+
+React Bootstrap Breadcrumbs are accessible by default. CoreUI adds `aria-label="breadcrumb"` to the navigation container and `aria-current="page"` to the active item to ensure proper screen reader behavior.
+
+For best practices, refer to the [WAI-ARIA Authoring Practices: Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
+
+## API reference
+
+Check the API reference below for full details on all available props for the Bootstrap-styled React Breadcrumb component.
+
+- [&lt;CBreadcrumb /&gt;](../api/#cbreadcrumb)
+- [&lt;CBreadcrumbItem /&gt;](../api/#cbreadcrumbitem)
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx
new file mode 100644
index 00000000..da355c51
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividers2Example = () => {
+  return (
+    <CBreadcrumb
+      style={{
+        '--cui-breadcrumb-divider': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E")`,
+      }}
+    >
+      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+      <CBreadcrumbItem active>Library</CBreadcrumbItem>
+    </CBreadcrumb>
+  )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx
new file mode 100644
index 00000000..04a943a2
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividers2Example = () => {
+  return (
+    <CBreadcrumb
+      style={
+        {
+          '--cui-breadcrumb-divider': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E")`,
+        } as React.CSSProperties
+      }
+    >
+      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+      <CBreadcrumbItem active>Library</CBreadcrumbItem>
+    </CBreadcrumb>
+  )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx
new file mode 100644
index 00000000..9b814696
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividers3Example = () => {
+  return (
+    <CBreadcrumb style={{ '--cui-breadcrumb-divider': '""' }}>
+      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+      <CBreadcrumbItem active>Library</CBreadcrumbItem>
+    </CBreadcrumb>
+  )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx
new file mode 100644
index 00000000..bd002005
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividers3Example = () => {
+  return (
+    <CBreadcrumb style={{ '--cui-breadcrumb-divider': '""' } as React.CSSProperties}>
+      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+      <CBreadcrumbItem active>Library</CBreadcrumbItem>
+    </CBreadcrumb>
+  )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx
new file mode 100644
index 00000000..d9006e97
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividersExample = () => {
+  return (
+    <CBreadcrumb style={{ '--cui-breadcrumb-divider': '">"' }}>
+      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+      <CBreadcrumbItem active>Library</CBreadcrumbItem>
+    </CBreadcrumb>
+  )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx
new file mode 100644
index 00000000..2ab4116e
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbDividersExample = () => {
+  return (
+    <CBreadcrumb style={{ '--cui-breadcrumb-divider': '">"' } as React.CSSProperties}>
+      <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+      <CBreadcrumbItem active>Library</CBreadcrumbItem>
+    </CBreadcrumb>
+  )
+}
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx
new file mode 100644
index 00000000..a50c180a
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react'
+
+export const BreadcrumbExample = () => {
+  return (
+    <>
+      <CBreadcrumb>
+        <CBreadcrumbItem active>Home</CBreadcrumbItem>
+      </CBreadcrumb>
+
+      <CBreadcrumb>
+        <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+        <CBreadcrumbItem active>Library</CBreadcrumbItem>
+      </CBreadcrumb>
+
+      <CBreadcrumb>
+        <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
+        <CBreadcrumbItem href="#">Library</CBreadcrumbItem>
+        <CBreadcrumbItem active>Data</CBreadcrumbItem>
+      </CBreadcrumb>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/breadcrumb/index.mdx b/packages/docs/content/components/breadcrumb/index.mdx
new file mode 100644
index 00000000..8a20ae03
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/index.mdx
@@ -0,0 +1,55 @@
+---
+title: React Breadcrumb Component
+name: Breadcrumb
+description: React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
+route: /components/breadcrumb/
+other_frameworks: breadcrumb
+---
+
+## How to use React Breadcrumb Component.
+
+The react breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.
+
+<ExampleSnippet component="BreadcrumbExample" componentName="React Breadcrumb" />
+
+## Dividers
+
+Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--cui-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
+
+<ExampleSnippet component="BreadcrumbDividersExample" componentName="React Breadcrumb" />
+
+When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this:
+
+```scss
+$breadcrumb-divider: quote('>');
+```
+
+It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
+
+<ExampleSnippet component="BreadcrumbDividers2Example" componentName="React Breadcrumb" />
+
+```scss
+$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
+width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
+```
+
+You can also remove the divider setting `--cui-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
+
+<ExampleSnippet component="BreadcrumbDividers3Example" componentName="React Breadcrumb" />
+
+```scss
+$breadcrumb-divider: none;
+```
+
+## Accessibility
+
+Since react breadcrumbs provide navigation, it's useful to add a significant label such as `aria-label="breadcrumb"` to explain the type of navigation implemented in the `<nav>` element. You should also add an `aria-current="page"` to the last item of the set to show that it represents the current page. **CoreUI for React.js automatically add all of this labels to breadcrumb's components.**
+
+For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CBreadcrumb /&gt;](./api/#cbreadcrumb)
+- [&lt;CBreadcrumbItem /&gt;](./api/#cbreadcrumbitem)
diff --git a/packages/docs/content/components/breadcrumb/styling.mdx b/packages/docs/content/components/breadcrumb/styling.mdx
new file mode 100644
index 00000000..874d3736
--- /dev/null
+++ b/packages/docs/content/components/breadcrumb/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Breadcrumb Component Styling
+name: Breadcrumb Styling
+description: Learn how to customize the React Breadcrumb component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/breadcrumb/
+---
+
+### CSS variables
+
+React Breadcrumb supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_breadcrumb.scss" capture="breadcrumb-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-breadcrumb-bg': '#eee',
+  '--cui-breadcrumb-divider-color': '#a2a3a4',
+}
+
+return <CBreadcrumb style={customVars} />
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="breadcrumb-variables" />
diff --git a/packages/docs/content/components/button-group.mdx b/packages/docs/content/components/button-group.mdx
deleted file mode 100644
index d14bcb53..00000000
--- a/packages/docs/content/components/button-group.mdx
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: React Button Group Component
-name: Button group
-description: React button group component allows to group a series of buttons and power them with JavaScript.
-menu: Components
-route: /components/button-group
-other_frameworks: button-group
----
-
-import {
-  CButtonGroup,
-  CButtonToolbar,
-  CButton,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CFormCheck,
-  CFormInput,
-  CInputGroup,
-  CInputGroupText,
-} from '@coreui/react/src/index'
-
-## How to use React Button Group Component.
-
-Wrap a series of `<CButton>` components in `<CButtonGroup>`.
-
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic example">
-  <CButton color="primary">Left</CButton>
-  <CButton color="primary">Middle</CButton>
-  <CButton color="primary">Right</CButton>
-</CButtonGroup>
-```
-
-##### Ensure the correct `role` and provide a label
-
-For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`.
-
-Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used.
-
-These classes can also be added to groups of links, as an alternative to the `<CNav>` components.
-
-```jsx preview
-<CButtonGroup>
-  <CButton href="#" color="primary" active>Active link</CButton>
-  <CButton href="#" color="primary">Link</CButton>
-  <CButton href="#" color="primary">Link</CButton>
-</CButtonGroup>
-```
-
-## Mixed styles
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic mixed styles example">
-  <CButton color="danger">Left</CButton>
-  <CButton color="warning">Middle</CButton>
-  <CButton color="success">Right</CButton>
-</CButtonGroup>
-```
-
-## Outlined styles
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic outlined example">
-  <CButton color="primary" variant="outline">Left</CButton>
-  <CButton color="primary" variant="outline">Middle</CButton>
-  <CButton color="primary" variant="outline">Right</CButton>
-</CButtonGroup>
-```
-
-## Checkbox and radio button groups
-
-Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
-  <CFormCheck
-    button={{ color: 'primary', variant: 'outline' }}
-    id="btncheck1"
-    autoComplete="off"
-    label="Checkbox 1"
-  />
-  <CFormCheck
-    button={{ color: 'primary', variant: 'outline' }}
-    id="btncheck2"
-    autoComplete="off"
-    label="Checkbox 2"
-  />
-  <CFormCheck
-    button={{ color: 'primary', variant: 'outline' }}
-    id="btncheck3"
-    autoComplete="off"
-    label="Checkbox 3"
-  />
-</CButtonGroup>
-```
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
-  <CFormCheck
-    type="radio"
-    button={{ color: 'primary', variant: 'outline' }}
-    name="btnradio"
-    id="btnradio1"
-    autoComplete="off"
-    label="Radio 1"
-  />
-  <CFormCheck
-    type="radio"
-    button={{ color: 'primary', variant: 'outline' }}
-    name="btnradio"
-    id="btnradio2"
-    autoComplete="off"
-    label="Radio 2"
-  />
-  <CFormCheck
-    type="radio"
-    button={{ color: 'primary', variant: 'outline' }}
-    name="btnradio"
-    id="btnradio3"
-    autoComplete="off"
-    label="Radio 3"
-  />
-</CButtonGroup>
-```
-
-## Button toolbar
-
-Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.
-
-```jsx preview
-<CButtonToolbar role="group" aria-label="Toolbar with button groups">
-  <CButtonGroup className="me-2" role="group" aria-label="First group">
-    <CButton color="primary">1</CButton>
-    <CButton color="primary">2</CButton>
-    <CButton color="primary">3</CButton>
-    <CButton color="primary">4</CButton>
-  </CButtonGroup>
-  <CButtonGroup className="me-2" role="group" aria-label="Second group">
-    <CButton color="secondary">5</CButton>
-    <CButton color="secondary">6</CButton>
-    <CButton color="secondary">7</CButton>
-  </CButtonGroup>
-  <CButtonGroup className="me-2" role="group" aria-label="Third group">
-    <CButton color="info">8</CButton>
-  </CButtonGroup>
-</CButtonToolbar>
-```
-
-Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
-
-```jsx preview
-<CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
-  <CButtonGroup className="me-2" role="group" aria-label="First group">
-    <CButton color="secondary" variant="outline">1</CButton>
-    <CButton color="secondary" variant="outline">2</CButton>
-    <CButton color="secondary" variant="outline">3</CButton>
-    <CButton color="secondary" variant="outline">4</CButton>
-  </CButtonGroup>
-  <CInputGroup>
-    <CInputGroupText>@</CInputGroupText>
-    <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
-  </CInputGroup>
-</CButtonToolbar>
-<CButtonToolbar className="justify-content-between" role="group" aria-label="Toolbar with button groups">
-  <CButtonGroup className="me-2" role="group" aria-label="First group">
-    <CButton color="secondary" variant="outline">1</CButton>
-    <CButton color="secondary" variant="outline">2</CButton>
-    <CButton color="secondary" variant="outline">3</CButton>
-    <CButton color="secondary" variant="outline">4</CButton>
-  </CButtonGroup>
-  <CInputGroup>
-    <CInputGroupText>@</CInputGroupText>
-    <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
-  </CInputGroup>
-</CButtonToolbar>
-```
-
-## Sizing
-
-Alternatively, of implementing button sizing classes to each button in a group, set `size` property to all `<CButtonGroup>`'s, including each one when nesting multiple groups.
-
-```jsx preview
-<CButtonGroup size="lg" role="group" aria-label="Large button group">
-  <CButton color="primary" variant="outline">Left</CButton>
-  <CButton color="primary" variant="outline">Middle</CButton>
-  <CButton color="primary" variant="outline">Right</CButton>
-</CButtonGroup>
-<br/>
-<CButtonGroup role="group" aria-label="Default button group">
-  <CButton color="primary" variant="outline">Left</CButton>
-  <CButton color="primary" variant="outline">Middle</CButton>
-  <CButton color="primary" variant="outline">Right</CButton>
-</CButtonGroup>
-<br/>
-<CButtonGroup size="sm" role="group" aria-label="Small button group">
-  <CButton color="primary" variant="outline">Left</CButton>
-  <CButton color="primary" variant="outline">Middle</CButton>
-  <CButton color="primary" variant="outline">Right</CButton>
-</CButtonGroup>
-```
-
-## Nesting
-
-Put a `<CButtonGroup>` inside another `<CButtonGroup>` when you need dropdown menus combined with a series of buttons.
-
-```jsx preview
-<CButtonGroup role="group" aria-label="Button group with nested dropdown">
-  <CButton color="primary">1</CButton>
-  <CButton color="primary">2</CButton>
-  <CDropdown variant="btn-group">
-    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider />
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-</CButtonGroup>
-```
-
-## Vertical variation
-
-Create a set of buttons that appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
-
-```jsx preview
-<CButtonGroup vertical role="group" aria-label="Vertical button group">
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-</CButtonGroup>
-```
-
-```jsx preview
-<CButtonGroup vertical role="group" aria-label="Vertical button group">
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-  <CDropdown variant="btn-group">
-    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider />
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-  <CDropdown variant="btn-group">
-    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider />
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-  <CDropdown variant="btn-group">
-    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider />
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-  <CDropdown variant="btn-group">
-    <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider />
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-</CButtonGroup>
-```
-
-```jsx preview
-<CButtonGroup vertical role="group" aria-label="Vertical button group">
-  <CFormCheck
-    type="radio"
-    button={{ color: 'danger', variant: 'outline' }}
-    name="vbtnradio"
-    id="vbtnradio1"
-    autoComplete="off"
-    label="Radio 1"
-    defaultChecked
-  />
-  <CFormCheck
-    type="radio"
-    button={{ color: 'danger', variant: 'outline' }}
-    name="vbtnradio"
-    id="vbtnradio2"
-    autoComplete="off"
-    label="Radio 2"
-  />
-  <CFormCheck
-    type="radio"
-    button={{ color: 'danger', variant: 'outline' }}
-    name="vbtnradio"
-    id="vbtnradio3"
-    autoComplete="off"
-    label="Radio 3"
-  />
-</CButtonGroup>
-```
-
-## API
-
-### CButtonGroup
-
-`markdown:CButtonGroup.api.mdx`
-
-### CButtonToolbar
-
-`markdown:CButtonToolbar.api.mdx`
diff --git a/packages/docs/content/components/button-group/api.mdx b/packages/docs/content/components/button-group/api.mdx
new file mode 100644
index 00000000..dcf5b538
--- /dev/null
+++ b/packages/docs/content/components/button-group/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Button Group Component API
+name: Button Group API
+description: Explore the API reference for the React Button Group component and discover how to effectively utilize its props for customization.
+route: /components/button-group/
+---
+
+import CButtonGroupAPI from '../../api/CButtonGroup.api.mdx'
+import CButtonToolbarAPI from '../../api/CButtonToolbar.api.mdx'
+
+## CButtonGroup
+
+<CButtonGroupAPI />
+
+## CButtonToolbar
+
+<CButtonToolbarAPI />
diff --git a/packages/docs/content/components/button-group/bootstrap.mdx b/packages/docs/content/components/button-group/bootstrap.mdx
new file mode 100644
index 00000000..71728df0
--- /dev/null
+++ b/packages/docs/content/components/button-group/bootstrap.mdx
@@ -0,0 +1,78 @@
+---
+title: React Bootstrap Button Group Component
+name: Button Group with Bootstrap Styling
+description: Learn how to group buttons using the React Bootstrap Button Group component from CoreUI. Create accessible, styled toolbars and button sets with ease.
+route: /components/button-group/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Button Group component
+
+The React Bootstrap Button Group component allows you to group multiple buttons together into a single toolbar-like unit. Wrap a series of `<CButton>` components in a `<CButtonGroup>` to get started.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupExample" componentName="React Bootstrap Button Group" />
+
+<Callout color="info" title={<>Ensure the correct <code>role</code> and provide a label</>}>
+  For assistive technologies (e.g. screen readers) to identify a set of buttons as grouped, use `role="group"` for button groups and `role="toolbar"` for toolbars.
+
+  Always include an accessible label using `aria-label` or `aria-labelledby` to clarify the purpose of the group.
+</Callout>
+
+React Bootstrap Button Groups can also be applied to a group of links instead of using the [`CNav`](./../navs-tabs/#base-nav) component.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroup2Example" componentName="React Bootstrap Button Group" />
+
+## Mixed styles in React Bootstrap Button Groups
+
+Combine buttons with different styles within a single group for more flexible UI designs.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupMixedStylesExample" componentName="React Bootstrap Button Group" />
+
+## Outlined button styles
+
+Use `variant="outline"` on grouped buttons to apply Bootstrap's outline button style across the group.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupOutlinedStylesExample" componentName="React Bootstrap Button Group" />
+
+## Checkbox and radio button groups
+
+Create interactive grouped controls by combining button-style checkboxes and radio buttons inside a React Bootstrap Button Group.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupCheckboxAndRadioExample" componentName="React Bootstrap Button Group" />
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupCheckboxAndRadio2Example" componentName="React Bootstrap Button Group" />
+
+## React Bootstrap Button Toolbar
+
+Group multiple button groups together into a toolbar using `<CButtonToolbar>`. Combine with layout utilities to control spacing and alignment.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonToolbarExample" componentName="React Bootstrap Button Group" />
+
+You can also combine input groups with button groups to create interactive toolbars.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonToolbar2Example" componentName="React Bootstrap Button Group" />
+
+## Sizing React Bootstrap Button Groups
+
+Instead of setting size on individual buttons, apply the `size` prop to the `<CButtonGroup>` to make all buttons within it uniformly sized.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupSizingExample" componentName="React Bootstrap Button Group" />
+
+## Nesting button groups
+
+Nest a `<CButtonGroup>` inside another to combine dropdowns with standard buttons, as supported in React Bootstrap Button Group usage.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupNestingExample" componentName="React Bootstrap Button Group" />
+
+## Vertical React Bootstrap Button Groups
+
+Stack buttons vertically using the vertical variation of React Bootstrap Button Group. Note: split dropdowns are not supported in vertical mode.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupVerticalExample" componentName="React Bootstrap Button Group" />
+
+## API reference
+
+Explore the API documentation for available props and configuration for the React Bootstrap Button Group component and toolbars.
+
+- [&lt;CButtonGroup /&gt;](../api/#cbuttongroup)
+- [&lt;CButtonToolbar /&gt;]()
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx b/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx
new file mode 100644
index 00000000..f4e129cf
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroup2Example = () => {
+  return (
+    <CButtonGroup>
+      <CButton href="#" color="primary" active>Active link</CButton>
+      <CButton href="#" color="primary">Link</CButton>
+      <CButton href="#" color="primary">Link</CButton>
+    </CButtonGroup>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx
new file mode 100644
index 00000000..e18dc93b
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { CButtonGroup, CFormCheck } from '@coreui/react'
+
+export const ButtonGroupCheckboxAndRadio2Example = () => {
+  return (
+    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
+      <CFormCheck
+        type="radio"
+        button={{ color: 'primary', variant: 'outline' }}
+        name="btnradio"
+        id="btnradio1"
+        autoComplete="off"
+        label="Radio 1"
+      />
+      <CFormCheck
+        type="radio"
+        button={{ color: 'primary', variant: 'outline' }}
+        name="btnradio"
+        id="btnradio2"
+        autoComplete="off"
+        label="Radio 2"
+      />
+      <CFormCheck
+        type="radio"
+        button={{ color: 'primary', variant: 'outline' }}
+        name="btnradio"
+        id="btnradio3"
+        autoComplete="off"
+        label="Radio 3"
+      />
+    </CButtonGroup>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx
new file mode 100644
index 00000000..8246f88f
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { CButtonGroup, CFormCheck } from '@coreui/react'
+
+export const ButtonGroupCheckboxAndRadioExample = () => {
+  return (
+    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
+      <CFormCheck
+        button={{ color: 'primary', variant: 'outline' }}
+        id="btncheck1"
+        autoComplete="off"
+        label="Checkbox 1"
+      />
+      <CFormCheck
+        button={{ color: 'primary', variant: 'outline' }}
+        id="btncheck2"
+        autoComplete="off"
+        label="Checkbox 2"
+      />
+      <CFormCheck
+        button={{ color: 'primary', variant: 'outline' }}
+        id="btncheck3"
+        autoComplete="off"
+        label="Checkbox 3"
+      />
+    </CButtonGroup>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx
new file mode 100644
index 00000000..3f6fd246
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroupExample = () => {
+  return (
+    <CButtonGroup role="group" aria-label="Basic example">
+      <CButton color="primary">Left</CButton>
+      <CButton color="primary">Middle</CButton>
+      <CButton color="primary">Right</CButton>
+    </CButtonGroup>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx
new file mode 100644
index 00000000..aaaf76c0
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroupMixedStylesExample = () => {
+  return (
+    <CButtonGroup role="group" aria-label="Basic mixed styles example">
+      <CButton color="danger">Left</CButton>
+      <CButton color="warning">Middle</CButton>
+      <CButton color="success">Right</CButton>
+    </CButtonGroup>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx
new file mode 100644
index 00000000..6e2a4ef6
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import {
+  CButton,
+  CButtonGroup,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const ButtonGroupNestingExample = () => {
+  return (
+    <CButtonGroup role="group" aria-label="Button group with nested dropdown">
+      <CButton color="primary">1</CButton>
+      <CButton color="primary">2</CButton>
+      <CDropdown variant="btn-group">
+        <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </CButtonGroup>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx
new file mode 100644
index 00000000..338151bb
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroupOutlinedStylesExample = () => {
+  return (
+    <CButtonGroup role="group" aria-label="Basic outlined example">
+      <CButton color="primary" variant="outline">Left</CButton>
+      <CButton color="primary" variant="outline">Middle</CButton>
+      <CButton color="primary" variant="outline">Right</CButton>
+    </CButtonGroup>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx
new file mode 100644
index 00000000..e1b943ac
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { CButton, CButtonGroup } from '@coreui/react'
+
+export const ButtonGroupSizingExample = () => {
+  return (
+    <>
+      <CButtonGroup size="lg" role="group" aria-label="Large button group">
+        <CButton color="primary" variant="outline">Left</CButton>
+        <CButton color="primary" variant="outline">Middle</CButton>
+        <CButton color="primary" variant="outline">Right</CButton>
+      </CButtonGroup>
+      <br/>
+      <CButtonGroup role="group" aria-label="Default button group">
+        <CButton color="primary" variant="outline">Left</CButton>
+        <CButton color="primary" variant="outline">Middle</CButton>
+        <CButton color="primary" variant="outline">Right</CButton>
+      </CButtonGroup>
+      <br/>
+      <CButtonGroup size="sm" role="group" aria-label="Small button group">
+        <CButton color="primary" variant="outline">Left</CButton>
+        <CButton color="primary" variant="outline">Middle</CButton>
+        <CButton color="primary" variant="outline">Right</CButton>
+      </CButtonGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx b/packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx
new file mode 100644
index 00000000..dda517d3
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx
@@ -0,0 +1,108 @@
+import React from 'react'
+import {
+  CButton,
+  CButtonGroup,
+  CCol,
+  CFormCheck,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CRow,
+} from '@coreui/react'
+
+export const ButtonGroupVerticalExample = () => {
+  return (
+    <CRow>
+      <CCol>
+        <CButtonGroup vertical role="group" aria-label="Vertical button group">
+          <CButton color="primary">Button</CButton>
+          <CButton color="primary">Button</CButton>
+          <CButton color="primary">Button</CButton>
+          <CButton color="primary">Button</CButton>
+          <CButton color="primary">Button</CButton>
+          <CButton color="primary">Button</CButton>
+          <CButton color="primary">Button</CButton>
+        </CButtonGroup>
+      </CCol>
+      <CCol>
+        <CButtonGroup vertical role="group" aria-label="Vertical button group">
+          <CButton color="primary">Button</CButton>
+          <CButton color="primary">Button</CButton>
+          <CDropdown variant="btn-group">
+            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem href="#">Action</CDropdownItem>
+              <CDropdownItem href="#">Another action</CDropdownItem>
+              <CDropdownItem href="#">Something else here</CDropdownItem>
+              <CDropdownDivider />
+              <CDropdownItem href="#">Separated link</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+          <CButton color="primary">Button</CButton>
+          <CButton color="primary">Button</CButton>
+          <CDropdown variant="btn-group">
+            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem href="#">Action</CDropdownItem>
+              <CDropdownItem href="#">Another action</CDropdownItem>
+              <CDropdownItem href="#">Something else here</CDropdownItem>
+              <CDropdownDivider />
+              <CDropdownItem href="#">Separated link</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+          <CDropdown variant="btn-group">
+            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem href="#">Action</CDropdownItem>
+              <CDropdownItem href="#">Another action</CDropdownItem>
+              <CDropdownItem href="#">Something else here</CDropdownItem>
+              <CDropdownDivider />
+              <CDropdownItem href="#">Separated link</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+          <CDropdown variant="btn-group">
+            <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem href="#">Action</CDropdownItem>
+              <CDropdownItem href="#">Another action</CDropdownItem>
+              <CDropdownItem href="#">Something else here</CDropdownItem>
+              <CDropdownDivider />
+              <CDropdownItem href="#">Separated link</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CButtonGroup>
+      </CCol>
+      <CCol>
+        <CButtonGroup vertical role="group" aria-label="Vertical button group">
+          <CFormCheck
+            type="radio"
+            button={{ color: 'danger', variant: 'outline' }}
+            name="vbtnradio"
+            id="vbtnradio1"
+            autoComplete="off"
+            label="Radio 1"
+            defaultChecked
+          />
+          <CFormCheck
+            type="radio"
+            button={{ color: 'danger', variant: 'outline' }}
+            name="vbtnradio"
+            id="vbtnradio2"
+            autoComplete="off"
+            label="Radio 2"
+          />
+          <CFormCheck
+            type="radio"
+            button={{ color: 'danger', variant: 'outline' }}
+            name="vbtnradio"
+            id="vbtnradio3"
+            autoComplete="off"
+            label="Radio 3"
+          />
+        </CButtonGroup>
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx b/packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx
new file mode 100644
index 00000000..db237544
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import {
+  CButton,
+  CButtonGroup,
+  CButtonToolbar,
+  CFormInput,
+  CInputGroup,
+  CInputGroupText,
+} from '@coreui/react'
+
+export const ButtonToolbar2Example = () => {
+  return (
+    <>
+      <CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
+        <CButtonGroup className="me-2" role="group" aria-label="First group">
+          <CButton color="secondary" variant="outline">
+            1
+          </CButton>
+          <CButton color="secondary" variant="outline">
+            2
+          </CButton>
+          <CButton color="secondary" variant="outline">
+            3
+          </CButton>
+          <CButton color="secondary" variant="outline">
+            4
+          </CButton>
+        </CButtonGroup>
+        <CInputGroup>
+          <CInputGroupText>@</CInputGroupText>
+          <CFormInput
+            placeholder="Input group example"
+            aria-label="Input group example"
+            aria-describedby="btnGroupAddon"
+          />
+        </CInputGroup>
+      </CButtonToolbar>
+      <CButtonToolbar
+        className="justify-content-between"
+        role="group"
+        aria-label="Toolbar with button groups"
+      >
+        <CButtonGroup className="me-2" role="group" aria-label="First group">
+          <CButton color="secondary" variant="outline">
+            1
+          </CButton>
+          <CButton color="secondary" variant="outline">
+            2
+          </CButton>
+          <CButton color="secondary" variant="outline">
+            3
+          </CButton>
+          <CButton color="secondary" variant="outline">
+            4
+          </CButton>
+        </CButtonGroup>
+        <CInputGroup>
+          <CInputGroupText>@</CInputGroupText>
+          <CFormInput
+            placeholder="Input group example"
+            aria-label="Input group example"
+            aria-describedby="btnGroupAddon"
+          />
+        </CInputGroup>
+      </CButtonToolbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx b/packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx
new file mode 100644
index 00000000..a974353c
--- /dev/null
+++ b/packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { CButton, CButtonGroup, CButtonToolbar } from '@coreui/react'
+
+export const ButtonToolbarExample = () => {
+  return (
+    <CButtonToolbar role="group" aria-label="Toolbar with button groups">
+      <CButtonGroup className="me-2" role="group" aria-label="First group">
+        <CButton color="primary">1</CButton>
+        <CButton color="primary">2</CButton>
+        <CButton color="primary">3</CButton>
+        <CButton color="primary">4</CButton>
+      </CButtonGroup>
+      <CButtonGroup className="me-2" role="group" aria-label="Second group">
+        <CButton color="secondary">5</CButton>
+        <CButton color="secondary">6</CButton>
+        <CButton color="secondary">7</CButton>
+      </CButtonGroup>
+      <CButtonGroup className="me-2" role="group" aria-label="Third group">
+        <CButton color="info">8</CButton>
+      </CButtonGroup>
+    </CButtonToolbar>
+  )
+}
diff --git a/packages/docs/content/components/button-group/index.mdx b/packages/docs/content/components/button-group/index.mdx
new file mode 100644
index 00000000..78b875ad
--- /dev/null
+++ b/packages/docs/content/components/button-group/index.mdx
@@ -0,0 +1,74 @@
+---
+title: React Button Group Component
+name: Button group
+description: React button group component allows to group a series of buttons and power them with JavaScript.
+route: /components/button-group/
+other_frameworks: button-group
+---
+
+## How to use React Button Group Component.
+
+Wrap a series of `<CButton>` components in `<CButtonGroup>`.
+
+<ExampleSnippet component="ButtonGroupExample" componentName="React Button Group" />
+
+<Callout color="info" title={<>Ensure the correct <code>role</code> and provide a label</>}>
+  For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`.
+  
+  Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used.
+</Callout>
+
+These classes can also be added to groups of links, as an alternative to the [`CNav`](./../navs-tabs/#base-nav) components.
+
+<ExampleSnippet component="ButtonGroup2Example" componentName="React Button Group" />
+
+## Mixed styles
+
+<ExampleSnippet component="ButtonGroupMixedStylesExample" componentName="React Button Group" />
+
+## Outlined styles
+
+<ExampleSnippet component="ButtonGroupOutlinedStylesExample" componentName="React Button Group" />
+
+## Checkbox and radio button groups
+
+Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
+
+<ExampleSnippet component="ButtonGroupCheckboxAndRadioExample" componentName="React Button Group" />
+
+<ExampleSnippet component="ButtonGroupCheckboxAndRadio2Example" componentName="React Button Group" />
+
+## Button toolbar
+
+Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.
+
+<ExampleSnippet component="ButtonToolbarExample" componentName="React Button Group" />
+
+Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
+
+<ExampleSnippet component="ButtonToolbar2Example" componentName="React Button Group" />
+
+## Sizing
+
+Alternatively, of implementing button sizing classes to each button in a group, set `size` property to all `<CButtonGroup>`'s, including each one when nesting multiple groups.
+
+<ExampleSnippet component="ButtonGroupSizingExample" componentName="React Button Group" />
+
+## Nesting
+
+Put a `<CButtonGroup>` inside another `<CButtonGroup>` when you need dropdown menus combined with a series of buttons.
+
+<ExampleSnippet component="ButtonGroupNestingExample" componentName="React Button Group" />
+
+## Vertical variation
+
+Create a set of buttons that appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
+
+<ExampleSnippet component="ButtonGroupVerticalExample" componentName="React Button Group" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CButtonGroup /&gt;](./api/#cbuttongroup)
+- [&lt;CButtonToolbar /&gt;](./api/#cbuttontoolbar)
diff --git a/packages/docs/content/components/button.mdx b/packages/docs/content/components/button.mdx
deleted file mode 100644
index f8b0380a..00000000
--- a/packages/docs/content/components/button.mdx
+++ /dev/null
@@ -1,216 +0,0 @@
----
-title: React Button Component
-name: Buttons
-description: React button component for actions in tables, forms, cards, and more. CoreUI for React.js provides various styles, states, and size. Ready to use and easy to customize.
-menu: Components
-route: /components/buttons
-other_frameworks: button
----
-
-import { CButton } from '@coreui/react/src/index'
-
-## How to use React Button Component.
-
-CoreUI includes a bunch of predefined buttons components, each serving its own semantic purpose. React buttons show what action will happen when the user clicks or touches it. CoreUI buttons are used to initialize operations, both in the background or foreground of an experience.
-
-```jsx preview
-<CButton color="primary">Primary</CButton>
-<CButton color="secondary">Secondary</CButton>
-<CButton color="success">Success</CButton>
-<CButton color="danger">Danger</CButton>
-<CButton color="warning">Warning</CButton>
-<CButton color="info">Info</CButton>
-<CButton color="light">Light</CButton>
-<CButton color="dark">Dark</CButton>
-<CButton color="link">Link</CButton>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
-  Using color to add meaning only provides a visual indication, which will not be conveyed to
-  users of assistive technologies – such as screen readers. Ensure that information denoted by the
-  color is either obvious from the content itself (e.g. the visible text), or is included through
-  alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-## Disable text wrapping
-
-If you don't want the react button text to wrap, you can add the `.text-nowrap` className to the `<CButton>`. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
-
-## Button components
-
-The `<CButton>` component are designed for `<button>` , `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
-
-If you're using `<CButton>` component as `<a>` elements that are used to trigger functionality ex. collapsing content, these links should be given a `role="button"` to adequately communicate their meaning to assistive technologies such as screen readers.
-
-```jsx preview
-<CButton as="a" color="primary" href="#" role="button">Link</CButton>
-<CButton type="submit" color="primary">Button</CButton>
-<CButton as="input" type="button" color="primary" value="Input"/>
-<CButton as="input" type="submit" color="primary" value="Submit"/>
-<CButton as="input" type="reset" color="primary" value="Reset"/>
-```
-
-## Outline buttons
-
-If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors.
-
-```jsx preview
-<CButton color="primary" variant="outline">Primary</CButton>
-<CButton color="secondary" variant="outline">Secondary</CButton>
-<CButton color="success" variant="outline">Success</CButton>
-<CButton color="danger" variant="outline">Danger</CButton>
-<CButton color="warning" variant="outline">Warning</CButton>
-<CButton color="info" variant="outline">Info</CButton>
-<CButton color="light" variant="outline">Light</CButton>
-<CButton color="dark" variant="outline">Dark</CButton>
-```
-
-## Ghost buttons
-
-If you need a ghost variant of react button, set `variant="ghost"` prop to remove all background colors.
-
-```jsx preview
-<CButton color="primary" variant="ghost">Primary</CButton>
-<CButton color="secondary" variant="ghost">Secondary</CButton>
-<CButton color="success" variant="ghost">Success</CButton>
-<CButton color="danger" variant="ghost">Danger</CButton>
-<CButton color="warning" variant="ghost">Warning</CButton>
-<CButton color="info" variant="ghost">Info</CButton>
-<CButton color="light" variant="ghost">Light</CButton>
-<CButton color="dark" variant="ghost">Dark</CButton>
-```
-
-<Callout color="info">
-  Some of the button styles use a relatively light foreground color, and should only be used on a
-  dark background in order to have sufficient contrast.
-</Callout>
-
-## Sizes
-
-Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes.
-
-```jsx preview
-<CButton color="primary" size="lg">Large button</CButton>
-<CButton color="secondary" size="lg">Large button</CButton>
-```
-
-```jsx preview
-<CButton color="primary" size="sm">Small button</CButton>
-<CButton color="secondary" size="sm">Small button</CButton>
-```
-
-## Shapes
-
-### Pill buttons
-
-```jsx preview
-<CButton color="primary" shape="rounded-pill">Primary</CButton>
-<CButton color="secondary" shape="rounded-pill">Secondary</CButton>
-<CButton color="success" shape="rounded-pill">Success</CButton>
-<CButton color="danger" shape="rounded-pill">Danger</CButton>
-<CButton color="warning" shape="rounded-pill">Warning</CButton>
-<CButton color="info" shape="rounded-pill">Info</CButton>
-<CButton color="light" shape="rounded-pill">Light</CButton>
-<CButton color="dark" shape="rounded-pill">Dark</CButton>
-<CButton color="link" shape="rounded-pill">Link</CButton>
-```
-
-### Square buttons
-
-```jsx preview
-<CButton color="primary" shape="rounded-0">Primary</CButton>
-<CButton color="secondary" shape="rounded-0">Secondary</CButton>
-<CButton color="success" shape="rounded-0">Success</CButton>
-<CButton color="danger" shape="rounded-0">Danger</CButton>
-<CButton color="warning" shape="rounded-0">Warning</CButton>
-<CButton color="info" shape="rounded-0">Info</CButton>
-<CButton color="light" shape="rounded-0">Light</CButton>
-<CButton color="dark" shape="rounded-0">Dark</CButton>
-<CButton color="link" shape="rounded-0">Link</CButton>
-```
-
-## Disabled state
-
-Add the `disabled` boolean prop to any `<CButton>` component to make buttons look inactive. Disabled button has `pointer-events: none` applied to, disabling hover and active states from triggering.
-
-```jsx preview
-<CButton color="primary" size="lg" disabled>Primary button</CButton>
-<CButton color="secondary" size="lg" disabled>Button</CButton>
-```
-
-Disabled buttons using the `<a>` component act a little different:
-
-`<a>`s don't support the `disabled` attribute, so CoreUI has to add `.disabled` className to make buttons look inactive. CoreUI also has to add to the disabled button component `aria-disabled="true"` attribute to show the state of the component to assistive technologies.
-
-```jsx preview
-<CButton as="a" href="#" color="primary" size="lg" disabled>Primary link</CButton>
-<CButton as="a" href="#" color="secondary" size="lg" disabled>Link</CButton>
-```
-
-The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
-
-## Block buttons
-
-Create buttons that span the full width of a parent—by using utilities.
-
-```jsx preview
-<div className="d-grid gap-2">
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-</div>
-```
-
-Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
-
-```jsx preview
-<div className="d-grid gap-2 d-md-block">
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-</div>
-```
-
-You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.
-
-```jsx preview
-<div className="d-grid gap-2 col-6 mx-auto">
-  <CButton color="primary">Button</CButton>
-  <CButton color="primary">Button</CButton>
-</div>
-```
-
-Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
-
-```jsx preview
-<div className="d-grid gap-2 d-md-flex justify-content-md-end">
-  <CButton color="primary" className="me-md-2">Button</CButton>
-  <CButton color="primary">Button</CButton>
-</div>
-```
-
-## Customizing
-
-### CSS variables
-
-React buttons 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.
-
-<ScssDocs file="_buttons.scss" capture="btn-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CButton style={vars}>...</CButton>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="btn-variables"/>
-
-## API
-
-### CButton
-
-`markdown:CButton.api.mdx`
diff --git a/packages/docs/content/components/button/api.mdx b/packages/docs/content/components/button/api.mdx
new file mode 100644
index 00000000..532898de
--- /dev/null
+++ b/packages/docs/content/components/button/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Button Component API
+name: Button API
+description: Explore the API reference for the React Button component and discover how to effectively utilize its props for customization.
+route: /components/button/
+---
+
+import CButtonAPI from '../../api/CButton.api.mdx'
+
+## CButton
+
+<CButtonAPI />
diff --git a/packages/docs/content/components/button/bootstrap.mdx b/packages/docs/content/components/button/bootstrap.mdx
new file mode 100644
index 00000000..12bb09e1
--- /dev/null
+++ b/packages/docs/content/components/button/bootstrap.mdx
@@ -0,0 +1,103 @@
+---
+title: React Bootstrap Button Component
+name: Buttons with Bootstrap Styling
+description: Learn how to use CoreUI’s React Button component with Bootstrap styling to build interactive, accessible, and responsive buttons for forms, tables, modals, and more.
+route: /components/button/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Button component
+
+CoreUI provides a set of prebuilt React Button components styled with Bootstrap. Buttons signal actions to users and can initiate events both in the UI and behind the scenes.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonExample" componentName="React Bootstrap Button" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+## Disable text wrapping
+
+To prevent text wrapping inside a button, apply the `.text-nowrap` class to the `<CButton>`. Alternatively, set `$btn-white-space: nowrap` in Sass to apply it globally.
+
+## Button components
+
+The `<CButton>` component can render as a `<button>`, `<a>`, or `<input>` element. When using it as an anchor for functionality (like toggles), add `role="button"` for accessibility.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonComponentsExample" componentName="React Bootstrap Button" />
+
+## Outline buttons
+
+Use `variant="outline"` to create buttons with a transparent background and colored border — a more subtle alternative to standard buttons.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonOutlineExample" componentName="React Bootstrap Button" />
+
+## Ghost buttons
+
+For minimal buttons with no background or border, use `variant="ghost"`. These are great for secondary actions.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGhostExample" componentName="React Bootstrap Button" />
+
+<Callout color="info">
+  Some button styles use light text colors and should be placed on dark backgrounds to maintain contrast.
+</Callout>
+
+## Sizes
+
+Create large or small buttons with the `size="lg"` or `size="sm"` props.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonSizesExample" componentName="React Bootstrap Button" />
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonSizes2Example" componentName="React Bootstrap Button" />
+
+You can also use CSS variables for fully custom sizes.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonSizes3Example" componentName="React Bootstrap Button" />
+
+## Shapes
+
+### Pill buttons
+
+Use pill-shaped buttons for a soft, rounded appearance.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonShapePillExample" componentName="React Bootstrap Button" />
+
+### Square buttons
+
+Use square-shaped buttons for compact, uniform interactions.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonShapeSquareExample" componentName="React Bootstrap Button" />
+
+## Disabled state
+
+Disable any `<CButton>` by passing the `disabled` prop. This applies `pointer-events: none` and dims the button.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonDisabledExample" componentName="React Bootstrap Button" />
+
+Disabling anchor elements (`<a>`) requires additional steps: CoreUI applies the `.disabled` class, adds `aria-disabled="true"`, and sets `tabindex="-1"`.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonDisabled2Example" componentName="React Bootstrap Button" />
+
+These steps prevent users from interacting with disabled links via keyboard or mouse.
+
+## Block buttons
+
+To make buttons span the full width of their container, use Bootstrap's layout utilities like `.d-grid`, `.w-100`, and `.col-*`.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonBlockExample" componentName="React Bootstrap Button" />
+
+Responsive layout: vertically stacked until the `md` breakpoint, where `.d-md-block` reverts to inline.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonBlock2Example" componentName="React Bootstrap Button" />
+
+You can also create column-based buttons using `.col-6` and center them with `.mx-auto`.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonBlock3Example" componentName="React Bootstrap Button" />
+
+Use flex utilities and margin helpers to align buttons horizontally when they're no longer stacked.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonBlock4Example" componentName="React Bootstrap Button" />
+
+## API reference
+
+See the full API reference for all available props in the Bootstrap-styled React Button component.
+
+- [&lt;CButton /&gt;](../api/#cbutton)
diff --git a/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx b/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx
new file mode 100644
index 00000000..83bf2b92
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonBlock2Example = () => {
+  return (
+    <div className="d-grid gap-2 d-md-block">
+      <CButton color="primary">Button</CButton> 
+      <CButton color="primary">Button</CButton>
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonBlock3Example.tsx b/packages/docs/content/components/button/examples/ButtonBlock3Example.tsx
new file mode 100644
index 00000000..585c7e6f
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonBlock3Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonBlock3Example = () => {
+  return (
+    <div className="d-grid gap-2 col-6 mx-auto">
+      <CButton color="primary">Button</CButton>
+      <CButton color="primary">Button</CButton>
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonBlock4Example.tsx b/packages/docs/content/components/button/examples/ButtonBlock4Example.tsx
new file mode 100644
index 00000000..4ed267b0
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonBlock4Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonBlock4Example = () => {
+  return (
+    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+      <CButton color="primary" className="me-md-2">Button</CButton>
+      <CButton color="primary">Button</CButton>
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonBlockExample.tsx b/packages/docs/content/components/button/examples/ButtonBlockExample.tsx
new file mode 100644
index 00000000..6a3f1c67
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonBlockExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonBlockExample = () => {
+  return (
+    <div className="d-grid gap-2">
+      <CButton color="primary">Button</CButton>
+      <CButton color="primary">Button</CButton>
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonComponentsExample.tsx b/packages/docs/content/components/button/examples/ButtonComponentsExample.tsx
new file mode 100644
index 00000000..92871d4f
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonComponentsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonComponentsExample = () => {
+  return (
+    <>
+      <CButton as="a" color="primary" href="#" role="button">Link</CButton>
+      <CButton type="submit" color="primary">Button</CButton>
+      <CButton as="input" type="button" color="primary" value="Input" />
+      <CButton as="input" type="submit" color="primary" value="Submit" />
+      <CButton as="input" type="reset" color="primary" value="Reset" />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx b/packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx
new file mode 100644
index 00000000..bd4c611f
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonDisabled2Example = () => {
+  return (
+    <>
+      <CButton as="a" href="#" color="primary" disabled>Primary link</CButton>
+      <CButton as="a" href="#" color="secondary" disabled>Link</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonDisabledExample.tsx b/packages/docs/content/components/button/examples/ButtonDisabledExample.tsx
new file mode 100644
index 00000000..fce450db
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonDisabledExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonDisabledExample = () => {
+  return (
+    <>
+      <CButton color="primary" disabled>Primary button</CButton>
+      <CButton color="secondary" disabled>Button</CButton>
+      <CButton color="primary" variant="outline" disabled>Primary button</CButton>
+      <CButton color="secondary" variant="outline" disabled>Button</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonExample.tsx b/packages/docs/content/components/button/examples/ButtonExample.tsx
new file mode 100644
index 00000000..fcf44a76
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonExample = () => {
+  return (
+    <>
+      <CButton color="primary">Primary</CButton>
+      <CButton color="secondary">Secondary</CButton>
+      <CButton color="success">Success</CButton>
+      <CButton color="danger">Danger</CButton>
+      <CButton color="warning">Warning</CButton>
+      <CButton color="info">Info</CButton>
+      <CButton color="light">Light</CButton>
+      <CButton color="dark">Dark</CButton>
+      <CButton color="link">Link</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx
new file mode 100644
index 00000000..d99be5d5
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonGhostBaseClassExample = () => {
+  return (
+    <>
+      <CButton variant="ghost">Base ghost button</CButton>
+      <CButton variant="ghost" active>Active state</CButton>
+      <CButton variant="ghost" disabled>Disabled state</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonGhostExample.tsx b/packages/docs/content/components/button/examples/ButtonGhostExample.tsx
new file mode 100644
index 00000000..6e595f10
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonGhostExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonGhostExample = () => {
+  return (
+    <>
+      <CButton color="primary" variant="ghost">Primary</CButton>
+      <CButton color="secondary" variant="ghost">Secondary</CButton>
+      <CButton color="success" variant="ghost">Success</CButton>
+      <CButton color="danger" variant="ghost">Danger</CButton>
+      <CButton color="warning" variant="ghost">Warning</CButton>
+      <CButton color="info" variant="ghost">Info</CButton>
+      <CButton color="light" variant="ghost">Light</CButton>
+      <CButton color="dark" variant="ghost">Dark</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx
new file mode 100644
index 00000000..2c5de0e3
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonOutlineBaseClassExample = () => {
+  return (
+    <>
+      <CButton variant="outline">Base outline button</CButton>
+      <CButton variant="outline" active>Active state</CButton>
+      <CButton variant="outline" disabled>Disabled state</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx b/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx
new file mode 100644
index 00000000..56a41b5c
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonOutlineExample = () => {
+  return (
+    <>
+      <CButton color="primary" variant="outline">Primary</CButton>
+      <CButton color="secondary" variant="outline">Secondary</CButton>
+      <CButton color="success" variant="outline">Success</CButton>
+      <CButton color="danger" variant="outline">Danger</CButton>
+      <CButton color="warning" variant="outline">Warning</CButton>
+      <CButton color="info" variant="outline">Info</CButton>
+      <CButton color="light" variant="outline">Light</CButton>
+      <CButton color="dark" variant="outline">Dark</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonShapePillExample.tsx b/packages/docs/content/components/button/examples/ButtonShapePillExample.tsx
new file mode 100644
index 00000000..73a918b3
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonShapePillExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonShapePillExample = () => {
+  return (
+    <>
+      <CButton color="primary" className="rounded-pill">Primary</CButton>
+      <CButton color="secondary" className="rounded-pill">Secondary</CButton>
+      <CButton color="success" className="rounded-pill">Success</CButton>
+      <CButton color="danger" className="rounded-pill">Danger</CButton>
+      <CButton color="warning" className="rounded-pill">Warning</CButton>
+      <CButton color="info" className="rounded-pill">Info</CButton>
+      <CButton color="light" className="rounded-pill">Light</CButton>
+      <CButton color="dark" className="rounded-pill">Dark</CButton>
+      <CButton color="link" className="rounded-pill">Link</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx b/packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx
new file mode 100644
index 00000000..4b307ee8
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonShapeSquareExample = () => {
+  return (
+    <>
+      <CButton color="primary" className="rounded-0">Primary</CButton>
+      <CButton color="secondary" className="rounded-0">Secondary</CButton>
+      <CButton color="success" className="rounded-0">Success</CButton>
+      <CButton color="danger" className="rounded-0">Danger</CButton>
+      <CButton color="warning" className="rounded-0">Warning</CButton>
+      <CButton color="info" className="rounded-0">Info</CButton>
+      <CButton color="light" className="rounded-0">Light</CButton>
+      <CButton color="dark" className="rounded-0">Dark</CButton>
+      <CButton color="link" className="rounded-0">Link</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonSizes2Example.tsx b/packages/docs/content/components/button/examples/ButtonSizes2Example.tsx
new file mode 100644
index 00000000..f7f4db15
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonSizes2Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonSizes2Example = () => {
+  return (
+    <>
+      <CButton color="primary" size="sm">Small button</CButton>
+      <CButton color="secondary" size="sm">Small button</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonSizes3Example.jsx b/packages/docs/content/components/button/examples/ButtonSizes3Example.jsx
new file mode 100644
index 00000000..91c8c4ac
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonSizes3Example.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonSizes3Example = () => {
+  const customVars = {
+    '--cui-btn-padding-y': '.25rem',
+    '--cui-btn-padding-x': '.5rem',
+    '--cui-btn-font-size': '.75rem',
+  }
+
+  return (
+    <CButton color="primary" size="sm" style={customVars}>
+      Custom button
+    </CButton>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonSizes3Example.tsx b/packages/docs/content/components/button/examples/ButtonSizes3Example.tsx
new file mode 100644
index 00000000..10eceae6
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonSizes3Example.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonSizes3Example = () => {
+  const customVars = {
+    '--cui-btn-padding-y': '.25rem',
+    '--cui-btn-padding-x': '.5rem',
+    '--cui-btn-font-size': '.75rem',
+  } as React.CSSProperties
+
+  return (
+    <CButton color="primary" size="sm" style={customVars}>
+      Custom button
+    </CButton>
+  )
+}
diff --git a/packages/docs/content/components/button/examples/ButtonSizesExample.tsx b/packages/docs/content/components/button/examples/ButtonSizesExample.tsx
new file mode 100644
index 00000000..30ee215f
--- /dev/null
+++ b/packages/docs/content/components/button/examples/ButtonSizesExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+
+export const ButtonSizesExample = () => {
+  return (
+    <>
+      <CButton color="primary" size="lg">Large button</CButton>
+      <CButton color="secondary" size="lg">Large button</CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/button/index.mdx b/packages/docs/content/components/button/index.mdx
new file mode 100644
index 00000000..87cb6205
--- /dev/null
+++ b/packages/docs/content/components/button/index.mdx
@@ -0,0 +1,124 @@
+---
+title: React Button Component
+name: Buttons
+description: React button component for actions in tables, forms, cards, and more. CoreUI for React.js provides various styles, states, and size. Ready to use and easy to customize.
+route: /components/button/
+other_frameworks: button
+---
+
+## How to use React Button Component.
+
+CoreUI includes a bunch of predefined buttons components, each serving its own semantic purpose. React buttons show what action will happen when the user clicks or touches it. CoreUI buttons are used to initialize operations, both in the background or foreground of an experience.
+
+<ExampleSnippet component="ButtonExample" componentName="React Button" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+## Disable text wrapping
+
+If you don't want the react button text to wrap, you can add the `.text-nowrap` className to the `<CButton>`. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
+
+## Button components
+
+The `<CButton>` component are designed for `<button>` , `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
+
+If you're using `<CButton>` component as `<a>` elements that are used to trigger functionality ex. collapsing content, these links should be given a `role="button"` to adequately communicate their meaning to assistive technologies such as screen readers.
+
+<ExampleSnippet component="ButtonComponentsExample" componentName="React Button" />
+
+## Outline buttons
+
+### Base outline style
+
+The `variant="outline` property provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis.
+
+<ExampleSnippet component="ButtonOutlineBaseClassExample" componentName="React Button" />
+
+These React buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions.
+
+### Themed outline variants
+
+If you need a button, but without the strong background colors, set `color` and `variant=" outline"` props to remove all background colors.
+
+<ExampleSnippet component="ButtonOutlineExample" componentName="React Button" />
+
+These outline variants of our React.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually.
+
+<Callout color="info">
+  Some of the button styles use a relatively light foreground color, and should only be used on a
+  dark background in order to have sufficient contrast.
+</Callout>
+
+## Ghost buttons
+
+### Base ghost style
+
+Use the `variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These React buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state.
+
+They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars.
+
+<ExampleSnippet component="ButtonGhostBaseClassExample" componentName="React Button" />
+
+To apply theme colors to React ghost buttons, use the `color` and `variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color.
+
+<ExampleSnippet component="ButtonGhostExample" componentName="React Button" />
+
+## Sizes
+
+Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes.
+
+<ExampleSnippet component="ButtonSizesExample" componentName="React Button" />
+
+<ExampleSnippet component="ButtonSizes2Example" componentName="React Button" />
+
+You can even roll your own custom sizing with CSS variables:
+
+<ExampleSnippet component="ButtonSizes3Example" componentName="React Button" />
+
+## Shapes
+
+### Pill buttons
+
+<ExampleSnippet component="ButtonShapePillExample" componentName="React Button" />
+
+### Square buttons
+
+<ExampleSnippet component="ButtonShapeSquareExample" componentName="React Button" />
+
+## Disabled state
+
+Add the `disabled` boolean prop to any `<CButton>` component to make buttons look inactive. Disabled button has `pointer-events: none` applied to, disabling hover and active states from triggering.
+
+<ExampleSnippet component="ButtonDisabledExample" componentName="React Button" />
+
+Disabled buttons using the `<a>` component act a little different:
+
+`<a>`s don't support the `disabled` attribute, so CoreUI has to add `.disabled` className to make buttons look inactive. CoreUI also has to add to the disabled button component `aria-disabled="true"` attribute to show the state of the component to assistive technologies.
+
+<ExampleSnippet component="ButtonDisabled2Example" componentName="React Button" />
+
+The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
+
+## Block buttons
+
+Create buttons that span the full width of a parent—by using utilities.
+
+<ExampleSnippet component="ButtonBlockExample" componentName="React Button" />
+
+Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
+
+<ExampleSnippet component="ButtonBlock2Example" componentName="React Button" />
+
+You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.
+
+<ExampleSnippet component="ButtonBlock3Example" componentName="React Button" />
+
+Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
+
+<ExampleSnippet component="ButtonBlock4Example" componentName="React Button" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CButton /&gt;](./api/#cbutton)
diff --git a/packages/docs/content/components/button/styling.mdx b/packages/docs/content/components/button/styling.mdx
new file mode 100644
index 00000000..57042f41
--- /dev/null
+++ b/packages/docs/content/components/button/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Button Component Styling
+name: Button Styling
+description: Learn how to customize the React Button component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/button/
+---
+
+### CSS variables
+
+React Button supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_buttons.scss" capture="btn-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-btn-color': '#ffe484',
+  '--cui-btn-bg': '#efefef',
+}
+
+return <CButton style={customVars}>{/* Button content */}</CButton>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="btn-variables" />
diff --git a/packages/docs/content/components/callout.mdx b/packages/docs/content/components/callout.mdx
deleted file mode 100644
index 71ef0099..00000000
--- a/packages/docs/content/components/callout.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: React Callout Component
-name: Callout
-description: React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
-menu: Components
-route: /components/callout
-other_frameworks: callout
----
-
-import { CCallout } from '@coreui/react/src/index'
-
-## Examples
-
-Callout component is prepared for any length of text, as well as an optional elements like icons, headings, etc. For a styling, use one of the **required** contextual props (e.g., `color="success"`).
-
-```jsx preview
-<CCallout color="primary">
-  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
-  terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="secondary">
-  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
-  terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="success">
-  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
-  terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="danger">
-  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
-  terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="warning">
-  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
-  terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="info">
-  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
-  terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="light">
-  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
-  terminology, guidelines, and code snippets.
-</CCallout>
-<CCallout color="dark">
-  New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background,
-  terminology, guidelines, and code snippets.
-</CCallout>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
-  Using color to add meaning only provides a visual indication, which will not be conveyed to
-  users of assistive technologies – such as screen readers. Ensure that information denoted by the
-  color is either obvious from the content itself (e.g. the visible text), or is included through
-  alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-## Customizing
-
-### CSS variables
-
-React callouts use local CSS variables on `.callout` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_callout.scss" capture="callout-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CCallout style={vars}>...</CCallout>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="callout-variables"/>
-
-## API
-
-### CCallout
-
-`markdown:CCallout.api.mdx`
diff --git a/packages/docs/content/components/callout/api.mdx b/packages/docs/content/components/callout/api.mdx
new file mode 100644
index 00000000..8281d7b6
--- /dev/null
+++ b/packages/docs/content/components/callout/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Callout Component API
+name: Callout API
+description: Explore the API reference for the React Callout component and discover how to effectively utilize its props for customization.
+route: /components/callout/
+---
+
+import CCalloutAPI from '../../api/CCallout.api.mdx'
+
+## CCallout
+
+<CCalloutAPI />
diff --git a/packages/docs/content/components/callout/examples/CalloutExample.tsx b/packages/docs/content/components/callout/examples/CalloutExample.tsx
new file mode 100644
index 00000000..0a89f428
--- /dev/null
+++ b/packages/docs/content/components/callout/examples/CalloutExample.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { CCallout } from '@coreui/react'
+
+export const CalloutExample = () => {
+  return (
+    <>
+      <CCallout color="primary">
+        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
+        guidelines, and code snippets.
+      </CCallout>
+      <CCallout color="secondary">
+        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
+        guidelines, and code snippets.
+      </CCallout>
+      <CCallout color="success">
+        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
+        guidelines, and code snippets.
+      </CCallout>
+      <CCallout color="danger">
+        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
+        guidelines, and code snippets.
+      </CCallout>
+      <CCallout color="warning">
+        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
+        guidelines, and code snippets.
+      </CCallout>
+      <CCallout color="info">
+        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
+        guidelines, and code snippets.
+      </CCallout>
+      <CCallout color="light">
+        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
+        guidelines, and code snippets.
+      </CCallout>
+      <CCallout color="dark">
+        New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology,
+        guidelines, and code snippets.
+      </CCallout>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/callout/index.mdx b/packages/docs/content/components/callout/index.mdx
new file mode 100644
index 00000000..9463a3c5
--- /dev/null
+++ b/packages/docs/content/components/callout/index.mdx
@@ -0,0 +1,21 @@
+---
+title: React Callout Component
+name: Callout
+description: React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
+route: /components/callout/
+other_frameworks: callout
+---
+
+## Examples
+
+Callout component is prepared for any length of text, as well as an optional elements like icons, headings, etc. For a styling, use one of the **required** contextual props (e.g., `color="success"`).
+
+<ExampleSnippet component="CalloutExample" componentName="React Callout" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CCallout /&gt;](./api/#ccallout)
diff --git a/packages/docs/content/components/callout/styling.mdx b/packages/docs/content/components/callout/styling.mdx
new file mode 100644
index 00000000..457387b6
--- /dev/null
+++ b/packages/docs/content/components/callout/styling.mdx
@@ -0,0 +1,26 @@
+---
+title: React Calout Component Styling
+name: Calout Styling
+description: Learn how to customize the React Calout component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/callout/
+---
+
+### CSS variables
+
+React Calout supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_callout.scss" capture="callout-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const vars = { 
+  '--my-css-var': 10,
+  '--my-another-css-var': "red" 
+}
+return <CCallout style={vars}>...</CCallout>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="callout-variables"/>
diff --git a/packages/docs/content/components/card.mdx b/packages/docs/content/components/card.mdx
deleted file mode 100644
index 93e199c7..00000000
--- a/packages/docs/content/components/card.mdx
+++ /dev/null
@@ -1,1096 +0,0 @@
----
-title: React Card Component
-name: Card
-description: React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.
-menu: Components
-route: /components/card
-other_frameworks: card
----
-
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardGroup,
-  CCardHeader,
-  CCardImage,
-  CCardImageOverlay,
-  CCardLink,
-  CCardSubtitle,
-  CCardTitle,
-  CCardText,
-  CListGroup,
-  CListGroupItem,
-  CCol,
-  CNav,
-  CNavItem,
-  CNavLink,
-  CRow,
-} from '@coreui/react/src/index'
-
-import ReactImg from './../assets/images/react.jpg'
-import React400Img from './../assets/images/react400.jpg'
-
-## About
-
-A react card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.
-
-## Example
-
-Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other CoreUI components. Cards have no top, left, and right margins by default, so use [spacing utilities](https://coreui.io/docs/utilities/spacing) as needed. They have no fixed width to start, so they'll fill the full width of its parent.
-
-Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
-  <CCardImage orientation="top" src={ReactImg} />
-  <CCardBody>
-    <CCardTitle>Card title</CCardTitle>
-    <CCardText>
-      Some quick example text to build on the card title and make up the bulk of the card's content.
-    </CCardText>
-    <CButton color="primary" href="#">Go somewhere</CButton>
-  </CCardBody>
-</CCard>
-```
-
-## Content types
-
-CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.
-
-### Body
-
-The main block of a card is the `<CCardBody>`. Use it whenever you need a padded section within a card.
-
-```jsx preview
-<CCard>
-  <CCardBody>This is some text within a card body.</CCardBody>
-</CCard>
-```
-
-### Titles, text, and links
-
-Card titles are managed by `<CCardTitle>` component. Identically, links are attached and collected next to each other by `<CCardLink>` component.
-
-Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also, the `<CCardSubtitle>` items are stored in a `<CCardBody>` item, the card title, and subtitle are arranged rightly.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
-  <CCardBody>
-    <CCardTitle>Card title</CCardTitle>
-    <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
-    <CCardText>
-      Some quick example text to build on the card title and make up the bulk of the card's content.
-    </CCardText>
-    <CCardLink href="#">Card link</CCardLink>
-    <CCardLink href="#">Another link</CCardLink>
-  </CCardBody>
-</CCard>
-```
-
-### Images
-
-`orientation="top"` places a picture to the top of the card. With `<CCardText>`, text can be added to the card. Text within `<CCardText>` can additionally be styled with the regular HTML tags.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
-  <CCardImage orientation="top" src={ReactImg} />
-  <CCardBody>
-    <CCardText>
-      Some quick example text to build on the card title and make up the bulk of the card's content.
-    </CCardText>
-  </CCardBody>
-</CCard>
-```
-
-### List groups
-
-Create lists of content in a card with a flush list group.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
-  <CListGroup flush>
-    <CListGroupItem>Cras justo odio</CListGroupItem>
-    <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-    <CListGroupItem>Vestibulum at eros</CListGroupItem>
-  </CListGroup>
-</CCard>
-```
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
-  <CCardHeader>Header</CCardHeader>
-  <CListGroup flush>
-    <CListGroupItem>Cras justo odio</CListGroupItem>
-    <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-    <CListGroupItem>Vestibulum at eros</CListGroupItem>
-  </CListGroup>
-</CCard>
-```
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
-  <CListGroup flush>
-    <CListGroupItem>Cras justo odio</CListGroupItem>
-    <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-    <CListGroupItem>Vestibulum at eros</CListGroupItem>
-  </CListGroup>
-  <CCardFooter>Footer</CCardFooter>
-</CCard>
-```
-
-### Kitchen sink
-
-Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
-  <CCardImage orientation="top" src={ReactImg} />
-  <CCardBody>
-    <CCardTitle>Card title</CCardTitle>
-    <CCardText>
-      Some quick example text to build on the card title and make up the bulk of the card's content.
-    </CCardText>
-  </CCardBody>
-  <CListGroup flush>
-    <CListGroupItem>Cras justo odio</CListGroupItem>
-    <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-    <CListGroupItem>Vestibulum at eros</CListGroupItem>
-  </CListGroup>
-  <CCardBody>
-    <CCardLink href="#">Card link</CCardLink>
-    <CCardLink href="#">Another link</CCardLink>
-  </CCardBody>
-</CCard>
-```
-
-### Header and footer
-
-Add an optional header and/or footer within a card.
-
-```jsx preview
-<CCard>
-  <CCardHeader>Header</CCardHeader>
-  <CCardBody>
-    <CCardTitle>Special title treatment</CCardTitle>
-    <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton color="primary" href="#">Go somewhere</CButton>
-  </CCardBody>
-</CCard>
-```
-
-Card headers can be styled by adding ex. `as="h5"`.
-
-```jsx preview
-<CCard>
-  <CCardHeader as="h5">Header</CCardHeader>
-  <CCardBody>
-    <CCardTitle>Special title treatment</CCardTitle>
-    <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton color="primary" href="#">Go somewhere</CButton>
-  </CCardBody>
-</CCard>
-```
-
-```jsx preview
-<CCard>
-  <CCardHeader>Quote</CCardHeader>
-  <CCardBody>
-    <blockquote className="blockquote mb-0">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-      <footer className="blockquote-footer">
-        Someone famous in <cite title="Source Title">Source Title</cite>
-      </footer>
-    </blockquote>
-  </CCardBody>
-</CCard>
-```
-
-```jsx preview
-<CCard className="text-center">
-  <CCardHeader>Header</CCardHeader>
-  <CCardBody>
-    <CCardTitle>Special title treatment</CCardTitle>
-    <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton color="primary" href="#">Go somewhere</CButton>
-  </CCardBody>
-  <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
-</CCard>
-```
-
-## Sizing
-
-Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.
-
-### Using grid markup
-
-Using the grid, wrap cards in columns and rows as needed.
-
-```jsx preview
-<CRow>
-  <CCol sm={6}>
-    <CCard>
-      <CCardBody>
-        <CCardTitle>Special title treatment</CCardTitle>
-        <CCardText>
-          With supporting text below as a natural lead-in to additional content.
-        </CCardText>
-        <CButton color="primary" href="#">Go somewhere</CButton>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol sm={6}>
-    <CCard>
-      <CCardBody>
-        <CCardTitle>Special title treatment</CCardTitle>
-        <CCardText>
-          With supporting text below as a natural lead-in to additional content.
-        </CCardText>
-        <CButton color="primary" href="#">Go somewhere</CButton>
-      </CCardBody>
-    </CCard>
-  </CCol>
-</CRow>
-```
-
-### Using utilities
-
-Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing/) to rapidly set a card's width.
-
-```jsx preview
-  <CCard className="w-75">
-    <CCardBody>
-      <CCardTitle>Card title</CCardTitle>
-      <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-      <CButton color="primary" href="#">Go somewhere</CButton>
-    </CCardBody>
-  </CCard>
-  <CCard className="w-50">
-    <CCardBody>
-      <CCardTitle>Card title</CCardTitle>
-      <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-      <CButton color="primary" href="#">Go somewhere</CButton>
-    </CCardBody>
-  </CCard>
-```
-
-### Using custom CSS
-
-Use custom CSS in your stylesheets or as inline styles to set a width.
-
-```jsx preview
-<CCard style={{ width: '18rem' }}>
-  <CCardBody>
-    <CCardTitle>Special title treatment</CCardTitle>
-    <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton color="primary" href="#">Go somewhere</CButton>
-  </CCardBody>
-</CCard>
-```
-
-## Text alignment
-
-You can instantly change the text arrangement of any card—in its whole or specific parts—with [text align classes](https://coreui.io/docs/utilities/text/#text-alignment).
-
-```jsx preview
-  <CCard style={{width: '18rem'}}>
-    <CCardBody>
-      <CCardTitle>Special title treatment</CCardTitle>
-      <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-      <CButton color="primary" href="#">Go somewhere</CButton>
-    </CCardBody>
-  </CCard>
-  <CCard className="text-center" style={{width: '18rem'}}>
-    <CCardBody>
-      <CCardTitle>Special title treatment</CCardTitle>
-      <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-      <CButton color="primary" href="#">Go somewhere</CButton>
-    </CCardBody>
-  </CCard>
-  <CCard className="text-end" style={{width: '18rem'}}>
-    <CCardBody>
-      <CCardTitle>Special title treatment</CCardTitle>
-      <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-      <CButton color="primary" href="#">Go somewhere</CButton>
-    </CCardBody>
-  </CCard>
-```
-
-## Navigation
-
-Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
-
-```jsx preview
-<CCard className="text-center">
-  <CCardHeader>
-    <CNav variant="tabs" className="card-header-tabs">
-      <CNavItem>
-        <CNavLink href="#" active>Active</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#" disabled>Disabled</CNavLink>
-      </CNavItem>
-    </CNav>
-  </CCardHeader>
-  <CCardBody>
-    <CCardTitle>Special title treatment</CCardTitle>
-    <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton color="primary" href="#">Go somewhere</CButton>
-  </CCardBody>
-</CCard>
-```
-
-```jsx preview
-<CCard className="text-center">
-  <CCardHeader>
-    <CNav variant="pills" className="card-header-pills">
-      <CNavItem>
-        <CNavLink href="#" active>Active</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#" disabled>Disabled</CNavLink>
-      </CNavItem>
-    </CNav>
-  </CCardHeader>
-  <CCardBody>
-    <CCardTitle>Special title treatment</CCardTitle>
-    <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
-    <CButton color="primary" href="#">Go somewhere</CButton>
-  </CCardBody>
-</CCard>
-```
-
-## Images
-
-Cards introduce several options for acting with images. Pick from appending "image caps" at either end of a card, overlaying images with content, or just inserting the image in a card.
-
-### Image caps
-
-Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
-
-```jsx preview
-<CCard className="mb-3">
-  <CCardImage orientation="top" src={ReactImg} />
-  <CCardBody>
-    <CCardTitle>Card title</CCardTitle>
-    <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-    <CCardText><small className="text-body-secondary">Last updated 3 mins ago</small></CCardText>
-  </CCardBody>
-</CCard>
-<CCard className="mb-3">
-  <CCardBody>
-    <CCardTitle>Card title</CCardTitle>
-    <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-    <CCardText><small className="text-body-secondary">Last updated 3 mins ago</small></CCardText>
-  </CCardBody>
-  <CCardImage orientation="bottom" src={ReactImg} />
-</CCard>
-```
-
-### Image overlays
-
-Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.
-
-```jsx preview
-<CCard className="mb-3 bg-dark text-white">
-  <CCardImage src={ReactImg} />
-  <CCardImageOverlay>
-    <CCardTitle>Card title</CCardTitle>
-    <CCardText>
-      This is a wider card with supporting text below as a natural lead-in to additional content.
-      This content is a little bit longer.
-    </CCardText>
-    <CCardText>Last updated 3 mins ago</CCardText>
-  </CCardImageOverlay>
-</CCard>
-```
-
-## Horizontal
-
-Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
-
-```jsx preview
-<CCard className="mb-3" style={{ maxWidth: '540px' }}>
-  <CRow className="g-0">
-    <CCol md={4}>
-      <CCardImage src={React400Img} />
-    </CCol>
-    <CCol md={8}>
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-        <CCardText>
-          <small className="text-body-secondary">Last updated 3 mins ago</small>
-        </CCardText>
-      </CCardBody>
-    </CCol>
-  </CRow>
-</CCard>
-```
-
-## Card styles
-
-Cards include various options for customizing their backgrounds, borders, and color.
-
-### Background and color
-
-Use `color` property to change the appearance of a card.
-
-<Example>
-  <>
-    {[
-      { color: 'primary' },
-      { color: 'secondary' },
-      { color: 'success' },
-      { color: 'danger' },
-      { color: 'warning' },
-      { color: 'info' },
-      { color: 'light' },
-      { color: 'dark' },
-    ].map((item, index) => (
-      <CCard
-        textBgColor={item.color}
-        className="mb-3"
-        style={{ maxWidth: '18rem' }}
-        key={index}
-      >
-        <CCardHeader>Header</CCardHeader>
-        <CCardBody>
-          <CCardTitle>{item.color} card title</CCardTitle>
-          <CCardText> Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
-        </CCardBody>
-      </CCard>
-    ))}
-  </>
-</Example>
-
-You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
-
-
-```jsx
-<>
-  {[
-    { color: 'primary' },
-    { color: 'secondary' },
-    { color: 'success' },
-    { color: 'danger' },
-    { color: 'warning' },
-    { color: 'info' },
-    { color: 'light' },
-    { color: 'dark' },
-  ].map((item, index) => (
-    <CCard
-      textBgColor={item.color}
-      className="mb-3"
-      style={{ maxWidth: '18rem' }}
-      key={index}
-    >
-      <CCardHeader>Header</CCardHeader>
-      <CCardBody>
-        <CCardTitle>{item.color} card title</CCardTitle>
-        <CCardText>
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  ))}
-</>
-```
-<Example>
-  <>
-    {[
-      { color: 'primary', textColor: 'white' },
-      { color: 'secondary', textColor: 'white' },
-      { color: 'success', textColor: 'white' },
-      { color: 'danger', textColor: 'white' },
-      { color: 'warning' },
-      { color: 'info', textColor: 'white' },
-      { color: 'light' },
-      { color: 'dark', textColor: 'white' },
-    ].map((item, index) => (
-      <CCard
-        color={item.color}
-        textColor={item.textColor}
-        className="mb-3"
-        style={{ maxWidth: '18rem' }}
-        key={index}
-      >
-        <CCardHeader>Header</CCardHeader>
-        <CCardBody>
-          <CCardTitle>{item.color} card title</CCardTitle>
-          <CCardText> Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
-        </CCardBody>
-      </CCard>
-    ))}
-  </>
-</Example>
-
-```jsx
-<>
-  {[
-    { color: 'primary', textColor: 'white' },
-    { color: 'secondary', textColor: 'white' },
-    { color: 'success', textColor: 'white' },
-    { color: 'danger', textColor: 'white' },
-    { color: 'warning' },
-    { color: 'info', textColor: 'white' },
-    { color: 'light' },
-    { color: 'dark', textColor: 'white' },
-  ].map((item, index) => (
-    <CCard
-      color={item.color}
-      textColor={item.textColor}
-      className="mb-3"
-      style={{ maxWidth: '18rem' }}
-      key={index}
-    >
-      <CCardHeader>Header</CCardHeader>
-      <CCardBody>
-        <CCardTitle>{item.color} card title</CCardTitle>
-        <CCardText>
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  ))}
-</>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
-  Using color to add meaning only provides a visual indication, which will not be conveyed to
-  users of assistive technologies – such as screen readers. Ensure that information denoted by the
-  color is either obvious from the content itself (e.g. the visible text), or is included through
-  alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-### Border
-
-Use [border utilities](https://coreui.io/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `textColor` property on the `<CCard>` or a subset of the card's contents as shown below.
-
-<Example>
-  <>
-    {[
-      { color: 'primary', textColor: 'primary' },
-      { color: 'secondary', textColor: 'secondary' },
-      { color: 'success', textColor: 'success' },
-      { color: 'danger', textColor: 'danger' },
-      { color: 'warning', textColor: 'warning' },
-      { color: 'info', textColor: 'info' },
-      { color: 'light' },
-      { color: 'dark' },
-    ].map((item, index) => (
-      <CCard
-        textColor={item.textColor}
-        className={`mb-3 border-${item.color}`}
-        style={{ maxWidth: '18rem' }}
-        key={index}
-      >
-        <CCardHeader>Header</CCardHeader>
-        <CCardBody>
-          <CCardTitle>{item.color} card title</CCardTitle>
-          <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
-        </CCardBody>
-      </CCard>
-    ))}
-  </>
-</Example>
-
-```jsx
-<>
-  {[
-    { color: 'primary', textColor: 'primary' },
-    { color: 'secondary', textColor: 'secondary' },
-    { color: 'success', textColor: 'success' },
-    { color: 'danger', textColor: 'danger' },
-    { color: 'warning', textColor: 'warning' },
-    { color: 'info', textColor: 'info' },
-    { color: 'light' },
-    { color: 'dark' },
-  ].map((item, index) => (
-    <CCard
-      textColor={item.textColor}
-      className={`mb-3 border-${item.color}`}
-      style={{ maxWidth: '18rem' }}
-      key={index}
-    >
-      <CCardHeader>Header</CCardHeader>
-      <CCardBody>
-        <CCardTitle>{item.color} card title</CCardTitle>
-        <CCardText>
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  ))}
-</>
-```
-
-### Top border
-
-<Example>
-  <>
-    {[
-      { color: 'primary', textColor: 'primary' },
-      { color: 'secondary', textColor: 'secondary' },
-      { color: 'success', textColor: 'success' },
-      { color: 'danger', textColor: 'danger' },
-      { color: 'warning', textColor: 'warning' },
-      { color: 'info', textColor: 'info' },
-      { color: 'light' },
-      { color: 'dark' },
-    ].map((item, index) => (
-      <CCard
-        textColor={item.textColor}
-        className={`mb-3 border-top-${item.color} border-top-3`}
-        style={{ maxWidth: '18rem' }}
-        key={index}
-      >
-        <CCardHeader>Header</CCardHeader>
-        <CCardBody>
-          <CCardTitle>{item.color} card title</CCardTitle>
-          <CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
-        </CCardBody>
-      </CCard>
-    ))}
-  </>
-</Example>
-
-```jsx
-<>
-  {[
-    { color: 'primary', textColor: 'primary' },
-    { color: 'secondary', textColor: 'secondary' },
-    { color: 'success', textColor: 'success' },
-    { color: 'danger', textColor: 'danger' },
-    { color: 'warning', textColor: 'warning' },
-    { color: 'info', textColor: 'info' },
-    { color: 'light' },
-    { color: 'dark' },
-  ].map((item, index) => (
-    <CCard
-      textColor={item.textColor}
-      className={`mb-3 border-top-${item.color} border-top-3`}
-      style={{ maxWidth: '18rem' }}
-      key={index}
-    >
-      <CCardHeader>Header</CCardHeader>
-      <CCardBody>
-        <CCardTitle>{item.color} card title</CCardTitle>
-        <CCardText>
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  ))}
-</>
-```
-
-## Card layout
-
-In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
-
-### Card groups
-
-Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.
-
-```jsx preview
-<CCardGroup>
-  <CCard>
-    <CCardImage orientation="top" src={ReactImg} />
-    <CCardBody>
-      <CCardTitle>Card title</CCardTitle>
-      <CCardText>
-        This is a wider card with supporting text below as a natural lead-in to additional content.
-        This content is a little bit longer.
-      </CCardText>
-      <CCardText>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardText>
-    </CCardBody>
-  </CCard>
-  <CCard>
-    <CCardImage orientation="top" src={ReactImg} />
-    <CCardBody>
-      <CCardTitle>Card title</CCardTitle>
-      <CCardText>
-        This card has supporting text below as a natural lead-in to additional content.
-      </CCardText>
-      <CCardText>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardText>
-    </CCardBody>
-  </CCard>
-  <CCard>
-    <CCardImage orientation="top" src={ReactImg} />
-    <CCardBody>
-      <CCardTitle>Card title</CCardTitle>
-      <CCardText>
-        This is a wider card with supporting text below as a natural lead-in to additional content.
-        This card has even longer content than the first to show that equal height action.
-      </CCardText>
-      <CCardText>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardText>
-    </CCardBody>
-  </CCard>
-</CCardGroup>
-```
-
-When using card groups with footers, their content will automatically line up.
-
-```jsx preview
-<CCardGroup>
-  <CCard>
-    <CCardImage orientation="top" src={ReactImg} />
-    <CCardBody>
-      <CCardTitle>Card title</CCardTitle>
-      <CCardText>
-        This is a wider card with supporting text below as a natural lead-in to additional content.
-        This content is a little bit longer.
-      </CCardText>
-    </CCardBody>
-    <CCardFooter>
-      <small className="text-body-secondary">Last updated 3 mins ago</small>
-    </CCardFooter>
-  </CCard>
-  <CCard>
-    <CCardImage orientation="top" src={ReactImg} />
-    <CCardBody>
-      <CCardTitle>Card title</CCardTitle>
-      <CCardText>
-        This card has supporting text below as a natural lead-in to additional content.
-      </CCardText>
-    </CCardBody>
-    <CCardFooter>
-      <small className="text-body-secondary">Last updated 3 mins ago</small>
-    </CCardFooter>
-  </CCard>
-  <CCard>
-    <CCardImage orientation="top" src={ReactImg} />
-    <CCardBody>
-      <CCardTitle>Card title</CCardTitle>
-      <CCardText>
-        This is a wider card with supporting text below as a natural lead-in to additional content.
-        This card has even longer content than the first to show that equal height action.
-      </CCardText>
-    </CCardBody>
-    <CCardFooter>
-      <small className="text-body-secondary">Last updated 3 mins ago</small>
-    </CCardFooter>
-  </CCard>
-</CCardGroup>
-```
-
-### Grid cards
-
-Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `xs={{cols: 1}}` laying out the cards on one column, and `md={{cols: 1}}` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
-
-```jsx preview
-<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
-  <CCol xs>
-    <CCard>
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard>
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard>
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard>
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-</CRow>
-```
-
-Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
-
-```jsx preview
-<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
-  <CCol xs>
-    <CCard>
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard>
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard>
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard>
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-</CRow>
-```
-
-When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
-
-```jsx preview
-<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
-  <CCol xs>
-    <CCard className="h-100">
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard className="h-100">
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This card has supporting text below as a natural lead-in to additional content.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard className="h-100">
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This card has even longer content than the first to show that equal height
-          action.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard className="h-100">
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  </CCol>
-</CRow>
-```
-
-Just like with card groups, card footers will automatically line up.
-
-```jsx preview
-<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
-  <CCol xs>
-    <CCard className="h-100">
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard className="h-100">
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This card has supporting text below as a natural lead-in to additional content.
-        </CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-  <CCol xs>
-    <CCard className="h-100">
-      <CCardImage orientation="top" src={ReactImg} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This card has even longer content than the first to show that equal height
-          action.
-        </CCardText>
-      </CCardBody>
-      <CCardFooter>
-        <small className="text-body-secondary">Last updated 3 mins ago</small>
-      </CCardFooter>
-    </CCard>
-  </CCol>
-</CRow>
-```
-
-
-## Customizing
-
-### CSS variables
-
-React cards 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.
-
-<ScssDocs file="_card.scss" capture="card-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CCard style={vars}>...</CCard>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="card-variables"/>
-
-## API
-
-### CCard
-
-`markdown:CCard.api.mdx`
-
-### CCardBody
-
-`markdown:CCardBody.api.mdx`
-
-### CCardFooter
-
-`markdown:CCardFooter.api.mdx`
-
-### CCardGroup
-
-`markdown:CCardGroup.api.mdx`
-
-### CCardHeader
-
-`markdown:CCardHeader.api.mdx`
-
-### CCardImage
-
-`markdown:CCardImage.api.mdx`
-
-### CCardImageOverlay
-
-`markdown:CCardImageOverlay.api.mdx`
-
-### CCardLink
-
-`markdown:CCardLink.api.mdx`
-
-### CCardSubtitle
-
-`markdown:CCardSubtitle.api.mdx`
-
-### CCardText
-
-`markdown:CCardText.api.mdx`
-
-### CCardTitle
-
-`markdown:CCardTitle.api.mdx`
diff --git a/packages/docs/content/components/card/api.mdx b/packages/docs/content/components/card/api.mdx
new file mode 100644
index 00000000..19d54e93
--- /dev/null
+++ b/packages/docs/content/components/card/api.mdx
@@ -0,0 +1,62 @@
+---
+title: React Card Component API
+name: Card API
+description: Explore the API reference for the React Card component and discover how to effectively utilize its props for customization.
+route: /components/card/
+---
+
+import CCardAPI from '../../api/CCard.api.mdx'
+import CCardBodyAPI from '../../api/CCardBody.api.mdx'
+import CCardFooterAPI from '../../api/CCardFooter.api.mdx'
+import CCardGroupAPI from '../../api/CCardGroup.api.mdx'
+import CCardHeaderAPI from '../../api/CCardHeader.api.mdx'
+import CCardImageAPI from '../../api/CCardImage.api.mdx'
+import CCardImageOverlayAPI from '../../api/CCardImageOverlay.api.mdx'
+import CCardLinkAPI from '../../api/CCardLink.api.mdx'
+import CCardSubtitleAPI from '../../api/CCardSubtitle.api.mdx'
+import CCardTextAPI from '../../api/CCardText.api.mdx'
+import CCardTitleAPI from '../../api/CCardTitle.api.mdx'
+
+## CCard
+
+<CCardAPI />
+
+## CCardBody
+
+<CCardBodyAPI />
+
+## CCardFooter
+
+<CCardFooterAPI />
+
+## CCardGroup
+
+<CCardGroupAPI />
+
+## CCardHeader
+
+<CCardHeaderAPI />
+
+## CCardImage
+
+<CCardImageAPI />
+
+## CCardImageOverlay
+
+<CCardImageOverlayAPI />
+
+## CCardLink
+
+<CCardLinkAPI />
+
+## CCardSubtitle
+
+<CCardSubtitleAPI />
+
+## CCardText
+
+<CCardTextAPI />
+
+## CCardTitle
+
+<CCardTitleAPI />
diff --git a/packages/docs/content/components/card/bootstrap.mdx b/packages/docs/content/components/card/bootstrap.mdx
new file mode 100644
index 00000000..9233bcfe
--- /dev/null
+++ b/packages/docs/content/components/card/bootstrap.mdx
@@ -0,0 +1,169 @@
+---
+title: React Bootstrap Card Component
+name: Card with Bootstrap Styling
+description: Learn how to use CoreUI’s React Bootstrap Card component to build flexible content containers with headers, footers, images, list groups, and responsive layouts.
+route: /components/card/
+bootstrap_component: true
+---
+
+## About React Bootstrap Card Component
+
+The React Bootstrap Card component is a versatile container used to display content in a structured and responsive way. It supports images, headers, footers, background styles, and more—styled to match Bootstrap's visual language.
+
+## Example usage
+
+React Bootstrap Cards require minimal markup and offer maximum flexibility. They use flexbox for layout, have no default margins, and fill their parent container by default.
+
+<ExampleSnippet className="theme-bootstrap" component="CardExample" componentName="React Bootstrap Card" />
+
+## Content types supported by React Bootstrap Card
+
+### Card body
+
+The main block of the card is wrapped in `<CCardBody>` for consistent padding.
+
+<ExampleSnippet className="theme-bootstrap" component="CardBodyExample" componentName="React Bootstrap Card" />
+
+### Titles, text, and links
+
+Use `<CCardTitle>`, `<CCardSubtitle>`, and `<CCardLink>` to structure text and links inside cards.
+
+<ExampleSnippet className="theme-bootstrap" component="CardTitleExample" componentName="React Bootstrap Card" />
+
+### Images
+
+Use `orientation="top"` to position an image at the top of the card. Use `<CCardText>` to add and style text content.
+
+<ExampleSnippet className="theme-bootstrap" component="CardImagesExample" componentName="React Bootstrap Card" />
+
+### List groups
+
+Display structured lists inside cards using flush list groups.
+
+<ExampleSnippet className="theme-bootstrap" component="CardListGroupsExample" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardListGroups2Example" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardListGroups3Example" componentName="React Bootstrap Card" />
+
+### Kitchen sink
+
+Combine multiple content elements (e.g. image, text, list group) to create a comprehensive card layout.
+
+<ExampleSnippet className="theme-bootstrap" component="CardKitchenSinkExample" componentName="React Bootstrap Card" />
+
+### Header and footer
+
+Use `<CCardHeader>` and `<CCardFooter>` to add headers and footers. You can style headers with `as="h5"` or similar props.
+
+<ExampleSnippet className="theme-bootstrap" component="CardHeaderExample" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardHeader2Example" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardHeader3Example" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardHeaderAndFooterExample" componentName="React Bootstrap Card" />
+
+## Sizing React Bootstrap Cards
+
+Cards are full-width by default. Control width using layout grids, utilities, or custom CSS.
+
+### Grid layout
+
+<ExampleSnippet className="theme-bootstrap" component="CardSizingExample" componentName="React Bootstrap Card" />
+
+### Utility classes
+
+<ExampleSnippet className="theme-bootstrap" component="CardSizing2Example" componentName="React Bootstrap Card" />
+
+### Custom CSS
+
+<ExampleSnippet className="theme-bootstrap" component="CardSizing3Example" componentName="React Bootstrap Card" />
+
+## Text alignment
+
+Use Bootstrap's text alignment utilities to position card content.
+
+<ExampleSnippet className="theme-bootstrap" component="CardTextAlignmentExample" componentName="React Bootstrap Card" />
+
+## Navigation
+
+Add navigational elements using `<CNav>` inside a card header.
+
+<ExampleSnippet className="theme-bootstrap" component="CardNavigationExample" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardNavigation2Example" componentName="React Bootstrap Card" />
+
+## Image placement in React Bootstrap Cards
+
+### Image caps (top or bottom)
+
+<ExampleSnippet className="theme-bootstrap" component="CardImageCapsExample" componentName="React Bootstrap Card" />
+
+### Image overlays
+
+Overlay content on top of background images using Bootstrap utility classes.
+
+<ExampleSnippet className="theme-bootstrap" component="CardImageOverlaysExample" componentName="React Bootstrap Card" />
+
+## Horizontal layout
+
+Use `.g-0` and grid column classes to create responsive horizontal cards.
+
+<ExampleSnippet className="theme-bootstrap" component="CardImageHorizontalExample" componentName="React Bootstrap Card" />
+
+## Styling options
+
+### Background and text color
+
+Use the `color` prop to control card background and text color.
+
+<ExampleSnippet className="theme-bootstrap" component="CardStylesBackgroundAndColorExample" componentName="React Bootstrap Card" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+### Border customization
+
+Apply Bootstrap border utilities or the `textColor` prop to customize card borders.
+
+<ExampleSnippet className="theme-bootstrap" component="CardStylesBorderExample" componentName="React Bootstrap Card" />
+
+### Top border only
+
+<ExampleSnippet className="theme-bootstrap" component="CardStylesTopBorderExample" componentName="React Bootstrap Card" />
+
+## Layout variations
+
+### Card groups
+
+Group cards to render them with equal width and height.
+
+<ExampleSnippet className="theme-bootstrap" component="CardGroupsExample" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardGroups2Example" componentName="React Bootstrap Card" />
+
+### Grid-based cards
+
+Use `<CRow>` and grid props to control the layout of multiple cards in a responsive grid.
+
+<ExampleSnippet className="theme-bootstrap" component="CardGridExample" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardGrid2Example" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardGrid3Example" componentName="React Bootstrap Card" />
+
+<ExampleSnippet className="theme-bootstrap" component="CardGrid4Example" componentName="React Bootstrap Card" />
+
+## API reference
+
+- [&lt;CCard /&gt;](../api/#ccard)
+- [&lt;CCardBody /&gt;](../api/#ccardbody)
+- [&lt;CCardFooter /&gt;](../api/#ccardfooter)
+- [&lt;CCardGroup /&gt;](../api/#ccardgroup)
+- [&lt;CCardHeader /&gt;](../api/#ccardheader)
+- [&lt;CCardImage /&gt;](../api/#ccardimage)
+- [&lt;CCardImageOverlay /&gt;](../api/#ccardimageoverlay)
+- [&lt;CCardLink /&gt;](../api/#ccardlink)
+- [&lt;CCardSubtitle /&gt;](../api/#ccardsubtitle)
+- [&lt;CCardText /&gt;](../api/#ccardtext)
+- [&lt;CCardTitle /&gt;](../api/#ccardtitle)
diff --git a/packages/docs/content/components/card/examples/CardBodyExample.tsx b/packages/docs/content/components/card/examples/CardBodyExample.tsx
new file mode 100644
index 00000000..6cdc49d6
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardBodyExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CCard, CCardBody } from '@coreui/react'
+
+export const CardBodyExample = () => {
+  return (
+    <CCard>
+      <CCardBody>This is some text within a card body.</CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardExample.tsx b/packages/docs/content/components/card/examples/CardExample.tsx
new file mode 100644
index 00000000..251ecfc7
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardExample = () => {
+  return (
+    <CCard style={{ width: '18rem' }}>
+      <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+      <CCardBody>
+        <CCardTitle>Card title</CCardTitle>
+        <CCardText>
+          Some quick example text to build on the card title and make up the bulk of the card's
+          content.
+        </CCardText>
+        <CButton color="primary" href="#">
+          Go somewhere
+        </CButton>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardGrid2Example.tsx b/packages/docs/content/components/card/examples/CardGrid2Example.tsx
new file mode 100644
index 00000000..d933064b
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid2Example.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardImage,
+  CCardText,
+  CCardTitle,
+  CCol,
+  CRow,
+} from '@coreui/react'
+
+export const CardGrid2Example = () => {
+  return (
+    <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
+      <CCol xs>
+        <CCard>
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard>
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard>
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard>
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardGrid3Example.tsx b/packages/docs/content/components/card/examples/CardGrid3Example.tsx
new file mode 100644
index 00000000..9c870870
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid3Example.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardGrid3Example = () => {
+  return (
+    <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
+      <CCol xs>
+        <CCard className="h-100">
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard className="h-100">
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This card has supporting text below as a natural lead-in to additional content.
+            </CCardText>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard className="h-100">
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This card has even longer content than the first to show that equal height
+              action.
+            </CCardText>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard className="h-100">
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardGrid4Example.tsx b/packages/docs/content/components/card/examples/CardGrid4Example.tsx
new file mode 100644
index 00000000..82b2d95a
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid4Example.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardImage,
+  CCardText,
+  CCardTitle,
+  CCol,
+  CRow,
+} from '@coreui/react'
+
+export const CardGrid4Example = () => {
+  return (
+    <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
+      <CCol xs>
+        <CCard className="h-100">
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard className="h-100">
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This card has supporting text below as a natural lead-in to additional content.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard className="h-100">
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This card has even longer content than the first to show that equal height
+              action.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardGridExample.tsx b/packages/docs/content/components/card/examples/CardGridExample.tsx
new file mode 100644
index 00000000..2da390d9
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGridExample.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardImage,
+  CCardText,
+  CCardTitle,
+  CCol,
+  CRow,
+} from '@coreui/react'
+
+export const CardGridExample = () => {
+  return (
+    <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
+      <CCol xs>
+        <CCard>
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard>
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard>
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+      <CCol xs>
+        <CCard>
+          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardGroups2Example.tsx b/packages/docs/content/components/card/examples/CardGroups2Example.tsx
new file mode 100644
index 00000000..86030f1f
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGroups2Example.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardGroup,
+  CCardImage,
+  CCardText,
+  CCardTitle,
+} from '@coreui/react'
+
+export const CardGroups2Example = () => {
+  return (
+    <CCardGroup>
+      <CCard>
+        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            This is a wider card with supporting text below as a natural lead-in to additional
+            content. This content is a little bit longer.
+          </CCardText>
+        </CCardBody>
+        <CCardFooter>
+          <small className="text-body-secondary">Last updated 3 mins ago</small>
+        </CCardFooter>
+      </CCard>
+      <CCard>
+        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            This card has supporting text below as a natural lead-in to additional content.
+          </CCardText>
+        </CCardBody>
+        <CCardFooter>
+          <small className="text-body-secondary">Last updated 3 mins ago</small>
+        </CCardFooter>
+      </CCard>
+      <CCard>
+        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            This is a wider card with supporting text below as a natural lead-in to additional
+            content. This card has even longer content than the first to show that equal height
+            action.
+          </CCardText>
+        </CCardBody>
+        <CCardFooter>
+          <small className="text-body-secondary">Last updated 3 mins ago</small>
+        </CCardFooter>
+      </CCard>
+    </CCardGroup>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardGroupsExample.tsx b/packages/docs/content/components/card/examples/CardGroupsExample.tsx
new file mode 100644
index 00000000..ff4ab1cb
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGroupsExample.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardGroupsExample = () => {
+  return (
+    <CCardGroup>
+      <CCard>
+        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            This is a wider card with supporting text below as a natural lead-in to additional
+            content. This content is a little bit longer.
+          </CCardText>
+          <CCardText>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardText>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            This card has supporting text below as a natural lead-in to additional content.
+          </CCardText>
+          <CCardText>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardText>
+        </CCardBody>
+      </CCard>
+      <CCard>
+        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            This is a wider card with supporting text below as a natural lead-in to additional
+            content. This card has even longer content than the first to show that equal height
+            action.
+          </CCardText>
+          <CCardText>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardText>
+        </CCardBody>
+      </CCard>
+    </CCardGroup>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardHeader2Example.tsx b/packages/docs/content/components/card/examples/CardHeader2Example.tsx
new file mode 100644
index 00000000..56d8a1e7
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardHeader2Example.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardHeader2Example = () => {
+  return (
+    <CCard>
+      <CCardHeader as="h5">Header</CCardHeader>
+      <CCardBody>
+        <CCardTitle>Special title treatment</CCardTitle>
+        <CCardText>
+          With supporting text below as a natural lead-in to additional content.
+        </CCardText>
+        <CButton color="primary" href="#">
+          Go somewhere
+        </CButton>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardHeader3Example.tsx b/packages/docs/content/components/card/examples/CardHeader3Example.tsx
new file mode 100644
index 00000000..aff6f3c0
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardHeader3Example.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader } from '@coreui/react'
+
+export const CardHeader3Example = () => {
+  return (
+    <CCard>
+      <CCardHeader>Quote</CCardHeader>
+      <CCardBody>
+        <blockquote className="blockquote mb-0">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+          </p>
+          <footer className="blockquote-footer">
+            Someone famous in <cite title="Source Title">Source Title</cite>
+          </footer>
+        </blockquote>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardHeaderAndFooterExample.tsx b/packages/docs/content/components/card/examples/CardHeaderAndFooterExample.tsx
new file mode 100644
index 00000000..190a1731
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardHeaderAndFooterExample.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardHeader,
+  CCardText,
+  CCardTitle,
+} from '@coreui/react'
+
+export const CardHeaderAndFooterExample = () => {
+  return (
+    <CCard className="text-center">
+      <CCardHeader>Header</CCardHeader>
+      <CCardBody>
+        <CCardTitle>Special title treatment</CCardTitle>
+        <CCardText>
+          With supporting text below as a natural lead-in to additional content.
+        </CCardText>
+        <CButton color="primary" href="#">
+          Go somewhere
+        </CButton>
+      </CCardBody>
+      <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardHeaderExample.tsx b/packages/docs/content/components/card/examples/CardHeaderExample.tsx
new file mode 100644
index 00000000..c80926ed
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardHeaderExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardHeaderExample = () => {
+  return (
+    <CCard>
+      <CCardHeader>Header</CCardHeader>
+      <CCardBody>
+        <CCardTitle>Special title treatment</CCardTitle>
+        <CCardText>
+          With supporting text below as a natural lead-in to additional content.
+        </CCardText>
+        <CButton color="primary" href="#">
+          Go somewhere
+        </CButton>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardImageCapsExample.tsx b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx
new file mode 100644
index 00000000..1cdd37d4
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardImageCapsExample = () => {
+  return (
+    <>
+      <CCard className="mb-3">
+        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            This is a wider card with supporting text below as a natural lead-in to additional
+            content. This content is a little bit longer.
+          </CCardText>
+          <CCardText>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardText>
+        </CCardBody>
+      </CCard>
+      <CCard className="mb-3">
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            This is a wider card with supporting text below as a natural lead-in to additional
+            content. This content is a little bit longer.
+          </CCardText>
+          <CCardText>
+            <small className="text-body-secondary">Last updated 3 mins ago</small>
+          </CCardText>
+        </CCardBody>
+        <CCardImage orientation="bottom" src={withPrefix('/images/react.jpg')} />
+      </CCard>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx
new file mode 100644
index 00000000..e7f7b5c5
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardImageHorizontalExample = () => {
+  return (
+    <CCard className="mb-3" style={{ maxWidth: '540px' }}>
+      <CRow className="g-0">
+        <CCol md={4}>
+          <CCardImage src={withPrefix('/images/react400.jpg')} />
+        </CCol>
+        <CCol md={8}>
+          <CCardBody>
+            <CCardTitle>Card title</CCardTitle>
+            <CCardText>
+              This is a wider card with supporting text below as a natural lead-in to additional
+              content. This content is a little bit longer.
+            </CCardText>
+            <CCardText>
+              <small className="text-body-secondary">Last updated 3 mins ago</small>
+            </CCardText>
+          </CCardBody>
+        </CCol>
+      </CRow>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx
new file mode 100644
index 00000000..b6c08a89
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardImageOverlaysExample = () => {
+  return (
+    <CCard className="mb-3 bg-dark text-white">
+      <CCardImage src={withPrefix('/images/react.jpg')} />
+      <CCardImageOverlay className="d-flex flex-column align-items-center justify-content-center">
+        <CCardTitle>Card title</CCardTitle>
+        <CCardText>
+          This is a wider card with supporting text below as a natural lead-in to additional
+          content. This content is a little bit longer.
+        </CCardText>
+        <CCardText>Last updated 3 mins ago</CCardText>
+      </CCardImageOverlay>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardImagesExample.tsx b/packages/docs/content/components/card/examples/CardImagesExample.tsx
new file mode 100644
index 00000000..e83a37be
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImagesExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react'
+
+export const CardImagesExample = () => {
+  return (
+    <CCard style={{ width: '18rem' }}>
+      <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+      <CCardBody>
+        <CCardText>
+          Some quick example text to build on the card title and make up the bulk of the card's
+          content.
+        </CCardText>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx
new file mode 100644
index 00000000..fcdadebe
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import {
+  CCard,
+  CCardBody,
+  CCardImage,
+  CCardLink,
+  CCardText,
+  CCardTitle,
+  CListGroup,
+  CListGroupItem,
+} from '@coreui/react'
+
+export const CardKitchenSinkExample = () => {
+  return (
+    <CCard style={{ width: '18rem' }}>
+      <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+      <CCardBody>
+        <CCardTitle>Card title</CCardTitle>
+        <CCardText>
+          Some quick example text to build on the card title and make up the bulk of the card's
+          content.
+        </CCardText>
+      </CCardBody>
+      <CListGroup flush>
+        <CListGroupItem>Cras justo odio</CListGroupItem>
+        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+        <CListGroupItem>Vestibulum at eros</CListGroupItem>
+      </CListGroup>
+      <CCardBody>
+        <CCardLink href="#">Card link</CCardLink>
+        <CCardLink href="#">Another link</CCardLink>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardListGroups2Example.tsx b/packages/docs/content/components/card/examples/CardListGroups2Example.tsx
new file mode 100644
index 00000000..e57730b7
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardListGroups2Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CCard, CCardHeader, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const CardListGroups2Example = () => {
+  return (
+    <CCard style={{ width: '18rem' }}>
+      <CCardHeader>Header</CCardHeader>
+      <CListGroup flush>
+        <CListGroupItem>Cras justo odio</CListGroupItem>
+        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+        <CListGroupItem>Vestibulum at eros</CListGroupItem>
+      </CListGroup>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardListGroups3Example.tsx b/packages/docs/content/components/card/examples/CardListGroups3Example.tsx
new file mode 100644
index 00000000..eacf3f75
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardListGroups3Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CCard, CCardFooter, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const CardListGroups3Example = () => {
+  return (
+    <CCard style={{ width: '18rem' }}>
+      <CListGroup flush>
+        <CListGroupItem>Cras justo odio</CListGroupItem>
+        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+        <CListGroupItem>Vestibulum at eros</CListGroupItem>
+      </CListGroup>
+      <CCardFooter>Footer</CCardFooter>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardListGroupsExample.tsx b/packages/docs/content/components/card/examples/CardListGroupsExample.tsx
new file mode 100644
index 00000000..843294fa
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardListGroupsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CCard, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const CardListGroupsExample = () => {
+  return (
+    <CCard style={{ width: '18rem' }}>
+      <CListGroup flush>
+        <CListGroupItem>Cras justo odio</CListGroupItem>
+        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+        <CListGroupItem>Vestibulum at eros</CListGroupItem>
+      </CListGroup>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardNavigation2Example.tsx b/packages/docs/content/components/card/examples/CardNavigation2Example.tsx
new file mode 100644
index 00000000..6469f59d
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardNavigation2Example.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCardText,
+  CCardTitle,
+  CNav,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const CardNavigation2Example = () => {
+  return (
+    <CCard className="text-center">
+      <CCardHeader>
+        <CNav variant="pills" className="card-header-pills">
+          <CNavItem>
+            <CNavLink href="#" active>Active</CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">Link</CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#" disabled>Disabled</CNavLink>
+          </CNavItem>
+        </CNav>
+      </CCardHeader>
+      <CCardBody>
+        <CCardTitle>Special title treatment</CCardTitle>
+        <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
+        <CButton color="primary" href="#">Go somewhere</CButton>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardNavigationExample.tsx b/packages/docs/content/components/card/examples/CardNavigationExample.tsx
new file mode 100644
index 00000000..a4d41714
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardNavigationExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCardText,
+  CCardTitle,
+  CNav,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const CardNavigationExample = () => {
+  return (
+    <CCard className="text-center">
+      <CCardHeader>
+        <CNav variant="tabs" className="card-header-tabs">
+          <CNavItem>
+            <CNavLink href="#" active>Active</CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">Link</CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#" disabled>Disabled</CNavLink>
+          </CNavItem>
+        </CNav>
+      </CCardHeader>
+      <CCardBody>
+        <CCardTitle>Special title treatment</CCardTitle>
+        <CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
+        <CButton color="primary" href="#">Go somewhere</CButton>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardSizing2Example.tsx b/packages/docs/content/components/card/examples/CardSizing2Example.tsx
new file mode 100644
index 00000000..6abe386a
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardSizing2Example.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardSizing2Example = () => {
+  return (
+    <>
+      <CCard className="w-75 mb-3">
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            With supporting text below as a natural lead-in to additional content.
+          </CCardText>
+          <CButton color="primary" href="#">
+            Go somewhere
+          </CButton>
+        </CCardBody>
+      </CCard>
+      <CCard className="w-50">
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            With supporting text below as a natural lead-in to additional content.
+          </CCardText>
+          <CButton color="primary" href="#">Go somewhere</CButton>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardSizing3Example.tsx b/packages/docs/content/components/card/examples/CardSizing3Example.tsx
new file mode 100644
index 00000000..4a98d744
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardSizing3Example.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardSizing3Example = () => {
+  return (
+    <CCard style={{ width: '18rem' }}>
+      <CCardBody>
+        <CCardTitle>Special title treatment</CCardTitle>
+        <CCardText>
+          With supporting text below as a natural lead-in to additional content.
+        </CCardText>
+        <CButton color="primary" href="#">Go somewhere</CButton>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardSizingExample.tsx b/packages/docs/content/components/card/examples/CardSizingExample.tsx
new file mode 100644
index 00000000..cabb8cc5
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardSizingExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardSizingExample = () => {
+  return (
+    <CRow>
+      <CCol sm={6}>
+        <CCard>
+          <CCardBody>
+            <CCardTitle>Special title treatment</CCardTitle>
+            <CCardText>
+              With supporting text below as a natural lead-in to additional content.
+            </CCardText>
+            <CButton color="primary" href="#">Go somewhere</CButton>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol sm={6}>
+        <CCard>
+          <CCardBody>
+            <CCardTitle>Special title treatment</CCardTitle>
+            <CCardText>
+              With supporting text below as a natural lead-in to additional content.
+            </CCardText>
+            <CButton color="primary" href="#">Go somewhere</CButton>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardStylesBackgroundAndColorExample.tsx b/packages/docs/content/components/card/examples/CardStylesBackgroundAndColorExample.tsx
new file mode 100644
index 00000000..a2f67bca
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardStylesBackgroundAndColorExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardStylesBackgroundAndColorExample = () => {
+  const colors = [
+    { color: 'primary' },
+    { color: 'secondary' },
+    { color: 'success' },
+    { color: 'danger' },
+    { color: 'warning' },
+    { color: 'info' },
+    { color: 'light' },
+    { color: 'dark' },
+  ]
+
+  return (
+    <CRow>
+      {colors.map((item, index) => (
+        <CCol sm={6} key={index}>
+          <CCard textBgColor={item.color} className="mb-3">
+            <CCardHeader>Header</CCardHeader>
+            <CCardBody>
+              <CCardTitle>{item.color} card title</CCardTitle>
+              <CCardText>
+                Some quick example text to build on the card title and make up the bulk of the
+                card's content.
+              </CCardText>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      ))}
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardStylesBorderExample.tsx b/packages/docs/content/components/card/examples/CardStylesBorderExample.tsx
new file mode 100644
index 00000000..192c1151
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardStylesBorderExample.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardStylesBorderExample = () => {
+  const colors = [
+    { color: 'primary', textColor: 'primary' },
+    { color: 'secondary', textColor: 'secondary' },
+    { color: 'success', textColor: 'success' },
+    { color: 'danger', textColor: 'danger' },
+    { color: 'warning', textColor: 'warning' },
+    { color: 'info', textColor: 'info' },
+    { color: 'dark', textColor: 'dark' },
+  ]
+
+  return (
+    <CRow>
+      {colors.map((item, index) => (
+        <CCol sm={6} key={index}>
+          <CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
+            <CCardHeader>Header</CCardHeader>
+            <CCardBody>
+              <CCardTitle>{item.color} card title</CCardTitle>
+              <CCardText>
+                Some quick example text to build on the card title and make up the bulk of the
+                card's content.
+              </CCardText>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      ))}
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardStylesTopBorderExample.tsx b/packages/docs/content/components/card/examples/CardStylesTopBorderExample.tsx
new file mode 100644
index 00000000..5567efa0
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardStylesTopBorderExample.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+export const CardStylesTopBorderExample = () => {
+  const colors = [
+    { color: 'primary', textColor: 'primary' },
+    { color: 'secondary', textColor: 'secondary' },
+    { color: 'success', textColor: 'success' },
+    { color: 'danger', textColor: 'danger' },
+    { color: 'warning', textColor: 'warning' },
+    { color: 'info', textColor: 'info' },
+    { color: 'dark', textColor: 'dark' },
+  ]
+
+  return (
+    <CRow>
+      {colors.map((item, index) => (
+        <CCol sm={6} key={index}>
+          <CCard
+            textColor={item.textColor}
+            className={`mb-3 border-top-${item.color} border-top-3`}
+          >
+            <CCardHeader>Header</CCardHeader>
+            <CCardBody>
+              <CCardTitle>{item.color} card title</CCardTitle>
+              <CCardText>
+                Some quick example text to build on the card title and make up the bulk of the
+                card's content.
+              </CCardText>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      ))}
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardTextAlignmentExample.tsx b/packages/docs/content/components/card/examples/CardTextAlignmentExample.tsx
new file mode 100644
index 00000000..181c290c
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardTextAlignmentExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardTextAlignmentExample = () => {
+  return (
+    <>
+      <CCard className="mb-3" style={{ width: '18rem' }}>
+        <CCardBody>
+          <CCardTitle>Special title treatment</CCardTitle>
+          <CCardText>
+            With supporting text below as a natural lead-in to additional content.
+          </CCardText>
+          <CButton color="primary" href="#">
+            Go somewhere
+          </CButton>
+        </CCardBody>
+      </CCard>
+      <CCard className="mb-3 text-center" style={{ width: '18rem' }}>
+        <CCardBody>
+          <CCardTitle>Special title treatment</CCardTitle>
+          <CCardText>
+            With supporting text below as a natural lead-in to additional content.
+          </CCardText>
+          <CButton color="primary" href="#">
+            Go somewhere
+          </CButton>
+        </CCardBody>
+      </CCard>
+      <CCard className="text-end" style={{ width: '18rem' }}>
+        <CCardBody>
+          <CCardTitle>Special title treatment</CCardTitle>
+          <CCardText>
+            With supporting text below as a natural lead-in to additional content.
+          </CCardText>
+          <CButton color="primary" href="#">
+            Go somewhere
+          </CButton>
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/card/examples/CardTitleExample.tsx b/packages/docs/content/components/card/examples/CardTitleExample.tsx
new file mode 100644
index 00000000..7d134b86
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardTitleExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CCard, CCardBody, CCardLink, CCardSubtitle, CCardText, CCardTitle } from '@coreui/react'
+
+export const CardTitleExample = () => {
+  return (
+    <CCard style={{ width: '18rem' }}>
+      <CCardBody>
+        <CCardTitle>Card title</CCardTitle>
+        <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
+        <CCardText>
+          Some quick example text to build on the card title and make up the bulk of the card's
+          content.
+        </CCardText>
+        <CCardLink href="#">Card link</CCardLink>
+        <CCardLink href="#">Another link</CCardLink>
+      </CCardBody>
+    </CCard>
+  )
+}
diff --git a/packages/docs/content/components/card/index.mdx b/packages/docs/content/components/card/index.mdx
new file mode 100644
index 00000000..93f1b34e
--- /dev/null
+++ b/packages/docs/content/components/card/index.mdx
@@ -0,0 +1,201 @@
+---
+title: React Card Component
+name: Card
+description: React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.
+route: /components/card/
+other_frameworks: card
+---
+
+## About
+
+A react card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.
+
+## Example
+
+Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other CoreUI components. Cards have no top, left, and right margins by default, so use [spacing utilities](https://coreui.io/bootstrap/docs/utilities/spacing) as needed. They have no fixed width to start, so they'll fill the full width of its parent.
+
+Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
+
+<ExampleSnippet component="CardExample" componentName="React Card" />
+
+## Content types
+
+CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.
+
+### Body
+
+The main block of a card is the `<CCardBody>`. Use it whenever you need a padded section within a card.
+
+<ExampleSnippet component="CardBodyExample" componentName="React Card" />
+
+### Titles, text, and links
+
+Card titles are managed by `<CCardTitle>` component. Identically, links are attached and collected next to each other by `<CCardLink>` component.
+
+Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also, the `<CCardSubtitle>` items are stored in a `<CCardBody>` item, the card title, and subtitle are arranged rightly.
+
+<ExampleSnippet component="CardTitleExample" componentName="React Card" />
+
+### Images
+
+`orientation="top"` places a picture to the top of the card. With `<CCardText>`, text can be added to the card. Text within `<CCardText>` can additionally be styled with the regular HTML tags.
+
+<ExampleSnippet component="CardImagesExample" componentName="React Card" />
+
+### List groups
+
+Create lists of content in a card with a flush list group.
+
+<ExampleSnippet component="CardListGroupsExample" componentName="React Card" />
+
+<ExampleSnippet component="CardListGroups2Example" componentName="React Card" />
+
+<ExampleSnippet component="CardListGroups3Example" componentName="React Card" />
+
+### Kitchen sink
+
+Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
+
+<ExampleSnippet component="CardKitchenSinkExample" componentName="React Card" />
+
+### Header and footer
+
+Add an optional header and/or footer within a card.
+
+<ExampleSnippet component="CardHeaderExample" componentName="React Card" />
+
+Card headers can be styled by adding ex. `as="h5"`.
+
+<ExampleSnippet component="CardHeader2Example" componentName="React Card" />
+
+<ExampleSnippet component="CardHeader3Example" componentName="React Card" />
+
+<ExampleSnippet component="CardHeaderAndFooterExample" componentName="React Card" />
+
+## Sizing
+
+Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.
+
+### Using grid markup
+
+Using the grid, wrap cards in columns and rows as needed.
+
+<ExampleSnippet component="CardSizingExample" componentName="React Card" />
+
+### Using utilities
+
+Use some of [available sizing utilities](https://coreui.io/bootstrap/docs/utilities/sizing/) to rapidly set a card's width.
+
+<ExampleSnippet component="CardSizing2Example" componentName="React Card" />
+
+### Using custom CSS
+
+Use custom CSS in your stylesheets or as inline styles to set a width.
+
+<ExampleSnippet component="CardSizing3Example" componentName="React Card" />
+
+## Text alignment
+
+You can instantly change the text arrangement of any card—in its whole or specific parts—with [text align classes](https://coreui.io/bootstrap/docs/utilities/text/#text-alignment).
+
+<ExampleSnippet component="CardTextAlignmentExample" componentName="React Card" />
+
+## Navigation
+
+Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
+
+<ExampleSnippet component="CardNavigationExample" componentName="React Card" />
+
+<ExampleSnippet component="CardNavigation2Example" componentName="React Card" />
+
+## Images
+
+Cards introduce several options for acting with images. Pick from appending "image caps" at either end of a card, overlaying images with content, or just inserting the image in a card.
+
+### Image caps
+
+Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
+
+<ExampleSnippet component="CardImageCapsExample" componentName="React Card" />
+
+### Image overlays
+
+Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.
+
+<ExampleSnippet component="CardImageOverlaysExample" componentName="React Card" />
+
+## Horizontal
+
+Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
+
+<ExampleSnippet component="CardImageHorizontalExample" componentName="React Card" />
+
+## Card styles
+
+Cards include various options for customizing their backgrounds, borders, and color.
+
+### Background and color
+
+Use `color` property to change the appearance of a card.
+
+<ExampleSnippet component="CardStylesBackgroundAndColorExample" componentName="React Card" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+### Border
+
+Use [border utilities](https://coreui.io/bootstrap/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `textColor` property on the `<CCard>` or a subset of the card's contents as shown below.
+
+<ExampleSnippet component="CardStylesBorderExample" componentName="React Card" />
+
+### Top border
+
+<ExampleSnippet component="CardStylesTopBorderExample" componentName="React Card" />
+
+## Card layout
+
+In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
+
+### Card groups
+
+Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.
+
+<ExampleSnippet component="CardGroupsExample" componentName="React Card" />
+
+When using card groups with footers, their content will automatically line up.
+
+<ExampleSnippet component="CardGroups2Example" componentName="React Card" />
+
+### Grid cards
+
+Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `xs={{cols: 1}}` laying out the cards on one column, and `md={{cols: 1}}` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
+
+<ExampleSnippet component="CardGridExample" componentName="React Card" />
+
+Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
+
+<ExampleSnippet component="CardGrid2Example" componentName="React Card" />
+
+When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
+
+<ExampleSnippet component="CardGrid3Example" componentName="React Card" />
+
+Just like with card groups, card footers will automatically line up.
+
+<ExampleSnippet component="CardGrid4Example" componentName="React Card" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CCard /&gt;](./api/#ccard)
+- [&lt;CCardBody /&gt;](./api/#ccardbody)
+- [&lt;CCardFooter /&gt;](./api/#ccardfooter)
+- [&lt;CCardGroup /&gt;](./api/#ccardgroup)
+- [&lt;CCardHeader /&gt;](./api/#ccardheader)
+- [&lt;CCardImage /&gt;](./api/#ccardimage)
+- [&lt;CCardImageOverlay /&gt;](./api/#ccardimageoverlay)
+- [&lt;CCardLink /&gt;](./api/#ccardlink)
+- [&lt;CCardSubtitle /&gt;](./api/#ccardsubtitle)
+- [&lt;CCardText /&gt;](./api/#ccardtext)
+- [&lt;CCardTitle /&gt;](./api/#ccardtitle)
diff --git a/packages/docs/content/components/card/styling.mdx b/packages/docs/content/components/card/styling.mdx
new file mode 100644
index 00000000..e7cae266
--- /dev/null
+++ b/packages/docs/content/components/card/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Card Component Styling
+name: Card Styling
+description: Learn how to customize the React Card component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/card/
+---
+
+### CSS variables
+
+React Card supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_card.scss" capture="card-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-card-cap-bg': '#555',
+  '--cui-card-color': '#efefef',
+}
+
+return <CCard style={customVars}>{/* Card content */}</CCard>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="card-variables"/>
diff --git a/packages/docs/content/components/carousel.mdx b/packages/docs/content/components/carousel.mdx
deleted file mode 100644
index a79a0ed2..00000000
--- a/packages/docs/content/components/carousel.mdx
+++ /dev/null
@@ -1,232 +0,0 @@
----
-title: React Carousel Component
-name: Carousel
-description: React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
-menu: Components
-route: /components/carousel
-other_frameworks: carousel
----
-
-import {
-  CCallout,
-  CCarousel,
-  CCarouselCaption,
-  CCarouselItem,
-  CImage,
-} from '@coreui/react/src/index'
-
-import AngularImg from './../assets/images/angular.jpg'
-import ReactImg from './../assets/images/react.jpg'
-import VueImg from './../assets/images/vue.jpg'
-
-## How it works
-
-The React carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.
-
-In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
-
-## Example
-
-Carousels don't automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they're not explicitly expected. Add and customize as you see fit.
-
-### Slides only
-
-```jsx preview
-<CCarousel>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
-  </CCarouselItem>
-</CCarousel>
-```
-
-### With controls
-
-Adding in the previous and next controls by `controls` property.
-
-```jsx preview
-<CCarousel controls>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
-  </CCarouselItem>
-</CCarousel>
-```
-
-### With indicators
-
-You can attach the indicators to the carousel, lengthwise the controls, too.
-
-```jsx preview
-<CCarousel controls indicators>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
-  </CCarouselItem>
-</CCarousel>
-```
-
-### With captions
-
-You can add captions to slides with the `<CCarouselCaption>` element within any `<CCarouselItem>`. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/4.0/utilities/display). We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.
-
-<Example>
-  <CCarousel controls indicators>
-    <CCarouselItem>
-      <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
-      <CCarouselCaption className="d-none d-md-block">
-        <h5>First slide label</h5>
-        <p>Some representative placeholder content for the first slide.</p>
-      </CCarouselCaption>
-    </CCarouselItem>
-    <CCarouselItem>
-      <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
-      <CCarouselCaption className="d-none d-md-block">
-        <h5>Second slide label</h5>
-        <p>Some representative placeholder content for the first slide.</p>
-      </CCarouselCaption>
-    </CCarouselItem>
-    <CCarouselItem>
-      <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
-      <CCarouselCaption className="d-none d-md-block">
-        <h5>Third slide label</h5>
-        <p>Some representative placeholder content for the first slide.</p>
-      </CCarouselCaption>
-    </CCarouselItem>
-  </CCarousel>
-</Example>
-
-```jsx
-<CCarousel controls indicators>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
-    <CCarouselCaption className="d-none d-md-block">
-      <h5>First slide label</h5>
-      <p>Some representative placeholder content for the first slide.</p>
-    </CCarouselCaption>
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
-    <CCarouselCaption className="d-none d-md-block">
-      <h5>Second slide label</h5>
-      <p>Some representative placeholder content for the first slide.</p>
-    </CCarouselCaption>
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
-    <CCarouselCaption className="d-none d-md-block">
-      <h5>Third slide label</h5>
-      <p>Some representative placeholder content for the first slide.</p>
-    </CCarouselCaption>
-  </CCarouselItem>
-</CCarousel>
-```
-
-### Crossfade
-
-Add `transition="crossfade"` to your carousel to animate slides with a fade transition instead of a slide.
-
-```jsx preview
-<CCarousel controls transition="crossfade">
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
-  </CCarouselItem>
-</CCarousel>
-```
-
-## Dark variant
-
-Add `dark` property to the `CCarousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
-
-<Example>
-  <CCarousel controls indicators dark>
-    <CCarouselItem>
-      <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
-      <CCarouselCaption className="d-none d-md-block">
-        <h5>First slide label</h5>
-        <p>Some representative placeholder content for the first slide.</p>
-      </CCarouselCaption>
-    </CCarouselItem>
-    <CCarouselItem>
-      <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
-      <CCarouselCaption className="d-none d-md-block">
-        <h5>Second slide label</h5>
-        <p>Some representative placeholder content for the first slide.</p>
-      </CCarouselCaption>
-    </CCarouselItem>
-    <CCarouselItem>
-      <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
-      <CCarouselCaption className="d-none d-md-block">
-        <h5>Third slide label</h5>
-        <p>Some representative placeholder content for the first slide.</p>
-      </CCarouselCaption>
-    </CCarouselItem>
-  </CCarousel>
-</Example>
-
-```jsx
-<CCarousel controls indicators dark>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={ReactImg} alt="slide 1" />
-    <CCarouselCaption className="d-none d-md-block">
-      <h5>First slide label</h5>
-      <p>Some representative placeholder content for the first slide.</p>
-    </CCarouselCaption>
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={VueImg} alt="slide 2" />
-    <CCarouselCaption className="d-none d-md-block">
-      <h5>Second slide label</h5>
-      <p>Some representative placeholder content for the first slide.</p>
-    </CCarouselCaption>
-  </CCarouselItem>
-  <CCarouselItem>
-    <CImage className="d-block w-100" src={AngularImg} alt="slide 3" />
-    <CCarouselCaption className="d-none d-md-block">
-      <h5>Third slide label</h5>
-      <p>Some representative placeholder content for the first slide.</p>
-    </CCarouselCaption>
-  </CCarouselItem>
-</CCarousel>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="carousel-variables"/>
-
-## API
-
-### CCarousel
-
-`markdown:CCarousel.api.mdx`
-
-### CCarouselCaption
-
-`markdown:CCarouselCaption.api.mdx`
-
-### CCarouselItem
-
-`markdown:CCarouselItem.api.mdx`
diff --git a/packages/docs/content/components/carousel/api.mdx b/packages/docs/content/components/carousel/api.mdx
new file mode 100644
index 00000000..b1d8ffb5
--- /dev/null
+++ b/packages/docs/content/components/carousel/api.mdx
@@ -0,0 +1,22 @@
+---
+title: React Carousel Component API
+name: Carousel API
+description: Explore the API reference for the React Carousel component and discover how to effectively utilize its props for customization.
+route: /components/carousel/
+---
+
+import CCarouselAPI from '../../api/CCarousel.api.mdx'
+import CCarouselCaptionAPI from '../../api/CCarouselCaption.api.mdx'
+import CCarouselItemAPI from '../../api/CCarouselItem.api.mdx'
+
+## CCarousel
+
+<CCarouselAPI />
+
+## CCarouselCaption
+
+<CCarouselCaptionAPI />
+
+## CCarouselItem
+
+<CCarouselItemAPI />
diff --git a/packages/docs/content/components/carousel/bootstrap.mdx b/packages/docs/content/components/carousel/bootstrap.mdx
new file mode 100644
index 00000000..f3e5167c
--- /dev/null
+++ b/packages/docs/content/components/carousel/bootstrap.mdx
@@ -0,0 +1,59 @@
+---
+title: React Bootstrap Carousel Component
+name: Carousel with Bootstrap Styling
+description: Discover how to use the React Bootstrap Carousel component from CoreUI to build responsive, customizable image and content sliders with indicators, captions, and transitions.
+route: /components/carousel/
+bootstrap_component: true
+---
+
+## How the React Bootstrap Carousel component works
+
+The React Bootstrap Carousel component is a responsive slideshow for cycling through a set of images, text, or custom HTML content. It supports controls, indicators, captions, transitions, and responsive behavior out of the box.
+
+The component also supports the [Page Visibility API](https://www.w3.org/TR/page-visibility/), ensuring slides don’t transition when the browser tab is inactive.
+
+## React Bootstrap Carousel examples
+
+### Slides only
+
+Basic React Bootstrap Carousel with no controls or indicators.
+
+<ExampleSnippet className="theme-bootstrap" component="CarouselSlidesOnlyExample" componentName="React Bootstrap Carousel" />
+
+### With controls
+
+Add `controls` prop to include previous/next navigation arrows.
+
+<ExampleSnippet className="theme-bootstrap" component="CarouselWithControlsExample" componentName="React Bootstrap Carousel" />
+
+### With indicators
+
+Include slide indicators alongside the navigation arrows for better user interaction.
+
+<ExampleSnippet className="theme-bootstrap" component="CarouselWithIndicatorsExample" componentName="React Bootstrap Carousel" />
+
+### With captions
+
+Enhance each carousel slide with a caption using the `<CCarouselCaption>` component. Use responsive utility classes like `.d-none` and `.d-md-block` to control visibility across devices.
+
+<ExampleSnippet className="theme-bootstrap" component="CarouselWithCaptionsExample" componentName="React Bootstrap Carousel" />
+
+### Crossfade transition
+
+Apply `transition="crossfade"` to enable a fade animation instead of the default sliding effect.
+
+<ExampleSnippet className="theme-bootstrap" component="CarouselCrossfadeExample" componentName="React Bootstrap Carousel" />
+
+## Dark variant of React Bootstrap Carousel
+
+Use the `dark` prop on `<CCarousel>` to enable dark-themed controls, indicators, and captions. This uses CSS filters and Sass variables to invert styles and maintain readability on dark backgrounds.
+
+<ExampleSnippet className="theme-bootstrap" component="CarouselDarkVariantExample" componentName="React Bootstrap Carousel" />
+
+## API reference
+
+Refer to the API documentation below for all supported props of the React Bootstrap Carousel component:
+
+- [&lt;CCarousel /&gt;](../api/#ccarousel)
+- [&lt;CCarouselCaption /&gt;](../api/#ccarouselcaption)
+- [&lt;CCarouselItem /&gt;](../api/#ccarouselitem)
diff --git a/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx
new file mode 100644
index 00000000..0aea6c9f
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+export const CarouselCrossfadeExample = () => {
+  return (
+    <CCarousel controls transition="crossfade">
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
+      </CCarouselItem>
+    </CCarousel>
+  )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx
new file mode 100644
index 00000000..9740419a
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'
+
+export const CarouselDarkVariantExample = () => {
+  return (
+    <CCarousel controls indicators dark>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
+        <CCarouselCaption className="d-none d-md-block">
+          <h5>First slide label</h5>
+          <p>Some representative placeholder content for the first slide.</p>
+        </CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
+        <CCarouselCaption className="d-none d-md-block">
+          <h5>Second slide label</h5>
+          <p>Some representative placeholder content for the first slide.</p>
+        </CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
+        <CCarouselCaption className="d-none d-md-block">
+          <h5>Third slide label</h5>
+          <p>Some representative placeholder content for the first slide.</p>
+        </CCarouselCaption>
+      </CCarouselItem>
+    </CCarousel>
+  )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx
new file mode 100644
index 00000000..08c7d60c
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+export const CarouselSlidesOnlyExample = () => {
+  return (
+    <CCarousel>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
+      </CCarouselItem>
+    </CCarousel>
+  )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx
new file mode 100644
index 00000000..0f3cf051
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'
+
+export const CarouselWithCaptionsExample = () => {
+  return (
+    <CCarousel controls indicators>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
+        <CCarouselCaption className="d-none d-md-block">
+          <h5>First slide label</h5>
+          <p>Some representative placeholder content for the first slide.</p>
+        </CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
+        <CCarouselCaption className="d-none d-md-block">
+          <h5>Second slide label</h5>
+          <p>Some representative placeholder content for the first slide.</p>
+        </CCarouselCaption>
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
+        <CCarouselCaption className="d-none d-md-block">
+          <h5>Third slide label</h5>
+          <p>Some representative placeholder content for the first slide.</p>
+        </CCarouselCaption>
+      </CCarouselItem>
+    </CCarousel>
+  )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx
new file mode 100644
index 00000000..1448b578
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+export const CarouselWithControlsExample = () => {
+  return (
+    <CCarousel controls>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
+      </CCarouselItem>
+    </CCarousel>
+  )
+}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx
new file mode 100644
index 00000000..5c3e0ee4
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+export const CarouselWithIndicatorsExample = () => {
+  return (
+    <CCarousel controls indicators>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
+      </CCarouselItem>
+      <CCarouselItem>
+        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
+      </CCarouselItem>
+    </CCarousel>
+  )
+}
diff --git a/packages/docs/content/components/carousel/index.mdx b/packages/docs/content/components/carousel/index.mdx
new file mode 100644
index 00000000..5335f259
--- /dev/null
+++ b/packages/docs/content/components/carousel/index.mdx
@@ -0,0 +1,59 @@
+---
+title: React Carousel Component
+name: Carousel
+description: React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
+route: /components/carousel/
+other_frameworks: carousel
+---
+
+## How it works
+
+The React carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.
+
+In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
+
+## Example
+
+Carousels don't automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they're not explicitly expected. Add and customize as you see fit.
+
+### Slides only
+
+<ExampleSnippet component="CarouselSlidesOnlyExample" componentName="React Carousel" />
+
+### With controls
+
+Adding in the previous and next controls by `controls` property.
+
+<ExampleSnippet component="CarouselWithControlsExample" componentName="React Carousel" />
+
+### With indicators
+
+You can attach the indicators to the carousel, lengthwise the controls, too.
+
+<ExampleSnippet component="CarouselWithIndicatorsExample" componentName="React Carousel" />
+
+### With captions
+
+You can add captions to slides with the `<CCarouselCaption>` element within any `<CCarouselItem>`. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/4.0/utilities/display). We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.
+
+<ExampleSnippet component="CarouselWithCaptionsExample" componentName="React Carousel" />
+
+### Crossfade
+
+Add `transition="crossfade"` to your carousel to animate slides with a fade transition instead of a slide.
+
+<ExampleSnippet component="CarouselCrossfadeExample" componentName="React Carousel" />
+
+## Dark variant
+
+Add `dark` property to the `CCarousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
+
+<ExampleSnippet component="CarouselDarkVariantExample" componentName="React Carousel" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CCarousel /&gt;](./api/#ccarousel)
+- [&lt;CCarouselCaption /&gt;](./api/#ccarouselcaption)
+- [&lt;CCarouselItem /&gt;](./api/#ccarouselitem)
diff --git a/packages/docs/content/components/carousel/styling.mdx b/packages/docs/content/components/carousel/styling.mdx
new file mode 100644
index 00000000..4b03faa1
--- /dev/null
+++ b/packages/docs/content/components/carousel/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Carousel Component Styling
+name: Carousel Styling
+description: Learn how to customize the React Carousel component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/carousel/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="carousel-variables" />
diff --git a/packages/docs/content/components/chart.mdx b/packages/docs/content/components/chart.mdx
deleted file mode 100644
index b5e43f03..00000000
--- a/packages/docs/content/components/chart.mdx
+++ /dev/null
@@ -1,847 +0,0 @@
----
-title: React Chart.js Component
-name: Chart
-description: React wrapper for Chart.js 4.x, the most popular charting library.
-menu: Components
-route: /components/chart
----
-
-import { 
-  CChart,
-  CChartBar,
-  CChartBubble,
-  CChartDoughnut,
-  CChartLine,
-  CChartPolarArea,
-  CChartRadar,
-  CChartScatter 
-} from '@coreui/react-chartjs'
-
-import { useEffect, useRef, useState } from 'react'
-import { getStyle } from '@coreui/utils'
-
-## Installation
-
-If you want to use our Chart.js React wrapper you have to install an additional package.
-
-### Npm
-
-```bash
-npm install @coreui/react-chartjs
-```
-
-### Yarn
-
-```bash
-yarn add @coreui/react-chartjs
-```
-
-## Chart Types
-
-### Line Chart
-
-A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. 
-[Line Chart properties](https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties)
-
-export const LineChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
-  return (
-    <CChart
-      ref={chartRef}
-      type="line" 
-      data={{
-        labels: ["January", "February", "March", "April", "May", "June", "July"],
-        datasets: [
-          {
-            label: "My First dataset",
-            backgroundColor: "rgba(220, 220, 220, 0.2)",
-            borderColor: "rgba(220, 220, 220, 1)",
-            pointBackgroundColor: "rgba(220, 220, 220, 1)",
-            pointBorderColor: "#fff",
-            data: [40, 20, 12, 39, 10, 40, 39, 80, 40]
-          },
-          {
-            label: "My Second dataset",
-            backgroundColor: "rgba(151, 187, 205, 0.2)",
-            borderColor: "rgba(151, 187, 205, 1)",
-            pointBackgroundColor: "rgba(151, 187, 205, 1)",
-            pointBorderColor: "#fff",
-            data: [50, 12, 28, 29, 7, 25, 12, 70, 60]
-          },
-        ],
-      }}
-      options={{
-        plugins: {
-          legend: {
-            labels: {
-              color: getStyle('--cui-body-color'),
-            }
-          }
-        },
-        scales: {
-          x: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-          },
-          y: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-          },
-        },
-      }}
-    />
-  )
-}
-
-<Example>
-  <LineChartExample />
-</Example>
-
-
-```jsx
-<CChart
-  type="line" 
-  data={{
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "My First dataset",
-        backgroundColor: "rgba(220, 220, 220, 0.2)",
-        borderColor: "rgba(220, 220, 220, 1)",
-        pointBackgroundColor: "rgba(220, 220, 220, 1)",
-        pointBorderColor: "#fff",
-        data: [40, 20, 12, 39, 10, 40, 39, 80, 40]
-      },
-      {
-        label: "My Second dataset",
-        backgroundColor: "rgba(151, 187, 205, 0.2)",
-        borderColor: "rgba(151, 187, 205, 1)",
-        pointBackgroundColor: "rgba(151, 187, 205, 1)",
-        pointBorderColor: "#fff",
-        data: [50, 12, 28, 29, 7, 25, 12, 70, 60]
-      },
-    ],
-  }}
-  options={{
-    plugins: {
-      legend: {
-        labels: {
-          color: getStyle('--cui-body-color'),
-        }
-      }
-    },
-    scales: {
-      x: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-      },
-      y: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-      },
-    },
-  }}
-/>
-```
-
-### Bar Chart
-
-A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. [Bar Chart properties](https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties)
-
-export const BarChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
-  return (
-    <CChart
-      ref={chartRef}
-      type="bar"
-      data={{
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [
-          {
-            label: 'GitHub Commits',
-            backgroundColor: '#f87979',
-            data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
-          },
-        ],
-      }}
-      labels="months"
-      options={{
-        plugins: {
-          legend: {
-            labels: {
-              color: getStyle('--cui-body-color'),
-            }
-          }
-        },
-        scales: {
-          x: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-          },
-          y: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-          },
-        },
-      }}
-    />
-  )
-}
-
-<Example>
-  <BarChartExample />
-</Example>
-
-```jsx
-<CChart
-  type="bar"
-  data={{
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-    datasets: [
-      {
-        label: 'GitHub Commits',
-        backgroundColor: '#f87979',
-        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
-      },
-    ],
-  }}
-  labels="months"
-  options={{
-    plugins: {
-      legend: {
-        labels: {
-          color: getStyle('--cui-body-color'),
-        }
-      }
-    },
-    scales: {
-      x: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-      },
-      y: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-      },
-    },
-  }}
-/>
-```
-
-### Radar Chart
-
-A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. [Radar Chart properties](https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties)
-
-export const RadarChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.r.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
-  return (
-    <CChart
-      ref={chartRef}
-      type="radar"
-      data={{
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
-        datasets: [
-          {
-            label: 'My First dataset',
-            backgroundColor: 'rgba(220, 220, 220, 0.2)',
-            borderColor: 'rgba(220, 220, 220, 1)',
-            pointBackgroundColor: 'rgba(220, 220, 220, 1)',
-            pointBorderColor: '#fff',
-            pointHighlightFill: '#fff',
-            pointHighlightStroke: 'rgba(220, 220, 220, 1)',
-            data: [65, 59, 90, 81, 56, 55, 40],
-          },
-          {
-            label: 'My Second dataset',
-            backgroundColor: 'rgba(151, 187, 205, 0.2)',
-            borderColor: 'rgba(151, 187, 205, 1)',
-            pointBackgroundColor: 'rgba(151, 187, 205, 1)',
-            pointBorderColor: '#fff',
-            pointHighlightFill: '#fff',
-            pointHighlightStroke: 'rgba(151, 187, 205, 1)',
-            data: [28, 48, 40, 19, 96, 27, 100],
-          },
-        ],
-      }}
-      options={{
-        plugins: {
-          legend: {
-            labels: {
-              color: getStyle('--cui-body-color'),
-            }
-          }
-        },
-        scales: {
-          r: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-          },
-        },
-      }}
-    />
-  )
-}
-
-<Example>
-  <RadarChartExample />
-</Example>
-
-```jsx
-<CChart 
-  type="radar"
-  data={{
-    labels: [
-      'Eating',
-      'Drinking',
-      'Sleeping',
-      'Designing',
-      'Coding',
-      'Cycling',
-      'Running',
-    ],
-    datasets: [
-      {
-        label: 'My First dataset',
-        backgroundColor: 'rgba(220, 220, 220, 0.2)',
-        borderColor: 'rgba(220, 220, 220, 1)',
-        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
-        pointBorderColor: '#fff',
-        pointHighlightFill: '#fff',
-        pointHighlightStroke: 'rgba(220, 220, 220, 1)',
-        data: [65, 59, 90, 81, 56, 55, 40],
-      },
-      {
-        label: 'My Second dataset',
-        backgroundColor: 'rgba(151, 187, 205, 0.2)',
-        borderColor: 'rgba(151, 187, 205, 1)',
-        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
-        pointBorderColor: '#fff',
-        pointHighlightFill: '#fff',
-        pointHighlightStroke: 'rgba(151, 187, 205, 1)',
-        data: [28, 48, 40, 19, 96, 27, 100],
-      },
-    ],
-  }}
-  options={{
-    plugins: {
-      legend: {
-        labels: {
-          color: getStyle('--cui-body-color'),
-        }
-      }
-    },
-    scales: {
-      r: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-      },
-    },
-  }}
-/>
-```
-
-### Doughnut and Pie Charts
-
-Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. [Doughnut and Pie Charts properties](https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties)
-
-export const DoughnutAndPieExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
-  return (
-    <CChart
-      ref={chartRef}
-      type="doughnut"
-      data={{
-        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-        datasets: [
-          {
-            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-            data: [40, 20, 80, 10],
-          },
-        ],
-      }}
-      options={{
-        plugins: {
-          legend: {
-            labels: {
-              color: getStyle('--cui-body-color'),
-            }
-          }
-        },
-      }}
-    />
-  )
-}
-
-<Example>
-  <DoughnutAndPieExample />
-</Example>
-
-```jsx
-<CChart
-  type="doughnut"
-  data={{
-    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-    datasets: [
-      {
-        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-        data: [40, 20, 80, 10],
-      },
-    ],
-  }}
-  options={{
-    plugins: {
-      legend: {
-        labels: {
-          color: getStyle('--cui-body-color'),
-        }
-      }
-    },
-  }}
-/>
-```
-
-### Polar Area Chart
-
-Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. [Polar Area Chart properties](https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties)
-
-export const PolarAreaExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
-  return (
-    <CChart
-      ref={chartRef}
-      type="polarArea"
-      data={{
-        labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
-        datasets: [
-          {
-            data: [11, 16, 7, 3, 14],
-            backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
-          },
-        ],
-      }}
-      options={{
-        plugins: {
-          legend: {
-            labels: {
-              color: getStyle('--cui-body-color'),
-            }
-          }
-        },
-        scales: {
-          r: {
-            grid: {
-              color: getStyle('--cui-border-color'),
-            },
-          }
-        }
-      }}
-    />
-  )
-}
-
-<Example>
-  <PolarAreaExample />
-</Example>
-
-```jsx
-<CChart
-  type="polarArea"
-  data={{
-    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
-    datasets: [
-      {
-        data: [11, 16, 7, 3, 14],
-        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
-      },
-    ],
-  }}
-  options={{
-    plugins: {
-      legend: {
-        labels: {
-          color: getStyle('--cui-body-color'),
-        }
-      }
-    },
-    scales: {
-      r: {
-        grid: {
-          color: getStyle('--cui-border-color'),
-        },
-      }
-    }
-  }}
-/>
-```
-
-### Bubble Chart
-
-A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Bubble Chart properties](https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties)
-
-export const BubbleChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
-  return (
-    <CChart
-      ref={chartRef}
-      type="bubble"
-      data={{
-        datasets: [{
-          label: 'First Dataset',
-          data: [{
-            x: 20,
-            y: 30,
-            r: 15
-          }, {
-            x: 40,
-            y: 10,
-            r: 10
-          }],
-          backgroundColor: 'rgb(255, 99, 132)'
-        }]
-      }}
-      options={{
-        plugins: {
-          legend: {
-            labels: {
-              color: getStyle('--cui-body-color'),
-            }
-          }
-        },
-        scales: {
-          x: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-          },
-          y: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-          },
-        },
-      }}
-    />
-  )
-}
-
-<Example>
-  <BubbleChartExample />
-</Example>
-
-```jsx
-<CChart
-  type="bubble"
-  data={{
-    datasets: [{
-      label: 'First Dataset',
-      data: [{
-        x: 20,
-        y: 30,
-        r: 15
-      }, {
-        x: 40,
-        y: 10,
-        r: 10
-      }],
-      backgroundColor: 'rgb(255, 99, 132)'
-    }]
-  }}
-  options={{
-    plugins: {
-      legend: {
-        labels: {
-          color: getStyle('--cui-body-color'),
-        }
-      }
-    },
-    scales: {
-      x: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-      },
-      y: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-      },
-    },
-  }}
-/>
-```
-
-### Scatter Chart
-
-A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Scatter Chart properties](https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties)
-
-export const ScatterChartExample = () => {
-  const chartRef = useRef()
-
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (chartRef.current) {
-        chartRef.current.options.plugins.legend.labels.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
-        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
-        chartRef.current.update()
-      }
-    })
-  }, [chartRef])
-
-  return (
-    <CChart
-      ref={chartRef}
-      type="scatter"
-      data={{
-        datasets: [{
-          label: 'Scatter Dataset',
-          data: [{
-            x: -10,
-            y: 0
-          }, {
-            x: 0,
-            y: 10
-          }, {
-            x: 10,
-            y: 5
-          }, {
-            x: 0.5,
-            y: 5.5
-          }],
-          backgroundColor: 'rgb(255, 99, 132)'
-        }],
-      }}
-      options={{
-        plugins: {
-          legend: {
-            labels: {
-              color: getStyle('--cui-body-color'),
-            }
-          }
-        },
-        scales: {
-          x: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            position: 'bottom',
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-            type: 'linear',
-          },
-          y: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            ticks: {
-              color: getStyle('--cui-body-color'),
-            },
-          },
-        },
-      }}
-    />
-  )
-}
-
-<Example>
-  <ScatterChartExample />
-</Example>
-
-
-```jsx
-<CChart
-  type="scatter"
-  data={{
-    datasets: [{
-      label: 'Scatter Dataset',
-      data: [{
-        x: -10,
-        y: 0
-      }, {
-        x: 0,
-        y: 10
-      }, {
-        x: 10,
-        y: 5
-      }, {
-        x: 0.5,
-        y: 5.5
-      }],
-      backgroundColor: 'rgb(255, 99, 132)'
-    }],
-  }}
-  options={{
-    plugins: {
-      legend: {
-        labels: {
-          color: getStyle('--cui-body-color'),
-        }
-      }
-    },
-    scales: {
-      x: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        position: 'bottom',
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-        type: 'linear',
-      },
-      y: {
-        grid: {
-          color: getStyle('--cui-border-color-translucent'),
-        },
-        ticks: {
-          color: getStyle('--cui-body-color'),
-        },
-      },
-    },
-  }}
-/>
-```
-
-## API
-
-### CChart
-
-`markdown:CChart.api.mdx`
\ No newline at end of file
diff --git a/packages/docs/content/components/chart/api.mdx b/packages/docs/content/components/chart/api.mdx
new file mode 100644
index 00000000..ad211b14
--- /dev/null
+++ b/packages/docs/content/components/chart/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Chart.js Component API
+name: Chart.js API
+description: Explore the API reference for the React Chart.js component and discover how to effectively utilize its props for customization.
+route: /components/chart/
+---
+
+import CChartAPI from '../../api/CChart.api.mdx'
+
+## CChart
+
+<CChartAPI />
diff --git a/packages/docs/content/components/chart/examples/ChartBarExample.jsx b/packages/docs/content/components/chart/examples/ChartBarExample.jsx
new file mode 100644
index 00000000..89417d6a
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartBarExample.jsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartBarExample = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.x) {
+          if (options.scales.x.grid) {
+            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.x.ticks) {
+            options.scales.x.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        if (options.scales?.y) {
+          if (options.scales.y.grid) {
+            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.y.ticks) {
+            options.scales.y.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'], // 9 labels
+    datasets: [
+      {
+        label: 'GitHub Commits',
+        backgroundColor: '#f87979',
+        borderColor: '#f87979',
+        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
+      },
+    ],
+  }
+
+  const options = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        type: 'category',
+      },
+      y: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="bar" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartBarExample.tsx b/packages/docs/content/components/chart/examples/ChartBarExample.tsx
new file mode 100644
index 00000000..9443d6f3
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartBarExample.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartBarExample = () => {
+  const chartRef = useRef<Chart<'bar'> | null>(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.x) {
+          if (options.scales.x.grid) {
+            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.x.ticks) {
+            options.scales.x.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        if (options.scales?.y) {
+          if (options.scales.y.grid) {
+            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.y.ticks) {
+            options.scales.y.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data: ChartData<'bar'> = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'], // 9 labels
+    datasets: [
+      {
+        label: 'GitHub Commits',
+        backgroundColor: '#f87979',
+        borderColor: '#f87979',
+        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
+      },
+    ],
+  }
+
+  const options: ChartOptions<'bar'> = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        type: 'category',
+      },
+      y: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="bar" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartBubbleExample.jsx b/packages/docs/content/components/chart/examples/ChartBubbleExample.jsx
new file mode 100644
index 00000000..105a11b4
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartBubbleExample.jsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartBubbleExample = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.x) {
+          if (options.scales.x.grid) {
+            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.x.ticks) {
+            options.scales.x.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        if (options.scales?.y) {
+          if (options.scales.y.grid) {
+            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.y.ticks) {
+            options.scales.y.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data = {
+    datasets: [
+      {
+        label: 'First Dataset',
+        data: [
+          { x: 20, y: 30, r: 15 },
+          { x: 40, y: 10, r: 10 },
+        ],
+        backgroundColor: 'rgb(255, 99, 132)',
+      },
+    ],
+  }
+
+  const options = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        type: 'linear',
+        position: 'bottom',
+      },
+      y: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="bubble" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartBubbleExample.tsx b/packages/docs/content/components/chart/examples/ChartBubbleExample.tsx
new file mode 100644
index 00000000..d0931e8b
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartBubbleExample.tsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartBubbleExample = () => {
+  const chartRef = useRef<Chart<'bubble'> | null>(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.x) {
+          if (options.scales.x.grid) {
+            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.x.ticks) {
+            options.scales.x.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        if (options.scales?.y) {
+          if (options.scales.y.grid) {
+            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.y.ticks) {
+            options.scales.y.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data: ChartData<'bubble'> = {
+    datasets: [
+      {
+        label: 'First Dataset',
+        data: [
+          { x: 20, y: 30, r: 15 },
+          { x: 40, y: 10, r: 10 },
+        ],
+        backgroundColor: 'rgb(255, 99, 132)',
+      },
+    ],
+  }
+
+  const options: ChartOptions<'bubble'> = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        type: 'linear',
+        position: 'bottom',
+      },
+      y: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="bubble" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx b/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx
new file mode 100644
index 00000000..9a5344de
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx
@@ -0,0 +1,50 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartDoughnutAndPieExample = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data = {
+    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+    datasets: [
+      {
+        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+        data: [40, 20, 80, 10],
+      },
+    ],
+  }
+
+  const options = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+  }
+
+  return <CChart type="doughnut" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx b/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx
new file mode 100644
index 00000000..70bcea01
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartDoughnutAndPieExample = () => {
+  const chartRef = useRef<Chart<'doughnut'> | null>(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data: ChartData<'doughnut'> = {
+    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+    datasets: [
+      {
+        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
+        data: [40, 20, 80, 10],
+      },
+    ],
+  }
+
+  const options: ChartOptions<'doughnut'> = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+  }
+
+  return <CChart type="doughnut" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartLineExample.jsx b/packages/docs/content/components/chart/examples/ChartLineExample.jsx
new file mode 100644
index 00000000..0a369af0
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartLineExample.jsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartLineExample = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.x) {
+          if (options.scales.x.grid) {
+            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.x.ticks) {
+            options.scales.x.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        if (options.scales?.y) {
+          if (options.scales.y.grid) {
+            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.y.ticks) {
+            options.scales.y.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+    datasets: [
+      {
+        label: 'My First dataset',
+        backgroundColor: 'rgba(220, 220, 220, 0.2)',
+        borderColor: 'rgba(220, 220, 220, 1)',
+        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
+        pointBorderColor: '#fff',
+        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
+        fill: true,
+      },
+      {
+        label: 'My Second dataset',
+        backgroundColor: 'rgba(151, 187, 205, 0.2)',
+        borderColor: 'rgba(151, 187, 205, 1)',
+        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
+        pointBorderColor: '#fff',
+        data: [50, 12, 28, 29, 7, 25, 12, 70, 60],
+        fill: true,
+      },
+    ],
+  }
+
+  const options = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        type: 'category',
+      },
+      y: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="line" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartLineExample.tsx b/packages/docs/content/components/chart/examples/ChartLineExample.tsx
new file mode 100644
index 00000000..d5784722
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartLineExample.tsx
@@ -0,0 +1,104 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartLineExample = () => {
+  const chartRef = useRef<Chart<'line'> | null>(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.x) {
+          if (options.scales.x.grid) {
+            options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.x.ticks) {
+            options.scales.x.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        if (options.scales?.y) {
+          if (options.scales.y.grid) {
+            options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.y.ticks) {
+            options.scales.y.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data: ChartData<'line'> = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
+    datasets: [
+      {
+        label: 'My First dataset',
+        backgroundColor: 'rgba(220, 220, 220, 0.2)',
+        borderColor: 'rgba(220, 220, 220, 1)',
+        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
+        pointBorderColor: '#fff',
+        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
+        fill: true,
+      },
+      {
+        label: 'My Second dataset',
+        backgroundColor: 'rgba(151, 187, 205, 0.2)',
+        borderColor: 'rgba(151, 187, 205, 1)',
+        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
+        pointBorderColor: '#fff',
+        data: [50, 12, 28, 29, 7, 25, 12, 70, 60],
+        fill: true,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'line'> = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        type: 'category',
+      },
+      y: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="line" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx b/packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx
new file mode 100644
index 00000000..6c6b4f7b
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx
@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartPolarAreaExample = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.r?.grid) {
+          options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data = {
+    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
+    datasets: [
+      {
+        data: [11, 16, 7, 3, 14],
+        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+      },
+    ],
+  }
+
+  const options = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      r: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        angleLines: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        pointLabels: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="polarArea" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx b/packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx
new file mode 100644
index 00000000..eb3fc974
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartPolarAreaExample = () => {
+  const chartRef = useRef<Chart<'polarArea'> | null>(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.r?.grid) {
+          options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data: ChartData<'polarArea'> = {
+    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
+    datasets: [
+      {
+        data: [11, 16, 7, 3, 14],
+        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+      },
+    ],
+  }
+
+  const options: ChartOptions<'polarArea'> = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      r: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        angleLines: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        pointLabels: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="polarArea" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartRadarExample.jsx b/packages/docs/content/components/chart/examples/ChartRadarExample.jsx
new file mode 100644
index 00000000..e1049440
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartRadarExample.jsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartRadarExample = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.r) {
+          if (options.scales.r.grid) {
+            options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.r.ticks) {
+            options.scales.r.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data = {
+    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+    datasets: [
+      {
+        label: 'My First dataset',
+        backgroundColor: 'rgba(220, 220, 220, 0.2)',
+        borderColor: 'rgba(220, 220, 220, 1)',
+        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
+        data: [65, 59, 90, 81, 56, 55, 40],
+        fill: true,
+      },
+      {
+        label: 'My Second dataset',
+        backgroundColor: 'rgba(151, 187, 205, 0.2)',
+        borderColor: 'rgba(151, 187, 205, 1)',
+        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgba(151, 187, 205, 1)',
+        data: [28, 48, 40, 19, 96, 27, 100],
+        fill: true,
+      },
+    ],
+  }
+
+  const options = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      r: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        angleLines: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        pointLabels: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="radar" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartRadarExample.tsx b/packages/docs/content/components/chart/examples/ChartRadarExample.tsx
new file mode 100644
index 00000000..5a143a21
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartRadarExample.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartRadarExample = () => {
+  const chartRef = useRef<Chart<'radar'> | null>(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales?.r) {
+          if (options.scales.r.grid) {
+            options.scales.r.grid.color = getStyle('--cui-border-color-translucent')
+          }
+          if (options.scales.r.ticks) {
+            options.scales.r.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data: ChartData<'radar'> = {
+    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+    datasets: [
+      {
+        label: 'My First dataset',
+        backgroundColor: 'rgba(220, 220, 220, 0.2)',
+        borderColor: 'rgba(220, 220, 220, 1)',
+        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
+        data: [65, 59, 90, 81, 56, 55, 40],
+        fill: true,
+      },
+      {
+        label: 'My Second dataset',
+        backgroundColor: 'rgba(151, 187, 205, 0.2)',
+        borderColor: 'rgba(151, 187, 205, 1)',
+        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgba(151, 187, 205, 1)',
+        data: [28, 48, 40, 19, 96, 27, 100],
+        fill: true,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'radar'> = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      r: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+        angleLines: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        pointLabels: {
+          color: getStyle('--cui-body-color'),
+        },
+        beginAtZero: true,
+      },
+    },
+  }
+
+  return <CChart type="radar" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartScatterExample.jsx b/packages/docs/content/components/chart/examples/ChartScatterExample.jsx
new file mode 100644
index 00000000..a03f7c9a
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartScatterExample.jsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+
+export const ChartScatterExample = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales) {
+          const xAxis = options.scales.x
+          const yAxis = options.scales.y
+
+          if (xAxis?.grid && xAxis?.ticks) {
+            xAxis.grid.color = getStyle('--cui-border-color-translucent')
+            xAxis.ticks.color = getStyle('--cui-body-color')
+          }
+
+          if (yAxis?.grid && yAxis?.ticks) {
+            yAxis.grid.color = getStyle('--cui-border-color-translucent')
+            yAxis.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data = {
+    datasets: [
+      {
+        label: 'Scatter Dataset',
+        data: [
+          { x: -10, y: 0 },
+          { x: 0, y: 10 },
+          { x: 10, y: 5 },
+          { x: 0.5, y: 5.5 },
+        ],
+        backgroundColor: 'rgb(255, 99, 132)',
+      },
+    ],
+  }
+
+  const options = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      x: {
+        type: 'linear',
+        position: 'bottom',
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+      y: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+  }
+
+  return <CChart type="scatter" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/examples/ChartScatterExample.tsx b/packages/docs/content/components/chart/examples/ChartScatterExample.tsx
new file mode 100644
index 00000000..3e2b20a5
--- /dev/null
+++ b/packages/docs/content/components/chart/examples/ChartScatterExample.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react'
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/react-chartjs'
+import { Chart } from 'chart.js'
+import type { ChartData, ChartOptions } from 'chart.js'
+
+export const ChartScatterExample = () => {
+  const chartRef = useRef<Chart<'scatter'> | null>(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      const chartInstance = chartRef.current
+      if (chartInstance) {
+        const { options } = chartInstance
+        if (options.plugins?.legend?.labels) {
+          options.plugins.legend.labels.color = getStyle('--cui-body-color')
+        }
+
+        if (options.scales) {
+          const xAxis = options.scales.x
+          const yAxis = options.scales.y
+
+          if (xAxis?.grid && xAxis?.ticks) {
+            xAxis.grid.color = getStyle('--cui-border-color-translucent')
+            xAxis.ticks.color = getStyle('--cui-body-color')
+          }
+
+          if (yAxis?.grid && yAxis?.ticks) {
+            yAxis.grid.color = getStyle('--cui-border-color-translucent')
+            yAxis.ticks.color = getStyle('--cui-body-color')
+          }
+        }
+
+        chartInstance.update()
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+
+    return () => {
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+    }
+  }, [])
+
+  const data: ChartData<'line'> = {
+    datasets: [
+      {
+        label: 'Scatter Dataset',
+        data: [
+          { x: -10, y: 0 },
+          { x: 0, y: 10 },
+          { x: 10, y: 5 },
+          { x: 0.5, y: 5.5 },
+        ],
+        backgroundColor: 'rgb(255, 99, 132)',
+      },
+    ],
+  }
+
+  const options: ChartOptions<'scatter'> = {
+    plugins: {
+      legend: {
+        labels: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+    scales: {
+      x: {
+        type: 'linear',
+        position: 'bottom',
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+      y: {
+        grid: {
+          color: getStyle('--cui-border-color-translucent'),
+        },
+        ticks: {
+          color: getStyle('--cui-body-color'),
+        },
+      },
+    },
+  }
+
+  return <CChart type="scatter" data={data} options={options} ref={chartRef} />
+}
diff --git a/packages/docs/content/components/chart/index.mdx b/packages/docs/content/components/chart/index.mdx
new file mode 100644
index 00000000..989a30d4
--- /dev/null
+++ b/packages/docs/content/components/chart/index.mdx
@@ -0,0 +1,73 @@
+---
+title: React Chart.js Component
+name: Chart
+description: React wrapper for Chart.js 4.x, the most popular charting library.
+route: /components/chart/
+---
+
+## Installation
+
+If you want to use our Chart.js React wrapper you have to install an additional package.
+
+### Npm
+
+```bash
+npm install @coreui/react-chartjs
+```
+
+### Yarn
+
+```bash
+yarn add @coreui/react-chartjs
+```
+
+## Chart Types
+
+### Line Chart
+
+A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
+[Line Chart properties](https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties)
+
+<ExampleSnippet component="ChartLineExample" componentName="React Chart" />
+
+### Bar Chart
+
+A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. [Bar Chart properties](https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties)
+
+<ExampleSnippet component="ChartBarExample" componentName="React Chart" />
+
+### Radar Chart
+
+A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. [Radar Chart properties](https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties)
+
+<ExampleSnippet component="ChartRadarExample" componentName="React Chart" />
+
+### Doughnut and Pie Charts
+
+Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. [Doughnut and Pie Charts properties](https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties)
+
+<ExampleSnippet component="ChartDoughnutAndPieExample" componentName="React Chart" />
+
+### Polar Area Chart
+
+Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. [Polar Area Chart properties](https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties)
+
+<ExampleSnippet component="ChartPolarAreaExample" componentName="React Chart" />
+
+### Bubble Chart
+
+A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Bubble Chart properties](https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties)
+
+<ExampleSnippet component="ChartBubbleExample" componentName="React Chart" />
+
+### Scatter Chart
+
+A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. [Scatter Chart properties](https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties)
+
+<ExampleSnippet component="ChartScatterExample" componentName="React Chart" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CChart /&gt;](./api/#cchart)
diff --git a/packages/docs/content/components/close-button/api.mdx b/packages/docs/content/components/close-button/api.mdx
new file mode 100644
index 00000000..550b5888
--- /dev/null
+++ b/packages/docs/content/components/close-button/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Close Button Component API
+name: Close Button API
+description: Explore the API reference for the React Close Button component and discover how to effectively utilize its props for customization.
+route: /components/close-button/
+---
+
+import CCloseButtonAPI from '../../api/CCloseButton.api.mdx'
+
+## CCloseButton
+
+<CCloseButtonAPI />
diff --git a/packages/docs/content/components/close-button/bootstrap.mdx b/packages/docs/content/components/close-button/bootstrap.mdx
new file mode 100644
index 00000000..d2cfa23f
--- /dev/null
+++ b/packages/docs/content/components/close-button/bootstrap.mdx
@@ -0,0 +1,31 @@
+---
+title: React Bootstrap Close Button Component
+name: Close Button with Bootstrap Styling
+description: Learn how to use the React Bootstrap Close Button component from CoreUI to add dismiss functionality to modals, alerts, and other UI elements with accessible and customizable styles.
+route: /components/close-button/
+bootstrap_component: true
+---
+
+## Using the React Bootstrap Close Button component
+
+The React Bootstrap Close Button component provides a simple and accessible way to dismiss modals, alerts, or other interface elements. It's fully customizable and built with Bootstrap-compatible styles.
+
+<ExampleSnippet className="theme-bootstrap" component="CloseButtonExample" componentName="React Bootstrap Close Button" />
+
+## Disabled state
+
+React Bootstrap Close Button can be disabled using the `disabled` prop. This changes its `opacity` and applies `pointer-events: none` and `user-select: none` to prevent interactions.
+
+<ExampleSnippet className="theme-bootstrap" component="CloseButtonDisabledExample" componentName="React Bootstrap Close Button" />
+
+## Dark variant
+
+Use the `dark` prop to apply a dark version of the close button. This inverts the icon using the `filter` CSS property for better visibility on dark backgrounds.
+
+<ExampleSnippet className="theme-bootstrap bg-dark" component="CloseButtonDarkExample" componentName="React Bootstrap Close Button" />
+
+## API reference
+
+Check the API documentation below for the full list of props available in the React Bootstrap Close Button component:
+
+- [&lt;CCloseButton /&gt;](../api/#cclosebutton)
diff --git a/packages/docs/content/components/close-button/examples/CloseButtonDarkExample.tsx b/packages/docs/content/components/close-button/examples/CloseButtonDarkExample.tsx
new file mode 100644
index 00000000..98cdac72
--- /dev/null
+++ b/packages/docs/content/components/close-button/examples/CloseButtonDarkExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CCloseButton } from '@coreui/react'
+
+export const CloseButtonDarkExample = () => {
+  return (
+    <>
+      <CCloseButton dark />
+      <CCloseButton dark disabled />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/close-button/examples/CloseButtonDisabledExample.tsx b/packages/docs/content/components/close-button/examples/CloseButtonDisabledExample.tsx
new file mode 100644
index 00000000..25e647d2
--- /dev/null
+++ b/packages/docs/content/components/close-button/examples/CloseButtonDisabledExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CCloseButton } from '@coreui/react'
+
+export const CloseButtonDisabledExample = () => {
+  return <CCloseButton disabled />
+}
diff --git a/packages/docs/content/components/close-button/examples/CloseButtonExample.tsx b/packages/docs/content/components/close-button/examples/CloseButtonExample.tsx
new file mode 100644
index 00000000..a36940f0
--- /dev/null
+++ b/packages/docs/content/components/close-button/examples/CloseButtonExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CCloseButton } from '@coreui/react'
+
+export const CloseButtonExample = () => {
+  return <CCloseButton />
+}
diff --git a/packages/docs/content/components/close-button.mdx b/packages/docs/content/components/close-button/index.mdx
similarity index 61%
rename from packages/docs/content/components/close-button.mdx
rename to packages/docs/content/components/close-button/index.mdx
index 98fa69b8..7e2ea6bb 100644
--- a/packages/docs/content/components/close-button.mdx
+++ b/packages/docs/content/components/close-button/index.mdx
@@ -2,40 +2,30 @@
 title: React Close Button Component
 name: Close Button
 description: A generic close button component for dismissing content like modals and alerts.
-menu: Components
-route: /components/close-button
+route: /components/close-button/
 other_frameworks: close-button
 ---
 
-import { CCloseButton } from '@coreui/react/src/index'
-
 ## Example
 
 Provide an option to dismiss or close a component with `<CCloseButton>`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`.
 
-```jsx preview
-<CCloseButton />
-```
+<ExampleSnippet component="CloseButtonExample" componentName="React Close Button" />
 
 ## Disabled state
 
 Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
 
-```jsx preview
-<CCloseButton disabled />
-```
+<ExampleSnippet component="CloseButtonDisabledExample" componentName="React Close Button" />
 
 ## Dark variant
 
 Add `dark` boolean property to the `<CCloseButton>`, to invert the close button. This uses the filter property to invert the background-image without overriding its value.
 
-```jsx preview className="bg-dark border-0"
-<CCloseButton dark />
-<CCloseButton dark disabled />
-```
+<ExampleSnippet className="bg-dark" component="CloseButtonDarkExample" componentName="React Close Button" />
 
 ## API
 
-### CCloseButton
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
 
-`markdown:CCloseButton.api.mdx`
+- [&lt;CCloseButton /&gt;](./api/#cclosebutton)
diff --git a/packages/docs/content/components/collapse.mdx b/packages/docs/content/components/collapse.mdx
deleted file mode 100644
index ed1dff62..00000000
--- a/packages/docs/content/components/collapse.mdx
+++ /dev/null
@@ -1,263 +0,0 @@
----
-title: React Collapse Component
-name: Collapse
-description: React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
-menu: Components
-route: /components/collapse
-other_frameworks: collapse
----
-
-import { useState } from 'react'
-
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCol,
-  CCollapse,
-  CContainer,
-  CRow,
-} from '@coreui/react/src/index'
-
-## How it works
-
-The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
-
-## Example
-
-You can use a link or a button component.
-
-export const BasicExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton
-        color="primary"
-        href="#"
-        onClick={(event) => {
-          event.preventDefault()
-          setVisible(!visible)
-        }}
-      >
-        Link
-      </CButton>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>
-        Button
-      </CButton>
-      <CCollapse visible={visible}>
-        <CCard className="mt-3">
-          <CCardBody>
-            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
-            squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
-            sapiente ea proident.
-          </CCardBody>
-        </CCard>
-      </CCollapse>
-    </>
-  )
-}
-
-<Example>
-  <BasicExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton
-      color="primary"
-      href="#"
-      onClick={(event) => {
-        event.preventDefault()
-        setVisible(!visible)
-      }}
-    >
-      Link
-    </CButton>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>
-      Button
-    </CButton>
-    <CCollapse visible={visible}>
-      <CCard className="mt-3">
-        <CCardBody>
-          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
-          squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
-          sapiente ea proident.
-        </CCardBody>
-      </CCard>
-    </CCollapse>
-  </>
-)
-```
-
-## Horizontal
-
-The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element.
-
-export const HorizontalExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton
-        color="primary"
-        className="mb-3"
-        onClick={() => setVisible(!visible)}
-        aria-expanded={visible}
-        aria-controls="collapseWidthExample"
-      >
-        Button
-      </CButton>
-      <div style={{ minHeight: '120px' }}>
-        <CCollapse id="collapseWidthExample" horizontal visible={visible}>
-          <CCard style={{ width: '300px' }}>
-            <CCardBody>
-              This is some placeholder content for a horizontal collapse. It's hidden by default and
-              shown when triggered.
-            </CCardBody>
-          </CCard>
-        </CCollapse>
-      </div>
-    </>
-  )
-}
-
-<Example>
-  <HorizontalExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton
-      className="mb-3"
-      onClick={() => setVisible(!visible)}
-      aria-expanded={visible}
-      aria-controls="collapseWidthExample"
-    >
-      Button
-    </CButton>
-    <div style={{ minHeight: '120px' }}>
-      <CCollapse id="collapseWidthExample" horizontal visible={visible}>
-        <CCard style={{ width: '300px' }}>
-          <CCardBody>
-            This is some placeholder content for a horizontal collapse. It's hidden by default and
-            shown when triggered.
-          </CCardBody>
-        </CCard>
-      </CCollapse>
-    </div>
-  </>
-)
-```
-
-## Multiple targets
-
-A `<CButton>` can show and hide multiple elements.
-
-export const MultipleTargetsExample = () => {
-  const [visibleA, setVisibleA] = useState(false)
-  const [visibleB, setVisibleB] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
-        Toggle first element
-      </CButton>
-      <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
-        Toggle second element
-      </CButton>
-      <CButton
-        color="primary"
-        onClick={() => {
-          setVisibleA(!visibleA)
-          setVisibleB(!visibleB)
-        }}
-      >
-        Toggle both elements
-      </CButton>
-      <CRow>
-        <CCol xs={6}>
-          <CCollapse visible={visibleA}>
-            <CCard className="mt-3">
-              <CCardBody>
-                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
-                cred nesciunt sapiente ea proident.
-              </CCardBody>
-            </CCard>
-          </CCollapse>
-        </CCol>
-        <CCol xs={6}>
-          <CCollapse visible={visibleB}>
-            <CCard className="mt-3">
-              <CCardBody>
-                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
-                cred nesciunt sapiente ea proident.
-              </CCardBody>
-            </CCard>
-          </CCollapse>
-        </CCol>
-      </CRow>
-    </>
-  )
-}
-
-<Example>
-  <MultipleTargetsExample />
-</Example>
-
-```jsx
-const [visibleA, setVisibleA] = useState(false)
-const [visibleB, setVisibleB] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
-      Toggle first element
-    </CButton>
-    <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
-      Toggle second element
-    </CButton>
-    <CButton
-      color="primary"
-      onClick={() => {
-        setVisibleA(!visibleA)
-        setVisibleB(!visibleB)
-      }}
-    >
-      Toggle both elements
-    </CButton>
-    <CRow>
-      <CCol xs={6}>
-        <CCollapse visible={visibleA}>
-          <CCard className="mt-3">
-            <CCardBody>
-              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
-              ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
-              sapiente ea proident.
-            </CCardBody>
-          </CCard>
-        </CCollapse>
-      </CCol>
-      <CCol xs={6}>
-        <CCollapse visible={visibleB}>
-          <CCard className="mt-3">
-            <CCardBody>
-              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
-              ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
-              sapiente ea proident.
-            </CCardBody>
-          </CCard>
-        </CCollapse>
-      </CCol>
-    </CRow>
-  </>
-)
-```
-
-## API
-
-### CCollapse
-
-`markdown:CCollapse.api.mdx`
diff --git a/packages/docs/content/components/collapse/api.mdx b/packages/docs/content/components/collapse/api.mdx
new file mode 100644
index 00000000..385857f8
--- /dev/null
+++ b/packages/docs/content/components/collapse/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Collapse Component API
+name: Collapse API
+description: Explore the API reference for the React Collapse component and discover how to effectively utilize its props for customization.
+route: /components/collapse/
+---
+
+import CCollapseAPI from '../../api/CCollapse.api.mdx'
+
+## CCollapse
+
+<CCollapseAPI />
diff --git a/packages/docs/content/components/collapse/bootstrap.mdx b/packages/docs/content/components/collapse/bootstrap.mdx
new file mode 100644
index 00000000..4857187e
--- /dev/null
+++ b/packages/docs/content/components/collapse/bootstrap.mdx
@@ -0,0 +1,37 @@
+---
+title: React Bootstrap Collapse Component
+name: Collapse with Bootstrap Styling
+description: Learn how to use the React Bootstrap Collapse component from CoreUI to toggle visibility of content panels using animations and Bootstrap-compatible transitions.
+route: /components/collapse/
+bootstrap_component: true
+---
+
+## How the React Bootstrap Collapse component works
+
+The React Bootstrap Collapse component allows you to toggle the visibility of content using animated height or width transitions. It’s perfect for creating expandable sections, FAQs, and collapsible panels with clean and accessible markup.
+
+Triggers such as buttons or anchor elements are connected to collapsible targets. The collapse animation modifies the `height` or `width` property, so padding should not be applied directly to the `.collapse` element.
+
+## React Bootstrap Collapse example
+
+You can trigger collapsible content using a button or a link. Below is a simple example using CoreUI components styled with Bootstrap.
+
+<ExampleSnippet className="theme-bootstrap" component="CollapseExample" componentName="React Bootstrap Collapse" />
+
+## Horizontal React Bootstrap Collapse
+
+Use the `horizontal` prop on the React Bootstrap Collapse component to transition the `width` instead of `height`. Don’t forget to apply a specific width to the immediate child of the collapse element.
+
+<ExampleSnippet className="theme-bootstrap" component="CollapseHorizontalExample" componentName="React Bootstrap Collapse" />
+
+## Multiple collapse targets
+
+React Bootstrap Collapse supports multiple targets toggled by a single trigger. Use a `<CButton>` to show or hide more than one collapsible element at the same time.
+
+<ExampleSnippet className="theme-bootstrap" component="CollapseMultipleTargetsExample" componentName="React Bootstrap Collapse" />
+
+## API reference
+
+Check the API documentation below to explore all available props for the React Bootstrap Collapse component:
+
+- [&lt;CCollapse /&gt;](../api/#ccollapse)
diff --git a/packages/docs/content/components/collapse/examples/CollapseExample.tsx b/packages/docs/content/components/collapse/examples/CollapseExample.tsx
new file mode 100644
index 00000000..ac5d5989
--- /dev/null
+++ b/packages/docs/content/components/collapse/examples/CollapseExample.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'
+
+export const CollapseExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton
+        color="primary"
+        href="#"
+        onClick={(event) => {
+          event.preventDefault()
+          setVisible(!visible)
+        }}
+      >
+        Link
+      </CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Button
+      </CButton>
+      <CCollapse visible={visible}>
+        <CCard className="mt-3">
+          <CCardBody>
+            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
+            squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+            sapiente ea proident.
+          </CCardBody>
+        </CCard>
+      </CCollapse>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx b/packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx
new file mode 100644
index 00000000..5e101f0c
--- /dev/null
+++ b/packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'
+
+export const CollapseHorizontalExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton
+        color="primary"
+        className="mb-3"
+        onClick={() => setVisible(!visible)}
+        aria-expanded={visible}
+        aria-controls="collapseWidthExample"
+      >
+        Button
+      </CButton>
+      <div style={{ minHeight: '120px' }}>
+        <CCollapse id="collapseWidthExample" horizontal visible={visible}>
+          <CCard style={{ width: '300px' }}>
+            <CCardBody>
+              This is some placeholder content for a horizontal collapse. It's hidden by default and
+              shown when triggered.
+            </CCardBody>
+          </CCard>
+        </CCollapse>
+      </div>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx b/packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx
new file mode 100644
index 00000000..63836659
--- /dev/null
+++ b/packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { CButton, CCollapse, CCard, CCardBody, CCol, CRow } from '@coreui/react'
+
+export const CollapseMultipleTargetsExample = () => {
+  const [visibleA, setVisibleA] = useState(false)
+  const [visibleB, setVisibleB] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
+        Toggle first element
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
+        Toggle second element
+      </CButton>
+      <CButton
+        color="primary"
+        onClick={() => {
+          setVisibleA(!visibleA)
+          setVisibleB(!visibleB)
+        }}
+      >
+        Toggle both elements
+      </CButton>
+      <CRow>
+        <CCol xs={6}>
+          <CCollapse visible={visibleA}>
+            <CCard className="mt-3">
+              <CCardBody>
+                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+                cred nesciunt sapiente ea proident.
+              </CCardBody>
+            </CCard>
+          </CCollapse>
+        </CCol>
+        <CCol xs={6}>
+          <CCollapse visible={visibleB}>
+            <CCard className="mt-3">
+              <CCardBody>
+                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+                cred nesciunt sapiente ea proident.
+              </CCardBody>
+            </CCard>
+          </CCollapse>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/collapse/index.mdx b/packages/docs/content/components/collapse/index.mdx
new file mode 100644
index 00000000..abbeab6e
--- /dev/null
+++ b/packages/docs/content/components/collapse/index.mdx
@@ -0,0 +1,35 @@
+---
+title: React Collapse Component
+name: Collapse
+description: React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
+route: /components/collapse/
+other_frameworks: collapse
+---
+
+## How it works
+
+The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
+
+## Example
+
+You can use a link or a button component.
+
+<ExampleSnippet component="CollapseExample" componentName="React Collapse" />
+
+## Horizontal
+
+The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element.
+
+<ExampleSnippet component="CollapseHorizontalExample" componentName="React Collapse" />
+
+## Multiple targets
+
+A `<CButton>` can show and hide multiple elements.
+
+<ExampleSnippet component="CollapseMultipleTargetsExample" componentName="React Collapse" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CCollapse /&gt;](./api/#ccollapse)
diff --git a/packages/docs/content/components/dropdown.mdx b/packages/docs/content/components/dropdown.mdx
deleted file mode 100644
index a2cab611..00000000
--- a/packages/docs/content/components/dropdown.mdx
+++ /dev/null
@@ -1,615 +0,0 @@
----
-title: React Dropdown Component
-name: Dropdown
-description: React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
-menu: Components
-route: /components/dropdown
-other_frameworks: dropdown
----
-
-import {
-  CButton,
-  CButtonGroup,
-  CCollapse,
-  CContainer,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CForm,
-  CFormCheck,
-  CFormInput,
-  CFormLabel,
-  CNavbar,
-  CNavbarBrand,
-  CNavbarNav,
-  CNavbarToggler,
-} from '@coreui/react/src/index'
-
-## Overview
-
-Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
-
-Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
-
-## Examples
-
-Bind the dropdown's toggle and the dropdown menu inside `<CDropdown>`, or different element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your possible requirements.
-
-### Single button
-
-Here's how you can put them to work with either `<button>` elements:
-
-```jsx preview
-<CDropdown>
-  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-And with `<a>` elements:
-
-```jsx preview
-<CDropdown>
-  <CDropdownToggle href="#" color="secondary">Dropdown button</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-The best part is you can do this with any button variant, too:
-
-<Example>
-  <>
-    {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
-      <CDropdown variant="btn-group" key={index}>
-        <CDropdownToggle color={color}>{color}</CDropdownToggle>
-        <CDropdownMenu>
-          <CDropdownItem href="#">Action</CDropdownItem>
-          <CDropdownItem href="#">Another action</CDropdownItem>
-          <CDropdownItem href="#">Something else here</CDropdownItem>
-          <CDropdownDivider />
-          <CDropdownItem href="#">Separated link</CDropdownItem>
-        </CDropdownMenu>
-      </CDropdown>
-    ))}
-  </>
-</Example>
-
-```jsx
-<>
-  {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
-    <CDropdown variant="btn-group" key={index}>
-      <CDropdownToggle color={color}>{color}</CDropdownToggle>
-      <CDropdownMenu>
-        <CDropdownItem href="#">Action</CDropdownItem>
-        <CDropdownItem href="#">Another action</CDropdownItem>
-        <CDropdownItem href="#">Something else here</CDropdownItem>
-        <CDropdownDivider />
-        <CDropdownItem href="#">Separated link</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>
-  ))}
-</>
-```
-
-### Split button
-
-Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop `split` for proper spacing around the dropdown caret.
-
-We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.
-
-<Example>
-  <>
-    {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
-      <CDropdown variant="btn-group" key={index}>
-        <CButton color={color}>{color}</CButton>
-        <CDropdownToggle color={color} split />
-        <CDropdownMenu>
-          <CDropdownItem href="#">Action</CDropdownItem>
-          <CDropdownItem href="#">Another action</CDropdownItem>
-          <CDropdownItem href="#">Something else here</CDropdownItem>
-          <CDropdownDivider />
-          <CDropdownItem href="#">Separated link</CDropdownItem>
-        </CDropdownMenu>
-      </CDropdown>
-    ))}
-  </>
-</Example>
-
-```jsx
-<>
-  {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
-    <CDropdown variant="btn-group" key={index}>
-      <CButton color={color}>{color}</CButton>
-      <CDropdownToggle color={color} split />
-      <CDropdownMenu>
-        <CDropdownItem href="#">Action</CDropdownItem>
-        <CDropdownItem href="#">Another action</CDropdownItem>
-        <CDropdownItem href="#">Something else here</CDropdownItem>
-        <CDropdownDivider />
-        <CDropdownItem href="#">Separated link</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>
-  ))}
-</>
-```
-
-## Sizing
-
-Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
-
-```jsx preview
-  <CDropdown variant="btn-group">
-    <CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-
-  <CDropdown variant="btn-group">
-    <CButton color="secondary" size="lg">Large split button</CButton>
-    <CDropdownToggle color="secondary" size="lg" split/>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-```
-
-```jsx preview
-  <CDropdown variant="btn-group">
-    <CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-
-  <CDropdown variant="btn-group">
-    <CButton color="secondary" size="sm">Small split button</CButton>
-    <CDropdownToggle color="secondary" size="sm"split/>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-```
-
-## Dark dropdowns
-
-Opt into darker dropdowns to match a dark navbar or custom style by set `dark` property. No changes are required to the dropdown items.
-
-```jsx preview
-<CDropdown dark>
-  <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-    <CDropdownDivider />
-    <CDropdownItem href="#">Separated link</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-And putting it to use in a navbar:
-
-```jsx preview
-<CNavbar expand="lg" colorScheme="dark" className="bg-dark">
-  <CContainer fluid>
-    <CNavbarBrand href="#">Navbar</CNavbarBrand>
-    <CNavbarToggler aria-label="Toggle navigation" aria-expanded={true} />
-    <CCollapse className="navbar-collapse" visible={true}>
-      <CNavbarNav>
-        <CDropdown dark as="li" variant="nav-item">
-          <CDropdownToggle color="dark">Dropdown</CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem href="#">Action</CDropdownItem>
-            <CDropdownItem href="#">Another action</CDropdownItem>
-            <CDropdownItem href="#">Something else here</CDropdownItem>
-            <CDropdownDivider />
-            <CDropdownItem href="#">Separated link</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      </CNavbarNav>
-    </CCollapse>
-  </CContainer>
-</CNavbar>
-```
-
-## Directions
-
-<Callout color="info" title="RTL">
-  Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
-</Callout>
-
-### Centered
-
-Make the dropdown menu centered below the toggle by adding `direction="center"` to the `<CDropdown>` component.
-
-```jsx preview
-<CDropdown variant="btn-group" direction="center">
-  <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-    <CDropdownDivider/>
-    <CDropdownItem href="#">Separated link</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-### Dropup
-
-Trigger dropdown menus above elements by adding `direction="dropup"` to the `<CDropdown>` component.
-
-```jsx preview
-  <CDropdown variant="btn-group" direction="dropup">
-    <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-
-  <CDropdown variant="btn-group" direction="dropup">
-    <CButton color="secondary" >Small split button</CButton>
-    <CDropdownToggle color="secondary" split/>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-```
-
-### Dropup centered
-
-Make the dropup menu centered above the toggle by adding `direction="dropup-center"` to the `<CDropdown>` component.
-
-```jsx preview
-<CDropdown variant="btn-group" direction="dropup-center">
-  <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-    <CDropdownDivider/>
-    <CDropdownItem href="#">Separated link</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-### Dropend
-
-Trigger dropdown menus at the right of the elements by adding `direction="dropend"` to the `<CDropdown>` component.
-
-```jsx preview
-  <CDropdown variant="btn-group" direction="dropend">
-    <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-
-  <CDropdown variant="btn-group" direction="dropend">
-    <CButton color="secondary" >Small split button</CButton>
-    <CDropdownToggle color="secondary" split/>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-```
-
-### Dropstart
-
-Trigger dropdown menus at the left of the elements by adding `direction="dropstart"` to the `<CDropdown>` component.
-
-```jsx preview
-  <CDropdown variant="btn-group" direction="dropstart">
-    <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-
-  <CButtonGroup>
-    <CDropdown variant="btn-group" direction="dropstart">
-      <CDropdownToggle color="secondary" split/>
-      <CDropdownMenu>
-        <CDropdownItem href="#">Action</CDropdownItem>
-        <CDropdownItem href="#">Another action</CDropdownItem>
-        <CDropdownItem href="#">Something else here</CDropdownItem>
-        <CDropdownDivider/>
-        <CDropdownItem href="#">Separated link</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>
-    <CButton color="secondary" >Small split button</CButton>
-  </CButtonGroup>
-```
-
-## Menu items
-
-Historically dropdown menu contents _had_ to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
-
-```jsx preview
-<CDropdown>
-  <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem as="button">Action</CDropdownItem>
-    <CDropdownItem as="button">Another action</CDropdownItem>
-    <CDropdownItem as="button">Something else here</CDropdownItem>
-    <CDropdownDivider />
-    <CDropdownItem as="button">Separated link</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-You can also create non-interactive dropdown items with `<CDropdownItemPlain>`.
-
-```jsx preview
-<CDropdownMenu>
-  <CDropdownItemPlain>Dropdown item text</CDropdownItemPlain>
-  <CDropdownItem href="#">Action</CDropdownItem>
-  <CDropdownItem href="#">Another action</CDropdownItem>
-  <CDropdownItem href="#">Something else here</CDropdownItem>
-</CDropdownMenu>
-```
-
-### Active
-
-Set boolean property `active` to **style item as active**.
-
-In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
-
-```jsx preview
-<CDropdownMenu>
-  <CDropdownItem href="#">Regular link</CDropdownItem>
-  <CDropdownItem href="#" active>Active link</CDropdownItem>
-  <CDropdownItem href="#">Another link</CDropdownItem>
-</CDropdownMenu>
-```
-
-### Disabled
-
-Add `disabled` boolean property to items in the dropdown to **style them as disabled**.
-
-In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
-
-```jsx preview
-<CDropdownMenu>
-  <CDropdownItem href="#">Regular link</CDropdownItem>
-  <CDropdownItem href="#" disabled>Disabled link</CDropdownItem>
-  <CDropdownItem href="#">Another link</CDropdownItem>
-</CDropdownMenu>
-```
-
-## Menu alignment
-
-By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `aligment="end"` to right align the dropdown menu.
-
-<Callout color="info">
-  <strong>Heads up!</strong> Dropdowns are positioned thanks to Popper.
-</Callout>
-
-```jsx preview
-<CDropdown alignment="end">
-  <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-    <CDropdownDivider />
-    <CDropdownItem href="#">Separated link</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-### Responsive alignment
-
-If you use responsive alignment, dynamic positioning is disabled.
-
-To align **right** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: end"`.
-
-```jsx preview
-<CDropdown alignment={{ lg: 'end' }}>
-  <CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-    <CDropdownDivider />
-    <CDropdownItem href="#">Separated link</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-To align **left** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: start"`.
-
-```jsx preview
-<CDropdown alignment={{ xs: 'end', lg: 'start' }}>
-  <CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem href="#">Action</CDropdownItem>
-    <CDropdownItem href="#">Another action</CDropdownItem>
-    <CDropdownItem href="#">Something else here</CDropdownItem>
-    <CDropdownDivider />
-    <CDropdownItem href="#">Separated link</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>
-```
-
-## Menu content
-
-### Headers
-
-Add a header to label sections of actions in any dropdown menu.
-
-In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
-
-```jsx preview
-<CDropdownMenu>
-  <CDropdownHeader>Dropdown header</CDropdownHeader>
-  <CDropdownItem href="#">Action</CDropdownItem>
-  <CDropdownItem href="#">Another action</CDropdownItem>
-</CDropdownMenu>
-```
-
-### Dividers
-
-Separate groups of related menu items with a divider.
-
-In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
-
-```jsx preview
-<CDropdownMenu>
-  <CDropdownItem href="#">Action</CDropdownItem>
-  <CDropdownItem href="#">Another action</CDropdownItem>
-  <CDropdownItem href="#">Something else here</CDropdownItem>
-  <CDropdownDivider />
-  <CDropdownItem href="#">Separated link</CDropdownItem>
-</CDropdownMenu>
-```
-
-### Text
-
-Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.
-
-```jsx preview
-<CDropdownMenu className="p-4 text-body-secondary" style={{ maxWidth: '200px' }}>
-  <p>Some example text that's free-flowing within the dropdown menu.</p>
-  <p className="mb-0">And this is more example text.</p>
-</CDropdownMenu>
-```
-
-### Forms
-
-Put a form within a dropdown menu, or make it into a dropdown menu.
-
-```jsx preview
-<CDropdownMenu>
-  <CForm className="px-4 py-4">
-    <div className="mb-3">
-      <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
-      <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
-    </div>
-    <div className="mb-3">
-      <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
-      <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
-    </div>
-    <div className="mb-3">
-      <CFormCheck id="dropdownCheck" label="Remember me" />
-    </div>
-    <CButton color="primary" type="submit">Sign in</CButton>
-  </CForm>
-  <CDropdownDivider />
-  <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
-  <CDropdownItem href="#">Forgot password?</CDropdownItem>
-</CDropdownMenu>
-```
-
-## Customizing
-
-### CSS variables
-
-React dropdowns use local CSS variables on `.dropdown` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_dropdown.scss" capture="dropdown-css-vars"/>
-
-Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
-
-<ScssDocs file="_dropdown.scss" capture="dropdown-dark-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CDropdown style={vars}>...</CDropdown>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="dropdown-variables"/>
-
-Variables for the dark dropdown:
-
-<ScssDocs file="_variables.scss" capture="dropdown-dark-variables"/>
-
-Variables for the CSS-based carets that indicate a dropdown's interactivity:
-
-<ScssDocs file="_variables.scss" capture="caret-variables"/>
-
-## API
-
-### CDropdown
-
-`markdown:CDropdown.api.mdx`
-
-### CDropdownDivider
-
-`markdown:CDropdownDivider.api.mdx`
-
-### CDropdownHeader
-
-`markdown:CDropdownHeader.api.mdx`
-
-### CDropdownItem
-
-`markdown:CDropdownItem.api.mdx`
-
-### CDropdownItemPlain
-
-`markdown:CDropdownItemPlain.api.mdx`
-
-### CDropdownMenu
-
-`markdown:CDropdownMenu.api.mdx`
-
-### CDropdownToggle
-
-`markdown:CDropdownToggle.api.mdx`
diff --git a/packages/docs/content/components/dropdown/api.mdx b/packages/docs/content/components/dropdown/api.mdx
new file mode 100644
index 00000000..bb7cec60
--- /dev/null
+++ b/packages/docs/content/components/dropdown/api.mdx
@@ -0,0 +1,42 @@
+---
+title: React Dropdown Component API
+name: Dropdown API
+description: Explore the API reference for the React Dropdown component and discover how to effectively utilize its props for customization.
+route: /components/dropdown/
+---
+
+import CDropdownAPI from '../../api/CDropdown.api.mdx'
+import CDropdownDividerAPI from '../../api/CDropdownDivider.api.mdx'
+import CDropdownHeaderAPI from '../../api/CDropdownHeader.api.mdx'
+import CDropdownItemAPI from '../../api/CDropdownItem.api.mdx'
+import CDropdownItemPlainAPI from '../../api/CDropdownItemPlain.api.mdx'
+import CDropdownMenuAPI from '../../api/CDropdownMenu.api.mdx'
+import CDropdownToggleAPI from '../../api/CDropdownToggle.api.mdx'
+
+## CDropdown
+
+<CDropdownAPI />
+
+## CDropdownDivider
+
+<CDropdownDividerAPI />
+
+## CDropdownHeader
+
+<CDropdownHeaderAPI />
+
+## CDropdownItem
+
+<CDropdownItemAPI />
+
+## CDropdownItemPlain
+
+<CDropdownItemPlainAPI />
+
+## CDropdownMenu
+
+<CDropdownMenuAPI />
+
+## CDropdownToggle
+
+<CDropdownToggleAPI />
diff --git a/packages/docs/content/components/dropdown/bootstrap.mdx b/packages/docs/content/components/dropdown/bootstrap.mdx
new file mode 100644
index 00000000..e4714bca
--- /dev/null
+++ b/packages/docs/content/components/dropdown/bootstrap.mdx
@@ -0,0 +1,143 @@
+---
+title: React Bootstrap Dropdown Component
+name: Dropdown with Bootstrap Styling
+description: Learn how to use the React Bootstrap Dropdown component from CoreUI to create toggleable, contextual overlays with links, buttons, forms, and more, styled the Bootstrap way.
+route: /components/dropdown/
+bootstrap_component: true
+---
+
+## Overview of React Bootstrap Dropdown component
+
+The React Bootstrap Dropdown component provides toggleable, contextual overlays for displaying lists, links, forms, and more. It’s powered by [Popper.js](https://popper.js.org/) for positioning, although navbar dropdowns don’t require dynamic placement.
+
+## React Bootstrap Dropdown examples
+
+### Single button dropdowns
+
+You can trigger dropdowns using `<button>` elements:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownSingleButtonExample" componentName="React Bootstrap Dropdown" />
+
+Or with `<a>` elements:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownSingleButton2Example" componentName="React Bootstrap Dropdown" />
+
+It works with all button variants:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownSingleButton3Example" componentName="React Bootstrap Dropdown" />
+
+### Split button dropdowns
+
+Use the `split` prop to create a split button dropdown. This adds a dropdown toggle next to the main button.
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownSplitButtonExample" componentName="React Bootstrap Dropdown" />
+
+## Sizing
+
+React Bootstrap Dropdowns support all button sizes:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownSizingLargeExample" componentName="React Bootstrap Dropdown" />
+<ExampleSnippet className="theme-bootstrap" component="DropdownSizingSmallExample" componentName="React Bootstrap Dropdown" />
+
+## Dark variant
+
+Use the `dark` prop to style the dropdown with a dark theme.
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownDarkExample" componentName="React Bootstrap Dropdown" />
+<ExampleSnippet className="theme-bootstrap" component="DropdownDark2Example" componentName="React Bootstrap Dropdown" />
+
+## Directions
+
+<Callout color="info" title="RTL">
+  Directions are mirrored in RTL layouts. For example, `.dropstart` appears on the right.
+</Callout>
+
+### Centered dropdown
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownCenteredExample" componentName="React Bootstrap Dropdown" />
+
+### Dropup
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownDropupExample" componentName="React Bootstrap Dropdown" />
+
+### Dropup centered
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownDropupCenteredExample" componentName="React Bootstrap Dropdown" />
+
+### Dropend
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownDropendExample" componentName="React Bootstrap Dropdown" />
+
+### Dropstart
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownDropstartExample" componentName="React Bootstrap Dropdown" />
+
+## Dropdown menu items
+
+React Bootstrap Dropdowns can include `<a>` or `<button>` elements:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuItemsExample" componentName="React Bootstrap Dropdown" />
+
+Use `<CDropdownItemPlain>` for non-interactive items:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuItems2Example" componentName="React Bootstrap Dropdown" />
+
+### Active and disabled items
+
+To mark an item as active:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuItemsActiveExample" componentName="React Bootstrap Dropdown" />
+
+To mark an item as disabled:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuItemsDisabledExample" componentName="React Bootstrap Dropdown" />
+
+## Menu alignment
+
+Right-align the dropdown using the `alignment="end"` prop:
+
+<Callout color="info">
+  <strong>Heads up!</strong> Dropdowns use Popper.js for positioning.
+</Callout>
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuAlignmentExample" componentName="React Bootstrap Dropdown" />
+
+### Responsive alignment
+
+Right-align from a specific breakpoint with `alignment="sm:end"` and similar values:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownResponsiveAlignmentExample" componentName="React Bootstrap Dropdown" />
+
+Left-align from a breakpoint with `alignment="md:start"`:
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownResponsiveAlignment2Example" componentName="React Bootstrap Dropdown" />
+
+## Dropdown menu content
+
+### Headers
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuContentHeadersExample" componentName="React Bootstrap Dropdown" />
+
+### Dividers
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuContentDividersExample" componentName="React Bootstrap Dropdown" />
+
+### Text
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuContentTextExample" componentName="React Bootstrap Dropdown" />
+
+### Forms
+
+<ExampleSnippet className="theme-bootstrap" component="DropdownMenuContentFormsExample" componentName="React Bootstrap Dropdown" />
+
+## API reference
+
+Refer to the API below for full details on available components and props in the React Bootstrap Dropdown:
+
+- [&lt;CDropdown /&gt;](../api/#cdropdown)
+- [&lt;CDropdownDivider /&gt;](../api/#cdropdowndivider)
+- [&lt;CDropdownHeader /&gt;](../api/#cdropdownheader)
+- [&lt;CDropdownItem /&gt;](../api/#cdropdownitem)
+- [&lt;CDropdownItemPlain /&gt;](../api/#cdropdownitemplain)
+- [&lt;CDropdownMenu /&gt;](../api/#cdropdownmenu)
+- [&lt;CDropdownToggle /&gt;](../api/#cdropdowntoggle)
diff --git a/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx
new file mode 100644
index 00000000..ef6e69b2
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownCenteredExample = () => {
+  return (
+    <CDropdown variant="btn-group" direction="center">
+      <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem href="#">Action</CDropdownItem>
+        <CDropdownItem href="#">Another action</CDropdownItem>
+        <CDropdownItem href="#">Something else here</CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem href="#">Separated link</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDark2Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownDark2Example.tsx
new file mode 100644
index 00000000..74a79de5
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDark2Example.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import {
+  CCollapse,
+  CContainer,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+} from '@coreui/react'
+
+export const DropdownDark2Example = () => {
+  return (
+    <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
+      <CContainer fluid>
+        <CNavbarBrand href="#">Navbar</CNavbarBrand>
+        <CNavbarToggler aria-label="Toggle navigation" aria-expanded={true} />
+        <CCollapse className="navbar-collapse" visible={true}>
+          <CNavbarNav>
+            <CDropdown dark as="li" variant="nav-item">
+              <CDropdownToggle color="dark">Dropdown</CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Separated link</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          </CNavbarNav>
+        </CCollapse>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDarkExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDarkExample.tsx
new file mode 100644
index 00000000..35cbf127
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDarkExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDarkExample = () => {
+  return (
+    <CDropdown dark>
+      <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem href="#">Action</CDropdownItem>
+        <CDropdownItem href="#">Another action</CDropdownItem>
+        <CDropdownItem href="#">Something else here</CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem href="#">Separated link</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx
new file mode 100644
index 00000000..e9d0656e
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDropendExample = () => {
+  return (
+    <>
+      <CDropdown variant="btn-group" direction="dropend">
+        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+
+      <CDropdown variant="btn-group" direction="dropend">
+        <CButton color="secondary">Small split button</CButton>
+        <CDropdownToggle color="secondary" split />
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx
new file mode 100644
index 00000000..276b5cff
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import {
+  CButton,
+  CButtonGroup,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDropstartExample = () => {
+  return (
+    <>
+      <CDropdown variant="btn-group" direction="dropstart">
+        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+
+      <CButtonGroup>
+        <CDropdown variant="btn-group" direction="dropstart">
+          <CDropdownToggle color="secondary" split />
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+        <CButton color="secondary">Small split button</CButton>
+      </CButtonGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDropupCenteredExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDropupCenteredExample.tsx
new file mode 100644
index 00000000..e4c5dd3e
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDropupCenteredExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDropupCenteredExample = () => {
+  return (
+    <CDropdown variant="btn-group" direction="dropup-center">
+      <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem href="#">Action</CDropdownItem>
+        <CDropdownItem href="#">Another action</CDropdownItem>
+        <CDropdownItem href="#">Something else here</CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem href="#">Separated link</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownDropupExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownDropupExample.tsx
new file mode 100644
index 00000000..67b41be0
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownDropupExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownDropupExample = () => {
+  return (
+    <>
+      <CDropdown variant="btn-group" direction="dropup">
+        <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+
+      <CDropdown variant="btn-group" direction="dropup">
+        <CButton color="secondary">Small split button</CButton>
+        <CDropdownToggle color="secondary" split />
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuAlignmentExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuAlignmentExample.tsx
new file mode 100644
index 00000000..c4581ffd
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuAlignmentExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownMenuAlignmentExample = () => {
+  return (
+    <CDropdown alignment="end">
+      <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem href="#">Action</CDropdownItem>
+        <CDropdownItem href="#">Another action</CDropdownItem>
+        <CDropdownItem href="#">Something else here</CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem href="#">Separated link</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx
new file mode 100644
index 00000000..abd44799
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CDropdownDivider, CDropdownItem, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuContentDividersExample = () => {
+  return (
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+      <CDropdownDivider />
+      <CDropdownItem href="#">Separated link</CDropdownItem>
+    </CDropdownMenu>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuContentFormsExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuContentFormsExample.tsx
new file mode 100644
index 00000000..9fa78e87
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuContentFormsExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CForm,
+  CFormCheck,
+  CFormInput,
+  CFormLabel,
+} from '@coreui/react'
+
+export const DropdownMenuContentFormsExample = () => {
+  return (
+    <CDropdownMenu>
+      <CForm className="px-4 py-4">
+        <div className="mb-3">
+          <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
+          <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
+        </div>
+        <div className="mb-3">
+          <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
+          <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
+        </div>
+        <div className="mb-3">
+          <CFormCheck id="dropdownCheck" label="Remember me" />
+        </div>
+        <CButton color="primary" type="submit">
+          Sign in
+        </CButton>
+      </CForm>
+      <CDropdownDivider />
+      <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
+      <CDropdownItem href="#">Forgot password?</CDropdownItem>
+    </CDropdownMenu>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx
new file mode 100644
index 00000000..8a44f316
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CDropdownHeader, CDropdownItem, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuContentHeadersExample = () => {
+  return (
+    <CDropdownMenu>
+      <CDropdownHeader>Dropdown header</CDropdownHeader>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+    </CDropdownMenu>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx
new file mode 100644
index 00000000..120d3660
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuContentTextExample = () => {
+  return (
+    <CDropdownMenu className="p-4 text-body-secondary" style={{ maxWidth: '200px' }}>
+      <p>Some example text that's free-flowing within the dropdown menu.</p>
+      <p className="mb-0">And this is more example text.</p>
+    </CDropdownMenu>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx
new file mode 100644
index 00000000..661a8d41
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CDropdownItem, CDropdownItemPlain, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuItems2Example = () => {
+  return (
+    <CDropdownMenu>
+      <CDropdownItemPlain>Dropdown item text</CDropdownItemPlain>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+    </CDropdownMenu>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx
new file mode 100644
index 00000000..2011b23d
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CDropdownItem, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuItemsActiveExample = () => {
+  return (
+    <CDropdownMenu>
+      <CDropdownItem href="#">Regular link</CDropdownItem>
+      <CDropdownItem href="#" active>
+        Active link
+      </CDropdownItem>
+      <CDropdownItem href="#">Another link</CDropdownItem>
+    </CDropdownMenu>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx
new file mode 100644
index 00000000..cb5e10d2
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CDropdownItem, CDropdownMenu } from '@coreui/react'
+
+export const DropdownMenuItemsDisabledExample = () => {
+  return (
+    <CDropdownMenu>
+      <CDropdownItem href="#">Regular link</CDropdownItem>
+      <CDropdownItem href="#" disabled>Disabled link</CDropdownItem>
+      <CDropdownItem href="#">Another link</CDropdownItem>
+    </CDropdownMenu>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsExample.tsx
new file mode 100644
index 00000000..437435e1
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownMenuItemsExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownMenuItemsExample = () => {
+  return (
+    <CDropdown>
+      <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem as="button">Action</CDropdownItem>
+        <CDropdownItem as="button">Another action</CDropdownItem>
+        <CDropdownItem as="button">Something else here</CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem as="button">Separated link</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
new file mode 100644
index 00000000..b0296401
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownResponsiveAlignment2Example = () => {
+  return (
+    <CDropdown alignment={{ xs: 'end', lg: 'start' }}>
+      <CDropdownToggle color="secondary">
+        Right-aligned but left aligned when large screen
+      </CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem href="#">Action</CDropdownItem>
+        <CDropdownItem href="#">Another action</CDropdownItem>
+        <CDropdownItem href="#">Something else here</CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem href="#">Separated link</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
new file mode 100644
index 00000000..298835a3
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownResponsiveAlignmentExample = () => {
+  return (
+    <CDropdown alignment="end">
+      <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem href="#">Action</CDropdownItem>
+        <CDropdownItem href="#">Another action</CDropdownItem>
+        <CDropdownItem href="#">Something else here</CDropdownItem>
+        <CDropdownDivider />
+        <CDropdownItem href="#">Separated link</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx
new file mode 100644
index 00000000..4ecd2ebe
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'
+
+export const DropdownSingleButton2Example = () => {
+  return (
+    <CDropdown>
+      <CDropdownToggle href="#" color="secondary">Dropdown button</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem href="#">Action</CDropdownItem>
+        <CDropdownItem href="#">Another action</CDropdownItem>
+        <CDropdownItem href="#">Something else here</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSingleButton3Example.tsx b/packages/docs/content/components/dropdown/examples/DropdownSingleButton3Example.tsx
new file mode 100644
index 00000000..c8f456b7
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSingleButton3Example.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownSingleButton3Example = () => {
+  return (
+    <>
+      {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
+        <CDropdown variant="btn-group" key={index}>
+          <CDropdownToggle color={color}>{color}</CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+      ))}
+    </>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx
new file mode 100644
index 00000000..af4382fc
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'
+
+export const DropdownSingleButtonExample = () => {
+  return (
+    <CDropdown>
+      <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem href="#">Action</CDropdownItem>
+        <CDropdownItem href="#">Another action</CDropdownItem>
+        <CDropdownItem href="#">Something else here</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSizingLargeExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownSizingLargeExample.tsx
new file mode 100644
index 00000000..523afc52
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSizingLargeExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownSizingLargeExample = () => {
+  return (
+    <>
+      <CDropdown variant="btn-group">
+        <CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+
+      <CDropdown variant="btn-group">
+        <CButton color="secondary" size="lg">Large split button</CButton>
+        <CDropdownToggle color="secondary" size="lg" split />
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSizingSmallExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownSizingSmallExample.tsx
new file mode 100644
index 00000000..487ed5f2
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSizingSmallExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownSizingSmallExample = () => {
+  return (
+    <>
+      <CDropdown variant="btn-group">
+        <CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+
+      <CDropdown variant="btn-group">
+        <CButton color="secondary" size="sm">Small split button</CButton>
+        <CDropdownToggle color="secondary" size="sm" split />
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+          <CDropdownDivider />
+          <CDropdownItem href="#">Separated link</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/examples/DropdownSplitButtonExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownSplitButtonExample.tsx
new file mode 100644
index 00000000..cd47ca89
--- /dev/null
+++ b/packages/docs/content/components/dropdown/examples/DropdownSplitButtonExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+} from '@coreui/react'
+
+export const DropdownSplitButtonExample = () => {
+  return (
+    <>
+      {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map((color, index) => (
+        <CDropdown variant="btn-group" key={index}>
+          <CButton color={color}>{color}</CButton>
+          <CDropdownToggle color={color} split />
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+      ))}
+    </>
+  )
+}
diff --git a/packages/docs/content/components/dropdown/index.mdx b/packages/docs/content/components/dropdown/index.mdx
new file mode 100644
index 00000000..c5890f31
--- /dev/null
+++ b/packages/docs/content/components/dropdown/index.mdx
@@ -0,0 +1,186 @@
+---
+title: React Dropdown Component
+name: Dropdown
+description: React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
+route: /components/dropdown/
+other_frameworks: dropdown
+---
+
+## Overview
+
+Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
+
+Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
+
+## Examples
+
+Bind the dropdown's toggle and the dropdown menu inside `<CDropdown>`, or different element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your possible requirements.
+
+### Single button
+
+Here's how you can put them to work with either `<button>` elements:
+
+<ExampleSnippet component="DropdownSingleButtonExample" componentName="React Dropdown" />
+
+And with `<a>` elements:
+
+<ExampleSnippet component="DropdownSingleButton2Example" componentName="React Dropdown" />
+
+The best part is you can do this with any button variant, too:
+
+<ExampleSnippet component="DropdownSingleButton3Example" componentName="React Dropdown" />
+
+### Split button
+
+Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop `split` for proper spacing around the dropdown caret.
+
+We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.
+
+<ExampleSnippet component="DropdownSplitButtonExample" componentName="React Dropdown" />
+
+## Sizing
+
+Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
+
+<ExampleSnippet component="DropdownSizingLargeExample" componentName="React Dropdown" />
+
+<ExampleSnippet component="DropdownSizingSmallExample" componentName="React Dropdown" />
+
+## Dark dropdowns
+
+Opt into darker dropdowns to match a dark navbar or custom style by set `dark` property. No changes are required to the dropdown items.
+
+<ExampleSnippet component="DropdownDarkExample" componentName="React Dropdown" />
+
+And putting it to use in a navbar:
+
+<ExampleSnippet component="DropdownDark2Example" componentName="React Dropdown" />
+
+
+## Directions
+
+<Callout color="info" title="RTL">
+  Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
+</Callout>
+
+### Centered
+
+Make the dropdown menu centered below the toggle by adding `direction="center"` to the `<CDropdown>` component.
+
+<ExampleSnippet component="DropdownCenteredExample" componentName="React Dropdown" />
+
+### Dropup
+
+Trigger dropdown menus above elements by adding `direction="dropup"` to the `<CDropdown>` component.
+
+<ExampleSnippet component="DropdownDropupExample" componentName="React Dropdown" />
+
+### Dropup centered
+
+Make the dropup menu centered above the toggle by adding `direction="dropup-center"` to the `<CDropdown>` component.
+
+<ExampleSnippet component="DropdownDropupCenteredExample" componentName="React Dropdown" />
+
+### Dropend
+
+Trigger dropdown menus at the right of the elements by adding `direction="dropend"` to the `<CDropdown>` component.
+
+<ExampleSnippet component="DropdownDropendExample" componentName="React Dropdown" />
+
+### Dropstart
+
+Trigger dropdown menus at the left of the elements by adding `direction="dropstart"` to the `<CDropdown>` component.
+
+<ExampleSnippet component="DropdownDropstartExample" componentName="React Dropdown" />
+
+## Menu items
+
+Historically dropdown menu contents _had_ to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
+
+<ExampleSnippet component="DropdownMenuItemsExample" componentName="React Dropdown" />
+
+You can also create non-interactive dropdown items with `<CDropdownItemPlain>`.
+
+<ExampleSnippet component="DropdownMenuItems2Example" componentName="React Dropdown" />
+
+### Active
+
+Set boolean property `active` to **style item as active**.
+
+In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
+
+<ExampleSnippet component="DropdownMenuItemsActiveExample" componentName="React Dropdown" />
+
+### Disabled
+
+Add `disabled` boolean property to items in the dropdown to **style them as disabled**.
+
+In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
+
+<ExampleSnippet component="DropdownMenuItemsDisabledExample" componentName="React Dropdown" />
+
+## Menu alignment
+
+By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `aligment="end"` to right align the dropdown menu.
+
+<Callout color="info">
+  <strong>Heads up!</strong> Dropdowns are positioned thanks to Popper.
+</Callout>
+
+<ExampleSnippet component="DropdownMenuAlignmentExample" componentName="React Dropdown" />
+
+### Responsive alignment
+
+If you use responsive alignment, dynamic positioning is disabled.
+
+To align **right** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: end"`.
+
+<ExampleSnippet component="DropdownResponsiveAlignmentExample" componentName="React Dropdown" />
+
+To align **left** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: start"`.
+
+<ExampleSnippet component="DropdownResponsiveAlignment2Example" componentName="React Dropdown" />
+
+
+## Menu content
+
+### Headers
+
+Add a header to label sections of actions in any dropdown menu.
+
+In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
+
+<ExampleSnippet component="DropdownMenuContentHeadersExample" componentName="React Dropdown" />
+
+### Dividers
+
+Separate groups of related menu items with a divider.
+
+In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
+
+<ExampleSnippet component="DropdownMenuContentDividersExample" componentName="React Dropdown" />
+
+### Text
+
+Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.
+
+<ExampleSnippet component="DropdownMenuContentTextExample" componentName="React Dropdown" />
+
+### Forms
+
+Put a form within a dropdown menu, or make it into a dropdown menu.
+
+<ExampleSnippet component="DropdownMenuContentFormsExample" componentName="React Dropdown" />
+
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CDropdown /&gt;](./api/#cdropdown)
+- [&lt;CDropdownDivider /&gt;](./api/#cdropdowndivider)
+- [&lt;CDropdownHeader /&gt;](./api/#cdropdownheader)
+- [&lt;CDropdownItem /&gt;](./api/#cdropdownitem)
+- [&lt;CDropdownItemPlain /&gt;](./api/#cdropdownitemplain)
+- [&lt;CDropdownMenu /&gt;](./api/#cdropdownmenu)
+- [&lt;CDropdownToggle /&gt;](./api/#cdropdowntoggle)
diff --git a/packages/docs/content/components/dropdown/styling.mdx b/packages/docs/content/components/dropdown/styling.mdx
new file mode 100644
index 00000000..e71380c5
--- /dev/null
+++ b/packages/docs/content/components/dropdown/styling.mdx
@@ -0,0 +1,40 @@
+---
+title: React Dropdown Component Styling
+name: Dropdown Styling
+description: Learn how to customize the React Dropdown component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/dropdown/
+---
+
+### CSS variables
+
+React Button supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_dropdown.scss" capture="dropdown-css-vars"/>
+
+Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
+
+<ScssDocs file="_dropdown.scss" capture="dropdown-dark-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-dropdown-color': '#777',
+  '--cui-dropdown-bg': '#efefef',
+}
+
+return <CDropdown style={customVars}>{/* Dropdown content */}</CDropdown>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="dropdown-variables"/>
+
+Variables for the dark dropdown:
+
+<ScssDocs file="_variables.scss" capture="dropdown-dark-variables"/>
+
+Variables for the CSS-based carets that indicate a dropdown's interactivity:
+
+<ScssDocs file="_variables.scss" capture="caret-variables"/>
+
diff --git a/packages/docs/content/components/footer.mdx b/packages/docs/content/components/footer.mdx
index 93af9b9b..5d36a1e6 100644
--- a/packages/docs/content/components/footer.mdx
+++ b/packages/docs/content/components/footer.mdx
@@ -7,7 +7,7 @@ route: /components/footer
 other_frameworks: footer
 ---
 
-import { CFooter, CLink } from '@coreui/react/src/index'
+import { CFooter, CLink } from '@coreui/react'
 
 ## Example
 
@@ -15,7 +15,7 @@ import { CFooter, CLink } from '@coreui/react/src/index'
 <CFooter>
   <div>
     <CLink href="https://coreui.io">CoreUI</CLink>
-    <span>&copy; 2024 creativeLabs.</span>
+    <span>&copy; 2025 creativeLabs.</span>
   </div>
   <div>
     <span>Powered by</span>
diff --git a/packages/docs/content/components/header.mdx b/packages/docs/content/components/header.mdx
index d19e7c7b..b234df13 100644
--- a/packages/docs/content/components/header.mdx
+++ b/packages/docs/content/components/header.mdx
@@ -31,7 +31,7 @@ import {
   CHeaderNav,
   CHeaderText,
   CHeaderToggler,
-} from '@coreui/react/src/index'
+} from '@coreui/react'
 
 ## Supported content
 
diff --git a/packages/docs/content/components/icon.mdx b/packages/docs/content/components/icon.mdx
index 5e995616..e8839cc0 100644
--- a/packages/docs/content/components/icon.mdx
+++ b/packages/docs/content/components/icon.mdx
@@ -14,7 +14,7 @@ import {
   CNavLink,
   CRow,
   CTabContent,
-  CTabPane } from '@coreui/react/src/index'
+  CTabPane } from '@coreui/react'
 import {CIcon, CIconSvg} from '@coreui/icons-react/src/index'
 import { cilList, cilShieldAlt } from '@coreui/icons'
 import * as icon from '@coreui/icons';
@@ -81,7 +81,7 @@ The CoreUI React Icon component offers versatile color customization options, em
 
 #### Utility classes
 
-With some [color utility classes](https://coreui.io/docs/utilities/colors/), you may use color to convey message.
+With some [color utility classes](https://coreui.io/bootstrap/docs/utilities/colors/), you may use color to convey message.
 
 ```jsx preview
 <CIcon icon={cilList} size="xl" />
diff --git a/packages/docs/content/components/image.mdx b/packages/docs/content/components/image.mdx
deleted file mode 100644
index 6831409b..00000000
--- a/packages/docs/content/components/image.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: React Image Component
-name: Image
-description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
-menu: Components
-route: /components/image
-other_frameworks: image
----
-
-import { CImage } from '@coreui/react/src/index'
-
-import ReactImg from './../assets/images/react.jpg'
-import React400Img from './../assets/images/react400.jpg'
-
-## Responsive images
-
-Images in CoreUI for React.js are made responsive with `fluid` property. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.
-
-```jsx preview
-<CImage fluid src={ReactImg} />
-```
-
-## Image thumbnails
-
-In addition to our [border-radius utilities](https://coreui.io/docs/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance.
-
-```jsx preview
-<CImage rounded thumbnail src={React400Img} width={200} height={200} />
-```
-
-## Aligning images
-
-Align images with the `align` property.
-
-```jsx preview
-<div className="clearfix">
-  <CImage align="start" rounded src={React400Img} width={200} height={200} />
-  <CImage align="end" rounded src={React400Img} width={200} height={200} />
-</div>
-```
-
-```jsx preview
-<div className="clearfix">
-  <CImage align="center" rounded src={React400Img} width={200} height={200} />
-</div>
-```
-
-```jsx preview
-<div className="text-center">
-  <CImage rounded src={React400Img} width={200} height={200} />
-</div>
-```
-
-## API
-
-### CImage
-
-`markdown:CImage.api.mdx`
diff --git a/packages/docs/content/components/image/api.mdx b/packages/docs/content/components/image/api.mdx
new file mode 100644
index 00000000..816292ef
--- /dev/null
+++ b/packages/docs/content/components/image/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Image Component API
+name: Image API
+description: Explore the API reference for the React Image component and discover how to effectively utilize its props for customization.
+route: /components/image/
+---
+
+import CImageAPI from '../../api/CImage.api.mdx'
+
+## CImage
+
+<CImageAPI />
diff --git a/packages/docs/content/components/image/bootstrap.mdx b/packages/docs/content/components/image/bootstrap.mdx
new file mode 100644
index 00000000..e9d09fec
--- /dev/null
+++ b/packages/docs/content/components/image/bootstrap.mdx
@@ -0,0 +1,35 @@
+---
+title: React Bootstrap Image Component
+name: Image with Bootstrap Styling
+description: Learn how to use the React Bootstrap Image component from CoreUI to create responsive, aligned, and styled images using Bootstrap-friendly utilities and props.
+route: /components/image/
+bootstrap_component: true
+---
+
+## Responsive React Bootstrap Images
+
+The React Bootstrap Image component supports responsive behavior using the `fluid` prop. This applies `max-width: 100%` and `height: auto` to ensure images scale with their parent container.
+
+<ExampleSnippet className="theme-bootstrap" component="ImageResponsiveExample" componentName="React Bootstrap Image" />
+
+## React Bootstrap Image thumbnails
+
+Use the `thumbnail` prop to give an image a subtle border and padding, resulting in a thumbnail-style appearance. You can combine it with [border-radius utilities](https://coreui.io/bootstrap/docs/utilities/borders) for rounded corners.
+
+<ExampleSnippet className="theme-bootstrap" component="ImageThumbnailExample" componentName="React Bootstrap Image" />
+
+## Aligning React Bootstrap Images
+
+Use the `align` prop to control image alignment within the container. This allows you to float images left, right, or center them using Bootstrap-aligned values.
+
+<ExampleSnippet className="theme-bootstrap" component="ImageAligningExample" componentName="React Bootstrap Image" />
+
+<ExampleSnippet className="theme-bootstrap" component="ImageAligning2Example" componentName="React Bootstrap Image" />
+
+<ExampleSnippet className="theme-bootstrap" component="ImageAligning3Example" componentName="React Bootstrap Image" />
+
+## API reference
+
+Explore all available props and customization options for the React Bootstrap Image component below:
+
+- [&lt;CImage /&gt;](../api/#cimage)
diff --git a/packages/docs/content/components/image/examples/ImageAligning2Example.tsx b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx
new file mode 100644
index 00000000..7ba739a7
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CImage } from '@coreui/react'
+
+export const ImageAligning2Example = () => {
+  return (
+    <div className="clearfix">
+      <CImage align="center" rounded src={withPrefix('/images/react400.jpg')} width={200} height={200} />
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/image/examples/ImageAligning3Example.tsx b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx
new file mode 100644
index 00000000..200fc959
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CImage } from '@coreui/react'
+
+export const ImageAligning3Example = () => {
+  return (
+    <div className="text-center">
+      <CImage rounded src={withPrefix('/images/react400.jpg')} width={200} height={200} />
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/image/examples/ImageAligningExample.tsx b/packages/docs/content/components/image/examples/ImageAligningExample.tsx
new file mode 100644
index 00000000..3e0ce6bd
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligningExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CImage } from '@coreui/react'
+
+export const ImageAligningExample = () => {
+  return (
+    <div className="clearfix">
+      <CImage align="start" rounded src={withPrefix('/images/react400.jpg')} width={200} height={200} />
+      <CImage align="end" rounded src={withPrefix('/images/react400.jpg')} width={200} height={200} />
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx
new file mode 100644
index 00000000..1d8cb4b5
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CImage } from '@coreui/react'
+
+export const ImageResponsiveExample = () => {
+  return <CImage fluid src={withPrefix('/images/react.jpg')} />
+}
diff --git a/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx
new file mode 100644
index 00000000..1e40391b
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CImage } from '@coreui/react'
+
+export const ImageThumbnailExample = () => {
+  return <CImage rounded thumbnail src={withPrefix('/images/react400.jpg')} width={200} height={200} />
+}
diff --git a/packages/docs/content/components/image/index.mdx b/packages/docs/content/components/image/index.mdx
new file mode 100644
index 00000000..4a8b5d25
--- /dev/null
+++ b/packages/docs/content/components/image/index.mdx
@@ -0,0 +1,35 @@
+---
+title: React Image Component
+name: Image
+description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
+route: /components/image/
+other_frameworks: image
+---
+
+## Responsive images
+
+Images in CoreUI for React.js are made responsive with `fluid` property. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.
+
+<ExampleSnippet component="ImageResponsiveExample" componentName="React Image" />
+
+## Image thumbnails
+
+In addition to our [border-radius utilities](https://coreui.io/bootstrap/docs/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance.
+
+<ExampleSnippet component="ImageThumbnailExample" componentName="React Image" />
+
+## Aligning images
+
+Align images with the `align` property.
+
+<ExampleSnippet component="ImageAligningExample" componentName="React Image" />
+
+<ExampleSnippet component="ImageAligning2Example" componentName="React Image" />
+
+<ExampleSnippet component="ImageAligning3Example" componentName="React Image" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CImage /&gt;](./api/#cimage)
\ No newline at end of file
diff --git a/packages/docs/content/components/list-group.mdx b/packages/docs/content/components/list-group.mdx
deleted file mode 100644
index 9bd8593e..00000000
--- a/packages/docs/content/components/list-group.mdx
+++ /dev/null
@@ -1,345 +0,0 @@
----
-title: React List Group Component
-name: List group
-description: React List Group component allows displaying a series of content. Learn how to use react list group to build complex list structure on your website.
-menu: Components
-route: /components/list-group
-other_frameworks: list-group
----
-
-import {
-  CBadge,
-  CFormCheck,
-  CListGroup,
-  CListGroupItem,
-  CLink,
-} from '@coreui/react/src/index'
-
-## Basic example
-
-The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem>Cras justo odio</CListGroupItem>
-  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem>Morbi leo risus</CListGroupItem>
-  <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem>Vestibulum at eros</CListGroupItem>
-</CListGroup>
-```
-
-## Active items
-
-Add `active` boolean property to a `<CListGroupItem>` to show the current active selection.
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem active>Cras justo odio</CListGroupItem>
-  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem>Morbi leo risus</CListGroupItem>
-  <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem>Vestibulum at eros</CListGroupItem>
-</CListGroup>
-```
-
-## Disabled items
-
-Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabled.
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem disabled>Cras justo odio</CListGroupItem>
-  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem>Morbi leo risus</CListGroupItem>
-  <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem>Vestibulum at eros</CListGroupItem>
-</CListGroup>
-```
-
-## Links and buttons
-
-Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem as="a" href="#" active>
-    Cras justo odio
-  </CListGroupItem>
-  <CListGroupItem as="a" href="#">
-    Dapibus ac facilisis in
-  </CListGroupItem>
-  <CListGroupItem as="a" href="#">
-    Morbi leo risus
-  </CListGroupItem>
-  <CListGroupItem as="a" href="#">
-    Porta ac consectetur ac
-  </CListGroupItem>
-  <CListGroupItem as="a" href="#" disabled>
-    Vestibulum at eros
-  </CListGroupItem>
-</CListGroup>
-```
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem as="button" active>
-    Cras justo odio
-  </CListGroupItem>
-  <CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem as="button">Morbi leo risus</CListGroupItem>
-  <CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem as="button" disabled>
-    Vestibulum at eros
-  </CListGroupItem>
-</CListGroup>
-```
-
-## Flush
-
-Add `flush` boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
-
-```jsx preview
-<CListGroup flush>
-  <CListGroupItem>Cras justo odio</CListGroupItem>
-  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-  <CListGroupItem>Morbi leo risus</CListGroupItem>
-  <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-  <CListGroupItem>Vestibulum at eros</CListGroupItem>
-</CListGroup>
-```
-
-## Horizontal
-
-Add `layout="horizontal"` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.layout="horizontal-{sm|md|lg|xl|xxl}"` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
-
-<Example>
-  <>
-    {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
-      <CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
-        <CListGroupItem>Cras justo odio</CListGroupItem>
-        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-        <CListGroupItem>Morbi leo risus</CListGroupItem>
-      </CListGroup>
-    ))}
-  </>
-</Example>
-
-```jsx
-<>
-  {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
-    <CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
-      <CListGroupItem>Cras justo odio</CListGroupItem>
-      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-      <CListGroupItem>Morbi leo risus</CListGroupItem>
-    </CListGroup>
-  ))}
-</>
-```
-
-## Contextual classes
-
-Use contextual classes to style list items with a stateful background and color.
-
-<Example>
-  <CListGroup>
-    <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-    {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
-      (color, index) => (
-        <CListGroupItem color={color} key={index}>
-          A simple {color} list group item
-        </CListGroupItem>
-      ),
-    )}
-  </CListGroup>
-</Example>
-
-```jsx
-<CListGroup>
-  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-  {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
-    (color, index) => (
-      <CListGroupItem color={color} key={index}>
-        A simple {color} list group item
-      </CListGroupItem>
-    ),
-  )}
-</CListGroup>
-```
-
-Contextual classes also work with `<a>`s or `<button>`s. Note the addition of the hover styles here not present in the previous example. Also supported is the `active` state; apply it to indicate an active selection on a contextual list group item.
-
-<Example>
-  <CListGroup>
-    <CListGroupItem as="a" href="#">
-      Dapibus ac facilisis in
-    </CListGroupItem>
-    {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
-      (color, index) => (
-        <CListGroupItem as="a" href="#" color={color} key={index}>
-          A simple {color} list group item
-        </CListGroupItem>
-      ),
-    )}
-  </CListGroup>
-</Example>
-
-```jsx
-<CListGroup>
-  <CListGroupItem as="a" href="#">
-    Dapibus ac facilisis in
-  </CListGroupItem>
-  {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map(
-    (color, index) => (
-      <CListGroupItem as="a" href="#" color={color} key={index}>
-        A simple {color} list group item
-      </CListGroupItem>
-    ),
-  )}
-</CListGroup>
-```
-
-<Callout color="info" title="Conveying meaning to assistive technologies">
-  Using color to add meaning only provides a visual indication, which will not be conveyed to
-  users of assistive technologies – such as screen readers. Ensure that information denoted by the
-  color is either obvious from the content itself (e.g. the visible text), or is included through
-  alternative means, such as additional text hidden with the `.visually-hidden` class.
-</Callout>
-
-## With badges
-
-Add badges to any list group item to show unread counts, activity, and more.
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem className="d-flex justify-content-between align-items-center">
-    Cras justo odio
-    <CBadge color="primary" shape="rounded-pill">
-      14
-    </CBadge>
-  </CListGroupItem>
-  <CListGroupItem className="d-flex justify-content-between align-items-center">
-    Dapibus ac facilisis in
-    <CBadge color="primary" shape="rounded-pill">
-      2
-    </CBadge>
-  </CListGroupItem>
-  <CListGroupItem className="d-flex justify-content-between align-items-center">
-    Morbi leo risus
-    <CBadge color="primary" shape="rounded-pill">
-      1
-    </CBadge>
-  </CListGroupItem>
-</CListGroup>
-```
-
-## Custom content
-
-Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](https://coreui.io/docs/utilities/flex/).
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem as="a" href="#" active>
-    <div className="d-flex w-100 justify-content-between">
-      <h5 className="mb-1">List group item heading</h5>
-      <small>3 days ago</small>
-    </div>
-    <p className="mb-1">
-      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
-    </p>
-    <small>Donec id elit non mi porta.</small>
-  </CListGroupItem>
-  <CListGroupItem as="a" href="#">
-    <div className="d-flex w-100 justify-content-between">
-      <h5 className="mb-1">List group item heading</h5>
-      <small className="text-body-secondary">3 days ago</small>
-    </div>
-    <p className="mb-1">
-      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
-    </p>
-    <small className="text-body-secondary">Donec id elit non mi porta.</small>
-  </CListGroupItem>
-  <CListGroupItem as="a" href="#">
-    <div className="d-flex w-100 justify-content-between">
-      <h5 className="mb-1">List group item heading</h5>
-      <small className="text-body-secondary">3 days ago</small>
-    </div>
-    <p className="mb-1">
-      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
-    </p>
-    <small className="text-body-secondary">Donec id elit non mi porta.</small>
-  </CListGroupItem>
-</CListGroup>
-```
-
-## Checkboxes and radios
-
-Place CoreUI's checkboxes and radios within list group items and customize as needed.
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem>
-    <CFormCheck label="Cras justo odio" />
-  </CListGroupItem>
-  <CListGroupItem>
-    <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
-  </CListGroupItem>
-  <CListGroupItem>
-    <CFormCheck label="Morbi leo risus" defaultChecked />
-  </CListGroupItem>
-  <CListGroupItem>
-    <CFormCheck label="orta ac consectetur ac" />
-  </CListGroupItem>
-  <CListGroupItem>
-    <CFormCheck label="Vestibulum at eros" />
-  </CListGroupItem>
-</CListGroup>
-```
-
-And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
-
-```jsx preview
-<CListGroup>
-  <CListGroupItem>
-    <CFormCheck hitArea="full" label="First checkbox" value="" id="firstCheckboxStretched" />
-  </CListGroupItem>
-  <CListGroupItem>
-    <CFormCheck hitArea="full" label="Second checkbox" value="" id="secondCheckboxStretched" defaultChecked/>
-  </CListGroupItem>
-  <CListGroupItem>
-    <CFormCheck hitArea="full" label="Third checkbox" value="" id="thirdCheckboxStretched"/>
-  </CListGroupItem>
-</CListGroup>
-```
-
-## Customizing
-
-### CSS variables
-
-React list groups 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.
-
-<ScssDocs file="_list-group.scss" capture="list-group-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CListGroup style={vars}>...</CListGroup>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="list-group-variables"/>
-
-## API
-
-### CListGroup
-
-`markdown:CListGroup.api.mdx`
-
-### CListGroupItem
-
-`markdown:CListGroupItem.api.mdx`
diff --git a/packages/docs/content/components/list-group/api.mdx b/packages/docs/content/components/list-group/api.mdx
new file mode 100644
index 00000000..ba8b36e6
--- /dev/null
+++ b/packages/docs/content/components/list-group/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React List Group Component API
+name: List Group API
+description: Explore the API reference for the React List Group component and discover how to effectively utilize its props for customization.
+route: /components/list-group/
+---
+
+import CListGroupAPI from '../../api/CListGroup.api.mdx'
+import CListGroupItemAPI from '../../api/CListGroupItem.api.mdx'
+
+## CListGroup
+
+<CListGroupAPI />
+
+## CListGroupItem
+
+<CListGroupItemAPI />
diff --git a/packages/docs/content/components/list-group/bootstrap.mdx b/packages/docs/content/components/list-group/bootstrap.mdx
new file mode 100644
index 00000000..7632d5be
--- /dev/null
+++ b/packages/docs/content/components/list-group/bootstrap.mdx
@@ -0,0 +1,82 @@
+---
+title: React Bootstrap List Group Component
+name: List Group with Bootstrap Styling
+description: Learn how to use the React Bootstrap List Group component from CoreUI to display flexible and interactive lists with badges, buttons, contextual styles, and more.
+route: /components/list-group/
+bootstrap_component: true
+---
+
+## Basic usage of React Bootstrap List Group
+
+The React Bootstrap List Group component allows you to display a list of content using Bootstrap-styled list items. The default setup uses an unordered list with proper classes.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupExample" componentName="React Bootstrap List Group" />
+
+## Active items
+
+Add the `active` prop to a `<CListGroupItem>` to visually mark it as the selected item.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupActiveItemsExample" componentName="React Bootstrap List Group" />
+
+## Disabled items
+
+Use the `disabled` prop to disable interaction with a list item.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupDisabledItemsExample" componentName="React Bootstrap List Group" />
+
+## List group as links or buttons
+
+You can use `<a>` or `<button>` elements for actionable React Bootstrap List Group items. Add the `as="a"` or `as="button"` prop as needed.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupLinksAndButtonsExample" componentName="React Bootstrap List Group" />
+<ExampleSnippet className="theme-bootstrap" component="ListGroupLinksAndButtons2Example" componentName="React Bootstrap List Group" />
+
+## Flush list group
+
+Remove borders and padding using the `flush` prop. This is especially useful inside Bootstrap-styled cards.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupFlushExample" componentName="React Bootstrap List Group" />
+
+## Horizontal list group
+
+Add `layout="horizontal"` to display the list items horizontally. For responsive behavior, use values like `horizontal-md`, `horizontal-lg`, etc.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupHorizontalExample" componentName="React Bootstrap List Group" />
+
+> ⚠️ Horizontal list groups cannot be used in combination with `flush`.
+
+## Contextual styling for list items
+
+Use Bootstrap contextual classes such as `color="primary"`, `color="success"`, etc. to style list items based on intent or state.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupContextualClassesExample" componentName="React Bootstrap List Group" />
+<ExampleSnippet className="theme-bootstrap" component="ListGroupContextualClasses2Example" componentName="React Bootstrap List Group" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+## List group with badges
+
+Combine list items with badges to indicate notifications, counts, or statuses.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupWithBadgesExample" componentName="React Bootstrap List Group" />
+
+## Custom content inside list group
+
+React Bootstrap List Groups support custom content such as headings, paragraphs, or even full layouts using [Flex utilities](https://coreui.io/bootstrap/docs/utilities/flex/).
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupCustomContentExample" componentName="React Bootstrap List Group" />
+
+## List group with checkboxes and radios
+
+Embed checkboxes or radio buttons inside list items for interactive list selection.
+
+<ExampleSnippet className="theme-bootstrap" component="ListGroupCheckboxesAndRadiosExample" componentName="React Bootstrap List Group" />
+<ExampleSnippet className="theme-bootstrap" component="ListGroupCheckboxesAndRadios2Example" componentName="React Bootstrap List Group" />
+<ExampleSnippet className="theme-bootstrap" component="ListGroupCheckboxesAndRadios3Example" componentName="React Bootstrap List Group" />
+
+## API reference
+
+Explore the full API for the React Bootstrap List Group components:
+
+- [&lt;CListGroup /&gt;](../api/#clistgroup)
+- [&lt;CListGroupItem /&gt;](../api/#clistgroupitem)
diff --git a/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx
new file mode 100644
index 00000000..75ec1e42
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupActiveItemsExample = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem active>Cras justo odio</CListGroupItem>
+      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+      <CListGroupItem>Morbi leo risus</CListGroupItem>
+      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+      <CListGroupItem>Vestibulum at eros</CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios2Example.tsx b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios2Example.tsx
new file mode 100644
index 00000000..065f4d85
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios2Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupCheckboxesAndRadios2Example = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem>
+        <CFormCheck type="radio" name="reactListGroupRadio" label="First React.js radio" />
+      </CListGroupItem>
+      <CListGroupItem>
+        <CFormCheck type="radio" name="reactListGroupRadio" label="Second React.js radio" />
+      </CListGroupItem>
+      <CListGroupItem>
+        <CFormCheck type="radio" name="reactListGroupRadio" label="Third React.js radio" />
+      </CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios3Example.tsx b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios3Example.tsx
new file mode 100644
index 00000000..6fde28ae
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios3Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupCheckboxesAndRadios3Example = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem>
+        <CFormCheck hitArea="full" label="First checkbox" value="" id="firstCheckboxStretched" />
+      </CListGroupItem>
+      <CListGroupItem>
+        <CFormCheck hitArea="full" label="Second checkbox" value="" id="secondCheckboxStretched" defaultChecked/>
+      </CListGroupItem>
+      <CListGroupItem>
+        <CFormCheck hitArea="full" label="Third checkbox" value="" id="thirdCheckboxStretched"/>
+      </CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadiosExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadiosExample.tsx
new file mode 100644
index 00000000..6e047381
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadiosExample.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CFormCheck, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupCheckboxesAndRadiosExample = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem>
+        <CFormCheck label="Cras justo odio" />
+      </CListGroupItem>
+      <CListGroupItem>
+        <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
+      </CListGroupItem>
+      <CListGroupItem>
+        <CFormCheck label="Morbi leo risus" defaultChecked />
+      </CListGroupItem>
+      <CListGroupItem>
+        <CFormCheck label="orta ac consectetur ac" />
+      </CListGroupItem>
+      <CListGroupItem>
+        <CFormCheck label="Vestibulum at eros" />
+      </CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupContextualClasses2Example.tsx b/packages/docs/content/components/list-group/examples/ListGroupContextualClasses2Example.tsx
new file mode 100644
index 00000000..724b3f81
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupContextualClasses2Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupContextualClasses2Example = () => {
+  const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
+  return (
+    <CListGroup>
+      <CListGroupItem as="a" href="#">
+        Dapibus ac facilisis in
+      </CListGroupItem>
+      {colors.map((color, index) => (
+        <CListGroupItem as="a" href="#" color={color} key={index}>
+          A simple {color} list group item
+        </CListGroupItem>
+      ))}
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx
new file mode 100644
index 00000000..d84f860e
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupContextualClassesExample = () => {
+  const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
+  return (
+    <CListGroup>
+      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+      {colors.map((color, index) => (
+        <CListGroupItem color={color} key={index}>
+          A simple {color} list group item
+        </CListGroupItem>
+      ))}
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupCustomContentExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupCustomContentExample.tsx
new file mode 100644
index 00000000..cfd1e7c7
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupCustomContentExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupCustomContentExample = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem as="a" href="#" active>
+        <div className="d-flex w-100 justify-content-between">
+          <h5 className="mb-1">List group item heading</h5>
+          <small>3 days ago</small>
+        </div>
+        <p className="mb-1">
+          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
+          blandit.
+        </p>
+        <small>Donec id elit non mi porta.</small>
+      </CListGroupItem>
+      <CListGroupItem as="a" href="#">
+        <div className="d-flex w-100 justify-content-between">
+          <h5 className="mb-1">List group item heading</h5>
+          <small className="text-body-secondary">3 days ago</small>
+        </div>
+        <p className="mb-1">
+          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
+          blandit.
+        </p>
+        <small className="text-body-secondary">Donec id elit non mi porta.</small>
+      </CListGroupItem>
+      <CListGroupItem as="a" href="#">
+        <div className="d-flex w-100 justify-content-between">
+          <h5 className="mb-1">List group item heading</h5>
+          <small className="text-body-secondary">3 days ago</small>
+        </div>
+        <p className="mb-1">
+          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
+          blandit.
+        </p>
+        <small className="text-body-secondary">Donec id elit non mi porta.</small>
+      </CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx
new file mode 100644
index 00000000..7b1ecfef
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupDisabledItemsExample = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem disabled>Cras justo odio</CListGroupItem>
+      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+      <CListGroupItem>Morbi leo risus</CListGroupItem>
+      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+      <CListGroupItem>Vestibulum at eros</CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupExample.tsx
new file mode 100644
index 00000000..3ee97cb9
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupExample = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem>Cras justo odio</CListGroupItem>
+      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+      <CListGroupItem>Morbi leo risus</CListGroupItem>
+      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+      <CListGroupItem>Vestibulum at eros</CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx
new file mode 100644
index 00000000..dbb5a280
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupFlushExample = () => {
+  return (
+    <CListGroup flush>
+      <CListGroupItem>Cras justo odio</CListGroupItem>
+      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+      <CListGroupItem>Morbi leo risus</CListGroupItem>
+      <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
+      <CListGroupItem>Vestibulum at eros</CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.jsx b/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.jsx
new file mode 100644
index 00000000..552e1aab
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupHorizontalExample = () => {
+  const breakpoints = [
+    'horizontal',
+    'horizontal-sm',
+    'horizontal-md',
+    'horizontal-lg',
+    'horizontal-xl',
+    'horizontal-xxl',
+  ]
+  return (
+    <>
+      {breakpoints.map((breakpoint, index) => (
+        <CListGroup className="mb-2" layout={breakpoint} key={index}>
+          <CListGroupItem>Cras justo odio</CListGroupItem>
+          <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+          <CListGroupItem>Morbi leo risus</CListGroupItem>
+        </CListGroup>
+      ))}
+    </>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.tsx
new file mode 100644
index 00000000..f28516ed
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupHorizontalExample = () => {
+  const breakpoints: Array<
+    | 'horizontal'
+    | 'horizontal-sm'
+    | 'horizontal-md'
+    | 'horizontal-lg'
+    | 'horizontal-xl'
+    | 'horizontal-xxl'
+  > = [
+    'horizontal',
+    'horizontal-sm',
+    'horizontal-md',
+    'horizontal-lg',
+    'horizontal-xl',
+    'horizontal-xxl',
+  ]
+  return (
+    <>
+      {breakpoints.map((breakpoint, index) => (
+        <CListGroup className="mb-2" layout={breakpoint} key={index}>
+          <CListGroupItem>Cras justo odio</CListGroupItem>
+          <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
+          <CListGroupItem>Morbi leo risus</CListGroupItem>
+        </CListGroup>
+      ))}
+    </>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtons2Example.tsx b/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtons2Example.tsx
new file mode 100644
index 00000000..2c56beb6
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtons2Example.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupLinksAndButtons2Example = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem as="button" active>Cras justo odio</CListGroupItem>
+      <CListGroupItem as="button">Dapibus ac facilisis in</CListGroupItem>
+      <CListGroupItem as="button">Morbi leo risus</CListGroupItem>
+      <CListGroupItem as="button">Porta ac consectetur ac</CListGroupItem>
+      <CListGroupItem as="button" disabled>Vestibulum at eros</CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtonsExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtonsExample.tsx
new file mode 100644
index 00000000..7875801e
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtonsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupLinksAndButtonsExample = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem as="a" href="#" active>Cras justo odio</CListGroupItem>
+      <CListGroupItem as="a" href="#">Dapibus ac facilisis in</CListGroupItem>
+      <CListGroupItem as="a" href="#"> Morbi leo risus</CListGroupItem>
+      <CListGroupItem as="a" href="#">Porta ac consectetur ac</CListGroupItem>
+      <CListGroupItem as="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/examples/ListGroupWithBadgesExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupWithBadgesExample.tsx
new file mode 100644
index 00000000..16362bb8
--- /dev/null
+++ b/packages/docs/content/components/list-group/examples/ListGroupWithBadgesExample.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { CBadge, CListGroup, CListGroupItem } from '@coreui/react'
+
+export const ListGroupWithBadgesExample = () => {
+  return (
+    <CListGroup>
+      <CListGroupItem className="d-flex justify-content-between align-items-center">
+        Cras justo odio
+        <CBadge color="primary" shape="rounded-pill">
+          14
+        </CBadge>
+      </CListGroupItem>
+      <CListGroupItem className="d-flex justify-content-between align-items-center">
+        Dapibus ac facilisis in
+        <CBadge color="primary" shape="rounded-pill">
+          2
+        </CBadge>
+      </CListGroupItem>
+      <CListGroupItem className="d-flex justify-content-between align-items-center">
+        Morbi leo risus
+        <CBadge color="primary" shape="rounded-pill">
+          1
+        </CBadge>
+      </CListGroupItem>
+    </CListGroup>
+  )
+}
diff --git a/packages/docs/content/components/list-group/index.mdx b/packages/docs/content/components/list-group/index.mdx
new file mode 100644
index 00000000..f1f61ffb
--- /dev/null
+++ b/packages/docs/content/components/list-group/index.mdx
@@ -0,0 +1,88 @@
+---
+title: React List Group Component
+name: List group
+description: React List Group component allows displaying a series of content. Learn how to use react list group to build complex list structure on your website.
+route: /components/list-group/
+other_frameworks: list-group
+---
+
+## Basic example
+
+The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
+
+<ExampleSnippet component="ListGroupExample" componentName="React List Group" />
+
+## Active items
+
+Add `active` boolean property to a `<CListGroupItem>` to show the current active selection.
+
+<ExampleSnippet component="ListGroupActiveItemsExample" componentName="React List Group" />
+
+## Disabled items
+
+Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabled.
+
+<ExampleSnippet component="ListGroupDisabledItemsExample" componentName="React List Group" />
+
+## Links and buttons
+
+Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
+
+<ExampleSnippet component="ListGroupLinksAndButtonsExample" componentName="React List Group" />
+
+<ExampleSnippet component="ListGroupLinksAndButtons2Example" componentName="React List Group" />
+
+## Flush
+
+Add `flush` boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
+
+<ExampleSnippet component="ListGroupFlushExample" componentName="React List Group" />
+
+## Horizontal
+
+Add `layout="horizontal"` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.layout="horizontal-{sm|md|lg|xl|xxl}"` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+
+<ExampleSnippet component="ListGroupHorizontalExample" componentName="React List Group" />
+
+## Contextual classes
+
+Use contextual classes to style list items with a stateful background and color.
+
+<ExampleSnippet component="ListGroupContextualClassesExample" componentName="React List Group" />
+
+Contextual classes also work with `<a>`s or `<button>`s. Note the addition of the hover styles here not present in the previous example. Also supported is the `active` state; apply it to indicate an active selection on a contextual list group item.
+
+<ExampleSnippet component="ListGroupContextualClasses2Example" componentName="React List Group" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+## With badges
+
+Add badges to any list group item to show unread counts, activity, and more.
+
+<ExampleSnippet component="ListGroupWithBadgesExample" componentName="React List Group" />
+
+## Custom content
+
+Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/).
+
+<ExampleSnippet component="ListGroupCustomContentExample" componentName="React List Group" />
+
+## Checkboxes and radios
+
+Place CoreUI's checkboxes and radios within list group items and customize as needed.
+
+<ExampleSnippet component="ListGroupCheckboxesAndRadiosExample" componentName="React List Group" />
+
+<ExampleSnippet component="ListGroupCheckboxesAndRadios2Example" componentName="React List Group" />
+
+And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
+
+<ExampleSnippet component="ListGroupCheckboxesAndRadios3Example" componentName="React List Group" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CListGroup /&gt;](./api/#clistgroup)
+- [&lt;CListGroupItem /&gt;](./api/#clistgroupitem)
diff --git a/packages/docs/content/components/list-group/styling.mdx b/packages/docs/content/components/list-group/styling.mdx
new file mode 100644
index 00000000..c72e691d
--- /dev/null
+++ b/packages/docs/content/components/list-group/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React ListGroup Component Styling
+name: ListGroup Styling
+description: Learn how to customize the React ListGroup component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/list-group/
+---
+
+### CSS variables
+
+React List Group supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_list-group.scss" capture="list-group-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-list-group-color': '#ffe484',
+  '--cui-list-group-bg': '#efefef',
+}
+
+return <CListGroup style={customVars}>{/* List Group content */}</CListGroup>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="list-group-variables"/>
diff --git a/packages/docs/content/components/modal.mdx b/packages/docs/content/components/modal.mdx
deleted file mode 100644
index 21f212d4..00000000
--- a/packages/docs/content/components/modal.mdx
+++ /dev/null
@@ -1,1375 +0,0 @@
----
-title: React Modal Component
-name: Modal
-description: React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial.
-menu: Components
-route: /components/modal
-other_frameworks: modal
----
-
-import { useState } from 'react'
-import {
-  CButton,
-  CLink,
-  CModal,
-  CModalBody,
-  CModalFooter,
-  CModalHeader,
-  CModalTitle,
-  CPopover,
-  CTooltip,
-} from '@coreui/react/src/index'
-
-## How to use React Modal Component?
-
-### Static modal component example
-
-Below is a static react modal component example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include react modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
-
-<Example>
-  <div className="modal position-static d-block" tabIndex="-1">
-    <div className="modal-dialog">
-      <div className="modal-content">
-        <div className="modal-header">
-          <h5 className="modal-title">React Modal title</h5>
-          <button type="button" className="btn-close" aria-label="Close"></button>
-        </div>
-        <div className="modal-body">
-          <p>React Modal body text goes here.</p>
-        </div>
-        <div className="modal-footer">
-          <button type="button" className="btn btn-secondary">Close</button>
-          <button type="button" className="btn btn-primary">Save changes</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</Example>
-```jsx
-<CModal>
-  <CModalHeader>
-    <CModalTitle>React Modal title</CModalTitle>
-  </CModalHeader>
-  <CModalBody>
-    <p>React Modal body text goes here.</p>
-  </CModalBody>
-  <CModalFooter>
-    <CButton color="secondary">Close</CButton>
-    <CButton color="primary">Save changes</CButton>
-  </CModalFooter>
-</CModal>
-```
-
-### Live demo
-
-Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page.
-
-export const LiveDemoExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="LiveDemoExampleLabel"
-      >
-        <CModalHeader>
-          <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>Woohoo, you're reading this text in a modal!</p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <LiveDemoExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-    <CModal
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="LiveDemoExampleLabel"
-    >
-      <CModalHeader>
-        <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <p>Woohoo, you're reading this text in a modal!</p>
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={() => setVisible(false)}>
-          Close
-        </CButton>
-        <CButton color="primary">Save changes</CButton>
-      </CModalFooter>
-    </CModal>
-  </>
-)
-```
-
-### Static backdrop
-
-If you set a `backdrop` to `static`, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.
-
-export const StaticBackdropExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
-      <CModal
-        backdrop="static"
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="StaticBackdropExampleLabel"
-      >
-        <CModalHeader>
-          <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          I will not close if you click outside me. Don't even try to press escape key.
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <StaticBackdropExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
-    <CModal
-      backdrop="static"
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="StaticBackdropExampleLabel"
-    >
-      <CModalHeader>
-        <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        I will not close if you click outside me. Don't even try to press escape key.
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={() => setVisible(false)}>
-          Close
-        </CButton>
-        <CButton color="primary">Save changes</CButton>
-      </CModalFooter>
-    </CModal>
-  </>
-)
-```
-
-### Scrolling long content
-
-When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
-
-export const ScrollingLongContentExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="ScrollingLongContentExampleLabel"
-      >
-        <CModalHeader>
-          <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <ScrollingLongContentExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-    <CModal
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="ScrollingLongContentExampleLabel"
-    >
-      <CModalHeader>
-        <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={() => setVisible(false)}>
-          Close
-        </CButton>
-        <CButton color="primary">Save changes</CButton>
-      </CModalFooter>
-    </CModal>
-  </>
-)
-```
-
-You can also create a scrollable react modal component that allows scroll the modal body by adding `scrollable` prop.
-
-export const ScrollingLongContentExample2 = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal
-        scrollable
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="ScrollingLongContentExampleLabel2"
-      >
-        <CModalHeader>
-          <CModalTitle id="ScrollingLongContentExampleLabel2">Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <ScrollingLongContentExample2 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-    <CModal
-      scrollable
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="ScrollingLongContentExampleLabel2"
-    >
-      <CModalHeader>
-        <CModalTitle id="ScrollingLongContentExampleLabel2">Modal title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={() => setVisible(false)}>
-          Close
-        </CButton>
-        <CButton color="primary">Save changes</CButton>
-      </CModalFooter>
-    </CModal>
-  </>
-)
-```
-
-### Vertically centered
-
-Add `alignment="center` to `<CModal>` to vertically center the React modal.
-
-export const VerticallyCenteredExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
-      <CModal
-        alignment="center"
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="VerticallyCenteredExample"
-      >
-        <CModalHeader>
-          <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <VerticallyCenteredExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
-    <CModal
-      alignment="center"
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="VerticallyCenteredExample"
-    >
-      <CModalHeader>
-        <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={() => setVisible(false)}>
-          Close
-        </CButton>
-        <CButton color="primary">Save changes</CButton>
-      </CModalFooter>
-    </CModal>
-  </>
-)
-```
-
-export const VerticallyCenteredScrollableExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
-      <CModal
-        alignment="center"
-        scrollable
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="VerticallyCenteredScrollableExample2"
-      >
-        <CModalHeader>
-          <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-            auctor fringilla.
-          </p>
-          <p>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-            lacus vel augue laoreet rutrum faucibus dolor auctor.
-          </p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <VerticallyCenteredScrollableExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
-    <CModal
-      alignment="center"
-      scrollable
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="VerticallyCenteredScrollableExample2"
-    >
-      <CModalHeader>
-        <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-        <p>
-          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-          auctor fringilla.
-        </p>
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <p>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
-          vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={() => setVisible(false)}>
-          Close
-        </CButton>
-        <CButton color="primary">Save changes</CButton>
-      </CModalFooter>
-    </CModal>
-  </>
-)
-```
-
-### Tooltips and popovers
-
-`<CTooltips>` and `<CPopovers>` can be placed within react modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed.
-
-export const TooltipsAndPopoversExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal
-        alignment="center"
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="TooltipsAndPopoverExample"
-      >
-        <CModalHeader>
-          <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <h5>Popover in a modal</h5>
-          <p>
-            This
-            <CPopover title="Popover title" content="Popover body content is set in this property.">
-              <CButton color="primary">button</CButton>
-            </CPopover> triggers a popover on click.
-          </p>
-          <hr />
-          <h5>Tooltips in a modal</h5>
-          <p>
-            <CTooltip content="Tooltip">
-              <CLink>This link</CLink>
-            </CTooltip>{' '}
-            and
-            <CTooltip content="Tooltip">
-              <CLink>that link</CLink>
-            </CTooltip> have tooltips on hover.
-          </p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton color="secondary" onClick={() => setVisible(false)}>
-            Close
-          </CButton>
-          <CButton color="primary">Save changes</CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <TooltipsAndPopoversExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-    <CModal
-      alignment="center"
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="TooltipsAndPopoverExample"
-    >
-      <CModalHeader>
-        <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <h5>Popover in a modal</h5>
-        <p>
-          This
-          <CPopover title="Popover title" content="Popover body content is set in this property.">
-            <CButton color="primary">button</CButton>
-          </CPopover> triggers a popover on click.
-        </p>
-        <hr />
-        <h5>Tooltips in a modal</h5>
-        <p>
-          <CTooltip content="Tooltip">
-            <CLink>This link</CLink>
-          </CTooltip>{' '}
-          and
-          <CTooltip content="Tooltip">
-            <CLink>that link</CLink>
-          </CTooltip> have tooltips on hover.
-        </p>
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={() => setVisible(false)}>
-          Close
-        </CButton>
-        <CButton color="primary">Save changes</CButton>
-      </CModalFooter>
-    </CModal>
-  </>
-)
-```
-
-### Toggle between modals
-
-Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals.
-
-export const ToggleBetweenModalsExample = () => {
-  const [visible, setVisible] = useState(false)
-  const [visible2, setVisible2] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Open first modal</CButton>
-      <CModal
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="ToggleBetweenModalsExample1"
-      >
-        <CModalHeader>
-          <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>Show a second modal and hide this one with the button below.</p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton
-            color="primary"
-            onClick={() => {
-              setVisible(false)
-              setVisible2(true)
-            }}
-          >
-            Open second modal
-          </CButton>
-        </CModalFooter>
-      </CModal>
-      <CModal
-        visible={visible2}
-        onClick={() => {
-          setVisible(true)
-          setVisible2(false)
-        }}
-        aria-labelledby="ToggleBetweenModalsExample2"
-      >
-        <CModalHeader>
-          <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <p>Hide this modal and show the first with the button below.</p>
-        </CModalBody>
-        <CModalFooter>
-          <CButton
-            color="primary"
-            onClick={() => {
-              setVisible(true)
-              setVisible2(false)
-            }}
-          >
-            Back to first
-          </CButton>
-        </CModalFooter>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <ToggleBetweenModalsExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-const [visible2, setVisible2] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Open first modal</CButton>
-    <CModal
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="ToggleBetweenModalsExample1"
-    >
-      <CModalHeader>
-        <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <p>Show a second modal and hide this one with the button below.</p>
-      </CModalBody>
-      <CModalFooter>
-        <CButton
-          color="primary"
-          onClick={() => {
-            setVisible(false)
-            setVisible2(true)
-          }}
-        >
-          Open second modal
-        </CButton>
-      </CModalFooter>
-    </CModal>
-    <CModal
-      visible={visible2}
-      onClick={() => {
-        setVisible(true)
-        setVisible2(false)
-      }}
-      aria-labelledby="ToggleBetweenModalsExample2"
-    >
-      <CModalHeader>
-        <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <p>Hide this modal and show the first with the button below.</p>
-      </CModalBody>
-      <CModalFooter>
-        <CButton
-          color="primary"
-          onClick={() => {
-            setVisible(true)
-            setVisible2(false)
-          }}
-        >
-          Back to first
-        </CButton>
-      </CModalFooter>
-    </CModal>
-  </>
-)
-```
-
-### Change animation
-
-The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation.
-
-If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`.
-
-### Remove animation
-
-For modals that simply appear rather than fade into view, set `transition` to `false`.
-
-```jsx
-<CModal transition={false}>...</CModal>
-```
-
-### Accessibility
-
-Be sure to add `aria-labelledby="..."`, referencing the modal title, to `<CModal />` Additionally, you may give a description of your modal dialog with `aria-describedby` on `<CModal>`. Note that you don’t need to add `role="dialog`, `aria-hidden="true"`, and `aria-modal="true"` since we already add it.
-
-## Optional sizes
-
-Modals have three optional sizes, available via modifier classes to be placed on a `<CModal>`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
-
-| Size        | Property size | Modal max-width |
-| ----------- | ------------- | --------------- |
-| Small       | `'sm'`        | `300px`         |
-| Default     | None          | `500px`         |
-| Large       | `'lg'`        | `800px`         |
-| Extra large | `'xl'`        | `1140px`        |
-
-export const OptionalSizesExample = () => {
-  const [visibleXL, setVisibleXL] = useState(false)
-  const [visibleLg, setVisibleLg] = useState(false)
-  const [visibleSm, setVisibleSm] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
-      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
-      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
-      <CModal
-        size="xl"
-        visible={visibleXL}
-        onClose={() => setVisibleXL(false)}
-        aria-labelledby="OptionalSizesExample1"
-      >
-        <CModalHeader>
-          <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal
-        size="lg"
-        visible={visibleLg}
-        onClose={() => setVisibleLg(false)}
-        aria-labelledby="OptionalSizesExample2"
-      >
-        <CModalHeader>
-          <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal
-        size="sm"
-        visible={visibleSm}
-        onClose={() => setVisibleSm(false)}
-        aria-labelledby="OptionalSizesExample3"
-      >
-        <CModalHeader>
-          <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <OptionalSizesExample />
-</Example>
-
-```jsx
-const [visibleXL, setVisibleXL] = useState(false)
-const [visibleLg, setVisibleLg] = useState(false)
-const [visibleSm, setVisibleSm] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
-    <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
-    <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
-    <CModal
-      size="xl"
-      visible={visibleXL}
-      onClose={() => setVisibleXL(false)}
-      aria-labelledby="OptionalSizesExample1"
-    >
-      <CModalHeader>
-        <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-    <CModal
-      size="lg"
-      visible={visibleLg}
-      onClose={() => setVisibleLg(false)}
-      aria-labelledby="OptionalSizesExample2"
-    >
-      <CModalHeader>
-        <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-    <CModal
-      size="sm"
-      visible={visibleSm}
-      onClose={() => setVisibleSm(false)}
-      aria-labelledby="OptionalSizesExample3"
-    >
-      <CModalHeader>
-        <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-  </>
-)
-```
-
-## Fullscreen Modal
-
-Another override is the option to pop up a React modal component that covers the user viewport, available via property `fullscrean`.
-
-| Fullscrean | Availability   |
-| ---------- | -------------- |
-| `true`     | Always         |
-| `'sm'`     | Below `576px`  |
-| `'md'`     | Below `768px`  |
-| `'lg'`     | Below `992px`  |
-| `'xl'`     | Below `1200px` |
-| `'xxl'`    | Below `1400px` |
-
-export const FullscreenExample = () => {
-  const [visible, setVisible] = useState(false)
-  const [visibleSm, setVisibleSm] = useState(false)
-  const [visibleMd, setVisibleMd] = useState(false)
-  const [visibleLg, setVisibleLg] = useState(false)
-  const [visibleXL, setVisibleXL] = useState(false)
-  const [visibleXXL, setVisibleXXL] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(!visible)}>Full screen</CButton>
-      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
-      <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
-      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
-      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
-      <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
-      <CModal
-        fullscreen
-        visible={visible}
-        onClose={() => setVisible(false)}
-        aria-labelledby="FullscreenExample1"
-      >
-        <CModalHeader>
-          <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal
-        fullscreen="sm"
-        visible={visibleSm}
-        onClose={() => setVisibleSm(false)}
-        aria-labelledby="FullscreenExample2"
-      >
-        <CModalHeader>
-          <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal
-        fullscreen="md"
-        visible={visibleMd}
-        onClose={() => setVisibleMd(false)}
-        aria-labelledby="FullscreenExample3"
-      >
-        <CModalHeader>
-          <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal
-        fullscreen="lg"
-        visible={visibleLg}
-        onClose={() => setVisibleLg(false)}
-        aria-labelledby="FullscreenExample4"
-      >
-        <CModalHeader>
-          <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal
-        fullscreen="xl"
-        visible={visibleXL}
-        onClose={() => setVisibleXL(false)}
-        aria-labelledby="FullscreenExample5"
-      >
-        <CModalHeader>
-          <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-      <CModal
-        fullscreen="xxl"
-        visible={visibleXXL}
-        onClose={() => setVisibleXXL(false)}
-        aria-labelledby="FullscreenExample6"
-      >
-        <CModalHeader>
-          <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
-        </CModalHeader>
-        <CModalBody>...</CModalBody>
-      </CModal>
-    </>
-  )
-}
-
-<Example>
-  <FullscreenExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-const [visibleSm, setVisibleSm] = useState(false)
-const [visibleMd, setVisibleMd] = useState(false)
-const [visibleLg, setVisibleLg] = useState(false)
-const [visibleXL, setVisibleXL] = useState(false)
-const [visibleXXL, setVisibleXXL] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(!visible)}>Full screen</CButton>
-    <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
-    <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
-    <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
-    <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
-    <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
-    <CModal
-      fullscreen
-      visible={visible}
-      onClose={() => setVisible(false)}
-      aria-labelledby="FullscreenExample1"
-    >
-      <CModalHeader>
-        <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-    <CModal
-      fullscreen="sm"
-      visible={visibleSm}
-      onClose={() => setVisibleSm(false)}
-      aria-labelledby="FullscreenExample2"
-    >
-      <CModalHeader>
-        <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-    <CModal
-      fullscreen="md"
-      visible={visibleMd}
-      onClose={() => setVisibleMd(false)}
-      aria-labelledby="FullscreenExample3"
-    >
-      <CModalHeader>
-        <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-    <CModal
-      fullscreen="lg"
-      visible={visibleLg}
-      onClose={() => setVisibleLg(false)}
-      aria-labelledby="FullscreenExample4"
-    >
-      <CModalHeader>
-        <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-    <CModal
-      fullscreen="xl"
-      visible={visibleXL}
-      onClose={() => setVisibleXL(false)}
-      aria-labelledby="FullscreenExample5"
-    >
-      <CModalHeader>
-        <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-    <CModal
-      fullscreen="xxl"
-      visible={visibleXXL}
-      onClose={() => setVisibleXXL(false)}
-      aria-labelledby="FullscreenExample6"
-    >
-      <CModalHeader>
-        <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
-      </CModalHeader>
-      <CModalBody>...</CModalBody>
-    </CModal>
-  </>
-)
-```
-
-## Customizing
-
-### CSS variables
-
-React modals 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.
-
-<ScssDocs file="_modal.scss" capture="modal-css-vars" />
-
-<ScssDocs file="_modal.scss" capture="modal-backdrop-css-vars" />
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
-  '--my-css-var': 10,
-  '--my-another-css-var': 'red',
-}
-return <CModal style={vars}>...</CModal>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="modal-variables" />
-
-### SASS loops
-
-[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
-
-<ScssDocs file="_modal.scss" capture="modal-fullscreen-loop" />
-
-## API
-
-### CModal
-
-`markdown:CModal.api.mdx`
-
-### CModalBody
-
-`markdown:CModalBody.api.mdx`
-
-### CModalFooter
-
-`markdown:CModalFooter.api.mdx`
-
-### CModalHeader
-
-`markdown:CModalHeader.api.mdx`
-
-### CModalTitle
-
-`markdown:CModalTitle.api.mdx`
diff --git a/packages/docs/content/components/modal/api.mdx b/packages/docs/content/components/modal/api.mdx
new file mode 100644
index 00000000..294226af
--- /dev/null
+++ b/packages/docs/content/components/modal/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Modal Component API
+name: Modal API
+description: Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization.
+route: /components/modal/
+---
+
+import CModalAPI from '../../api/CModal.api.mdx'
+import CModalBodyAPI from '../../api/CModalBody.api.mdx'
+import CModalFooterAPI from '../../api/CModalFooter.api.mdx'
+import CModalHeaderAPI from '../../api/CModalHeader.api.mdx'
+import CModalTitleAPI from '../../api/CModalTitle.api.mdx'
+
+## CModal
+
+<CModalAPI />
+
+## CModalBody
+
+<CModalBodyAPI />
+
+## CModalFooter
+
+<CModalFooterAPI />
+
+## CModalHeader
+
+<CModalHeaderAPI />
+
+## CModalTitle
+
+<CModalTitleAPI />
diff --git a/packages/docs/content/components/modal/bootstrap.mdx b/packages/docs/content/components/modal/bootstrap.mdx
new file mode 100644
index 00000000..b3a122c4
--- /dev/null
+++ b/packages/docs/content/components/modal/bootstrap.mdx
@@ -0,0 +1,135 @@
+---
+title: React Bootstrap Modal Component
+name: Modal with Bootstrap Styling
+description: Learn how to use the React Bootstrap Modal component from CoreUI to create accessible, responsive dialogs, confirmations, and popups using Bootstrap-styled modals.
+route: /components/modal/
+bootstrap_component: true
+---
+
+## How to use the React Bootstrap Modal component
+
+The React Bootstrap Modal component offers a lightweight, flexible popup for dialogs, alerts, and forms. It's fully customizable and accessible, with support for animations, scrollable content, multiple sizes, and more.
+
+### Static React Bootstrap Modal example
+
+This static modal example shows the structure of a modal with header, body, and footer content.
+
+<Example>
+  <div className="modal position-static d-block" tabIndex="-1">
+    <div className="modal-dialog">
+      <div className="modal-content">
+        <div className="modal-header">
+          <h5 className="modal-title">React Modal title</h5>
+          <button type="button" className="btn-close" aria-label="Close"></button>
+        </div>
+        <div className="modal-body">
+          <p>React Modal body text goes here.</p>
+        </div>
+        <div className="modal-footer">
+          <button type="button" className="btn btn-secondary">Close</button>
+          <button type="button" className="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</Example>
+
+```jsx
+<CModal>
+  <CModalHeader>
+    <CModalTitle>React Modal title</CModalTitle>
+  </CModalHeader>
+  <CModalBody>
+    <p>React Modal body text goes here.</p>
+  </CModalBody>
+  <CModalFooter>
+    <CButton color="secondary">Close</CButton>
+    <CButton color="primary">Save changes</CButton>
+  </CModalFooter>
+</CModal>
+```
+
+### Live demo
+
+<ExampleSnippet className="theme-bootstrap" component="ModalLiveDemoExample" componentName="React Bootstrap Modal" />
+
+### Static backdrop
+
+<ExampleSnippet className="theme-bootstrap" component="ModalStaticBackdropExample" componentName="React Bootstrap Modal" />
+
+### Scrolling long content
+
+<ExampleSnippet className="theme-bootstrap" component="ModalScrollingLongContentExample" componentName="React Bootstrap Modal" />
+
+<ExampleSnippet className="theme-bootstrap" component="ModalScrollingLongContent2Example" componentName="React Bootstrap Modal" />
+
+### Vertically centered modals
+
+<ExampleSnippet className="theme-bootstrap" component="ModalVerticallyCenteredExample" componentName="React Bootstrap Modal" />
+<ExampleSnippet className="theme-bootstrap" component="ModalVerticallyCenteredScrollableExample" componentName="React Bootstrap Modal" />
+
+### Tooltips and popovers in modals
+
+<ExampleSnippet className="theme-bootstrap" component="ModalTooltipsAndPopoversExample" componentName="React Bootstrap Modal" />
+
+### Toggle between modals
+
+<ExampleSnippet className="theme-bootstrap" component="ModalToggleBetweenModalsExample" componentName="React Bootstrap Modal" />
+
+### Change modal animation
+
+Use Sass variables like `$modal-fade-transform` and `$modal-show-transform` to customize animation. For example:
+
+```scss
+$modal-fade-transform: scale(0.8);
+```
+
+### Remove modal animation
+
+Disable animation with:
+
+```jsx
+<CModal transition={false}>...</CModal>
+```
+
+### Accessibility tips
+
+Use `aria-labelledby` and `aria-describedby` on `<CModal>` for improved screen reader support. CoreUI adds required roles and aria attributes automatically.
+
+## React Bootstrap Modal sizes
+
+Modals come in predefined sizes via the `size` prop.
+
+| Size        | Prop     | Max width |
+|-------------|----------|-----------|
+| Small       | `'sm'`   | 300px     |
+| Default     | —        | 500px     |
+| Large       | `'lg'`   | 800px     |
+| Extra large | `'xl'`   | 1140px    |
+
+<ExampleSnippet className="theme-bootstrap" component="ModalOptionalSizesExample" componentName="React Bootstrap Modal" />
+
+## Fullscreen React Bootstrap Modals
+
+Use the `fullscreen` prop to make modals expand to full viewport width/height. You can apply it conditionally based on breakpoints.
+
+| Fullscreen prop | Breakpoint         |
+|------------------|--------------------|
+| `true`           | Always             |
+| `'sm'`           | Below 576px        |
+| `'md'`           | Below 768px        |
+| `'lg'`           | Below 992px        |
+| `'xl'`           | Below 1200px       |
+| `'xxl'`          | Below 1400px       |
+
+<ExampleSnippet className="theme-bootstrap" component="ModalFullscreenExample" componentName="React Bootstrap Modal" />
+
+## API reference
+
+Explore the API for the React Bootstrap Modal component and its related parts:
+
+- [&lt;CModal /&gt;](../api/#cmodal)
+- [&lt;CModalBody /&gt;](../api/#cmodalbody)
+- [&lt;CModalFooter /&gt;](../api/#cmodalfooter)
+- [&lt;CModalHeader /&gt;](../api/#cmodalheader)
+- [&lt;CModalTitle /&gt;](../api/#cmodaltitle)
\ No newline at end of file
diff --git a/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx b/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx
new file mode 100644
index 00000000..267c0797
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalFullscreenExample = () => {
+  const [visible, setVisible] = useState(false)
+  const [visibleSm, setVisibleSm] = useState(false)
+  const [visibleMd, setVisibleMd] = useState(false)
+  const [visibleLg, setVisibleLg] = useState(false)
+  const [visibleXL, setVisibleXL] = useState(false)
+  const [visibleXXL, setVisibleXXL] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Full screen
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
+        Full screen below sm
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>
+        Full screen below md
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
+        Full screen below lg
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
+        Full screen below xl
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>
+        Full screen below xxl
+      </CButton>
+      <CModal
+        fullscreen
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="FullscreenExample1"
+      >
+        <CModalHeader>
+          <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+      <CModal
+        fullscreen="sm"
+        visible={visibleSm}
+        onClose={() => setVisibleSm(false)}
+        aria-labelledby="FullscreenExample2"
+      >
+        <CModalHeader>
+          <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+      <CModal
+        fullscreen="md"
+        visible={visibleMd}
+        onClose={() => setVisibleMd(false)}
+        aria-labelledby="FullscreenExample3"
+      >
+        <CModalHeader>
+          <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+      <CModal
+        fullscreen="lg"
+        visible={visibleLg}
+        onClose={() => setVisibleLg(false)}
+        aria-labelledby="FullscreenExample4"
+      >
+        <CModalHeader>
+          <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+      <CModal
+        fullscreen="xl"
+        visible={visibleXL}
+        onClose={() => setVisibleXL(false)}
+        aria-labelledby="FullscreenExample5"
+      >
+        <CModalHeader>
+          <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+      <CModal
+        fullscreen="xxl"
+        visible={visibleXXL}
+        onClose={() => setVisibleXXL(false)}
+        aria-labelledby="FullscreenExample6"
+      >
+        <CModalHeader>
+          <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx b/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx
new file mode 100644
index 00000000..3bd28d2f
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalLiveDemoExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
+      <CModal
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="LiveDemoExampleLabel"
+      >
+        <CModalHeader>
+          <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setVisible(false)}>
+            Close
+          </CButton>
+          <CButton color="primary">Save changes</CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx b/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx
new file mode 100644
index 00000000..a082c37a
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalOptionalSizesExample = () => {
+  const [visibleXL, setVisibleXL] = useState(false)
+  const [visibleLg, setVisibleLg] = useState(false)
+  const [visibleSm, setVisibleSm] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
+        Extra large modal
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
+        Large modal
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
+        Small modal
+      </CButton>
+      <CModal
+        size="xl"
+        visible={visibleXL}
+        onClose={() => setVisibleXL(false)}
+        aria-labelledby="OptionalSizesExample1"
+      >
+        <CModalHeader>
+          <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+      <CModal
+        size="lg"
+        visible={visibleLg}
+        onClose={() => setVisibleLg(false)}
+        aria-labelledby="OptionalSizesExample2"
+      >
+        <CModalHeader>
+          <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+      <CModal
+        size="sm"
+        visible={visibleSm}
+        onClose={() => setVisibleSm(false)}
+        aria-labelledby="OptionalSizesExample3"
+      >
+        <CModalHeader>
+          <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
+        </CModalHeader>
+        <CModalBody>...</CModalBody>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx b/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx
new file mode 100644
index 00000000..0e4d9a95
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalScrollingLongContent2Example = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Vertically centered scrollable modal
+      </CButton>
+      <CModal
+        alignment="center"
+        scrollable
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="VerticallyCenteredScrollableExample2"
+      >
+        <CModalHeader>
+          <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+          <p>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </p>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setVisible(false)}>
+            Close
+          </CButton>
+          <CButton color="primary">Save changes</CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx b/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx
new file mode 100644
index 00000000..33ab2119
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalScrollingLongContentExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
+      <CModal
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="ScrollingLongContentExampleLabel"
+      >
+        <CModalHeader>
+          <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+          <p>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </p>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+          <p>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </p>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+          <p>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </p>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+          <p>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </p>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+          <p>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </p>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+          <p>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </p>
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setVisible(false)}>
+            Close
+          </CButton>
+          <CButton color="primary">Save changes</CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx b/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx
new file mode 100644
index 00000000..859b1d89
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalStaticBackdropExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch static backdrop modal
+      </CButton>
+      <CModal
+        backdrop="static"
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="StaticBackdropExampleLabel"
+      >
+        <CModalHeader>
+          <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          I will not close if you click outside me. Don't even try to press escape key.
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setVisible(false)}>
+            Close
+          </CButton>
+          <CButton color="primary">Save changes</CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx b/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx
new file mode 100644
index 00000000..ba6af0ff
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalToggleBetweenModalsExample = () => {
+  const [visible, setVisible] = useState(false)
+  const [visible2, setVisible2] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Open first modal
+      </CButton>
+      <CModal
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="ToggleBetweenModalsExample1"
+      >
+        <CModalHeader>
+          <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          <p>Show a second modal and hide this one with the button below.</p>
+        </CModalBody>
+        <CModalFooter>
+          <CButton
+            color="primary"
+            onClick={() => {
+              setVisible(false)
+              setVisible2(true)
+            }}
+          >
+            Open second modal
+          </CButton>
+        </CModalFooter>
+      </CModal>
+      <CModal
+        visible={visible2}
+        onClick={() => {
+          setVisible(true)
+          setVisible2(false)
+        }}
+        aria-labelledby="ToggleBetweenModalsExample2"
+      >
+        <CModalHeader>
+          <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          <p>Hide this modal and show the first with the button below.</p>
+        </CModalBody>
+        <CModalFooter>
+          <CButton
+            color="primary"
+            onClick={() => {
+              setVisible(true)
+              setVisible2(false)
+            }}
+          >
+            Back to first
+          </CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx b/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx
new file mode 100644
index 00000000..46d73846
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CModal,
+  CModalBody,
+  CModalFooter,
+  CModalHeader,
+  CModalTitle,
+  CLink,
+  CPopover,
+  CTooltip,
+} from '@coreui/react'
+
+export const ModalTooltipsAndPopoversExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
+      <CModal
+        alignment="center"
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="TooltipsAndPopoverExample"
+      >
+        <CModalHeader>
+          <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          <h5>Popover in a modal</h5>
+          <p>
+            This
+            <CPopover title="Popover title" content="Popover body content is set in this property.">
+              <CButton color="primary">button</CButton>
+            </CPopover>{' '}
+            triggers a popover on click.
+          </p>
+          <hr />
+          <h5>Tooltips in a modal</h5>
+          <p>
+            <CTooltip content="Tooltip">
+              <CLink>This link</CLink>
+            </CTooltip>{' '}
+            and
+            <CTooltip content="Tooltip">
+              <CLink>that link</CLink>
+            </CTooltip>{' '}
+            have tooltips on hover.
+          </p>
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setVisible(false)}>
+            Close
+          </CButton>
+          <CButton color="primary">Save changes</CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx
new file mode 100644
index 00000000..f2f43f4e
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalVerticallyCenteredExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Vertically centered modal
+      </CButton>
+      <CModal
+        alignment="center"
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="VerticallyCenteredExample"
+      >
+        <CModalHeader>
+          <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setVisible(false)}>
+            Close
+          </CButton>
+          <CButton color="primary">Save changes</CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx
new file mode 100644
index 00000000..0cc92aea
--- /dev/null
+++ b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
+
+export const ModalVerticallyCenteredScrollableExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Vertically centered scrollable modal
+      </CButton>
+      <CModal
+        alignment="center"
+        scrollable
+        visible={visible}
+        onClose={() => setVisible(false)}
+        aria-labelledby="VerticallyCenteredScrollableExample2"
+      >
+        <CModalHeader>
+          <CModalTitle id="VerticallyCenteredScrollableExample2">Modal title</CModalTitle>
+        </CModalHeader>
+        <CModalBody>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+          <p>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </p>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </p>
+          <p>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </p>
+        </CModalBody>
+        <CModalFooter>
+          <CButton color="secondary" onClick={() => setVisible(false)}>
+            Close
+          </CButton>
+          <CButton color="primary">Save changes</CButton>
+        </CModalFooter>
+      </CModal>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/modal/index.mdx b/packages/docs/content/components/modal/index.mdx
new file mode 100644
index 00000000..3ff5a3b0
--- /dev/null
+++ b/packages/docs/content/components/modal/index.mdx
@@ -0,0 +1,146 @@
+---
+title: React Modal Component
+name: Modal
+description: React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial.
+route: /components/modal/
+other_frameworks: modal
+---
+
+## How to use React Modal Component?
+
+### Static modal component example
+
+Below is a static react modal component example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include react modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
+
+<Example>
+  <div className="modal position-static d-block" tabIndex="-1">
+    <div className="modal-dialog">
+      <div className="modal-content">
+        <div className="modal-header">
+          <h5 className="modal-title">React Modal title</h5>
+          <button type="button" className="btn-close" aria-label="Close"></button>
+        </div>
+        <div className="modal-body">
+          <p>React Modal body text goes here.</p>
+        </div>
+        <div className="modal-footer">
+          <button type="button" className="btn btn-secondary">Close</button>
+          <button type="button" className="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</Example>
+```jsx
+<CModal>
+  <CModalHeader>
+    <CModalTitle>React Modal title</CModalTitle>
+  </CModalHeader>
+  <CModalBody>
+    <p>React Modal body text goes here.</p>
+  </CModalBody>
+  <CModalFooter>
+    <CButton color="secondary">Close</CButton>
+    <CButton color="primary">Save changes</CButton>
+  </CModalFooter>
+</CModal>
+```
+
+### Live demo
+
+Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page.
+
+<ExampleSnippet component="ModalLiveDemoExample" componentName="React Modal" />
+
+### Static backdrop
+
+If you set a `backdrop` to `static`, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.
+
+<ExampleSnippet component="ModalStaticBackdropExample" componentName="React Modal" />
+
+### Scrolling long content
+
+When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
+
+<ExampleSnippet component="ModalScrollingLongContentExample" componentName="React Modal" />
+
+You can also create a scrollable react modal component that allows scroll the modal body by adding `scrollable` prop.
+
+<ExampleSnippet component="ModalScrollingLongContent2Example" componentName="React Modal" />
+
+### Vertically centered
+
+Add `alignment="center` to `<CModal>` to vertically center the React modal.
+
+<ExampleSnippet component="ModalVerticallyCenteredExample" componentName="React Modal" />
+
+<ExampleSnippet component="ModalVerticallyCenteredScrollableExample" componentName="React Modal" />
+
+### Tooltips and popovers
+
+`<CTooltips>` and `<CPopovers>` can be placed within react modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed.
+
+<ExampleSnippet component="ModalTooltipsAndPopoversExample" componentName="React Modal" />
+
+### Toggle between modals
+
+Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals.
+
+<ExampleSnippet component="ModalToggleBetweenModalsExample" componentName="React Modal" />
+
+### Change animation
+
+The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation.
+
+If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`.
+
+### Remove animation
+
+For modals that simply appear rather than fade into view, set `transition` to `false`.
+
+```jsx
+<CModal transition={false}>...</CModal>
+```
+
+### Accessibility
+
+Be sure to add `aria-labelledby="..."`, referencing the modal title, to `<CModal />` Additionally, you may give a description of your modal dialog with `aria-describedby` on `<CModal>`. Note that you don’t need to add `role="dialog`, `aria-hidden="true"`, and `aria-modal="true"` since we already add it.
+
+## Optional sizes
+
+Modals have three optional sizes, available via modifier classes to be placed on a `<CModal>`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
+
+
+| Size        | Property size | Modal max-width |
+| ----------- | ------------- | --------------- |
+| Small       | `'sm'`        | `300px`         |
+| Default     | None          | `500px`         |
+| Large       | `'lg'`        | `800px`         |
+| Extra large | `'xl'`        | `1140px`        |
+
+<ExampleSnippet component="ModalOptionalSizesExample" componentName="React Modal" />
+
+## Fullscreen Modal
+
+Another override is the option to pop up a React modal component that covers the user viewport, available via property `fullscrean`.
+
+| Fullscrean | Availability   |
+| ---------- | -------------- |
+| `true`     | Always         |
+| `'sm'`     | Below `576px`  |
+| `'md'`     | Below `768px`  |
+| `'lg'`     | Below `992px`  |
+| `'xl'`     | Below `1200px` |
+| `'xxl'`    | Below `1400px` |
+
+<ExampleSnippet component="ModalFullscreenExample" componentName="React Modal" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CModal /&gt;](./api/#cmodal)
+- [&lt;CModalBody /&gt;](./api/#cmodalbody)
+- [&lt;CModalFooter /&gt;](./api/#cmodalfooter)
+- [&lt;CModalHeader /&gt;](./api/#cmodalheader)
+- [&lt;CModalTitle /&gt;](./api/#cmodaltitle)
diff --git a/packages/docs/content/components/modal/styling.mdx b/packages/docs/content/components/modal/styling.mdx
new file mode 100644
index 00000000..41200c16
--- /dev/null
+++ b/packages/docs/content/components/modal/styling.mdx
@@ -0,0 +1,35 @@
+---
+title: React Modal Component Styling
+name: Modal Styling
+description: Learn how to customize the React Modal component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/modal/
+---
+
+### CSS variables
+
+React Modal supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_modal.scss" capture="modal-css-vars" />
+
+<ScssDocs file="_modal.scss" capture="modal-backdrop-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-modal-color': '#555',
+  '--cui-modal-bg': '#efefef',
+}
+
+return <CModal style={customVars}>{/* Modal content */}</CModal>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="modal-variables" />
+
+### SASS loops
+
+[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
+
+<ScssDocs file="_modal.scss" capture="modal-fullscreen-loop" />
diff --git a/packages/docs/content/components/navbar.mdx b/packages/docs/content/components/navbar.mdx
deleted file mode 100644
index 3cf2d2cf..00000000
--- a/packages/docs/content/components/navbar.mdx
+++ /dev/null
@@ -1,1475 +0,0 @@
----
-title: React Navbar Component
-name: Navbar
-description: Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
-menu: Components
-route: /components/navbar
-other_frameworks: navbar
----
-
-import { useState } from 'react'
-import {
-  CButton,
-  CContainer,
-  CCloseButton,
-  CCollapse,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CForm,
-  CFormInput,
-  CInputGroup,
-  CInputGroupText,
-  CNav,
-  CNavItem,
-  CNavLink,
-  CNavbar,
-  CNavbarBrand,
-  CNavbarNav,
-  CNavbarText,
-  CNavbarToggler,
-  COffcanvas,
-  COffcanvasBody,
-  COffcanvasHeader,
-  COffcanvasTitle,
-} from '@coreui/react/src/index'
-
-import CoreUISignetImg from './../assets/images/brand/coreui-signet.svg'
-
-## Supported content
-
-`<CNavbar>` come with built-in support for a handful of sub-components. Choose from the following as needed:
-
-- `<CNavbarBrand>` for your company, product, or project name.
-- `<CNavbarNav>` for a full-height and lightweight navigation (including support for dropdowns).
-- `<CNavbarToggler>` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
-- Flex and spacing utilities for any form controls and actions.
-- `<CNavbarText>` for adding vertically centered strings of text.
-- `<CCollapse>` for grouping and hiding navbar contents by a parent breakpoint.
-
-Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
-
-## Basic usage
-
-export const BasicUsageExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CNavbar expand="lg" className="bg-body-tertiary">
-        <CContainer fluid>
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CNavbarToggler onClick={() => setVisible(!visible)} />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item" popper={false}>
-                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="success" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <BasicUsageExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CNavbar expand="lg" className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CNavbarToggler onClick={() => setVisible(!visible)} />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CDropdown variant="nav-item" popper={false}>
-              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="success" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-### Brand
-
-The `<CNavbarBrand>` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CContainer fluid>
-    <CNavbarBrand href="#">Navbar</CNavbarBrand>
-  </CContainer>
-</CNavbar>
-<br/>
-<CNavbar className="bg-body-tertiary">
-  <CContainer fluid>
-    <CNavbarBrand className="mb-0 h1">Navbar</CNavbarBrand>
-  </CContainer>
-</CNavbar>
-```
-
-Adding images to the `<CNavbarBrand>` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CContainer fluid>
-    <CNavbarBrand href="#">
-      <img src={CoreUISignetImg} alt="" width="22" height="24" />
-    </CNavbarBrand>
-  </CContainer>
-</CNavbar>
-```
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CContainer fluid>
-    <CNavbarBrand href="#">
-      <img
-        src={CoreUISignetImg}
-        alt=""
-        width="22"
-        height="24"
-        className="d-inline-block align-top"
-      /> CoreUI
-    </CNavbarBrand>
-  </CContainer>
-</CNavbar>
-```
-
-### Nav
-
-`<CNavbar>` navigation is based on `<CNavbarNav>`. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
-
-export const NavExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CNavbar expand="lg" className="bg-body-tertiary">
-        <CContainer fluid>
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Features</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Pricing</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <NavExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CNavbar expand="lg" className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Features</CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Pricing</CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
-
-export const NavExample2 = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CNavbar expand="lg" className="bg-body-tertiary">
-        <CContainer fluid>
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav as="nav">
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-              <CNavLink href="#">Features</CNavLink>
-              <CNavLink href="#">Pricing</CNavLink>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavbarNav>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <NavExample2 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CNavbar expand="lg" className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav as="nav">
-            <CNavLink href="#" active>
-              Home
-            </CNavLink>
-            <CNavLink href="#">Features</CNavLink>
-            <CNavLink href="#">Pricing</CNavLink>
-            <CNavLink href="#" disabled>
-              Disabled
-            </CNavLink>
-          </CNavbarNav>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-You can also use dropdowns in your navbar. Please note that `<CDropdown>` component requires `variant="nav-item"`.
-
-export const NavDropdownExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CNavbar expand="lg" className="bg-body-tertiary">
-        <CContainer fluid>
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Features</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Pricing</CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item" popper={false}>
-                <CDropdownToggle>Dropdown link</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </CNavbarNav>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <NavDropdownExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CNavbar expand="lg" className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Features</CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Pricing</CNavLink>
-            </CNavItem>
-            <CDropdown variant="nav-item" popper={false}>
-              <CDropdownToggle>Dropdown link</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          </CNavbarNav>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-### Forms
-
-Place various form controls and components within a navbar:
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CContainer fluid>
-    <CForm className="d-flex">
-      <CFormInput type="search" className="me-2" placeholder="Search" />
-      <CButton type="submit" color="success" variant="outline">
-        Search
-      </CButton>
-    </CForm>
-  </CContainer>
-</CNavbar>
-```
-
-Immediate child elements of `<CNavbar>` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/docs/utilities/flex/) as needed to adjust this behavior.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CContainer fluid>
-    <CNavbarBrand href="#">Navbar</CNavbarBrand>
-    <CForm className="d-flex">
-      <CFormInput type="search" className="me-2" placeholder="Search" />
-      <CButton type="submit" color="success" variant="outline">
-        Search
-      </CButton>
-    </CForm>
-  </CContainer>
-</CNavbar>
-```
-
-Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<CForm>` element as the container and save some HTML.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CForm className="container-fluid">
-    <CInputGroup>
-      <CInputGroupText id="basic-addon1">@</CInputGroupText>
-      <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
-    </CInputGroup>
-  </CForm>
-</CNavbar>
-```
-
-Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CForm className="container-fluid justify-content-start">
-    <CButton type="button" color="success" variant="outline" className="me-2">
-      Main button
-    </CButton>
-    <CButton type="button" color="secondary" variant="outline" size="sm">
-      Smaller button
-    </CButton>
-  </CForm>
-</CNavbar>
-```
-
-### Text
-
-Navbars may contain bits of text with the help of `<CNavbarText>`. This class adjusts vertical alignment and horizontal spacing for strings of text.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CContainer fluid>
-    <CNavbarText>Navbar text with an inline element</CNavbarText>
-  </CContainer>
-</CNavbar>
-```
-
-## Color schemes
-
-Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Set `colorScheme="light"` for use with light background colors, or `colorScheme="dark"` for dark background colors. Then, customize with `.bg-*` utilities.
-
-export const ColorSchemesExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
-        <CContainer fluid>
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item" popper={false}>
-                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="light" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-      <br />
-      <CNavbar expand="lg" colorScheme="dark" className="bg-primary">
-        <CContainer fluid>
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item" popper={false}>
-                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="light" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-      <br />
-      <CNavbar expand="lg" colorScheme="light" style={{ backgroundColor: '#e3f2fd' }}>
-        <CContainer fluid>
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item" popper={false}>
-                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="primary" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <ColorSchemesExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
-      <CContainer fluid>
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CDropdown variant="nav-item" popper={false}>
-              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="light" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-    <CNavbar expand="lg" colorScheme="dark" className="bg-primary">
-      <CContainer fluid>
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CDropdown variant="nav-item" popper={false}>
-              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="light" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-    <CNavbar expand="lg" colorScheme="light" style={{ backgroundColor: '#e3f2fd' }}>
-      <CContainer fluid>
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CDropdown variant="nav-item" popper={false}>
-              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="primary" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-## Containers
-
-Although it's not required, you can wrap a `<CNavbar>` in a `<CContainer>` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `<CNavbar>` to only center the contents of a [fixed or static top navbar](#placement).
-
-```jsx preview
-<CContainer>
-  <CNavbar className="bg-body-tertiary">
-    <CContainer fluid>
-      <CNavbarBrand href="#">Navbar</CNavbarBrand>
-    </CContainer>
-  </CNavbar>
-</CContainer>
-```
-
-Use any of the responsive containers to change how wide the content in your navbar is presented.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CContainer breakpoint="md">
-    <CNavbarBrand href="#">Navbar</CNavbarBrand>
-  </CContainer>
-</CNavbar>
-```
-
-## Placement
-
-Use our `placement` properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
-
-Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**.
-
-```jsx preview
-<CNavbar className="bg-body-tertiary">
-  <CContainer fluid>
-    <CNavbarBrand href="#">Default</CNavbarBrand>
-  </CContainer>
-</CNavbar>
-```
-
-```jsx preview
-<CNavbar className="bg-body-tertiary" placement="fixed-top">
-  <CContainer fluid>
-    <CNavbarBrand href="#">Fixed top</CNavbarBrand>
-  </CContainer>
-</CNavbar>
-```
-
-```jsx preview
-<CNavbar className="bg-body-tertiary" placement="fixed-bottom">
-  <CContainer fluid>
-    <CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
-  </CContainer>
-</CNavbar>
-```
-
-```jsx preview
-<CNavbar className="bg-body-tertiary" placement="sticky-top">
-  <CContainer fluid>
-    <CNavbarBrand href="#">Sticky top</CNavbarBrand>
-  </CContainer>
-</CNavbar>
-```
-
-## Responsive behaviors
-
-Navbars can use `<CNavbarToggler>`, `<CCollapse>`, and `expand="{sm|md|lg|xl|xxl}"` property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
-
-For navbars that never collapse, add the `expand` boolean property on the `<CNavbar>`. For navbars that always collapse, don't add any property.
-
-### Toggler
-
-Navbar togglers are left-aligned by default, but should they follow a sibling element like a `<CNavbarBrand>`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
-
-With no `<CNavbarBrand>` shown at the smallest breakpoint:
-
-export const ResponsiveBehaviorsExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CNavbar expand="lg" className="bg-body-tertiary">
-        <CContainer fluid>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
-            <CNavbarNav className="me-auto mb-2 mb-lg-0">
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="success" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <ResponsiveBehaviorsExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CNavbar expand="lg" className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
-          <CNavbarNav className="me-auto mb-2 mb-lg-0">
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="success" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-With a brand name shown on the left and toggler on the right:
-
-export const ResponsiveBehaviorsExample2 = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CNavbar expand="lg" className="bg-body-tertiary">
-        <CContainer fluid>
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav className="me-auto mb-2 mb-lg-0">
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="success" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <ResponsiveBehaviorsExample2 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CNavbar expand="lg" className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav className="me-auto mb-2 mb-lg-0">
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="success" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-With a toggler on the left and brand name on the right:
-
-export const ResponsiveBehaviorsExample3 = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CNavbar expand="lg" className="bg-body-tertiary">
-        <CContainer fluid>
-          <CNavbarToggler
-            aria-label="Toggle navigation"
-            aria-expanded={visible}
-            onClick={() => setVisible(!visible)}
-          />
-          <CNavbarBrand href="#">Navbar</CNavbarBrand>
-          <CCollapse className="navbar-collapse" visible={visible}>
-            <CNavbarNav className="me-auto mb-2 mb-lg-0">
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="success" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </CCollapse>
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <ResponsiveBehaviorsExample3 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CNavbar expand="lg" className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarToggler
-          aria-label="Toggle navigation"
-          aria-expanded={visible}
-          onClick={() => setVisible(!visible)}
-        />
-        <CNavbarBrand href="#">Navbar</CNavbarBrand>
-        <CCollapse className="navbar-collapse" visible={visible}>
-          <CNavbarNav className="me-auto mb-2 mb-lg-0">
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="success" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </CCollapse>
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-### External content
-
-Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `<CNavbar>`.
-
-export const ExternalContentExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CCollapse id="navbarToggleExternalContent" visible={visible} data-coreui-theme="dark">
-        <div className="bg-dark p-4">
-          <h5 className="text-body-emphasis h4">Collapsed content</h5>
-          <span className="text-body-secondary">Toggleable via the navbar brand.</span>
-        </div>
-      </CCollapse>
-      <CNavbar colorScheme="dark" className="bg-dark">
-        <CContainer fluid>
-          <CNavbarToggler
-            aria-controls="navbarToggleExternalContent"
-            aria-label="Toggle navigation"
-            onClick={() => setVisible(!visible)}
-          />
-        </CContainer>
-      </CNavbar>
-    </>
-  )
-}
-
-<Example>
-  <ExternalContentExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CCollapse id="navbarToggleExternalContent" visible={visible} data-coreui-theme="dark">
-      <div className="bg-dark p-4">
-        <h5 className="text-body-emphasis h4">Collapsed content</h5>
-        <span className="text-body-secondary">Toggleable via the navbar brand.</span>
-      </div>
-    </CCollapse>
-    <CNavbar colorScheme="dark" className="bg-dark">
-      <CContainer fluid>
-        <CNavbarToggler
-          aria-controls="navbarToggleExternalContent"
-          aria-label="Toggle navigation"
-          onClick={() => setVisible(!visible)}
-        />
-      </CContainer>
-    </CNavbar>
-  </>
-)
-```
-
-### Offcanvas
-
-Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar.
-
-In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely.
-
-export const OffcanvasExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <CNavbar className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-controls="offcanvasNavbar"
-          aria-label="Toggle navigation"
-          onClick={() => setVisible(!visible)}
-        />
-        <COffcanvas id="offcanvasNavbar" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
-          <COffcanvasHeader>
-            <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-            <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-          </COffcanvasHeader>
-          <COffcanvasBody>
-            <CNavbarNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item" popper={false}>
-                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="success" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </COffcanvasBody>
-        </COffcanvas>
-      </CContainer>
-    </CNavbar>
-  )
-}
-
-<Example>
-  <OffcanvasExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <CNavbar className="bg-body-tertiary">
-    <CContainer fluid>
-      <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
-      <CNavbarToggler
-        aria-controls="offcanvasNavbar"
-        aria-label="Toggle navigation"
-        onClick={() => setVisible(!visible)}
-      />
-      <COffcanvas id="offcanvasNavbar" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          <CNavbarNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CDropdown variant="nav-item" popper={false}>
-              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="success" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </COffcanvasBody>
-      </COffcanvas>
-    </CContainer>
-  </CNavbar>
-)
-```
-
-To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property.
-
-export const OffcanvasExample2 = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <CNavbar className="bg-body-tertiary" expand="xxl">
-      <CContainer fluid>
-        <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
-        <CNavbarToggler
-          aria-controls="offcanvasNavbar2"
-          aria-label="Toggle navigation"
-          onClick={() => setVisible(!visible)}
-        />
-        <COffcanvas id="offcanvasNavbar2" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
-          <COffcanvasHeader>
-            <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-            <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-          </COffcanvasHeader>
-          <COffcanvasBody>
-            <CNavbarNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item" popper={false}>
-                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CNavItem>
-                <CNavLink href="#" disabled>
-                  Disabled
-                </CNavLink>
-              </CNavItem>
-            </CNavbarNav>
-            <CForm className="d-flex">
-              <CFormInput type="search" className="me-2" placeholder="Search" />
-              <CButton type="submit" color="success" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </COffcanvasBody>
-        </COffcanvas>
-      </CContainer>
-    </CNavbar>
-  )
-}
-
-<Example>
-  <OffcanvasExample2 />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <CNavbar className="bg-body-tertiary" expand="xxl">
-    <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
-    <CContainer fluid>
-      <CNavbarToggler
-        aria-controls="offcanvasNavbar2"
-        aria-label="Toggle navigation"
-        onClick={() => setVisible(!visible)}
-      />
-      <COffcanvas id="offcanvasNavbar2" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          <CNavbarNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CDropdown variant="nav-item" popper={false}>
-              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CNavItem>
-              <CNavLink href="#" disabled>
-                Disabled
-              </CNavLink>
-            </CNavItem>
-          </CNavbarNav>
-          <CForm className="d-flex">
-            <CFormInput type="search" className="me-2" placeholder="Search" />
-            <CButton type="submit" color="success" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </COffcanvasBody>
-      </COffcanvas>
-    </CContainer>
-  </CNavbar>
-)
-```
-
-## Customizing
-
-### CSS variables
-
-React navbars 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.
-
-<ScssDocs file="_navbar.scss" capture="navbar-css-vars"/>
-
-Some additional CSS variables are also present on `.navbar-nav`:
-
-<ScssDocs file="_navbar.scss" capture="navbar-nav-css-vars"/>
-
-Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
-
-<ScssDocs file="_navbar.scss" capture="navbar-dark-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CNavbar style={vars}>...</CNavbar>
-```
-
-### SASS variables
-
-Variables for all navbars:
-
-<ScssDocs file="_variables.scss" capture="navbar-variables"/>
-
-Variables for the [dark navbar](#color-schemes):
-
-<ScssDocs file="_variables.scss" capture="navbar-dark-variables"/>
-
-### SASS loops
-
-[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
-
-<ScssDocs file="_navbar.scss" capture="navbar-expand-loop"/>
-
-## API
-
-### CNavbar
-
-`markdown:CNavbar.api.mdx`
-
-### CNavbarBrand
-
-`markdown:CNavbarBrand.api.mdx`
-
-### CNavbarNav
-
-`markdown:CNavbarNav.api.mdx`
-
-### CNavbarText
-
-`markdown:CNavbarText.api.mdx`
-
-### CNavbarToggler
-
-`markdown:CNavbarToggler.api.mdx`
diff --git a/packages/docs/content/components/navbar/api.mdx b/packages/docs/content/components/navbar/api.mdx
new file mode 100644
index 00000000..5170c089
--- /dev/null
+++ b/packages/docs/content/components/navbar/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Navbar Component API
+name: Navbar API
+description: Explore the API reference for the React Navbar component and discover how to effectively utilize its props for customization.
+route: /components/navbar/
+---
+
+import CNavbarAPI from '../../api/CNavbar.api.mdx'
+import CNavbarBrandAPI from '../../api/CNavbarBrand.api.mdx'
+import CNavbarNavAPI from '../../api/CNavbarNav.api.mdx'
+import CNavbarTextAPI from '../../api/CNavbarText.api.mdx'
+import CNavbarTogglerAPI from '../../api/CNavbarToggler.api.mdx'
+
+## CNavbar
+
+<CNavbarAPI />
+
+## CNavbarBrand
+
+<CNavbarBrandAPI />
+
+## CNavbarNav
+
+<CNavbarNavAPI />
+
+## CNavbarText
+
+<CNavbarTextAPI />
+
+## CNavbarToggler
+
+<CNavbarTogglerAPI />
diff --git a/packages/docs/content/components/navbar/bootstrap.mdx b/packages/docs/content/components/navbar/bootstrap.mdx
new file mode 100644
index 00000000..7d383817
--- /dev/null
+++ b/packages/docs/content/components/navbar/bootstrap.mdx
@@ -0,0 +1,105 @@
+---
+title: React Bootstrap Navbar Component
+name: Navbar with Bootstrap Styling
+description: Learn how to use the React Bootstrap Navbar component from CoreUI to create responsive navigation headers with branding, dropdowns, collapsible content, and placement options.
+route: /components/navbar/
+bootstrap_component: true
+---
+
+## Supported subcomponents in React Bootstrap Navbar
+
+The React Bootstrap Navbar component includes flexible subcomponents for building responsive headers:
+
+- `<CNavbarBrand>` – branding/logo.
+- `<CNavbarNav>` – navigation links and dropdowns.
+- `<CNavbarToggler>` – toggles content collapse.
+- `<CNavbarText>` – inline text.
+- `<CCollapse>` – groups and hides navbar content.
+
+## Basic usage of React Bootstrap Navbar
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarExample" componentName="React Bootstrap Navbar" />
+
+### Branding
+
+Use `<CNavbarBrand>` to display your brand name or logo.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarBrandExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarBrand2Example" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarBrand3Example" componentName="React Bootstrap Navbar" />
+
+### Navigation links and dropdowns
+
+Navigation inside the React Bootstrap Navbar uses `<CNavbarNav>`.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarNavExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarNav2Example" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarNav3Example" componentName="React Bootstrap Navbar" />
+
+### Forms in navbars
+
+Include inputs, buttons, or entire forms in your navbar layout.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarFormsExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarForms2Example" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarForms3Example" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarForms4Example" componentName="React Bootstrap Navbar" />
+
+### Text in navbars
+
+Use `<CNavbarText>` for inline text blocks.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarText" componentName="React Bootstrap Navbar" />
+
+## React Bootstrap Navbar color schemes
+
+Use `colorScheme="light"` or `colorScheme="dark"` combined with `.bg-*` utilities for full control of background and text colors.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarColorSchemesExample" componentName="React Bootstrap Navbar" />
+
+## Containers
+
+Wrap your navbar in a `<CContainer>` to center its content or apply spacing.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarContainersExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarContainers2Example" componentName="React Bootstrap Navbar" />
+
+## Navbar placement
+
+Use the `placement` prop to fix navbars to the top or bottom or make them sticky.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarPlacementExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap p-4 overflow-hidden" component="NavbarPlacementFixedTopExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap p-4" component="NavbarPlacementFixedBottomExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap p-4 overflow-hidden" component="NavbarPlacementStickyTopExample" componentName="React Bootstrap Navbar" />
+
+## Responsive behaviors in React Bootstrap Navbar
+
+Use `expand` prop to control when the navbar collapses:
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveTogglerExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveToggler2Example" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveToggler3Example" componentName="React Bootstrap Navbar" />
+
+### External content
+
+You can toggle external containers using collapse plugins.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveExternalContentExample" componentName="React Bootstrap Navbar" />
+
+### Offcanvas navbars
+
+Turn the responsive navbar into an offcanvas drawer with `expand="*"` or `expand="xxl"`.
+
+<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveOffcanvasExample" componentName="React Bootstrap Navbar" />
+<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveOffcanvas2Example" componentName="React Bootstrap Navbar" />
+
+## API reference
+
+Explore the full API for React Bootstrap Navbar components:
+
+- [&lt;CNavbar /&gt;](../api/#cnavbar)
+- [&lt;CNavbarBrand /&gt;](../api/#cnavbarbrand)
+- [&lt;CNavbarNav /&gt;](../api/#cnavbarnav)
+- [&lt;CNavbarText /&gt;](../api/#cnavbartext)
+- [&lt;CNavbarToggler /&gt;](../api/#cnavbartoggler)
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx
new file mode 100644
index 00000000..9ebf13c2
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarBrand2Example = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer fluid>
+        <CNavbarBrand href="#">
+          <img
+            src={withPrefix('/images/brand/coreui-signet.svg')}
+            alt="CoreUI Signet"
+            width="22"
+            height="24"
+          />
+        </CNavbarBrand>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx
new file mode 100644
index 00000000..f8668e9d
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarBrand3Example = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer fluid>
+        <CNavbarBrand href="#">
+          <img
+            src={withPrefix('/images/brand/coreui-signet.svg')}
+            alt="CoreUI Signet"
+            width="22"
+            height="24"
+          />{' '}
+          CoreUI
+        </CNavbarBrand>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx b/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx
new file mode 100644
index 00000000..a351cf18
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarBrandExample = () => {
+  return (
+    <>
+      {/* As a link */}
+      <CNavbar className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+        </CContainer>
+      </CNavbar>
+
+      {/* As a heading */}
+      <CNavbar className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarBrand className="mb-0 h1">Navbar</CNavbarBrand>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx b/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx
new file mode 100644
index 00000000..6c53aca8
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx
@@ -0,0 +1,155 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCollapse,
+  CContainer,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CForm,
+  CFormInput,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavbarColorSchemesExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav className="me-auto">
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Link</CNavLink>
+              </CNavItem>
+              <CDropdown variant="nav-item" popper={false}>
+                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+            <CForm className="d-flex">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="light" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+      <br />
+      <CNavbar expand="lg" colorScheme="dark" className="bg-primary">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav className="me-auto">
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Link</CNavLink>
+              </CNavItem>
+              <CDropdown variant="nav-item" popper={false}>
+                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+            <CForm className="d-flex">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="light" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+      <br />
+      <CNavbar expand="lg" colorScheme="light" style={{ backgroundColor: '#e3f2fd' }}>
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav className="me-auto">
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Link</CNavLink>
+              </CNavItem>
+              <CDropdown variant="nav-item" popper={false}>
+                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+            <CForm className="d-flex">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="primary" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx
new file mode 100644
index 00000000..ed6e3978
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarContainers2Example = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer md>
+        <CNavbarBrand href="#">Navbar</CNavbarBrand>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx b/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx
new file mode 100644
index 00000000..dbe22b98
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarContainersExample = () => {
+  return (
+    <CContainer>
+      <CNavbar className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+        </CContainer>
+      </CNavbar>
+    </CContainer>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarExample.tsx b/packages/docs/content/components/navbar/examples/NavbarExample.tsx
new file mode 100644
index 00000000..2376135f
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarExample.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCollapse,
+  CContainer,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CForm,
+  CFormInput,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavbarExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <CNavbar expand="lg" className="bg-body-tertiary">
+      <CContainer fluid>
+        <CNavbarBrand href="#">Navbar</CNavbarBrand>
+        <CNavbarToggler onClick={() => setVisible(!visible)} />
+        <CCollapse className="navbar-collapse" visible={visible}>
+          <CNavbarNav className="me-auto">
+            <CNavItem>
+              <CNavLink href="#" active>
+                Home
+              </CNavLink>
+            </CNavItem>
+            <CNavItem>
+              <CNavLink href="#">Link</CNavLink>
+            </CNavItem>
+            <CDropdown variant="nav-item" popper={false}>
+              <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem href="#">Action</CDropdownItem>
+                <CDropdownItem href="#">Another action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem href="#">Something else here</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CNavItem>
+              <CNavLink href="#" disabled>
+                Disabled
+              </CNavLink>
+            </CNavItem>
+          </CNavbarNav>
+          <CForm className="d-flex">
+            <CFormInput type="search" className="me-2" placeholder="Search" />
+            <CButton type="submit" color="success" variant="outline">
+              Search
+            </CButton>
+          </CForm>
+        </CCollapse>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx
new file mode 100644
index 00000000..727ff2af
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton, CContainer, CForm, CFormInput, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarForms2Example = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer fluid>
+        <CNavbarBrand href="#">Navbar</CNavbarBrand>
+        <CForm className="d-flex">
+          <CFormInput type="search" className="me-2" placeholder="Search" />
+          <CButton type="submit" color="success" variant="outline">
+            Search
+          </CButton>
+        </CForm>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx
new file mode 100644
index 00000000..55bbf35f
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CForm, CFormInput, CInputGroup, CInputGroupText, CNavbar } from '@coreui/react'
+
+export const NavbarForms3Example = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CForm className="container-fluid">
+        <CInputGroup>
+          <CInputGroupText id="basic-addon1">@</CInputGroupText>
+          <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
+        </CInputGroup>
+      </CForm>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx
new file mode 100644
index 00000000..cf58e561
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CButton, CForm, CNavbar } from '@coreui/react'
+
+export const NavbarForms4Example = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CForm className="container-fluid justify-content-start">
+        <CButton type="button" color="success" variant="outline" className="me-2">
+          Main button
+        </CButton>
+        <CButton type="button" color="secondary" variant="outline" size="sm">
+          Smaller button
+        </CButton>
+      </CForm>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx b/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx
new file mode 100644
index 00000000..2b1e28c6
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CButton, CContainer, CForm, CFormInput, CNavbar } from '@coreui/react'
+
+export const NavbarFormsExample = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer fluid>
+        <CForm className="d-flex">
+          <CFormInput type="search" className="me-2" placeholder="Search" />
+          <CButton type="submit" color="success" variant="outline">
+            Search
+          </CButton>
+        </CForm>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx
new file mode 100644
index 00000000..55711a87
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import {
+  CCollapse,
+  CContainer,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavbarNav2Example = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav as="nav">
+              <CNavLink href="#" active>
+                Home
+              </CNavLink>
+              <CNavLink href="#">Features</CNavLink>
+              <CNavLink href="#">Pricing</CNavLink>
+              <CNavLink href="#" disabled>
+                Disabled
+              </CNavLink>
+            </CNavbarNav>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx
new file mode 100644
index 00000000..680917b9
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import {
+  CCollapse,
+  CContainer,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavbarNav3Example = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav>
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Features</CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Pricing</CNavLink>
+              </CNavItem>
+              <CDropdown variant="nav-item" popper={false}>
+                <CDropdownToggle>Dropdown link</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </CNavbarNav>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx b/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx
new file mode 100644
index 00000000..2fecb2ae
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import {
+  CCollapse,
+  CContainer,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavbarNavExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav>
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Features</CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Pricing</CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx
new file mode 100644
index 00000000..7c40977e
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarPlacementExample = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer fluid>
+        <CNavbarBrand href="#">Default</CNavbarBrand>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx
new file mode 100644
index 00000000..a7d302f1
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarPlacementFixedBottomExample = () => {
+  return (
+    <CNavbar className="bg-body-tertiary" placement="fixed-bottom">
+      <CContainer fluid>
+        <CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx
new file mode 100644
index 00000000..38ad1b61
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarPlacementFixedTopExample = () => {
+  return (
+    <CNavbar className="bg-body-tertiary" placement="fixed-top">
+      <CContainer fluid>
+        <CNavbarBrand href="#">Fixed top</CNavbarBrand>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx
new file mode 100644
index 00000000..470ac1a2
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+export const NavbarPlacementStickyTopExample = () => {
+  return (
+    <CNavbar className="bg-body-tertiary" placement="sticky-top">
+      <CContainer fluid>
+        <CNavbarBrand href="#">Sticky top</CNavbarBrand>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx
new file mode 100644
index 00000000..98e6b7eb
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { CCollapse, CContainer, CNavbar, CNavbarToggler } from '@coreui/react'
+
+export const NavbarResponsiveExternalContentExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CCollapse id="navbarToggleExternalContent" visible={visible} data-coreui-theme="dark">
+        <div className="bg-dark p-4">
+          <h5 className="text-body-emphasis h4">Collapsed content</h5>
+          <span className="text-body-secondary">Toggleable via the navbar brand.</span>
+        </div>
+      </CCollapse>
+      <CNavbar colorScheme="dark" className="bg-dark">
+        <CContainer fluid>
+          <CNavbarToggler
+            aria-controls="navbarToggleExternalContent"
+            aria-label="Toggle navigation"
+            onClick={() => setVisible(!visible)}
+          />
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx
new file mode 100644
index 00000000..89300d73
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  CContainer,
+  CDropdown,
+  CDropdownItem,
+  CDropdownDivider,
+  CDropdownMenu,
+  CDropdownToggle,
+  CForm,
+  CFormInput,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const NavbarResponsiveOffcanvas2Example = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <CNavbar className="bg-body-tertiary" expand="xxl">
+      <CContainer fluid>
+        <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
+        <CNavbarToggler
+          aria-controls="offcanvasNavbar2"
+          aria-label="Toggle navigation"
+          onClick={() => setVisible(!visible)}
+        />
+        <COffcanvas
+          id="offcanvasNavbar2"
+          placement="end"
+          portal={false}
+          visible={visible}
+          onHide={() => setVisible(false)}
+        >
+          <COffcanvasHeader>
+            <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+            <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+          </COffcanvasHeader>
+          <COffcanvasBody>
+            <CNavbarNav className="me-auto">
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Link</CNavLink>
+              </CNavItem>
+              <CDropdown variant="nav-item" popper={false}>
+                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+            <CForm className="d-flex">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="success" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </COffcanvasBody>
+        </COffcanvas>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx
new file mode 100644
index 00000000..5017ef5b
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  CContainer,
+  CDropdown,
+  CDropdownItem,
+  CDropdownDivider,
+  CDropdownMenu,
+  CDropdownToggle,
+  CForm,
+  CFormInput,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const NavbarResponsiveOffcanvasExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer fluid>
+        <CNavbarBrand>Offcanvas navbar</CNavbarBrand>
+        <CNavbarToggler
+          aria-controls="offcanvasNavbar"
+          aria-label="Toggle navigation"
+          onClick={() => setVisible(!visible)}
+        />
+        <COffcanvas
+          id="offcanvasNavbar"
+          placement="end"
+          portal={false}
+          visible={visible}
+          onHide={() => setVisible(false)}
+        >
+          <COffcanvasHeader>
+            <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+            <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+          </COffcanvasHeader>
+          <COffcanvasBody>
+            <CNavbarNav>
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Link</CNavLink>
+              </CNavItem>
+              <CDropdown variant="nav-item" popper={false}>
+                <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem href="#">Action</CDropdownItem>
+                  <CDropdownItem href="#">Another action</CDropdownItem>
+                  <CDropdownDivider />
+                  <CDropdownItem href="#">Something else here</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+            <CForm className="d-flex">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="success" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </COffcanvasBody>
+        </COffcanvas>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx
new file mode 100644
index 00000000..21d7c752
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCollapse,
+  CContainer,
+  CForm,
+  CFormInput,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavbarResponsiveToggler2Example = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav className="me-auto mb-2 mb-lg-0">
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Link</CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+            <CForm className="d-flex">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="success" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx
new file mode 100644
index 00000000..df353538
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCollapse,
+  CContainer,
+  CForm,
+  CFormInput,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavbarResponsiveToggler3Example = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CNavbarBrand href="#">Navbar</CNavbarBrand>
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarNav className="me-auto mb-2 mb-lg-0">
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Link</CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+            <CForm className="d-flex">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="success" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx
new file mode 100644
index 00000000..21abfd2a
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCollapse,
+  CContainer,
+  CForm,
+  CFormInput,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavbarResponsiveTogglerExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CNavbar expand="lg" className="bg-body-tertiary">
+        <CContainer fluid>
+          <CNavbarToggler
+            aria-label="Toggle navigation"
+            aria-expanded={visible}
+            onClick={() => setVisible(!visible)}
+          />
+          <CCollapse className="navbar-collapse" visible={visible}>
+            <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
+            <CNavbarNav className="me-auto mb-2 mb-lg-0">
+              <CNavItem>
+                <CNavLink href="#" active>
+                  Home
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#">Link</CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#" disabled>
+                  Disabled
+                </CNavLink>
+              </CNavItem>
+            </CNavbarNav>
+            <CForm className="d-flex">
+              <CFormInput type="search" className="me-2" placeholder="Search" />
+              <CButton type="submit" color="success" variant="outline">
+                Search
+              </CButton>
+            </CForm>
+          </CCollapse>
+        </CContainer>
+      </CNavbar>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navbar/examples/NavbarText.tsx b/packages/docs/content/components/navbar/examples/NavbarText.tsx
new file mode 100644
index 00000000..b015c47a
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarText.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarText } from '@coreui/react'
+
+export const NavbarText = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer fluid>
+        <CNavbarText>Navbar text with an inline element</CNavbarText>
+      </CContainer>
+    </CNavbar>
+  )
+}
diff --git a/packages/docs/content/components/navbar/index.mdx b/packages/docs/content/components/navbar/index.mdx
new file mode 100644
index 00000000..6356d37c
--- /dev/null
+++ b/packages/docs/content/components/navbar/index.mdx
@@ -0,0 +1,154 @@
+---
+title: React Navbar Component
+name: Navbar
+description: Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
+route: /components/navbar/
+other_frameworks: navbar
+---
+
+## Supported content
+
+`<CNavbar>` come with built-in support for a handful of sub-components. Choose from the following as needed:
+
+- `<CNavbarBrand>` for your company, product, or project name.
+- `<CNavbarNav>` for a full-height and lightweight navigation (including support for dropdowns).
+- `<CNavbarToggler>` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
+- Flex and spacing utilities for any form controls and actions.
+- `<CNavbarText>` for adding vertically centered strings of text.
+- `<CCollapse>` for grouping and hiding navbar contents by a parent breakpoint.
+
+Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
+
+## Basic usage
+
+<ExampleSnippet component="NavbarExample" componentName="React Navbar" />
+
+### Brand
+
+The `<CNavbarBrand>` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
+
+<ExampleSnippet component="NavbarBrandExample" componentName="React Navbar" />
+
+Adding images to the `<CNavbarBrand>` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
+
+<ExampleSnippet component="NavbarBrand2Example" componentName="React Navbar" />
+
+<ExampleSnippet component="NavbarBrand3Example" componentName="React Navbar" />
+
+### Nav
+
+`<CNavbar>` navigation is based on `<CNavbarNav>`. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
+
+<ExampleSnippet component="NavbarNavExample" componentName="React Navbar" />
+
+And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
+
+<ExampleSnippet component="NavbarNav2Example" componentName="React Navbar" />
+
+You can also use dropdowns in your navbar. Please note that `<CDropdown>` component requires `variant="nav-item"`.
+
+<ExampleSnippet component="NavbarNav3Example" componentName="React Navbar" />
+
+### Forms
+
+Place various form controls and components within a navbar:
+
+<ExampleSnippet component="NavbarFormsExample" componentName="React Navbar" />
+
+Immediate child elements of `<CNavbar>` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/bootstrap/docs/utilities/flex/) as needed to adjust this behavior.
+
+<ExampleSnippet component="NavbarForms2Example" componentName="React Navbar" />
+
+Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<CForm>` element as the container and save some HTML.
+
+<ExampleSnippet component="NavbarForms3Example" componentName="React Navbar" />
+
+Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
+
+<ExampleSnippet component="NavbarForms4Example" componentName="React Navbar" />
+
+### Text
+
+Navbars may contain bits of text with the help of `<CNavbarText>`. This class adjusts vertical alignment and horizontal spacing for strings of text.
+
+<ExampleSnippet component="NavbarText" componentName="React Navbar" />
+
+## Color schemes
+
+Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Set `colorScheme="light"` for use with light background colors, or `colorScheme="dark"` for dark background colors. Then, customize with `.bg-*` utilities.
+
+<ExampleSnippet component="NavbarColorSchemesExample" componentName="React Navbar" />
+
+## Containers
+
+Although it's not required, you can wrap a `<CNavbar>` in a `<CContainer>` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `<CNavbar>` to only center the contents of a [fixed or static top navbar](#placement).
+
+<ExampleSnippet component="NavbarContainersExample" componentName="React Navbar" />
+
+Use any of the responsive containers to change how wide the content in your navbar is presented.
+
+<ExampleSnippet component="NavbarContainers2Example" componentName="React Navbar" />
+
+## Placement
+
+Use our `placement` properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
+
+Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**.
+
+<ExampleSnippet component="NavbarPlacementExample" componentName="React Navbar" />
+
+<ExampleSnippet className="p-4 overflow-hidden" component="NavbarPlacementFixedTopExample" componentName="React Navbar" />
+
+<ExampleSnippet className="p-4" component="NavbarPlacementFixedBottomExample" componentName="React Navbar" />
+
+<ExampleSnippet className="p-4 overflow-hidden" component="NavbarPlacementStickyTopExample" componentName="React Navbar" />
+
+## Responsive behaviors
+
+Navbars can use `<CNavbarToggler>`, `<CCollapse>`, and `expand="{sm|md|lg|xl|xxl}"` property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+
+For navbars that never collapse, add the `expand` boolean property on the `<CNavbar>`. For navbars that always collapse, don't add any property.
+
+### Toggler
+
+Navbar togglers are left-aligned by default, but should they follow a sibling element like a `<CNavbarBrand>`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
+
+With no `<CNavbarBrand>` shown at the smallest breakpoint:
+
+<ExampleSnippet component="NavbarResponsiveTogglerExample" componentName="React Navbar" />
+
+With a brand name shown on the left and toggler on the right:
+
+<ExampleSnippet component="NavbarResponsiveToggler2Example" componentName="React Navbar" />
+
+With a toggler on the left and brand name on the right:
+
+<ExampleSnippet component="NavbarResponsiveToggler3Example" componentName="React Navbar" />
+
+### External content
+
+Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `<CNavbar>`.
+
+<ExampleSnippet component="NavbarResponsiveExternalContentExample" componentName="React Navbar" />
+
+### Offcanvas
+
+Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar.
+
+In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely.
+
+<ExampleSnippet component="NavbarResponsiveOffcanvasExample" componentName="React Navbar" />
+
+To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property.
+
+<ExampleSnippet component="NavbarResponsiveOffcanvas2Example" componentName="React Navbar" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CNavbar /&gt;](./api/#cnavbar)
+- [&lt;CNavbarBrand /&gt;](./api/#cnavbarbrand)
+- [&lt;CNavbarNav /&gt;](./api/#cnavbarnav)
+- [&lt;CNavbarText /&gt;](./api/#cnavbartext)
+- [&lt;CNavbarToggler /&gt;](./api/#cnavbartoggler)
\ No newline at end of file
diff --git a/packages/docs/content/components/navbar/styling.mdx b/packages/docs/content/components/navbar/styling.mdx
new file mode 100644
index 00000000..f3f41df9
--- /dev/null
+++ b/packages/docs/content/components/navbar/styling.mdx
@@ -0,0 +1,47 @@
+---
+title: React Navbar Component Styling
+name: Navbar Styling
+description: Learn how to customize the React Navbar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/navbar/
+---
+
+### CSS variables
+
+React navbars 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.
+
+<ScssDocs file="_navbar.scss" capture="navbar-css-vars"/>
+
+Some additional CSS variables are also present on `.navbar-nav`:
+
+<ScssDocs file="_navbar.scss" capture="navbar-nav-css-vars"/>
+
+Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
+
+<ScssDocs file="_navbar.scss" capture="navbar-dark-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-navbar-color': '#24e484',
+  '--cui-navbar-hover-color': '1a1a1a',
+}
+
+return <CNavbar style={customVars}>{/* Navbar content */}</CNavbar>
+```
+
+### SASS variables
+
+Variables for all navbars:
+
+<ScssDocs file="_variables.scss" capture="navbar-variables"/>
+
+Variables for the [dark navbar](#color-schemes):
+
+<ScssDocs file="_variables.scss" capture="navbar-dark-variables"/>
+
+### SASS loops
+
+[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
+
+<ScssDocs file="_navbar.scss" capture="navbar-expand-loop"/>
diff --git a/packages/docs/content/components/navs-tabs.mdx b/packages/docs/content/components/navs-tabs.mdx
deleted file mode 100644
index 86f52b5c..00000000
--- a/packages/docs/content/components/navs-tabs.mdx
+++ /dev/null
@@ -1,719 +0,0 @@
----
-title: React Navs & Tabs Components
-name: Navs & Tabs
-description: Documentation and examples for how to use CoreUI's included React navigation components.
-menu: Components
-route: /components/navs-tabs
-other_frameworks: navs-tabs
----
-
-import { useState } from 'react'
-
-import {
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CNav,
-  CNavItem,
-  CNavLink,
-  CTabContent,
-  CTabPane,
-} from '@coreui/react/src/index'
-
-## Base nav
-
-Navigation available in CoreUI for React share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
-
-The base `<CNav>` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
-
-```jsx preview
-<CNav>
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, `<ol>` if the order of your items is important, or roll your own with a `<nav>` element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.
-
-```jsx preview
-<CNav as="nav">
-  <CNavLink href="#" active>
-    Active
-  </CNavLink>
-  <CNavLink href="#">Link</CNavLink>
-  <CNavLink href="#">Link</CNavLink>
-  <CNavLink href="#" disabled>
-    Disabled
-  </CNavLink>
-</CNav>
-```
-
-## Available styles
-
-Change the style of `<CNav>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
-
-### Horizontal alignment
-
-Change the horizontal alignment of your nav with [flexbox utilities](https://coreui.io/docs/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
-
-Centered with `.justify-content-center`:
-
-```jsx preview
-<CNav className="justify-content-center">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-Right-aligned with `.justify-content-end`:
-
-```jsx preview
-<CNav className="justify-content-end">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-### Vertical
-
-Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
-
-```jsx preview
-<CNav className="flex-column">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-### Tabs
-
-Takes the basic nav from above and adds the `variant="tabs"` class to generate a tabbed interface
-
-```jsx preview
-<CNav variant="tabs">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-### Pills
-
-Take that same code, but use `variant="pills"` instead:
-
-```jsx preview
-<CNav variant="pills">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-### Underline
-
-Take that same code, but use `variant="underline"` instead:
-
-```jsx preview
-<CNav variant="underline">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-### Underline border
-
-Take that same code, but use `variant="underline-border"` instead:
-
-```jsx preview
-<CNav variant="underline-border">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-### Fill and justify
-
-Force your `<CNav>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
-
-```jsx preview
-<CNav variant="pills" layout="fill">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.
-
-```jsx preview
-<CNav variant="pills" layout="justified">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-## Working with flex utilities
-
-If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/docs/utilities/flex). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
-
-```jsx preview
-<CNav as="nav" variant="pills" className="flex-column flex-sm-row">
-  <CNavLink href="#" active>
-    Active
-  </CNavLink>
-  <CNavLink href="#">Link</CNavLink>
-  <CNavLink href="#">Link</CNavLink>
-  <CNavLink href="#" disabled>
-    Disabled
-  </CNavLink>
-</CNav>
-```
-
-## Regarding accessibility
-
-If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
-
-Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. The `aria-current` attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding `aria-selected="true"` on the active tab.
-
-## Using dropdowns
-
-Add dropdown menus with a little extra HTML.
-
-### Tabs with dropdowns
-
-```jsx preview
-<CNav>
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CDropdown variant="nav-item">
-    <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-### Pills with dropdowns
-
-```jsx preview
-<CNav variant="pills">
-  <CNavItem>
-    <CNavLink href="#" active>
-      Active
-    </CNavLink>
-  </CNavItem>
-  <CDropdown variant="nav-item">
-    <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-  <CNavItem>
-    <CNavLink href="#">Link</CNavLink>
-  </CNavItem>
-  <CNavItem>
-    <CNavLink href="#" disabled>
-      Disabled
-    </CNavLink>
-  </CNavItem>
-</CNav>
-```
-
-## Tab panes
-
-Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
-
-Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
-
-export const TabPanesExample = () => {
-  const [activeKey, setActiveKey] = useState(1)
-  return (
-    <>
-      <CNav variant="tabs" role="tablist">
-        <CNavItem>
-          <CNavLink
-            href="#!"
-            active={activeKey === 1}
-            onClick={() => setActiveKey(1)}
-          >
-            Home
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink
-            href="#!"
-            active={activeKey === 2}
-            onClick={() => setActiveKey(2)}
-          >
-            Profile
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink
-            href="#!"
-            active={activeKey === 3}
-            onClick={() => setActiveKey(3)}
-          >
-            Contact
-          </CNavLink>
-        </CNavItem>
-      </CNav>
-      <CTabContent>
-        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
-          Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-          aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-          helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh
-          mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
-          aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-        </CTabPane>
-        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
-          Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-          Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
-          four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
-          beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
-          assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
-          magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
-          sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
-          scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
-        </CTabPane>
-        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
-          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
-          lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
-          tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
-          helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
-          Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
-          mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog
-          stumptown. Pitchfork sustainable tofu synth chambray yr.
-        </CTabPane>
-      </CTabContent>
-    </>
-  )
-}
-
-<Example>
-  <TabPanesExample />
-</Example>
-
-```jsx
-const [activeKey, setActiveKey] = useState(1)
-return (
-  <>
-    <CNav variant="tabs" role="tablist">
-      <CNavItem>
-        <CNavLink
-          href="#!"
-          active={activeKey === 1}
-          onClick={() => setActiveKey(1)}
-        >
-          Home
-        </CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink
-          href="#!"
-          active={activeKey === 2}
-          onClick={() => setActiveKey(2)}
-        >
-          Profile
-        </CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink
-          href="#!"
-          active={activeKey === 3}
-          onClick={() => setActiveKey(3)}
-        >
-          Contact
-        </CNavLink>
-      </CNavItem>
-    </CNav>
-    <CTabContent>
-      <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
-        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-        aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-        helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh
-        mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
-        aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-      </CTabPane>
-      <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
-        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-        Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
-        four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
-        beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda
-        labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit
-        sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
-        shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown,
-        tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
-      </CTabPane>
-      <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
-        Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
-        lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
-        tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.
-        DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh
-        mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.
-        Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown.
-        Pitchfork sustainable tofu synth chambray yr.
-      </CTabPane>
-    </CTabContent>
-  </>
-)
-```
-
-The tabs also works with pills.
-
-export const TabPanesPillsExample = () => {
-  const [activeKey, setActiveKey] = useState(1)
-  return (
-    <>
-      <CNav variant="pills" role="tablist">
-        <CNavItem>
-          <CNavLink
-            href="#!"
-            active={activeKey === 1}
-            onClick={() => setActiveKey(1)}
-          >
-            Home
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink
-            href="#!"
-            active={activeKey === 2}
-            onClick={() => setActiveKey(2)}
-          >
-            Profile
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink
-            href="#!"
-            active={activeKey === 3}
-            onClick={() => setActiveKey(3)}
-          >
-            Contact
-          </CNavLink>
-        </CNavItem>
-      </CNav>
-      <CTabContent>
-        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
-          Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-          aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-          helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh
-          mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
-          aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-        </CTabPane>
-        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
-          Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-          Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
-          four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
-          beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
-          assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
-          magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
-          sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
-          scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
-        </CTabPane>
-        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
-          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
-          lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
-          tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
-          helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
-          Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
-          mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog
-          stumptown. Pitchfork sustainable tofu synth chambray yr.
-        </CTabPane>
-      </CTabContent>
-    </>
-  )
-}
-
-<Example>
-  <TabPanesPillsExample />
-</Example>
-
-```jsx
-const [activeKey, setActiveKey] = useState(1)
-return (
-  <>
-    <CNav variant="pills" role="tablist">
-      <CNavItem>
-        <CNavLink
-          href="#!"
-          active={activeKey === 1}
-          onClick={() => setActiveKey(1)}
-        >
-          Home
-        </CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink
-          href="#!"
-          active={activeKey === 2}
-          onClick={() => setActiveKey(2)}
-        >
-          Profile
-        </CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink
-          href="#!"
-          active={activeKey === 3}
-          onClick={() => setActiveKey(3)}
-        >
-          Contact
-        </CNavLink>
-      </CNavItem>
-    </CNav>
-    <CTabContent>
-      <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
-        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
-        aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
-        helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh
-        mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
-        aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-      </CTabPane>
-      <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
-        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
-        Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
-        four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
-        beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda
-        labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit
-        sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
-        shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown,
-        tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
-      </CTabPane>
-      <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
-        Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
-        lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
-        tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.
-        DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh
-        mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.
-        Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown.
-        Pitchfork sustainable tofu synth chambray yr.
-      </CTabPane>
-    </CTabContent>
-  </>
-)
-```
-
-## Customizing
-
-### CSS variables
-
-React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-On the `.nav` base class:
-
-<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
-
-On the `.nav-tabs` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
-
-On the `.nav-pills` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
-
-<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
-
-On the `.nav-underline` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
-
-<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
-
-On the `.nav-underline-border` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CNav style={vars}>...</CNav>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="nav-variables"/>
-
-## API
-
-### CNav
-
-`markdown:CNav.api.mdx`
-
-### CNavItem
-
-`markdown:CNavItem.api.mdx`
-
-### CNavLink
-
-`markdown:CNavLink.api.mdx`
-
-### CTabContent
-
-`markdown:CTabContent.api.mdx`
-
-### CTabPane
-
-`markdown:CTabPane.api.mdx`
diff --git a/packages/docs/content/components/navs-tabs/api.mdx b/packages/docs/content/components/navs-tabs/api.mdx
new file mode 100644
index 00000000..4c78c048
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Navs & Tabs Components API
+name: Navs & Tabs API
+description: Explore the API reference for the React Navs & Tabs components and discover how to effectively utilize its props for customization.
+route: /components/navs-tabs/
+---
+
+import CNavAPI from '../../api/CNav.api.mdx'
+import CNavItemAPI from '../../api/CNavItem.api.mdx'
+import CNavLinkAPI from '../../api/CNavLink.api.mdx'
+import CTabContentAPI from '../../api/CTabContent.api.mdx'
+import CTabPaneAPI from '../../api/CTabPane.api.mdx'
+
+## CNav
+
+<CNavAPI />
+
+## CNavItem
+
+<CNavItemAPI />
+
+## CNavLink
+
+<CNavLinkAPI />
+
+## CTabContent
+
+<CTabContentAPI />
+
+## CTabPane
+
+<CTabPaneAPI />
diff --git a/packages/docs/content/components/navs-tabs/bootstrap.mdx b/packages/docs/content/components/navs-tabs/bootstrap.mdx
new file mode 100644
index 00000000..655db31b
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/bootstrap.mdx
@@ -0,0 +1,102 @@
+---
+title: React Bootstrap Navs and Tabs Component
+name: Navs and Tabs with Bootstrap Styling
+description: Learn how to use the React Bootstrap Navs and Tabs component from CoreUI to build navigations, tabbed interfaces, dropdowns, and more with responsive and accessible markup.
+route: /components/navs-tabs/
+bootstrap_component: true
+---
+
+## React Bootstrap Base Nav
+
+The React Bootstrap Navs and Tabs component provides a flexible base for building navigations. The `<CNav>` component is built with flexbox and supports active, disabled, tabbed, and pill-styled variations.
+
+<ExampleSnippet className="theme-bootstrap" component="NavExample" componentName="React Bootstrap Nav" />
+
+You can structure navigation with `<ul>`, `<ol>`, or even `<nav>`, as seen here:
+
+<ExampleSnippet className="theme-bootstrap" component="Nav2Example" componentName="React Bootstrap Nav" />
+
+## React Bootstrap Nav Styles
+
+### Horizontal alignment
+
+Use flexbox utilities to align nav items center or right.
+
+<ExampleSnippet className="theme-bootstrap" component="NavHorizontalAlignmentExample" componentName="React Bootstrap Nav" />
+<ExampleSnippet className="theme-bootstrap" component="NavHorizontalAlignment2Example" componentName="React Bootstrap Nav" />
+
+### Vertical navs
+
+Stack items vertically using `.flex-column`.
+
+<ExampleSnippet className="theme-bootstrap" component="NavVerticalExample" componentName="React Bootstrap Nav" />
+
+### Tabs
+
+Switch to tabbed navigation with `variant="tabs"`.
+
+<ExampleSnippet className="theme-bootstrap" component="NavTabsExample" componentName="React Bootstrap Nav" />
+
+### Pills
+
+Use `variant="pills"` for pill-style nav links.
+
+<ExampleSnippet className="theme-bootstrap" component="NavPillsExample" componentName="React Bootstrap Nav" />
+
+### Underline
+
+Switch to underline style using `variant="underline"`.
+
+<ExampleSnippet className="theme-bootstrap" component="NavUnderlineExample" componentName="React Bootstrap Nav" />
+
+### Underline border
+
+Apply `variant="underline-border"` to create a bordered underline nav.
+
+<ExampleSnippet className="theme-bootstrap" component="NavUnderlineBorderExample" componentName="React Bootstrap Nav" />
+
+### Fill and justify navs
+
+Use `layout="fill"` to fill available space, or `layout="justified"` for equal width nav items.
+
+<ExampleSnippet className="theme-bootstrap" component="NavFillAndJustifyExample" componentName="React Bootstrap Nav" />
+<ExampleSnippet className="theme-bootstrap" component="NavFillAndJustify2Example" componentName="React Bootstrap Nav" />
+
+## Flex utility-based responsive navs
+
+Combine responsive flex utilities for fully adaptive nav layouts.
+
+<ExampleSnippet className="theme-bootstrap" component="NavWorkingWithFlexUtilitiesExample" componentName="React Bootstrap Nav" />
+
+## Accessibility in React Bootstrap Navs and Tabs
+
+- Use `role="navigation"` on a parent container.
+- Don’t use `role="tablist"` unless you’re building dynamic tab panels.
+- CoreUI handles dynamic tab ARIA attributes automatically.
+
+## React Bootstrap Navs with Dropdowns
+
+### Tabs with dropdowns
+
+<ExampleSnippet className="theme-bootstrap" component="NavTabsWithDropdownExample" componentName="React Bootstrap Nav" />
+
+### Pills with dropdowns
+
+<ExampleSnippet className="theme-bootstrap" component="NavPillsWithDropdownExample" componentName="React Bootstrap Nav" />
+
+## React Bootstrap Tab Panes
+
+Build dynamic tabbed interfaces using `<CTabContent>` and `<CTabPane>`. These components follow ARIA best practices.
+
+<ExampleSnippet className="theme-bootstrap" component="NavTabPanesExample" componentName="React Bootstrap Nav" />
+<ExampleSnippet className="theme-bootstrap" component="NavTabPanes2Example" componentName="React Bootstrap Nav" />
+
+## API reference
+
+Explore the full list of props and components used in React Bootstrap Navs and Tabs:
+
+- [&lt;CNav /&gt;](../api/#cnav)
+- [&lt;CNavItem /&gt;](../api/#cnavitem)
+- [&lt;CNavLink /&gt;](../api/#cnavlink)
+- [&lt;CTabContent /&gt;](../api/#ctabcontent)
+- [&lt;CTabPane /&gt;](../api/#ctabpane)
diff --git a/packages/docs/content/components/navs-tabs/examples/Nav2Example.tsx b/packages/docs/content/components/navs-tabs/examples/Nav2Example.tsx
new file mode 100644
index 00000000..f5bba3c5
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/Nav2Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CNav, CNavLink } from '@coreui/react'
+
+export const Nav2Example = () => {
+  return (
+    <CNav as="nav">
+      <CNavLink href="#" active>Active</CNavLink>
+      <CNavLink href="#">Link</CNavLink>
+      <CNavLink href="#">Link</CNavLink>
+      <CNavLink href="#" disabled>Disabled</CNavLink>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx
new file mode 100644
index 00000000..33cbf837
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavEnclosedExample = () => {
+  return (
+    <CNav variant="enclosed">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx
new file mode 100644
index 00000000..e49457f8
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavEnclosedPillsExample = () => {
+  return (
+    <CNav variant="enclosed-pills">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavExample.tsx
new file mode 100644
index 00000000..e1d20817
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavExample = () => {
+  return (
+    <CNav>
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavFillAndJustify2Example.tsx b/packages/docs/content/components/navs-tabs/examples/NavFillAndJustify2Example.tsx
new file mode 100644
index 00000000..0cc33a97
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavFillAndJustify2Example.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavFillAndJustify2Example = () => {
+  return (
+    <CNav variant="pills" layout="justified">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavFillAndJustifyExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavFillAndJustifyExample.tsx
new file mode 100644
index 00000000..0d8702e0
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavFillAndJustifyExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavFillAndJustifyExample = () => {
+  return (
+    <CNav variant="pills" layout="fill">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignment2Example.tsx b/packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignment2Example.tsx
new file mode 100644
index 00000000..b14fee61
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignment2Example.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavHorizontalAlignment2Example = () => {
+  return (
+    <CNav className="justify-content-end">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignmentExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignmentExample.tsx
new file mode 100644
index 00000000..0eaeae56
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignmentExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavHorizontalAlignmentExample = () => {
+  return (
+    <CNav className="justify-content-center">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavPillsExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavPillsExample.tsx
new file mode 100644
index 00000000..8dcfc4a5
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavPillsExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavPillsExample = () => {
+  return (
+    <CNav variant="pills">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavPillsWithDropdownExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavPillsWithDropdownExample.tsx
new file mode 100644
index 00000000..5dcbf8d2
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavPillsWithDropdownExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CNav,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavPillsWithDropdownExample = () => {
+  return (
+    <CNav variant="pills">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CDropdown variant="nav-item">
+        <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavTabPanes2Example.tsx b/packages/docs/content/components/navs-tabs/examples/NavTabPanes2Example.tsx
new file mode 100644
index 00000000..b7c0bb68
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavTabPanes2Example.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
+
+export const NavTabPanes2Example = () => {
+  const [activeKey, setActiveKey] = useState(1)
+  return (
+    <>
+      <CNav variant="pills" role="tablist">
+        <CNavItem>
+          <CNavLink href="#!" active={activeKey === 1} onClick={() => setActiveKey(1)}>
+            Home
+          </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href="#!" active={activeKey === 2} onClick={() => setActiveKey(2)}>
+            Profile
+          </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href="#!" active={activeKey === 3} onClick={() => setActiveKey(3)}>
+            Contact
+          </CNavLink>
+        </CNavItem>
+      </CNav>
+      <CTabContent>
+        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
+          Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua,
+          retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
+          Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry
+          richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american
+          apparel, butcher voluptate nisi qui.
+        </CTabPane>
+        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
+          Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee squid.
+          Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
+          farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip
+          jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna
+          delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan
+          fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry
+          richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus
+          tattooed echo park.
+        </CTabPane>
+        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
+          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s organic lomo
+          retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft
+          beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
+          irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free,
+          carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably
+          haven&#39;t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth
+          chambray yr.
+        </CTabPane>
+      </CTabContent>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavTabPanesExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavTabPanesExample.tsx
new file mode 100644
index 00000000..8a22e8da
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavTabPanesExample.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
+
+export const NavTabPanesExample = () => {
+  const [activeKey, setActiveKey] = useState(1)
+  return (
+    <>
+      <CNav variant="tabs" role="tablist">
+        <CNavItem>
+          <CNavLink href="#!" active={activeKey === 1} onClick={() => setActiveKey(1)}>
+            Home
+          </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href="#!" active={activeKey === 2} onClick={() => setActiveKey(2)}>
+            Profile
+          </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href="#!" active={activeKey === 3} onClick={() => setActiveKey(3)}>
+            Contact
+          </CNavLink>
+        </CNavItem>
+      </CNav>
+      <CTabContent>
+        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
+          Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua,
+          retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
+          Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry
+          richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american
+          apparel, butcher voluptate nisi qui.
+        </CTabPane>
+        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
+          Food truck fixie locavore, accusamus mcsweeney&#39;s marfa nulla single-origin coffee squid.
+          Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
+          farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip
+          jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna
+          delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan
+          fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry
+          richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus
+          tattooed echo park.
+        </CTabPane>
+        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
+          Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney&#39;s organic lomo
+          retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft
+          beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
+          irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free,
+          carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably
+          haven&#39;t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth
+          chambray yr.
+        </CTabPane>
+      </CTabContent>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavTabsExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavTabsExample.tsx
new file mode 100644
index 00000000..31766e74
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavTabsExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavTabsExample = () => {
+  return (
+    <CNav variant="tabs">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavTabsWithDropdownExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavTabsWithDropdownExample.tsx
new file mode 100644
index 00000000..4e01cc9a
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavTabsWithDropdownExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CNav,
+  CNavItem,
+  CNavLink,
+} from '@coreui/react'
+
+export const NavTabsWithDropdownExample = () => {
+  return (
+    <CNav>
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CDropdown variant="nav-item">
+        <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem href="#">Action</CDropdownItem>
+          <CDropdownItem href="#">Another action</CDropdownItem>
+          <CDropdownItem href="#">Something else here</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavUnderlineBorderExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavUnderlineBorderExample.tsx
new file mode 100644
index 00000000..e5e62017
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavUnderlineBorderExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavUnderlineBorderExample = () => {
+  return (
+    <CNav variant="underline-border">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavUnderlineExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavUnderlineExample.tsx
new file mode 100644
index 00000000..20157ee7
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavUnderlineExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavUnderlineExample = () => {
+  return (
+    <CNav variant="underline">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavVerticalExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavVerticalExample.tsx
new file mode 100644
index 00000000..0ba22ad9
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavVerticalExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CNav, CNavItem, CNavLink } from '@coreui/react'
+
+export const NavVerticalExample = () => {
+  return (
+    <CNav className="flex-column">
+      <CNavItem>
+        <CNavLink href="#" active>Active</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#">Link</CNavLink>
+      </CNavItem>
+      <CNavItem>
+        <CNavLink href="#" disabled>Disabled</CNavLink>
+      </CNavItem>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavWorkingWithFlexUtilitiesExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavWorkingWithFlexUtilitiesExample.tsx
new file mode 100644
index 00000000..16977f2b
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/examples/NavWorkingWithFlexUtilitiesExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CNav, CNavLink } from '@coreui/react'
+
+export const NavWorkingWithFlexUtilitiesExample = () => {
+  return (
+    <CNav as="nav" variant="pills" className="flex-column flex-sm-row">
+      <CNavLink href="#" active>Active</CNavLink>
+      <CNavLink href="#">Link</CNavLink>
+      <CNavLink href="#">Link</CNavLink>
+      <CNavLink href="#" disabled>Disabled</CNavLink>
+    </CNav>
+  )
+}
diff --git a/packages/docs/content/components/navs-tabs/index.mdx b/packages/docs/content/components/navs-tabs/index.mdx
new file mode 100644
index 00000000..439f05eb
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/index.mdx
@@ -0,0 +1,134 @@
+---
+title: React Navs & Tabs Components
+name: Navs & Tabs
+description: Documentation and examples for how to use CoreUI's included React navigation components.
+route: /components/navs-tabs/
+other_frameworks: navs-tabs
+---
+
+## Base nav
+
+Navigation available in CoreUI for React share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
+
+The base `<CNav>` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
+
+<ExampleSnippet component="NavExample" componentName="React Nav" />
+
+Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, `<ol>` if the order of your items is important, or roll your own with a `<nav>` element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.
+
+<ExampleSnippet component="Nav2Example" componentName="React Nav" />
+
+## Available styles
+
+Change the style of `<CNav>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
+
+### Horizontal alignment
+
+Change the horizontal alignment of your nav with [flexbox utilities](https://coreui.io/bootstrap/docs/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
+
+Centered with `.justify-content-center`:
+
+<ExampleSnippet component="NavHorizontalAlignmentExample" componentName="React Nav" />
+
+Right-aligned with `.justify-content-end`:
+
+<ExampleSnippet component="NavHorizontalAlignment2Example" componentName="React Nav" />
+
+### Vertical
+
+Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
+
+<ExampleSnippet component="NavVerticalExample" componentName="React Nav" />
+
+### Tabs
+
+Takes the basic nav from above and adds the `variant="tabs"` class to generate a tabbed interface
+
+<ExampleSnippet component="NavTabsExample" componentName="React Nav" />
+
+### Pills
+
+Take that same code, but use `variant="pills"` instead:
+
+<ExampleSnippet component="NavPillsExample" componentName="React Nav" />
+
+### Underline
+
+Take that same code, but use `variant="underline"` instead:
+
+<ExampleSnippet component="NavUnderlineExample" componentName="React Nav" />
+
+### Underline border
+
+Take that same code, but use `variant="underline-border"` instead:
+
+<ExampleSnippet component="NavUnderlineBorderExample" componentName="React Nav" />
+
+### Enclosed
+
+Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
+
+<ExampleSnippet component="NavEnclosedExample" componentName="React Nav" />
+
+### Enclosed pills 
+
+Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
+
+<ExampleSnippet component="NavEnclosedPillsExample" componentName="React Nav" />
+
+
+### Fill and justify
+
+Force your `<CNav>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+
+<ExampleSnippet component="NavFillAndJustifyExample" componentName="React Nav" />
+
+For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.
+
+<ExampleSnippet component="NavFillAndJustify2Example" componentName="React Nav" />
+
+## Working with flex utilities
+
+If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+
+<ExampleSnippet component="NavWorkingWithFlexUtilitiesExample" componentName="React Nav" />
+
+## Regarding accessibility
+
+If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
+
+Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. The `aria-current` attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding `aria-selected="true"` on the active tab.
+
+## Using dropdowns
+
+Add dropdown menus with a little extra HTML.
+
+### Tabs with dropdowns
+
+<ExampleSnippet component="NavTabsWithDropdownExample" componentName="React Nav" />
+
+### Pills with dropdowns
+
+<ExampleSnippet component="NavPillsWithDropdownExample" componentName="React Nav" />
+
+## Tab panes
+
+Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
+
+Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
+
+<ExampleSnippet component="NavTabPanesExample" componentName="React Nav" />
+
+The tabs also works with pills.
+
+<ExampleSnippet component="NavTabPanes2Example" componentName="React Nav" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CNav /&gt;](./api/#cnav)
+- [&lt;CNavItem /&gt;](./api/#cnavitem)
+- [&lt;CNavLink /&gt;](./api/#cnavlink)
+- [&lt;CTabContent /&gt;](./api/#ctabcontent)
+- [&lt;CTabPane /&gt;](./api/#ctabpane)
\ No newline at end of file
diff --git a/packages/docs/content/components/navs-tabs/styling.mdx b/packages/docs/content/components/navs-tabs/styling.mdx
new file mode 100644
index 00000000..9d74394f
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/styling.mdx
@@ -0,0 +1,49 @@
+---
+title: React Navs & Tabs Components Styling
+name: Navs & Tabs Styling
+description: Learn how to customize the React Navs & Tabs components with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/navs-tabs/
+---
+
+### CSS variables
+
+React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
+
+On the `.nav-tabs` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
+
+On the `.nav-pills` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
+
+<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
+
+On the `.nav-underline` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
+
+<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
+
+On the `.nav-underline-border` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-nav-link-color': '#555',
+  '--cui-nav-link-disabled-color': '#afaeef',
+}
+
+return <CNav style={customVars}>{/* Nav content */}</CNav>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="nav-variables"/>
diff --git a/packages/docs/content/components/offcanvas.mdx b/packages/docs/content/components/offcanvas.mdx
deleted file mode 100644
index 37ac21d0..00000000
--- a/packages/docs/content/components/offcanvas.mdx
+++ /dev/null
@@ -1,467 +0,0 @@
----
-title: React Offcanvas Component
-name: Offcanvas
-description: React alert component allows build hidden sidebars into your project for navigation, shopping carts.
-menu: Components
-route: /components/offcanvas
-other_frameworks: offcanvas
----
-
-import { useState } from 'react'
-
-import {
-  CAlert,
-  CButton,
-  CCloseButton,
-  CCallout,
-  COffcanvas,
-  COffcanvasBody,
-  COffcanvasHeader,
-  COffcanvasTitle,
-} from '@coreui/react/src/index'
-
-## Examples
-
-### Offcanvas components
-
-Below is an offcanvas example that is shown by default (via `visible={true}`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
-
-```jsx preview className="docs-example-offcanvas bg-body-tertiary p-0 overflow-hidden"
-<COffcanvas backdrop={false} placement="start" visible={true}>
-  <COffcanvasHeader>
-    <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-    <CCloseButton className="text-reset" />
-  </COffcanvasHeader>
-  <COffcanvasBody>
-    Content for the offcanvas goes here. You can place just about any React component or custom
-    elements here.
-  </COffcanvasBody>
-</COffcanvas>
-```
-
-### Live demo
-
-Use the buttons below to show and hide an offcanvas component.
-
-- `visible={false}` hides content (default)
-- `visible` or `visible={true}` shows content
-
-export const LiveDemoExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
-      <COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          Content for the offcanvas goes here. You can place just about any React component or
-          custom elements here.
-        </COffcanvasBody>
-      </COffcanvas>
-    </>
-  )
-}
-
-<Example>
-  <LiveDemoExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
-    <COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>
-      <COffcanvasHeader>
-        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-      </COffcanvasHeader>
-      <COffcanvasBody>
-        Content for the offcanvas goes here. You can place just about any React component or
-        custom elements here.
-      </COffcanvasBody>
-    </COffcanvas>
-  </>
-)
-```
-### Body scrolling
-
-Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle `<body>` scrolling and backdrop to toggle the backdrop.
-
-export const BodyScrollingExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(true)}>Enable body scrolling</CButton>
-      <COffcanvas backdrop={false} placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          Try scrolling the rest of the page to see this option in action.
-        </COffcanvasBody>
-      </COffcanvas>
-    </>
-  )
-}
-
-<Example>
-  <BodyScrollingExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(true)}>Enable body scrolling</CButton>
-    <COffcanvas backdrop={false} placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
-      <COffcanvasHeader>
-        <COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>
-        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-      </COffcanvasHeader>
-      <COffcanvasBody>
-        Try scrolling the rest of the page to see this option in action.
-      </COffcanvasBody>
-    </COffcanvas>
-  </>
-)
-```
-
-### Body scrolling and backdrop
-
-You can also enable `<body>` scrolling with a visible backdrop.
-
-export const BodyScrollingAndBackdropExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(true)}>Enable both scrolling &amp; backdrop</CButton>
-      <COffcanvas placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          Try scrolling the rest of the page to see this option in action.
-        </COffcanvasBody>
-      </COffcanvas>
-    </>
-  )
-}
-
-<Example>
-  <BodyScrollingAndBackdropExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(true)}>Enable both scrolling &amp; backdrop</CButton>
-    <COffcanvas placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
-      <COffcanvasHeader>
-        <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
-        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-      </COffcanvasHeader>
-      <COffcanvasBody>
-        Try scrolling the rest of the page to see this option in action.
-      </COffcanvasBody>
-    </COffcanvas>
-  </>
-)
-```
-
-### Static backdrop
-
-If you set a `backdrop` to `static`, your React offcanvas component will not close when clicking outside of it.
-
-export const StaticBackdropExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(true)}>Toggle static offcanvas</CButton>
-      <COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          I will not close if you click outside of me.
-        </COffcanvasBody>
-      </COffcanvas>
-    </>
-  )
-}
-
-<Example>
-  <StaticBackdropExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(true)}>Toggle static offcanvas</CButton>
-    <COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
-      <COffcanvasHeader>
-        <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
-        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-      </COffcanvasHeader>
-      <COffcanvasBody>
-        I will not close if you click outside of me.
-      </COffcanvasBody>
-    </COffcanvas>
-  </>
-)
-```
-
-## Dark offcanvas
-
-Change the appearance of offcanvases with `dark` boolean property to better match them to different contexts like dark navbars.
-
-```jsx preview className="docs-example-offcanvas bg-body-secondary p-0 overflow-hidden"
-<COffcanvas backdrop={false} dark placement="start" visible={true}>
-  <COffcanvasHeader>
-    <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-    <CCloseButton className="text-reset" />
-  </COffcanvasHeader>
-  <COffcanvasBody>
-    Content for the offcanvas goes here. You can place just about any React component or custom
-    elements here.
-  </COffcanvasBody>
-</COffcanvas>
-```
-
-## Responsive 
-
-Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down.
-Above that breakpoint, the contents within will behave as usual. 
-For example, `responsive="lg"` hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.
-
-export const ResponsiveExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" className="d-lg-none" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
-      <CAlert className="d-none d-lg-block" color="info">Resize your browser to show the responsive offcanvas toggle.</CAlert>
-      <COffcanvas placement="start" responsive="lg" visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          <p>This is content within an <code>.offcanvas-lg</code></p>.
-        </COffcanvasBody>
-      </COffcanvas>
-    </>
-  )
-}
-
-<Example>
-  <ResponsiveExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" className="d-lg-none" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
-    <CAlert className="d-none d-lg-block" color="info">Resize your browser to show the responsive offcanvas toggle.</CAlert>
-    <COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
-      <COffcanvasHeader>
-        <COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>
-        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-      </COffcanvasHeader>
-      <COffcanvasBody>
-        This is content within an <code>.offcanvas-lg</code>.
-      </COffcanvasBody>
-    </COffcanvas>
-  </>
-)
-```
-
-
-## Placement
-
-There's no default placement for offcanvas components, so you must add one of the modifier classes below;
-
-- `placement="start"` places offcanvas on the left of the viewport (shown above)
-- `placement="end"` places offcanvas on the right of the viewport
-- `placement="top"` places offcanvas on the top of the viewport
-- `placement="bottom"` places offcanvas on the bottom of the viewport
-
-Try the top, right, and bottom examples out below.
-
-export const PlacementTopExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(true)}>Toggle top offcanvas</CButton>
-      <COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          Content for the offcanvas goes here. You can place just about any React component or
-          custom elements here.
-        </COffcanvasBody>
-      </COffcanvas>
-    </>
-  )
-}
-
-<Example>
-  <PlacementTopExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(true)}>Toggle top offcanvas</CButton>
-    <COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>
-      <COffcanvasHeader>
-        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-      </COffcanvasHeader>
-      <COffcanvasBody>
-        Content for the offcanvas goes here. You can place just about any React component or
-        custom elements here.
-      </COffcanvasBody>
-    </COffcanvas>
-  </>
-)
-```
-
-export const PlacementRightExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(true)}>Toggle right offcanvas</CButton>
-      <COffcanvas placement="end" visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          Content for the offcanvas goes here. You can place just about any React component or
-          custom elements here.
-        </COffcanvasBody>
-      </COffcanvas>
-    </>
-  )
-}
-
-<Example>
-  <PlacementRightExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(true)}>Toggle right offcanvas</CButton>
-    <COffcanvas placement="right" visible={visible} onHide={() => setVisible(false)}>
-      <COffcanvasHeader>
-        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-      </COffcanvasHeader>
-      <COffcanvasBody>
-        Content for the offcanvas goes here. You can place just about any React component or
-        custom elements here.
-      </COffcanvasBody>
-    </COffcanvas>
-  </>
-)
-```
-
-export const PlacementBottomExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CButton color="primary" onClick={() => setVisible(true)}>Toggle bottom offcanvas</CButton>
-      <COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
-        <COffcanvasHeader>
-          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-        </COffcanvasHeader>
-        <COffcanvasBody>
-          Content for the offcanvas goes here. You can place just about any React component or
-          custom elements here.
-        </COffcanvasBody>
-      </COffcanvas>
-    </>
-  )
-}
-
-<Example>
-  <PlacementBottomExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CButton color="primary" onClick={() => setVisible(true)}>Toggle bottom offcanvas</CButton>
-    <COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
-      <COffcanvasHeader>
-        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
-        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
-      </COffcanvasHeader>
-      <COffcanvasBody>
-        Content for the offcanvas goes here. You can place just about any React component or
-        custom elements here.
-      </COffcanvasBody>
-    </COffcanvas>
-  </>
-)
-```
-
-## Accessibility
-
-Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `<COffcanvas>`. Note that you don’t need to add `role="dialog"` since we already add it automatically.
-
-## Customizing
-
-### CSS variables
-
-React offcanvas 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.
-
-<ScssDocs file="_offcanvas.scss" capture="offcanvas-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <COffcanvas style={vars}>...</COffcanvas>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="offcanvas-variables"/>
-
-## API
-
-### COffcanvas
-
-`markdown:COffcanvas.api.mdx`
-
-### COffcanvasBody
-
-`markdown:COffcanvasBody.api.mdx`
-
-### COffcanvasHeader
-
-`markdown:COffcanvasHeader.api.mdx`
-
-### COffcanvasTitle
-
-`markdown:COffcanvasTitle.api.mdx`
diff --git a/packages/docs/content/components/offcanvas/api.mdx b/packages/docs/content/components/offcanvas/api.mdx
new file mode 100644
index 00000000..28b85299
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Offcanvas Component API
+name: Offcanvas API
+description: Explore the API reference for the React Offcanvas component and discover how to effectively utilize its props for customization.
+route: /components/offcanvas/
+---
+
+import COffcanvasAPI from '../../api/COffcanvas.api.mdx'
+import COffcanvasBodyAPI from '../../api/COffcanvasBody.api.mdx'
+import COffcanvasHeaderAPI from '../../api/COffcanvasHeader.api.mdx'
+import COffcanvasTitleAPI from '../../api/COffcanvasTitle.api.mdx'
+
+## COffcanvas
+
+<COffcanvasAPI />
+
+## COffcanvasBody
+
+<COffcanvasBodyAPI />
+
+## COffcanvasHeader
+
+<COffcanvasHeaderAPI />
+
+## COffcanvasTitle
+
+<COffcanvasTitleAPI />
diff --git a/packages/docs/content/components/offcanvas/bootstrap.mdx b/packages/docs/content/components/offcanvas/bootstrap.mdx
new file mode 100644
index 00000000..3cedb03e
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/bootstrap.mdx
@@ -0,0 +1,91 @@
+---
+title: React Bootstrap Offcanvas Component
+name: Offcanvas with Bootstrap Styling
+description: Learn how to use the React Bootstrap Offcanvas component from CoreUI to create hidden sidebars and sliding panels for navigation, shopping carts, or any additional UI element.
+route: /components/offcanvas/
+bootstrap_component: true
+---
+
+## React Bootstrap Offcanvas examples
+
+The React Bootstrap Offcanvas component allows you to build sidebar-like panels that slide into view from any edge of the screen. These panels are great for navigation menus, shopping carts, and more.
+
+### Static offcanvas component
+
+Here’s a React Bootstrap Offcanvas that is shown by default using `visible={true}`. It includes a header with a close button and a padded body.
+
+<ExampleSnippet
+  className="theme-bootstrap docs-example-offcanvas bg-body-tertiary p-0 overflow-hidden"
+  component="OffcanvasExample"
+  componentName="React Bootstrap Offcanvas"
+/>
+
+### Live demo
+
+Click the buttons to toggle visibility of the offcanvas.
+
+<ExampleSnippet className="theme-bootstrap" component="OffcanvasLiveExample" componentName="React Bootstrap Offcanvas" />
+
+### Scrollable body
+
+Use the `scroll` prop to allow page scrolling while the offcanvas is visible. Combine it with `backdrop` to control overlay behavior.
+
+<ExampleSnippet className="theme-bootstrap" component="OffcanvasBodyScrollingExample" componentName="React Bootstrap Offcanvas" />
+
+### Scrollable body with backdrop
+
+<ExampleSnippet
+  className="theme-bootstrap"
+  component="OffcanvasBodyScrollingAndBackdropExample"
+  componentName="React Bootstrap Offcanvas"
+/>
+
+### Static backdrop
+
+Prevent closing the React Bootstrap Offcanvas on backdrop click by setting `backdrop="static"`.
+
+<ExampleSnippet className="theme-bootstrap" component="OffcanvasStaticBackdropExample" componentName="React Bootstrap Offcanvas" />
+
+## Dark variant
+
+Add the `dark` prop to match the React Bootstrap Offcanvas with dark themes or layouts.
+
+<ExampleSnippet
+  className="theme-bootstrap docs-example-offcanvas bg-body-secondary p-0 overflow-hidden"
+  component="OffcanvasDarkExample"
+  componentName="React Bootstrap Offcanvas"
+/>
+
+## Responsive behavior
+
+Use the `responsive` prop to show the offcanvas below specific breakpoints (e.g., `responsive="lg"`). Above that breakpoint, the offcanvas behaves as a regular visible container.
+
+<ExampleSnippet className="theme-bootstrap" component="OffcanvasResponsiveExample" componentName="React Bootstrap Offcanvas" />
+
+## Placement options for React Bootstrap Offcanvas
+
+Choose the offcanvas placement with the `placement` prop:
+
+- `placement="start"` – left
+- `placement="end"` – right
+- `placement="top"` – top
+- `placement="bottom"` – bottom
+
+Examples:
+
+<ExampleSnippet className="theme-bootstrap" component="OffcanvasPlacementTopExample" componentName="React Bootstrap Offcanvas" />
+<ExampleSnippet className="theme-bootstrap" component="OffcanvasPlacementRightExample" componentName="React Bootstrap Offcanvas" />
+<ExampleSnippet className="theme-bootstrap" component="OffcanvasPlacementBottomExample" componentName="React Bootstrap Offcanvas" />
+
+## Accessibility considerations
+
+React Bootstrap Offcanvas behaves like a modal. Use `aria-labelledby` to link the offcanvas title to assistive technologies. CoreUI automatically adds `role="dialog"` and other ARIA attributes for accessibility.
+
+## API reference
+
+Review the full API for the React Bootstrap Offcanvas component and its parts:
+
+- [&lt;COffcanvas /&gt;](../api/#coffcanvas)
+- [&lt;COffcanvasBody /&gt;](../api/#coffcanvasbody)
+- [&lt;COffcanvasHeader /&gt;](../api/#coffcanvasheader)
+- [&lt;COffcanvasTitle /&gt;](../api/#coffcanvastitle)
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingAndBackdropExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingAndBackdropExample.tsx
new file mode 100644
index 00000000..134a81b7
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingAndBackdropExample.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const OffcanvasBodyScrollingAndBackdropExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(true)}>
+        Enable both scrolling &amp; backdrop
+      </CButton>
+      <COffcanvas placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
+        <COffcanvasHeader>
+          <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>Try scrolling the rest of the page to see this option in action.</COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingExample.tsx
new file mode 100644
index 00000000..802a8d5e
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingExample.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const OffcanvasBodyScrollingExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(true)}>
+        Enable body scrolling
+      </CButton>
+      <COffcanvas
+        backdrop={false}
+        placement="start"
+        scroll={true}
+        visible={visible}
+        onHide={() => setVisible(false)}
+      >
+        <COffcanvasHeader>
+          <COffcanvasTitle>Offcanvas with body scrolling</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>Try scrolling the rest of the page to see this option in action.</COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasDarkExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasDarkExample.tsx
new file mode 100644
index 00000000..5a6d0afc
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasDarkExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle } from '@coreui/react'
+
+export const OffcanvasDarkExample = () => {
+  return (
+    <COffcanvas backdrop={false} dark placement="start" scroll visible={true}>
+      <COffcanvasHeader>
+        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+        <CCloseButton className="text-reset" />
+      </COffcanvasHeader>
+      <COffcanvasBody>
+        Content for the offcanvas goes here. You can place just about any React component or custom elements
+        here.
+      </COffcanvasBody>
+    </COffcanvas>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasExample.tsx
new file mode 100644
index 00000000..dd081b7a
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CCloseButton, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle } from '@coreui/react'
+
+export const OffcanvasExample = () => {
+  return (
+    <COffcanvas backdrop={false} placement="start" scroll visible={true}>
+      <COffcanvasHeader>
+        <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+        <CCloseButton className="text-reset" />
+      </COffcanvasHeader>
+      <COffcanvasBody>
+        Content for the offcanvas goes here. You can place just about any React component or custom elements
+        here.
+      </COffcanvasBody>
+    </COffcanvas>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasLiveExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasLiveExample.tsx
new file mode 100644
index 00000000..3228e16d
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasLiveExample.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const OffcanvasLiveExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(true)}>
+        Toggle offcanvas
+      </CButton>
+      <COffcanvas placement="start" visible={visible} onHide={() => setVisible(false)}>
+        <COffcanvasHeader>
+          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>
+          Content for the offcanvas goes here. You can place just about any React component or custom elements
+          here.
+        </COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementBottomExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementBottomExample.tsx
new file mode 100644
index 00000000..9bd31ed1
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementBottomExample.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const OffcanvasPlacementBottomExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(true)}>
+        Toggle bottom offcanvas
+      </CButton>
+      <COffcanvas placement="bottom" visible={visible} onHide={() => setVisible(false)}>
+        <COffcanvasHeader>
+          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>
+          Content for the offcanvas goes here. You can place just about any React component or custom elements
+          here.
+        </COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementRightExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementRightExample.tsx
new file mode 100644
index 00000000..65a2a5f6
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementRightExample.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const OffcanvasPlacementRightExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(true)}>
+        Toggle right offcanvas
+      </CButton>
+      <COffcanvas placement="end" visible={visible} onHide={() => setVisible(false)}>
+        <COffcanvasHeader>
+          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>
+          Content for the offcanvas goes here. You can place just about any React component or custom elements
+          here.
+        </COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementTopExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementTopExample.tsx
new file mode 100644
index 00000000..c7a1263b
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementTopExample.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const OffcanvasPlacementTopExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(true)}>
+        Toggle top offcanvas
+      </CButton>
+      <COffcanvas placement="top" visible={visible} onHide={() => setVisible(false)}>
+        <COffcanvasHeader>
+          <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>
+          Content for the offcanvas goes here. You can place just about any React component or custom elements
+          here.
+        </COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasResponsiveExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasResponsiveExample.tsx
new file mode 100644
index 00000000..aa4142db
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasResponsiveExample.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import {
+  CAlert,
+  CButton,
+  CCloseButton,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const OffcanvasResponsiveExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" className="d-lg-none" onClick={() => setVisible(true)}>
+        Toggle offcanvas
+      </CButton>
+      <CAlert className="d-none d-lg-block" color="info">
+        Resize your browser to show the responsive offcanvas toggle.
+      </CAlert>
+      <COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
+        <COffcanvasHeader>
+          <COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>
+          This is content within an <code>.offcanvas-lg</code>.
+        </COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasStaticBackdropExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasStaticBackdropExample.tsx
new file mode 100644
index 00000000..f3963d07
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/examples/OffcanvasStaticBackdropExample.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import {
+  CButton,
+  CCloseButton,
+  COffcanvas,
+  COffcanvasBody,
+  COffcanvasHeader,
+  COffcanvasTitle,
+} from '@coreui/react'
+
+export const OffcanvasStaticBackdropExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton color="primary" onClick={() => setVisible(true)}>
+        Enable both scrolling &amp; backdrop
+      </CButton>
+      <COffcanvas placement="start" scroll={true} visible={visible} onHide={() => setVisible(false)}>
+        <COffcanvasHeader>
+          <COffcanvasTitle>Backdrop with scrolling</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>Try scrolling the rest of the page to see this option in action.</COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/offcanvas/index.mdx b/packages/docs/content/components/offcanvas/index.mdx
new file mode 100644
index 00000000..ea9a2874
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/index.mdx
@@ -0,0 +1,97 @@
+---
+title: React Offcanvas Component
+name: Offcanvas
+description: React alert component allows build hidden sidebars into your project for navigation, shopping carts.
+route: /components/offcanvas/
+other_frameworks: offcanvas
+---
+
+## Examples
+
+### Offcanvas components
+
+Below is an offcanvas example that is shown by default (via `visible={true}`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
+
+<ExampleSnippet
+  className="docs-example-offcanvas bg-body-tertiary p-0 overflow-hidden"
+  component="OffcanvasExample"
+  componentName="React Offcanvas"
+/>
+
+### Live demo
+
+Use the buttons below to show and hide an offcanvas component.
+
+- `visible={false}` hides content (default)
+- `visible` or `visible={true}` shows content
+
+<ExampleSnippet component="OffcanvasLiveExample" componentName="React Offcanvas" />
+
+### Body scrolling
+
+Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the scroll property to toggle `<body>` scrolling and backdrop to toggle the backdrop.
+
+<ExampleSnippet component="OffcanvasBodyScrollingExample" componentName="React Offcanvas" />
+
+### Body scrolling and backdrop
+
+You can also enable `<body>` scrolling with a visible backdrop.
+
+<ExampleSnippet
+  component="OffcanvasBodyScrollingAndBackdropExample"
+  componentName="React Offcanvas"
+/>
+
+### Static backdrop
+
+If you set a `backdrop` to `static`, your React offcanvas component will not close when clicking outside of it.
+
+<ExampleSnippet component="OffcanvasStaticBackdropExample" componentName="React Offcanvas" />
+
+## Dark offcanvas
+
+Change the appearance of offcanvases with `dark` boolean property to better match them to different contexts like dark navbars.
+
+<ExampleSnippet
+  className="docs-example-offcanvas bg-body-secondary p-0 overflow-hidden"
+  component="OffcanvasDarkExample"
+  componentName="React Offcanvas"
+/>
+
+## Responsive
+
+Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down.
+Above that breakpoint, the contents within will behave as usual.
+For example, `responsive="lg"` hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.
+
+<ExampleSnippet component="OffcanvasResponsiveExample" componentName="React Offcanvas" />
+
+## Placement
+
+There's no default placement for offcanvas components, so you must add one of the modifier classes below;
+
+- `placement="start"` places offcanvas on the left of the viewport (shown above)
+- `placement="end"` places offcanvas on the right of the viewport
+- `placement="top"` places offcanvas on the top of the viewport
+- `placement="bottom"` places offcanvas on the bottom of the viewport
+
+Try the top, right, and bottom examples out below.
+
+<ExampleSnippet component="OffcanvasPlacementTopExample" componentName="React Offcanvas" />
+
+<ExampleSnippet component="OffcanvasPlacementRightExample" componentName="React Offcanvas" />
+
+<ExampleSnippet component="OffcanvasPlacementBottomExample" componentName="React Offcanvas" />
+
+## Accessibility
+
+Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `<COffcanvas>`. Note that you don’t need to add `role="dialog"` since we already add it automatically.
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;COffcanvas /&gt;](./api/#coffcanvas)
+- [&lt;COffcanvasBody /&gt;](./api/#coffcanvasbody)
+- [&lt;COffcanvasHeader /&gt;](./api/#coffcanvasheader)
+- [&lt;COffcanvasTitle /&gt;](./api/#coffcanvastitle)
diff --git a/packages/docs/content/components/offcanvas/styling.mdx b/packages/docs/content/components/offcanvas/styling.mdx
new file mode 100644
index 00000000..be6b2e0e
--- /dev/null
+++ b/packages/docs/content/components/offcanvas/styling.mdx
@@ -0,0 +1,28 @@
+---
+title: React Offcanvas Component Styling
+name: Offcanvas Styling
+description: Learn how to customize the React Offcanvas component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/offcanvas/
+---
+
+### CSS variables
+
+React offcanvas 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.
+
+<ScssDocs file="_offcanvas.scss" capture="offcanvas-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-offcanvas-color': '#555',
+  '--cui-offcanvas-bg': '#fff',
+}
+
+return <COffcanvas style={customVars}>{/* Offcanvas content */}</COffcanvas>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="offcanvas-variables"/>
+
diff --git a/packages/docs/content/components/pagination.mdx b/packages/docs/content/components/pagination.mdx
deleted file mode 100644
index 4562715f..00000000
--- a/packages/docs/content/components/pagination.mdx
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: React Pagination Component
-name: Pagination
-description: Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
-menu: Components
-route: /components/pagination
-other_frameworks: pagination
----
-
-import { CPagination, CPaginationItem } from '@coreui/react/src/index'
-
-## Overview
-
-We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies.
-
-In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive `aria-label` for the `<nav>` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.
-
-```jsx preview
-<CPagination aria-label="Page navigation example">
-  <CPaginationItem>Previous</CPaginationItem>
-  <CPaginationItem>1</CPaginationItem>
-  <CPaginationItem>2</CPaginationItem>
-  <CPaginationItem>3</CPaginationItem>
-  <CPaginationItem>Next</CPaginationItem>
-</CPagination>
-```
-
-## Working with icons
-
-Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes.
-
-```jsx preview
-<CPagination aria-label="Page navigation example">
-  <CPaginationItem aria-label="Previous">
-    <span aria-hidden="true">&laquo;</span>
-  </CPaginationItem>
-  <CPaginationItem>1</CPaginationItem>
-  <CPaginationItem>2</CPaginationItem>
-  <CPaginationItem>3</CPaginationItem>
-  <CPaginationItem aria-label="Next">
-    <span aria-hidden="true">&raquo;</span>
-  </CPaginationItem>
-</CPagination>
-```
-
-## Disabled and active states
-
-Pagination links are customizable for different circumstances. Use `disabled` for links that appear un-clickable and `.active` to indicate the current page.
-
-While the `disabled` prop uses `pointer-events: none` to _try_ to disable the link functionality of `<a>`s, that CSS property is not yet standardized and doesn't account for keyboard navigation. As such, we always add `tabindex="-1"` on disabled links and use custom JavaScript to fully disable their functionality.
-
-```jsx preview
-<CPagination aria-label="Page navigation example">
-  <CPaginationItem aria-label="Previous" disabled>
-    <span aria-hidden="true">&laquo;</span>
-  </CPaginationItem>
-  <CPaginationItem active>1</CPaginationItem>
-  <CPaginationItem>2</CPaginationItem>
-  <CPaginationItem>3</CPaginationItem>
-  <CPaginationItem aria-label="Next">
-    <span aria-hidden="true">&raquo;</span>
-  </CPaginationItem>
-</CPagination>
-```
-
-## Sizing
-
-Fancy larger or smaller pagination? Add `size="lg"` or `size="sm"` for additional sizes.
-
-```jsx preview
-<CPagination size="lg" aria-label="Page navigation example">
-  <CPaginationItem>Previous</CPaginationItem>
-  <CPaginationItem>1</CPaginationItem>
-  <CPaginationItem>2</CPaginationItem>
-  <CPaginationItem>3</CPaginationItem>
-  <CPaginationItem>Next</CPaginationItem>
-</CPagination>
-```
-
-```jsx preview
-<CPagination size="sm" aria-label="Page navigation example">
-  <CPaginationItem>Previous</CPaginationItem>
-  <CPaginationItem>1</CPaginationItem>
-  <CPaginationItem>2</CPaginationItem>
-  <CPaginationItem>3</CPaginationItem>
-  <CPaginationItem>Next</CPaginationItem>
-</CPagination>
-```
-
-## Alignment
-
-Change the alignment of pagination components with `align` property.
-
-```jsx preview
-<CPagination align="center" aria-label="Page navigation example">
-  <CPaginationItem disabled>Previous</CPaginationItem>
-  <CPaginationItem>1</CPaginationItem>
-  <CPaginationItem>2</CPaginationItem>
-  <CPaginationItem>3</CPaginationItem>
-  <CPaginationItem>Next</CPaginationItem>
-</CPagination>
-```
-
-```jsx preview
-<CPagination align="end" aria-label="Page navigation example">
-  <CPaginationItem disabled>Previous</CPaginationItem>
-  <CPaginationItem>1</CPaginationItem>
-  <CPaginationItem>2</CPaginationItem>
-  <CPaginationItem>3</CPaginationItem>
-  <CPaginationItem>Next</CPaginationItem>
-</CPagination>
-```
-
-## Customizing
-
-### CSS variables
-
-React pagination use 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.
-
-<ScssDocs file="_pagination.scss" capture="pagination-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CPagination style={vars}>...</CCard>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="pagination-variables"/>
-
-## API
-
-### CPagination
-
-`markdown:CPagination.api.mdx`
-
-### CPaginationItem
-
-`markdown:CPaginationItem.api.mdx`
diff --git a/packages/docs/content/components/pagination/api.mdx b/packages/docs/content/components/pagination/api.mdx
new file mode 100644
index 00000000..8bc21ca8
--- /dev/null
+++ b/packages/docs/content/components/pagination/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Pagination Component API
+name: Pagination API
+description: Explore the API reference for the React Pagination component and discover how to effectively utilize its props for customization.
+route: /components/pagination/
+---
+
+import CPaginationAPI from '../../api/CPagination.api.mdx'
+import CPaginationItemAPI from '../../api/CPaginationItem.api.mdx'
+
+## CPagination
+
+<CPaginationAPI />
+
+## CPaginationItem
+
+<CPaginationItemAPI />
diff --git a/packages/docs/content/components/pagination/bootstrap.mdx b/packages/docs/content/components/pagination/bootstrap.mdx
new file mode 100644
index 00000000..4ff40cf1
--- /dev/null
+++ b/packages/docs/content/components/pagination/bootstrap.mdx
@@ -0,0 +1,48 @@
+---
+title: React Bootstrap Pagination Component
+name: Pagination with Bootstrap Styling
+description: Learn how to use the React Bootstrap Pagination component from CoreUI to create accessible and responsive navigation between pages, including sizing, alignment, and icon support.
+route: /components/pagination/
+bootstrap_component: true
+---
+
+## Overview of React Bootstrap Pagination
+
+The React Bootstrap Pagination component helps you build navigation for multi-page content, such as search results or article listings. It's based on semantic HTML with `<ul>` and `<li>` elements, ensuring accessibility and screen reader compatibility.
+
+Wrap the component in a `<nav>` element and use a descriptive `aria-label` like `aria-label="Search results pages"` for clarity.
+
+<ExampleSnippet className="theme-bootstrap" component="PaginationExample" componentName="React Bootstrap Pagination" />
+
+## Using icons in pagination
+
+You can replace text in pagination buttons with icons or symbols. Make sure to include proper `aria-labels` for accessibility.
+
+<ExampleSnippet className="theme-bootstrap" component="PaginationWorkingWithIconsExample" componentName="React Bootstrap Pagination" />
+
+## Disabled and active pagination items
+
+Use the `disabled` prop to indicate non-interactive items and the `.active` class to highlight the current page. CoreUI handles keyboard accessibility with `tabindex="-1"` and JS-based interaction disabling.
+
+<ExampleSnippet className="theme-bootstrap" component="PaginationDisabledAndActiveExample" componentName="React Bootstrap Pagination" />
+
+## Pagination sizing
+
+Adjust the size of the React Bootstrap Pagination component with the `size` prop. Available values: `lg` (large), `sm` (small).
+
+<ExampleSnippet className="theme-bootstrap" component="PaginationSizingLargeExample" componentName="React Bootstrap Pagination" />
+<ExampleSnippet className="theme-bootstrap" component="PaginationSizingSmallExample" componentName="React Bootstrap Pagination" />
+
+## Pagination alignment
+
+Change pagination alignment using the `align` prop: `"start"`, `"center"`, or `"end"`.
+
+<ExampleSnippet className="theme-bootstrap" component="PaginationAlignmentExample" componentName="React Bootstrap Pagination" />
+<ExampleSnippet className="theme-bootstrap" component="PaginationAlignment2Example" componentName="React Bootstrap Pagination" />
+
+## API reference
+
+Here’s the API reference for the React Bootstrap Pagination component:
+
+- [&lt;CPagination /&gt;](../api/#cpagination)
+- [&lt;CPaginationItem /&gt;](../api/#cpaginationitem)
diff --git a/packages/docs/content/components/pagination/examples/PaginationAlignment2Example.tsx b/packages/docs/content/components/pagination/examples/PaginationAlignment2Example.tsx
new file mode 100644
index 00000000..a188141f
--- /dev/null
+++ b/packages/docs/content/components/pagination/examples/PaginationAlignment2Example.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CPagination, CPaginationItem } from '@coreui/react'
+
+export const PaginationAlignment2Example = () => {
+  return (
+    <CPagination align="end" aria-label="Page navigation example">
+      <CPaginationItem disabled>Previous</CPaginationItem>
+      <CPaginationItem>1</CPaginationItem>
+      <CPaginationItem>2</CPaginationItem>
+      <CPaginationItem>3</CPaginationItem>
+      <CPaginationItem>Next</CPaginationItem>
+    </CPagination>
+  )
+}
diff --git a/packages/docs/content/components/pagination/examples/PaginationAlignmentExample.tsx b/packages/docs/content/components/pagination/examples/PaginationAlignmentExample.tsx
new file mode 100644
index 00000000..8627944d
--- /dev/null
+++ b/packages/docs/content/components/pagination/examples/PaginationAlignmentExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CPagination, CPaginationItem } from '@coreui/react'
+
+export const PaginationAlignmentExample = () => {
+  return (
+    <CPagination align="center" aria-label="Page navigation example">
+      <CPaginationItem disabled>Previous</CPaginationItem>
+      <CPaginationItem>1</CPaginationItem>
+      <CPaginationItem>2</CPaginationItem>
+      <CPaginationItem>3</CPaginationItem>
+      <CPaginationItem>Next</CPaginationItem>
+    </CPagination>
+  )
+}
diff --git a/packages/docs/content/components/pagination/examples/PaginationDisabledAndActiveExample.tsx b/packages/docs/content/components/pagination/examples/PaginationDisabledAndActiveExample.tsx
new file mode 100644
index 00000000..ba8d612d
--- /dev/null
+++ b/packages/docs/content/components/pagination/examples/PaginationDisabledAndActiveExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CPagination, CPaginationItem } from '@coreui/react'
+
+export const PaginationDisabledAndActiveExample = () => {
+  return (
+    <CPagination aria-label="Page navigation example">
+      <CPaginationItem aria-label="Previous" disabled>
+        <span aria-hidden="true">&laquo;</span>
+      </CPaginationItem>
+      <CPaginationItem active>1</CPaginationItem>
+      <CPaginationItem>2</CPaginationItem>
+      <CPaginationItem>3</CPaginationItem>
+      <CPaginationItem aria-label="Next">
+        <span aria-hidden="true">&raquo;</span>
+      </CPaginationItem>
+    </CPagination>
+  )
+}
diff --git a/packages/docs/content/components/pagination/examples/PaginationExample.tsx b/packages/docs/content/components/pagination/examples/PaginationExample.tsx
new file mode 100644
index 00000000..e12a6e7d
--- /dev/null
+++ b/packages/docs/content/components/pagination/examples/PaginationExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CPagination, CPaginationItem } from '@coreui/react'
+
+export const PaginationExample = () => {
+  return (
+    <CPagination aria-label="Page navigation example">
+      <CPaginationItem>Previous</CPaginationItem>
+      <CPaginationItem>1</CPaginationItem>
+      <CPaginationItem>2</CPaginationItem>
+      <CPaginationItem>3</CPaginationItem>
+      <CPaginationItem>Next</CPaginationItem>
+    </CPagination>
+  )
+}
diff --git a/packages/docs/content/components/pagination/examples/PaginationSizingLargeExample.tsx b/packages/docs/content/components/pagination/examples/PaginationSizingLargeExample.tsx
new file mode 100644
index 00000000..35ba1590
--- /dev/null
+++ b/packages/docs/content/components/pagination/examples/PaginationSizingLargeExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CPagination, CPaginationItem } from '@coreui/react'
+
+export const PaginationSizingLargeExample = () => {
+  return (
+    <CPagination size="lg" aria-label="Page navigation example">
+      <CPaginationItem>Previous</CPaginationItem>
+      <CPaginationItem>1</CPaginationItem>
+      <CPaginationItem>2</CPaginationItem>
+      <CPaginationItem>3</CPaginationItem>
+      <CPaginationItem>Next</CPaginationItem>
+    </CPagination>
+  )
+}
diff --git a/packages/docs/content/components/pagination/examples/PaginationSizingSmallExample.tsx b/packages/docs/content/components/pagination/examples/PaginationSizingSmallExample.tsx
new file mode 100644
index 00000000..857eace3
--- /dev/null
+++ b/packages/docs/content/components/pagination/examples/PaginationSizingSmallExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CPagination, CPaginationItem } from '@coreui/react'
+
+export const PaginationSizingSmallExample = () => {
+  return (
+    <CPagination size="sm" aria-label="Page navigation example">
+      <CPaginationItem>Previous</CPaginationItem>
+      <CPaginationItem>1</CPaginationItem>
+      <CPaginationItem>2</CPaginationItem>
+      <CPaginationItem>3</CPaginationItem>
+      <CPaginationItem>Next</CPaginationItem>
+    </CPagination>
+  )
+}
diff --git a/packages/docs/content/components/pagination/examples/PaginationWorkingWithIconsExample.tsx b/packages/docs/content/components/pagination/examples/PaginationWorkingWithIconsExample.tsx
new file mode 100644
index 00000000..6a48d0da
--- /dev/null
+++ b/packages/docs/content/components/pagination/examples/PaginationWorkingWithIconsExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CPagination, CPaginationItem } from '@coreui/react'
+
+export const PaginationWorkingWithIconsExample = () => {
+  return (
+    <CPagination aria-label="Page navigation example">
+      <CPaginationItem aria-label="Previous">
+        <span aria-hidden="true">&laquo;</span>
+      </CPaginationItem>
+      <CPaginationItem>1</CPaginationItem>
+      <CPaginationItem>2</CPaginationItem>
+      <CPaginationItem>3</CPaginationItem>
+      <CPaginationItem aria-label="Next">
+        <span aria-hidden="true">&raquo;</span>
+      </CPaginationItem>
+    </CPagination>
+  )
+}
diff --git a/packages/docs/content/components/pagination/index.mdx b/packages/docs/content/components/pagination/index.mdx
new file mode 100644
index 00000000..0e00bedc
--- /dev/null
+++ b/packages/docs/content/components/pagination/index.mdx
@@ -0,0 +1,52 @@
+---
+title: React Pagination Component
+name: Pagination
+description: Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
+route: /components/pagination/
+other_frameworks: pagination
+---
+
+## Overview
+
+We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies.
+
+In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive `aria-label` for the `<nav>` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.
+
+<ExampleSnippet component="PaginationExample" componentName="React Pagination" />
+
+## Working with icons
+
+Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes.
+
+<ExampleSnippet component="PaginationWorkingWithIconsExample" componentName="React Pagination" />
+
+## Disabled and active states
+
+Pagination links are customizable for different circumstances. Use `disabled` for links that appear un-clickable and `.active` to indicate the current page.
+
+While the `disabled` prop uses `pointer-events: none` to _try_ to disable the link functionality of `<a>`s, that CSS property is not yet standardized and doesn't account for keyboard navigation. As such, we always add `tabindex="-1"` on disabled links and use custom JavaScript to fully disable their functionality.
+
+<ExampleSnippet component="PaginationDisabledAndActiveExample" componentName="React Pagination" />
+
+## Sizing
+
+Fancy larger or smaller pagination? Add `size="lg"` or `size="sm"` for additional sizes.
+
+<ExampleSnippet component="PaginationSizingLargeExample" componentName="React Pagination" />
+
+<ExampleSnippet component="PaginationSizingSmallExample" componentName="React Pagination" />
+
+## Alignment
+
+Change the alignment of pagination components with `align` property.
+
+<ExampleSnippet component="PaginationAlignmentExample" componentName="React Pagination" />
+
+<ExampleSnippet component="PaginationAlignment2Example" componentName="React Pagination" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CPagination /&gt;](./api/#coffcanvas)
+- [&lt;CPaginationItem /&gt;](./api/#coffcanvasbody)
\ No newline at end of file
diff --git a/packages/docs/content/components/pagination/styling.mdx b/packages/docs/content/components/pagination/styling.mdx
new file mode 100644
index 00000000..e84cfc4f
--- /dev/null
+++ b/packages/docs/content/components/pagination/styling.mdx
@@ -0,0 +1,28 @@
+---
+title: React Pagination Component Styling
+name: Pagination Styling
+description: Learn how to customize the React Pagination component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/pagination/
+---
+
+### CSS variables
+
+React pagination 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.
+
+<ScssDocs file="_pagination.scss" capture="pagination-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-pagination-color': '#555',
+  '--cui-pagination-bg': '#fff',
+}
+
+return <CPagination style={customVars}>{/* Pagination content */}</CPagination>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="pagination-variables"/>
+
diff --git a/packages/docs/content/components/placeholder.mdx b/packages/docs/content/components/placeholder.mdx
deleted file mode 100644
index b2debab1..00000000
--- a/packages/docs/content/components/placeholder.mdx
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: React Placeholder Component
-name: Placeholder
-description: Use loading react placeholders for your components or pages to indicate something may still be loading. 
-menu: Components
-route: /components/placeholder
-other_frameworks: placeholder
----
-
-import { useState } from 'react'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardImage,
-  CCardText,
-  CCardTitle,
-  CPlaceholder,
-} from '@coreui/react/src/index'
-
-import ReactImg from './../assets/images/react.jpg'
-
-## About
-
-Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.
-
-## Example
-
-In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.
-
-```jsx preview className="d-flex justify-content-around">
-<CCard style={{ width: '18rem' }}>
-  <CCardImage orientation="top" src={ReactImg} />
-  <CCardBody>
-    <CCardTitle>Card title</CCardTitle>
-    <CCardText>
-      Some quick example text to build on the card title and make up the bulk of the card's
-      content.
-    </CCardText>
-    <CButton color="primary" href="#">Go somewhere</CButton>
-  </CCardBody>
-</CCard>
-<CCard style={{ width: '18rem' }}>
-  <CCardImage as="svg" orientation="top" width="100%" height="162" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
-    <title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect>
-  </CCardImage>
-  <CCardBody>
-    <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
-      <CPlaceholder xs={6} />
-    </CPlaceholder>
-    <CPlaceholder as={CCardText} animation="glow">
-      <CPlaceholder xs={7} />
-      <CPlaceholder xs={4} />
-      <CPlaceholder xs={4} />
-      <CPlaceholder xs={6} />
-      <CPlaceholder xs={8} />
-    </CPlaceholder>
-    <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6}></CPlaceholder>
-  </CCardBody>
-</CCard>
-```
-
-## How it works
-
-Create placeholders with the `<CPlaceholder>` component and a grid column propx (e.g., `xs={6}`) to set the `width`. They can replace the text inside an element or be added as a modifier class to an existing component.
-
-We apply additional styling to `CButton`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a `&nbsp;` within the element to reflect the height when actual text is rendered in its place.
-
-```jsx preview
-<p aria-hidden="true">
-  <CPlaceholder xs={6} />
-</p>
-<CPlaceholder as={CButton} color="primary" aria-hidden="true" disabled href="#" tabIndex={-1} xs={4}></CPlaceholder>
-```
-
-<Callout className="mb-4" color="info">
-  The use of <code>aria-hidden="true"</code> only indicates that the element should be hidden to
-  screen readers. The <strong>loading</strong> behavior of the placeholder depends on how authors
-  will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript
-  code may be needed to *swap* the state of the placeholder and inform AT users of the update.
-</Callout>
-
-### Width
-
-You can change the `width` through grid column classes, width utilities, or inline styles.
-
-```jsx preview
-<CPlaceholder xs={6} />
-<CPlaceholder className="w-75" />
-<CPlaceholder style={{ width: '30%'}} />
-```
-
-### Color
-
-By default, the `<CPlaceholder>` uses `currentColor`. This can be overridden with a custom color or utility class.
-
-```jsx preview
-<CPlaceholder xs={12} />
-
-<CPlaceholder color="primary" xs={12} />
-<CPlaceholder color="secondary" xs={12} />
-<CPlaceholder color="success" xs={12} />
-<CPlaceholder color="danger" xs={12} />
-<CPlaceholder color="warning" xs={12} />
-<CPlaceholder color="info" xs={12} />
-<CPlaceholder color="light" xs={12} />
-<CPlaceholder color="dark" xs={12} />
-```
-
-### Sizing
-
-The size of `<CPlaceholder>`s are based on the typographic style of the parent element. Customize them with `size` prop: `lg`, `sm`, or `xs`.
-
-```jsx preview
-<CPlaceholder xs={12} size="lg"/>
-<CPlaceholder xs={12}/>
-<CPlaceholder xs={12} size="sm"/>
-<CPlaceholder xs={12} size="xs"/>
-```
-
-### Animation
-
-Animate placeholders with `animation="glow"` or `animation="wave"` to better convey the perception of something being _actively_ loaded.
-
-```jsx preview
-<CPlaceholder as="p" animation="glow">
-  <CPlaceholder xs={12} />
-</CPlaceholder>
-
-<CPlaceholder as="p" animation="wave">
-  <CPlaceholder xs={12} />
-</CPlaceholder>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="placeholders"/>
-
-## API
-
-### CPlaceholder
-
-`markdown:CPlaceholder.api.mdx`
diff --git a/packages/docs/content/components/placeholder/api.mdx b/packages/docs/content/components/placeholder/api.mdx
new file mode 100644
index 00000000..eb237cd5
--- /dev/null
+++ b/packages/docs/content/components/placeholder/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Placeholder Component API
+name: Placeholder API
+description: Explore the API reference for the React Placeholder component and discover how to effectively utilize its props for customization.
+route: /components/placeholder/
+---
+
+import CPlaceholderAPI from '../../api/CPlaceholder.api.mdx'
+
+## CPlaceholder
+
+<CPlaceholderAPI />
diff --git a/packages/docs/content/components/placeholder/bootstrap.mdx b/packages/docs/content/components/placeholder/bootstrap.mdx
new file mode 100644
index 00000000..cb90d762
--- /dev/null
+++ b/packages/docs/content/components/placeholder/bootstrap.mdx
@@ -0,0 +1,63 @@
+---
+title: React Bootstrap Placeholder Component
+name: Placeholder with Bootstrap Styling
+description: Learn how to use the React Bootstrap Placeholder component from CoreUI to create animated loading placeholders that simulate content before it loads.
+route: /components/placeholder/
+bootstrap_component: true
+---
+
+## About React Bootstrap Placeholder
+
+The React Bootstrap Placeholder component lets you create skeleton loading effects using only HTML and CSS. It's useful for improving perceived performance while content is loading.
+
+React placeholders are fully customizable using utility classes and support animations, sizing, colors, and layout variations.
+
+## React Bootstrap Placeholder example
+
+Here we simulate a "loading card" layout using placeholder elements. The dimensions match the final content layout for a seamless transition.
+
+<ExampleSnippet
+  className="theme-bootstrap d-flex justify-content-around"
+  component="PlaceholderExample"
+  componentName="React Bootstrap Placeholder"
+/>
+
+## How React Bootstrap Placeholder works
+
+Use the `<CPlaceholder>` component and specify width using grid props like `xs={6}` or utility classes. You can place it inside existing elements or use it standalone.
+
+<ExampleSnippet className="theme-bootstrap" component="Placeholder2Example" componentName="React Bootstrap Placeholder" />
+
+<Callout className="mb-4" color="info">
+  The use of <code>aria-hidden="true"</code> hides the placeholder from screen readers. You may need JavaScript to toggle content and notify assistive technologies of updates.
+</Callout>
+
+### Width
+
+Set the width of placeholders with utility classes, inline styles, or grid props.
+
+<ExampleSnippet className="theme-bootstrap" component="PlaceholderWidthExample" componentName="React Bootstrap Placeholder" />
+
+### Color
+
+By default, placeholders use `currentColor`, but you can apply any color using Bootstrap utility classes.
+
+<ExampleSnippet className="theme-bootstrap" component="PlaceholderColorExample" componentName="React Bootstrap Placeholder" />
+
+### Sizing
+
+Use the `size` prop (`lg`, `sm`, or `xs`) to adjust the height and line spacing of placeholders to match the parent typography.
+
+<ExampleSnippet className="theme-bootstrap" component="PlaceholderSizingExample" componentName="React Bootstrap Placeholder" />
+
+### Animation
+
+Make React Bootstrap Placeholder elements feel dynamic by using `animation="glow"` or `animation="wave"`.
+
+<ExampleSnippet className="theme-bootstrap" component="PlaceholderAnimationExample" componentName="React Bootstrap Placeholder" />
+
+## API reference
+
+Review the available props for the React Bootstrap Placeholder component:
+
+- [&lt;CPlaceholder /&gt;](../api/#cplaceholder)
diff --git a/packages/docs/content/components/placeholder/examples/Placeholder2Example.tsx b/packages/docs/content/components/placeholder/examples/Placeholder2Example.tsx
new file mode 100644
index 00000000..33c76b0f
--- /dev/null
+++ b/packages/docs/content/components/placeholder/examples/Placeholder2Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CButton, CPlaceholder } from '@coreui/react'
+
+export const Placeholder2Example = () => {
+  return (
+    <>
+      <p aria-hidden="true">
+        <CPlaceholder xs={6} />
+      </p>
+      <CPlaceholder as={CButton} color="primary" aria-hidden="true" disabled href="#" tabIndex={-1} xs={4} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/placeholder/examples/PlaceholderAnimationExample.tsx b/packages/docs/content/components/placeholder/examples/PlaceholderAnimationExample.tsx
new file mode 100644
index 00000000..6fcb62a7
--- /dev/null
+++ b/packages/docs/content/components/placeholder/examples/PlaceholderAnimationExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CPlaceholder } from '@coreui/react'
+
+export const PlaceholderAnimationExample = () => {
+  return (
+    <>
+      <CPlaceholder as="p" animation="glow">
+        <CPlaceholder xs={12} />
+      </CPlaceholder>
+      <CPlaceholder as="p" animation="wave">
+        <CPlaceholder xs={12} />
+      </CPlaceholder>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/placeholder/examples/PlaceholderColorExample.tsx b/packages/docs/content/components/placeholder/examples/PlaceholderColorExample.tsx
new file mode 100644
index 00000000..709c62de
--- /dev/null
+++ b/packages/docs/content/components/placeholder/examples/PlaceholderColorExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CPlaceholder } from '@coreui/react'
+
+export const PlaceholderColorExample = () => {
+  return (
+    <>
+      <CPlaceholder xs={12} />
+
+      <CPlaceholder color="primary" xs={12} />
+      <CPlaceholder color="secondary" xs={12} />
+      <CPlaceholder color="success" xs={12} />
+      <CPlaceholder color="danger" xs={12} />
+      <CPlaceholder color="warning" xs={12} />
+      <CPlaceholder color="info" xs={12} />
+      <CPlaceholder color="light" xs={12} />
+      <CPlaceholder color="dark" xs={12} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx b/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx
new file mode 100644
index 00000000..0cd78f22
--- /dev/null
+++ b/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardImage,
+  CCardText,
+  CCardTitle,
+  CPlaceholder,
+} from '@coreui/react'
+
+export const PlaceholderExample = () => {
+  return (
+    <>
+      <CCard style={{ width: '18rem' }}>
+        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
+        <CCardBody>
+          <CCardTitle>Card title</CCardTitle>
+          <CCardText>
+            Some quick example text to build on the card title and make up the bulk of the card's
+            content.
+          </CCardText>
+          <CButton color="primary" href="#">
+            Go somewhere
+          </CButton>
+        </CCardBody>
+      </CCard>
+      <CCard style={{ width: '18rem' }}>
+        <CCardImage
+          as="svg"
+          orientation="top"
+          width="100%"
+          height="162"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-label="Placeholder"
+          preserveAspectRatio="xMidYMid slice"
+          focusable="false"
+        >
+          <title>Placeholder</title>
+          <rect width="100%" height="100%" fill="#868e96"></rect>
+        </CCardImage>
+        <CCardBody>
+          <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
+            <CPlaceholder xs={6} />
+          </CPlaceholder>
+          <CPlaceholder as={CCardText} animation="glow">
+            <CPlaceholder xs={7} />
+            <CPlaceholder xs={4} />
+            <CPlaceholder xs={4} />
+            <CPlaceholder xs={6} />
+            <CPlaceholder xs={8} />
+          </CPlaceholder>
+          <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6} />
+        </CCardBody>
+      </CCard>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/placeholder/examples/PlaceholderSizingExample.tsx b/packages/docs/content/components/placeholder/examples/PlaceholderSizingExample.tsx
new file mode 100644
index 00000000..ad4a82d8
--- /dev/null
+++ b/packages/docs/content/components/placeholder/examples/PlaceholderSizingExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CPlaceholder } from '@coreui/react'
+
+export const PlaceholderSizingExample = () => {
+  return (
+    <>
+      <CPlaceholder xs={12} size="lg" />
+      <CPlaceholder xs={12} />
+      <CPlaceholder xs={12} size="sm" />
+      <CPlaceholder xs={12} size="xs" />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/placeholder/examples/PlaceholderWidthExample.tsx b/packages/docs/content/components/placeholder/examples/PlaceholderWidthExample.tsx
new file mode 100644
index 00000000..c3b8c275
--- /dev/null
+++ b/packages/docs/content/components/placeholder/examples/PlaceholderWidthExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CPlaceholder } from '@coreui/react'
+
+export const PlaceholderWidthExample = () => {
+  return (
+    <>
+      <CPlaceholder xs={6} />
+      <CPlaceholder className="w-75" />
+      <CPlaceholder style={{ width: '30%' }} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/placeholder/index.mdx b/packages/docs/content/components/placeholder/index.mdx
new file mode 100644
index 00000000..efc734a6
--- /dev/null
+++ b/packages/docs/content/components/placeholder/index.mdx
@@ -0,0 +1,66 @@
+---
+title: React Placeholder Component
+name: Placeholder
+description: Use loading react placeholders for your components or pages to indicate something may still be loading.
+route: /components/placeholder/
+other_frameworks: placeholder
+---
+
+## About
+
+Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.
+
+## Example
+
+In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.
+
+<ExampleSnippet
+  className="d-flex justify-content-around"
+  component="PlaceholderExample"
+  componentName="React Placeholder"
+/>
+
+## How it works
+
+Create placeholders with the `<CPlaceholder>` component and a grid column propx (e.g., `xs={6}`) to set the `width`. They can replace the text inside an element or be added as a modifier class to an existing component.
+
+We apply additional styling to `CButton`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a `&nbsp;` within the element to reflect the height when actual text is rendered in its place.
+
+<ExampleSnippet component="Placeholder2Example" componentName="React Placeholder" />
+
+<Callout className="mb-4" color="info">
+  The use of <code>aria-hidden="true"</code> only indicates that the element should be hidden to
+  screen readers. The <strong>loading</strong> behavior of the placeholder depends on how authors
+  will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript
+  code may be needed to *swap* the state of the placeholder and inform AT users of the update.
+</Callout>
+
+### Width
+
+You can change the `width` through grid column classes, width utilities, or inline styles.
+
+<ExampleSnippet component="PlaceholderWidthExample" componentName="React Placeholder" />
+
+### Color
+
+By default, the `<CPlaceholder>` uses `currentColor`. This can be overridden with a custom color or utility class.
+
+<ExampleSnippet component="PlaceholderColorExample" componentName="React Placeholder" />
+
+### Sizing
+
+The size of `<CPlaceholder>`s are based on the typographic style of the parent element. Customize them with `size` prop: `lg`, `sm`, or `xs`.
+
+<ExampleSnippet component="PlaceholderSizingExample" componentName="React Placeholder" />
+
+### Animation
+
+Animate placeholders with `animation="glow"` or `animation="wave"` to better convey the perception of something being _actively_ loaded.
+
+<ExampleSnippet component="PlaceholderAnimationExample" componentName="React Placeholder" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CPlaceholder /&gt;](./api/#cplaceholder)
diff --git a/packages/docs/content/components/placeholder/styling.mdx b/packages/docs/content/components/placeholder/styling.mdx
new file mode 100644
index 00000000..ffe885a1
--- /dev/null
+++ b/packages/docs/content/components/placeholder/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Placeholder Component Styling
+name: Placeholder Styling
+description: Learn how to customize the React Placeholder component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/placeholder/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="placeholders"/>
diff --git a/packages/docs/content/components/popover.mdx b/packages/docs/content/components/popover.mdx
deleted file mode 100644
index ea2cdbc0..00000000
--- a/packages/docs/content/components/popover.mdx
+++ /dev/null
@@ -1,214 +0,0 @@
----
-title: React Popover Component
-name: Popover
-description: Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.
-menu: Components
-route: /components/popover
-other_frameworks: popover
----
-
-import { CPopover, CButton } from '@coreui/react/src/index'
-
-## Examples
-
-### Live demo
-
-<Example>
-  <CPopover
-    title="Popover title"
-    content="And here’s some amazing content. It’s very engaging. Right?"
-    placement="right"
-  >
-    <CButton color="danger" size="lg">Click to toggle popover</CButton>
-  </CPopover>
-</Example>
-
-```jsx
-<CPopover
-  title="Popover title"
-  content="And here’s some amazing content. It’s very engaging. Right?"
-  placement="right"
->
-  <CButton color="danger" size="lg">Click to toggle popover</CButton>
-</CPopover>
-```
-
-### Four directions
-
-Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for React in RTL.
-
-<Example>
-  <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
-    <CButton color="secondary">Popover on top</CButton>
-  </CPopover>
-  <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">
-    <CButton color="secondary">Popover on right</CButton>
-  </CPopover>
-  <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">
-    <CButton color="secondary">Popover on bottom</CButton>
-  </CPopover>
-  <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
-    <CButton color="secondary">Popover on left</CButton>
-  </CPopover>
-</Example>
-
-```jsx
-  <CPopover
-    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-    placement="top"
-  >
-    <CButton color="secondary">Popover on top</CButton>
-  </CPopover>
-  <CPopover
-    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-    placement="right"
-  >
-    <CButton color="secondary">Popover on right</CButton>
-  </CPopover>
-  <CPopover
-    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-    placement="bottom"
-  >
-    <CButton color="secondary">Popover on bottom</CButton>
-  </CPopover>
-  <CPopover
-    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-    placement="left"
-  >
-    <CButton color="secondary">Popover on left</CButton>
-  </CPopover>
-```
-
-### Custom popovers
-
-You can customize the appearance of popovers using [CSS variables](#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.
-
-export const CustomPopoversExample = () => {
-  const customPopoverStyle = {
-    '--cui-popover-max-width': '200px',
-    '--cui-popover-border-color': 'var(--cui-primary)',
-    '--cui-popover-header-bg': 'var(--cui-primary)',
-    '--cui-popover-header-color': 'var(--cui-white)',
-    '--cui-popover-body-padding-x': '1rem',
-    '--cui-popover-body-padding-y': '.5rem',
-  }
-  return (
-    <CPopover
-      content="This popover is themed via CSS variables."
-      placement="right"
-      title="Custom popover"
-      style={customPopoverStyle}
-    >
-      <CButton color="secondary">Custom popover</CButton>
-    </CPopover>
-  )
-}
-
-<Example>
-  <CustomPopoversExample />
-</Example>
-```jsx
-const customPopoverStyle = {
-  '--cui-popover-max-width': '200px',
-  '--cui-popover-border-color': 'var(--cui-primary)',
-  '--cui-popover-header-bg': 'var(--cui-primary)',
-  '--cui-popover-header-color': 'var(--cui-white)',
-  '--cui-popover-body-padding-x': '1rem',
-  '--cui-popover-body-padding-y': '.5rem',
-}
-return (
-  <CPopover
-    content="This popover is themed via CSS variables."
-    placement="right"
-    title="Custom popover"
-    style={customPopoverStyle}
-  >
-    <CButton color="secondary">Custom popover</CButton>
-  </CPopover>
-)
-```
-
-### Dismiss on next click
-
-Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
-
-<Example>
-  <CPopover
-    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-    placement="right"
-    title="Dismissible popover"
-    trigger="focus"
-  >
-    <CButton color="danger">Dismissible popover</CButton>
-  </CPopover>
-</Example>
-```jsx
-<CPopover
-  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-  placement="right"
-  title="Dismissible popover"
-  trigger="focus"
->
-  <CButton color="danger">Dismissible popover</CButton>
-</CPopover>
-```
-
-## Usage
-
-### Disabled elements
-
-Elements with the disabled attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
-
-For disabled popover triggers, you may also prefer `trigger={['hover', 'focus']}` so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.
-
-<Example>
-  <CPopover
-    content="Disabled popover"
-    placement="right"
-    trigger={['hover', 'focus']}
-  >
-    <span className="d-inline-block" tabIndex={0}>
-      <CButton color="primary" disabled>Disabled button</CButton>
-    </span>
-  </CPopover>
-</Example>
-```jsx
-<CPopover
-  content="Disabled popover"
-  placement="right"
-  trigger={['hover', 'focus']}
->
-  <span className="d-inline-block" tabIndex={0}>
-    <CButton color="primary" disabled>Disabled button</CButton>
-  </span>
-</CPopover>
-```
-
-
-## Customizing
-
-### CSS variables
-
-React popovers 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.
-
-<ScssDocs file="_popover.scss" capture="popover-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
-  '--my-css-var': 10,
-  '--my-another-css-var': 'red',
-}
-return <CPopover style={vars}>...</CPopover>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="popover-variables"/>
-
-## API
-
-### CPopover
-
-`markdown:CPopover.api.mdx`
diff --git a/packages/docs/content/components/popover/api.mdx b/packages/docs/content/components/popover/api.mdx
new file mode 100644
index 00000000..cff7ebe7
--- /dev/null
+++ b/packages/docs/content/components/popover/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Popover Component API
+name: Popover API
+description: Explore the API reference for the React Popover component and discover how to effectively utilize its props for customization.
+route: /components/popover/
+---
+
+import CPopoverAPI from '../../api/CPopover.api.mdx'
+
+## CPopover
+
+<CPopoverAPI />
diff --git a/packages/docs/content/components/popover/bootstrap.mdx b/packages/docs/content/components/popover/bootstrap.mdx
new file mode 100644
index 00000000..dc5b0616
--- /dev/null
+++ b/packages/docs/content/components/popover/bootstrap.mdx
@@ -0,0 +1,49 @@
+---
+title: React Bootstrap Popover Component
+name: Popover with Bootstrap Styling
+description: Learn how to use the React Bootstrap Popover component from CoreUI to create interactive overlays for additional information, tooltips, or custom content.
+route: /components/popover/
+bootstrap_component: true
+---
+
+## React Bootstrap Popover examples
+
+The React Bootstrap Popover component lets you display small overlay content on hover, click, or focus. Use it for tooltips, inline help, or contextual info without cluttering the UI.
+
+### Live demo
+
+Trigger the React Bootstrap Popover on click.
+
+<ExampleSnippet className="theme-bootstrap" component="PopoverLiveExample" componentName="React Bootstrap Popover" />
+
+### Four directions
+
+React Bootstrap Popovers support top, right, bottom, and left placement. Direction is automatically mirrored in RTL layouts.
+
+<ExampleSnippet className="theme-bootstrap" component="PopoverFourDirectionsExample" componentName="React Bootstrap Popover" />
+
+### Custom popovers
+
+Use inline `style` or CSS variables to override the popover's appearance.
+
+<ExampleSnippet className="theme-bootstrap" component="PopoverCustomPopoversExample" componentName="React Bootstrap Popover" />
+
+### Dismiss on next click
+
+Use `trigger="focus"` to automatically hide the popover when clicking outside the element.
+
+<ExampleSnippet className="theme-bootstrap" component="PopoverDismissExample" componentName="React Bootstrap Popover" />
+
+## Usage details
+
+### Popovers on disabled elements
+
+HTML elements with the `disabled` attribute cannot trigger popovers. Wrap them in a `<span>` or `<div>` and use `tabIndex="0"` to keep the element accessible. You can also use `trigger={['hover', 'focus']}` to ensure visual feedback.
+
+<ExampleSnippet className="theme-bootstrap" component="PopoverDisabledElementsExample" componentName="React Bootstrap Popover" />
+
+## API reference
+
+Explore the full API for the React Bootstrap Popover component:
+
+- [&lt;CPopover /&gt;](../api/#cpopover)
diff --git a/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.jsx b/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.jsx
new file mode 100644
index 00000000..8fe70484
--- /dev/null
+++ b/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CButton, CPopover } from '@coreui/react'
+
+export const PopoverCustomPopoversExample = () => {
+  const customPopoverStyle = {
+    '--cui-popover-max-width': '200px',
+    '--cui-popover-border-color': 'var(--cui-primary)',
+    '--cui-popover-header-bg': 'var(--cui-primary)',
+    '--cui-popover-header-color': 'var(--cui-white)',
+    '--cui-popover-body-padding-x': '1rem',
+    '--cui-popover-body-padding-y': '.5rem',
+  }
+
+  return (
+    <CPopover
+      content="This popover is themed via CSS variables."
+      placement="right"
+      title="Custom popover"
+      style={customPopoverStyle}
+    >
+      <CButton color="secondary">Custom popover</CButton>
+    </CPopover>
+  )
+}
diff --git a/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.tsx b/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.tsx
new file mode 100644
index 00000000..77018956
--- /dev/null
+++ b/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CButton, CPopover } from '@coreui/react'
+
+export const PopoverCustomPopoversExample = () => {
+  const customPopoverStyle = {
+    '--cui-popover-max-width': '200px',
+    '--cui-popover-border-color': 'var(--cui-primary)',
+    '--cui-popover-header-bg': 'var(--cui-primary)',
+    '--cui-popover-header-color': 'var(--cui-white)',
+    '--cui-popover-body-padding-x': '1rem',
+    '--cui-popover-body-padding-y': '.5rem',
+  } as React.CSSProperties
+
+  return (
+    <CPopover
+      content="This popover is themed via CSS variables."
+      placement="right"
+      title="Custom popover"
+      style={customPopoverStyle}
+    >
+      <CButton color="secondary">Custom popover</CButton>
+    </CPopover>
+  )
+}
diff --git a/packages/docs/content/components/popover/examples/PopoverDisabledElementsExample.tsx b/packages/docs/content/components/popover/examples/PopoverDisabledElementsExample.tsx
new file mode 100644
index 00000000..91aedb97
--- /dev/null
+++ b/packages/docs/content/components/popover/examples/PopoverDisabledElementsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CButton, CPopover } from '@coreui/react'
+
+export const PopoverDisabledElementsExample = () => {
+  return (
+    <CPopover content="Disabled popover" placement="right" trigger={['hover', 'focus']}>
+      <span className="d-inline-block" tabIndex={0}>
+        <CButton color="primary" disabled>
+          Disabled button
+        </CButton>
+      </span>
+    </CPopover>
+  )
+}
diff --git a/packages/docs/content/components/popover/examples/PopoverDismissExample.tsx b/packages/docs/content/components/popover/examples/PopoverDismissExample.tsx
new file mode 100644
index 00000000..7e9d61d9
--- /dev/null
+++ b/packages/docs/content/components/popover/examples/PopoverDismissExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CButton, CPopover } from '@coreui/react'
+
+export const PopoverDismissExample = () => {
+  return (
+    <CPopover
+      content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+      placement="right"
+      title="Dismissible popover"
+      trigger="focus"
+    >
+      <CButton color="danger">Dismissible popover</CButton>
+    </CPopover>
+  )
+}
diff --git a/packages/docs/content/components/popover/examples/PopoverFourDirectionsExample.tsx b/packages/docs/content/components/popover/examples/PopoverFourDirectionsExample.tsx
new file mode 100644
index 00000000..d57b0eba
--- /dev/null
+++ b/packages/docs/content/components/popover/examples/PopoverFourDirectionsExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CButton, CPopover } from '@coreui/react'
+
+export const PopoverFourDirectionsExample = () => {
+  return (
+    <>
+      <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
+        <CButton color="secondary">Popover on top</CButton>
+      </CPopover>
+      <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">
+        <CButton color="secondary">Popover on right</CButton>
+      </CPopover>
+      <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">
+        <CButton color="secondary">Popover on bottom</CButton>
+      </CPopover>
+      <CPopover content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
+        <CButton color="secondary">Popover on left</CButton>
+      </CPopover>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/popover/examples/PopoverLiveExample.tsx b/packages/docs/content/components/popover/examples/PopoverLiveExample.tsx
new file mode 100644
index 00000000..0c0dbc06
--- /dev/null
+++ b/packages/docs/content/components/popover/examples/PopoverLiveExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CButton, CPopover } from '@coreui/react'
+
+export const PopoverLiveExample = () => {
+  return (
+    <CPopover
+      title="Popover title"
+      content="And here’s some amazing content. It’s very engaging. Right?"
+      placement="right"
+    >
+      <CButton color="danger" size="lg">
+        Click to toggle popover
+      </CButton>
+    </CPopover>
+  )
+}
diff --git a/packages/docs/content/components/popover/index.mdx b/packages/docs/content/components/popover/index.mdx
new file mode 100644
index 00000000..bf0e011a
--- /dev/null
+++ b/packages/docs/content/components/popover/index.mdx
@@ -0,0 +1,47 @@
+---
+title: React Popover Component
+name: Popover
+description: Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.
+route: /components/popover/
+other_frameworks: popover
+---
+
+## Examples
+
+### Live demo
+
+<ExampleSnippet component="PopoverLiveExample" componentName="React Popover" />
+
+### Four directions
+
+Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for React in RTL.
+
+<ExampleSnippet component="PopoverFourDirectionsExample" componentName="React Popover" />
+
+### Custom popovers
+
+You can customize the appearance of popovers using [CSS variables](./styling/#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.
+
+<ExampleSnippet component="PopoverCustomPopoversExample" componentName="React Popover" />
+
+### Dismiss on next click
+
+Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
+
+<ExampleSnippet component="PopoverDismissExample" componentName="React Popover" />
+
+## Usage
+
+### Disabled elements
+
+Elements with the disabled attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
+
+For disabled popover triggers, you may also prefer `trigger={['hover', 'focus']}` so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.
+
+<ExampleSnippet component="PopoverDisabledElementsExample" componentName="React Popover" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CPopover /&gt;](./api/#cpopover)
\ No newline at end of file
diff --git a/packages/docs/content/components/popover/styling.mdx b/packages/docs/content/components/popover/styling.mdx
new file mode 100644
index 00000000..30371916
--- /dev/null
+++ b/packages/docs/content/components/popover/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Popover Component Styling
+name: Popover Styling
+description: Learn how to customize the React Popover component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/popover/
+---
+
+### CSS variables
+
+React Popover supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_popover.scss" capture="popover-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-popover-body-color': '#888',
+  '--cui-popover-bg': '#f2f4f6',
+}
+
+return <CPopover style={customVars}>{/* Popover content */}</CPopover>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="popover-variables"/>
diff --git a/packages/docs/content/components/progress/api.mdx b/packages/docs/content/components/progress/api.mdx
new file mode 100644
index 00000000..6718ee10
--- /dev/null
+++ b/packages/docs/content/components/progress/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Progress Component API
+name: Progress API
+description: Explore the API reference for the React Progress component and discover how to effectively utilize its props for customization.
+route: /components/progress/
+---
+
+import CProgressAPI from '../../api/CProgress.api.mdx'
+import CProgressBarAPI from '../../api/CProgressBar.api.mdx'
+
+## CProgress
+
+<CProgressAPI />
+
+## CProgressBar
+
+<CProgressBarAPI />
diff --git a/packages/docs/content/components/progress/bootstrap.mdx b/packages/docs/content/components/progress/bootstrap.mdx
new file mode 100644
index 00000000..acac97d1
--- /dev/null
+++ b/packages/docs/content/components/progress/bootstrap.mdx
@@ -0,0 +1,100 @@
+---
+title: React Bootstrap Progress Component
+name: Progress with Bootstrap Styling
+description: Learn how to use the React Bootstrap Progress component from CoreUI to create progress bars with labels, stripes, animation, stacked sections, and custom colors.
+route: /components/progress/
+bootstrap_component: true
+---
+
+## React Bootstrap Progress Component
+
+The React Bootstrap Progress component helps you visually represent progress or completion rates in tasks, processes, or downloads. These bars are fully customizable with colors, labels, sizes, and animations.
+
+## Basic usage
+
+Create a simple React Bootstrap progress bar using `<CProgress>` and `<CProgressBar>`.
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressExample" componentName="React Bootstrap Progress" />
+
+## Labels inside progress bars
+
+Add text labels to your progress bar by inserting content inside the `<CProgressBar>` element.
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressLabelsExample" componentName="React Bootstrap Progress" />
+
+When using long labels, ensure they are visible by applying `.overflow-visible` and setting a readable text color.
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressLabels2Example" componentName="React Bootstrap Progress" />
+
+Or use the `progressBarClassName` prop directly on `<CProgress>`:
+
+```jsx
+<CProgress progressBarClassName="overflow-visible text-dark px-2" color="success" value={10}>
+  Long label text for the progress bar
+</CProgress>
+```
+
+## Adjusting height
+
+Change the height of the React Bootstrap Progress component with utility classes or inline styles.
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressHeightExample" componentName="React Bootstrap Progress" />
+<ExampleSnippet className="theme-bootstrap" component="ProgressHeight2Example" componentName="React Bootstrap Progress" />
+
+## Custom backgrounds
+
+Use the `color` prop to set background colors for progress bars.
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressBackgroundsExample" componentName="React Bootstrap Progress" />
+
+If using labels, apply an appropriate text color for contrast:
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressBackgrounds2Example" componentName="React Bootstrap Progress" />
+
+Or use the `progressBarClassName` prop:
+
+```jsx
+<CProgress color="success" value={25}>25%</CProgress>
+<CProgress color="info" progressBarClassName="text-dark" value={50}>50%</CProgress>
+<CProgress color="warning" progressBarClassName="text-dark" value={75}>75%</CProgress>
+<CProgress color="danger" value={100}>100%</CProgress>
+```
+
+## Stacked progress bars
+
+React Bootstrap Progress supports multiple stacked bars inside a single `<CProgress>` or using the newer `<CProgressStacked>`.
+
+<Callout color="info" title="New markup in v4.9.0">
+  Use the `<CProgressStacked>` component introduced in v4.9.0 for stacked progress bars. Older syntax remains supported for now.
+</Callout>
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressMultipleBarsExample" componentName="React Bootstrap Progress" />
+
+Previous structure:
+
+```jsx
+<CProgress>
+  <CProgressBar value={15} />
+  <CProgressBar color="success" value={30} />
+  <CProgressBar color="info" value={20} />
+</CProgress>
+```
+
+## Striped variant
+
+Add stripes to any progress bar using `variant="striped"`.
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressStripedExample" componentName="React Bootstrap Progress" />
+
+## Animated stripes
+
+Make stripes animated using the `animated` prop.
+
+<ExampleSnippet className="theme-bootstrap" component="ProgressAnimatedStripedExample" componentName="React Bootstrap Progress" />
+
+## API reference
+
+Explore the full API for the React Bootstrap Progress component:
+
+- [&lt;CProgress /&gt;](../api/#cprogress)
+- [&lt;CProgressBar /&gt;](../api/#cprogressbar)
diff --git a/packages/docs/content/components/progress/examples/ProgressAnimatedStripedExample.tsx b/packages/docs/content/components/progress/examples/ProgressAnimatedStripedExample.tsx
new file mode 100644
index 00000000..3ffb272c
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressAnimatedStripedExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CProgress } from '@coreui/react'
+
+export const ProgressAnimatedStripedExample = () => {
+  return (
+    <>
+      <CProgress color="success" variant="striped" animated value={25} />
+      <CProgress color="info" variant="striped" animated value={50} />
+      <CProgress color="warning" variant="striped" animated value={75} />
+      <CProgress color="danger" variant="striped" animated value={100} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressBackgrounds2Example.tsx b/packages/docs/content/components/progress/examples/ProgressBackgrounds2Example.tsx
new file mode 100644
index 00000000..c1476186
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressBackgrounds2Example.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CProgress, CProgressBar } from '@coreui/react'
+
+export const ProgressBackgrounds2Example = () => {
+  return (
+    <>
+      <CProgress color="success" value={25}>
+        <CProgressBar>25%</CProgressBar>
+      </CProgress>
+      <CProgress color="info" value={50}>
+        <CProgressBar className="text-dark">50%</CProgressBar>
+      </CProgress>
+      <CProgress color="warning" value={75}>
+        <CProgressBar className="text-dark">75%</CProgressBar>
+      </CProgress>
+      <CProgress color="danger" value={100}>
+        <CProgressBar>100%</CProgressBar>
+      </CProgress>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressBackgroundsExample.tsx b/packages/docs/content/components/progress/examples/ProgressBackgroundsExample.tsx
new file mode 100644
index 00000000..ee2d8f1f
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressBackgroundsExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CProgress } from '@coreui/react'
+
+export const ProgressBackgroundsExample = () => {
+  return (
+    <>
+      <CProgress color="success" value={25} />
+      <CProgress color="info" value={50} />
+      <CProgress color="warning" value={75} />
+      <CProgress color="danger" value={100} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressExample.tsx b/packages/docs/content/components/progress/examples/ProgressExample.tsx
new file mode 100644
index 00000000..03c056d8
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CProgress } from '@coreui/react'
+
+export const ProgressExample = () => {
+  return (
+    <>
+      <CProgress value={0} />
+      <CProgress value={25} />
+      <CProgress value={50} />
+      <CProgress value={75} />
+      <CProgress value={100} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressHeight2Example.tsx b/packages/docs/content/components/progress/examples/ProgressHeight2Example.tsx
new file mode 100644
index 00000000..b88a6b14
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressHeight2Example.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CProgress, CProgressBar } from '@coreui/react'
+
+export const ProgressHeight2Example = () => {
+  return (
+    <>
+      <CProgress height={1}>
+        <CProgressBar value={25}></CProgressBar>
+      </CProgress>
+      <CProgress height={20}>
+        <CProgressBar value={25}></CProgressBar>
+      </CProgress>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressHeightExample.tsx b/packages/docs/content/components/progress/examples/ProgressHeightExample.tsx
new file mode 100644
index 00000000..dbb9a8b9
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressHeightExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CProgress } from '@coreui/react'
+
+export const ProgressHeightExample = () => {
+  return (
+    <>
+      <CProgress height={1} value={25} />
+      <CProgress height={20} value={25} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressLabels2Example.tsx b/packages/docs/content/components/progress/examples/ProgressLabels2Example.tsx
new file mode 100644
index 00000000..673b4fe7
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressLabels2Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CProgress, CProgressBar } from '@coreui/react'
+
+export const ProgressLabels2Example = () => {
+  return (
+    <CProgress value={10}>
+      <CProgressBar className="overflow-visible text-dark px-2" color="success">
+        Long label text for the progress bar, set to a dark color
+      </CProgressBar>
+    </CProgress>
+  )
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressLabelsExample.tsx b/packages/docs/content/components/progress/examples/ProgressLabelsExample.tsx
new file mode 100644
index 00000000..717ee4c4
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressLabelsExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CProgress } from '@coreui/react'
+
+export const ProgressLabelsExample = () => {
+  return <CProgress value={25}>25%</CProgress>
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressMultipleBarsExample.tsx b/packages/docs/content/components/progress/examples/ProgressMultipleBarsExample.tsx
new file mode 100644
index 00000000..b9353162
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressMultipleBarsExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CProgress, CProgressStacked } from '@coreui/react'
+
+export const ProgressMultipleBarsExample = () => {
+  return (
+    <CProgressStacked>
+      <CProgress value={15} />
+      <CProgress color="success" value={30} />
+      <CProgress color="info" value={20} />
+    </CProgressStacked>
+  )
+}
diff --git a/packages/docs/content/components/progress/examples/ProgressStripedExample.tsx b/packages/docs/content/components/progress/examples/ProgressStripedExample.tsx
new file mode 100644
index 00000000..adcf8c00
--- /dev/null
+++ b/packages/docs/content/components/progress/examples/ProgressStripedExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CProgress } from '@coreui/react'
+
+export const ProgressStripedExample = () => {
+  return (
+    <>
+      <CProgress color="success" variant="striped" value={25} />
+      <CProgress color="info" variant="striped" value={50} />
+      <CProgress color="warning" variant="striped" value={75} />
+      <CProgress color="danger" variant="striped" value={100} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/progress.mdx b/packages/docs/content/components/progress/index.mdx
similarity index 54%
rename from packages/docs/content/components/progress.mdx
rename to packages/docs/content/components/progress/index.mdx
index 905b7cb8..7403e954 100644
--- a/packages/docs/content/components/progress.mdx
+++ b/packages/docs/content/components/progress/index.mdx
@@ -2,42 +2,27 @@
 title: React Progress Component
 name: Progress
 description: Documentation and examples for using React progress bars featuring support for stacked bars, animated backgrounds, and text labels.
-menu: Components
-route: /components/progress
+route: /components/progress/
 other_frameworks: progress
 ---
 
-import { CButton, CProgress, CProgressBar, CProgressStacked } from '@coreui/react/src/index'
-
 ## Example
 
 Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
 
 ## Basic usage
 
-```jsx preview
-<CProgress value={0} />
-<CProgress value={25} />
-<CProgress value={50} />
-<CProgress value={75} />
-<CProgress value={100} />
-```
+<ExampleSnippet component="ProgressExample" componentName="React Progress" />
 
 ## Labels
 
 Add labels to your progress bars by placing text within the `<CProgressBar>`.
 
-```jsx preview
-<CProgress value={25}>25%</CProgress>
-```
+<ExampleSnippet component="ProgressLabelsExample" componentName="React Progress" />
 
 Please note that the default setting for the content within the `<CProgressBar />` is to be limited by the `overflow: hidden property`, preventing it from extending beyond the bar's boundaries. If the progress bar is shorter than its label, the content will be truncated and could be difficult to read. To modify this behavior, you can utilize the `.overflow-visible` class from the overflow utilities. However, it is important to specify a specific text color to ensure readability. It's worth noting that this approach currently does not consider color modes.
 
-```jsx preview
-<CProgress value={10}>
-  <CProgressBar className="overflow-visible text-dark px-2" color="success">Long label text for the progress bar, set to a dark color</CProgressBar>
-</CProgress>
-```
+<ExampleSnippet component="ProgressLabels2Example" componentName="React Progress" />
 
 Since **v4.9.0** you can also use the `progressBarClassName` property directly on the `<CProgress />` component to achieve the same.
 
@@ -49,47 +34,19 @@ Since **v4.9.0** you can also use the `progressBarClassName` property directly o
 
 We only set a `height` value on the `<CProgress>`, so if you change that value the inner `<CProgressBar>` will automatically resize accordingly.
 
-```jsx preview
-<CProgress height={1} value={25} />
-<CProgress height={20} value={25} />
-```
+<ExampleSnippet component="ProgressHeightExample" componentName="React Progress" />
 
-```jsx preview
-<CProgress height={1}>
-  <CProgressBar value={25}></CProgressBar>
-</CProgress>
-<CProgress height={20}>
-  <CProgressBar value={25}></CProgressBar>
-</CProgress>
-```
+<ExampleSnippet component="ProgressHeight2Example" componentName="React Progress" />
 
 ## Backgrounds
 
 Use `color` prop to change the appearance of individual progress bars.
 
-```jsx preview
-<CProgress color="success" value={25} />
-<CProgress color="info" value={50} />
-<CProgress color="warning" value={75} />
-<CProgress color="danger" value={100} />
-```
+<ExampleSnippet component="ProgressBackgroundsExample" componentName="React Progress" />
 
 Ensure that when you incorporate labels into progress bars featuring a custom background color, you also select an appropriate text color to ensure readability and maintain adequate contrast for the labels.
 
-```jsx preview
-<CProgress color="success" value={25}>
-  <CProgressBar>25%</CProgressBar>
-</CProgress>
-<CProgress color="info" value={50}>
-  <CProgressBar className="text-dark">50%</CProgressBar>
-</CProgress>
-<CProgress color="warning" value={75}>
-  <CProgressBar className="text-dark">75%</CProgressBar>
-</CProgress>
-<CProgress color="danger" value={100}>
-  <CProgressBar>100%</CProgressBar>
-</CProgress>
-```
+<ExampleSnippet component="ProgressBackgrounds2Example" componentName="React Progress" />
 
 Since **v4.9.0** you can also use the `progressBarClassName` property directly on the `<CProgress />` component to achieve the same.
 
@@ -108,16 +65,7 @@ Include multiple progress bars in a progress component if you need. In **v4.9.0*
   In version 4.9.0, we introduced a new `<CProgressStacked>` component to more logically wrap multiple progress bars into a single stacked progress bar. The previous structure will continue to work until the next major version.
 </Callout>
 
-
-**New markup**
-
-```jsx preview
-<CProgressStacked>
-  <CProgress value={15} />
-  <CProgress color="success" value={30} />
-  <CProgress color="info" value={20} />
-</CProgressStacked>  
-```
+<ExampleSnippet component="ProgressMultipleBarsExample" componentName="React Progress" />
 
 **Previous markup**
 ```jsx
@@ -132,53 +80,17 @@ Include multiple progress bars in a progress component if you need. In **v4.9.0*
 
 Add `variant="striped"` to any `<CProgressBar>` to apply a stripe via CSS gradient over the progress bar's background color.
 
-```jsx preview
-<CProgress color="success" variant="striped" value={25} />
-<CProgress color="info" variant="striped" value={50} />
-<CProgress color="warning" variant="striped" value={75} />
-<CProgress color="danger" variant="striped" value={100} />
-```
-
+<ExampleSnippet component="ProgressStripedExample" componentName="React Progress" />
 
 ## Animated stripes
 
 The striped gradient can also be animated. Add `animated` property to `<CProgressBar>` to animate the stripes right to left via CSS3 animations.
 
-```jsx preview
-<CProgress color="success" variant="striped" animated value={25} />
-<CProgress color="info" variant="striped" animated value={50} />
-<CProgress color="warning" variant="striped" animated value={75} />
-<CProgress color="danger" variant="striped" animated value={100} />
-```
-
-## Customizing
-
-### CSS variables
-
-React progress bars 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.
-
-<ScssDocs file="_progress.scss" capture="progress-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CProgress style={vars}>...</CProgress>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="progress-variables"/>
+<ExampleSnippet component="ProgressAnimatedStripedExample" componentName="React Progress" />
 
 ## API
 
-### CProgress
-
-`markdown:CProgress.api.mdx`
-
-### CProgressBar
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
 
-`markdown:CProgressBar.api.mdx`
+- [&lt;CProgress /&gt;](./api/#cprogress)
+- [&lt;CProgressBar /&gt;](./api/#cprogressbar)
diff --git a/packages/docs/content/components/progress/styling.mdx b/packages/docs/content/components/progress/styling.mdx
new file mode 100644
index 00000000..7af14283
--- /dev/null
+++ b/packages/docs/content/components/progress/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Progress Component Styling
+name: Progress Styling
+description: Learn how to customize the React Progress component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/progress/
+---
+
+### CSS variables
+
+React Progress supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_progress.scss" capture="progress-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-progress-bar-color': '#888',
+  '--cui-progress-bar-bg': '#f2f4f6',
+}
+
+return <CProgress style={customVars}>...</CProgress>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="progress-variables"/>
diff --git a/packages/docs/content/components/sidebar.mdx b/packages/docs/content/components/sidebar.mdx
deleted file mode 100644
index a2367350..00000000
--- a/packages/docs/content/components/sidebar.mdx
+++ /dev/null
@@ -1,305 +0,0 @@
----
-title: React Sidebar Component
-name: Sidebar
-description:
-menu: Components
-route: /components/sidebar
-other_frameworks: sidebar
----
-
-import CIcon from '@coreui/icons-react'
-import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'
-
-import {
-  CBadge,
-  CSidebar,
-  CSidebarBrand,
-  CSidebarFooter,
-  CSidebarHeader,
-  CSidebarNav,
-  CSidebarToggler,
-  CNavGroup,
-  CNavGroupItems,
-  CNavItem,
-  CNavLink,
-  CNavTitle,
-} from '@coreui/react/src/index'
-
-## Supported content
-
-Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:
-
-- `<CSidebarHeader>` for optional header.
-- `<CSidebarBrand>` for your company, product, or project name.
-- `<CSidebarNav>` for a full-height and lightweight navigation (including support for dropdowns).
-- `<CSidebarFooter>` for optional footer.
-- `<CSidebarToggler>` for use with our minimizer plugin.
-
-## Examples
-
-### Sidebar component
-
-Below is an sidebar example that is shown by default on desktop devices.
-
-<Example className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">
-  <CSidebar className="border-end">
-    <CSidebarHeader className="border-bottom">
-      <CSidebarBrand>CoreUI</CSidebarBrand>
-    </CSidebarHeader>
-    <CSidebarNav>
-      <CNavTitle>Nav Title</CNavTitle>
-      <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
-      <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
-      <CNavGroup
-        toggler={
-          <>
-            <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
-          </>
-        }
-      >
-        <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-        <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-      </CNavGroup>
-      <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
-      <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
-    </CSidebarNav>
-    <CSidebarHeader className="border-top">
-      <CSidebarToggler />
-    </CSidebarHeader>
-  </CSidebar>
-</Example>
-
-```jsx
-<CSidebar className="border-end">
-  <CSidebarHeader className="border-bottom">
-    <CSidebarBrand>CoreUI</CSidebarBrand>
-  </CSidebarHeader>
-  <CSidebarNav>
-    <CNavTitle>Nav Title</CNavTitle>
-    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
-    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
-    <CNavGroup
-      toggler={
-        <>
-          <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
-        </>
-      }
-    >
-      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-    </CNavGroup>
-    <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
-    <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
-  </CSidebarNav>
-  <CSidebarHeader className="border-top">
-    <CSidebarToggler />
-  </CSidebarHeader>
-</CSidebar>
-```
-
-### Narrow sidebar
-
-Add the `narrow` property to make the sidebar narrow.
-
-<Example className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">
-  <CSidebar className="border-end" narrow>
-    <CSidebarHeader className="border-bottom">
-      <CSidebarBrand>CUI</CSidebarBrand>
-    </CSidebarHeader>
-    <CSidebarNav>
-      <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
-      <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
-      <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /></CNavItem>
-      <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /></CNavItem>
-    </CSidebarNav>
-  </CSidebar>
-</Example>
-
-```jsx
-<CSidebar className="border-end" narrow>
-  <CSidebarHeader className="border-bottom">
-    <CSidebarBrand>CUI</CSidebarBrand>
-  </CSidebarHeader>
-  <CSidebarNav>
-    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
-    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
-    <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /></CNavItem>
-    <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /></CNavItem>
-  </CSidebarNav>
-</CSidebar>
-```
-
-### Unfoldable sidebar
-
-Add the `unfoldable` property to make the sidebar narrow with unfoldable on hover.
-
-<Example className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">
-  <CSidebar className="border-end" unfoldable>
-    <CSidebarHeader className="border-bottom">
-      <CSidebarBrand>CUI</CSidebarBrand>
-    </CSidebarHeader>
-    <CSidebarNav>
-      <CNavTitle>Nav Title</CNavTitle>
-      <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
-      <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
-      <CNavGroup
-        toggler={
-          <>
-            <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
-          </>
-        }
-      >
-        <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-        <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-      </CNavGroup>
-      <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CUI</CNavItem>
-      <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
-    </CSidebarNav>
-  </CSidebar>
-</Example>
-
-```jsx
-<CSidebar className="border-end" unfoldable>
-  <CSidebarHeader className="border-bottom">
-    <CSidebarBrand>CUI</CSidebarBrand>
-  </CSidebarHeader>
-  <CSidebarNav>
-    <CNavTitle>Nav Title</CNavTitle>
-    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
-    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
-    <CNavGroup
-      toggler={
-        <>
-          <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
-        </>
-      }
-    >
-      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-    </CNavGroup>
-    <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
-    <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
-  </CSidebarNav>
-</CSidebar>
-```
-
-## Dark sidebar
-
-Change the appearance of sidebars with the `colorScheme="dark"`.
-
-<Example className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">
-  <CSidebar className="border-end" colorScheme="dark">
-    <CSidebarHeader className="border-bottom">
-      <CSidebarBrand>CoreUI</CSidebarBrand>
-    </CSidebarHeader>
-    <CSidebarNav>
-      <CNavTitle>Nav Title</CNavTitle>
-      <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
-      <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
-      <CNavGroup
-        toggler={
-          <>
-            <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
-          </>
-        }
-      >
-        <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-        <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-      </CNavGroup>
-      <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
-      <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
-    </CSidebarNav>
-  </CSidebar>
-</Example>
-
-```jsx
-<CSidebar className="border-end" colorScheme="dark">
-  <CSidebarHeader className="border-bottom">
-    <CSidebarBrand>CoreUI</CSidebarBrand>
-  </CSidebarHeader>
-  <CSidebarNav>
-    <CNavTitle>Nav Title</CNavTitle>
-    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
-    <CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
-    <CNavGroup
-      toggler={
-        <>
-          <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
-        </>
-      }
-    >
-      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-      <CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
-    </CNavGroup>
-    <CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
-    <CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
-  </CSidebarNav>
-</CSidebar>
-```
-
-## Placement
-
-By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.
-
-- `placement="start"` places sidebar on the left of the viewport (shown above)
-- `placement="end"` places sidebar on the right of the viewport
-
-## Customizing
-
-### CSS variables
-
-React sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-css-vars" />
-
-<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-overlaid-css-vars" />
-
-<ScssDocs file="sidebar/_sidebar-narrow.scss" capture="sidebar-narrow-css-vars" />
-
-<ScssDocs file="sidebar/_sidebar-nav.scss" capture="sidebar-nav-css-vars" />
-
-<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-toggler-css-vars" />
-
-<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-backdrop-css-vars" />
-
-#### How to use CSS variables
-
-```jsx
-const vars = {
-  '--my-css-var': 10,
-  '--my-another-css-var': 'red',
-}
-return <CSidebar style={vars}>...</CSidebar>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="sidebar-variables" />
-
-<ScssDocs file="_variables.scss" capture="sidebar-toggler" />
-
-## API
-
-### CSidebar
-
-`markdown:CSidebar.api.mdx`
-
-### CSidebarBrand
-
-`markdown:CSidebarBrand.api.mdx`
-
-### CSidebarFooter
-
-`markdown:CSidebarFooter.api.mdx`
-
-### CSidebarHeader
-
-`markdown:CSidebarHeader.api.mdx`
-
-### CSidebarNav
-
-`markdown:CSidebarNav.api.mdx`
-
-### CSidebarToggler
-
-`markdown:CSidebarToggler.api.mdx`
diff --git a/packages/docs/content/components/sidebar/api.mdx b/packages/docs/content/components/sidebar/api.mdx
new file mode 100644
index 00000000..92b6b112
--- /dev/null
+++ b/packages/docs/content/components/sidebar/api.mdx
@@ -0,0 +1,38 @@
+---
+title: React Sidebar Component API
+name: Sidebar API
+description: Explore the API reference for the React Sidebar component and discover how to effectively utilize its props for customization.
+route: /components/widgets/
+---
+
+import CSidebarAPI from '../../api/CSidebar.api.mdx'
+import CSidebarBrandAPI from '../../api/CSidebarBrand.api.mdx'
+import CSidebarFooterAPI from '../../api/CSidebarFooter.api.mdx'
+import CSidebarHeaderAPI from '../../api/CSidebarHeader.api.mdx'
+import CSidebarNavAPI from '../../api/CSidebarNav.api.mdx'
+import CSidebarTogglerAPI from '../../api/CSidebarToggler.api.mdx'
+
+## CSidebar
+
+<CSidebarAPI />
+
+## CSidebarBrand
+
+<CSidebarBrandAPI />
+
+## CSidebarFooter
+
+<CSidebarFooterAPI />
+
+## CSidebarHeader
+
+<CSidebarHeaderAPI />
+
+## CSidebarNav
+
+<CSidebarNavAPI />
+
+## CSidebarToggler
+
+<CSidebarTogglerAPI />
+
diff --git a/packages/docs/content/components/sidebar/bootstrap.mdx b/packages/docs/content/components/sidebar/bootstrap.mdx
new file mode 100644
index 00000000..0a3f246e
--- /dev/null
+++ b/packages/docs/content/components/sidebar/bootstrap.mdx
@@ -0,0 +1,81 @@
+---
+title: React Bootstrap Sidebar Component
+name: Sidebar with Bootstrap Styling
+description: Learn how to use the React Bootstrap Sidebar component from CoreUI to build customizable side navigation panels with support for branding, dropdowns, dark mode, and responsive behavior.
+route: /components/sidebar/
+bootstrap_component: true
+---
+
+## React Bootstrap Sidebar Component
+
+The React Bootstrap Sidebar component provides a flexible vertical navigation layout with support for branding, navigation links, toggling, and theming. It’s perfect for admin panels, dashboards, and mobile navigation.
+
+## Supported sub-components
+
+The sidebar includes built-in support for these components:
+
+- `<CSidebarHeader>` – optional top section.
+- `<CSidebarBrand>` – brand or logo section.
+- `<CSidebarNav>` – main vertical navigation area.
+- `<CSidebarFooter>` – optional bottom section.
+- `<CSidebarToggler>` – toggler for sidebar minimization or expansion.
+
+## React Bootstrap Sidebar examples
+
+### Standard sidebar
+
+By default, the sidebar is shown on desktop viewports and hidden on mobile.
+
+<ExampleSnippet
+  className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
+  component="SidebarExample"
+  componentName="React Bootstrap Sidebar"
+/>
+
+### Narrow sidebar
+
+Use the `narrow` prop to collapse the sidebar into a compact version, showing only icons.
+
+<ExampleSnippet
+  className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
+  component="SidebarNarrowExample"
+  componentName="React Bootstrap Sidebar"
+/>
+
+### Unfoldable sidebar
+
+Add `unfoldable` to create a narrow sidebar that expands on hover.
+
+<ExampleSnippet
+  className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
+  component="SidebarUnfoldableExample"
+  componentName="React Bootstrap Sidebar"
+/>
+
+## Dark mode sidebar
+
+Apply `colorScheme="dark"` to match your sidebar to a dark theme.
+
+<ExampleSnippet
+  className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
+  component="SidebarDarkExample"
+  componentName="React Bootstrap Sidebar"
+/>
+
+## Sidebar placement
+
+By default, the React Bootstrap Sidebar appears on the left. Use the `placement` prop to change this:
+
+- `placement="start"` – left side (default)
+- `placement="end"` – right side
+
+## API reference
+
+Explore the available props for the React Bootstrap Sidebar component and its subcomponents:
+
+- [&lt;CSidebar /&gt;](../api/#csidebar)
+- [&lt;CSidebarBrand /&gt;](../api/#csidebarbrand)
+- [&lt;CSidebarFooter /&gt;](../api/#csidebarfooter)
+- [&lt;CSidebarHeader /&gt;](../api/#csidebarheader)
+- [&lt;CSidebarNav /&gt;](../api/#csidebarnav)
+- [&lt;CSidebarToggler /&gt;](../api/#csidebartoggler)
diff --git a/packages/docs/content/components/sidebar/examples/SidebarDarkExample.tsx b/packages/docs/content/components/sidebar/examples/SidebarDarkExample.tsx
new file mode 100644
index 00000000..1681c3e0
--- /dev/null
+++ b/packages/docs/content/components/sidebar/examples/SidebarDarkExample.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import {
+  CBadge,
+  CSidebar,
+  CSidebarBrand,
+  CSidebarHeader,
+  CSidebarNav,
+  CNavGroup,
+  CNavItem,
+  CNavTitle,
+} from '@coreui/react'
+
+import CIcon from '@coreui/icons-react'
+import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'
+
+export const SidebarDarkExample = () => {
+  return (
+    <CSidebar className="border-end" colorScheme="dark">
+      <CSidebarHeader className="border-bottom">
+        <CSidebarBrand>CoreUI</CSidebarBrand>
+      </CSidebarHeader>
+      <CSidebarNav>
+        <CNavTitle>Nav Title</CNavTitle>
+        <CNavItem href="#">
+          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
+        </CNavItem>
+        <CNavItem href="#">
+          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
+          <CBadge color="primary ms-auto">NEW</CBadge>
+        </CNavItem>
+        <CNavGroup
+          toggler={
+            <>
+              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
+            </>
+          }
+        >
+          <CNavItem href="#">
+            <span className="nav-icon">
+              <span className="nav-icon-bullet"></span>
+            </span>{' '}
+            Nav dropdown item
+          </CNavItem>
+          <CNavItem href="#">
+            <span className="nav-icon">
+              <span className="nav-icon-bullet"></span>
+            </span>{' '}
+            Nav dropdown item
+          </CNavItem>
+        </CNavGroup>
+        <CNavItem href="https://coreui.io">
+          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
+        </CNavItem>
+        <CNavItem href="https://coreui.io/pro/">
+          <CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO
+        </CNavItem>
+      </CSidebarNav>
+    </CSidebar>
+  )
+}
diff --git a/packages/docs/content/components/sidebar/examples/SidebarExample.tsx b/packages/docs/content/components/sidebar/examples/SidebarExample.tsx
new file mode 100644
index 00000000..e3b35bbb
--- /dev/null
+++ b/packages/docs/content/components/sidebar/examples/SidebarExample.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import {
+  CBadge,
+  CSidebar,
+  CSidebarBrand,
+  CSidebarHeader,
+  CSidebarNav,
+  CSidebarToggler,
+  CNavGroup,
+  CNavItem,
+  CNavTitle,
+} from '@coreui/react'
+
+import CIcon from '@coreui/icons-react'
+import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'
+
+export const SidebarExample = () => {
+  return (
+    <CSidebar className="border-end">
+      <CSidebarHeader className="border-bottom">
+        <CSidebarBrand>CoreUI</CSidebarBrand>
+      </CSidebarHeader>
+      <CSidebarNav>
+        <CNavTitle>Nav Title</CNavTitle>
+        <CNavItem href="#">
+          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
+        </CNavItem>
+        <CNavItem href="#">
+          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
+          <CBadge color="primary ms-auto">NEW</CBadge>
+        </CNavItem>
+        <CNavGroup
+          toggler={
+            <>
+              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
+            </>
+          }
+        >
+          <CNavItem href="#">
+            <span className="nav-icon">
+              <span className="nav-icon-bullet"></span>
+            </span>{' '}
+            Nav dropdown item
+          </CNavItem>
+          <CNavItem href="#">
+            <span className="nav-icon">
+              <span className="nav-icon-bullet"></span>
+            </span>{' '}
+            Nav dropdown item
+          </CNavItem>
+        </CNavGroup>
+        <CNavItem href="https://coreui.io">
+          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
+        </CNavItem>
+        <CNavItem href="https://coreui.io/pro/">
+          <CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO
+        </CNavItem>
+      </CSidebarNav>
+      <CSidebarHeader className="border-top">
+        <CSidebarToggler />
+      </CSidebarHeader>
+    </CSidebar>
+  )
+}
diff --git a/packages/docs/content/components/sidebar/examples/SidebarNarrowExample.tsx b/packages/docs/content/components/sidebar/examples/SidebarNarrowExample.tsx
new file mode 100644
index 00000000..2a332e6a
--- /dev/null
+++ b/packages/docs/content/components/sidebar/examples/SidebarNarrowExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CSidebar, CSidebarBrand, CSidebarHeader, CSidebarNav, CNavItem } from '@coreui/react'
+
+import CIcon from '@coreui/icons-react'
+import { cilCloudDownload, cilLayers, cilSpeedometer } from '@coreui/icons'
+
+export const SidebarNarrowExample = () => {
+  return (
+    <CSidebar className="border-end" narrow>
+      <CSidebarHeader className="border-bottom">
+        <CSidebarBrand>CUI</CSidebarBrand>
+      </CSidebarHeader>
+      <CSidebarNav>
+        <CNavItem href="#">
+          <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
+        </CNavItem>
+        <CNavItem href="#">
+          <CIcon customClassName="nav-icon" icon={cilSpeedometer} />
+        </CNavItem>
+        <CNavItem href="https://coreui.io">
+          <CIcon customClassName="nav-icon" icon={cilCloudDownload} />
+        </CNavItem>
+        <CNavItem href="https://coreui.io/pro/">
+          <CIcon customClassName="nav-icon" icon={cilLayers} />
+        </CNavItem>
+      </CSidebarNav>
+    </CSidebar>
+  )
+}
diff --git a/packages/docs/content/components/sidebar/examples/SidebarUnfoldableExample.tsx b/packages/docs/content/components/sidebar/examples/SidebarUnfoldableExample.tsx
new file mode 100644
index 00000000..a4c2cd49
--- /dev/null
+++ b/packages/docs/content/components/sidebar/examples/SidebarUnfoldableExample.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import {
+  CBadge,
+  CSidebar,
+  CSidebarBrand,
+  CSidebarHeader,
+  CSidebarNav,
+  CNavGroup,
+  CNavItem,
+  CNavTitle,
+} from '@coreui/react'
+
+import CIcon from '@coreui/icons-react'
+import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'
+
+export const SidebarUnfoldableExample = () => {
+  return (
+    <CSidebar className="border-end" unfoldable>
+      <CSidebarHeader className="border-bottom">
+        <CSidebarBrand>CUI</CSidebarBrand>
+      </CSidebarHeader>
+      <CSidebarNav>
+        <CNavTitle>Nav Title</CNavTitle>
+        <CNavItem href="#">
+          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
+        </CNavItem>
+        <CNavItem href="#">
+          <CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
+          <CBadge color="primary ms-auto">NEW</CBadge>
+        </CNavItem>
+        <CNavGroup
+          toggler={
+            <>
+              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
+            </>
+          }
+        >
+          <CNavItem href="#">
+            <span className="nav-icon">
+              <span className="nav-icon-bullet"></span>
+            </span>{' '}
+            Nav dropdown item
+          </CNavItem>
+          <CNavItem href="#">
+            <span className="nav-icon">
+              <span className="nav-icon-bullet"></span>
+            </span>{' '}
+            Nav dropdown item
+          </CNavItem>
+        </CNavGroup>
+        <CNavItem href="https://coreui.io">
+          <CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
+        </CNavItem>
+        <CNavItem href="https://coreui.io/pro/">
+          <CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO
+        </CNavItem>
+      </CSidebarNav>
+    </CSidebar>
+  )
+}
diff --git a/packages/docs/content/components/sidebar/index.mdx b/packages/docs/content/components/sidebar/index.mdx
new file mode 100644
index 00000000..1ad2fe25
--- /dev/null
+++ b/packages/docs/content/components/sidebar/index.mdx
@@ -0,0 +1,77 @@
+---
+title: React Sidebar Component
+name: Sidebar
+description:
+route: /components/sidebar/
+other_frameworks: sidebar
+---
+
+## Supported content
+
+Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:
+
+- `<CSidebarHeader>` for optional header.
+- `<CSidebarBrand>` for your company, product, or project name.
+- `<CSidebarNav>` for a full-height and lightweight navigation (including support for dropdowns).
+- `<CSidebarFooter>` for optional footer.
+- `<CSidebarToggler>` for use with our minimizer plugin.
+
+## Examples
+
+### Sidebar component
+
+Below is an sidebar example that is shown by default on desktop devices.
+
+<ExampleSnippet
+  className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
+  component="SidebarExample"
+  componentName="React Sidebar"
+/>
+
+### Narrow sidebar
+
+Add the `narrow` property to make the sidebar narrow.
+
+<ExampleSnippet
+  className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
+  component="SidebarNarrowExample"
+  componentName="React Sidebar"
+/>
+
+### Unfoldable sidebar
+
+Add the `unfoldable` property to make the sidebar narrow with unfoldable on hover.
+
+<ExampleSnippet
+  className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
+  component="SidebarUnfoldableExample"
+  componentName="React Sidebar"
+/>
+
+## Dark sidebar
+
+Change the appearance of sidebars with the `colorScheme="dark"`.
+
+<ExampleSnippet
+  className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
+  component="SidebarDarkExample"
+  componentName="React Sidebar"
+/>
+
+## Placement
+
+By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.
+
+- `placement="start"` places sidebar on the left of the viewport (shown above)
+- `placement="end"` places sidebar on the right of the viewport
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CSidebar /&gt;](./api/#csidebar)
+- [&lt;CSidebarBrand /&gt;](./api/#csidebarbrand)
+- [&lt;CSidebarFooter /&gt;](./api/#csidebarfooter)
+- [&lt;CSidebarHeader /&gt;](./api/#csidebarheader)
+- [&lt;CSidebarNav /&gt;](./api/#csidebarnav)
+- [&lt;CSidebarToggler /&gt;](./api/#csidebartoggler)
diff --git a/packages/docs/content/components/sidebar/styling.mdx b/packages/docs/content/components/sidebar/styling.mdx
new file mode 100644
index 00000000..0a5ab0bd
--- /dev/null
+++ b/packages/docs/content/components/sidebar/styling.mdx
@@ -0,0 +1,39 @@
+---
+title: React Sidebar Component Styling
+name: Sidebar Styling
+description: Learn how to customize the React Sidebar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/sidebar/
+---
+
+### CSS variables
+
+React sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-overlaid-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar-narrow.scss" capture="sidebar-narrow-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar-nav.scss" capture="sidebar-nav-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-toggler-css-vars" />
+
+<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-backdrop-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-sidebar-bg': '#121212',
+  '--cui-sidebar-color': '#eee',
+}
+
+return <CSidebar style={customVars}>{/* Sidebar content */}</CSidebar>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="sidebar-variables" />
+
+<ScssDocs file="_variables.scss" capture="sidebar-toggler" />
diff --git a/packages/docs/content/components/spinner.mdx b/packages/docs/content/components/spinner.mdx
deleted file mode 100644
index a304992c..00000000
--- a/packages/docs/content/components/spinner.mdx
+++ /dev/null
@@ -1,193 +0,0 @@
----
-title: React Spinner Component
-name: Spinner
-description: Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.
-menu: Components
-route: /components/spinner
-other_frameworks: spinner
----
-
-import { CSpinner, CButton } from '@coreui/react/src/index'
-
-## About
-
-CoreUI "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
-
-For accessibility purposes, each loader here includes `role="status"` and a nested `<span className="visually-hidden">Loading...</span>`.
-
-## Border spinner
-
-Use the border spinners for a lightweight loading indicator.
-
-```jsx preview
-<CSpinner/>
-```
-
-### Colors
-
-The border spinner uses `currentColor` for its `border-color`. You can use any of our text color utilities on the standard spinner.
-
-```jsx preview
-<CSpinner color="primary" />
-<CSpinner color="secondary" />
-<CSpinner color="success" />
-<CSpinner color="danger" />
-<CSpinner color="warning" />
-<CSpinner color="info" />
-<CSpinner color="light" />
-<CSpinner color="dark" />
-```
-
-## Growing spinner
-
-If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
-
-```jsx preview
-<CSpinner variant="grow" />
-```
-
-Once again, this spinner is built with `currentColor`, so you can easily change its appearance. Here it is in blue, along with the supported variants.
-
-```jsx preview
-<CSpinner color="primary" variant="grow" />
-<CSpinner color="secondary" variant="grow" />
-<CSpinner color="success" variant="grow" />
-<CSpinner color="danger" variant="grow" />
-<CSpinner color="warning" variant="grow" />
-<CSpinner color="info" variant="grow" />
-<CSpinner color="light" variant="grow" />
-<CSpinner color="dark" variant="grow" />
-```
-
-## Alignment 
-
-CoreUI React spinners are built with `rems`, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned.
-
-### Margin 
-
-Use [margin utilities](https://coreui.io/docs/utilities/spacing/#margin-and-padding) like `.m-5` for easy spacing.
-
-```jsx preview
-<CSpinner className="m-5" />
-```
-
-### Placement
-
-Use [flexbox utilities][https://coreui.io/docs/utilities/flex/], [float utilities][https://coreui.io/docs/utilities/float/], or [text alignment][https://coreui.io/docs/utilities/text/] utilities to place spinners exactly where you need them in any situation.
-
-#### Flex
-
-```jsx preview
-<div className="d-flex justify-content-center">
-  <CSpinner />
-</div>
-```
-
-```jsx preview
-<div className="d-flex align-items-center">
-  <strong role="status">Loading...</strong>
-  <CSpinner className="ms-auto" />
-</div>
-```
-
-#### Floats
-
-```jsx preview
-<div className="clearfix">
-  <CSpinner className="float-end" />
-</div>
-```
-
-#### Text align
-
-```jsx preview
-<div className="text-center">
-  <CSpinner />
-</div>
-```
-
-## Size
-
-Add `size="sm"` property to make a smaller spinner that can quickly be used within other components.
-
-```jsx preview
-<CSpinner size="sm" />
-<CSpinner size="sm" variant="grow" />
-```
-
-Or, use custom CSS or inline styles to change the dimensions as needed.
-
-```jsx preview
-<CSpinner size="sm" style={{ width: '3rem', height: '3rem'}}/>
-<CSpinner size="sm" variant="grow" style={{ width: '3rem', height: '3rem'}}/>
-```
-
-## Buttons
-
-Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
-
-```jsx preview
-<CButton color="primary" disabled>
-  <CSpinner as="span" size="sm" aria-hidden="true" />
-</CButton>
-<CButton color="primary" disabled>
-  <CSpinner as="span" size="sm" aria-hidden="true" />
-  Loading...
-</CButton>
-```
-
-```jsx preview
-<CButton color="primary" disabled>
-  <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
-</CButton>
-<CButton color="primary" disabled>
-  <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
-  Loading...
-</CButton>
-```
-
-## Customizing
-
-### CSS variables
-
-React spinners 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.
-
-Border spinner variables:
-
-<ScssDocs file="_spinners.scss" capture="spinner-border-css-vars" />
-
-Growing spinner variables:
-
-<ScssDocs file="_spinners.scss" capture="spinner-grow-css-vars" />
-
-For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:
-
-<ScssDocs file="_spinners.scss" capture="spinner-border-sm-css-vars" />
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CSpinner style={vars}>...</CSpinner>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="spinner-variables" />
-
-### Keyframes
-
-Used for creating the CSS animations for our spinners. Included in `_spinners.scss`.
-
-<ScssDocs file="_spinners.scss" capture="spinner-border-keyframes" />
-
-<ScssDocs file="_spinners.scss" capture="spinner-grow-keyframes" />
-
-## API
-
-### CSpinner
-
-`markdown:CSpinner.api.mdx`
\ No newline at end of file
diff --git a/packages/docs/content/components/spinner/api.mdx b/packages/docs/content/components/spinner/api.mdx
new file mode 100644
index 00000000..dd8cd57a
--- /dev/null
+++ b/packages/docs/content/components/spinner/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Spinner Component API
+name: Spinner API
+description: Explore the API reference for the React Spinner component and discover how to effectively utilize its props for customization.
+route: /components/spinner/
+---
+
+import CSpinnerAPI from '../../api/CSpinner.api.mdx'
+
+## CSpinner
+
+<CSpinnerAPI />
diff --git a/packages/docs/content/components/spinner/bootstrap.mdx b/packages/docs/content/components/spinner/bootstrap.mdx
new file mode 100644
index 00000000..ec121699
--- /dev/null
+++ b/packages/docs/content/components/spinner/bootstrap.mdx
@@ -0,0 +1,82 @@
+---
+title: React Bootstrap Spinner Component
+name: Spinner with Bootstrap Styling
+description: Learn how to use the React Bootstrap Spinner component from CoreUI to show loading states in your app with animated indicators, color options, alignment, and sizing.
+route: /components/spinner/
+bootstrap_component: true
+---
+
+## React Bootstrap Spinner Component
+
+The React Bootstrap Spinner component displays a visual loading indicator in your app. Use it to communicate that content is loading, such as form submissions, page data, or background processes.
+
+All spinners are built with HTML and CSS—no JavaScript needed. You can easily customize appearance, color, size, and placement using utility classes.
+
+## Border spinner
+
+Use the border spinner as a lightweight, animated loading indicator.
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderExample" componentName="React Bootstrap Spinner" />
+
+### Spinner colors
+
+The React Bootstrap Spinner uses `currentColor`, so you can customize it using any text color utility class.
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderColorsExample" componentName="React Bootstrap Spinner" />
+
+## Grow spinner
+
+An alternative to the border version is the grow spinner. It expands and fades instead of spinning.
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerGrowExample" componentName="React Bootstrap Spinner" />
+<ExampleSnippet className="theme-bootstrap" component="SpinnerGrowColorsExample" componentName="React Bootstrap Spinner" />
+
+## Spinner alignment
+
+React Bootstrap Spinners use `inline-flex`, so they align well in many layout contexts.
+
+### Margin utilities
+
+Use Bootstrap spacing utilities for control over margin and spacing.
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderMarginExample" componentName="React Bootstrap Spinner" />
+
+### Flex alignment
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderPlacementFlexExample" componentName="React Bootstrap Spinner" />
+<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderPlacementFlex2Example" componentName="React Bootstrap Spinner" />
+
+### Float placement
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderPlacementFloatsExample" componentName="React Bootstrap Spinner" />
+
+### Text alignment
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderPlacementTextAlignExample" componentName="React Bootstrap Spinner" />
+
+## Spinner size
+
+Use the `size="sm"` prop for a compact spinner.
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerSizeSmallExample" componentName="React Bootstrap Spinner" />
+
+For full control, use inline styles or custom CSS:
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerSizeCustomExample" componentName="React Bootstrap Spinner" />
+
+## Spinners in buttons
+
+Show React Bootstrap Spinners inside buttons to indicate loading states during form submissions or API requests.
+
+<ExampleSnippet className="theme-bootstrap" component="SpinnerButtonsExample" componentName="React Bootstrap Spinner" />
+<ExampleSnippet className="theme-bootstrap" component="SpinnerButtons2Example" componentName="React Bootstrap Spinner" />
+
+## Accessibility
+
+Each spinner includes `role="status"` and a visually hidden `<span>` with `"Loading..."` for screen readers. You can customize the text based on context.
+
+## API reference
+
+Explore the full API for the React Bootstrap Spinner component:
+
+- [&lt;CSpinner /&gt;](../api/#cspinner)
diff --git a/packages/docs/content/components/spinner/examples/SpinnerBorderColorsExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerBorderColorsExample.tsx
new file mode 100644
index 00000000..666bc2d6
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerBorderColorsExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerBorderColorsExample = () => {
+  return (
+    <>
+      <CSpinner color="primary" />
+      <CSpinner color="secondary" />
+      <CSpinner color="success" />
+      <CSpinner color="danger" />
+      <CSpinner color="warning" />
+      <CSpinner color="info" />
+      <CSpinner color="light" />
+      <CSpinner color="dark" />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerBorderExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerBorderExample.tsx
new file mode 100644
index 00000000..20f79c24
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerBorderExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerBorderExample = () => {
+  return <CSpinner />
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerBorderMarginExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerBorderMarginExample.tsx
new file mode 100644
index 00000000..fe16722d
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerBorderMarginExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerBorderMarginExample = () => {
+  return <CSpinner className="m-5" />
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlex2Example.tsx b/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlex2Example.tsx
new file mode 100644
index 00000000..6ea3851b
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlex2Example.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerBorderPlacementFlex2Example = () => {
+  return (
+    <div className="d-flex align-items-center">
+      <strong role="status">Loading...</strong>
+      <CSpinner className="ms-auto" />
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlexExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlexExample.tsx
new file mode 100644
index 00000000..102bc1b4
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlexExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerBorderPlacementFlexExample = () => {
+  return (
+    <div className="d-flex justify-content-center">
+      <CSpinner />
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFloatsExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFloatsExample.tsx
new file mode 100644
index 00000000..625308f2
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFloatsExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerBorderPlacementFloatsExample = () => {
+  return (
+    <div className="clearfix">
+      <CSpinner className="float-end" />
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementTextAlignExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementTextAlignExample.tsx
new file mode 100644
index 00000000..335cf447
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementTextAlignExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerBorderPlacementTextAlignExample = () => {
+  return (
+    <div className="text-center">
+      <CSpinner />
+    </div>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerButtons2Example.tsx b/packages/docs/content/components/spinner/examples/SpinnerButtons2Example.tsx
new file mode 100644
index 00000000..1044a293
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerButtons2Example.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CButton, CSpinner } from '@coreui/react'
+
+export const SpinnerButtons2Example = () => {
+  return (
+    <>
+      <CButton color="primary" disabled>
+        <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
+        <span className="visually-hidden" role="status">
+          Loading...
+        </span>
+      </CButton>
+      <CButton color="primary" disabled>
+        <CSpinner as="span" className="me-2" size="sm" variant="grow" aria-hidden="true" />
+        <span role="status">Loading...</span>
+      </CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerButtonsExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerButtonsExample.tsx
new file mode 100644
index 00000000..4aa7b70a
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerButtonsExample.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CButton, CSpinner } from '@coreui/react'
+
+export const SpinnerButtonsExample = () => {
+  return (
+    <>
+      <CButton color="primary" disabled>
+        <CSpinner as="span" size="sm" aria-hidden="true" />
+        <span className="visually-hidden" role="status">
+          Loading...
+        </span>
+      </CButton>
+      <CButton color="primary" disabled>
+        <CSpinner as="span" className="me-2" size="sm" aria-hidden="true" />
+        <span role="status">Loading...</span>
+      </CButton>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerGrowColorsExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerGrowColorsExample.tsx
new file mode 100644
index 00000000..1a889888
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerGrowColorsExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerGrowColorsExample = () => {
+  return (
+    <>
+      <CSpinner color="primary" variant="grow" />
+      <CSpinner color="secondary" variant="grow" />
+      <CSpinner color="success" variant="grow" />
+      <CSpinner color="danger" variant="grow" />
+      <CSpinner color="warning" variant="grow" />
+      <CSpinner color="info" variant="grow" />
+      <CSpinner color="light" variant="grow" />
+      <CSpinner color="dark" variant="grow" />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerGrowExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerGrowExample.tsx
new file mode 100644
index 00000000..4ec6ce16
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerGrowExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerGrowExample = () => {
+  return <CSpinner variant="grow" />
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerSizeCustomExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerSizeCustomExample.tsx
new file mode 100644
index 00000000..752ce62f
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerSizeCustomExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerSizeCustomExample = () => {
+  return (
+    <>
+      <CSpinner style={{ width: '3rem', height: '3rem' }} />
+      <CSpinner variant="grow" style={{ width: '3rem', height: '3rem' }} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/spinner/examples/SpinnerSizeSmallExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerSizeSmallExample.tsx
new file mode 100644
index 00000000..49134e10
--- /dev/null
+++ b/packages/docs/content/components/spinner/examples/SpinnerSizeSmallExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CSpinner } from '@coreui/react'
+
+export const SpinnerSizeSmallExample = () => {
+  return (
+    <>
+      <CSpinner size="sm" />
+      <CSpinner size="sm" variant="grow" />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/spinner/index.mdx b/packages/docs/content/components/spinner/index.mdx
new file mode 100644
index 00000000..81e761c0
--- /dev/null
+++ b/packages/docs/content/components/spinner/index.mdx
@@ -0,0 +1,87 @@
+---
+title: React Spinner Component
+name: Spinner
+description: Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.
+route: /components/spinner/
+other_frameworks: spinner
+---
+
+## About
+
+CoreUI "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
+
+For accessibility purposes, each loader here includes `role="status"` and a nested `<span className="visually-hidden">Loading...</span>`.
+
+## Border spinner
+
+Use the border spinners for a lightweight loading indicator.
+
+<ExampleSnippet component="SpinnerBorderExample" componentName="React Spinner" />
+
+### Colors
+
+The border spinner uses `currentColor` for its `border-color`. You can use any of our text color utilities on the standard spinner.
+
+<ExampleSnippet component="SpinnerBorderColorsExample" componentName="React Spinner" />
+
+## Growing spinner
+
+If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
+
+<ExampleSnippet component="SpinnerGrowExample" componentName="React Spinner" />
+
+Once again, this spinner is built with `currentColor`, so you can easily change its appearance. Here it is in blue, along with the supported variants.
+
+<ExampleSnippet component="SpinnerGrowColorsExample" componentName="React Spinner" />
+
+## Alignment
+
+CoreUI React spinners are built with `rems`, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned.
+
+### Margin
+
+Use [margin utilities](https://coreui.io/bootstrap/docs/utilities/spacing/#margin-and-padding) like `.m-5` for easy spacing.
+
+<ExampleSnippet component="SpinnerBorderMarginExample" componentName="React Spinner" />
+
+### Placement
+
+Use [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/), [float utilities](https://coreui.io/bootstrap/docs/utilities/float/), or [text alignment](https://coreui.io/bootstrap/docs/utilities/text/) utilities to place spinners exactly where you need them in any situation.
+
+#### Flex
+
+<ExampleSnippet component="SpinnerBorderPlacementFlexExample" componentName="React Spinner" />
+
+<ExampleSnippet component="SpinnerBorderPlacementFlex2Example" componentName="React Spinner" />
+
+#### Floats
+
+<ExampleSnippet component="SpinnerBorderPlacementFloatsExample" componentName="React Spinner" />
+
+#### Text align
+
+<ExampleSnippet component="SpinnerBorderPlacementTextAlignExample" componentName="React Spinner" />
+
+## Size
+
+Add `size="sm"` property to make a smaller spinner that can quickly be used within other components.
+
+<ExampleSnippet component="SpinnerSizeSmallExample" componentName="React Spinner" />
+
+Or, use custom CSS or inline styles to change the dimensions as needed.
+
+<ExampleSnippet component="SpinnerSizeCustomExample" componentName="React Spinner" />
+
+## Buttons
+
+Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
+
+<ExampleSnippet component="SpinnerButtonsExample" componentName="React Spinner" />
+
+<ExampleSnippet component="SpinnerButtons2Example" componentName="React Spinner" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CSpinner /&gt;](./api/#cspinner)
diff --git a/packages/docs/content/components/spinner/styling.mdx b/packages/docs/content/components/spinner/styling.mdx
new file mode 100644
index 00000000..280abc50
--- /dev/null
+++ b/packages/docs/content/components/spinner/styling.mdx
@@ -0,0 +1,45 @@
+---
+title: React Spinner Component Styling
+name: Spinner Styling
+description: Learn how to customize the React Spinner component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/spinner/
+---
+
+### CSS variables
+
+React spinners 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.
+
+Border spinner variables:
+
+<ScssDocs file="_spinners.scss" capture="spinner-border-css-vars" />
+
+Growing spinner variables:
+
+<ScssDocs file="_spinners.scss" capture="spinner-grow-css-vars" />
+
+For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:
+
+<ScssDocs file="_spinners.scss" capture="spinner-border-sm-css-vars" />
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-spinner-width': '3rem',
+  '--cui-spinner-height': '3rem',
+}
+
+return <CCallout style={customVars}>...</CCallout>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="spinner-variables" />
+
+### Keyframes
+
+Used for creating the CSS animations for our spinners. Included in `_spinners.scss`.
+
+<ScssDocs file="_spinners.scss" capture="spinner-border-keyframes" />
+
+<ScssDocs file="_spinners.scss" capture="spinner-grow-keyframes" />
diff --git a/packages/docs/content/components/table/api.mdx b/packages/docs/content/components/table/api.mdx
new file mode 100644
index 00000000..12670487
--- /dev/null
+++ b/packages/docs/content/components/table/api.mdx
@@ -0,0 +1,42 @@
+---
+title: React Table Component API
+name: Table API
+description: Explore the API reference for the React Table component and discover how to effectively utilize its props for customization.
+route: /components/table/
+---
+
+import CTableAPI from '../../api/CTable.api.mdx'
+import CTableBodyAPI from '../../api/CTableBody.api.mdx'
+import CTableDataCellAPI from '../../api/CTableDataCell.api.mdx'
+import CTableFootAPI from '../../api/CTableFoot.api.mdx'
+import CTableHeadAPI from '../../api/CTableHead.api.mdx'
+import CTableHeaderCellAPI from '../../api/CTableHeaderCell.api.mdx'
+import CTableRowAPI from '../../api/CTableRow.api.mdx'
+
+## CTable
+
+<CTableAPI />
+
+## CTableBody
+
+<CTableBodyAPI />
+
+## CTableDataCell
+
+<CTableDataCellAPI />
+
+## CTableFoot
+
+<CTableFootAPI />
+
+## CTableHead
+
+<CTableHeadAPI />
+
+## CTableHeaderCell
+
+<CTableHeaderCellAPI />
+
+## CTableRow
+
+<CTableRowAPI />
diff --git a/packages/docs/content/components/table/bootstrap.mdx b/packages/docs/content/components/table/bootstrap.mdx
new file mode 100644
index 00000000..a1edf2a3
--- /dev/null
+++ b/packages/docs/content/components/table/bootstrap.mdx
@@ -0,0 +1,1640 @@
+---
+title: React Bootstrap Table Component
+name: Table with Bootstrap Styling
+description: Learn how to use CoreUI’s React Bootstrap Table component to build responsive, feature-rich tables styled with Bootstrap in your React app.
+route: /components/table/
+bootstrap_component: true
+---
+
+import {
+  CBadge,
+  CTable,
+  CTableBody,
+  CTableCaption,
+  CTableDataCell,
+  CTableFoot,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow,
+} from '@coreui/react'
+
+## How to use React Bootstrap Table component
+
+The `<CTable>` component with Bootstrap theming lets you build responsive and accessible React tables using CoreUI components. Define structure manually or use the `columns` and `items` API for easier table generation.
+
+export const TableExample = (props) => {
+  const columns = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
+    },
+  ]
+  return <CTable columns={columns} items={items} {...props} />
+}
+
+<ExampleSnippet component="TableExample" componentName="React Table" />
+
+In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).
+
+```jsx
+const columns = [
+  {
+    key: 'id',
+    label: '#',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'class',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'heading_1',
+    label: 'Heading',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'heading_2',
+    label: 'Heading',
+    _props: { scope: 'col' },
+  },
+]
+const items = [
+  {
+    id: 1,
+    class: 'Mark',
+    heading_1: 'Otto',
+    heading_2: '@mdo',
+    _cellProps: { id: { scope: 'row' } },
+  },
+  {
+    id: 2,
+    class: 'Jacob',
+    heading_1: 'Thornton',
+    heading_2: '@fat',
+    _cellProps: { id: { scope: 'row' } },
+  },
+  {
+    id: 3,
+    class: 'Larry the Bird',
+    heading_2: '@twitter',
+    _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
+  },
+]
+return <CTable columns={columns} items={items} />
+```
+
+You can also put all table components together manually as hitherto.
+
+```jsx
+<CTable>
+  <CTableHead>
+    <CTableRow>
+      <CTableHeaderCell scope="col">#</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+    </CTableRow>
+  </CTableHead>
+  <CTableBody>
+    <CTableRow>
+      <CTableHeaderCell scope="row">1</CTableHeaderCell>
+      <CTableDataCell>Mark</CTableDataCell>
+      <CTableDataCell>Otto</CTableDataCell>
+      <CTableDataCell>@mdo</CTableDataCell>
+    </CTableRow>
+    <CTableRow>
+      <CTableHeaderCell scope="row">2</CTableHeaderCell>
+      <CTableDataCell>Jacob</CTableDataCell>
+      <CTableDataCell>Thornton</CTableDataCell>
+      <CTableDataCell>@fat</CTableDataCell>
+    </CTableRow>
+    <CTableRow>
+      <CTableHeaderCell scope="row">3</CTableHeaderCell>
+      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
+      <CTableDataCell>@twitter</CTableDataCell>
+    </CTableRow>
+  </CTableBody>
+</CTable>
+```
+
+Both methods produce the same html code.
+
+## Variants
+
+Use contextual classes to color react tables, table rows or individual cells.
+
+export const VariantExample = () => {
+  const columns = [
+    { key: 'class', _props: { scope: 'col' } },
+    { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
+    { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
+  ]
+  const items = [
+    {
+      class: 'Default',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+    },
+    {
+      class: 'Primary',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'primary' },
+    },
+    {
+      class: 'Secondary',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'secondary' },
+    },
+    {
+      class: 'Success',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'success' },
+    },
+    {
+      class: 'Danger',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'danger' },
+    },
+    {
+      class: 'Warning',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'warning' },
+    },
+    {
+      class: 'Info',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'info' },
+    },
+    {
+      class: 'Light',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'light' },
+    },
+    {
+      class: 'Dark',
+      heading_1: 'Cell',
+      heading_2: 'Cell',
+      _cellProps: { class: { scope: 'row' } },
+      _props: { color: 'dark' },
+    },
+  ]
+  return <CTable columns={columns} items={items} />
+}
+
+<Example className="theme-bootstrap">
+  <VariantExample />
+</Example>
+
+```jsx
+<CTable>
+  <CTableHead>
+    <CTableRow>
+      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+    </CTableRow>
+  </CTableHead>
+  <CTableBody>
+    <CTableRow>
+      <CTableHeaderCell scope="row">Default</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+    <CTableRow color="primary">
+      <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+    <CTableRow color="secondary">
+      <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+    <CTableRow color="success">
+      <CTableHeaderCell scope="row">Success</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+    <CTableRow color="danger">
+      <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+    <CTableRow color="warning">
+      <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+    <CTableRow color="info">
+      <CTableHeaderCell scope="row">Info</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+    <CTableRow color="light">
+      <CTableHeaderCell scope="row">Light</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+    <CTableRow color="dark">
+      <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
+      <CTableDataCell>Cell</CTableDataCell>
+      <CTableDataCell>Cell</CTableDataCell>
+    </CTableRow>
+  </CTableBody>
+</CTable>
+```
+
+Since version **4.3.0** also this way.
+
+```jsx
+const columns = [
+  { key: 'class', _props: { scope: 'col' } },
+  { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
+  { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
+]
+const items = [
+  {
+    class: 'Default',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+  },
+  {
+    class: 'Primary',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+    _props: { color: 'primary' },
+  },
+  {
+    class: 'Secondary',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+    _props: { color: 'secondary' },
+  },
+  {
+    class: 'Success',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+    _props: { color: 'success' },
+  },
+  {
+    class: 'Danger',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+    _props: { color: 'danger' },
+  },
+  {
+    class: 'Warning',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+    _props: { color: 'warning' },
+  },
+  {
+    class: 'Info',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+    _props: { color: 'info' },
+  },
+  {
+    class: 'Light',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+    _props: { color: 'light' },
+  },
+  {
+    class: 'Dark',
+    heading_1: 'Cell',
+    heading_2: 'Cell',
+    _cellProps: { class: { scope: 'row' } },
+    _props: { color: 'dark' },
+  },
+]
+return <CTable columns={columns} items={items} />
+```
+
+## Accented tables
+
+### Striped rows
+
+Use `striped` property to add zebra-striping to any react table row within the `<CTableBody>`.
+
+<Example className="theme-bootstrap">
+  <TableExample striped />
+</Example>
+
+```jsx
+<CTable striped>
+  ...
+</CTable>
+```
+
+### Striped columns
+
+Enable `striped` to alternate row background colors for better visual distinction.
+
+<Example className="theme-bootstrap">
+  <TableExample stripedColumns />
+</Example>
+
+```jsx
+<CTable stripedColumns>
+  ...
+</CTable>
+```
+
+These classes can also be added to react table variants:
+
+<Example className="theme-bootstrap">
+  <TableExample color="dark" striped />
+</Example>
+
+```jsx
+<CTable color="dark" striped>
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  <TableExample color="dark" stripedColumns />
+</Example>
+
+```jsx
+<CTable color="dark" stripedColumns>
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  <TableExample color="success" striped />
+</Example>
+
+```jsx
+<CTable color="success" striped>
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  <TableExample color="success" stripedColumns />
+</Example>
+
+```jsx
+<CTable color="success" stripedColumns>
+  ...
+</CTable>
+```
+
+### Hoverable rows
+
+Use the `hover` prop to highlight rows when hovered by the user.
+
+<Example className="theme-bootstrap">
+  <TableExample hover />
+</Example>
+
+```jsx
+<CTable hover>
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  <TableExample color="dark" hover />
+</Example>
+
+```jsx
+<CTable color="dark" hover>
+  ...
+</CTable>
+```
+
+These hoverable rows can also be combined with the striped variant:
+
+<Example className="theme-bootstrap">
+  <TableExample striped hover />
+</Example>
+
+```jsx
+<CTable striped hover>
+  ...
+</CTable>
+```
+
+### Active tables
+
+Highlight a table row or cell by adding a `active` property.
+
+export const ActiveTableExample = () => {
+  const columns = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _props: { active: true },
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
+    },
+  ]
+  return <CTable columns={columns} items={items} />
+}
+
+<Example className="rounded">
+  <ActiveTableExample />
+</Example>
+
+As mentioned before since version **4.3.0** we have two ways to generate tables, also with custom properties for rows, and cells.
+
+```jsx
+const columns = [
+  {
+    key: 'id',
+    label: '#',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'class',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'heading_1',
+    label: 'Heading',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'heading_2',
+    label: 'Heading',
+    _props: { scope: 'col' },
+  },
+]
+const items = [
+  {
+    id: 1,
+    class: 'Mark',
+    heading_1: 'Otto',
+    heading_2: '@mdo',
+    _props: { active: true },
+    _cellProps: { id: { scope: 'row' } },
+  },
+  {
+    id: 2,
+    class: 'Jacob',
+    heading_1: 'Thornton',
+    heading_2: '@fat',
+    _cellProps: { id: { scope: 'row' } },
+  },
+  {
+    id: 3,
+    class: 'Larry the Bird',
+    heading_2: '@twitter',
+    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
+  },
+]
+return <CTable columns={columns} items={items} />
+```
+
+```jsx
+<CTable>
+  <CTableHead>
+    <CTableRow>
+      <CTableHeaderCell scope="col">#</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+    </CTableRow>
+  </CTableHead>
+  <CTableBody>
+    <CTableRow active>
+      <CTableHeaderCell scope="row">1</CTableHeaderCell>
+      <CTableDataCell>Mark</CTableDataCell>
+      <CTableDataCell>Otto</CTableDataCell>
+      <CTableDataCell>@mdo</CTableDataCell>
+    </CTableRow>
+    <CTableRow>
+      <CTableHeaderCell scope="row">2</CTableHeaderCell>
+      <CTableDataCell>Jacob</CTableDataCell>
+      <CTableDataCell>Thornton</CTableDataCell>
+      <CTableDataCell>@fat</CTableDataCell>
+    </CTableRow>
+    <CTableRow>
+      <CTableHeaderCell scope="row">3</CTableHeaderCell>
+      <CTableDataCell colSpan={2} active>
+        Larry the Bird
+      </CTableDataCell>
+      <CTableDataCell>@twitter</CTableDataCell>
+    </CTableRow>
+  </CTableBody>
+</CTable>
+```
+
+export const ActiveTableDarkExample = () => {
+  const columns = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _props: { active: true },
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
+    },
+  ]
+  return <CTable color="dark" columns={columns} items={items} />
+}
+
+<Example className="theme-bootstrap">
+  <ActiveTableDarkExample />
+</Example>
+
+```jsx
+const columns = [
+  {
+    key: 'id',
+    label: '#',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'class',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'heading_1',
+    label: 'Heading',
+    _props: { scope: 'col' },
+  },
+  {
+    key: 'heading_2',
+    label: 'Heading',
+    _props: { scope: 'col' },
+  },
+]
+const items = [
+  {
+    id: 1,
+    class: 'Mark',
+    heading_1: 'Otto',
+    heading_2: '@mdo',
+    _props: { active: true },
+    _cellProps: { id: { scope: 'row' } },
+  },
+  {
+    id: 2,
+    class: 'Jacob',
+    heading_1: 'Thornton',
+    heading_2: '@fat',
+    _cellProps: { id: { scope: 'row' } },
+  },
+  {
+    id: 3,
+    class: 'Larry the Bird',
+    heading_2: '@twitter',
+    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
+  },
+]
+return <CTable color="dark" columns={columns} items={items} />
+```
+
+## Table borders
+
+### Bordered tables
+
+Add `bordered` property for borders on all sides of the table and cells.
+
+<Example className="theme-bootstrap">
+  <TableExample bordered />
+</Example>
+
+```jsx
+<CTable bordered>
+  ...
+</CTable>
+```
+
+[Border color utilities](https://coreui.io/bootstrap/docs/utilities/borders#border-color) can be added to change colors:
+
+<Example className="theme-bootstrap">
+  <TableExample bordered borderColor="primary" />
+</Example>
+
+```jsx
+<CTable bordered borderColor="primary">
+  ...
+</CTable>
+```
+
+### Tables without borders
+
+Add `borderless` property for a react table without borders.
+
+<Example className="theme-bootstrap">
+  <TableExample borderless />
+</Example>
+
+```jsx
+<CTable borderless>
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  <TableExample borderless color="dark" />
+</Example>
+
+```jsx
+<CTable color="dark" borderless>
+  ...
+</CTable>
+```
+
+## Small tables
+
+Add `small` property to make any `<CTable>` more compact by cutting all cell `padding` in half.
+
+<Example className="theme-bootstrap">
+  <TableExample small />
+</Example>
+
+```jsx
+<CTable small>
+  ...
+</CTable>
+```
+
+## Vertical alignment
+
+Table cells of `<CTableHead>` are always vertical aligned to the bottom. Table cells in `<CTableBody>` inherit their alignment from `<CTable>` and are aligned to the the top by default. Use the align property to re-align where needed.
+
+export const VerticalAlignmentExample = () => {
+  const columns = [
+    {
+      key: 'heading_1',
+      _props: { className: 'w-25', scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      _props: { className: 'w-25', scope: 'col' },
+    },
+    {
+      key: 'heading_3',
+      _props: { className: 'w-25', scope: 'col' },
+    },
+    {
+      key: 'heading_4',
+      _props: { className: 'w-25', scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+      heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+      heading_3: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
+    },
+    {
+      heading_1: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
+      heading_2: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
+      heading_3: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
+      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
+      _props: { align: 'bottom' }
+    },
+    {
+      heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+      heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+      heading_3: 'This cell is aligned to the top.',
+      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
+       _cellProps: { heading_3: { align: 'top' }},
+    },
+  ]
+  return <CTable align="middle" columns={columns} items={items} />
+}
+
+<Example className="rounded">
+  <VerticalAlignmentExample />
+</Example>
+
+In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).
+
+```jsx
+const columns = [
+  {
+    key: 'heading_1',
+    _props: { className: 'w-25', scope: 'col' },
+  },
+  {
+    key: 'heading_2',
+    _props: { className: 'w-25', scope: 'col' },
+  },
+  {
+    key: 'heading_3',
+    _props: { className: 'w-25', scope: 'col' },
+  },
+  {
+    key: 'heading_4',
+    _props: { className: 'w-25', scope: 'col' },
+  },
+]
+const items = [
+  {
+    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+    heading_3: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
+  },
+  {
+    heading_1: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
+    heading_2: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
+    heading_3: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
+    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
+    _props: { align: 'bottom' }
+  },
+  {
+    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
+    heading_3: 'This cell is aligned to the top.',
+    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
+      _cellProps: { heading_3: { align: 'top' }},
+  },
+]
+return <CTable align="middle" columns={columns} items={items} />
+```
+
+You can also put all table components together manually as hitherto.
+
+```jsx
+<CTable align="middle" responsive>
+  <CTableHead>
+    <CTableRow>
+      <CTableHeaderCell scope="col" className="w-25">
+        Heading 1
+      </CTableHeaderCell>
+      <CTableHeaderCell scope="col" className="w-25">
+        Heading 2
+      </CTableHeaderCell>
+      <CTableHeaderCell scope="col" className="w-25">
+        Heading 3
+      </CTableHeaderCell>
+      <CTableHeaderCell scope="col" className="w-25">
+        Heading 4
+      </CTableHeaderCell>
+    </CTableRow>
+  </CTableHead>
+  <CTableBody>
+    <CTableRow>
+      <CTableDataCell>
+        This cell inherits <code>vertical-align: middle;</code> from the table
+      </CTableDataCell>
+      <CTableDataCell>
+        This cell inherits <code>vertical-align: middle;</code> from the table
+      </CTableDataCell>
+      <CTableDataCell>
+        This cell inherits <code>vertical-align: middle;</code> from the table
+      </CTableDataCell>
+      <CTableDataCell>
+        This here is some placeholder text, intended to take up quite a bit of vertical space, to
+        demonstrate how the vertical alignment works in the preceding cells.
+      </CTableDataCell>
+    </CTableRow>
+    <CTableRow align="bottom">
+      <CTableDataCell>
+        This cell inherits <code>vertical-align: bottom;</code> from the table row
+      </CTableDataCell>
+      <CTableDataCell>
+        This cell inherits <code>vertical-align: bottom;</code> from the table row
+      </CTableDataCell>
+      <CTableDataCell>
+        This cell inherits <code>vertical-align: bottom;</code> from the table row
+      </CTableDataCell>
+      <CTableDataCell>
+        This here is some placeholder text, intended to take up quite a bit of vertical space, to
+        demonstrate how the vertical alignment works in the preceding cells.
+      </CTableDataCell>
+    </CTableRow>
+    <CTableRow>
+      <CTableDataCell>
+        This cell inherits <code>vertical-align: middle;</code> from the table
+      </CTableDataCell>
+      <CTableDataCell>
+        This cell inherits <code>vertical-align: middle;</code> from the table
+      </CTableDataCell>
+      <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
+      <CTableDataCell>
+        This here is some placeholder text, intended to take up quite a bit of vertical space, to
+        demonstrate how the vertical alignment works in the preceding cells.
+      </CTableDataCell>
+    </CTableRow>
+  </CTableBody>
+</CTable>
+```
+
+## Nesting
+
+Border styles, active styles, and react table component variants are not inherited by nested tables.
+
+<Example className="theme-bootstrap">
+  {<CTable striped>
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell scope="col">#</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>
+    <CTableBody>
+      <CTableRow>
+        <CTableHeaderCell scope="row">1</CTableHeaderCell>
+        <CTableDataCell>Mark</CTableDataCell>
+        <CTableDataCell>Otto</CTableDataCell>
+        <CTableDataCell>@mdo</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell colSpan={4}>
+          <CTable>
+            <CTableHead>
+              <CTableRow>
+                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
+                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
+                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
+              </CTableRow>
+            </CTableHead>
+            <CTableBody>
+              <CTableRow>
+                <CTableHeaderCell scope="row">A</CTableHeaderCell>
+                <CTableDataCell>First</CTableDataCell>
+                <CTableDataCell>Last</CTableDataCell>
+              </CTableRow>
+              <CTableRow>
+                <CTableHeaderCell scope="row">B</CTableHeaderCell>
+                <CTableDataCell>First</CTableDataCell>
+                <CTableDataCell>Last</CTableDataCell>
+              </CTableRow>
+              <CTableRow>
+                <CTableHeaderCell scope="row">C</CTableHeaderCell>
+                <CTableDataCell>First</CTableDataCell>
+                <CTableDataCell>Last</CTableDataCell>
+              </CTableRow>
+            </CTableBody>
+          </CTable>
+        </CTableHeaderCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">3</CTableHeaderCell>
+        <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
+        <CTableDataCell>@twitter</CTableDataCell>
+      </CTableRow>
+    </CTableBody>
+  </CTable>}
+</Example>
+
+```jsx
+<CTable striped>
+  <CTableHead>
+    <CTableRow>
+      <CTableHeaderCell scope="col">#</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+    </CTableRow>
+  </CTableHead>
+  <CTableBody>
+    <CTableRow>
+      <CTableHeaderCell scope="row">1</CTableHeaderCell>
+      <CTableDataCell>Mark</CTableDataCell>
+      <CTableDataCell>Otto</CTableDataCell>
+      <CTableDataCell>@mdo</CTableDataCell>
+    </CTableRow>
+    <CTableRow>
+      <CTableHeaderCell colSpan={4}>
+        <CTable>
+          <CTableHead>
+            <CTableRow>
+              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
+              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
+              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
+            </CTableRow>
+          </CTableHead>
+          <CTableBody>
+            <CTableRow>
+              <CTableHeaderCell scope="row">A</CTableHeaderCell>
+              <CTableDataCell>First</CTableDataCell>
+              <CTableDataCell>Last</CTableDataCell>
+            </CTableRow>
+            <CTableRow>
+              <CTableHeaderCell scope="row">B</CTableHeaderCell>
+              <CTableDataCell>First</CTableDataCell>
+              <CTableDataCell>Last</CTableDataCell>
+            </CTableRow>
+            <CTableRow>
+              <CTableHeaderCell scope="row">C</CTableHeaderCell>
+              <CTableDataCell>First</CTableDataCell>
+              <CTableDataCell>Last</CTableDataCell>
+            </CTableRow>
+          </CTableBody>
+        </CTable>
+      </CTableHeaderCell>
+    </CTableRow>
+    <CTableRow>
+      <CTableHeaderCell scope="row">3</CTableHeaderCell>
+      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
+      <CTableDataCell>@twitter</CTableDataCell>
+    </CTableRow>
+  </CTableBody>
+</CTable>
+```
+
+## Anatomy
+
+### Table head
+
+Similar to tables and dark tables, use the modifier prop `color="light"` or `color="dark"` to make `<CTableHead>`s appear light or dark gray.
+
+<Example className="theme-bootstrap">
+  <TableExample tableHeadProps={{ color: 'light' }} />
+</Example>
+
+```jsx
+<CTable>
+  <CTableHead color="light">
+    ...
+  </CTableHead>
+  <CTableBody>
+    ...
+  </CTableBody>
+</CTable>
+```
+
+If you generate a table using the new method incorporated in version **4.3.0**, you have to use `tableHeadProps` property to pass properties to the table header component.
+
+```jsx
+const columns = [...]
+const items = [...]
+
+return <CTable columns={columns} items={items} tableHeadProps={{ color: 'light' }} />
+```
+
+<Example className="theme-bootstrap">
+  <TableExample tableHeadProps={{ color: 'dark' }} />
+</Example>
+
+```jsx
+<CTable>
+  <CTableHead color="dark">
+    ...
+  </CTableHead>
+  <CTableBody>
+    ...
+  </CTableBody>
+</CTable>
+```
+
+Starting from version **4.3.0** also this way.
+
+```jsx
+const columns = [...]
+const items = [...]
+
+return <CTable columns={columns} items={items} tableHeadProps={{ color: 'dark' }} />
+```
+
+### Table foot
+
+export const TableFoodExample = () => {
+  const columns = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const footer = [
+    'Footer',
+    'Footer',
+    'Footer',
+    'Footer',
+  ]
+  const items = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
+    },
+  ]
+  return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }} />
+}
+
+<Example className="theme-bootstrap">
+  <TableFoodExample />
+</Example>
+
+```jsx
+<CTable>
+  <CTableHead color="light">
+    ...
+  </CTableHead>
+  <CTableBody>
+    ...
+  <CTableHead>
+    <CTableRow>
+      <CTableDataCell>Footer</CTableDataCell>
+      <CTableDataCell>Footer</CTableDataCell>
+      <CTableDataCell>Footer</CTableDataCell>
+      <CTableDataCell>Footer</CTableDataCell>
+    </CTableRow>
+  </CTableHead>
+</CTable>
+```
+
+Starting from version **4.3.0** also this way.
+
+```jsx
+const columns = [...]
+const footer = [
+  'Footer',
+  'Footer',
+  'Footer',
+  'Footer',
+]
+const items = [...]
+
+return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }}/>
+```
+
+### Captions
+
+A `<CTableCaption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
+
+<Example className="theme-bootstrap">
+  <TableExample caption="List of users" />
+</Example>
+
+```jsx
+<CTable>
+  <CTableCaption>List of users</CTableCaption>
+  <CTableHead>
+    ...
+  </CTableHead>
+  <CTableBody>
+    ...
+  </CTableBody>
+</CTable>
+```
+
+Starting from version **4.3.0** also this way.
+
+```jsx
+const columns = [...]
+const items = [...]
+
+return <CTable caption="List of users" columns={columns} items={items} />
+```
+
+You can also put the `<CTableCaption>` on the top of the table with `caption="top"`.
+
+<Example className="theme-bootstrap">
+  <TableExample captionTop="List of users" />
+</Example>
+
+```jsx
+<CTable caption="top">
+  <CTableCaption>List of users</CTableCaption>
+  <CTableHead>
+    ...
+  </CTableHead>
+  <CTableBody>
+    ...
+  </CTableBody>
+</CTable>
+```
+
+Since version **4.3.0** also this way.
+
+```jsx
+const columns = [...]
+const items = [...]
+
+return <CTable captionTop="List of users" columns={columns} items={items} />
+```
+
+## Responsive tables
+
+Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a `responsive` property. Or, pick a maximum breakpoint with which to have a responsive table up to by using `responsive="{-sm|-md|-lg|-xl|-xxl}"`.
+
+<Example className="theme-bootstrap">
+  {<CTable responsive>
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell scope="col">#</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>
+    <CTableBody>
+      <CTableRow>
+        <CTableHeaderCell scope="row">1</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">2</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">3</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+    </CTableBody>
+  </CTable>}
+</Example>
+
+```jsx
+<CTable responsive>
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  {<CTable responsive="sm">
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell scope="col">#</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>
+    <CTableBody>
+      <CTableRow>
+        <CTableHeaderCell scope="row">1</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">2</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">3</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+    </CTableBody>
+  </CTable>}
+</Example>
+
+```jsx
+<CTable responsive="sm">
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  {<CTable responsive="md">
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell scope="col">#</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>
+    <CTableBody>
+      <CTableRow>
+        <CTableHeaderCell scope="row">1</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">2</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">3</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+    </CTableBody>
+  </CTable>}
+</Example>
+
+```jsx
+<CTable responsive="md">
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  {<CTable responsive="lg">
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell scope="col">#</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>
+    <CTableBody>
+      <CTableRow>
+        <CTableHeaderCell scope="row">1</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">2</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">3</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+    </CTableBody>
+  </CTable>}
+</Example>
+
+```jsx
+<CTable responsive="lg">
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  {<CTable responsive="xl">
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell scope="col">#</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>
+    <CTableBody>
+      <CTableRow>
+        <CTableHeaderCell scope="row">1</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">2</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">3</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+    </CTableBody>
+  </CTable>}
+</Example>
+
+```jsx
+<CTable responsive="xl">
+  ...
+</CTable>
+```
+
+<Example className="theme-bootstrap">
+  {<CTable responsive="xxl">
+    <CTableHead>
+      <CTableRow>
+        <CTableHeaderCell scope="col">#</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+      </CTableRow>
+    </CTableHead>
+    <CTableBody>
+      <CTableRow>
+        <CTableHeaderCell scope="row">1</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">2</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+      <CTableRow>
+        <CTableHeaderCell scope="row">3</CTableHeaderCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+        <CTableDataCell>Cell</CTableDataCell>
+      </CTableRow>
+    </CTableBody>
+  </CTable>}
+</Example>
+
+```jsx
+<CTable responsive="xxl">
+  ...
+</CTable>
+```
+
+## API
+
+Explore all available props and component options in the API reference below.
+
+- [&lt;CTable /&gt;](../api/#ctable)
+- [&lt;CTableBody /&gt;](../api/#ctablebody)
+- [&lt;CTableDataCell /&gt;](../api/#ctabledatacell)
+- [&lt;CTableFoot /&gt;](../api/#ctablefoot)
+- [&lt;CTableHead /&gt;](../api/#ctablehead)
+- [&lt;CTableHeaderCell /&gt;](../api/#ctableheadercell)
+- [&lt;CTableRow /&gt;](../api/#ctablerow)
diff --git a/packages/docs/content/components/table/examples/TableExample.tsx b/packages/docs/content/components/table/examples/TableExample.tsx
new file mode 100644
index 00000000..9619b862
--- /dev/null
+++ b/packages/docs/content/components/table/examples/TableExample.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { CTable } from '@coreui/react'
+
+export const TableExample = () => {
+  const columns = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'class',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
+    },
+  ]
+
+  return <CTable columns={columns} items={items} />
+}
diff --git a/packages/docs/content/components/table/examples/TableVariantsExample.tsx b/packages/docs/content/components/table/examples/TableVariantsExample.tsx
new file mode 100644
index 00000000..037ae081
--- /dev/null
+++ b/packages/docs/content/components/table/examples/TableVariantsExample.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import {
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow,
+} from '@coreui/react'
+
+export const TableVariantsExample = () => {
+  return (
+    <CTable>
+      <CTableHead>
+        <CTableRow>
+          <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+          <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+          <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+        </CTableRow>
+      </CTableHead>
+      <CTableBody>
+        <CTableRow>
+          <CTableHeaderCell scope="row">Default</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+        <CTableRow color="primary">
+          <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+        <CTableRow color="secondary">
+          <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+        <CTableRow color="success">
+          <CTableHeaderCell scope="row">Success</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+        <CTableRow color="danger">
+          <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+        <CTableRow color="warning">
+          <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+        <CTableRow color="info">
+          <CTableHeaderCell scope="row">Info</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+        <CTableRow color="light">
+          <CTableHeaderCell scope="row">Light</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+        <CTableRow color="dark">
+          <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
+          <CTableDataCell>Cell</CTableDataCell>
+          <CTableDataCell>Cell</CTableDataCell>
+        </CTableRow>
+      </CTableBody>
+    </CTable>
+  )
+}
diff --git a/packages/docs/content/components/table.mdx b/packages/docs/content/components/table/index.mdx
similarity index 98%
rename from packages/docs/content/components/table.mdx
rename to packages/docs/content/components/table/index.mdx
index a62cb451..004276ed 100644
--- a/packages/docs/content/components/table.mdx
+++ b/packages/docs/content/components/table/index.mdx
@@ -2,8 +2,7 @@
 title: React Table Component
 name: Table
 description: Documentation and examples for opt-in styling of tables.
-menu: Components
-route: /components/table
+route: /components/table/
 other_frameworks: table
 ---
 
@@ -17,7 +16,7 @@ import {
   CTableHead,
   CTableHeaderCell,
   CTableRow,
-} from '@coreui/react/src/index'
+} from '@coreui/react'
 
 ## How to use React Table Component
 
@@ -72,9 +71,7 @@ export const TableExample = (props) => {
   return <CTable columns={columns} items={items} {...props} />
 }
 
-<Example className="rounded">
-  <TableExample />
-</Example>
+<ExampleSnippet component="TableExample" componentName="React Table" />
 
 In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).
 
@@ -740,7 +737,7 @@ Add `bordered` property for borders on all sides of the table and cells.
 </CTable>
 ```
 
-[Border color utilities](https://coreui.io/docs/utilities/borders#border-color) can be added to change colors:
+[Border color utilities](https://coreui.io/bootstrap/docs/utilities/borders#border-color) can be added to change colors:
 
 <Example>
   <TableExample bordered borderColor="primary" />
@@ -1634,30 +1631,12 @@ Responsive tables allow tables to be scrolled horizontally with ease. Make any t
 
 ## API
 
-### CTable
-
-`markdown:CTable.api.mdx`
-
-### CTableBody
-
-`markdown:CTableBody.api.mdx`
-
-### CTableDataCell
-
-`markdown:CTableDataCell.api.mdx`
-
-### CTableFoot
-
-`markdown:CTableFoot.api.mdx`
-
-### CTableHead
-
-`markdown:CTableHead.api.mdx`
-
-### CTableHeaderCell
-
-`markdown:CTableHeaderCell.api.mdx`
-
-### CTableRow
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
 
-`markdown:CTableRow.api.mdx`
+- [&lt;CTable /&gt;](./api/#ctable)
+- [&lt;CTableBody /&gt;](./api/#ctablebody)
+- [&lt;CTableDataCell /&gt;](./api/#ctabledatacell)
+- [&lt;CTableFoot /&gt;](./api/#ctablefoot)
+- [&lt;CTableHead /&gt;](./api/#ctablehead)
+- [&lt;CTableHeaderCell /&gt;](./api/#ctableheadercell)
+- [&lt;CTableRow /&gt;](./api/#ctablerow)
diff --git a/packages/docs/content/components/table/styling.mdx b/packages/docs/content/components/table/styling.mdx
new file mode 100644
index 00000000..b5c40fa9
--- /dev/null
+++ b/packages/docs/content/components/table/styling.mdx
@@ -0,0 +1,14 @@
+---
+title: React Table Component Styling
+name: Table Styling
+description: Learn how to customize the React Table component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/table/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="table-variables"/>
+
+### SASS loops
+
+<ScssDocs file="_variables.scss" capture="table-loop" />
diff --git a/packages/docs/content/components/tabs.mdx b/packages/docs/content/components/tabs.mdx
deleted file mode 100644
index 03fd7a76..00000000
--- a/packages/docs/content/components/tabs.mdx
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: React Tabs Components
-name: Tabs
-description: The CoreUI React Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.
-menu: Components
-route: /components/tabs
-since: 5.1.0
----
-
-import { useState } from 'react'
-
-import {
-  CTab,
-  CTabContent,
-  CTabList,
-  CTabPanel,
-  CTabs,
-} from '@coreui/react/src/index'
-
-## Example
-
-The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface.
-
-```jsx preview
-<CTabs activeItemKey="profile">
-  <CTabList variant="tabs">
-    <CTab itemKey="home">Home</CTab>
-    <CTab itemKey="profile">Profile</CTab>
-    <CTab itemKey="contact">Contact</CTab>
-    <CTab disabled itemKey="disabled">Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel className="p-3" itemKey="home">
-      Home tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" itemKey="profile">
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" itemKey="contact">
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" itemKey="disabled">
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-## Available styles
-
-Change the style of `<CTabs>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
-
-### Unstyled
-
-If you don’t provide the `variant` prop, the component will default to a basic style.
-
-```jsx preview
-<CTabs activeItemKey="profile">
-  <CTabList>
-    <CTab itemKey="home">Home</CTab>
-    <CTab itemKey="profile">Profile</CTab>
-    <CTab itemKey="contact">Contact</CTab>
-    <CTab disabled itemKey="disabled">Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel className="p-3" itemKey="home">
-      Home tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" itemKey="profile">
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" itemKey="contact">
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" itemKey="disabled">
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-### Pills
-
-Take that same code, but use `variant="pills"` instead:
-
-```jsx preview
-<CTabs activeItemKey={2}>
-  <CTabList variant="pills">
-    <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-    <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-    <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-    <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
-      Home tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-### Underline
-
-Take that same code, but use `variant="underline"` instead:
-
-```jsx preview
-<CTabs activeItemKey={2}>
-  <CTabList variant="underline">
-    <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-    <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-    <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-    <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
-      Home tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-### Underline border
-
-Take that same code, but use `variant="underline-border"` instead:
-
-```jsx preview
-<CTabs activeItemKey={2}>
-  <CTabList variant="underline-border">
-    <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-    <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-    <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-    <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
-      Home tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-### Fill and justify
-
-Force your `<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
-
-```jsx preview
-<CTabs activeItemKey={2}>
-  <CTabList variant="tabs" layout="fill">
-    <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-    <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile tab with longer content</CTab>
-    <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-    <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
-      Home tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width.
-
-```jsx preview
-<CTabs activeItemKey={2}>
-  <CTabList variant="tabs" layout="justified">
-    <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-    <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-    <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-    <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
-      Home tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-## Accessibility
-
-Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
-
-### WAI-ARIA Roles
-
-- The element that serves as the container for the set of tabs has the role `tablist`.
-- Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`.
-- Each element that contains the content panel for a tab has the role `tabpanel`.
-- If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
-- Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
-- The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`.
-- Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
-
-Our React Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:
-
-```jsx
-<CTabs activeItemKey={2}>
-  <CTabList variant="tabs">
-    <CTab id="home-tab" aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-    <CTab id="profile-tab" aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-    <CTab id="contact-tab" aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-    <CTab id="disabled-tab" aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel id="home-tab-pane" className="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" itemKey={1}>
-      Home tab content
-    </CTabPanel>
-    <CTabPanel id="profile-tab-pane" className="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" itemKey={2}>
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel id="contact-tab-pane" className="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" itemKey={3}>
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel id="disabled-tab-pane" className="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" itemKey={4}>
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your `<CTab>`'s and `<CTabPanels>`'s.
-
-### Keyboard Interaction
-
-**When focus enters the tab list:**
-
-<kbd>Tab</kbd>: It places focus on the active `tab` element.
-
-**When focus is on a tab element:**
-
-<kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.
-
-<kbd>Left Arrow</kbd>: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.
-
-<kbd>Right Arrow</kbd>: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.
-
-<kbd>Home</kbd>: Moves focus to the first tab.
-
-<kbd>End</kbd>: Moves focus to the last tab.
-
-## Customizing
-
-### CSS variables
-
-React tabs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-On the `.nav` base class:
-
-<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
-
-On the `.nav-tabs` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
-
-On the `.nav-pills` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
-
-On the `.nav-underline` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
-
-On the `.nav-underline-border` modifier class:
-
-<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CTabs style={vars}>...</CTabs>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="nav-variables"/>
-
-## API
-
-### CTab
-
-`markdown:CTab.api.mdx`
-
-### CTabContent
-
-`markdown:CTabContent.api.mdx`
-
-### CTabList
-
-`markdown:CTabList.api.mdx`
-
-### CTabPanel
-
-`markdown:CTabPanel.api.mdx`
-
-### CTabs
-
-`markdown:CTabs.api.mdx`
-
diff --git a/packages/docs/content/components/tabs/api.mdx b/packages/docs/content/components/tabs/api.mdx
new file mode 100644
index 00000000..6618ca60
--- /dev/null
+++ b/packages/docs/content/components/tabs/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Tabs Component API
+name: Tabs API
+description: Explore the API reference for the React Tabs component and discover how to effectively utilize its props for customization.
+route: /components/tabs/
+---
+
+import CTabAPI from '../../api/CTab.api.mdx'
+import CTabContentAPI from '../../api/CTabContent.api.mdx'
+import CTabListAPI from '../../api/CTabList.api.mdx'
+import CTabPanelAPI from '../../api/CTabPanel.api.mdx'
+import CTabsAPI from '../../api/CTabs.api.mdx'
+
+## CTab
+
+<CTabAPI />
+
+## CTabContent
+
+<CTabContentAPI />
+
+## CTabList
+
+<CTabListAPI />
+
+## CTabPanel
+
+<CTabPanelAPI />
+
+## CTabs
+
+<CTabsAPI />
diff --git a/packages/docs/content/components/tabs/bootstrap.mdx b/packages/docs/content/components/tabs/bootstrap.mdx
new file mode 100644
index 00000000..520e47c5
--- /dev/null
+++ b/packages/docs/content/components/tabs/bootstrap.mdx
@@ -0,0 +1,68 @@
+---
+title: React Bootstrap Tabs Component
+name: Tabs with Bootstrap Styling
+description: Learn how to create tabbed navigation interfaces in React using CoreUI's components styled like Bootstrap tabs and pills.
+route: /components/tabs/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Tabs component
+
+Use CoreUI's React tabs styled with Bootstrap to organize content into multiple sections that users can switch between using tabs or pills.
+
+### Tabs style
+
+The default `variant="tabs"` creates traditional Bootstrap-style tabbed navigation.
+
+<ExampleSnippet className="theme-bootstrap" component="TabsExample" componentName="React Bootstrap Tabs" />
+
+### Unstyled
+
+Without the `variant` prop, tabs render with minimal default styles.
+
+<ExampleSnippet className="theme-bootstrap" component="TabsUnstyledExample" componentName="React Bootstrap Tabs" />
+
+### Pills style
+
+Use `variant="pills"` to display tabs styled like Bootstrap pills.
+
+<ExampleSnippet className="theme-bootstrap" component="TabsPillsExample" componentName="React Bootstrap Tabs" />
+
+### Underline style
+
+Use `variant="underline"` to show a bottom border underline beneath the active tab.
+
+<ExampleSnippet className="theme-bootstrap" component="TabsUnderlineExample" componentName="React Bootstrap Tabs" />
+
+### Underline border
+
+Use `variant="underline-border"` to show a full underline across the width of the tab.
+
+<ExampleSnippet className="theme-bootstrap" component="TabsUnderlineBorderExample" componentName="React Bootstrap Tabs" />
+
+### Fill and justify
+
+Use `layout="fill"` or `layout="justified"` to control how tabs stretch to fill the horizontal space.
+
+<ExampleSnippet className="theme-bootstrap" component="TabsUnstyledFillAndJustifyExample" componentName="React Bootstrap Tabs" />
+<ExampleSnippet className="theme-bootstrap" component="TabsUnstyledFillAndJustify2Example" componentName="React Bootstrap Tabs" />
+
+### Controlled tabs
+
+Use `activeItemKey` and `onChange` to fully control the active tab from your component state.
+
+<ExampleSnippet className="theme-bootstrap" component="TabsControlledExample" componentName="React Bootstrap Tabs" />
+
+## Accessibility
+
+CoreUI's Tabs component automatically manages `aria-` and `role="..."` attributes to match Bootstrap and WAI-ARIA accessibility guidelines for tabs.
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of all available props and usage patterns.
+
+- [&lt;CTabs /&gt;](../api/#ctabs)
+- [&lt;CTabList /&gt;](../api/#ctablist)
+- [&lt;CTab /&gt;](../api/#ctab)
+- [&lt;CTabContent /&gt;](../api/#ctabcontent)
+- [&lt;CTabPanel /&gt;](../api/#ctabpanel)
diff --git a/packages/docs/content/components/tabs/examples/TabsControlledExample.jsx b/packages/docs/content/components/tabs/examples/TabsControlledExample.jsx
new file mode 100644
index 00000000..d2837f95
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsControlledExample.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsControlledExample = () => {
+  const [activeTab, setActiveTab] = useState('profile')
+
+  return (
+    <CTabs activeItemKey={activeTab} onChange={setActiveTab}>
+      <CTabList variant="tabs">
+        <CTab itemKey="home">Home</CTab>
+        <CTab itemKey="profile">Profile</CTab>
+        <CTab itemKey="contact">Contact</CTab>
+        <CTab disabled itemKey="disabled">
+          Disabled
+        </CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" itemKey="home">
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="profile">
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="contact">
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="disabled">
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsControlledExample.tsx b/packages/docs/content/components/tabs/examples/TabsControlledExample.tsx
new file mode 100644
index 00000000..83ce6d39
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsControlledExample.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsControlledExample = () => {
+  const [activeTab, setActiveTab] = useState<number | string>('profile')
+
+  return (
+    <CTabs activeItemKey={activeTab} onChange={setActiveTab}>
+      <CTabList variant="tabs">
+        <CTab itemKey="home">Home</CTab>
+        <CTab itemKey="profile">Profile</CTab>
+        <CTab itemKey="contact">Contact</CTab>
+        <CTab disabled itemKey="disabled">
+          Disabled
+        </CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" itemKey="home">
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="profile">
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="contact">
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="disabled">
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx
new file mode 100644
index 00000000..0c7b4a18
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsEnclosedExample = () => {
+  return (
+    <CTabs defaultActiveItemKey="profile">
+      <CTabList variant="enclosed">
+        <CTab itemKey="home">Home</CTab>
+        <CTab itemKey="profile">Profile</CTab>
+        <CTab itemKey="contact">Contact</CTab>
+        <CTab disabled itemKey="disabled">
+          Disabled
+        </CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" itemKey="home">
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="profile">
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="contact">
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="disabled">
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx
new file mode 100644
index 00000000..8fc0d82b
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsEnclosedPillsExample = () => {
+  return (
+    <CTabs defaultActiveItemKey="profile">
+      <CTabList variant="enclosed-pills">
+        <CTab itemKey="home">Home</CTab>
+        <CTab itemKey="profile">Profile</CTab>
+        <CTab itemKey="contact">Contact</CTab>
+        <CTab disabled itemKey="disabled">
+          Disabled
+        </CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" itemKey="home">
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="profile">
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="contact">
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="disabled">
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsExample.tsx b/packages/docs/content/components/tabs/examples/TabsExample.tsx
new file mode 100644
index 00000000..8903d31d
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsExample = () => {
+  return (
+    <CTabs defaultActiveItemKey="profile">
+      <CTabList variant="tabs">
+        <CTab itemKey="home">Home</CTab>
+        <CTab itemKey="profile">Profile</CTab>
+        <CTab itemKey="contact">Contact</CTab>
+        <CTab disabled itemKey="disabled">
+          Disabled
+        </CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" itemKey="home">
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="profile">
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="contact">
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="disabled">
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsPillsExample.tsx b/packages/docs/content/components/tabs/examples/TabsPillsExample.tsx
new file mode 100644
index 00000000..364c707e
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsPillsExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsPillsExample = () => {
+  return (
+    <CTabs defaultActiveItemKey={2}>
+      <CTabList variant="pills">
+        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
+        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
+        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
+        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnderlineBorderExample.tsx b/packages/docs/content/components/tabs/examples/TabsUnderlineBorderExample.tsx
new file mode 100644
index 00000000..1a9e478a
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsUnderlineBorderExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsUnderlineBorderExample = () => {
+  return (
+    <CTabs defaultActiveItemKey={2}>
+      <CTabList variant="underline-border">
+        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
+        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
+        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
+        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnderlineExample.tsx b/packages/docs/content/components/tabs/examples/TabsUnderlineExample.tsx
new file mode 100644
index 00000000..5fe85dca
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsUnderlineExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsUnderlineExample = () => {
+  return (
+    <CTabs defaultActiveItemKey={2}>
+      <CTabList variant="underline">
+        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
+        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
+        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
+        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnstyledExample.tsx b/packages/docs/content/components/tabs/examples/TabsUnstyledExample.tsx
new file mode 100644
index 00000000..3a87be06
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsUnstyledExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsUnstyledExample = () => {
+  return (
+    <CTabs defaultActiveItemKey="profile">
+      <CTabList>
+        <CTab itemKey="home">Home</CTab>
+        <CTab itemKey="profile">Profile</CTab>
+        <CTab itemKey="contact">Contact</CTab>
+        <CTab disabled itemKey="disabled">
+          Disabled
+        </CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="p-3" itemKey="home">
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="profile">
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="contact">
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="p-3" itemKey="disabled">
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustify2Example.tsx b/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustify2Example.tsx
new file mode 100644
index 00000000..a4fe7cb0
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustify2Example.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsUnstyledFillAndJustify2Example = () => {
+  return (
+    <CTabs defaultActiveItemKey={2}>
+      <CTabList variant="tabs" layout="justified">
+        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
+        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
+        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
+        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustifyExample.tsx b/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustifyExample.tsx
new file mode 100644
index 00000000..55b05b1c
--- /dev/null
+++ b/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustifyExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
+
+export const TabsUnstyledFillAndJustifyExample = () => {
+  return (
+    <CTabs defaultActiveItemKey={2}>
+      <CTabList variant="tabs" layout="fill">
+        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
+        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile tab with longer content</CTab>
+        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
+        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
+      </CTabList>
+      <CTabContent>
+        <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
+          Home tab content
+        </CTabPanel>
+        <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
+          Profile tab content
+        </CTabPanel>
+        <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
+          Contact tab content
+        </CTabPanel>
+        <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
+          Disabled tab content
+        </CTabPanel>
+      </CTabContent>
+    </CTabs>
+  )
+}
diff --git a/packages/docs/content/components/tabs/index.mdx b/packages/docs/content/components/tabs/index.mdx
new file mode 100644
index 00000000..c493eb5d
--- /dev/null
+++ b/packages/docs/content/components/tabs/index.mdx
@@ -0,0 +1,155 @@
+---
+title: React Tabs Components
+name: Tabs
+description: The CoreUI React Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.
+route: /components/tabs/
+since: 5.1.0
+---
+
+## Example
+
+The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface.
+
+<ExampleSnippet component="TabsExample" componentName="React Tabs" />
+
+## Available styles
+
+Change the style of `<CTabs>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
+
+### Unstyled
+
+If you don’t provide the `variant` prop, the component will default to a basic style.
+
+<ExampleSnippet component="TabsUnstyledExample" componentName="React Tabs" />
+
+### Pills
+
+Take that same code, but use `variant="pills"` instead:
+
+<ExampleSnippet component="TabsPillsExample" componentName="React Tabs" />
+
+### Underline
+
+Take that same code, but use `variant="underline"` instead:
+
+<ExampleSnippet component="TabsUnderlineExample" componentName="React Tabs" />
+
+### Underline border
+
+Take that same code, but use `variant="underline-border"` instead:
+
+<ExampleSnippet component="TabsUnderlineBorderExample" componentName="React Tabs" />
+
+### Enclosed
+
+Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
+
+<ExampleSnippet component="TabsEnclosedExample" componentName="React Tabs" />
+
+### Enclosed pills 
+
+Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
+
+<ExampleSnippet component="TabsEnclosedPillsExample" componentName="React Tabs" />
+
+### Fill and justify
+
+Force your `<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+
+<ExampleSnippet component="TabsUnstyledFillAndJustifyExample" componentName="React Tabs" />
+
+For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width.
+
+<ExampleSnippet component="TabsUnstyledFillAndJustify2Example" componentName="React Tabs" />
+
+Sure! Here's a polished, production-ready **documentation section** (Markdown-style) explaining the **controlled usage** of the `<CTabs>` component, with a clear example:
+
+---
+
+## Controlled Tabs
+
+Use the `activeItemKey` prop to control which tab is currently active. In this mode, the parent component is responsible for managing the active state and responding to user interactions via the `onChange` callback.
+
+This is useful when you need to synchronize the tab state with your application logic, such as routing or complex UI state management.
+
+**Key Points**
+
+- `activeItemKey` sets the currently active tab.
+- `onChange` receives the new `itemKey` when a tab is clicked.
+- You must manually update `activeItemKey` in your state based on `onChange`.
+
+> 💡 If you prefer the tabs to manage their own state, use `defaultActiveItemKey` instead.
+
+<ExampleSnippet component="TabsControlledExample" componentName="React Tabs" />
+
+
+## Accessibility
+
+Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
+
+### WAI-ARIA Roles
+
+- The element that serves as the container for the set of tabs has the role `tablist`.
+- Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`.
+- Each element that contains the content panel for a tab has the role `tabpanel`.
+- If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
+- Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
+- The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`.
+- Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
+
+Our React Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:
+
+```jsx
+<CTabs activeItemKey={2}>
+  <CTabList variant="tabs">
+    <CTab id="home-tab" aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
+    <CTab id="profile-tab" aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
+    <CTab id="contact-tab" aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
+    <CTab id="disabled-tab" aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
+  </CTabList>
+  <CTabContent>
+    <CTabPanel id="home-tab-pane" className="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" itemKey={1}>
+      Home tab content
+    </CTabPanel>
+    <CTabPanel id="profile-tab-pane" className="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" itemKey={2}>
+      Profile tab content
+    </CTabPanel>
+    <CTabPanel id="contact-tab-pane" className="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" itemKey={3}>
+      Contact tab content
+    </CTabPanel>
+    <CTabPanel id="disabled-tab-pane" className="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" itemKey={4}>
+      Disabled tab content
+    </CTabPanel>
+  </CTabContent>
+</CTabs>
+```
+
+This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your `<CTab>`'s and `<CTabPanels>`'s.
+
+### Keyboard Interaction
+
+**When focus enters the tab list:**
+
+<kbd>Tab</kbd>: It places focus on the active `tab` element.
+
+**When focus is on a tab element:**
+
+<kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.
+
+<kbd>Left Arrow</kbd>: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.
+
+<kbd>Right Arrow</kbd>: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.
+
+<kbd>Home</kbd>: Moves focus to the first tab.
+
+<kbd>End</kbd>: Moves focus to the last tab.
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CTab /&gt;](./api/#ctab)
+- [&lt;CTabContent /&gt;](./api/#ctabcontent)
+- [&lt;CTabList /&gt;](./api/#ctablist)
+- [&lt;CTabPanel /&gt;](./api/#ctabpanel)
+- [&lt;CTabs /&gt;](./api/#ctabs)
diff --git a/packages/docs/content/components/tabs/styling.mdx b/packages/docs/content/components/tabs/styling.mdx
new file mode 100644
index 00000000..f07a85fc
--- /dev/null
+++ b/packages/docs/content/components/tabs/styling.mdx
@@ -0,0 +1,49 @@
+---
+title: React Tabs Component Styling
+name: Tabs Styling
+description: Learn how to customize the React Tabs component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/tabs/
+---
+
+### CSS variables
+
+React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+On the `.nav` base class:
+
+<ScssDocs file="_nav.scss" capture="nav-css-vars"/>
+
+On the `.nav-tabs` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-tabs-css-vars"/>
+
+On the `.nav-pills` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
+
+<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
+
+On the `.nav-underline` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
+
+<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
+
+On the `.nav-underline-border` modifier class:
+
+<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-nav-link-color': '#555',
+  '--cui-nav-link-disabled-color': '#afaeef',
+}
+
+return <CTabs style={customVars}>{/* Tabs content */}</CTabs>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="nav-variables"/>
diff --git a/packages/docs/content/components/toast.mdx b/packages/docs/content/components/toast.mdx
deleted file mode 100644
index dae24a37..00000000
--- a/packages/docs/content/components/toast.mdx
+++ /dev/null
@@ -1,281 +0,0 @@
----
-title: React Toast Component
-name: Toast
-description: Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
-menu: Components
-route: /components/toast
-other_frameworks: toast
----
-
-import { useState, useRef } from 'react'
-import {
-  CButton,
-  CCloseButton,
-  CToast,
-  CToastBody,
-  CToastClose,
-  CToastHeader,
-  CToaster,
-} from '@coreui/react/src/index'
-
-React toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
-
-## Overview
-
-Things to know when using the toast plugin:
-
-- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
-- Toasts will automatically hide if you do not specify `autohide: false`.
-
-## Examples
-
-### Basic
-
-To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities.
-
-Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
-
-```jsx preview
-<CToast animation={false} autohide={false} visible={true}>
-  <CToastHeader closeButton>
-    <svg
-      className="rounded me-2"
-      width="20"
-      height="20"
-      xmlns="http://www.w3.org/2000/svg"
-      preserveAspectRatio="xMidYMid slice"
-      focusable="false"
-      role="img"
-    >
-      <rect width="100%" height="100%" fill="#007aff"></rect>
-    </svg>
-    <div className="fw-bold me-auto">CoreUI for React.js</div>
-    <small>7 min ago</small>
-  </CToastHeader>
-  <CToastBody>Hello, world! This is a toast message.</CToastBody>
-</CToast>
-```
-
-export const BasicExample = () => {
-  const [toast, addToast] = useState(0)
-  const toaster = useRef()
-  const exampleToast = (
-    <CToast>
-      <CToastHeader closeButton>
-        <svg
-          className="rounded me-2"
-          width="20"
-          height="20"
-          xmlns="http://www.w3.org/2000/svg"
-          preserveAspectRatio="xMidYMid slice"
-          focusable="false"
-          role="img"
-        >
-          <rect width="100%" height="100%" fill="#007aff"></rect>
-        </svg>
-        <div className="fw-bold me-auto">CoreUI for React.js</div>
-        <small>7 min ago</small>
-      </CToastHeader>
-      <CToastBody>Hello, world! This is a toast message.</CToastBody>
-    </CToast>
-  )
-  return (
-    <>
-      <CButton color="primary" onClick={() => addToast(exampleToast)}>Send a toast</CButton>
-      <CToaster className="p-3" placement="top-end" push={toast} ref={toaster} />
-    </>
-  )
-}
-
-<Example>
-  <BasicExample />
-</Example>
-
-```jsx
-const [toast, addToast] = useState(0)
-const toaster = useRef()
-const exampleToast = (
-  <CToast>
-    <CToastHeader closeButton>
-      <svg
-        className="rounded me-2"
-        width="20"
-        height="20"
-        xmlns="http://www.w3.org/2000/svg"
-        preserveAspectRatio="xMidYMid slice"
-        focusable="false"
-        role="img"
-      >
-        <rect width="100%" height="100%" fill="#007aff"></rect>
-      </svg>
-      <div className="fw-bold me-auto">CoreUI for React.js</div>
-      <small>7 min ago</small>
-    </CToastHeader>
-    <CToastBody>Hello, world! This is a toast message.</CToastBody>
-  </CToast>
-)
-return (
-  <>
-    <CButton color="primary" onClick={() => addToast(exampleToast)}>Send a toast</CButton>
-    <CToaster className="p-3" placement="top-end" push={toast} ref={toaster} />
-  </>
-)
-```
-
-### Translucent
-
-Toasts are slightly translucent to blend in with what's below them.
-
-```jsx preview className="bg-dark border-0"
-<CToast autohide={false} visible={true}>
-  <CToastHeader closeButton>
-    <svg
-      className="rounded me-2"
-      width="20"
-      height="20"
-      xmlns="http://www.w3.org/2000/svg"
-      preserveAspectRatio="xMidYMid slice"
-      focusable="false"
-      role="img"
-    >
-      <rect width="100%" height="100%" fill="#007aff"></rect>
-    </svg>
-    <div className="fw-bold me-auto">CoreUI for React.js</div>
-    <small>7 min ago</small>
-  </CToastHeader>
-  <CToastBody>Hello, world! This is a toast message.</CToastBody>
-</CToast>
-```
-
-### Stacking
-
-You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
-
-```jsx preview
-<CToaster className="position-static">
-  <CToast autohide={false} visible={true}>
-    <CToastHeader closeButton>
-      <svg
-        className="rounded me-2"
-        width="20"
-        height="20"
-        xmlns="http://www.w3.org/2000/svg"
-        preserveAspectRatio="xMidYMid slice"
-        focusable="false"
-        role="img"
-      >
-        <rect width="100%" height="100%" fill="#007aff"></rect>
-      </svg>
-      <div className="fw-bold me-auto">CoreUI for React.js</div>
-      <small>7 min ago</small>
-    </CToastHeader>
-    <CToastBody>Hello, world! This is a toast message.</CToastBody>
-  </CToast>
-  <CToast autohide={false} visible={true}>
-    <CToastHeader closeButton>
-      <svg
-        className="rounded me-2"
-        width="20"
-        height="20"
-        xmlns="http://www.w3.org/2000/svg"
-        preserveAspectRatio="xMidYMid slice"
-        focusable="false"
-        role="img"
-      >
-        <rect width="100%" height="100%" fill="#007aff"></rect>
-      </svg>
-      <div className="fw-bold me-auto">CoreUI for React.js</div>
-      <small>7 min ago</small>
-    </CToastHeader>
-    <CToastBody>Hello, world! This is a toast message.</CToastBody>
-  </CToast>
-</CToaster>
-```
-
-### Custom content
-
-Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/docs/utilities/api), or by adding your own markup. Here we've created a simpler toast by removing the default `<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://icons.coreui.io), and using some [flexbox utilities](https://coreui.io/docs/utilities/flex) to adjust the layout.
-
-```jsx preview
-<CToast autohide={false} visible={true} className="align-items-center">
-  <div className="d-flex">
-    <CToastBody>Hello, world! This is a toast message.</CToastBody>
-    <CToastClose className="me-2 m-auto" />
-  </div>
-</CToast>
-```
-
-Alternatively, you can also add additional controls and components to toasts.
-
-```jsx preview
-<CToast autohide={false} visible={true}>
-  <CToastBody>
-    Hello, world! This is a toast message.
-    <div className="mt-2 pt-2 border-top">
-      <CButton type="button" color="primary" size="sm">
-        Take action
-      </CButton>
-      <CToastClose as={CButton} color="secondary" size="sm" className="ms-1">
-        Close
-      </CToastClose>
-    </div>
-  </CToastBody>
-</CToast>
-```
-
-### Color schemes
-
-Building on the above example, you can create different toast color schemes with our [color](https://coreui.io/docs/utilities/colors) and [background](https://coreui.io/docs//utilities/background) utilities. Here we've set `color="primary"` and added `.text-white` class to the `<Ctoast>`, and then set `white` property to our close button. For a crisp edge, we remove the default border with `.border-0`.
-
-```jsx preview
-<CToast autohide={false} visible={true} color="primary" className="text-white align-items-center">
-  <div className="d-flex">
-    <CToastBody>Hello, world! This is a toast message.</CToastBody>
-    <CToastClose className="me-2 m-auto" white />
-  </div>
-</CToast>
-```
-
-## Customizing
-
-### CSS variables
-
-React toasts 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.
-
-<ScssDocs file="_toasts.scss" capture="toast-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CToast style={vars}>...</CToast>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="toast-variables"/>
-
-## API
-
-### CToast
-
-`markdown:CToast.api.mdx`
-
-### CToastHeader
-
-`markdown:CToastHeader.api.mdx`
-
-### CToastBody
-
-`markdown:CToastBody.api.mdx`
-
-### CToastClose
-
-`markdown:CToastClose.api.mdx`
-
-### CToaster
-
-`markdown:CToaster.api.mdx`
diff --git a/packages/docs/content/components/toast/api.mdx b/packages/docs/content/components/toast/api.mdx
new file mode 100644
index 00000000..c6543960
--- /dev/null
+++ b/packages/docs/content/components/toast/api.mdx
@@ -0,0 +1,32 @@
+---
+title: React Toast Component API
+name: Toast API
+description: Explore the API reference for the React Toast component and discover how to effectively utilize its props for customization.
+route: /components/toast/
+---
+
+import CToastAPI from '../../api/CToast.api.mdx'
+import CToastHeaderAPI from '../../api/CToastHeader.api.mdx'
+import CToastBodyAPI from '../../api/CToastBody.api.mdx'
+import CToastCloseAPI from '../../api/CToastClose.api.mdx'
+import CToasterAPI from '../../api/CToaster.api.mdx'
+
+## CToast
+
+<CToastAPI />
+
+## CToastHeader
+
+<CToastHeaderAPI />
+
+## CToastBody
+
+<CToastBodyAPI />
+
+## CToastClose
+
+<CToastCloseAPI />
+
+## CToaster
+
+<CToasterAPI />
diff --git a/packages/docs/content/components/toast/bootstrap.mdx b/packages/docs/content/components/toast/bootstrap.mdx
new file mode 100644
index 00000000..e529d4db
--- /dev/null
+++ b/packages/docs/content/components/toast/bootstrap.mdx
@@ -0,0 +1,53 @@
+---
+title: React Bootstrap Toast Component
+name: Toast with Bootstrap Styling
+description: Learn how to create lightweight, customizable toast notifications using CoreUI’s React components styled with Bootstrap.
+route: /components/toast/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Toast component
+
+Use CoreUI's React toast notifications styled like Bootstrap to provide lightweight, dismissible alerts for your application. Toasts can include headers, body content, icons, or be customized entirely.
+
+### Basic usage
+
+Toasts support headers and body content. Use the `autohide` prop to configure automatic dismissal behavior.
+
+<ExampleSnippet className="theme-bootstrap" component="ToastExample" componentName="React Bootstrap Toast" />
+<ExampleSnippet className="theme-bootstrap" component="ToastLiveExample" componentName="React Bootstrap Toast" />
+
+### Translucent background
+
+Toasts have a slightly translucent background by default, giving a modern Bootstrap feel.
+
+<ExampleSnippet className="theme-bootstrap bg-dark" component="ToastTranslucentExample" componentName="React Bootstrap Toast" />
+
+### Stacked toasts
+
+Wrap multiple toasts in a container to stack them vertically with spacing.
+
+<ExampleSnippet className="theme-bootstrap" component="ToastStackingExample" componentName="React Bootstrap Toast" />
+
+### Custom content
+
+You can customize toasts by omitting headers, replacing close buttons, or applying utility classes and icons.
+
+<ExampleSnippet className="theme-bootstrap" component="ToastCustomContentExample" componentName="React Bootstrap Toast" />
+<ExampleSnippet className="theme-bootstrap" component="ToastCustomContent2Example" componentName="React Bootstrap Toast" />
+
+### Color schemes
+
+Use CoreUI’s utility classes and props like `color`, `text-white`, and `border-0` to create Bootstrap-styled toast variants.
+
+<ExampleSnippet className="theme-bootstrap" component="ToastColorSchemesExample" componentName="React Bootstrap Toast" />
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of all the available props and components used to build Bootstrap-style toasts in React.
+
+- [&lt;CToast /&gt;](../api/#ctoast)
+- [&lt;CToastHeader /&gt;](../api/#ctoastheader)
+- [&lt;CToastBody /&gt;](../api/#ctoastbody)
+- [&lt;CToastClose /&gt;](../api/#ctoastclose)
+- [&lt;CToaster /&gt;](../api/#ctoaster)
diff --git a/packages/docs/content/components/toast/examples/ToastColorSchemesExample.tsx b/packages/docs/content/components/toast/examples/ToastColorSchemesExample.tsx
new file mode 100644
index 00000000..71f8f537
--- /dev/null
+++ b/packages/docs/content/components/toast/examples/ToastColorSchemesExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CToast, CToastBody, CToastClose } from '@coreui/react'
+
+export const ToastColorSchemesExample = () => {
+  return (
+    <CToast autohide={false} visible={true} color="primary" className="text-white align-items-center">
+      <div className="d-flex">
+        <CToastBody>Hello, world! This is a toast message.</CToastBody>
+        <CToastClose className="me-2 m-auto" white />
+      </div>
+    </CToast>
+  )
+}
diff --git a/packages/docs/content/components/toast/examples/ToastCustomContent2Example.tsx b/packages/docs/content/components/toast/examples/ToastCustomContent2Example.tsx
new file mode 100644
index 00000000..ce9cfea2
--- /dev/null
+++ b/packages/docs/content/components/toast/examples/ToastCustomContent2Example.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { CToast, CToastBody, CToastHeader } from '@coreui/react'
+
+export const ToastCustomContent2Example = () => {
+  return (
+    <CToast animation={false} autohide={false} visible={true}>
+      <CToastHeader closeButton>
+        <svg
+          className="rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid slice"
+          focusable="false"
+          role="img"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <div className="fw-bold me-auto">CoreUI for React.js</div>
+        <small>7 min ago</small>
+      </CToastHeader>
+      <CToastBody>Hello, world! This is a toast message.</CToastBody>
+    </CToast>
+  )
+}
diff --git a/packages/docs/content/components/toast/examples/ToastCustomContentExample.tsx b/packages/docs/content/components/toast/examples/ToastCustomContentExample.tsx
new file mode 100644
index 00000000..827150e5
--- /dev/null
+++ b/packages/docs/content/components/toast/examples/ToastCustomContentExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CToast, CToastBody, CToastClose } from '@coreui/react'
+
+export const ToastCustomContentExample = () => {
+  return (
+    <CToast autohide={false} visible={true} className="align-items-center">
+      <div className="d-flex">
+        <CToastBody>Hello, world! This is a toast message.</CToastBody>
+        <CToastClose className="me-2 m-auto" />
+      </div>
+    </CToast>
+  )
+}
diff --git a/packages/docs/content/components/toast/examples/ToastExample.tsx b/packages/docs/content/components/toast/examples/ToastExample.tsx
new file mode 100644
index 00000000..620fe54d
--- /dev/null
+++ b/packages/docs/content/components/toast/examples/ToastExample.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { CToast, CToastBody, CToastHeader } from '@coreui/react'
+
+export const ToastExample = () => {
+  return (
+    <CToast animation={false} autohide={false} visible={true}>
+      <CToastHeader closeButton>
+        <svg
+          className="rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid slice"
+          focusable="false"
+          role="img"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <div className="fw-bold me-auto">CoreUI for React.js</div>
+        <small>7 min ago</small>
+      </CToastHeader>
+      <CToastBody>Hello, world! This is a toast message.</CToastBody>
+    </CToast>
+  )
+}
diff --git a/packages/docs/content/components/toast/examples/ToastLiveExample.jsx b/packages/docs/content/components/toast/examples/ToastLiveExample.jsx
new file mode 100644
index 00000000..a87fc04b
--- /dev/null
+++ b/packages/docs/content/components/toast/examples/ToastLiveExample.jsx
@@ -0,0 +1,35 @@
+import React, { useRef, useState } from 'react'
+import { CButton, CToast, CToastBody, CToaster, CToastHeader } from '@coreui/react'
+
+export const ToastLiveExample = () => {
+  const [toast, addToast] = useState()
+  const toaster = useRef(null)
+  const exampleToast = (
+    <CToast>
+      <CToastHeader closeButton>
+        <svg
+          className="rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid slice"
+          focusable="false"
+          role="img"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <div className="fw-bold me-auto">CoreUI for React.js</div>
+        <small>7 min ago</small>
+      </CToastHeader>
+      <CToastBody>Hello, world! This is a toast message.</CToastBody>
+    </CToast>
+  )
+  return (
+    <>
+      <CButton color="primary" onClick={() => addToast(exampleToast)}>
+        Send a toast
+      </CButton>
+      <CToaster className="p-3" placement="top-end" push={toast} ref={toaster} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/toast/examples/ToastLiveExample.tsx b/packages/docs/content/components/toast/examples/ToastLiveExample.tsx
new file mode 100644
index 00000000..5f94a15f
--- /dev/null
+++ b/packages/docs/content/components/toast/examples/ToastLiveExample.tsx
@@ -0,0 +1,36 @@
+import React, { useRef, useState } from 'react'
+import { CButton, CToast, CToastBody, CToaster, CToastHeader } from '@coreui/react'
+
+export const ToastLiveExample = () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [toast, addToast] = useState<any>()
+  const toaster = useRef(null)
+  const exampleToast = (
+    <CToast>
+      <CToastHeader closeButton>
+        <svg
+          className="rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid slice"
+          focusable="false"
+          role="img"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <div className="fw-bold me-auto">CoreUI for React.js</div>
+        <small>7 min ago</small>
+      </CToastHeader>
+      <CToastBody>Hello, world! This is a toast message.</CToastBody>
+    </CToast>
+  )
+  return (
+    <>
+      <CButton color="primary" onClick={() => addToast(exampleToast)}>
+        Send a toast
+      </CButton>
+      <CToaster className="p-3" placement="top-end" push={toast} ref={toaster} />
+    </>
+  )
+}
diff --git a/packages/docs/content/components/toast/examples/ToastStackingExample.tsx b/packages/docs/content/components/toast/examples/ToastStackingExample.tsx
new file mode 100644
index 00000000..8ee32a9c
--- /dev/null
+++ b/packages/docs/content/components/toast/examples/ToastStackingExample.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { CToast, CToastBody, CToastHeader, CToaster } from '@coreui/react'
+
+export const ToastStackingExample = () => {
+  return (
+    <CToaster className="position-static">
+      <CToast autohide={false} visible={true}>
+        <CToastHeader closeButton>
+          <svg
+            className="rounded me-2"
+            width="20"
+            height="20"
+            xmlns="http://www.w3.org/2000/svg"
+            preserveAspectRatio="xMidYMid slice"
+            focusable="false"
+            role="img"
+          >
+            <rect width="100%" height="100%" fill="#007aff"></rect>
+          </svg>
+          <div className="fw-bold me-auto">CoreUI for React.js</div>
+          <small>7 min ago</small>
+        </CToastHeader>
+        <CToastBody>Hello, world! This is a toast message.</CToastBody>
+      </CToast>
+      <CToast autohide={false} visible={true}>
+        <CToastHeader closeButton>
+          <svg
+            className="rounded me-2"
+            width="20"
+            height="20"
+            xmlns="http://www.w3.org/2000/svg"
+            preserveAspectRatio="xMidYMid slice"
+            focusable="false"
+            role="img"
+          >
+            <rect width="100%" height="100%" fill="#007aff"></rect>
+          </svg>
+          <div className="fw-bold me-auto">CoreUI for React.js</div>
+          <small>7 min ago</small>
+        </CToastHeader>
+        <CToastBody>Hello, world! This is a toast message.</CToastBody>
+      </CToast>
+    </CToaster>
+  )
+}
diff --git a/packages/docs/content/components/toast/examples/ToastTranslucentExample.tsx b/packages/docs/content/components/toast/examples/ToastTranslucentExample.tsx
new file mode 100644
index 00000000..5feea866
--- /dev/null
+++ b/packages/docs/content/components/toast/examples/ToastTranslucentExample.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { CToast, CToastBody, CToastHeader } from '@coreui/react'
+
+export const ToastTranslucentExample = () => {
+  return (
+    <CToast autohide={false} visible={true}>
+      <CToastHeader closeButton>
+        <svg
+          className="rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid slice"
+          focusable="false"
+          role="img"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <div className="fw-bold me-auto">CoreUI for React.js</div>
+        <small>7 min ago</small>
+      </CToastHeader>
+      <CToastBody>Hello, world! This is a toast message.</CToastBody>
+    </CToast>
+  )
+}
diff --git a/packages/docs/content/components/toast/index.mdx b/packages/docs/content/components/toast/index.mdx
new file mode 100644
index 00000000..11e36763
--- /dev/null
+++ b/packages/docs/content/components/toast/index.mdx
@@ -0,0 +1,66 @@
+---
+title: React Toast Component
+name: Toast
+description: Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
+route: /components/toast/
+other_frameworks: toast
+---
+
+React toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
+
+## Overview
+
+Things to know when using the toast plugin:
+
+- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
+- Toasts will automatically hide if you do not specify `autohide: false`.
+
+## Examples
+
+### Basic
+
+To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities.
+
+Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
+
+<ExampleSnippet component="ToastExample" componentName="React Toast" />
+
+<ExampleSnippet component="ToastLiveExample" componentName="React Toast" />
+
+### Translucent
+
+Toasts are slightly translucent to blend in with what's below them.
+
+<ExampleSnippet className="bg-dark" component="ToastTranslucentExample" componentName="React Toast" />
+
+### Stacking
+
+You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
+
+<ExampleSnippet component="ToastStackingExample" componentName="React Toast" />
+
+### Custom content
+
+Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/bootstrap/docs/utilities/api), or by adding your own markup. Here we've created a simpler toast by removing the default `<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://coreui.io/icons/), and using some [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex) to adjust the layout.
+
+<ExampleSnippet component="ToastCustomContentExample" componentName="React Toast" />
+
+Alternatively, you can also add additional controls and components to toasts.
+
+<ExampleSnippet component="ToastCustomContent2Example" componentName="React Toast" />
+
+### Color schemes
+
+Building on the above example, you can create different toast color schemes with our [color](https://coreui.io/bootstrap/docs/utilities/colors) and [background](https://coreui.io/bootstrap/docs//utilities/background) utilities. Here we've set `color="primary"` and added `.text-white` class to the `<Ctoast>`, and then set `white` property to our close button. For a crisp edge, we remove the default border with `.border-0`.
+
+<ExampleSnippet component="ToastColorSchemesExample" componentName="React Toast" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CToast /&gt;](./api/#ctoast)
+- [&lt;CToastHeader /&gt;](./api/#ctoastheader)
+- [&lt;CToastBody /&gt;](./api/#ctoastbody)
+- [&lt;CToastClose /&gt;](./api/#ctoastclose)
+- [&lt;CToaster /&gt;](./api/#ctoaster)
diff --git a/packages/docs/content/components/toast/styling.mdx b/packages/docs/content/components/toast/styling.mdx
new file mode 100644
index 00000000..75babf3e
--- /dev/null
+++ b/packages/docs/content/components/toast/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Toast Component Styling
+name: Toast Styling
+description: Learn how to customize the React Toast component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/toast/
+---
+
+### CSS variables
+
+React Toast supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_toasts.scss" capture="toast-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-toast-spacing': '2rem',
+  '--cui-toast-color': '#f2f3f4',
+}
+
+return <CToast style={customVars}>{/* Toast content */}</CToast>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="toast-variables"/>
diff --git a/packages/docs/content/components/tooltip.mdx b/packages/docs/content/components/tooltip.mdx
deleted file mode 100644
index 6c148a82..00000000
--- a/packages/docs/content/components/tooltip.mdx
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: React Tooltip Component
-name: Tooltip
-description: Documentation and examples for adding React Tooltips.
-menu: Components
-route: /components/tooltip
-other_frameworks: tooltip
----
-
-import { CTooltip, CButton, CLink } from '@coreui/react/src/index'
-
-## Examples
-
-### Tooltips on links
-
-Hover over the links below to see tooltips:
-
-<Example className="text-body-secondary">
-  Tight pants next level keffiyeh <CTooltip content="Tooltip text"><CLink>you&nbsp;probably</CLink></CTooltip>
-  haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
-  Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <CTooltip content="Tooltip text"><CLink>have&nbsp;a</CLink></CTooltip>
-  terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu
-  biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic
-  artisan <CTooltip content="Tooltip text"><CLink>whatever&nbsp;keytar</CLink></CTooltip>
-  scenester farm-to-table banksy Austin <CTooltip content="Tooltip text"><CLink>twitter&nbsp;handle</CLink></CTooltip>
-  freegan cred raw denim single-origin coffee viral.
-</Example>
-
-
-```jsx
-<p className="text-body-secondary">
-  Tight pants next level keffiyeh
-  <CTooltip content="Tooltip text">
-    <CLink> you probably </CLink>
-  </CTooltip>
-  haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
-  Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
-  <CTooltip content="Tooltip text">
-    <CLink> have a </CLink>
-  </CTooltip>
-  terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu
-  biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic
-  artisan
-  <CTooltip content="Tooltip text">
-    <CLink> whatever keytar </CLink>
-  </CTooltip>
-  scenester farm-to-table banksy Austin
-  <CTooltip content="Tooltip text">
-    <CLink> twitter handle </CLink>
-  </CTooltip>
-  freegan cred raw denim single-origin coffee viral.
-</p>
-```
-
-### Custom tooltips
-
-You can customize the appearance of tooltips using [CSS variables](#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.
-
-export const CustomTooltipsExample = () => {
-  const customTooltipStyle = {
-    '--cui-tooltip-bg': 'var(--cui-primary)',
-  }
-  return (
-    <CTooltip
-      content="This top tooltip is themed via CSS variables."
-      placement="top"
-      style={customTooltipStyle}
-    >
-      <CButton color="secondary">Custom tooltip</CButton>
-    </CTooltip>
-  )
-}
-
-<Example>
-  <CustomTooltipsExample />
-</Example>
-```jsx
-const customTooltipStyle = {
-  '--cui-tooltip-bg': 'var(--cui-primary)',
-}
-return (
-  <CTooltip
-    content="This top tooltip is themed via CSS variables."
-    placement="top"
-    style={customTooltipStyle}
-  >
-    <CButton color="secondary">Custom tooltip</CButton>
-  </CTooltip>
-)
-```
-
-### Directions
-
-Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
-
-<Example>
-  <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
-    <CButton color="secondary">Tooltip on top</CButton>
-  </CTooltip>
-  <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">
-    <CButton color="secondary">Tooltip on right</CButton>
-  </CTooltip>
-  <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">
-    <CButton color="secondary">Tooltip on bottom</CButton>
-  </CTooltip>
-  <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
-    <CButton color="secondary">Tooltip on left</CButton>
-  </CTooltip>
-</Example>
-
-```jsx
-<CTooltip
-  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-  placement="top"
->
-  <CButton color="secondary">Tooltip on top</CButton>
-</CTooltip>
-<CTooltip
-  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-  placement="right"
->
-  <CButton color="secondary">Tooltip on right</CButton>
-</CTooltip>
-<CTooltip
-  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-  placement="bottom"
->
-  <CButton color="secondary">Tooltip on bottom</CButton>
-</CTooltip>
-<CTooltip
-  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-  placement="left"
->
-  <CButton color="secondary">Tooltip on left</CButton>
-</CTooltip>
-```
-
-## Usage
-
-### Disabled elements
-
-Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
-
-<Example>
-  <CTooltip
-    content="Disabled tooltip"
-    trigger={['hover', 'focus']}
-  >
-    <span className="d-inline-block" tabIndex={0}>
-      <CButton color="primary" disabled>Disabled button</CButton>
-    </span>
-  </CTooltip>
-</Example>
-```jsx
-<CTooltip
-  content="Disabled tooltip"
-  trigger={['hover', 'focus']}
->
-  <span className="d-inline-block" tabIndex={0}>
-    <CButton color="primary" disabled>Disabled button</CButton>
-  </span>
-</CTooltip>
-```
-
-## Customizing
-
-### CSS variables
-
-React toltips 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.
-
-<ScssDocs file="_tooltip.scss" capture="tooltip-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CTooltip style={vars}>...</CTooltip>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="tooltip-variables"/>
-
-## API
-
-### CTooltip
-
-`markdown:CTooltip.api.mdx`
diff --git a/packages/docs/content/components/tooltip/api.mdx b/packages/docs/content/components/tooltip/api.mdx
new file mode 100644
index 00000000..edfa37ac
--- /dev/null
+++ b/packages/docs/content/components/tooltip/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Tooltip Component API
+name: Tooltip API
+description: Explore the API reference for the React Tooltip component and discover how to effectively utilize its props for customization.
+route: /components/tooltip/
+---
+
+import CTooltipAPI from '../../api/CTooltip.api.mdx'
+
+## CTooltip
+
+<CTooltipAPI />
diff --git a/packages/docs/content/components/tooltip/bootstrap.mdx b/packages/docs/content/components/tooltip/bootstrap.mdx
new file mode 100644
index 00000000..a6dc62e0
--- /dev/null
+++ b/packages/docs/content/components/tooltip/bootstrap.mdx
@@ -0,0 +1,41 @@
+---
+title: React Bootstrap Tooltip Component
+name: Tooltip with Bootstrap Styling
+description: Learn how to add Bootstrap-style tooltips in your React app using CoreUI components styled to match Bootstrap.
+route: /components/tooltip/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Tooltip component
+
+Use CoreUI's React components styled with Bootstrap to show additional contextual information when users hover over elements, similar to native Bootstrap tooltips.
+
+### Tooltips on links
+
+Hover over the links below to see Bootstrap-style tooltips.
+
+<ExampleSnippet className="theme-bootstrap text-body-secondary" component="TooltipOnLinksExample" componentName="React Bootstrap Tooltip" />
+
+### Custom tooltips
+
+You can customize the appearance of tooltips using [CSS variables](./styling/#css-variables). Below is an example with scoped overrides for a unique appearance.
+
+<ExampleSnippet className="theme-bootstrap text-body-secondary" component="TooltipCustomExample" componentName="React Bootstrap Tooltip" />
+
+### Tooltip directions
+
+You can place tooltips on the top, right, bottom, or left of the element. Directions are automatically mirrored in RTL layouts.
+
+<ExampleSnippet className="theme-bootstrap text-body-secondary" component="TooltipDirectionsExample" componentName="React Bootstrap Tooltip" />
+
+### Disabled elements
+
+Because disabled elements do not trigger events, wrap them in a `<span>` or `<div>` with `tabIndex="0"` to enable tooltip behavior.
+
+<ExampleSnippet className="theme-bootstrap text-body-secondary" component="TooltipDisabledElementsExample" componentName="React Bootstrap Tooltip" />
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of all available props and customization options.
+
+- [&lt;CTooltip /&gt;](../api/#ctooltip)
diff --git a/packages/docs/content/components/tooltip/examples/TooltipCustomExample.jsx b/packages/docs/content/components/tooltip/examples/TooltipCustomExample.jsx
new file mode 100644
index 00000000..ad9602e2
--- /dev/null
+++ b/packages/docs/content/components/tooltip/examples/TooltipCustomExample.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton, CTooltip } from '@coreui/react'
+
+export const TooltipCustomExample = () => {
+  const customTooltipStyle = {
+    '--cui-tooltip-bg': 'var(--cui-primary)',
+  }
+
+  return (
+    <CTooltip
+      content="This top tooltip is themed via CSS variables."
+      placement="top"
+      style={customTooltipStyle}
+    >
+      <CButton color="secondary">Custom tooltip</CButton>
+    </CTooltip>
+  )
+}
diff --git a/packages/docs/content/components/tooltip/examples/TooltipCustomExample.tsx b/packages/docs/content/components/tooltip/examples/TooltipCustomExample.tsx
new file mode 100644
index 00000000..e4390686
--- /dev/null
+++ b/packages/docs/content/components/tooltip/examples/TooltipCustomExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CButton, CTooltip } from '@coreui/react'
+
+export const TooltipCustomExample = () => {
+  const customTooltipStyle = {
+    '--cui-tooltip-bg': 'var(--cui-primary)',
+  } as React.CSSProperties
+
+  return (
+    <CTooltip
+      content="This top tooltip is themed via CSS variables."
+      placement="top"
+      style={customTooltipStyle}
+    >
+      <CButton color="secondary">Custom tooltip</CButton>
+    </CTooltip>
+  )
+}
diff --git a/packages/docs/content/components/tooltip/examples/TooltipDirectionsExample.tsx b/packages/docs/content/components/tooltip/examples/TooltipDirectionsExample.tsx
new file mode 100644
index 00000000..b0c0c923
--- /dev/null
+++ b/packages/docs/content/components/tooltip/examples/TooltipDirectionsExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CButton, CTooltip } from '@coreui/react'
+
+export const TooltipDirectionsExample = () => {
+  return (
+    <>
+      <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
+        <CButton color="secondary">Tooltip on top</CButton>
+      </CTooltip>
+      <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">
+        <CButton color="secondary">Tooltip on right</CButton>
+      </CTooltip>
+      <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">
+        <CButton color="secondary">Tooltip on bottom</CButton>
+      </CTooltip>
+      <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
+        <CButton color="secondary">Tooltip on left</CButton>
+      </CTooltip>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/tooltip/examples/TooltipDisabledElementsExample.tsx b/packages/docs/content/components/tooltip/examples/TooltipDisabledElementsExample.tsx
new file mode 100644
index 00000000..be26b8dd
--- /dev/null
+++ b/packages/docs/content/components/tooltip/examples/TooltipDisabledElementsExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CButton, CTooltip } from '@coreui/react'
+
+export const TooltipDisabledElementsExample = () => {
+  return (
+    <CTooltip content="Disabled tooltip" trigger={['hover', 'focus']}>
+      <span className="d-inline-block" tabIndex={0}>
+        <CButton color="primary" disabled>
+          Disabled button
+        </CButton>
+      </span>
+    </CTooltip>
+  )
+}
diff --git a/packages/docs/content/components/tooltip/examples/TooltipOnLinksExample.tsx b/packages/docs/content/components/tooltip/examples/TooltipOnLinksExample.tsx
new file mode 100644
index 00000000..bc8ae7a8
--- /dev/null
+++ b/packages/docs/content/components/tooltip/examples/TooltipOnLinksExample.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { CLink, CTooltip } from '@coreui/react'
+
+export const TooltipOnLinksExample = () => {
+  return (
+    <p className="text-body-secondary">
+      Tight pants next level keffiyeh
+      <CTooltip content="Tooltip text">
+        <CLink> you probably </CLink>
+      </CTooltip>
+      haven&#39;t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
+      Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit american apparel
+      <CTooltip content="Tooltip text">
+        <CLink> have a </CLink>
+      </CTooltip>
+      terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel
+      williamsburg marfa, four loko mcsweeney&#39;s cleanse vegan chambray. A really ironic artisan
+      <CTooltip content="Tooltip text">
+        <CLink> whatever keytar </CLink>
+      </CTooltip>
+      scenester farm-to-table banksy Austin
+      <CTooltip content="Tooltip text">
+        <CLink> twitter handle </CLink>
+      </CTooltip>
+      freegan cred raw denim single-origin coffee viral.
+    </p>
+  )
+}
diff --git a/packages/docs/content/components/tooltip/index.mdx b/packages/docs/content/components/tooltip/index.mdx
new file mode 100644
index 00000000..32a24dd1
--- /dev/null
+++ b/packages/docs/content/components/tooltip/index.mdx
@@ -0,0 +1,41 @@
+---
+title: React Tooltip Component
+name: Tooltip
+description: Documentation and examples for adding React Tooltips.
+route: /components/tooltip/
+other_frameworks: tooltip
+---
+
+## Examples
+
+### Tooltips on links
+
+Hover over the links below to see tooltips:
+
+<ExampleSnippet className="text-body-secondary" component="TooltipOnLinksExample" componentName="React Tooltip" />
+
+### Custom tooltips
+
+You can customize the appearance of tooltips using [CSS variables](./styling/#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.
+
+<ExampleSnippet className="text-body-secondary" component="TooltipCustomExample" componentName="React Tooltip" />
+
+### Directions
+
+Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
+
+<ExampleSnippet className="text-body-secondary" component="TooltipDirectionsExample" componentName="React Tooltip" />
+
+## Usage
+
+### Disabled elements
+
+Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
+
+<ExampleSnippet className="text-body-secondary" component="TooltipDisabledElementsExample" componentName="React Tooltip" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CTooltip /&gt;](./api/#ctooltip)
diff --git a/packages/docs/content/components/tooltip/styling.mdx b/packages/docs/content/components/tooltip/styling.mdx
new file mode 100644
index 00000000..92798da2
--- /dev/null
+++ b/packages/docs/content/components/tooltip/styling.mdx
@@ -0,0 +1,27 @@
+---
+title: React Tooltip Component Styling
+name: Tooltip Styling
+description: Learn how to customize the React Tooltip component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /components/tooltip/
+---
+
+### CSS variables
+
+React Tooltip supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
+
+<ScssDocs file="_tooltip.scss" capture="tooltip-css-vars"/>
+
+#### How to use CSS variables
+
+```jsx
+const customVars = {
+  '--cui-tooltip-color': '#888',
+  '--cui-tooltip-bg': '#f2f4f6',
+}
+
+return <CTooltip style={customVars}>{/* Tooltip content */}</CTooltip>
+```
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="tooltip-variables"/>
diff --git a/packages/docs/content/components/widgets.mdx b/packages/docs/content/components/widgets.mdx
deleted file mode 100644
index 6c08ef69..00000000
--- a/packages/docs/content/components/widgets.mdx
+++ /dev/null
@@ -1,1468 +0,0 @@
----
-title: React Widgets
-name: Widgets
-description: React widget components give information about the app statistics.
-menu: Components
-route: /components/widgets
----
-
-import CIcon from '@coreui/icons-react'
-import {
-  cibFacebook,
-  cibTwitter,
-  cilArrowRight,
-  cilArrowTop,
-  cilChartPie,
-  cilOptions,
-} from '@coreui/icons'
-import { CChartBar, CChartLine } from '@coreui/react-chartjs/src/index.ts'
-
-import {
-  CCol,
-  CDropdown,
-  CDropdownItem,
-  CDropdownMenu,
-  CDropdownToggle,
-  CLink,
-  CRow,
-  CWidgetStatsA,
-  CWidgetStatsB,
-  CWidgetStatsC,
-  CWidgetStatsD,
-  CWidgetStatsE,
-  CWidgetStatsF,
-} from '@coreui/react/src/index'
-
-## CWidgetStatsA
-
-<Example>
-  <CRow>
-    <CCol sm={6}>
-      <CWidgetStatsA
-        className="mb-4"
-        color="primary"
-        value={
-          <>
-            $9.000{' '}
-            <span className="fs-6 fw-normal">
-              (40.9% <CIcon icon={cilArrowTop} />)
-            </span>
-          </>
-        }
-        title="Widget title"
-        action={
-          <CDropdown alignment="end">
-            <CDropdownToggle color="transparent" caret={false} className="p-0">
-              <CIcon icon={cilOptions} className="text-white" />
-            </CDropdownToggle>
-            <CDropdownMenu>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-        }
-        chart={
-          <CChartLine
-            className="mt-3 mx-3"
-            style={{ height: '70px' }}
-            data={{
-              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-              datasets: [
-                {
-                  label: 'My First dataset',
-                  backgroundColor: 'transparent',
-                  borderColor: 'rgba(255,255,255,.55)',
-                  pointBackgroundColor: '#5856d6',
-                  data: [65, 59, 84, 84, 51, 55, 40],
-                },
-              ],
-            }}
-            options={{
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              maintainAspectRatio: false,
-              scales: {
-                x: {
-                  border: {
-                    display: false,
-                  },
-                  grid: {
-                    display: false,
-                    drawBorder: false,
-                  },
-                  ticks: {
-                    display: false,
-                  },
-                },
-                y: {
-                  min: 30,
-                  max: 89,
-                  display: false,
-                  grid: {
-                    display: false,
-                  },
-                  ticks: {
-                    display: false,
-                  },
-                },
-              },
-              elements: {
-                line: {
-                  borderWidth: 1,
-                  tension: 0.4,
-                },
-                point: {
-                  radius: 4,
-                  hitRadius: 10,
-                  hoverRadius: 4,
-                },
-              },
-            }}
-          />
-        }
-      />
-    </CCol>
-    <CCol sm={6}>
-      <CWidgetStatsA
-        className="mb-4"
-        color="info"
-        value={
-          <>
-            $9.000{' '}
-            <span className="fs-6 fw-normal">
-              (40.9% <CIcon icon={cilArrowTop} />)
-            </span>
-          </>
-        }
-        title="Widget title"
-        action={
-          <CDropdown alignment="end">
-            <CDropdownToggle color="transparent" caret={false} className="p-0">
-              <CIcon icon={cilOptions} className="text-white" />
-            </CDropdownToggle>
-            <CDropdownMenu>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-        }
-        chart={
-          <CChartLine
-            className="mt-3 mx-3"
-            style={{ height: '70px' }}
-            data={{
-              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-              datasets: [
-                {
-                  label: 'My First dataset',
-                  backgroundColor: 'transparent',
-                  borderColor: 'rgba(255,255,255,.55)',
-                  pointBackgroundColor: '#39f',
-                  data: [1, 18, 9, 17, 34, 22, 11],
-                },
-              ],
-            }}
-            options={{
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              maintainAspectRatio: false,
-              scales: {
-                x: {
-                  border: {
-                    display: false,
-                  },
-                  grid: {
-                    display: false,
-                    drawBorder: false,
-                  },
-                  ticks: {
-                    display: false,
-                  },
-                },
-                y: {
-                  min: -9,
-                  max: 39,
-                  display: false,
-                  grid: {
-                    display: false,
-                  },
-                  ticks: {
-                    display: false,
-                  },
-                },
-              },
-              elements: {
-                line: {
-                  borderWidth: 1,
-                },
-                point: {
-                  radius: 4,
-                  hitRadius: 10,
-                  hoverRadius: 4,
-                },
-              },
-            }}
-          />
-        }
-      />
-    </CCol>
-    <CCol sm={6}>
-      <CWidgetStatsA
-        className="mb-4"
-        color="warning"
-        value={
-          <>
-            $9.000{' '}
-            <span className="fs-6 fw-normal">
-              (40.9% <CIcon icon={cilArrowTop} />)
-            </span>
-          </>
-        }
-        title="Widget title"
-        action={
-          <CDropdown alignment="end">
-            <CDropdownToggle color="transparent" caret={false} className="p-0">
-              <CIcon icon={cilOptions} className="text-white" />
-            </CDropdownToggle>
-            <CDropdownMenu>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-        }
-        chart={
-          <CChartLine
-            className="mt-3"
-            style={{ height: '70px' }}
-            data={{
-              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-              datasets: [
-                {
-                  label: 'My First dataset',
-                  backgroundColor: 'rgba(255,255,255,.2)',
-                  borderColor: 'rgba(255,255,255,.55)',
-                  data: [78, 81, 80, 45, 34, 12, 40],
-                  fill: true,
-                },
-              ],
-            }}
-            options={{
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              maintainAspectRatio: false,
-              scales: {
-                x: {
-                  display: false,
-                },
-                y: {
-                  display: false,
-                },
-              },
-              elements: {
-                line: {
-                  borderWidth: 2,
-                  tension: 0.4,
-                },
-                point: {
-                  radius: 0,
-                  hitRadius: 10,
-                  hoverRadius: 4,
-                },
-              },
-            }}
-          />
-        }
-      />
-    </CCol>
-    <CCol sm={6}>
-      <CWidgetStatsA
-        className="mb-4"
-        color="danger"
-        value={
-          <>
-            $9.000{' '}
-            <span className="fs-6 fw-normal">
-              (40.9% <CIcon icon={cilArrowTop} />)
-            </span>
-          </>
-        }
-        title="Widget title"
-        action={
-          <CDropdown alignment="end">
-            <CDropdownToggle color="transparent" caret={false} className="p-0">
-              <CIcon icon={cilOptions} className="text-white" />
-            </CDropdownToggle>
-            <CDropdownMenu>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-        }
-        chart={
-          <CChartBar
-            className="mt-3 mx-3"
-            style={{ height: '70px' }}
-            data={{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-                'August',
-                'September',
-                'October',
-                'November',
-                'December',
-                'January',
-                'February',
-                'March',
-                'April',
-              ],
-              datasets: [
-                {
-                  label: 'My First dataset',
-                  backgroundColor: 'rgba(255,255,255,.2)',
-                  borderColor: 'rgba(255,255,255,.55)',
-                  data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
-                  barPercentage: 0.6,
-                },
-              ],
-            }}
-            options={{
-              maintainAspectRatio: false,
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              scales: {
-                x: {
-                  grid: {
-                    display: false,
-                    drawTicks: false,
-                  },
-                  ticks: {
-                    display: false,
-                  },
-                },
-                y: {
-                  border: {
-                    display: false,
-                  },
-                  grid: {
-                    display: false,
-                    drawBorder: false,
-                    drawTicks: false,
-                  },
-                  ticks: {
-                    display: false,
-                  },
-                },
-              },
-            }}
-          />
-        }
-      />
-    </CCol>
-  </CRow>
-</Example>
-
-```jsx
-<CRow>
-  <CCol sm={6}>
-    <CWidgetStatsA
-      className="mb-4"
-      color="primary"
-      value={
-        <>
-          $9.000{' '}
-          <span className="fs-6 fw-normal">
-            (40.9% <CIcon icon={cilArrowTop} />)
-          </span>
-        </>
-      }
-      title="Widget title"
-      action={
-        <CDropdown alignment="end">
-          <CDropdownToggle color="transparent" caret={false} className="p-0">
-            <CIcon icon={cilOptions} className="text-white" />
-          </CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem>Action</CDropdownItem>
-            <CDropdownItem>Another action</CDropdownItem>
-            <CDropdownItem>Something else here...</CDropdownItem>
-            <CDropdownItem disabled>Disabled action</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      }
-      chart={
-        <CChartLine
-          className="mt-3 mx-3"
-          style={{ height: '70px' }}
-          data={{
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-              {
-                label: 'My First dataset',
-                backgroundColor: 'transparent',
-                borderColor: 'rgba(255,255,255,.55)',
-                pointBackgroundColor: '#5856d6',
-                data: [65, 59, 84, 84, 51, 55, 40],
-              },
-            ],
-          }}
-          options={{
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                border: {
-                  display: false,
-                },
-                grid: {
-                  display: false,
-                  drawBorder: false,
-                },
-                ticks: {
-                  display: false,
-                },
-              },
-              y: {
-                min: 30,
-                max: 89,
-                display: false,
-                grid: {
-                  display: false,
-                },
-                ticks: {
-                  display: false,
-                },
-              },
-            },
-            elements: {
-              line: {
-                borderWidth: 1,
-                tension: 0.4,
-              },
-              point: {
-                radius: 4,
-                hitRadius: 10,
-                hoverRadius: 4,
-              },
-            },
-          }}
-        />
-      }
-    />
-  </CCol>
-  <CCol sm={6}>
-    <CWidgetStatsA
-      className="mb-4"
-      color="info"
-      value={
-        <>
-          $9.000{' '}
-          <span className="fs-6 fw-normal">
-            (40.9% <CIcon icon={cilArrowTop} />)
-          </span>
-        </>
-      }
-      title="Widget title"
-      action={
-        <CDropdown alignment="end">
-          <CDropdownToggle color="transparent" caret={false} className="p-0">
-            <CIcon icon={cilOptions} className="text-white" />
-          </CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem>Action</CDropdownItem>
-            <CDropdownItem>Another action</CDropdownItem>
-            <CDropdownItem>Something else here...</CDropdownItem>
-            <CDropdownItem disabled>Disabled action</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      }
-      chart={
-        <CChartLine
-          className="mt-3 mx-3"
-          style={{ height: '70px' }}
-          data={{
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-              {
-                label: 'My First dataset',
-                backgroundColor: 'transparent',
-                borderColor: 'rgba(255,255,255,.55)',
-                pointBackgroundColor: '#39f',
-                data: [1, 18, 9, 17, 34, 22, 11],
-              },
-            ],
-          }}
-          options={{
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                border: {
-                  display: false,
-                },
-                grid: {
-                  display: false,
-                  drawBorder: false,
-                },
-                ticks: {
-                  display: false,
-                },
-              },
-              y: {
-                min: -9,
-                max: 39,
-                display: false,
-                grid: {
-                  display: false,
-                },
-                ticks: {
-                  display: false,
-                },
-              },
-            },
-            elements: {
-              line: {
-                borderWidth: 1,
-              },
-              point: {
-                radius: 4,
-                hitRadius: 10,
-                hoverRadius: 4,
-              },
-            },
-          }}
-        />
-      }
-    />
-  </CCol>
-  <CCol sm={6}>
-    <CWidgetStatsA
-      className="mb-4"
-      color="warning"
-      value={
-        <>
-          $9.000{' '}
-          <span className="fs-6 fw-normal">
-            (40.9% <CIcon icon={cilArrowTop} />)
-          </span>
-        </>
-      }
-      title="Widget title"
-      action={
-        <CDropdown alignment="end">
-          <CDropdownToggle color="transparent" caret={false} className="p-0">
-            <CIcon icon={cilOptions} className="text-white" />
-          </CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem>Action</CDropdownItem>
-            <CDropdownItem>Another action</CDropdownItem>
-            <CDropdownItem>Something else here...</CDropdownItem>
-            <CDropdownItem disabled>Disabled action</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      }
-      chart={
-        <CChartLine
-          className="mt-3"
-          style={{ height: '70px' }}
-          data={{
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-              {
-                label: 'My First dataset',
-                backgroundColor: 'rgba(255,255,255,.2)',
-                borderColor: 'rgba(255,255,255,.55)',
-                data: [78, 81, 80, 45, 34, 12, 40],
-                fill: true,
-              },
-            ],
-          }}
-          options={{
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                display: false,
-              },
-              y: {
-                display: false,
-              },
-            },
-            elements: {
-              line: {
-                borderWidth: 2,
-                tension: 0.4,
-              },
-              point: {
-                radius: 0,
-                hitRadius: 10,
-                hoverRadius: 4,
-              },
-            },
-          }}
-        />
-      }
-    />
-  </CCol>
-  <CCol sm={6}>
-    <CWidgetStatsA
-      className="mb-4"
-      color="danger"
-      value={
-        <>
-          $9.000{' '}
-          <span className="fs-6 fw-normal">
-            (40.9% <CIcon icon={cilArrowTop} />)
-          </span>
-        </>
-      }
-      title="Widget title"
-      action={
-        <CDropdown alignment="end">
-          <CDropdownToggle color="transparent" caret={false} className="p-0">
-            <CIcon icon={cilOptions} className="text-white" />
-          </CDropdownToggle>
-          <CDropdownMenu>
-            <CDropdownItem>Action</CDropdownItem>
-            <CDropdownItem>Another action</CDropdownItem>
-            <CDropdownItem>Something else here...</CDropdownItem>
-            <CDropdownItem disabled>Disabled action</CDropdownItem>
-          </CDropdownMenu>
-        </CDropdown>
-      }
-      chart={
-        <CChartBar
-          className="mt-3 mx-3"
-          style={{ height: '70px' }}
-          data={{
-            labels: [
-              'January',
-              'February',
-              'March',
-              'April',
-              'May',
-              'June',
-              'July',
-              'August',
-              'September',
-              'October',
-              'November',
-              'December',
-              'January',
-              'February',
-              'March',
-              'April',
-            ],
-            datasets: [
-              {
-                label: 'My First dataset',
-                backgroundColor: 'rgba(255,255,255,.2)',
-                borderColor: 'rgba(255,255,255,.55)',
-                data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
-                barPercentage: 0.6,
-              },
-            ],
-          }}
-          options={{
-            maintainAspectRatio: false,
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
-            scales: {
-              x: {
-                grid: {
-                  display: false,
-                  drawTicks: false,
-                },
-                ticks: {
-                  display: false,
-                },
-              },
-              y: {
-                border: {
-                  display: false,
-                },
-                grid: {
-                  display: false,
-                  drawBorder: false,
-                  drawTicks: false,
-                },
-                ticks: {
-                  display: false,
-                },
-              },
-            },
-          }}
-        />
-      }
-    />
-  </CCol>
-</CRow>
-```
-
-## CWidgetStatsB
-
-<Example>
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsB
-        className="mb-3"
-        progress={{ color: 'success', value: 75 }}
-        text="Widget helper text"
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsB
-        className="mb-3"
-        color="primary"
-        inverse
-        progress={{ value: 75 }}
-        text="Widget helper text"
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-  </CRow>
-</Example>
-
-```jsx
-<CRow>
-  <CCol xs={6}>
-    <CWidgetStatsB
-      className="mb-3"
-      progress={{ color: 'success', value: 75 }}
-      text="Widget helper text"
-      title="Widget title"
-      value="89.9%"
-    />
-  </CCol>
-  <CCol xs={6}>
-    <CWidgetStatsB
-      className="mb-3"
-      color="primary"
-      inverse
-      progress={{ value: 75 }}
-      text="Widget helper text"
-      title="Widget title"
-      value="89.9%"
-    />
-  </CCol>
-</CRow>
-```
-
-## CWidgetStatsC
-
-<Example>
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsC
-        className="mb-3"
-        icon={<CIcon icon={cilChartPie} height={36} />}
-        progress={{ color: 'success', value: 75 }}
-        text="Widget helper text"
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsC
-        className="mb-3"
-        icon={<CIcon icon={cilChartPie} height={36} />}
-        color="primary"
-        inverse
-        progress={{ value: 75 }}
-        text="Widget helper text"
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-  </CRow>
-</Example>
-
-```jsx
-<CRow>
-  <CCol xs={6}>
-    <CWidgetStatsC
-      className="mb-3"
-      icon={<CIcon icon={cilChartPie} height={36} />}
-      progress={{ color: 'success', value: 75 }}
-      text="Widget helper text"
-      title="Widget title"
-      value="89.9%"
-    />
-  </CCol>
-  <CCol xs={6}>
-    <CWidgetStatsC
-      className="mb-3"
-      icon={<CIcon icon={cilChartPie} height={36} />}
-      color="primary"
-      inverse
-      progress={{ value: 75 }}
-      text="Widget helper text"
-      title="Widget title"
-      value="89.9%"
-    />
-  </CCol>
-</CRow>
-```
-
-## CWidgetStatsD
-
-<Example>
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsD
-        className="mb-3"
-        icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
-        chart={
-          <CChartLine
-            className="position-absolute w-100 h-100"
-            data={{
-              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-              datasets: [
-                {
-                  backgroundColor: 'rgba(255,255,255,.1)',
-                  borderColor: 'rgba(255,255,255,.55)',
-                  pointHoverBackgroundColor: '#fff',
-                  borderWidth: 2,
-                  data: [65, 59, 84, 84, 51, 55, 40],
-                  fill: true,
-                },
-              ],
-            }}
-            options={{
-              elements: {
-                line: {
-                  tension: 0.4,
-                },
-                point: {
-                  radius: 0,
-                  hitRadius: 10,
-                  hoverRadius: 4,
-                  hoverBorderWidth: 3,
-                },
-              },
-              maintainAspectRatio: false,
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              scales: {
-                x: {
-                  display: false,
-                },
-                y: {
-                  display: false,
-                },
-              },
-            }}
-          />
-        }
-        style={{ '--cui-card-cap-bg': '#3b5998' }}
-        values={[
-          { title: 'friends', value: '89K' },
-          { title: 'feeds', value: '459' },
-        ]}
-      />
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsD
-        className="mb-3"
-        icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
-        chart={
-          <CChartLine
-            className="position-absolute w-100 h-100"
-            data={{
-              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-              datasets: [
-                {
-                  backgroundColor: 'rgba(255,255,255,.1)',
-                  borderColor: 'rgba(255,255,255,.55)',
-                  pointHoverBackgroundColor: '#fff',
-                  borderWidth: 2,
-                  data: [1, 13, 9, 17, 34, 41, 38],
-                  fill: true,
-                },
-              ],
-            }}
-            options={{
-              elements: {
-                line: {
-                  tension: 0.4,
-                },
-                point: {
-                  radius: 0,
-                  hitRadius: 10,
-                  hoverRadius: 4,
-                  hoverBorderWidth: 3,
-                },
-              },
-              maintainAspectRatio: false,
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              scales: {
-                x: {
-                  display: false,
-                },
-                y: {
-                  display: false,
-                },
-              },
-            }}
-          />
-        }
-        style={{ '--cui-card-cap-bg': '#00aced' }}
-        values={[
-          { title: 'folowers', value: '973K' },
-          { title: 'tweets', value: '1.792' },
-        ]}
-      />
-    </CCol>
-  </CRow>
-</Example>
-
-```jsx
-<CRow>
-  <CCol xs={6}>
-    <CWidgetStatsD
-      className="mb-3"
-      icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
-      chart={
-        <CChartLine
-          className="position-absolute w-100 h-100"
-          data={{
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-              {
-                backgroundColor: 'rgba(255,255,255,.1)',
-                borderColor: 'rgba(255,255,255,.55)',
-                pointHoverBackgroundColor: '#fff',
-                borderWidth: 2,
-                data: [65, 59, 84, 84, 51, 55, 40],
-                fill: true,
-              },
-            ],
-          }}
-          options={{
-            elements: {
-              line: {
-                tension: 0.4,
-              },
-              point: {
-                radius: 0,
-                hitRadius: 10,
-                hoverRadius: 4,
-                hoverBorderWidth: 3,
-              },
-            },
-            maintainAspectRatio: false,
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
-            scales: {
-              x: {
-                display: false,
-              },
-              y: {
-                display: false,
-              },
-            },
-          }}
-        />
-      }
-      style={{ '--cui-card-cap-bg': '#3b5998' }}
-      values={[
-        { title: 'friends', value: '89K' },
-        { title: 'feeds', value: '459' },
-      ]}
-    />
-  </CCol>
-  <CCol xs={6}>
-    <CWidgetStatsD
-      className="mb-3"
-      icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
-      chart={
-        <CChartLine
-          className="position-absolute w-100 h-100"
-          data={{
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-              {
-                backgroundColor: 'rgba(255,255,255,.1)',
-                borderColor: 'rgba(255,255,255,.55)',
-                pointHoverBackgroundColor: '#fff',
-                borderWidth: 2,
-                data: [1, 13, 9, 17, 34, 41, 38],
-                fill: true,
-              },
-            ],
-          }}
-          options={{
-            elements: {
-              line: {
-                tension: 0.4,
-              },
-              point: {
-                radius: 0,
-                hitRadius: 10,
-                hoverRadius: 4,
-                hoverBorderWidth: 3,
-              },
-            },
-            maintainAspectRatio: false,
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
-            scales: {
-              x: {
-                display: false,
-              },
-              y: {
-                display: false,
-              },
-            },
-          }}
-        />
-      }
-      style={{ '--cui-card-cap-bg': '#00aced' }}
-      values={[
-        { title: 'folowers', value: '973K' },
-        { title: 'tweets', value: '1.792' },
-      ]}
-    />
-  </CCol>
-</CRow>
-```
-
-## CWidgetStatsE
-
-<Example>
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsE
-        className="mb-3"
-        chart={
-          <CChartBar
-            className="mx-auto"
-            style={{ height: '40px', width: '80px' }}
-            data={{
-              labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-              datasets: [
-                {
-                  backgroundColor: '#321fdb',
-                  borderColor: 'transparent',
-                  borderWidth: 1,
-                  data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
-                },
-              ],
-            }}
-            options={{
-              maintainAspectRatio: false,
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              scales: {
-                x: {
-                  display: false,
-                },
-                y: {
-                  display: false,
-                },
-              },
-            }}
-          />
-        }
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsE
-        className="mb-3"
-        chart={
-          <CChartLine
-            className="mx-auto"
-            style={{ height: '40px', width: '80px' }}
-            data={{
-              labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-              datasets: [
-                {
-                  backgroundColor: 'transparent',
-                  borderColor: '#321fdb',
-                  borderWidth: 2,
-                  data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
-                },
-              ],
-            }}
-            options={{
-              maintainAspectRatio: false,
-              elements: {
-                line: {
-                  tension: 0.4,
-                },
-                point: {
-                  radius: 0,
-                },
-              },
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              scales: {
-                x: {
-                  display: false,
-                },
-                y: {
-                  display: false,
-                },
-              },
-            }}
-          />
-        }
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-  </CRow>
-</Example>
-
-```jsx
-<CRow>
-  <CCol xs={6}>
-    <CWidgetStatsE
-      className="mb-3"
-      chart={
-        <CChartBar
-          className="mx-auto"
-          style={{ height: '40px', width: '80px' }}
-          data={{
-            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-            datasets: [
-              {
-                backgroundColor: '#321fdb',
-                borderColor: 'transparent',
-                borderWidth: 1,
-                data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
-              },
-            ],
-          }}
-          options={{
-            maintainAspectRatio: false,
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
-            scales: {
-              x: {
-                display: false,
-              },
-              y: {
-                display: false,
-              },
-            },
-          }}
-        />
-      }
-      title="Widget title"
-      value="89.9%"
-    />
-  </CCol>
-  <CCol xs={6}>
-    <CWidgetStatsE
-      className="mb-3"
-      chart={
-        <CChartLine
-          className="mx-auto"
-          style={{ height: '40px', width: '80px' }}
-          data={{
-            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
-            datasets: [
-              {
-                backgroundColor: 'transparent',
-                borderColor: '#321fdb',
-                borderWidth: 2,
-                data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
-              },
-            ],
-          }}
-          options={{
-            maintainAspectRatio: false,
-            elements: {
-              line: {
-                tension: 0.4,
-              },
-              point: {
-                radius: 0,
-              },
-            },
-            plugins: {
-              legend: {
-                display: false,
-              },
-            },
-            scales: {
-              x: {
-                display: false,
-              },
-              y: {
-                display: false,
-              },
-            },
-          }}
-        />
-      }
-      title="Widget title"
-      value="89.9%"
-    />
-  </CCol>
-</CRow>
-```
-
-## CWidgetStatsF
-
-<Example>
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="primary"
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="warning"
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="primary"
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        padding={false}
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="warning"
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        padding={false}
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="primary"
-        footer={
-          <CLink
-            className="font-weight-bold font-xs text-body-secondary"
-            href="https://coreui.io/"
-            rel="noopener norefferer"
-            target="_blank"
-          >
-            View more
-            <CIcon icon={cilArrowRight} className="float-end" width={16} />
-          </CLink>
-        }
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="warning"
-        footer={
-          <CLink
-            className="font-weight-bold font-xs text-body-secondary"
-            href="https://coreui.io/"
-            rel="noopener norefferer"
-            target="_blank"
-          >
-            View more
-            <CIcon icon={cilArrowRight} className="float-end" width={16} />
-          </CLink>
-        }
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        title="Widget title"
-        value="89.9%"
-      />
-    </CCol>
-  </CRow>
-</Example>
-
-```jsx
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="primary"
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        title="Widget title"
-        value="89.9%"/>
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="warning"
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        title="Widget title"
-        value="89.9%"/>
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="primary"
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        padding={false}
-        title="Widget title"
-        value="89.9%"/>
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="warning"
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        padding={false}
-        title="Widget title"
-        value="89.9%"/>
-    </CCol>
-  </CRow>
-    <CRow>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="primary"
-        footer={
-          <CLink
-            className="font-weight-bold font-xs text-body-secondary"
-            href="https://coreui.io/"
-            rel="noopener norefferer"
-            target="_blank"
-          >
-            View more
-            <CIcon icon={cilArrowRight} className="float-end" width={16} />
-          </CLink>
-        }
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        title="Widget title"
-        value="89.9%"/>
-    </CCol>
-    <CCol xs={6}>
-      <CWidgetStatsF
-        className="mb-3"
-        color="warning"
-        footer={
-          <CLink
-            className="font-weight-bold font-xs text-body-secondary"
-            href="https://coreui.io/"
-            rel="noopener norefferer"
-            target="_blank"
-          >
-            View more
-            <CIcon icon={cilArrowRight} className="float-end" width={16} />
-          </CLink>
-        }
-        icon={<CIcon icon={cilChartPie} height={24} />}
-        title="Widget title"
-        value="89.9%"/>
-    </CCol>
-  </CRow>
-```
-
-## API
-
-### CWidgetStatsA
-
-`markdown:CWidgetStatsA.api.mdx`
-
-### CWidgetStatsB
-
-`markdown:CWidgetStatsB.api.mdx`
-
-### CWidgetStatsC
-
-`markdown:CWidgetStatsC.api.mdx`
-
-### CWidgetStatsD
-
-`markdown:CWidgetStatsD.api.mdx`
-
-### CWidgetStatsE
-
-`markdown:CWidgetStatsE.api.mdx`
-
-### CWidgetStatsF
-
-`markdown:CWidgetStatsF.api.mdx`
diff --git a/packages/docs/content/components/widgets/api.mdx b/packages/docs/content/components/widgets/api.mdx
new file mode 100644
index 00000000..86fe7fa8
--- /dev/null
+++ b/packages/docs/content/components/widgets/api.mdx
@@ -0,0 +1,38 @@
+---
+title: React Widgets Component API
+name: Widgets API
+description: Explore the API reference for the React Widget and discover how to effectively utilize its props for customization.
+route: /components/widgets/
+---
+
+import CWidgetStatsAAPI from '../../api/CWidgetStatsA.api.mdx'
+import CWidgetStatsBAPI from '../../api/CWidgetStatsB.api.mdx'
+import CWidgetStatsCAPI from '../../api/CWidgetStatsC.api.mdx'
+import CWidgetStatsDAPI from '../../api/CWidgetStatsD.api.mdx'
+import CWidgetStatsEAPI from '../../api/CWidgetStatsE.api.mdx'
+import CWidgetStatsFAPI from '../../api/CWidgetStatsF.api.mdx'
+
+## CWidgetStatsA
+
+<CWidgetStatsAAPI />
+
+## CWidgetStatsB
+
+<CWidgetStatsBAPI />
+
+## CWidgetStatsC
+
+<CWidgetStatsCAPI />
+
+## CWidgetStatsD
+
+<CWidgetStatsDAPI />
+
+## CWidgetStatsE
+
+<CWidgetStatsEAPI />
+
+## CWidgetStatsF
+
+<CWidgetStatsFAPI />
+
diff --git a/packages/docs/content/components/widgets/examples/WidgetStatsAExample.tsx b/packages/docs/content/components/widgets/examples/WidgetStatsAExample.tsx
new file mode 100644
index 00000000..0951c346
--- /dev/null
+++ b/packages/docs/content/components/widgets/examples/WidgetStatsAExample.tsx
@@ -0,0 +1,365 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartBar, CChartLine } from '@coreui/react-chartjs'
+
+import {
+  CCol,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CRow,
+  CWidgetStatsA,
+} from '@coreui/react'
+
+export const WidgetStatsAExample = () => {
+  return (
+    <CRow>
+      <CCol sm={6}>
+        <CWidgetStatsA
+          className="mb-4"
+          color="primary"
+          value={
+            <>
+              $9.000{' '}
+              <span className="fs-6 fw-normal">
+                (40.9% <CIcon icon={cilArrowTop} />)
+              </span>
+            </>
+          }
+          title="Widget title"
+          action={
+            <CDropdown alignment="end">
+              <CDropdownToggle color="transparent" caret={false} className="p-0">
+                <CIcon icon={cilOptions} className="text-white" />
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
+            <CChartLine
+              className="mt-3 mx-3"
+              style={{ height: '70px' }}
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    label: 'My First dataset',
+                    backgroundColor: 'transparent',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    pointBackgroundColor: '#5856d6',
+                    data: [65, 59, 84, 84, 51, 55, 40],
+                  },
+                ],
+              }}
+              options={{
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                maintainAspectRatio: false,
+                scales: {
+                  x: {
+                    border: {
+                      display: false,
+                    },
+                    grid: {
+                      display: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                  y: {
+                    min: 30,
+                    max: 89,
+                    display: false,
+                    grid: {
+                      display: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                },
+                elements: {
+                  line: {
+                    borderWidth: 1,
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 4,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                  },
+                },
+              }}
+            />
+          }
+        />
+      </CCol>
+      <CCol sm={6}>
+        <CWidgetStatsA
+          className="mb-4"
+          color="info"
+          value={
+            <>
+              $9.000{' '}
+              <span className="fs-6 fw-normal">
+                (40.9% <CIcon icon={cilArrowTop} />)
+              </span>
+            </>
+          }
+          title="Widget title"
+          action={
+            <CDropdown alignment="end">
+              <CDropdownToggle color="transparent" caret={false} className="p-0">
+                <CIcon icon={cilOptions} className="text-white" />
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
+            <CChartLine
+              className="mt-3 mx-3"
+              style={{ height: '70px' }}
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    label: 'My First dataset',
+                    backgroundColor: 'transparent',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    pointBackgroundColor: '#39f',
+                    data: [1, 18, 9, 17, 34, 22, 11],
+                  },
+                ],
+              }}
+              options={{
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                maintainAspectRatio: false,
+                scales: {
+                  x: {
+                    border: {
+                      display: false,
+                    },
+                    grid: {
+                      display: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                  y: {
+                    min: -9,
+                    max: 39,
+                    display: false,
+                    grid: {
+                      display: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                },
+                elements: {
+                  line: {
+                    borderWidth: 1,
+                  },
+                  point: {
+                    radius: 4,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                  },
+                },
+              }}
+            />
+          }
+        />
+      </CCol>
+      <CCol sm={6}>
+        <CWidgetStatsA
+          className="mb-4"
+          color="warning"
+          value={
+            <>
+              $9.000{' '}
+              <span className="fs-6 fw-normal">
+                (40.9% <CIcon icon={cilArrowTop} />)
+              </span>
+            </>
+          }
+          title="Widget title"
+          action={
+            <CDropdown alignment="end">
+              <CDropdownToggle color="transparent" caret={false} className="p-0">
+                <CIcon icon={cilOptions} className="text-white" />
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
+            <CChartLine
+              className="mt-3"
+              style={{ height: '70px' }}
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    label: 'My First dataset',
+                    backgroundColor: 'rgba(255,255,255,.2)',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    data: [78, 81, 80, 45, 34, 12, 40],
+                    fill: true,
+                  },
+                ],
+              }}
+              options={{
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                maintainAspectRatio: false,
+                scales: {
+                  x: {
+                    display: false,
+                  },
+                  y: {
+                    display: false,
+                  },
+                },
+                elements: {
+                  line: {
+                    borderWidth: 2,
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 0,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                  },
+                },
+              }}
+            />
+          }
+        />
+      </CCol>
+      <CCol sm={6}>
+        <CWidgetStatsA
+          className="mb-4"
+          color="danger"
+          value={
+            <>
+              $9.000{' '}
+              <span className="fs-6 fw-normal">
+                (40.9% <CIcon icon={cilArrowTop} />)
+              </span>
+            </>
+          }
+          title="Widget title"
+          action={
+            <CDropdown alignment="end">
+              <CDropdownToggle color="transparent" caret={false} className="p-0">
+                <CIcon icon={cilOptions} className="text-white" />
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
+            <CChartBar
+              className="mt-3 mx-3"
+              style={{ height: '70px' }}
+              data={{
+                labels: [
+                  'January',
+                  'February',
+                  'March',
+                  'April',
+                  'May',
+                  'June',
+                  'July',
+                  'August',
+                  'September',
+                  'October',
+                  'November',
+                  'December',
+                  'January',
+                  'February',
+                  'March',
+                  'April',
+                ],
+                datasets: [
+                  {
+                    label: 'My First dataset',
+                    backgroundColor: 'rgba(255,255,255,.2)',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
+                    barPercentage: 0.6,
+                  },
+                ],
+              }}
+              options={{
+                maintainAspectRatio: false,
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                scales: {
+                  x: {
+                    grid: {
+                      display: false,
+                      drawTicks: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                  y: {
+                    border: {
+                      display: false,
+                    },
+                    grid: {
+                      display: false,
+                      drawTicks: false,
+                    },
+                    ticks: {
+                      display: false,
+                    },
+                  },
+                },
+              }}
+            />
+          }
+        />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/widgets/examples/WidgetStatsBExample.tsx b/packages/docs/content/components/widgets/examples/WidgetStatsBExample.tsx
new file mode 100644
index 00000000..49670d71
--- /dev/null
+++ b/packages/docs/content/components/widgets/examples/WidgetStatsBExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CCol, CRow, CWidgetStatsB } from '@coreui/react'
+
+export const WidgetStatsBExample = () => {
+  return (
+    <CRow>
+      <CCol xs={6}>
+        <CWidgetStatsB
+          className="mb-3"
+          progress={{ color: 'success', value: 75 }}
+          text="Widget helper text"
+          title="Widget title"
+          value="89.9%"
+        />
+      </CCol>
+      <CCol xs={6}>
+        <CWidgetStatsB
+          className="mb-3"
+          color="primary"
+          inverse
+          progress={{ value: 75 }}
+          text="Widget helper text"
+          title="Widget title"
+          value="89.9%"
+        />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/widgets/examples/WidgetStatsCExample.tsx b/packages/docs/content/components/widgets/examples/WidgetStatsCExample.tsx
new file mode 100644
index 00000000..4c348828
--- /dev/null
+++ b/packages/docs/content/components/widgets/examples/WidgetStatsCExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilChartPie } from '@coreui/icons'
+import { CCol, CRow, CWidgetStatsC } from '@coreui/react'
+
+export const WidgetStatsCExample = () => {
+  return (
+    <CRow>
+      <CCol xs={6}>
+        <CWidgetStatsC
+          className="mb-3"
+          icon={<CIcon icon={cilChartPie} height={36} />}
+          progress={{ color: 'success', value: 75 }}
+          title="Widget title"
+          value="89.9%"
+        />
+      </CCol>
+      <CCol xs={6}>
+        <CWidgetStatsC
+          className="mb-3"
+          icon={<CIcon icon={cilChartPie} height={36} />}
+          color="primary"
+          inverse
+          progress={{ value: 75 }}
+          title="Widget title"
+          value="89.9%"
+        />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/widgets/examples/WidgetStatsDExample.jsx b/packages/docs/content/components/widgets/examples/WidgetStatsDExample.jsx
new file mode 100644
index 00000000..c96072e4
--- /dev/null
+++ b/packages/docs/content/components/widgets/examples/WidgetStatsDExample.jsx
@@ -0,0 +1,125 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cibFacebook, cibTwitter } from '@coreui/icons'
+import { CChartLine } from '@coreui/react-chartjs'
+
+import { CCol, CRow, CWidgetStatsD } from '@coreui/react'
+
+export const WidgetStatsDExample = () => {
+  return (
+    <CRow>
+      <CCol xs={6}>
+        <CWidgetStatsD
+          className="mb-3"
+          icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
+          chart={
+            <CChartLine
+              className="position-absolute w-100 h-100"
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    backgroundColor: 'rgba(255,255,255,.1)',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    pointHoverBackgroundColor: '#fff',
+                    borderWidth: 2,
+                    data: [65, 59, 84, 84, 51, 55, 40],
+                    fill: true,
+                  },
+                ],
+              }}
+              options={{
+                elements: {
+                  line: {
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 0,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                    hoverBorderWidth: 3,
+                  },
+                },
+                maintainAspectRatio: false,
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                scales: {
+                  x: {
+                    display: false,
+                  },
+                  y: {
+                    display: false,
+                  },
+                },
+              }}
+            />
+          }
+          style={{ '--cui-card-cap-bg': '#3b5998' }}
+          values={[
+            { title: 'friends', value: '89K' },
+            { title: 'feeds', value: '459' },
+          ]}
+        />
+      </CCol>
+      <CCol xs={6}>
+        <CWidgetStatsD
+          className="mb-3"
+          icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
+          chart={
+            <CChartLine
+              className="position-absolute w-100 h-100"
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    backgroundColor: 'rgba(255,255,255,.1)',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    pointHoverBackgroundColor: '#fff',
+                    borderWidth: 2,
+                    data: [1, 13, 9, 17, 34, 41, 38],
+                    fill: true,
+                  },
+                ],
+              }}
+              options={{
+                elements: {
+                  line: {
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 0,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                    hoverBorderWidth: 3,
+                  },
+                },
+                maintainAspectRatio: false,
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                scales: {
+                  x: {
+                    display: false,
+                  },
+                  y: {
+                    display: false,
+                  },
+                },
+              }}
+            />
+          }
+          style={{ '--cui-card-cap-bg': '#00aced' }}
+          values={[
+            { title: 'folowers', value: '973K' },
+            { title: 'tweets', value: '1.792' },
+          ]}
+        />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/widgets/examples/WidgetStatsDExample.tsx b/packages/docs/content/components/widgets/examples/WidgetStatsDExample.tsx
new file mode 100644
index 00000000..f4b830e7
--- /dev/null
+++ b/packages/docs/content/components/widgets/examples/WidgetStatsDExample.tsx
@@ -0,0 +1,125 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cibFacebook, cibTwitter } from '@coreui/icons'
+import { CChartLine } from '@coreui/react-chartjs'
+
+import { CCol, CRow, CWidgetStatsD } from '@coreui/react'
+
+export const WidgetStatsDExample = () => {
+  return (
+    <CRow>
+      <CCol xs={6}>
+        <CWidgetStatsD
+          className="mb-3"
+          icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
+          chart={
+            <CChartLine
+              className="position-absolute w-100 h-100"
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    backgroundColor: 'rgba(255,255,255,.1)',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    pointHoverBackgroundColor: '#fff',
+                    borderWidth: 2,
+                    data: [65, 59, 84, 84, 51, 55, 40],
+                    fill: true,
+                  },
+                ],
+              }}
+              options={{
+                elements: {
+                  line: {
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 0,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                    hoverBorderWidth: 3,
+                  },
+                },
+                maintainAspectRatio: false,
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                scales: {
+                  x: {
+                    display: false,
+                  },
+                  y: {
+                    display: false,
+                  },
+                },
+              }}
+            />
+          }
+          style={{ '--cui-card-cap-bg': '#3b5998' } as React.CSSProperties}
+          values={[
+            { title: 'friends', value: '89K' },
+            { title: 'feeds', value: '459' },
+          ]}
+        />
+      </CCol>
+      <CCol xs={6}>
+        <CWidgetStatsD
+          className="mb-3"
+          icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
+          chart={
+            <CChartLine
+              className="position-absolute w-100 h-100"
+              data={{
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                  {
+                    backgroundColor: 'rgba(255,255,255,.1)',
+                    borderColor: 'rgba(255,255,255,.55)',
+                    pointHoverBackgroundColor: '#fff',
+                    borderWidth: 2,
+                    data: [1, 13, 9, 17, 34, 41, 38],
+                    fill: true,
+                  },
+                ],
+              }}
+              options={{
+                elements: {
+                  line: {
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 0,
+                    hitRadius: 10,
+                    hoverRadius: 4,
+                    hoverBorderWidth: 3,
+                  },
+                },
+                maintainAspectRatio: false,
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                scales: {
+                  x: {
+                    display: false,
+                  },
+                  y: {
+                    display: false,
+                  },
+                },
+              }}
+            />
+          }
+          style={{ '--cui-card-cap-bg': '#00aced' } as React.CSSProperties}
+          values={[
+            { title: 'folowers', value: '973K' },
+            { title: 'tweets', value: '1.792' },
+          ]}
+        />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/widgets/examples/WidgetStatsEExample.tsx b/packages/docs/content/components/widgets/examples/WidgetStatsEExample.tsx
new file mode 100644
index 00000000..ed10695c
--- /dev/null
+++ b/packages/docs/content/components/widgets/examples/WidgetStatsEExample.tsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import { CChartBar, CChartLine } from '@coreui/react-chartjs'
+
+import { CCol, CRow, CWidgetStatsE } from '@coreui/react'
+
+export const WidgetStatsEExample = () => {
+  return (
+    <CRow>
+      <CCol xs={6}>
+        <CWidgetStatsE
+          className="mb-3"
+          chart={
+            <CChartBar
+              className="mx-auto"
+              style={{ height: '40px', width: '80px' }}
+              data={{
+                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
+                datasets: [
+                  {
+                    backgroundColor: '#321fdb',
+                    borderColor: 'transparent',
+                    borderWidth: 1,
+                    data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                  },
+                ],
+              }}
+              options={{
+                maintainAspectRatio: false,
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                scales: {
+                  x: {
+                    display: false,
+                  },
+                  y: {
+                    display: false,
+                  },
+                },
+              }}
+            />
+          }
+          title="Widget title"
+          value="89.9%"
+        />
+      </CCol>
+      <CCol xs={6}>
+        <CWidgetStatsE
+          className="mb-3"
+          chart={
+            <CChartLine
+              className="mx-auto"
+              style={{ height: '40px', width: '80px' }}
+              data={{
+                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
+                datasets: [
+                  {
+                    backgroundColor: 'transparent',
+                    borderColor: '#321fdb',
+                    borderWidth: 2,
+                    data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                  },
+                ],
+              }}
+              options={{
+                maintainAspectRatio: false,
+                elements: {
+                  line: {
+                    tension: 0.4,
+                  },
+                  point: {
+                    radius: 0,
+                  },
+                },
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                },
+                scales: {
+                  x: {
+                    display: false,
+                  },
+                  y: {
+                    display: false,
+                  },
+                },
+              }}
+            />
+          }
+          title="Widget title"
+          value="89.9%"
+        />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/components/widgets/examples/WidgetStatsFExample.tsx b/packages/docs/content/components/widgets/examples/WidgetStatsFExample.tsx
new file mode 100644
index 00000000..8d0eaebd
--- /dev/null
+++ b/packages/docs/content/components/widgets/examples/WidgetStatsFExample.tsx
@@ -0,0 +1,95 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowRight, cilChartPie } from '@coreui/icons'
+import { CCol, CLink, CRow, CWidgetStatsF } from '@coreui/react'
+
+export const WidgetStatsFExample = () => {
+  return (
+    <>
+      <CRow>
+        <CCol xs={6}>
+          <CWidgetStatsF
+            className="mb-3"
+            color="primary"
+            icon={<CIcon icon={cilChartPie} height={24} />}
+            title="Widget title"
+            value="89.9%"
+          />
+        </CCol>
+        <CCol xs={6}>
+          <CWidgetStatsF
+            className="mb-3"
+            color="warning"
+            icon={<CIcon icon={cilChartPie} height={24} />}
+            title="Widget title"
+            value="89.9%"
+          />
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol xs={6}>
+          <CWidgetStatsF
+            className="mb-3"
+            color="primary"
+            icon={<CIcon icon={cilChartPie} height={24} />}
+            padding={false}
+            title="Widget title"
+            value="89.9%"
+          />
+        </CCol>
+        <CCol xs={6}>
+          <CWidgetStatsF
+            className="mb-3"
+            color="warning"
+            icon={<CIcon icon={cilChartPie} height={24} />}
+            padding={false}
+            title="Widget title"
+            value="89.9%"
+          />
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol xs={6}>
+          <CWidgetStatsF
+            className="mb-3"
+            color="primary"
+            footer={
+              <CLink
+                className="font-weight-bold font-xs text-body-secondary"
+                href="https://coreui.io/"
+                rel="noopener norefferer"
+                target="_blank"
+              >
+                View more
+                <CIcon icon={cilArrowRight} className="float-end" width={16} />
+              </CLink>
+            }
+            icon={<CIcon icon={cilChartPie} height={24} />}
+            title="Widget title"
+            value="89.9%"
+          />
+        </CCol>
+        <CCol xs={6}>
+          <CWidgetStatsF
+            className="mb-3"
+            color="warning"
+            footer={
+              <CLink
+                className="font-weight-bold font-xs text-body-secondary"
+                href="https://coreui.io/"
+                rel="noopener norefferer"
+                target="_blank"
+              >
+                View more
+                <CIcon icon={cilArrowRight} className="float-end" width={16} />
+              </CLink>
+            }
+            icon={<CIcon icon={cilChartPie} height={24} />}
+            title="Widget title"
+            value="89.9%"
+          />
+        </CCol>
+      </CRow>
+    </>
+  )
+}
diff --git a/packages/docs/content/components/widgets/index.mdx b/packages/docs/content/components/widgets/index.mdx
new file mode 100644
index 00000000..aacc63c9
--- /dev/null
+++ b/packages/docs/content/components/widgets/index.mdx
@@ -0,0 +1,41 @@
+---
+title: React Widgets
+name: Widgets
+description: React widget components give information about the app statistics.
+route: /components/widgets/
+---
+
+## CWidgetStatsA
+
+<ExampleSnippet component="WidgetStatsAExample" componentName="React Widgets" />
+
+## CWidgetStatsB
+
+<ExampleSnippet component="WidgetStatsBExample" componentName="React Widgets" />
+
+## CWidgetStatsC
+
+<ExampleSnippet component="WidgetStatsCExample" componentName="React Widgets" />
+
+## CWidgetStatsD
+
+<ExampleSnippet component="WidgetStatsDExample" componentName="React Widgets" />
+
+## CWidgetStatsE
+
+<ExampleSnippet component="WidgetStatsEExample" componentName="React Widgets" />
+
+## CWidgetStatsF
+
+<ExampleSnippet component="WidgetStatsFExample" componentName="React Widgets" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CWidgetStatsA /&gt;](./api/#cwidgetstatsa)
+- [&lt;CWidgetStatsB /&gt;](./api/#cwidgetstatsb)
+- [&lt;CWidgetStatsC /&gt;](./api/#cwidgetstatsc)
+- [&lt;CWidgetStatsD /&gt;](./api/#cwidgetstatsd)
+- [&lt;CWidgetStatsE /&gt;](./api/#cwidgetstatse)
+- [&lt;CWidgetStatsF /&gt;](./api/#cwidgetstatsf)
diff --git a/packages/docs/content/customize/options.mdx b/packages/docs/content/customize/options.mdx
index 4e1e6b3e..1e54ce92 100644
--- a/packages/docs/content/customize/options.mdx
+++ b/packages/docs/content/customize/options.mdx
@@ -1,4 +1,5 @@
 ---
+title: Options
 name: Options
 description: Quickly customize CoreUI for React with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
 menu: Customize
diff --git a/packages/docs/content/customize/sass.mdx b/packages/docs/content/customize/sass.mdx
index 60ee53fa..be8f4596 100644
--- a/packages/docs/content/customize/sass.mdx
+++ b/packages/docs/content/customize/sass.mdx
@@ -37,6 +37,23 @@ your-project/
 
 In your `custom.scss`, you'll import CoreUI's source Sass files. You have two options: include all of CoreUI, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
 
+<Callout color="info" type="dartSassModules" />
+
+```scss
+@use "sass:map";
+@use "@coreui/coreui/scss/variables" as *;
+
+$custom-colors: (
+  "custom-color": #900
+);
+
+$theme-colors: map.merge($theme-colors, $custom-colors);
+
+@use "@coreui/coreui/scss/coreui";
+```
+
+<Callout color="warning" type="dartSassDeprecations" />
+
 ```scss
 // Custom.scss
 // Option A: Include all of CoreUI
@@ -92,6 +109,17 @@ Variable overrides must come after our functions are imported, but before the re
 
 Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling CoreUI for Bootstrap via npm:
 
+<Callout color="info" type="dartSassModules" />
+
+```scss
+@use "@coreui/coreui/scss/coreui" with (
+  $body-bg: #000,
+  $body-color: #111
+)
+```
+
+<Callout color="warning" type="dartSassDeprecations" />
+
 ```scss
 // Required
 @import "../node_modules/@coreui/coreui/scss/functions";
@@ -142,6 +170,23 @@ $theme-colors: (
 
 Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.
 
+<Callout color="info" type="dartSassModules" />
+
+```scss
+@use "sass:map";
+@use "@coreui/coreui/scss/variables" as *;
+
+$custom-colors: (
+  "custom-color": #900
+);
+
+$theme-colors: map.merge($theme-colors, $custom-colors);
+
+@use "@coreui/coreui/scss/coreui";
+```
+
+<Callout color="warning" type="dartSassDeprecations" />
+
 ```scss
 // Create your own map
 $custom-colors: (
@@ -156,6 +201,21 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 
 To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options:
 
+<Callout color="info" type="dartSassModules" />
+
+```scss
+@use "sass:map";
+@use "@coreui/coreui/scss/variables" as *;
+@use "@coreui/coreui/scss/maps" as *;
+
+$theme-colors: map-remove($theme-colors, "info", "light", "dark");
+$theme-colors-border-subtle: map.remove($theme-colors-border-subtle, "info", "light", "dark");
+
+@use "@coreui/coreui/scss/coreui";
+```
+
+<Callout color="warning" type="dartSassDeprecations" />
+
 ```scss
 // Required
 @import "../node_modules/@coreui/coreui/scss/functions";
@@ -213,6 +273,8 @@ You can lighten or darken colors with CoreUI's `tint-color()` and `shade-color()
 In practice, you'd call the function and pass in the color and weight parameters.
 
 ```scss
+@use "@coreui/coreui/scss/functions/color" as *;
+
 .custom-element {
   color: tint-color($primary, 10%);
 }
@@ -231,6 +293,8 @@ An additional function we include in CoreUI for Bootstrap is the color contrast
 For example, to generate color swatches from our `$theme-colors` map:
 
 ```scss
+@use "@coreui/coreui/scss/functions/color-contrast" as *;
+
 @each $color, $value in $theme-colors {
   .swatch-#{$color} {
     color: color-contrast($value);
@@ -241,6 +305,8 @@ For example, to generate color swatches from our `$theme-colors` map:
 It can also be used for one-off contrast needs:
 
 ```scss
+@use "@coreui/coreui/scss/functions/color-contrast" as *;
+
 .custom-element {
   color: color-contrast(#000); // returns `color: #fff`
 }
@@ -249,6 +315,8 @@ It can also be used for one-off contrast needs:
 You can also specify a base color with our color map functions:
 
 ```scss
+@use "@coreui/coreui/scss/functions/color-contrast" as *;
+
 .custom-element {
   color: color-contrast($dark); // returns `color: #fff`
 }
@@ -265,6 +333,8 @@ We use the `add` and `subtract` functions to wrap the CSS `calc` function. The p
 Example where the calc is valid:
 
 ```scss
+@use "@coreui/coreui/scss/functions/math" as *;
+
 $border-radius: .25rem;
 $border-width: 1px;
 
@@ -282,6 +352,8 @@ $border-width: 1px;
 Example where the calc is invalid:
 
 ```scss
+@use "@coreui/coreui/scss/functions/math" as *;
+
 $border-radius: .25rem;
 $border-width: 0;
 
@@ -304,15 +376,12 @@ Our `@coreui/coreui/scss/mixins/` directory has a ton of mixins that power parts
 
 A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
 
-```scss
-@mixin color-scheme($name) {
-  @media (prefers-color-scheme: #{$name}) {
-    @content;
-  }
-}
-```
+
+<ScssDocs file="mixins/_color-scheme.scss" capture="mixin-color-scheme" />
 
 ```scss
+@use "@coreui/coreui/scss/mixins/color-scheme" as *;
+
 .custom-element {
   @include color-scheme(dark) {
     // Insert dark mode styles here
diff --git a/packages/docs/content/forms/checkbox.mdx b/packages/docs/content/forms/checkbox.mdx
deleted file mode 100644
index 70b87ac8..00000000
--- a/packages/docs/content/forms/checkbox.mdx
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: React Checkbox Components
-name: Checkbox
-description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
-menu: Forms
-route: /forms/checkbox
-other_frameworks: checkbox
----
-
-import { useEffect, useRef } from 'react'
-import {
-  CButton,
-  CFormCheck,
-} from '@coreui/react/src/index'
-
-## Approach
-
-Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
-
-## Checkboxes
-
-```jsx preview
-<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
-<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
-```
-
-### Indeterminate
-
-Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
-
-```jsx preview
-<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
-```
-
-### Disabled
-
-Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
-
-```jsx preview
-<CFormCheck label="Disabled checkbox" disabled/>
-<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
-```
-
-## Default (stacked)
-
-By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
-
-```jsx preview
-<CFormCheck id="defaultCheck1" label="Default checkbox"/>
-<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled/>
-```
-
-## Inline
-
-Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
-
-```jsx preview
-<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
-<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
-<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
-```
-
-## Reverse 
-
-Put your checkboxes on the opposite side by adding `reverse` boolean property.
-
-```jsx preview
-<CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox"/>
-<CFormCheck reverse id="reverseCheckbox2" value="option2" label="Disabled reverse checkbox" disabled/>
-```
-
-## Without labels
-
-Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
-
-```jsx preview
-<CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>
-```
-
-## Checkbox toggle buttons
-
-Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
-
-```jsx preview
-<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle" />
-```
-
-```jsx preview
-<CFormCheck
-  button={{ color: 'primary' }}
-  id="btn-check-2"
-  autoComplete="off"
-  label="Checked"
-  defaultChecked
-/>
-```
-
-```jsx preview
-<CFormCheck
-  button={{ color: 'primary' }}
-  id="btn-check-3"
-  autoComplete="off"
-  label="Disabled"
-  disabled
-/>
-```
-
-### Outlined styles
-
-Different variants of button, such at the various outlined styles, are supported.
-
-```jsx preview
-<CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
-<CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-check-variables" />
-
-## API
-
-### CFormCheck
-
-`markdown:CFormCheck.api.mdx`
diff --git a/packages/docs/content/forms/checkbox/api.mdx b/packages/docs/content/forms/checkbox/api.mdx
new file mode 100644
index 00000000..aa2717d5
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Checkbox Component API
+name: Form Checkbox API
+description: Explore the API reference for the React Form Checkbox component and discover how to effectively utilize its props for customization.
+route: /forms/checkbox/
+---
+
+import CFormCheckAPI from '../../api/CFormCheck.api.mdx'
+
+## CFormCheck
+
+<CFormCheckAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/checkbox/bootstrap.mdx b/packages/docs/content/forms/checkbox/bootstrap.mdx
new file mode 100644
index 00000000..842bb911
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/bootstrap.mdx
@@ -0,0 +1,71 @@
+---
+title: React Bootstrap Checkbox Component
+name: Checkbox with Bootstrap Styling
+description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
+route: /forms/checkbox/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Checkbox component
+
+Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.
+
+### Basic example
+
+Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxExample" componentName="React Bootstrap Checkbox" />
+
+### Indeterminate state
+
+Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxIndeterminateExample" componentName="React Bootstrap Checkbox" />
+
+### Disabled state
+
+Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxDisabledExample" componentName="React Bootstrap Checkbox" />
+
+### Stacked layout (default)
+
+By default, multiple checkboxes stack vertically and are spaced evenly.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxStackedExample" componentName="React Bootstrap Checkbox" />
+
+### Inline checkboxes
+
+Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxInlineExample" componentName="React Bootstrap Checkbox" />
+
+### Reversed checkboxes
+
+Use the `reverse` prop to position the checkbox on the opposite side of the label.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxReverseExample" componentName="React Bootstrap Checkbox" />
+
+### Without labels
+
+If omitting a label, remember to include `aria-label` for accessibility compliance.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />
+
+## Checkbox toggle buttons
+
+Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />
+
+### Outlined toggle styles
+
+Use outlined button variants for a lighter, bordered appearance.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of all the available props and configuration options.
+
+- [&lt;CFormCheck /&gt;](../api/#cformcheck)
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx
new file mode 100644
index 00000000..4c987a09
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxDisabledExample = () => {
+  return (
+    <>
+      <CFormCheck label="Disabled checkbox" disabled />
+      <CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx
new file mode 100644
index 00000000..db1592f2
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxExample = () => {
+  return (
+    <>
+      <CFormCheck id="flexCheckDefault" label="Default checkbox" />
+      <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx
new file mode 100644
index 00000000..f0010d6f
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxIndeterminateExample = () => {
+  return <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx
new file mode 100644
index 00000000..31aeaef8
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxInlineExample = () => {
+  return (
+    <>
+      <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
+      <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
+      <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx
new file mode 100644
index 00000000..687e89a3
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxReverseExample = () => {
+  return (
+    <>
+      <CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox" />
+      <CFormCheck
+        reverse
+        id="reverseCheckbox2"
+        value="option2"
+        label="Disabled reverse checkbox"
+        disabled
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx
new file mode 100644
index 00000000..086a1dd5
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxStackedExample = () => {
+  return (
+    <>
+      <CFormCheck id="defaultCheck1" label="Default checkbox" />
+      <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx
new file mode 100644
index 00000000..dbe8fd64
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxToggleButtonsExample = () => {
+  return (
+    <>
+      <CFormCheck
+        button={{ color: 'primary' }}
+        id="btn-check"
+        autoComplete="off"
+        label="Single toggle"
+      />
+      <CFormCheck
+        button={{ color: 'primary' }}
+        id="btn-check-2"
+        autoComplete="off"
+        label="Checked"
+        defaultChecked
+      />
+      <CFormCheck
+        button={{ color: 'primary' }}
+        id="btn-check-3"
+        autoComplete="off"
+        label="Disabled"
+        disabled
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx
new file mode 100644
index 00000000..47d3f3a8
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxToggleButtonsOutlinedStylesExample = () => {
+  return (
+    <>
+      <CFormCheck
+        button={{ color: 'primary', variant: 'outline' }}
+        id="btn-check-outlined"
+        autoComplete="off"
+        label="Single toggle"
+      />
+      <CFormCheck
+        button={{ color: 'secondary', variant: 'outline' }}
+        id="btn-check-2-outlined"
+        autoComplete="off"
+        label="Checked"
+        defaultChecked
+      />
+      <CFormCheck
+        button={{ color: 'success', variant: 'outline' }}
+        id="btn-check-3-outlined"
+        autoComplete="off"
+        label="Checked success"
+        defaultChecked
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx
new file mode 100644
index 00000000..0a9c5610
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const CheckboxWithoutLabelsExample = () => {
+  return <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
+}
diff --git a/packages/docs/content/forms/checkbox/index.mdx b/packages/docs/content/forms/checkbox/index.mdx
new file mode 100644
index 00000000..fd8db1ae
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/index.mdx
@@ -0,0 +1,69 @@
+---
+title: React Checkbox Components
+name: Checkbox
+description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
+route: /forms/checkbox/
+other_frameworks: checkbox
+---
+
+## Approach
+
+Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
+
+## Checkboxes
+
+<ExampleSnippet component="CheckboxExample" componentName="React Form Checkbox" />
+
+### Indeterminate
+
+Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
+
+<ExampleSnippet component="CheckboxIndeterminateExample" componentName="React Form Checkbox" />
+
+### Disabled
+
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
+
+<ExampleSnippet component="CheckboxDisabledExample" componentName="React Form Checkbox" />
+
+## Default (stacked)
+
+By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
+
+<ExampleSnippet component="CheckboxStackedExample" componentName="React Form Checkbox" />
+
+## Inline
+
+Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
+
+<ExampleSnippet component="CheckboxInlineExample" componentName="React Form Checkbox" />
+
+## Reverse 
+
+Put your checkboxes on the opposite side by adding `reverse` boolean property.
+
+<ExampleSnippet component="CheckboxReverseExample" componentName="React Form Checkbox" />
+
+## Without labels
+
+Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
+
+<ExampleSnippet component="CheckboxWithoutLabelsExample" componentName="React Form Checkbox" />
+
+## Checkbox toggle buttons
+
+Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
+
+<ExampleSnippet component="CheckboxToggleButtonsExample" componentName="React Form Checkbox" />
+
+### Outlined styles
+
+Different variants of button, such at the various outlined styles, are supported.
+
+<ExampleSnippet component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Form Checkbox" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CFormCheck /&gt;](./api/#cformcheck)
diff --git a/packages/docs/content/forms/checkbox/styling.mdx b/packages/docs/content/forms/checkbox/styling.mdx
new file mode 100644
index 00000000..f50492d7
--- /dev/null
+++ b/packages/docs/content/forms/checkbox/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Checkbox Component Styling
+name: Checkbox Styling
+description: Learn how to customize the React Checkbox component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/checkbox/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-check-variables" />
diff --git a/packages/docs/content/forms/checks-radios.mdx b/packages/docs/content/forms/checks-radios.mdx
index f9a7fc49..bb451d1c 100644
--- a/packages/docs/content/forms/checks-radios.mdx
+++ b/packages/docs/content/forms/checks-radios.mdx
@@ -14,7 +14,7 @@ import {
   CFormLabel,
   CFormSwitch,
   CFormText,
-} from '@coreui/react/src/index'
+} from '@coreui/react'
 
 ## Approach
 
diff --git a/packages/docs/content/forms/floating-labels.mdx b/packages/docs/content/forms/floating-labels.mdx
deleted file mode 100644
index 5b4470e1..00000000
--- a/packages/docs/content/forms/floating-labels.mdx
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: React Floating labels
-name: Floating labels
-description: React floating label component. Create beautifully simple form labels that float over your input fields.
-menu: Forms
-route: /forms/floating-labels
-other_frameworks: floating-labels
----
-
-import {
-  CButton,
-  CForm,
-  CFormFloating,
-  CFormInput,
-  CFormLabel,
-  CFormSelect,
-  CFormTextarea,
-  CCol,
-  CRow,
-} from '@coreui/react/src/index'
-
-## Example
-
-Use `floatingLabel` property on `<CFormInput>`, `<CFormSelect>` or `<CFormTextarea>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>`, `<CFormSelect>` and `<CFormTextarea>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element.
-
-```jsx preview
-<CFormInput type="email" id="floatingInput" floatingClassName="mb-3" floatingLabel="Email address" placeholder="name@example.com" />
-<CFormInput type="password" id="floatingPassword" floatingLabel="Password" placeholder="Password" />
-```
-
-You can create the same form control by wrapping a pair of `<CFormInput>` and `<CFormLabel>` elements in `<CFormFloating>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also, note that the `<CFormInput>` must come first so we can utilize a sibling selector (e.g., `~`).
-
-```jsx
-<CFormFloating className="mb-3">
-  <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
-  <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
-</CFormFloating>
-<CFormFloating>
-  <CFormInput type="password" id="floatingPassword" placeholder="Password" />
-  <CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
-</CFormFloating>
-```
-
-When there's a `value` already defined, `<CFormLabel>`s will automatically adjust to their floated position.
-
-```jsx preview
-<CFormInput
-  type="email"
-  id="floatingInputValue"
-  floatingLabel="Input with value"
-  placeholder="name@example.com"
-  defaultValue="test@example.com"
-/>
-```
-
-
-Form validation styles also work as expected.
-
-```jsx preview
-<CFormInput
-  type="email"
-  id="floatingInputValid"
-  floatingClassName="mb-3"
-  floatingLabel="Email addresss"
-  placeholder="name@example.com"
-  defaultValue="test@example.com"
-  valid
-/>
-<CFormInput
-  type="email"
-  id="floatingInputInvalid"
-  floatingLabel="Email addresss"
-  placeholder="name@example.com"
-  defaultValue="test@example.com"
-  invalid
-/>
-```
-
-## Textareas
-
-By default, `<CFormTextarea>`s will be the same height as `<CFormInput>`s.
-
-```jsx preview
-<CFormTextarea
-  id="floatingTextarea"
-  floatingLabel="Comments"
-  placeholder="Leave a comment here"
-></CFormTextarea>
-```
-
-To set a custom height on your `<CFormTextarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).
-
-```jsx preview
-<CFormTextarea
-  placeholder="Leave a comment here"
-  id="floatingTextarea2"
-  floatingLabel="Comments"
-  style={{ height: '100px' }}
-></CFormTextarea>
-```
-
-## Selects
-
-Other than `<CFormInput>`, floating labels are only available on `<CFormSelect>`s. They work in the same way, but unlike `<CFormInput>`s, they'll always show the `<CFormLabel>` in its floated state. **Selects with `size` and `multiple` are not supported.**
-
-```jsx preview
-<CFormSelect
-  id="floatingSelect"
-  floatingLabel="Works with selects"
-  aria-label="Floating label select example"
->
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3">Three</option>
-</CFormSelect>
-```
-
-## Layout
-
-When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.
-
-```jsx preview
-<CRow xs={{ gutter: 2 }}>
-  <CCol md>
-    <CFormInput
-      type="email"
-      id="floatingInputGrid"
-      floatingLabel="Email address"
-      placeholder="name@example.com"
-      defaultValue="email@example.com"
-    />
-  </CCol>
-  <CCol md>
-    <CFormSelect
-      id="floatingSelectGrid"
-      floatingLabel="Email address"
-      aria-label="Works with selects"
-    >
-      <option>Open this select menu</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-    </CFormSelect>
-  </CCol>
-</CRow>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-floating-variables" />
-
-## API
-
-### CFormFloating
-
-`markdown:CFormFloating.api.mdx`
diff --git a/packages/docs/content/forms/floating-labels/api.mdx b/packages/docs/content/forms/floating-labels/api.mdx
new file mode 100644
index 00000000..23ae298c
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Floating Labels Component API
+name: Form Floating Labels API
+description: Explore the API reference for the React Form Floating Labels component and discover how to effectively utilize its props for customization.
+route: /forms/floating-labels/
+---
+
+import CFormFloatingAPI from '../../api/CFormFloating.api.mdx'
+
+## CFormFloating
+
+<CFormFloatingAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/floating-labels/bootstrap.mdx b/packages/docs/content/forms/floating-labels/bootstrap.mdx
new file mode 100644
index 00000000..a3da110a
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/bootstrap.mdx
@@ -0,0 +1,72 @@
+---
+title: React Bootstrap Floating Labels Component
+name: Floating Labels with Bootstrap Styling
+description: Learn how to create clean and accessible floating form labels in React using CoreUI components styled with Bootstrap.
+route: /forms/floating-labels/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Floating Labels component
+
+Use CoreUI’s `<CFormFloating>`, `<CFormInput>`, `<CFormSelect>`, and `<CFormTextarea>` components with Bootstrap styling to create floating labels in React. Floating labels automatically animate above form fields when content is entered or focused.
+
+### Basic example
+
+Enable floating labels by setting the `floatingLabel` prop on supported form controls. A `placeholder` is required as the floating label effect relies on the `:placeholder-shown` pseudo-class.
+
+<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsExample" componentName="React Bootstrap Floating Labels" />
+
+### Using `<CFormFloating>`
+
+You can also wrap a `<CFormInput>` and `<CFormLabel>` pair inside a `<CFormFloating>` container. Make sure the input comes first to enable proper sibling selector behavior.
+
+```jsx
+<CFormFloating className="mb-3">
+  <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
+  <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
+</CFormFloating>
+<CFormFloating>
+  <CFormInput type="password" id="floatingPassword" placeholder="Password" />
+  <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
+</CFormFloating>
+```
+
+### Pre-filled values
+
+Floating labels adjust automatically when inputs have a preset value.
+
+<ExampleSnippet className="theme-bootstrap" component="FloatingLabels2Example" componentName="React Bootstrap Floating Labels" />
+
+### Validation support
+
+Floating labels integrate seamlessly with form validation styles.
+
+<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsValidationExample" componentName="React Bootstrap Floating Labels" />
+
+## Textareas
+
+Textareas styled with floating labels maintain the same height as inputs by default.
+
+<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsTextareaExample" componentName="React Bootstrap Floating Labels" />
+
+To change the height, set an explicit `height` via inline styles or custom CSS rather than using the `rows` attribute.
+
+<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsTextarea2Example" componentName="React Bootstrap Floating Labels" />
+
+## Select elements
+
+Floating labels also support `<CFormSelect>`. The label always appears in the floated state. **Note:** This is not compatible with `size` or `multiple`.
+
+<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsSelectExample" componentName="React Bootstrap Floating Labels" />
+
+## Grid layout support
+
+Use floating labels within the CoreUI Bootstrap grid system by nesting inputs inside column classes.
+
+<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsLayoutExample" componentName="React Bootstrap Floating Labels" />
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of all available props and configuration options.
+
+- [&lt;CFormFloating /&gt;](../api/#cformfloating)
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx
new file mode 100644
index 00000000..6f2b6ce2
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FloatingLabels2Example = () => {
+  return (
+    <CFormInput
+      type="email"
+      id="floatingInputValue"
+      floatingLabel="Input with value"
+      placeholder="name@example.com"
+      defaultValue="test@example.com"
+    />
+  )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx
new file mode 100644
index 00000000..3c6a9533
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FloatingLabelsExample = () => {
+  return (
+    <>
+      <CFormInput
+        type="email"
+        id="floatingInput"
+        floatingClassName="mb-3"
+        floatingLabel="Email address"
+        placeholder="name@example.com"
+      />
+      <CFormInput
+        type="password"
+        id="floatingPassword"
+        floatingLabel="Password"
+        placeholder="Password"
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx
new file mode 100644
index 00000000..b7baba01
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { CCol, CFormInput, CFormSelect, CRow } from '@coreui/react'
+
+export const FloatingLabelsLayoutExample = () => {
+  return (
+    <CRow xs={{ gutter: 2 }}>
+      <CCol md>
+        <CFormInput
+          type="email"
+          id="floatingInputGrid"
+          floatingLabel="Email address"
+          placeholder="name@example.com"
+          defaultValue="email@example.com"
+        />
+      </CCol>
+      <CCol md>
+        <CFormSelect
+          id="floatingSelectGrid"
+          floatingLabel="Email address"
+          aria-label="Works with selects"
+        >
+          <option>Open this select menu</option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx
new file mode 100644
index 00000000..a6286b7b
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FloatingLabelsSelectExample = () => {
+  return (
+    <CFormSelect
+      id="floatingSelect"
+      floatingLabel="Works with selects"
+      aria-label="Floating label select example"
+    >
+      <option>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </CFormSelect>
+  )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx
new file mode 100644
index 00000000..3fd18152
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormTextarea } from '@coreui/react'
+
+export const FloatingLabelsTextarea2Example = () => {
+  return (
+    <CFormTextarea
+      placeholder="Leave a comment here"
+      id="floatingTextarea2"
+      floatingLabel="Comments"
+      style={{ height: '100px' }}
+    ></CFormTextarea>
+  )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx
new file mode 100644
index 00000000..799dd31a
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CFormTextarea } from '@coreui/react'
+
+export const FloatingLabelsTextareaExample = () => {
+  return (
+    <CFormTextarea
+      id="floatingTextarea"
+      floatingLabel="Comments"
+      placeholder="Leave a comment here"
+    ></CFormTextarea>
+  )
+}
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx
new file mode 100644
index 00000000..bead6d13
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FloatingLabelsValidationExample = () => {
+  return (
+    <>
+      <CFormInput
+        type="email"
+        id="floatingInputValid"
+        floatingClassName="mb-3"
+        floatingLabel="Email addresss"
+        placeholder="name@example.com"
+        defaultValue="test@example.com"
+        valid
+      />
+      <CFormInput
+        type="email"
+        id="floatingInputInvalid"
+        floatingLabel="Email addresss"
+        placeholder="name@example.com"
+        defaultValue="test@example.com"
+        invalid
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/floating-labels/index.mdx b/packages/docs/content/forms/floating-labels/index.mdx
new file mode 100644
index 00000000..9193c760
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/index.mdx
@@ -0,0 +1,63 @@
+---
+title: React Floating labels
+name: Floating labels
+description: React floating label component. Create beautifully simple form labels that float over your input fields.
+route: /forms/floating-labels/
+other_frameworks: floating-labels
+---
+
+## Example
+
+Use `floatingLabel` property on `<CFormInput>`, `<CFormSelect>` or `<CFormTextarea>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>`, `<CFormSelect>` and `<CFormTextarea>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element.
+
+<ExampleSnippet component="FloatingLabelsExample" componentName="React Form Floating Labels" />
+
+You can create the same form control by wrapping a pair of `<CFormInput>` and `<CFormLabel>` elements in `<CFormFloating>` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormInput>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also, note that the `<CFormInput>` must come first so we can utilize a sibling selector (e.g., `~`).
+
+```jsx
+<CFormFloating className="mb-3">
+  <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
+  <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
+</CFormFloating>
+<CFormFloating>
+  <CFormInput type="password" id="floatingPassword" placeholder="Password" />
+  <CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
+</CFormFloating>
+```
+
+When there's a `value` already defined, `<CFormLabel>`s will automatically adjust to their floated position.
+
+<ExampleSnippet component="FloatingLabels2Example" componentName="React Form Floating Labels" />
+
+
+Form validation styles also work as expected.
+
+<ExampleSnippet component="FloatingLabelsValidationExample" componentName="React Form Floating Labels" />
+
+## Textareas
+
+By default, `<CFormTextarea>`s will be the same height as `<CFormInput>`s.
+
+<ExampleSnippet component="FloatingLabelsTextareaExample" componentName="React Form Floating Labels" />
+
+To set a custom height on your `<CFormTextarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).
+
+<ExampleSnippet component="FloatingLabelsTextarea2Example" componentName="React Form Floating Labels" />
+
+## Selects
+
+Other than `<CFormInput>`, floating labels are only available on `<CFormSelect>`s. They work in the same way, but unlike `<CFormInput>`s, they'll always show the `<CFormLabel>` in its floated state. **Selects with `size` and `multiple` are not supported.**
+
+<ExampleSnippet component="FloatingLabelsSelectExample" componentName="React Form Floating Labels" />
+
+## Layout
+
+When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.
+
+<ExampleSnippet component="FloatingLabelsLayoutExample" componentName="React Form Floating Labels" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CFormFloating /&gt;](./api/#cformfloating)
diff --git a/packages/docs/content/forms/floating-labels/styling.mdx b/packages/docs/content/forms/floating-labels/styling.mdx
new file mode 100644
index 00000000..4446fe02
--- /dev/null
+++ b/packages/docs/content/forms/floating-labels/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Floating Labels Component Styling
+name: Floating Labels Styling
+description: Learn how to customize the React Floating Labels component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/floating-labels/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-floating-variables" />
diff --git a/packages/docs/content/forms/form-control.mdx b/packages/docs/content/forms/form-control.mdx
index f64fe0de..ff3b6500 100644
--- a/packages/docs/content/forms/form-control.mdx
+++ b/packages/docs/content/forms/form-control.mdx
@@ -14,7 +14,7 @@ import {
   CFormTextarea,
   CCol,
   CRow
-} from '@coreui/react/src/index'
+} from '@coreui/react'
 
 ## Example
 
diff --git a/packages/docs/content/forms/input-group.mdx b/packages/docs/content/forms/input-group.mdx
deleted file mode 100644
index e9a7bb83..00000000
--- a/packages/docs/content/forms/input-group.mdx
+++ /dev/null
@@ -1,356 +0,0 @@
----
-title: React Input Group Component
-name: Input group
-description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
-menu: Forms
-route: /forms/input-group
-other_frameworks: input-group
----
-
-import {
-  CButton,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CForm,
-  CFormInput,
-  CFormCheck,
-  CFormLabel,
-  CFormSelect,
-  CFormTextarea,
-  CInputGroup,
-  CInputGroupText,
-  CCol,
-  CRow,
-} from '@coreui/react/src/index'
-
-## Basic example
-
-Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<CFormLabel>`s outside the input group.
-
-```jsx preview
-<CInputGroup className="mb-3">
-  <CInputGroupText id="basic-addon1">@</CInputGroupText>
-  <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
-  <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
-</CInputGroup>
-
-<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
-<CInputGroup className="mb-3">
-  <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
-  <CFormInput id="basic-url" aria-describedby="basic-addon3"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CInputGroupText>$</CInputGroupText>
-  <CFormInput aria-label="Amount (to the nearest dollar)"/>
-  <CInputGroupText>.00</CInputGroupText>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CFormInput placeholder="Username" aria-label="Username"/>
-  <CInputGroupText>@</CInputGroupText>
-  <CFormInput placeholder="Server" aria-label="Server"/>
-</CInputGroup>
-
-<CInputGroup>
-  <CInputGroupText>With textarea</CInputGroupText>
-  <CFormTextarea aria-label="With textarea"></CFormTextarea>
-</CInputGroup>
-```
-
-## Wrapping
-
-Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
-
-```jsx preview
-<CInputGroup className="flex-nowrap">
-  <CInputGroupText id="addon-wrapping">@</CInputGroupText>
-  <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
-</CInputGroup>
-```
-
-## Sizing
-
-Add the relative form sizing classes to the `<CInputGroup>` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
-
-**Sizing on the individual input group elements isn't supported.**
-
-```jsx preview
-<CInputGroup size="sm" className="mb-3">
-  <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
-  <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
-  <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
-</CInputGroup>
-
-<CInputGroup size="lg">
-  <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
-  <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
-</CInputGroup>
-```
-
-## Checkboxes and radios
-
-Place any checkbox or radio option within an input group's addon instead of text.
-
-```jsx preview
-<CInputGroup className="mb-3">
-  <CInputGroupText>
-    <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
-  </CInputGroupText>
-  <CFormInput aria-label="Text input with checkbox"/>
-</CInputGroup>
-
-<CInputGroup>
-  <CInputGroupText>
-    <CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
-  </CInputGroupText>
-  <CFormInput aria-label="Text input with radio button"/>
-</CInputGroup>
-```
-
-## Multiple inputs
-
-While multiple `<CFormInput>`s are supported visually, validation styles are only available for input groups with a single `<CFormInput>`.
-
-```jsx preview
-<CInputGroup>
-  <CInputGroupText>First and last name</CInputGroupText>
-  <CFormInput aria-label="First name" />
-  <CFormInput aria-label="Last name" />
-</CInputGroup>
-```
-
-## Multiple addons
-
-Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
-
-```jsx preview
-<CInputGroup className="mb-3">
-  <CInputGroupText>$</CInputGroupText>
-  <CInputGroupText>0.00</CInputGroupText>
-  <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
-</CInputGroup>
-
-<CInputGroup>
-  <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
-  <CInputGroupText>$</CInputGroupText>
-  <CInputGroupText>0.00</CInputGroupText>
-</CInputGroup>
-```
-
-## Button addons
-
-```jsx preview
-<CInputGroup className="mb-3">
-  <CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
-  <CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
-  <CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CButton type="button" color="secondary" variant="outline">Button</CButton>
-  <CButton type="button" color="secondary" variant="outline">Button</CButton>
-  <CFormInput placeholder="" aria-label="Example text with two button addons"/>
-</CInputGroup>
-
-<CInputGroup>
-  <CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
-  <CButton type="button" color="secondary" variant="outline">Button</CButton>
-  <CButton type="button" color="secondary" variant="outline">Button</CButton>
-</CInputGroup>
-```
-
-## Buttons with dropdowns
-
-```jsx preview
-<CInputGroup className="mb-3">
-  <CDropdown variant="input-group">
-    <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-  <CFormInput aria-label="Text input with dropdown button"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CFormInput aria-label="Text input with dropdown button"/>
-  <CDropdown alignment="end" variant="input-group">
-    <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-</CInputGroup>
-
-<CInputGroup>
-  <CDropdown variant="input-group">
-    <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-  <CFormInput aria-label="Text input with 2 dropdown buttons"/>
-  <CDropdown alignment="end" variant="input-group">
-    <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-</CInputGroup>
-```
-
-## Segmented buttons
-
-```jsx preview
-<CInputGroup className="mb-3">
-  <CDropdown variant="input-group">
-    <CButton type="button" color="secondary" variant="outline">Action</CButton>
-    <CDropdownToggle color="secondary" variant="outline" split/>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-  <CFormInput aria-label="Text input with segmented dropdown button"/>
-</CInputGroup>
-
-<CInputGroup>
-  <CFormInput aria-label="Text input with segmented dropdown button"/>
-  <CDropdown alignment="end" variant="input-group">
-    <CButton type="button" color="secondary" variant="outline">Action</CButton>
-    <CDropdownToggle color="secondary" variant="outline" split/>
-    <CDropdownMenu>
-      <CDropdownItem href="#">Action</CDropdownItem>
-      <CDropdownItem href="#">Another action</CDropdownItem>
-      <CDropdownItem href="#">Something else here</CDropdownItem>
-      <CDropdownDivider/>
-      <CDropdownItem href="#">Separated link</CDropdownItem>
-    </CDropdownMenu>
-  </CDropdown>
-</CInputGroup>
-```
-
-## Custom forms
-
-Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
-
-### Custom select
-
-```jsx preview
-<CInputGroup className="mb-3">
-  <CInputGroupText as="label" htmlFor="inputGroupSelect01">Options</CInputGroupText>
-  <CFormSelect id="inputGroupSelect01">
-    <option>Choose...</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </CFormSelect>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CFormSelect id="inputGroupSelect02">
-    <option>Choose...</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </CFormSelect>
-  <CInputGroupText as="label" htmlFor="inputGroupSelect02">Options</CInputGroupText>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CButton type="button" color="secondary" variant="outline">Button</CButton>
-  <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
-    <option>Choose...</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </CFormSelect>
-</CInputGroup>
-
-<CInputGroup>
-  <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
-    <option>Choose...</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </CFormSelect>
-  <CButton type="button" color="secondary" variant="outline">Button</CButton>
-</CInputGroup>
-```
-
-### Custom file input
-
-```jsx preview
-<CInputGroup className="mb-3">
-  <CInputGroupText as="label" htmlFor="inputGroupFile01">Upload</CInputGroupText>
-  <CFormInput type="file" id="inputGroupFile01"/>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CFormInput type="file" id="inputGroupFile02"/>
-  <CInputGroupText as="label" htmlFor="inputGroupFile02">Upload</CInputGroupText>
-</CInputGroup>
-
-<CInputGroup className="mb-3">
-  <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
-  <CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
-</CInputGroup>
-
-<CInputGroup>
-  <CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
-  <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
-</CInputGroup>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="input-group-variables" />
-
-## API
-
-### CInputGroup
-
-`markdown:CInputGroup.api.mdx`
-
-### CInputGroupText
-
-`markdown:CInputGroupText.api.mdx`
diff --git a/packages/docs/content/forms/input-group/api.mdx b/packages/docs/content/forms/input-group/api.mdx
new file mode 100644
index 00000000..64cc01bb
--- /dev/null
+++ b/packages/docs/content/forms/input-group/api.mdx
@@ -0,0 +1,17 @@
+---
+title: React Form Input Group Component API
+name: Form Input Group API
+description: Explore the API reference for the React Form Input Group component and discover how to effectively utilize its props for customization.
+route: /forms/input-group/
+---
+
+import CInputGroupAPI from '../../api/CInputGroup.api.mdx'
+import CInputGroupTextAPI from '../../api/CInputGroupText.api.mdx'
+
+## CInputGroup
+
+<CInputGroupAPI />
+
+## CInputGroupText
+
+<CInputGroupTextAPI />
diff --git a/packages/docs/content/forms/input-group/bootstrap.mdx b/packages/docs/content/forms/input-group/bootstrap.mdx
new file mode 100644
index 00000000..ef626c5f
--- /dev/null
+++ b/packages/docs/content/forms/input-group/bootstrap.mdx
@@ -0,0 +1,88 @@
+---
+title: React Bootstrap Input Group Component
+name: Input Group with Bootstrap Styling
+description: Learn how to extend CoreUI’s React input fields with Bootstrap-styled input groups—add text, buttons, selects, or custom file inputs seamlessly.
+route: /forms/input-group/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Input Group component
+
+Use CoreUI’s `<CInputGroup>` components styled with Bootstrap to enhance form inputs by prepending or appending text, buttons, selects, and more—perfect for building rich form UIs.
+
+### Basic usage
+
+Add text or buttons on either side of the input using `<CInputGroupText>` or `<CButton>`.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupExample" componentName="React Bootstrap Form Input Group" />
+
+## Wrapping content
+
+Input groups use `flex-wrap` by default, which allows wrapping when needed—especially useful for validation messages or long inputs.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupWrappingExample" componentName="React Bootstrap Form Input Group" />
+
+To prevent wrapping, add `.flex-nowrap`.
+
+## Input group sizing
+
+Change size by applying `size="sm"` or `size="lg"` to `<CInputGroup>`. All inner elements will automatically adjust.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupSizingExample" componentName="React Bootstrap Form Input Group" />
+
+> 📌 Note: Do not apply size classes to individual input elements inside the group.
+
+## Checkboxes and radio buttons
+
+Include checkboxes or radios inside your input group to align them with text fields or buttons.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupCheckboxesAndRadiosExample" componentName="React Bootstrap Form Input Group" />
+
+## Multiple inputs
+
+You can group multiple inputs side by side using a single `<CInputGroup>`. Useful for username + domain, ranges, etc.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupMultipleInputsExample" componentName="React Bootstrap Form Input Group" />
+
+## Multiple addons
+
+You can add multiple `<CInputGroupText>` elements before or after the input, or combine them with checkboxes or buttons.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupMultipleAddonsExample" componentName="React Bootstrap Form Input Group" />
+
+## Input group with buttons
+
+Add buttons inside the input group to combine text entry with actions.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupButtonAddonsExample" componentName="React Bootstrap Form Input Group" />
+
+## Buttons with dropdowns
+
+Group dropdown buttons together with your inputs using `<CDropdown>` components.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupButtonsWithDropdownsExample" componentName="React Bootstrap Form Input Group" />
+
+## Segmented buttons
+
+You can also combine a primary button with a split dropdown inside the input group.
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupSegmentedButtonsExample" componentName="React Bootstrap Form Input Group" />
+
+## Custom form inputs
+
+CoreUI supports enhanced input groups with custom selects and file inputs. Default browser styles aren’t supported in this layout.
+
+### Select
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupCustomSelectExample" componentName="React Bootstrap Form Input Group" />
+
+### File upload
+
+<ExampleSnippet className="theme-bootstrap" component="InputGroupCustomFileInputExample" componentName="React Bootstrap Form Input Group" />
+
+## API reference
+
+Check out the API documentation for full details on available props.
+
+- [&lt;CInputGroup /&gt;](../api/#cinputgroup)
+- [&lt;CInputGroupText /&gt;](../api/#cinputgrouptext)
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx
new file mode 100644
index 00000000..a2ad05ee
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { CButton, CFormInput, CInputGroup } from '@coreui/react'
+
+export const InputGroupButtonAddonsExample = () => {
+  return (
+    <>
+      <CInputGroup className="mb-3">
+        <CButton type="button" color="secondary" variant="outline" id="button-addon1">
+          Button
+        </CButton>
+        <CFormInput
+          placeholder=""
+          aria-label="Example text with button addon"
+          aria-describedby="button-addon1"
+        />
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CFormInput
+          placeholder="Recipient's username"
+          aria-label="Recipient's username"
+          aria-describedby="button-addon2"
+        />
+        <CButton type="button" color="secondary" variant="outline" id="button-addon2">
+          Button
+        </CButton>
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CButton type="button" color="secondary" variant="outline">
+          Button
+        </CButton>
+        <CButton type="button" color="secondary" variant="outline">
+          Button
+        </CButton>
+        <CFormInput placeholder="" aria-label="Example text with two button addons" />
+      </CInputGroup>
+
+      <CInputGroup>
+        <CFormInput
+          placeholder="Recipient's username"
+          aria-label="Recipient's username with two button addons"
+        />
+        <CButton type="button" color="secondary" variant="outline">
+          Button
+        </CButton>
+        <CButton type="button" color="secondary" variant="outline">
+          Button
+        </CButton>
+      </CInputGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx
new file mode 100644
index 00000000..e31b638c
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CFormInput,
+  CInputGroup,
+} from '@coreui/react'
+
+export const InputGroupButtonsWithDropdownsExample = () => {
+  return (
+    <>
+      <CInputGroup className="mb-3">
+        <CDropdown variant="input-group">
+          <CDropdownToggle color="secondary" variant="outline">
+            Dropdown
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+        <CFormInput aria-label="Text input with dropdown button" />
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CFormInput aria-label="Text input with dropdown button" />
+        <CDropdown alignment="end" variant="input-group">
+          <CDropdownToggle color="secondary" variant="outline">
+            Dropdown
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+      </CInputGroup>
+
+      <CInputGroup>
+        <CDropdown variant="input-group">
+          <CDropdownToggle color="secondary" variant="outline">
+            Dropdown
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+        <CFormInput aria-label="Text input with 2 dropdown buttons" />
+        <CDropdown alignment="end" variant="input-group">
+          <CDropdownToggle color="secondary" variant="outline">
+            Dropdown
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+      </CInputGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx
new file mode 100644
index 00000000..7c211fbd
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormCheck, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupCheckboxesAndRadiosExample = () => {
+  return (
+    <>
+      <CInputGroup className="mb-3">
+        <CInputGroupText>
+          <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input" />
+        </CInputGroupText>
+        <CFormInput aria-label="Text input with checkbox" />
+      </CInputGroup>
+
+      <CInputGroup>
+        <CInputGroupText>
+          <CFormCheck type="radio" value="" aria-label="Radio button for following text input" />
+        </CInputGroupText>
+        <CFormInput aria-label="Text input with radio button" />
+      </CInputGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx
new file mode 100644
index 00000000..00a51012
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { CButton, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupCustomFileInputExample = () => {
+  return (
+    <>
+      <CInputGroup className="mb-3">
+        <CInputGroupText as="label" htmlFor="inputGroupFile01">
+          Upload
+        </CInputGroupText>
+        <CFormInput type="file" id="inputGroupFile01" />
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CFormInput type="file" id="inputGroupFile02" />
+        <CInputGroupText as="label" htmlFor="inputGroupFile02">
+          Upload
+        </CInputGroupText>
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">
+          Button
+        </CButton>
+        <CFormInput
+          type="file"
+          id="inputGroupFile03"
+          aria-describedby="inputGroupFileAddon03"
+          aria-label="Upload"
+        />
+      </CInputGroup>
+
+      <CInputGroup>
+        <CFormInput
+          type="file"
+          id="inputGroupFile04"
+          aria-describedby="inputGroupFileAddon04"
+          aria-label="Upload"
+        />
+        <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">
+          Button
+        </CButton>
+      </CInputGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx
new file mode 100644
index 00000000..9dcc9d9c
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { CButton, CFormSelect, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupCustomSelectExample = () => {
+  return (
+    <>
+      <CInputGroup className="mb-3">
+        <CInputGroupText as="label" htmlFor="inputGroupSelect01">
+          Options
+        </CInputGroupText>
+        <CFormSelect id="inputGroupSelect01">
+          <option>Choose...</option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+      </CInputGroup>
+      <CInputGroup className="mb-3">
+        <CFormSelect id="inputGroupSelect02">
+          <option>Choose...</option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+        <CInputGroupText as="label" htmlFor="inputGroupSelect02">
+          Options
+        </CInputGroupText>
+      </CInputGroup>
+      <CInputGroup className="mb-3">
+        <CButton type="button" color="secondary" variant="outline">
+          Button
+        </CButton>
+        <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
+          <option>Choose...</option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+      </CInputGroup>
+      <CInputGroup>
+        <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
+          <option>Choose...</option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+        <CButton type="button" color="secondary" variant="outline">
+          Button
+        </CButton>
+      </CInputGroup>
+      Custom file input# Upload
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupExample.tsx
new file mode 100644
index 00000000..6f66ac1c
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupExample.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { CFormInput, CFormLabel, CFormTextarea, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupExample = () => {
+  return (
+    <>
+      <CInputGroup className="mb-3">
+        <CInputGroupText id="basic-addon1">@</CInputGroupText>
+        <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CFormInput
+          placeholder="Recipient's username"
+          aria-label="Recipient's username"
+          aria-describedby="basic-addon2"
+        />
+        <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
+      </CInputGroup>
+
+      <CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
+      <CInputGroup className="mb-3">
+        <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
+        <CFormInput id="basic-url" aria-describedby="basic-addon3" />
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CInputGroupText>$</CInputGroupText>
+        <CFormInput aria-label="Amount (to the nearest dollar)" />
+        <CInputGroupText>.00</CInputGroupText>
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CFormInput placeholder="Username" aria-label="Username" />
+        <CInputGroupText>@</CInputGroupText>
+        <CFormInput placeholder="Server" aria-label="Server" />
+      </CInputGroup>
+
+      <CInputGroup>
+        <CInputGroupText>With textarea</CInputGroupText>
+        <CFormTextarea aria-label="With textarea"></CFormTextarea>
+      </CInputGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx
new file mode 100644
index 00000000..e16114be
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupMultipleAddonsExample = () => {
+  return (
+    <>
+      <CInputGroup className="mb-3">
+        <CInputGroupText>$</CInputGroupText>
+        <CInputGroupText>0.00</CInputGroupText>
+        <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
+      </CInputGroup>
+
+      <CInputGroup>
+        <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
+        <CInputGroupText>$</CInputGroupText>
+        <CInputGroupText>0.00</CInputGroupText>
+      </CInputGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx
new file mode 100644
index 00000000..3b5d6da1
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupMultipleInputsExample = () => {
+  return (
+    <CInputGroup>
+      <CInputGroupText>First and last name</CInputGroupText>
+      <CFormInput aria-label="First name" />
+      <CFormInput aria-label="Last name" />
+    </CInputGroup>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx
new file mode 100644
index 00000000..911fc5b0
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import {
+  CButton,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CFormInput,
+  CInputGroup,
+} from '@coreui/react'
+
+export const InputGroupSegmentedButtonsExample = () => {
+  return (
+    <>
+      <CInputGroup className="mb-3">
+        <CDropdown variant="input-group">
+          <CButton type="button" color="secondary" variant="outline">
+            Action
+          </CButton>
+          <CDropdownToggle color="secondary" variant="outline" split />
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+        <CFormInput aria-label="Text input with segmented dropdown button" />
+      </CInputGroup>
+
+      <CInputGroup>
+        <CFormInput aria-label="Text input with segmented dropdown button" />
+        <CDropdown alignment="end" variant="input-group">
+          <CButton type="button" color="secondary" variant="outline">
+            Action
+          </CButton>
+          <CDropdownToggle color="secondary" variant="outline" split />
+          <CDropdownMenu>
+            <CDropdownItem href="#">Action</CDropdownItem>
+            <CDropdownItem href="#">Another action</CDropdownItem>
+            <CDropdownItem href="#">Something else here</CDropdownItem>
+            <CDropdownDivider />
+            <CDropdownItem href="#">Separated link</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+      </CInputGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx
new file mode 100644
index 00000000..8e8155f2
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupSizingExample = () => {
+  return (
+    <>
+      <CInputGroup size="sm" className="mb-3">
+        <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
+        <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
+      </CInputGroup>
+
+      <CInputGroup className="mb-3">
+        <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
+        <CFormInput
+          aria-label="Sizing example input"
+          aria-describedby="inputGroup-sizing-default"
+        />
+      </CInputGroup>
+
+      <CInputGroup size="lg">
+        <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
+        <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
+      </CInputGroup>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx
new file mode 100644
index 00000000..aaf8fb77
--- /dev/null
+++ b/packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'
+
+export const InputGroupWrappingExample = () => {
+  return (
+    <CInputGroup className="flex-nowrap">
+      <CInputGroupText id="addon-wrapping">@</CInputGroupText>
+      <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
+    </CInputGroup>
+  )
+}
diff --git a/packages/docs/content/forms/input-group/index.mdx b/packages/docs/content/forms/input-group/index.mdx
new file mode 100644
index 00000000..c75bbeee
--- /dev/null
+++ b/packages/docs/content/forms/input-group/index.mdx
@@ -0,0 +1,76 @@
+---
+title: React Input Group Component
+name: Input group
+description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
+route: /forms/input-group/
+other_frameworks: input-group
+---
+
+## Basic example
+
+Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<CFormLabel>`s outside the input group.
+
+<ExampleSnippet component="InputGroupExample" componentName="React Form Input Group" />
+
+## Wrapping
+
+Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
+
+<ExampleSnippet component="InputGroupWrappingExample" componentName="React Form Input Group" />
+
+## Sizing
+
+Add the relative form sizing classes to the `<CInputGroup>` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+
+**Sizing on the individual input group elements isn't supported.**
+
+<ExampleSnippet component="InputGroupSizingExample" componentName="React Form Input Group" />
+
+## Checkboxes and radios
+
+Place any checkbox or radio option within an input group's addon instead of text.
+
+<ExampleSnippet component="InputGroupCheckboxesAndRadiosExample" componentName="React Form Input Group" />
+
+## Multiple inputs
+
+While multiple `<CFormInput>`s are supported visually, validation styles are only available for input groups with a single `<CFormInput>`.
+
+<ExampleSnippet component="InputGroupMultipleInputsExample" componentName="React Form Input Group" />
+
+## Multiple addons
+
+Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
+
+<ExampleSnippet component="InputGroupMultipleAddonsExample" componentName="React Form Input Group" />
+
+## Button addons
+
+<ExampleSnippet component="InputGroupButtonAddonsExample" componentName="React Form Input Group" />
+
+## Buttons with dropdowns
+
+<ExampleSnippet component="InputGroupButtonsWithDropdownsExample" componentName="React Form Input Group" />
+
+## Segmented buttons
+
+<ExampleSnippet component="InputGroupSegmentedButtonsExample" componentName="React Form Input Group" />
+
+## Custom forms
+
+Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
+
+### Custom select
+
+<ExampleSnippet component="InputGroupCustomSelectExample" componentName="React Form Input Group" />
+
+### Custom file input
+
+<ExampleSnippet component="InputGroupCustomFileInputExample" componentName="React Form Input Group" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CInputGroup /&gt;](./api/#cinputgroup)
+- [&lt;CInputGroupText /&gt;](./api/#cinputgrouptext)
diff --git a/packages/docs/content/forms/input-group/styling.mdx b/packages/docs/content/forms/input-group/styling.mdx
new file mode 100644
index 00000000..3d5ee0b1
--- /dev/null
+++ b/packages/docs/content/forms/input-group/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Input Group Component Styling
+name: Input Group Styling
+description: Learn how to customize the React Input Group component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/input-group/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="input-group-variables" />
diff --git a/packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx b/packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx
new file mode 100644
index 00000000..737e3ec2
--- /dev/null
+++ b/packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+import { IMaskMixin } from 'react-imask'
+
+export const InputMaskCreditCardExample = () => {
+  const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
+    <CFormInput {...props} ref={inputRef} />
+  ))
+  return <CFormInputWithMask mask="0000 0000 0000 0000" />
+}
diff --git a/packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx b/packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx
new file mode 100644
index 00000000..c3c2e8ec
--- /dev/null
+++ b/packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+import { IMaskMixin } from 'react-imask'
+
+export const InputMaskExample = () => {
+  const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
+    <CFormInput {...props} ref={inputRef} />
+  ))
+
+  return (
+    <CFormInputWithMask
+      mask={Date}
+      min={new Date(1990, 0, 1)}
+      max={new Date(2020, 0, 1)}
+      lazy={false}
+    />
+  )
+}
diff --git a/packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx b/packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx
new file mode 100644
index 00000000..473ef8fc
--- /dev/null
+++ b/packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+import { IMaskMixin } from 'react-imask'
+
+export const InputMaskPhoneExample = () => {
+  const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
+    <CFormInput {...props} ref={inputRef} />
+  ))
+  return <CFormInputWithMask mask="+{1}(000)000-00-00" />
+}
diff --git a/packages/docs/content/forms/input-mask.mdx b/packages/docs/content/forms/input-mask/index.mdx
similarity index 56%
rename from packages/docs/content/forms/input-mask.mdx
rename to packages/docs/content/forms/input-mask/index.mdx
index 5f005cd6..af0a900a 100644
--- a/packages/docs/content/forms/input-mask.mdx
+++ b/packages/docs/content/forms/input-mask/index.mdx
@@ -2,27 +2,20 @@
 title: React Input Mask
 name: Input mask
 description: React input masks allow you to regulate the format of data entered. You can enhance data entry accuracy by implementing react input masks for fields with consistent formatting requirements. This ensures that users input data correctly, such as accurately formatted phone numbers in a designated phone number field.
-menu: Forms
-route: /forms/input-mask
+route: /forms/input-mask/
 ---
 
-import { CFormInput } from '@coreui/react/src/index'
-
-import { IMaskMixin } from 'react-imask'
-
 ## Usage
 
 While CoreUI for React does not currently include a 'mask' feature, it can be enhanced by leveraging existing libraries like `react-imask` to extend the functionality of our components.
 
 To enable the extension of the `<CFormInput />` component, please ensure that you have installed `react-imask` first.
 
-```bash
+```bash tab={"label":"Npm"}
 npm install react-imask
 ```
 
-or
-
-```bash
+```bash tab={"label":"Yarn"}
 yarn add react-imask
 ```
 
@@ -43,37 +36,7 @@ const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
 
 Here is an example of a date mask for reference.
 
-export const MaskExample = () => {
-  const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
-    <CFormInput {...props} ref={inputRef} />
-  ))
-  return (
-    <CFormInputWithMask
-      mask={Date}
-      min={new Date(1990, 0, 1)}
-      max={new Date(2020, 0, 1)}
-      lazy={false}
-    />
-  )
-}
-
-<Example>
-  <MaskExample />
-</Example>
-
-```jsx
-const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
-  <CFormInput {...props} ref={inputRef} />
-))
-return (
-  <CFormInputWithMask
-    mask={Date}
-    min={new Date(1990, 0, 1)}
-    max={new Date(2020, 0, 1)}
-    lazy={false}
-  />
-)
-```
+<ExampleSnippet component="InputMaskExample" componentName="React Form Input Mask" />
 
 ## Example masks
 
@@ -83,44 +46,12 @@ Please take a moment to review some example masks you can use for reference. The
 
 This example react input mask for a phone number follows the format commonly used in North America. It consists of three groups of numbers: the area code enclosed in parentheses, followed by a space, and then the seven-digit phone number separated by a hyphen.
 
-export const PhoneMaskExample = () => {
-  const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
-    <CFormInput {...props} ref={inputRef} />
-  ))
-  return <CFormInputWithMask mask="+{1}(000)000-00-00" />
-}
-
-<Example>
-  <PhoneMaskExample />
-</Example>
-
-```jsx
-const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
-  <CFormInput {...props} ref={inputRef} />
-))
-return <CFormInputWithMask mask="+{1}(000)000-00-00" />
-```
+<ExampleSnippet component="InputMaskPhoneExample" componentName="React Form Input Mask" />
 
 ### Credit Card
 
 The provided code snippet demonstrates an implementation of an react input mask for a credit card number using the IMask library in JavaScript. The mask is set to "0000 0000 0000 0000", indicating that the input should consist of a 16-digit credit card number with spaces separating every four digits. The component renders an input field with the specified mask, allowing users to enter credit card numbers in the desired format.
 
-export const CreditCardMaskExample = () => {
-  const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
-    <CFormInput {...props} ref={inputRef} />
-  ))
-  return <CFormInputWithMask mask="0000 0000 0000 0000" />
-}
-
-<Example>
-  <CreditCardMaskExample />
-</Example>
-
-```jsx
-const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
-  <CFormInput {...props} ref={inputRef} />
-))
-return <CFormInputWithMask mask="0000 0000 0000 0000" />
-```
+<ExampleSnippet component="InputMaskCreditCardExample" componentName="React Form Input Mask" />
 
 For more information on how to use the input mask, you can refer to the following resource: https://imask.js.org/
diff --git a/packages/docs/content/forms/input.mdx b/packages/docs/content/forms/input.mdx
deleted file mode 100644
index 5dd1aaac..00000000
--- a/packages/docs/content/forms/input.mdx
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: React Form Input Component
-name: Form control
-description: React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
-menu: Forms
-route: /forms/input
-other_frameworks: input
----
-
-import {
-  CButton,
-  CForm,
-  CFormFloating,
-  CFormInput,
-  CFormLabel,
-  CFormText,
-  CFormTextarea,
-  CCol,
-  CRow,
-} from '@coreui/react/src/index'
-
-## Example
-
-```jsx preview
-<CForm>
-  <CFormInput
-    type="email"
-    id="exampleFormControlInput1"
-    label="Email address"
-    placeholder="name@example.com"
-    text="Must be 8-20 characters long."
-    aria-describedby="exampleFormControlInputHelpInline"
-  />
-</CForm>
-```
-
-If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
-
-```jsx
-<CForm>
-  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
-  <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com" aria-describedby="exampleFormControlInputHelpInline" />
-  <CFormText as="span" id="exampleFormControlInputHelpInline">
-    Must be 8-20 characters long.
-  </CFormText>
-</CForm>
-```
-
-## Sizing
-
-Set heights using `size` property like `size="lg"` and `size="sm"`.
-
-```jsx preview
-<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
-<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
-<CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>
-```
-
-## Disabled
-
-Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
-
-```jsx preview
-<CFormInput type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled/>
-<CFormInput type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readOnly/>
-```
-
-## Readonly
-
-Add the `readOnly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
-
-```jsx preview
-<CFormInput
-  type="text"
-  placeholder="Readonly input here..."
-  aria-label="readonly input example"
-  readOnly
-/>
-```
-
-## Readonly plain text
-
-If you want to have `<input readonly>` elements in your form styled as plain text, use the `plainText` boolean property to remove the default form field styling and preserve the correct margin and padding.
-
-```jsx preview
-<CRow className="mb-3">
-  <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">Email</CFormLabel>
-  <CCol sm={10}>
-    <CFormInput type="text" id="staticEmail" defaultValue="email@example.com" readOnly plainText/>
-  </CCol>
-</CRow>
-<CRow className="mb-3">
-  <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">Password</CFormLabel>
-  <CCol sm={10}>
-    <CFormInput type="password" id="inputPassword"/>
-  </CCol>
-</CRow>
-```
-
-```jsx preview
-<CForm className="row g-3">
-  <CCol xs="auto">
-    <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
-      Email
-    </CFormLabel>
-    <CFormInput type="text" id="staticEmail2" defaultValue="email@example.com" readOnly plainText />
-  </CCol>
-  <CCol xs="auto">
-    <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
-      Password
-    </CFormLabel>
-    <CFormInput type="password" id="inputPassword2" placeholder="Password" />
-  </CCol>
-  <CCol xs="auto">
-    <CButton color="primary" type="submit" className="mb-3">
-      Confirm identity
-    </CButton>
-  </CCol>
-</CForm>
-```
-
-## File input
-
-<Example>
-
-</Example>
-
-```jsx preview
-<div className="mb-3">
-  <CFormInput type="file" id="formFile" label="Default file input example" />
-</div>
-<div className="mb-3">
-  <CFormInput type="file" id="formFileMultiple" label="Multiple files input example" multiple />
-</div>
-<div className="mb-3">
-  <CFormInput type="file" id="formFileDisabled" label="Disabled file input example" disabled />
-</div>
-<div className="mb-3">
-  <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
-</div>
-<div>
-  <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
-</div>
-```
-
-## Color
-
-```jsx preview
-<CFormInput
-  type="color"
-  id="exampleColorInput"
-  defaultValue="#563d7c"
-  label="Color picker"
-  title="Choose your color"
-/>
-```
-
-## Customizing
-
-### SASS variables
-
-`$input-*` are shared across most of our form controls (and not buttons).
-
-<ScssDocs file="_variables.scss" capture="form-input-variables" />
-
-`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
-
-<ScssDocs file="_variables.scss" capture="form-label-variables" />
-
-<ScssDocs file="_variables.scss" capture="form-text-variables" />
-
-`$form-file-*` are for file input.
-
-<ScssDocs file="_variables.scss" capture="form-file-variables" />
-
-## API
-
-### CFormInput
-
-`markdown:CFormInput.api.mdx`
-
-### CFormFeedback
-
-`markdown:CFormFeedback.api.mdx`
-
-### CFormLabel
-
-`markdown:CFormLabel.api.mdx`
-
-### CFormText
-
-`markdown:CFormText.api.mdx`
diff --git a/packages/docs/content/forms/input/api.mdx b/packages/docs/content/forms/input/api.mdx
new file mode 100644
index 00000000..e8641ef8
--- /dev/null
+++ b/packages/docs/content/forms/input/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Form Input Component API
+name: Form Input API
+description: Explore the API reference for the React Form Input component and discover how to effectively utilize its props for customization.
+route: /forms/input/
+---
+
+import CFormInputAPI from '../../api/CFormInput.api.mdx'
+import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
+import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
+import CFormTextAPI from '../../api/CFormText.api.mdx'
+
+## CFormInput
+
+<CFormInputAPI />
+
+## CFormFeedback
+
+<CFormFeedbackAPI />
+
+## CFormLabel
+
+<CFormLabelAPI />
+
+## CFormText
+
+<CFormTextAPI />
diff --git a/packages/docs/content/forms/input/bootstrap.mdx b/packages/docs/content/forms/input/bootstrap.mdx
new file mode 100644
index 00000000..7e843886
--- /dev/null
+++ b/packages/docs/content/forms/input/bootstrap.mdx
@@ -0,0 +1,79 @@
+---
+title: React Bootstrap Form Input Component
+name: Form Input with Bootstrap Styling
+description: Learn how to use CoreUI’s React input components styled with Bootstrap to create accessible, styled, and responsive form inputs.
+route: /forms/input/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Form Input component
+
+Use CoreUI’s `<CFormInput>` and related components styled with Bootstrap to create customizable and accessible form inputs in React. Easily control size, disabled state, readonly fields, file uploads, color pickers, and more.
+
+### Basic usage
+
+<ExampleSnippet className="theme-bootstrap" component="FormInputExample" componentName="React Bootstrap Form Input" />
+
+To build more complex form controls with labels and help text, you can compose the form manually using CoreUI components:
+
+```jsx
+<CForm>
+  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
+  <CFormInput
+    type="email"
+    id="exampleFormControlInput1"
+    placeholder="name@example.com"
+    aria-describedby="exampleFormControlInputHelpInline"
+  />
+  <CFormText as="span" id="exampleFormControlInputHelpInline">
+    Must be 8–20 characters long.
+  </CFormText>
+</CForm>
+```
+
+## Input sizing
+
+Change input sizes using the `size` prop (`"sm"` or `"lg"`).
+
+<ExampleSnippet className="theme-bootstrap" component="FormInputSizingExample" componentName="React Bootstrap Form Input" />
+
+## Disabled inputs
+
+Add the `disabled` prop to visually disable the input and remove pointer events.
+
+<ExampleSnippet className="theme-bootstrap" component="FormInputDisabledExample" componentName="React Bootstrap Form Input" />
+
+## Read-only inputs
+
+Use the `readOnly` prop to prevent editing while maintaining focus and tab behavior.
+
+<ExampleSnippet className="theme-bootstrap" component="FormInputReadonlyExample" componentName="React Bootstrap Form Input" />
+
+## Plaintext read-only inputs
+
+Add `plainText` for inputs that appear as plain text but retain layout spacing.
+
+<ExampleSnippet className="theme-bootstrap" component="FormInputReadonlyPlainTextExample" componentName="React Bootstrap Form Input" />
+
+<ExampleSnippet className="theme-bootstrap" component="FormInputReadonlyPlainText2Example" componentName="React Bootstrap Form Input" />
+
+## File input
+
+Use CoreUI's `<CFormInput type="file" />` for custom-styled file upload fields.
+
+<ExampleSnippet className="theme-bootstrap" component="FormInputFileExample" componentName="React Bootstrap Form Input" />
+
+## Color input
+
+Color inputs are supported using `type="color"`.
+
+<ExampleSnippet className="theme-bootstrap" component="FormInputColorExample" componentName="React Bootstrap Form Input" />
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of all the props and configuration options.
+
+- [&lt;CFormInput /&gt;](../api/#cforminput)
+- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
+- [&lt;CFormLabel /&gt;](../api/#cformlabel)
+- [&lt;CFormText /&gt;](../api/#cformtext)
diff --git a/packages/docs/content/forms/input/examples/FormInputColorExample.tsx b/packages/docs/content/forms/input/examples/FormInputColorExample.tsx
new file mode 100644
index 00000000..5e483d9f
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputColorExample.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FormInputColorExample = () => {
+  return (
+    <CFormInput
+      type="color"
+      id="exampleColorInput"
+      defaultValue="#563d7c"
+      label="Color picker"
+      title="Choose your color"
+    />
+  )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx b/packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx
new file mode 100644
index 00000000..fa886255
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CForm, CFormInput } from '@coreui/react'
+
+export const FormInputCustomClassNamesExample = () => {
+  return (
+    <CForm>
+      <CFormInput
+        type="email"
+        id="exampleFormControlInput1"
+        label="Email address"
+        placeholder="name@example.com"
+        text="Must be 8-20 characters long."
+        aria-describedby="exampleFormControlInputHelpInline"
+        customClassNames={{
+          FORM_CONTROL: 'border-3',
+          FORM_LABEL: 'fw-semibold text-primary',
+          FORM_TEXT: 'text-success',
+        }}
+      />
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx b/packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx
new file mode 100644
index 00000000..825f977a
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FormInputDisabledExample = () => {
+  return (
+    <>
+      <CFormInput
+        type="text"
+        placeholder="Disabled input"
+        aria-label="Disabled input example"
+        disabled
+      />
+      <CFormInput
+        type="text"
+        placeholder="Disabled readonly input"
+        aria-label="Disabled input example"
+        disabled
+        readOnly
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputExample.tsx b/packages/docs/content/forms/input/examples/FormInputExample.tsx
new file mode 100644
index 00000000..f549a22e
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CForm, CFormInput } from '@coreui/react'
+
+export const FormInputExample = () => {
+  return (
+    <CForm>
+      <CFormInput
+        type="email"
+        id="exampleFormControlInput1"
+        label="Email address"
+        placeholder="name@example.com"
+        text="Must be 8-20 characters long."
+        aria-describedby="exampleFormControlInputHelpInline"
+      />
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputFileExample.tsx b/packages/docs/content/forms/input/examples/FormInputFileExample.tsx
new file mode 100644
index 00000000..19894a2f
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputFileExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FormInputFileExample = () => {
+  return (
+    <>
+      <div className="mb-3">
+        <CFormInput type="file" id="formFile" label="Default file input example" />
+      </div>
+      <div className="mb-3">
+        <CFormInput
+          type="file"
+          id="formFileMultiple"
+          label="Multiple files input example"
+          multiple
+        />
+      </div>
+      <div className="mb-3">
+        <CFormInput
+          type="file"
+          id="formFileDisabled"
+          label="Disabled file input example"
+          disabled
+        />
+      </div>
+      <div className="mb-3">
+        <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
+      </div>
+      <div>
+        <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
+      </div>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx b/packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx
new file mode 100644
index 00000000..beb0fa42
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const FormInputReadonlyExample = () => {
+  return (
+    <>
+      <CRow className="mb-3">
+        <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
+          Email
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput
+            type="text"
+            id="staticEmail"
+            defaultValue="email@example.com"
+            readOnly
+            plainText
+          />
+        </CCol>
+      </CRow>
+      <CRow className="mb-3">
+        <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
+          Password
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput type="password" id="inputPassword" />
+        </CCol>
+      </CRow>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx b/packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx
new file mode 100644
index 00000000..1f35597d
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { CButton, CCol, CForm, CFormInput, CFormLabel } from '@coreui/react'
+
+export const FormInputReadonlyPlainText2Example = () => {
+  return (
+    <CForm className="row g-3">
+      <CCol xs="auto">
+        <CFormLabel htmlFor="staticEmail3" className="visually-hidden">
+          Email
+        </CFormLabel>
+        <CFormInput
+          type="text"
+          id="staticEmail3"
+          defaultValue="email@example.com"
+          readOnly
+          plainText
+        />
+      </CCol>
+      <CCol xs="auto">
+        <CFormLabel htmlFor="inputPassword3" className="visually-hidden">
+          Password
+        </CFormLabel>
+        <CFormInput type="password" id="inputPassword3" placeholder="Password" />
+      </CCol>
+      <CCol xs="auto">
+        <CButton color="primary" type="submit" className="mb-3">
+          Confirm identity
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx b/packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx
new file mode 100644
index 00000000..03ecb43c
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const FormInputReadonlyPlainTextExample = () => {
+  return (
+    <>
+      <CRow className="mb-3">
+        <CFormLabel htmlFor="staticEmail2" className="col-sm-2 col-form-label">
+          Email
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput
+            type="text"
+            id="staticEmail2"
+            defaultValue="email@example.com"
+            readOnly
+            plainText
+          />
+        </CCol>
+      </CRow>
+      <CRow className="mb-3">
+        <CFormLabel htmlFor="inputPassword2" className="col-sm-2 col-form-label">
+          Password
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput type="password" id="inputPassword2" />
+        </CCol>
+      </CRow>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input/examples/FormInputSizingExample.tsx b/packages/docs/content/forms/input/examples/FormInputSizingExample.tsx
new file mode 100644
index 00000000..41233653
--- /dev/null
+++ b/packages/docs/content/forms/input/examples/FormInputSizingExample.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CFormInput } from '@coreui/react'
+
+export const FormInputSizingExample = () => {
+  return (
+    <>
+      <CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example" />
+      <CFormInput type="text" placeholder="Default input" aria-label="default input example" />
+      <CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example" />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/input/index.mdx b/packages/docs/content/forms/input/index.mdx
new file mode 100644
index 00000000..18593a11
--- /dev/null
+++ b/packages/docs/content/forms/input/index.mdx
@@ -0,0 +1,67 @@
+---
+title: React Form Input Component
+name: Form control
+description: React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
+route: /forms/input/
+other_frameworks: input
+---
+
+## Example
+
+<ExampleSnippet component="FormInputExample" componentName="React Form Input" />
+
+If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
+
+```jsx
+<CForm>
+  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
+  <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com" aria-describedby="exampleFormControlInputHelpInline" />
+  <CFormText as="span" id="exampleFormControlInputHelpInline">
+    Must be 8-20 characters long.
+  </CFormText>
+</CForm>
+```
+
+## Sizing
+
+Set heights using `size` property like `size="lg"` and `size="sm"`.
+
+<ExampleSnippet component="FormInputSizingExample" componentName="React Form Input" />
+
+## Disabled
+
+Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
+
+<ExampleSnippet component="FormInputDisabledExample" componentName="React Form Input" />
+
+## Readonly
+
+Add the `readOnly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
+
+<ExampleSnippet component="FormInputReadonlyExample" componentName="React Form Input" />
+
+## Readonly plain text
+
+If you want to have `<input readonly>` elements in your form styled as plain text, use the `plainText` boolean property to remove the default form field styling and preserve the correct margin and padding.
+
+<ExampleSnippet component="FormInputReadonlyPlainTextExample" componentName="React Form Input" />
+
+<ExampleSnippet component="FormInputReadonlyPlainText2Example" componentName="React Form Input" />
+
+## File input
+
+<ExampleSnippet component="FormInputFileExample" componentName="React Form Input" />
+
+## Color
+
+<ExampleSnippet component="FormInputColorExample" componentName="React Form Input" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CFormInput /&gt;](./api/#cforminput)
+- [&lt;CFormFeedback /&gt;](./api/#cformfeedback)
+- [&lt;CFormLabel /&gt;](./api/#cformlabel)
+- [&lt;CFormText /&gt;](./api/#cformtext)
+
diff --git a/packages/docs/content/forms/input/styling.mdx b/packages/docs/content/forms/input/styling.mdx
new file mode 100644
index 00000000..0cece944
--- /dev/null
+++ b/packages/docs/content/forms/input/styling.mdx
@@ -0,0 +1,22 @@
+---
+title: React Input Component Styling
+name: Input Styling
+description: Learn how to customize the React Input component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/input/
+---
+
+### SASS variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+<ScssDocs file="_variables.scss" capture="form-input-variables" />
+
+`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
+
+<ScssDocs file="_variables.scss" capture="form-label-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-text-variables" />
+
+`$form-file-*` are for file input.
+
+<ScssDocs file="_variables.scss" capture="form-file-variables" />
diff --git a/packages/docs/content/forms/layout.mdx b/packages/docs/content/forms/layout.mdx
deleted file mode 100644
index 91c6c988..00000000
--- a/packages/docs/content/forms/layout.mdx
+++ /dev/null
@@ -1,290 +0,0 @@
----
-title: React Form Layout
-name: Layout
-description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
-menu: Forms
-route: /forms/layout
----
-
-import { 
-  CButton,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CForm,
-  CFormCheck,
-  CFormInput,
-  CFormLabel,
-  CFormSelect,
-  CInputGroup,
-  CInputGroupText,
-  CCol,
-  CRow 
-} from '@coreui/react/src/index'
-
-## Forms
-
-Every group of form fields should reside in a `<CForm>` element. CoreUI provides no default styling for the `<CForm>` element, but there are some powerful browser features that are provided by default.
-
-- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes.
-- `<CButton>`s within a `<CForm>` default to `type="submit"`, so strive to be specific and always include a `type`.
-- You can disable every form element within a form with the `disabled` attribute on the `<CForm>`.
-
-Since CoreUI applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
-
-## Utilities
-
-[Margin utilities](https://coreui.io/docs/utilities/spacing/) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
-
-## Form grid
-
-More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
-
-```jsx preview
-<CRow>
-  <CCol xs>
-    <CFormInput placeholder="First name" aria-label="First name"/>
-  </CCol>
-  <CCol xs>
-    <CFormInput placeholder="Last name" aria-label="Last name"/>
-  </CCol>
-</CRow>
-```
-
-## Gutters
-
-By adding [gutter modifier classes](https://coreui.io/docs/layout/gutters/), you can have control over the gutter width in as well the inline as block direction.
-
-```jsx preview
-<CRow className="g-3">
-  <CCol xs>
-    <CFormInput placeholder="First name" aria-label="First name"/>
-  </CCol>
-  <CCol xs>
-    <CFormInput placeholder="Last name" aria-label="Last name"/>
-  </CCol>
-</CRow>
-```
-
-More complex layouts can also be created with the grid system.
-
-```jsx preview
-<CForm className="row g-3">
-  <CCol md={6}>
-    <CFormInput type="email" id="inputEmail4" label="Email" />
-  </CCol>
-  <CCol md={6}>
-    <CFormInput type="password" id="inputPassword4" label="Password" />
-  </CCol>
-  <CCol xs={12}>
-    <CFormInput id="inputAddress" label="Address" placeholder="1234 Main St"/>
-  </CCol>
-  <CCol xs={12}>
-    <CFormInput id="inputAddress2" label="Address 2" placeholder="Apartment, studio, or floor"/>
-  </CCol>
-  <CCol md={6}>
-    <CFormInput id="inputCity" label="City"/>
-  </CCol>
-  <CCol md={4}>
-    <CFormSelect id="inputState" label="State">
-      <option>Choose...</option>
-      <option>...</option>
-    </CFormSelect>
-  </CCol>
-  <CCol md={2}>
-    <CFormInput id="inputZip" label="Zip" />
-  </CCol>
-  <CCol xs={12}>
-    <CFormCheck type="checkbox" id="gridCheck" label="Check me out"/>
-  </CCol>
-  <CCol xs={12}>
-    <CButton color="primary" type="submit">Sign in</CButton>
-  </CCol>
-</CForm>
-```
-
-## Horizontal form
-
-Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<CFormLabel>`s as well so they're vertically centered with their associated form controls.
-
-At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
-
-```jsx preview
-<CForm>
-  <CRow className="mb-3">
-    <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">Email</CFormLabel>
-    <CCol sm={10} >
-      <CFormInput type="email" id="inputEmail3"/>
-    </CCol>
-  </CRow>
-  <CRow className="mb-3">
-    <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">Password</CFormLabel>
-    <CCol sm={10} >
-      <CFormInput type="password" id="inputPassword3"/>
-    </CCol>
-  </CRow>
-  <fieldset className="row mb-3">
-    <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
-    <CCol sm={10} >
-      <CFormCheck type="radio" name="gridRadios" id="gridRadios1" value="option1" label="First radio" defaultChecked/>
-      <CFormCheck type="radio" name="gridRadios" id="gridRadios2" value="option2" label="Second radio"/>
-      <CFormCheck type="radio" name="gridRadios" id="gridRadios3" value="option3" label="Third disabled radio" disabled/>
-    </CCol>
-  </fieldset>
-  <CRow className="mb-3">
-    <div className="col-sm-10 offset-sm-2">
-      <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox"/>
-    </div>
-  </CRow>
-  <CButton color="primary" type="submit">Sign in</CButton>
-</CForm>
-```
-
-### Horizontal form label sizing
-
-Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<CFormLabel>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
-
-```jsx preview
-<CRow className="mb-3">
-  <CFormLabel htmlFor="colFormLabelSm" className="col-sm-2 col-form-label col-form-label-sm">Email</CFormLabel>
-  <CCol sm={10} >
-    <CFormInput type="email" className="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm"/>
-  </CCol>
-</CRow>
-<CRow className="mb-3">
-  <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">Email</CFormLabel>
-  <CCol sm={10} >
-    <CFormInput type="email" id="colFormLabel" placeholder="col-form-label"/>
-  </CCol>
-</CRow>
-<CRow>
-  <CFormLabel htmlFor="colFormLabelLg" className="col-sm-2 col-form-label col-form-label-lg">Email</CFormLabel>
-  <CCol sm={10} >
-    <CFormInput type="email" className="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg"/>
-  </CCol>
-</CRow>
-```
-
-## Column sizing
-
-As shown in the previous examples, our grid system allows you to place any number of `<CCol>`s within a `<CRow>`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `<CCol>`s equally split the rest, with specific column classes like `<CCol sm={7} >`.
-
-```jsx preview
-<CRow className="g-3">
-  <CCol sm={7} >
-    <CFormInput placeholder="City" aria-label="City"/>
-  </CCol>
-  <CCol sm>
-    <CFormInput placeholder="State" aria-label="State"/>
-  </CCol>
-  <CCol sm>
-    <CFormInput placeholder="Zip" aria-label="Zip"/>
-  </CCol>
-</CRow>
-```
-
-## Auto-sizing
-
-The example below uses a flexbox utility to vertically center the contents and changes `<CCol>` to `<CCol xs="auto">` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
-
-```jsx preview
-<CForm className="row gy-2 gx-3 align-items-center">
-  <CCol xs="auto">
-    <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">Name</CFormLabel>
-    <CFormInput id="autoSizingInput" placeholder="Jane Doe"/>
-  </CCol>
-  <CCol xs="auto">
-    <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">Username</CFormLabel>
-    <CInputGroup>
-      <CInputGroupText>@</CInputGroupText>
-      <CFormInput id="autoSizingInputGroup" placeholder="Username"/>
-    </CInputGroup>
-  </CCol>
-  <CCol xs="auto">
-    <CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">Preference</CFormLabel>
-    <CFormSelect id="autoSizingSelect">
-      <option>Choose...</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-    </CFormSelect>
-  </CCol>
-  <CCol xs="auto">
-    <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me"/>
-  </CCol>
-  <CCol xs="auto">
-    <CButton color="primary" type="submit">Submit</CButton>
-  </CCol>
-</CForm>
-```
-
-You can then remix that once again with size-specific column classes.
-
-```jsx preview
-<CForm className="row gx-3 gy-2 align-items-center">
-  <CCol sm={3} >
-    <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">Name</CFormLabel>
-    <CFormInput id="specificSizeInputName" placeholder="Jane Doe"/>
-  </CCol>
-  <CCol sm={3} >
-    <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">Username</CFormLabel>
-    <CInputGroup>
-      <CInputGroupText>@</CInputGroupText>
-      <CFormInput id="specificSizeInputGroupUsername" placeholder="Username"/>
-    </CInputGroup>
-  </CCol>
-  <CCol sm={3} >
-    <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">Preference</CFormLabel>
-    <CFormSelect id="specificSizeSelect">
-      <option>Choose...</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-    </CFormSelect>
-  </CCol>
-  <CCol xs="auto">
-    <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me"/>
-  </CCol>
-  <CCol xs="auto">
-    <CButton color="primary" type="submit">Submit</CButton>
-  </CCol>
-</CForm>
-```
-
-## Inline forms
-
-Use the `<CCol xs="auto">` class to create horizontal layouts. By adding [gutter modifier classes](https://coreui.io/docs/layout/gutters/), we will have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `<CFormCheck>` align properly.
-
-```jsx preview
-<CForm className="row row-cols-lg-auto g-3 align-items-center">
-  <CCol xs={12}>
-    <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">Username</CFormLabel>
-    <CInputGroup>
-      <CInputGroupText>@</CInputGroupText>
-      <CFormInput id="inlineFormInputGroupUsername" placeholder="Username"/>
-    </CInputGroup>
-  </CCol>
-
-  <CCol xs={12}>
-    <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">Preference</CFormLabel>
-    <CFormSelect id="inlineFormSelectPref">
-      <option>Choose...</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-    </CFormSelect>
-  </CCol>
-
-  <CCol xs={12}>
-    <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me"/>
-  </CCol>
-
-  <CCol xs={12}>
-    <CButton color="primary" type="submit">Submit</CButton>
-  </CCol>
-</CForm>
-```
diff --git a/packages/docs/content/forms/layout/bootstrap.mdx b/packages/docs/content/forms/layout/bootstrap.mdx
new file mode 100644
index 00000000..419f189b
--- /dev/null
+++ b/packages/docs/content/forms/layout/bootstrap.mdx
@@ -0,0 +1,80 @@
+---
+title: React Bootstrap Form Layout Component
+name: Form Layout with Bootstrap Styling
+description: Learn how to build responsive and structured form layouts using CoreUI’s React components styled with Bootstrap.
+route: /forms/layout/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Form Layout
+
+Use CoreUI’s React form components together with Bootstrap’s layout system to build flexible, responsive, and well-structured forms.
+
+### Form container
+
+Wrap form elements in the `<CForm>` component to enable default browser behaviors such as validation and submission.
+
+- CoreUI does not apply default styles to `<CForm>`, giving you full control.
+- All `<CButton>` components inside `<CForm>` default to `type="submit"` unless specified otherwise.
+- You can disable all fields by setting the `disabled` prop on `<CForm>`.
+
+### Form layout using grid
+
+Combine CoreUI form components with the Bootstrap grid system for complex form layouts.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutFormGridExample" componentName="React Bootstrap Form Layout" />
+
+### Gutters
+
+Control spacing between columns using Bootstrap's gutter utilities.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutGuttersExample" componentName="React Bootstrap Form Layout" />
+
+You can also create advanced layouts by customizing both horizontal and vertical spacing.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutGutters2Example" componentName="React Bootstrap Form Layout" />
+
+### Horizontal form layout
+
+To create horizontal forms, use Bootstrap’s `.row` and `.col-*` grid classes. Add `.col-form-label` to `<CFormLabel>` to align labels vertically with form controls.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutHorizontalFormExample" componentName="React Bootstrap Form Layout" />
+
+#### Sizing horizontal labels
+
+Use `.col-form-label-sm` or `.col-form-label-lg` to match form control sizes.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutHorizontalFormLabelSizingExample" componentName="React Bootstrap Form Layout" />
+
+### Column sizing
+
+Use CoreUI’s `<CRow>` and `<CCol>` components to automatically distribute or manually control the width of form inputs.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutColumnSizingExample" componentName="React Bootstrap Form Layout" />
+
+### Auto sizing columns
+
+Use `<CCol xs="auto">` to allow input elements to take up only as much space as needed.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutAutoSizingExample" componentName="React Bootstrap Form Layout" />
+
+This can be combined with custom sizing to match your UI needs.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutAutoSizing2Example" componentName="React Bootstrap Form Layout" />
+
+### Inline form layout
+
+Use inline layouts to group form controls in a horizontal row, perfect for compact forms. Use `xs="auto"` and `g-2` for spacing, and `align-items-center` for vertical alignment.
+
+<ExampleSnippet className="theme-bootstrap" component="LayoutInlineFormsExample" componentName="React Bootstrap Form Layout" />
+
+## API reference
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CForm /&gt;](../api/#cform)
+- [&lt;CRow /&gt;](../api/#crow)
+- [&lt;CCol /&gt;](../api/#ccol)
+- [&lt;CFormLabel /&gt;](../api/#cformlabel)
+- [&lt;CFormCheck /&gt;](../api/#cformcheck)
+- [&lt;CFormInput /&gt;](../api/#cforminput)
diff --git a/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx b/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx
new file mode 100644
index 00000000..981793af
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import {
+  CButton,
+  CCol,
+  CForm,
+  CFormCheck,
+  CFormInput,
+  CFormLabel,
+  CFormSelect,
+  CInputGroup,
+  CInputGroupText,
+} from '@coreui/react'
+
+export const LayoutAutoSizing2Example = () => {
+  return (
+    <CForm className="row gx-3 gy-2 align-items-center">
+      <CCol sm={3}>
+        <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
+          Name
+        </CFormLabel>
+        <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
+      </CCol>
+      <CCol sm={3}>
+        <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
+          Username
+        </CFormLabel>
+        <CInputGroup>
+          <CInputGroupText>@</CInputGroupText>
+          <CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
+        </CInputGroup>
+      </CCol>
+      <CCol sm={3}>
+        <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
+          Preference
+        </CFormLabel>
+        <CFormSelect id="specificSizeSelect">
+          <option>Choose...</option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+      </CCol>
+      <CCol xs="auto">
+        <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
+      </CCol>
+      <CCol xs="auto">
+        <CButton color="primary" type="submit">
+          Submit
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx b/packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx
new file mode 100644
index 00000000..e36b04cd
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import {
+  CButton,
+  CCol,
+  CForm,
+  CFormCheck,
+  CFormInput,
+  CFormLabel,
+  CFormSelect,
+  CInputGroup,
+  CInputGroupText,
+} from '@coreui/react'
+
+export const LayoutAutoSizingExample = () => {
+  return (
+    <CForm className="row gy-2 gx-3 align-items-center">
+      <CCol xs="auto">
+        <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
+          Name
+        </CFormLabel>
+        <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
+      </CCol>
+      <CCol xs="auto">
+        <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
+          Username
+        </CFormLabel>
+        <CInputGroup>
+          <CInputGroupText>@</CInputGroupText>
+          <CFormInput id="autoSizingInputGroup" placeholder="Username" />
+        </CInputGroup>
+      </CCol>
+      <CCol xs="auto">
+        <CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">
+          Preference
+        </CFormLabel>
+        <CFormSelect id="autoSizingSelect">
+          <option>Choose...</option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+      </CCol>
+      <CCol xs="auto">
+        <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
+      </CCol>
+      <CCol xs="auto">
+        <CButton color="primary" type="submit">
+          Submit
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx b/packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx
new file mode 100644
index 00000000..8f61f594
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CCol, CFormInput, CRow } from '@coreui/react'
+
+export const LayoutColumnSizingExample = () => {
+  return (
+    <CRow className="g-3">
+      <CCol sm={7}>
+        <CFormInput placeholder="City" aria-label="City" />
+      </CCol>
+      <CCol sm>
+        <CFormInput placeholder="State" aria-label="State" />
+      </CCol>
+      <CCol sm>
+        <CFormInput placeholder="Zip" aria-label="Zip" />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx b/packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx
new file mode 100644
index 00000000..5a91967c
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CCol, CFormInput, CRow } from '@coreui/react'
+
+export const LayoutFormGridExample = () => {
+  return (
+    <CRow>
+      <CCol xs>
+        <CFormInput placeholder="First name" aria-label="First name" />
+      </CCol>
+      <CCol xs>
+        <CFormInput placeholder="Last name" aria-label="Last name" />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx b/packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx
new file mode 100644
index 00000000..34d07b46
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { CButton, CCol, CForm, CFormCheck, CFormInput, CFormSelect } from '@coreui/react'
+
+export const LayoutGutters2Example = () => {
+  return (
+    <CForm className="row g-3">
+      <CCol md={6}>
+        <CFormInput type="email" id="inputEmail4" label="Email" />
+      </CCol>
+      <CCol md={6}>
+        <CFormInput type="password" id="inputPassword4" label="Password" />
+      </CCol>
+      <CCol xs={12}>
+        <CFormInput id="inputAddress" label="Address" placeholder="1234 Main St" />
+      </CCol>
+      <CCol xs={12}>
+        <CFormInput
+          id="inputAddress2"
+          label="Address 2"
+          placeholder="Apartment, studio, or floor"
+        />
+      </CCol>
+      <CCol md={6}>
+        <CFormInput id="inputCity" label="City" />
+      </CCol>
+      <CCol md={4}>
+        <CFormSelect id="inputState" label="State">
+          <option>Choose...</option>
+          <option>...</option>
+        </CFormSelect>
+      </CCol>
+      <CCol md={2}>
+        <CFormInput id="inputZip" label="Zip" />
+      </CCol>
+      <CCol xs={12}>
+        <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
+      </CCol>
+      <CCol xs={12}>
+        <CButton color="primary" type="submit">
+          Sign in
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx b/packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx
new file mode 100644
index 00000000..e5954236
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CCol, CFormInput, CRow } from '@coreui/react'
+
+export const LayoutGuttersExample = () => {
+  return (
+    <CRow className="g-3">
+      <CCol xs>
+        <CFormInput placeholder="First name" aria-label="First name" />
+      </CCol>
+      <CCol xs>
+        <CFormInput placeholder="Last name" aria-label="Last name" />
+      </CCol>
+    </CRow>
+  )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx b/packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx
new file mode 100644
index 00000000..0d994967
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { CButton, CCol, CForm, CFormCheck, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const LayoutHorizontalFormExample = () => {
+  return (
+    <CForm>
+      <CRow className="mb-3">
+        <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
+          Email
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput type="email" id="inputEmail3" />
+        </CCol>
+      </CRow>
+      <CRow className="mb-3">
+        <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
+          Password
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput type="password" id="inputPassword3" />
+        </CCol>
+      </CRow>
+      <fieldset className="row mb-3">
+        <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
+        <CCol sm={10}>
+          <CFormCheck
+            type="radio"
+            name="gridRadios"
+            id="gridRadios1"
+            value="option1"
+            label="First radio"
+            defaultChecked
+          />
+          <CFormCheck
+            type="radio"
+            name="gridRadios"
+            id="gridRadios2"
+            value="option2"
+            label="Second radio"
+          />
+          <CFormCheck
+            type="radio"
+            name="gridRadios"
+            id="gridRadios3"
+            value="option3"
+            label="Third disabled radio"
+            disabled
+          />
+        </CCol>
+      </fieldset>
+      <CRow className="mb-3">
+        <div className="col-sm-10 offset-sm-2">
+          <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
+        </div>
+      </CRow>
+      <CButton color="primary" type="submit">
+        Sign in
+      </CButton>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx b/packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx
new file mode 100644
index 00000000..ef9d25f3
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'
+
+export const LayoutHorizontalFormLabelSizingExample = () => {
+  return (
+    <>
+      <CRow className="mb-3">
+        <CFormLabel htmlFor="colFormLabelSm" className="col-sm-2 col-form-label col-form-label-sm">
+          Email
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput
+            type="email"
+            className="form-control form-control-sm"
+            id="colFormLabelSm"
+            placeholder="col-form-label-sm"
+          />
+        </CCol>
+      </CRow>
+      <CRow className="mb-3">
+        <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
+          Email
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
+        </CCol>
+      </CRow>
+      <CRow>
+        <CFormLabel htmlFor="colFormLabelLg" className="col-sm-2 col-form-label col-form-label-lg">
+          Email
+        </CFormLabel>
+        <CCol sm={10}>
+          <CFormInput
+            type="email"
+            className="form-control form-control-lg"
+            id="colFormLabelLg"
+            placeholder="col-form-label-lg"
+          />
+        </CCol>
+      </CRow>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx b/packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx
new file mode 100644
index 00000000..c379da40
--- /dev/null
+++ b/packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import {
+  CButton,
+  CCol,
+  CForm,
+  CFormCheck,
+  CFormInput,
+  CFormLabel,
+  CFormSelect,
+  CInputGroup,
+  CInputGroupText,
+} from '@coreui/react'
+
+export const LayoutInlineFormsExample = () => {
+  return (
+    <CForm className="row row-cols-lg-auto g-3 align-items-center">
+      <CCol xs={12}>
+        <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
+          Username
+        </CFormLabel>
+        <CInputGroup>
+          <CInputGroupText>@</CInputGroupText>
+          <CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
+        </CInputGroup>
+      </CCol>
+
+      <CCol xs={12}>
+        <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
+          Preference
+        </CFormLabel>
+        <CFormSelect id="inlineFormSelectPref">
+          <option>Choose...</option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+      </CCol>
+
+      <CCol xs={12}>
+        <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
+      </CCol>
+
+      <CCol xs={12}>
+        <CButton color="primary" type="submit">
+          Submit
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/layout/index.mdx b/packages/docs/content/forms/layout/index.mdx
new file mode 100644
index 00000000..59255aaf
--- /dev/null
+++ b/packages/docs/content/forms/layout/index.mdx
@@ -0,0 +1,72 @@
+---
+title: React Form Layout
+name: Layout
+description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
+route: /forms/layout/
+---
+
+## Forms
+
+Every group of form fields should reside in a `<CForm>` element. CoreUI provides no default styling for the `<CForm>` element, but there are some powerful browser features that are provided by default.
+
+- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes.
+- `<CButton>`s within a `<CForm>` default to `type="submit"`, so strive to be specific and always include a `type`.
+- You can disable every form element within a form with the `disabled` attribute on the `<CForm>`.
+
+Since CoreUI applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
+
+## Utilities
+
+[Margin utilities](https://coreui.io/bootstrap/docs/utilities/spacing/) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
+
+## Form grid
+
+More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
+
+<ExampleSnippet component="LayoutFormGridExample" componentName="React Form Layout" />
+
+## Gutters
+
+By adding [gutter modifier classes](https://coreui.io/bootstrap/docs/layout/gutters/), you can have control over the gutter width in as well the inline as block direction.
+
+<ExampleSnippet component="LayoutGuttersExample" componentName="React Form Layout" />
+
+More complex layouts can also be created with the grid system.
+
+<ExampleSnippet component="LayoutGutters2Example" componentName="React Form Layout" />
+
+## Horizontal form
+
+Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<CFormLabel>`s as well so they're vertically centered with their associated form controls.
+
+At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
+
+<ExampleSnippet component="LayoutHorizontalFormExample" componentName="React Form Layout" />
+
+### Horizontal form label sizing
+
+Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<CFormLabel>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
+
+<ExampleSnippet component="LayoutHorizontalFormLabelSizingExample" componentName="React Form Layout" />
+
+## Column sizing
+
+As shown in the previous examples, our grid system allows you to place any number of `<CCol>`s within a `<CRow>`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `<CCol>`s equally split the rest, with specific column classes like `<CCol sm={7} >`.
+
+<ExampleSnippet component="LayoutColumnSizingExample" componentName="React Form Layout" />
+
+## Auto-sizing
+
+The example below uses a flexbox utility to vertically center the contents and changes `<CCol>` to `<CCol xs="auto">` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
+
+<ExampleSnippet component="LayoutAutoSizingExample" componentName="React Form Layout" />
+
+You can then remix that once again with size-specific column classes.
+
+<ExampleSnippet component="LayoutAutoSizing2Example" componentName="React Form Layout" />
+
+## Inline forms
+
+Use the `<CCol xs="auto">` class to create horizontal layouts. By adding [gutter modifier classes](https://coreui.io/bootstrap/docs/layout/gutters/), we will have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `<CFormCheck>` align properly.
+
+<ExampleSnippet component="LayoutInlineFormsExample" componentName="React Form Layout" />
diff --git a/packages/docs/content/forms/overview.mdx b/packages/docs/content/forms/overview.mdx
index 134000c1..19362350 100644
--- a/packages/docs/content/forms/overview.mdx
+++ b/packages/docs/content/forms/overview.mdx
@@ -16,7 +16,7 @@ import {
   CFormText,
   CCol,
   CRow,
-} from '@coreui/react/src/index'
+} from '@coreui/react'
 
 ## Overview
 
diff --git a/packages/docs/content/forms/radio.mdx b/packages/docs/content/forms/radio.mdx
deleted file mode 100644
index ee4d3ba0..00000000
--- a/packages/docs/content/forms/radio.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: React Radio Components
-name: Radio
-description: Create consistent cross-browser and cross-device radios with our React radio component.
-menu: Forms
-route: /forms/radio
-other_frameworks: radio
----
-
-import { useEffect, useRef } from 'react'
-import {
-  CButton,
-  CFormCheck,
-} from '@coreui/react/src/index'
-
-## Approach
-
-Browser default radios are replaced with the help of `<CFormCheck radio>`. Radios are for selecting one option from many.
-
-## Radios
-
-Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
-
-```jsx preview
-<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
-<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
-```
-
-### Disabled
-
-```jsx preview
-<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
-<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
-```
-
-## Default (stacked)
-
-By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.
-
-```jsx preview
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios1" value="option1" label="Default radio" defaultChecked/>
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios2" value="option2" label="Second default radio"/>
-<CFormCheck type="radio" name="exampleRadios" id="exampleRadios3" value="option3" label="Disabled radio" disabled/>
-```
-
-## Inline
-
-Group radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck radio>`.
-
-```jsx preview
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>
-<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
-```
-
-## Reverse 
-
-Put your radios on the opposite side by adding `reverse` boolean property.
-
-```jsx preview
-<CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio"/>
-<CFormCheck reverse type="radio" id="reverseOption2" value="option2" label="Disabled reverse radio" disabled/>
-```
-
-## Without labels
-
-Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
-
-```jsx preview
-<CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>
-```
-
-## Radio toggle buttons
-
-Create button-like radio buttons by using `button` boolean property on the `<CFormCheck radio>` component. These toggle buttons can further be grouped in a button group if needed.
-
-```jsx preview
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
-<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
-```
-
-### Outlined styles
-
-Different variants of button, such at the various outlined styles, are supported.
-
-```jsx preview
-<CFormCheck button={{ color: 'success', variant: 'outline' }} type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
-<CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-check-variables" />
-
-## API
-
-### CFormCheck
-
-`markdown:CFormCheck.api.mdx`
diff --git a/packages/docs/content/forms/radio/api.mdx b/packages/docs/content/forms/radio/api.mdx
new file mode 100644
index 00000000..62bf3a61
--- /dev/null
+++ b/packages/docs/content/forms/radio/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Radio Component API
+name: Form Radio API
+description: Explore the API reference for the React Form Radio component and discover how to effectively utilize its props for customization.
+route: /forms/radio/
+---
+
+import CFormCheckAPI from '../../api/CFormCheck.api.mdx'
+
+## CFormCheck
+
+<CFormCheckAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/radio/bootstrap.mdx b/packages/docs/content/forms/radio/bootstrap.mdx
new file mode 100644
index 00000000..cda8394c
--- /dev/null
+++ b/packages/docs/content/forms/radio/bootstrap.mdx
@@ -0,0 +1,59 @@
+---
+title: React Bootstrap Radio Component
+name: Radio with Bootstrap Styling
+description: Learn how to build consistent, accessible, and customizable radio buttons using CoreUI’s React components styled with Bootstrap.
+route: /forms/radio/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Radio component
+
+Use CoreUI’s `<CFormCheck type="radio">` component to create Bootstrap-styled radio buttons for selecting one option from many. These components are built to be accessible, customizable, and responsive.
+
+### Default stacked radios
+
+By default, multiple radio buttons rendered as siblings will be stacked vertically with proper spacing.
+
+<ExampleSnippet className="theme-bootstrap" component="RadioExample" componentName="React Bootstrap Radio" />
+
+### Disabled state
+
+Add the `disabled` prop to disable a radio button. The associated label will also receive a muted style to reflect its state.
+
+<ExampleSnippet className="theme-bootstrap" component="RadioDisabledExample" componentName="React Bootstrap Radio" />
+
+### Inline radios
+
+Display radio buttons in a horizontal row by adding the `inline` prop to each `<CFormCheck type="radio">`.
+
+<ExampleSnippet className="theme-bootstrap" component="RadioInlineExample" componentName="React Bootstrap Radio" />
+
+### Reverse layout
+
+Use the `reverse` prop to position the label text on the opposite side of the radio input.
+
+<ExampleSnippet className="theme-bootstrap" component="RadioReverseExample" componentName="React Bootstrap Radio" />
+
+### Radios without labels
+
+You can omit visual labels, but make sure to provide accessible names using `aria-label` for screen readers.
+
+<ExampleSnippet className="theme-bootstrap" component="RadioWithoutLabelsExample" componentName="React Bootstrap Radio" />
+
+### Radio toggle buttons
+
+Turn your radios into button-like toggles using the `button` prop. These can also be grouped using a button group component.
+
+<ExampleSnippet className="theme-bootstrap" component="RadioToggleButtonsExample" componentName="React Bootstrap Radio" />
+
+#### Outlined toggle styles
+
+You can apply outlined styles to toggle radios using Bootstrap's button variant system.
+
+<ExampleSnippet className="theme-bootstrap" component="RadioToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Radio" />
+
+## API reference
+
+Refer to the API documentation below for a complete list of props supported by the React Bootstrap radio component.
+
+- [&lt;CFormCheck /&gt;](../api/#cformcheck)
diff --git a/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx b/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx
new file mode 100644
index 00000000..3a662127
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioDisabledExample = () => {
+  return (
+    <>
+      <CFormCheck
+        type="radio"
+        name="flexRadioDisabled"
+        id="flexRadioDisabled"
+        label="Disabled radio"
+        disabled
+      />
+      <CFormCheck
+        type="radio"
+        name="flexRadioDisabled"
+        id="flexRadioCheckedDisabled"
+        label="Disabled checked radio"
+        defaultChecked
+        disabled
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioExample.tsx b/packages/docs/content/forms/radio/examples/RadioExample.tsx
new file mode 100644
index 00000000..293b329d
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioExample = () => {
+  return (
+    <>
+      <CFormCheck
+        type="radio"
+        name="flexRadioDefault"
+        id="flexRadioDefault1"
+        label="Default radio"
+      />
+      <CFormCheck
+        type="radio"
+        name="flexRadioDefault"
+        id="flexRadioDefault2"
+        label="Checked radio"
+        defaultChecked
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioInlineExample.tsx b/packages/docs/content/forms/radio/examples/RadioInlineExample.tsx
new file mode 100644
index 00000000..30524b10
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioInlineExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioInlineExample = () => {
+  return (
+    <>
+      <CFormCheck
+        inline
+        type="radio"
+        name="inlineRadioOptions"
+        id="inlineCheckbox1"
+        value="option1"
+        label="1"
+      />
+      <CFormCheck
+        inline
+        type="radio"
+        name="inlineRadioOptions"
+        id="inlineCheckbox2"
+        value="option2"
+        label="2"
+      />
+      <CFormCheck
+        inline
+        type="radio"
+        name="inlineRadioOptions"
+        id="inlineCheckbox3"
+        value="option3"
+        label="3 (disabled)"
+        disabled
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioReverseExample.tsx b/packages/docs/content/forms/radio/examples/RadioReverseExample.tsx
new file mode 100644
index 00000000..330b626c
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioReverseExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioReverseExample = () => {
+  return (
+    <>
+      <CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio" />
+      <CFormCheck
+        reverse
+        type="radio"
+        id="reverseOption2"
+        value="option2"
+        label="Disabled reverse radio"
+        disabled
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioStackedExample.tsx b/packages/docs/content/forms/radio/examples/RadioStackedExample.tsx
new file mode 100644
index 00000000..42a5aba2
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioStackedExample.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioStackedExample = () => {
+  return (
+    <>
+      <CFormCheck
+        type="radio"
+        name="exampleRadios"
+        id="exampleRadios1"
+        value="option1"
+        label="Default radio"
+        defaultChecked
+      />
+      <CFormCheck
+        type="radio"
+        name="exampleRadios"
+        id="exampleRadios2"
+        value="option2"
+        label="Second default radio"
+      />
+      <CFormCheck
+        type="radio"
+        name="exampleRadios"
+        id="exampleRadios3"
+        value="option3"
+        label="Disabled radio"
+        disabled
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx b/packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx
new file mode 100644
index 00000000..a96c0eec
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioToggleButtonsExample = () => {
+  return (
+    <>
+      <CFormCheck
+        button={{ color: 'secondary' }}
+        type="radio"
+        name="options"
+        id="option1"
+        autoComplete="off"
+        label="Checked"
+        defaultChecked
+      />
+      <CFormCheck
+        button={{ color: 'secondary' }}
+        type="radio"
+        name="options"
+        id="option2"
+        autoComplete="off"
+        label="Radio"
+      />
+      <CFormCheck
+        button={{ color: 'secondary' }}
+        type="radio"
+        name="options"
+        id="option3"
+        autoComplete="off"
+        label="Radio"
+        disabled
+      />
+      <CFormCheck
+        button={{ color: 'secondary' }}
+        type="radio"
+        name="options"
+        id="option4"
+        autoComplete="off"
+        label="Radio"
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx b/packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx
new file mode 100644
index 00000000..5b14b855
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioToggleButtonsOutlinedStylesExample = () => {
+  return (
+    <>
+      <CFormCheck
+        button={{ color: 'success', variant: 'outline' }}
+        type="radio"
+        name="options-outlined"
+        id="success-outlined"
+        autoComplete="off"
+        label="Radio"
+        defaultChecked
+      />
+      <CFormCheck
+        button={{ color: 'danger', variant: 'outline' }}
+        type="radio"
+        name="options-outlined"
+        id="danger-outlined"
+        autoComplete="off"
+        label="Radio"
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx b/packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx
new file mode 100644
index 00000000..6621550e
--- /dev/null
+++ b/packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormCheck } from '@coreui/react'
+
+export const RadioWithoutLabelsExample = () => {
+  return <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..." />
+}
diff --git a/packages/docs/content/forms/radio/index.mdx b/packages/docs/content/forms/radio/index.mdx
new file mode 100644
index 00000000..f49bf3a9
--- /dev/null
+++ b/packages/docs/content/forms/radio/index.mdx
@@ -0,0 +1,63 @@
+---
+title: React Radio Components
+name: Radio
+description: Create consistent cross-browser and cross-device radios with our React radio component.
+route: /forms/radio/
+other_frameworks: radio
+---
+
+## Approach
+
+Browser default radios are replaced with the help of `<CFormCheck type="radio">`. Radios are for selecting one option from many.
+
+## Radios
+
+<ExampleSnippet component="RadioExample" componentName="React Form Radio" />
+
+### Disabled
+
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
+
+<ExampleSnippet component="RadioDisabledExample" componentName="React Form Radio" />
+
+## Default (stacked)
+
+By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.
+
+<ExampleSnippet component="RadioStackedExample" componentName="React Form Radio" />
+
+## Inline
+
+Group radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck radio>`.
+
+<ExampleSnippet component="RadioInlineExample" componentName="React Form Radio" />
+
+## Reverse 
+
+Put your radios on the opposite side by adding `reverse` boolean property.
+
+<ExampleSnippet component="RadioReverseExample" componentName="React Form Radio" />
+
+## Without labels
+
+Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
+
+<ExampleSnippet component="RadioWithoutLabelsExample" componentName="React Form Radio" />
+
+## Radio toggle buttons
+
+Create button-like radio buttons by using `button` boolean property on the `<CFormCheck radio>` component. These toggle buttons can further be grouped in a button group if needed.
+
+<ExampleSnippet component="RadioToggleButtonsExample" componentName="React Form Radio" />
+
+### Outlined styles
+
+Different variants of button, such at the various outlined styles, are supported.
+
+<ExampleSnippet component="RadioToggleButtonsOutlinedStylesExample" componentName="React Form Radio" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CFormCheck /&gt;](./api/#cformcheck)
diff --git a/packages/docs/content/forms/radio/styling.mdx b/packages/docs/content/forms/radio/styling.mdx
new file mode 100644
index 00000000..ec508fbb
--- /dev/null
+++ b/packages/docs/content/forms/radio/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Radio Component Styling
+name: Radio Styling
+description: Learn how to customize the React Radio component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/radio/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-check-variables" />
diff --git a/packages/docs/content/forms/range/api.mdx b/packages/docs/content/forms/range/api.mdx
new file mode 100644
index 00000000..522a6c51
--- /dev/null
+++ b/packages/docs/content/forms/range/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Range Component API
+name: Form Range API
+description: Explore the API reference for the React Form Range component and discover how to effectively utilize its props for customization.
+route: /forms/range/
+---
+
+import CFormRangeAPI from '../../api/CFormRange.api.mdx'
+
+## CFormRange
+
+<CFormRangeAPI />
diff --git a/packages/docs/content/forms/range/bootstrap.mdx b/packages/docs/content/forms/range/bootstrap.mdx
new file mode 100644
index 00000000..124e2b56
--- /dev/null
+++ b/packages/docs/content/forms/range/bootstrap.mdx
@@ -0,0 +1,41 @@
+---
+title: React Bootstrap Range Component
+name: Range with Bootstrap Styling
+description: Learn how to create customizable and consistent cross-browser range sliders using CoreUI’s React components styled with Bootstrap.
+route: /forms/range/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Range component
+
+Use CoreUI’s `<CFormRange>` component to create custom range inputs with Bootstrap styling. It provides consistent appearance and behavior across modern browsers and supports customization via standard props.
+
+### Basic example
+
+The `<CFormRange>` component renders a stylized `<input type="range">` element.
+
+<ExampleSnippet className="theme-bootstrap" component="FormRangeExample" componentName="React Bootstrap Range" />
+
+### Disabled state
+
+Add the `disabled` prop to visually gray out the slider and disable interaction.
+
+<ExampleSnippet className="theme-bootstrap" component="FormRangeDisabledExample" componentName="React Bootstrap Range" />
+
+### Minimum and maximum values
+
+Customize the slider’s value range using the `min` and `max` props.
+
+<ExampleSnippet className="theme-bootstrap" component="FormRangeMinAndMaxExample" componentName="React Bootstrap Range" />
+
+### Custom step values
+
+Set a custom `step` size to control the interval between selectable values.
+
+<ExampleSnippet className="theme-bootstrap" component="FormRangeStepsExample" componentName="React Bootstrap Range" />
+
+## API reference
+
+Refer to the API documentation below for detailed descriptions of all available props.
+
+- [&lt;CFormRange /&gt;](../api/#cformrange)
diff --git a/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx b/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx
new file mode 100644
index 00000000..60e0fed4
--- /dev/null
+++ b/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormRange } from '@coreui/react'
+
+export const FormRangeDisabledExample = () => {
+  return <CFormRange id="disabledRange" label="Disabled range" disabled />
+}
diff --git a/packages/docs/content/forms/range/examples/FormRangeExample.tsx b/packages/docs/content/forms/range/examples/FormRangeExample.tsx
new file mode 100644
index 00000000..5e5ccf6b
--- /dev/null
+++ b/packages/docs/content/forms/range/examples/FormRangeExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormRange } from '@coreui/react'
+
+export const FormRangeExample = () => {
+  return <CFormRange id="customRange1" label="Example range" />
+}
diff --git a/packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx b/packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx
new file mode 100644
index 00000000..d31ad1b7
--- /dev/null
+++ b/packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormRange } from '@coreui/react'
+
+export const FormRangeMinAndMaxExample = () => {
+  return <CFormRange min={0} max={5} label="Example range" defaultValue="3" />
+}
diff --git a/packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx b/packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx
new file mode 100644
index 00000000..c91a5e21
--- /dev/null
+++ b/packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { CFormRange } from '@coreui/react'
+
+export const FormRangeStepsExample = () => {
+  return <CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" />
+}
diff --git a/packages/docs/content/forms/range.mdx b/packages/docs/content/forms/range/index.mdx
similarity index 62%
rename from packages/docs/content/forms/range.mdx
rename to packages/docs/content/forms/range/index.mdx
index e5370095..68990db5 100644
--- a/packages/docs/content/forms/range.mdx
+++ b/packages/docs/content/forms/range/index.mdx
@@ -2,53 +2,36 @@
 title: React Range Component
 name: Range
 description: React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
-menu: Forms
-route: /forms/range
+route: /forms/range/
 other_frameworks: range
 ---
 
-import { CForm, CFormLabel, CFormRange } from '@coreui/react/src/index'
-
 ## Overview
 
 Create custom `<input type="range">` controls with `<CFormRange>`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
 
-```jsx preview
-<CFormRange id="customRange1" label="Example range" />
-```
+<ExampleSnippet component="FormRangeExample" componentName="React Form Range" />
 
 ## Disabled
 
 Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
 
-```jsx preview
-<CFormRange id="disabledRange" label="Disabled range" disabled />
-```
+<ExampleSnippet component="FormRangeDisabledExample" componentName="React Form Range" />
 
 ## Min and max
 
 Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
 
-```jsx preview
-<CFormRange min={0} max={5} label="Example range" defaultValue="3" id="customRange2" />
-```
+<ExampleSnippet component="FormRangeMinAndMaxExample" componentName="React Form Range" />
 
 ## Steps
 
 By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step={0.5}`.
 
-```jsx preview
-<CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" id="customRange3" />
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-range-variables" />
+<ExampleSnippet component="FormRangeStepsExample" componentName="React Form Range" />
 
 ## API
 
-### CFormRange
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
 
-`markdown:CFormRange.api.mdx`
+- [&lt;CFormRange /&gt;](./api/#cformrange)
diff --git a/packages/docs/content/forms/range/styling.mdx b/packages/docs/content/forms/range/styling.mdx
new file mode 100644
index 00000000..2f2348e4
--- /dev/null
+++ b/packages/docs/content/forms/range/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Range Component Styling
+name: Range Styling
+description: Learn how to customize the React Range component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/range/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-range-variables" />
diff --git a/packages/docs/content/forms/select.mdx b/packages/docs/content/forms/select.mdx
deleted file mode 100644
index 40613cc8..00000000
--- a/packages/docs/content/forms/select.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: React Select Component
-name: Select
-description: React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
-menu: Forms
-route: /forms/select
-other_frameworks: select
----
-
-import {
-  CButton,
-  CForm,
-  CFormCheck,
-  CFormLabel,
-  CFormSelect,
-  CFormText,
-  CCol,
-  CRow,
-} from '@coreui/react/src/index'
-
-## Default
-
-```jsx preview
-<CFormSelect 
-  aria-label="Default select example"
-  options={[
-    'Open this select menu',
-    { label: 'One', value: '1' },
-    { label: 'Two', value: '2' },
-    { label: 'Three', value: '3', disabled: true }
-  ]}
-/>
-```
-You can also add options manually
-
-```jsx 
-<CFormSelect aria-label="Default select example">
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3" disabled>Three</option>
-</CFormSelect>
-```
-
-## Sizing
-
-You may also choose from small and large custom selects to match our similarly sized text inputs.
-
-```jsx preview
-<CFormSelect size="lg" className="mb-3" aria-label="Large select example">
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3">Three</option>
-</CFormSelect>
-<CFormSelect size="sm" className="mb-3" aria-label="Small select example">
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3">Three</option>
-</CFormSelect>
-```
-
-The `multiple` attribute is also supported:
-
-```jsx preview
-<CFormSelect size="lg" multiple aria-label="Multiple select example">
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3">Three</option>
-</CFormSelect>
-```
-
-As is the `htmlSize` property:
-
-```jsx preview
-<CFormSelect htmlSize={3} multiple aria-label="size 3 select example">
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3">Three</option>
-</CFormSelect>
-```
-
-## Disabled
-
-Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
-
-```jsx preview
-<CFormSelect aria-label="Disabled select example" disabled>
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3">Three</option>
-</CFormSelect>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-select-variables" />
-
-## API
-
-### CFormSelect
-
-`markdown:CFormSelect.api.mdx`
diff --git a/packages/docs/content/forms/select/api.mdx b/packages/docs/content/forms/select/api.mdx
new file mode 100644
index 00000000..ef612feb
--- /dev/null
+++ b/packages/docs/content/forms/select/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Form Select Component API
+name: Form Select API
+description: Explore the API reference for the React Form Select component and discover how to effectively utilize its props for customization.
+route: /forms/select/
+---
+
+import CFormSelectAPI from '../../api/CFormSelect.api.mdx'
+import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
+import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
+import CFormTextAPI from '../../api/CFormText.api.mdx'
+
+## CFormSelect
+
+<CFormSelectAPI />
+
+## CFormFeedback
+
+<CFormFeedbackAPI />
+
+## CFormLabel
+
+<CFormLabelAPI />
+
+## CFormText
+
+<CFormTextAPI />
diff --git a/packages/docs/content/forms/select/bootstrap.mdx b/packages/docs/content/forms/select/bootstrap.mdx
new file mode 100644
index 00000000..d6c39a04
--- /dev/null
+++ b/packages/docs/content/forms/select/bootstrap.mdx
@@ -0,0 +1,57 @@
+---
+title: React Bootstrap Select Component
+name: Select with Bootstrap Styling
+description: Learn how to build accessible and customizable dropdown menus using CoreUI’s React select component styled with Bootstrap.
+route: /forms/select/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Select component
+
+Use CoreUI’s `<CFormSelect>` to create custom-styled `<select>` elements that match the Bootstrap look and feel. It supports single and multiple selections, custom sizing, and full accessibility.
+
+### Basic usage
+
+The default select renders a Bootstrap-styled native dropdown.
+
+<ExampleSnippet className="theme-bootstrap" component="FormSelectExample" componentName="React Bootstrap Select" />
+
+You can also define options manually using JSX:
+
+```jsx
+<CFormSelect aria-label="Default select example">
+  <option>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3" disabled>Three</option>
+</CFormSelect>
+```
+
+### Sizing
+
+Use the `size` prop with values like `"sm"` or `"lg"` to change the select height.
+
+<ExampleSnippet className="theme-bootstrap" component="FormSelectSizingExample" componentName="React Bootstrap Select" />
+
+You can also enable multi-select behavior using the `multiple` prop:
+
+<ExampleSnippet className="theme-bootstrap" component="FormSelectSizing2Example" componentName="React Bootstrap Select" />
+
+And specify a fixed visible size using the `htmlSize` prop:
+
+<ExampleSnippet className="theme-bootstrap" component="FormSelectSizing3Example" componentName="React Bootstrap Select" />
+
+### Disabled state
+
+Add the `disabled` prop to disable user interaction and apply a muted appearance.
+
+<ExampleSnippet className="theme-bootstrap" component="FormSelectDisabledExample" componentName="React Bootstrap Select" />
+
+## API reference
+
+Refer to the API documentation below for detailed descriptions of all available props and subcomponents.
+
+- [&lt;CFormSelect /&gt;](../api/#cformselect)
+- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
+- [&lt;CFormLabel /&gt;](../api/#cformlabel)
+- [&lt;CFormText /&gt;](../api/#cformtext)
diff --git a/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx b/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx
new file mode 100644
index 00000000..c1596b4b
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectDisabledExample = () => {
+  return (
+    <CFormSelect
+      aria-label="Default select example"
+      options={[
+        'Open this select menu',
+        { label: 'One', value: '1' },
+        { label: 'Two', value: '2' },
+        { label: 'Three', value: '3', disabled: true },
+      ]}
+    />
+  )
+}
diff --git a/packages/docs/content/forms/select/examples/FormSelectExample.tsx b/packages/docs/content/forms/select/examples/FormSelectExample.tsx
new file mode 100644
index 00000000..3d2c51c0
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectExample = () => {
+  return (
+    <CFormSelect
+      aria-label="Default select example"
+      options={[
+        { label: 'Open this select menu' },
+        { label: 'One', value: '1' },
+        { label: 'Two', value: '2' },
+        { label: 'Three', value: '3', disabled: true },
+      ]}
+    />
+  )
+}
diff --git a/packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx b/packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx
new file mode 100644
index 00000000..cb273285
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectSizing2Example = () => {
+  return (
+    <CFormSelect size="lg" multiple aria-label="Multiple select example">
+      <option>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </CFormSelect>
+  )
+}
diff --git a/packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx b/packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx
new file mode 100644
index 00000000..68038524
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectSizing3Example = () => {
+  return (
+    <CFormSelect htmlSize={3} multiple aria-label="size 3 select example">
+      <option>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </CFormSelect>
+  )
+}
diff --git a/packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx b/packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx
new file mode 100644
index 00000000..95bce395
--- /dev/null
+++ b/packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { CFormSelect } from '@coreui/react'
+
+export const FormSelectSizingExample = () => {
+  return (
+    <>
+      <CFormSelect size="lg" className="mb-3" aria-label="Large select example">
+        <option>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </CFormSelect>
+      <CFormSelect size="sm" className="mb-3" aria-label="Small select example">
+        <option>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </CFormSelect>
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/select/index.mdx b/packages/docs/content/forms/select/index.mdx
new file mode 100644
index 00000000..18f914c4
--- /dev/null
+++ b/packages/docs/content/forms/select/index.mdx
@@ -0,0 +1,51 @@
+---
+title: React Select Component
+name: Select
+description: React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
+route: /forms/select/
+other_frameworks: select
+---
+
+## Default
+
+<ExampleSnippet component="FormSelectExample" componentName="React Form Select" />
+
+You can also add options manually
+
+```jsx 
+<CFormSelect aria-label="Default select example">
+  <option>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3" disabled>Three</option>
+</CFormSelect>
+```
+
+## Sizing
+
+You may also choose from small and large custom selects to match our similarly sized text inputs.
+
+<ExampleSnippet component="FormSelectSizingExample" componentName="React Form Select" />
+
+The `multiple` attribute is also supported:
+
+<ExampleSnippet component="FormSelectSizing2Example" componentName="React Form Select" />
+
+As is the `htmlSize` property:
+
+<ExampleSnippet component="FormSelectSizing3Example" componentName="React Form Select" />
+
+## Disabled
+
+Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
+
+<ExampleSnippet component="FormSelectDisabledExample" componentName="React Form Select" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CFormSelect /&gt;](./api/#cformselect)
+- [&lt;CFormFeedback /&gt;](./api/#cformfeedback)
+- [&lt;CFormLabel /&gt;](./api/#cformlabel)
+- [&lt;CFormText /&gt;](./api/#cformtext)
diff --git a/packages/docs/content/forms/select/styling.mdx b/packages/docs/content/forms/select/styling.mdx
new file mode 100644
index 00000000..1dc4571d
--- /dev/null
+++ b/packages/docs/content/forms/select/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Select Component Styling
+name: Select Styling
+description: Learn how to customize the React Select component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/input/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-select-variables" />
diff --git a/packages/docs/content/forms/switch.mdx b/packages/docs/content/forms/switch.mdx
deleted file mode 100644
index 4dd94510..00000000
--- a/packages/docs/content/forms/switch.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: React Switch Components
-name: Switch
-description: Create consistent cross-browser and cross-device switch component.
-menu: Forms
-route: /forms/checks-radios
-other_frameworks: switch
----
-
-import { useEffect, useRef } from 'react'
-import {
-  CFormSwitch,
-} from '@coreui/react/src/index'
-
-## About
-
-React Switch Components are a type of UI component that allows users to toggle between two states, usually represented as "on" or "off", "enabled" or "disabled", or "checked" or "unchecked".
-
-When a user interacts with the component by clicking or tapping on it, the switch toggles its state, triggering an action or changing the appearance of the component. This type of component is often used in forms, settings panels, and other places where users need to turn something on or off or choose between two options.
-
-## Example
-
-```jsx preview
-<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
-<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
-<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
-<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
-```
-
-## Sizing
-
-Larger or smaller react switches? Add `size="lg"` or `size="xl"` for additional sizes.
-
-```jsx preview
-<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefaultNormal"/>
-<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
-<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
-```
-
-## Reverse 
-
-Put your switches on the opposite side by adding `reverse` boolean property.
-
-```jsx preview
-<CFormSwitch reverse type="radio" id="reverseFormSwitch1" label="Reverse switch"/>
-<CFormSwitch reverse type="radio" id="reverseFormSwitch2" label="Disabled reverse switch" disabled/>
-```
-
-## Customizing
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-switch-variables" />
-
-## API
-
-### CFormSwitch
-
-`markdown:CFormSwitch.api.mdx`
diff --git a/packages/docs/content/forms/switch/api.mdx b/packages/docs/content/forms/switch/api.mdx
new file mode 100644
index 00000000..7c2bb692
--- /dev/null
+++ b/packages/docs/content/forms/switch/api.mdx
@@ -0,0 +1,12 @@
+---
+title: React Form Switch Component API
+name: Form Switch API
+description: Explore the API reference for the React Form Switch component and discover how to effectively utilize its props for customization.
+route: /forms/switch/
+---
+
+import CFormSwitchAPI from '../../api/CFormSwitch.api.mdx'
+
+## CFormSwitch
+
+<CFormSwitchAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/switch/bootstrap.mdx b/packages/docs/content/forms/switch/bootstrap.mdx
new file mode 100644
index 00000000..b8839c12
--- /dev/null
+++ b/packages/docs/content/forms/switch/bootstrap.mdx
@@ -0,0 +1,35 @@
+---
+title: React Bootstrap Switch Component
+name: Switch with Bootstrap Styling
+description: Learn how to create responsive toggle switches using CoreUI’s React component styled to match Bootstrap form elements.
+route: /forms/switch/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Switch component
+
+Use CoreUI’s `<CFormSwitch>` to create cross-browser, Bootstrap-styled toggle switches that represent binary states such as on/off, enabled/disabled, or true/false.
+
+### Basic usage
+
+A standard switch uses the `type="switch"` option on the `<CFormSwitch>` component.
+
+<ExampleSnippet className="theme-bootstrap" component="FormSwitchExample" componentName="React Bootstrap Switch" />
+
+### Sizing
+
+Use the `size` prop to adjust the visual scale of the switch. Available sizes include `"lg"` and `"xl"`.
+
+<ExampleSnippet className="theme-bootstrap" component="FormSwitchSizingExample" componentName="React Bootstrap Switch" />
+
+### Reverse layout
+
+Add the `reverse` prop to place the switch control after the label.
+
+<ExampleSnippet className="theme-bootstrap" component="FormSwitchReverseExample" componentName="React Bootstrap Switch" />
+
+## API reference
+
+Refer to the API documentation below for a complete list of available props for the React Bootstrap Switch component.
+
+- [&lt;CFormSwitch /&gt;](../api/#cformswitch)
diff --git a/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx b/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx
new file mode 100644
index 00000000..560faaf8
--- /dev/null
+++ b/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CFormSwitch } from '@coreui/react'
+
+export const FormSwitchExample = () => {
+  return (
+    <>
+      <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
+      <CFormSwitch
+        label="Checked switch checkbox input"
+        id="formSwitchCheckChecked"
+        defaultChecked
+      />
+      <CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled />
+      <CFormSwitch
+        label="Disabled checked switch checkbox input"
+        id="formSwitchCheckCheckedDisabled"
+        defaultChecked
+        disabled
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx b/packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx
new file mode 100644
index 00000000..c65883fc
--- /dev/null
+++ b/packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CFormSwitch } from '@coreui/react'
+
+export const FormSwitchReverseExample = () => {
+  return (
+    <>
+      <CFormSwitch reverse type="radio" id="reverseFormSwitch1" label="Reverse switch" />
+      <CFormSwitch
+        reverse
+        type="radio"
+        id="reverseFormSwitch2"
+        label="Disabled reverse switch"
+        disabled
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx b/packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx
new file mode 100644
index 00000000..b1dc4955
--- /dev/null
+++ b/packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CFormSwitch } from '@coreui/react'
+
+export const FormSwitchSizingExample = () => {
+  return (
+    <>
+      <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefaultNormal" />
+      <CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg" />
+      <CFormSwitch
+        size="xl"
+        label="Extra large switch checkbox input"
+        id="formSwitchCheckDefaultXL"
+      />
+    </>
+  )
+}
diff --git a/packages/docs/content/forms/switch/index.mdx b/packages/docs/content/forms/switch/index.mdx
new file mode 100644
index 00000000..d0fbcefc
--- /dev/null
+++ b/packages/docs/content/forms/switch/index.mdx
@@ -0,0 +1,35 @@
+---
+title: React Switch Components
+name: Switch
+description: Create consistent cross-browser and cross-device switch component.
+route: /forms/switch/
+other_frameworks: switch
+---
+
+## About
+
+React Switch Components are a type of UI component that allows users to toggle between two states, usually represented as "on" or "off", "enabled" or "disabled", or "checked" or "unchecked".
+
+When a user interacts with the component by clicking or tapping on it, the switch toggles its state, triggering an action or changing the appearance of the component. This type of component is often used in forms, settings panels, and other places where users need to turn something on or off or choose between two options.
+
+## Example
+
+<ExampleSnippet component="FormSwitchExample" componentName="React Switch Input" />
+
+## Sizing
+
+Larger or smaller react switches? Add `size="lg"` or `size="xl"` for additional sizes.
+
+<ExampleSnippet component="FormSwitchSizingExample" componentName="React Switch Input" />
+
+## Reverse 
+
+Put your switches on the opposite side by adding `reverse` boolean property.
+
+<ExampleSnippet component="FormSwitchReverseExample" componentName="React Switch Input" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CFormSwitch /&gt;](./api/#cformswitch)
diff --git a/packages/docs/content/forms/switch/styling.mdx b/packages/docs/content/forms/switch/styling.mdx
new file mode 100644
index 00000000..a27170e8
--- /dev/null
+++ b/packages/docs/content/forms/switch/styling.mdx
@@ -0,0 +1,10 @@
+---
+title: React Switch Component Styling
+name: Switch Styling
+description: Learn how to customize the React Switch component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/switch/
+---
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-switch-variables" />
diff --git a/packages/docs/content/forms/textarea.mdx b/packages/docs/content/forms/textarea.mdx
deleted file mode 100644
index 8af0c457..00000000
--- a/packages/docs/content/forms/textarea.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: React Form Text Component
-name: Form control
-description: React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
-menu: Forms
-route: /forms/textarea
-other_frameworks: textarea
----
-
-import {
-  CButton,
-  CForm,
-  CFormFloating,
-  CFormInput,
-  CFormLabel,
-  CFormText,
-  CFormTextarea,
-  CCol,
-  CRow,
-} from '@coreui/react/src/index'
-
-## Example
-
-```jsx preview
-<CForm>
-  <CFormTextarea
-    id="exampleFormControlTextarea1"
-    label="Example textarea"
-    rows={3}
-    text="Must be 8-20 words long."
-  ></CFormTextarea>
-</CForm>
-```
-
-If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
-
-```jsx
-<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
-<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
-<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
-```
-
-## Disabled
-
-Add the `disabled` boolean attribute on an textarea to give it a grayed out appearance and remove pointer events.
-
-```jsx preview
-<CFormTextarea
-  className="mb-3"
-  placeholder="Disabled textarea"
-  aria-label="Disabled textarea example"
-  disabled
-></CFormTextarea>
-```
-
-## Readonly
-
-Add the `readOnly` boolean attribute on an textarea to prevent modification of the textarea's value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.
-
-```jsx preview
-<CFormTextarea
-  placeholder="Readonly textarea"
-  aria-label="Readonly textarea example"
-  disabled
-  readOnly
-></CFormTextarea>
-```
-
-## Customizing
-
-### SASS variables
-
-`$input-*` are shared across most of our form controls (and not buttons).
-
-<ScssDocs file="_variables.scss" capture="form-input-variables" />
-
-`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
-
-<ScssDocs file="_variables.scss" capture="form-label-variables" />
-
-<ScssDocs file="_variables.scss" capture="form-text-variables" />
-
-## API
-
-### CFormTextarea
-
-`markdown:CFormTextarea.api.mdx`
-
-### CFormFeedback
-
-`markdown:CFormFeedback.api.mdx`
-
-### CFormLabel
-
-`markdown:CFormLabel.api.mdx`
-
-### CFormText
-
-`markdown:CFormText.api.mdx`
diff --git a/packages/docs/content/forms/textarea/api.mdx b/packages/docs/content/forms/textarea/api.mdx
new file mode 100644
index 00000000..733f0a55
--- /dev/null
+++ b/packages/docs/content/forms/textarea/api.mdx
@@ -0,0 +1,27 @@
+---
+title: React Form Textarea Component API
+name: Form Textarea API
+description: Explore the API reference for the React Form Textarea component and discover how to effectively utilize its props for customization.
+route: /forms/textarea/
+---
+
+import CFormTextareaAPI from '../../api/CFormTextarea.api.mdx'
+import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
+import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
+import CFormTextAPI from '../../api/CFormText.api.mdx'
+
+## CFormTextarea
+
+<CFormTextareaAPI />
+
+## CFormFeedback
+
+<CFormFeedbackAPI />
+
+## CFormLabel
+
+<CFormLabelAPI />
+
+## CFormText
+
+<CFormTextAPI />
diff --git a/packages/docs/content/forms/textarea/bootstrap.mdx b/packages/docs/content/forms/textarea/bootstrap.mdx
new file mode 100644
index 00000000..9af3cec1
--- /dev/null
+++ b/packages/docs/content/forms/textarea/bootstrap.mdx
@@ -0,0 +1,47 @@
+---
+title: React Bootstrap Textarea Component
+name: Form Textarea with Bootstrap Styling
+description: Learn how to style and enhance Bootstrap-style textarea fields in React using CoreUI components with custom sizing, disabled states, and validation feedback.
+route: /forms/textarea/
+other_frameworks: textarea
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Textarea component
+
+Use `<CFormTextarea>` to create multi-line text inputs in your forms, styled to match Bootstrap’s design system.
+
+### Basic example
+
+Use the component with a label and help text for accessibility and usability.
+
+<ExampleSnippet className="theme-bootstrap" component="FormTextareaExample" componentName="React Bootstrap Textarea" />
+
+You can also build the same structure manually using individual form components:
+
+```jsx
+<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
+<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
+<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
+```
+
+### Disabled state
+
+Add the `disabled` prop to make the textarea inactive and visually grayed out.
+
+<ExampleSnippet className="theme-bootstrap" component="FormTextareaDisabledExample" componentName="React Bootstrap Textarea" />
+
+### Read-only
+
+Use the `readOnly` prop to prevent edits while still allowing text selection and copying.
+
+<ExampleSnippet className="theme-bootstrap" component="FormTextareaReadonlyExample" componentName="React Bootstrap Textarea" />
+
+## API reference
+
+Refer to the API documentation below for a complete list of available props and subcomponents used to build Bootstrap-style textareas in React.
+
+- [&lt;CFormTextarea /&gt;](../api/#cformtextarea)
+- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
+- [&lt;CFormLabel /&gt;](../api/#cformlabel)
+- [&lt;CFormText /&gt;](../api/#cformtext)
diff --git a/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx b/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx
new file mode 100644
index 00000000..abc7ab18
--- /dev/null
+++ b/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormTextarea } from '@coreui/react'
+
+export const FormTextareaDisabledExample = () => {
+  return (
+    <CFormTextarea
+      className="mb-3"
+      placeholder="Disabled textarea"
+      aria-label="Disabled textarea example"
+      disabled
+    ></CFormTextarea>
+  )
+}
diff --git a/packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx b/packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx
new file mode 100644
index 00000000..369a6a3f
--- /dev/null
+++ b/packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CForm, CFormTextarea } from '@coreui/react'
+
+export const FormTextareaExample = () => {
+  return (
+    <CForm>
+      <CFormTextarea
+        id="exampleFormControlTextarea1"
+        label="Example textarea"
+        rows={3}
+        text="Must be 8-20 words long."
+      ></CFormTextarea>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx b/packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx
new file mode 100644
index 00000000..41ae2daf
--- /dev/null
+++ b/packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CFormTextarea } from '@coreui/react'
+
+export const FormTextareaReadonlyExample = () => {
+  return (
+    <CFormTextarea
+      placeholder="Readonly textarea"
+      aria-label="Readonly textarea example"
+      disabled
+      readOnly
+    ></CFormTextarea>
+  )
+}
diff --git a/packages/docs/content/forms/textarea/index.mdx b/packages/docs/content/forms/textarea/index.mdx
new file mode 100644
index 00000000..eea522bb
--- /dev/null
+++ b/packages/docs/content/forms/textarea/index.mdx
@@ -0,0 +1,41 @@
+---
+title: React Form Textarea Component
+name: Form Textarea
+description: React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
+menu: Forms/
+route: /forms/textarea/
+other_frameworks: textarea
+---
+
+## Example
+
+<ExampleSnippet component="FormTextareaExample" componentName="React Form Textarea" />
+
+If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
+
+```jsx
+<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
+<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
+<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
+```
+
+## Disabled
+
+Add the `disabled` boolean attribute on an textarea to give it a grayed out appearance and remove pointer events.
+
+<ExampleSnippet component="FormTextareaDisabledExample" componentName="React Form Textarea" />
+
+## Readonly
+
+Add the `readOnly` boolean attribute on an textarea to prevent modification of the textarea's value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.
+
+<ExampleSnippet component="FormTextareaReadonlyExample" componentName="React Form Textarea" />
+
+## API
+
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+
+- [&lt;CFormTextarea /&gt;](./api/#cformtextarea)
+- [&lt;CFormFeedback /&gt;](./api/#cformfeedback)
+- [&lt;CFormLabel /&gt;](./api/#cformlabel)
+- [&lt;CFormText /&gt;](./api/#cformtext)
diff --git a/packages/docs/content/forms/textarea/styling.mdx b/packages/docs/content/forms/textarea/styling.mdx
new file mode 100644
index 00000000..d257b17b
--- /dev/null
+++ b/packages/docs/content/forms/textarea/styling.mdx
@@ -0,0 +1,18 @@
+---
+title: React Textarea Component Styling
+name: Textarea Styling
+description: Learn how to customize the React Textarea component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/input/
+---
+
+### SASS variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+<ScssDocs file="_variables.scss" capture="form-input-variables" />
+
+`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
+
+<ScssDocs file="_variables.scss" capture="form-label-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-text-variables" />
diff --git a/packages/docs/content/forms/validation.mdx b/packages/docs/content/forms/validation.mdx
deleted file mode 100644
index 17020582..00000000
--- a/packages/docs/content/forms/validation.mdx
+++ /dev/null
@@ -1,697 +0,0 @@
----
-title: React Form Validation
-name: Validation
-description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
-menu: Forms
-route: /forms/validation
----
-
-import { useState } from 'react'
-
-import {
-  CButton,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CForm,
-  CFormCheck,
-  CFormInput,
-  CFormFeedback,
-  CFormLabel,
-  CFormSelect,
-  CFormTextarea,
-  CInputGroup,
-  CInputGroupText,
-  CCol,
-  CRow,
-} from '@coreui/react/src/index'
-
-## Example
-
-For custom CoreUI form validation messages, you'll need to add the `noValidate` boolean property to your `<CForm>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
-
-Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.
-
-export const CustomStylesExample = () => {
-  const [validated, setValidated] = useState(false)
-  const handleSubmit = (event) => {
-    const form = event.currentTarget
-    if (form.checkValidity() === false) {
-      event.preventDefault()
-      event.stopPropagation()
-    }
-    setValidated(true)
-  }
-  return (
-    <CForm
-      className="row g-3 needs-validation"
-      noValidate
-      validated={validated}
-      onSubmit={handleSubmit}
-    >
-      <CCol md={4}>
-        <CFormInput
-          type="text"
-          defaultValue="Mark"
-          feedbackValid="Looks good!"
-          id="validationCustom01"
-          label="First name"
-          required
-        />
-      </CCol>
-      <CCol md={4}>
-        <CFormInput
-          type="text"
-          defaultValue="Otto"
-          feedbackValid="Looks good!"
-          id="validationCustom02"
-          label="First name"
-          required
-        />
-      </CCol>
-      <CCol md={4}>
-        <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
-        <CInputGroup className="has-validation">
-          <CInputGroupText>@</CInputGroupText>
-          <CFormInput
-            type="text"
-            aria-describedby="inputGroupPrependFeedback"
-            feedbackValid="Please choose a username."
-            id="validationCustomUsername"
-            required
-          />
-        </CInputGroup>
-      </CCol>
-      <CCol md={6}>
-        <CFormInput
-          type="text"
-          aria-describedby="validationCustom03Feedback"
-          feedbackInvalid="Please provide a valid city."
-          id="validationCustom03"
-          label="City"
-          required
-        />
-      </CCol>
-      <CCol md={3}>
-        <CFormSelect
-          aria-describedby="validationCustom04Feedback"
-          feedbackInvalid="Please select a valid state."
-          id="validationCustom04"
-          label="State"
-          required
-        >
-          <option selected="" disabled="" value="">
-            Choose...
-          </option>
-          <option>...</option>
-        </CFormSelect>
-      </CCol>
-      <CCol md={3}>
-        <CFormInput
-          type="text"
-          aria-describedby="validationCustom05Feedback"
-          feedbackInvalid="Please provide a valid zip."
-          id="validationCustom05"
-          label="Zip"
-          required
-        />
-      </CCol>
-      <CCol xs={12}>
-        <CFormCheck
-          type="checkbox"
-          id="invalidCheck"
-          label="Agree to terms and conditions"
-          required
-        />
-        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
-      </CCol>
-      <CCol xs={12}>
-        <CButton color="primary" type="submit">
-          Submit form
-        </CButton>
-      </CCol>
-    </CForm>
-  )
-}
-
-<Example>
-  <CustomStylesExample />
-</Example>
-
-```jsx
-const [validated, setValidated] = useState(false)
-const handleSubmit = (event) => {
-  const form = event.currentTarget
-  if (form.checkValidity() === false) {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-  setValidated(true)
-}
-return (
-  <CForm
-    className="row g-3 needs-validation"
-    noValidate
-    validated={validated}
-    onSubmit={handleSubmit}
-  >
-    <CCol md={4}>
-      <CFormInput
-        type="text"
-        defaultValue="Mark"
-        feedbackValid="Looks good!"
-        id="validationCustom01"
-        label="First name"
-        required
-      />
-    </CCol>
-    <CCol md={4}>
-      <CFormInput
-        type="text"
-        defaultValue="Otto"
-        feedbackValid="Looks good!"
-        id="validationCustom02"
-        label="First name"
-        required
-      />
-    </CCol>
-    <CCol md={4}>
-      <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
-      <CInputGroup className="has-validation">
-        <CInputGroupText>@</CInputGroupText>
-        <CFormInput
-          type="text"
-          aria-describedby="inputGroupPrependFeedback"
-          feedbackValid="Please choose a username."
-          id="validationCustomUsername"
-          required
-        />
-      </CInputGroup>
-    </CCol>
-    <CCol md={6}>
-      <CFormInput
-        type="text"
-        aria-describedby="validationCustom03Feedback"
-        feedbackInvalid="Please provide a valid city."
-        id="validationCustom03"
-        label="City"
-        required
-      />
-    </CCol>
-    <CCol md={3}>
-      <CFormSelect
-        aria-describedby="validationCustom04Feedback"
-        feedbackInvalid="Please select a valid state."
-        id="validationCustom04"
-        label="State"
-        required
-      >
-        <option disabled>Choose...</option>
-        <option>...</option>
-      </CFormSelect>
-    </CCol>
-    <CCol md={3}>
-      <CFormInput
-        type="text"
-        aria-describedby="validationCustom05Feedback"
-        feedbackInvalid="Please provide a valid zip."
-        id="validationCustom05"
-        label="Zip"
-        required
-      />
-    </CCol>
-    <CCol xs={12}>
-      <CFormCheck
-        type="checkbox"
-        id="invalidCheck"
-        label="Agree to terms and conditions"
-        required
-      />
-      <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
-    </CCol>
-    <CCol xs={12}>
-      <CButton color="primary" type="submit">
-        Submit form
-      </CButton>
-    </CCol>
-  </CForm>
-)
-```
-
-## Browser defaults
-
-Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.
-
-While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
-
-```jsx preview
-<CForm className="row g-3">
-  <CCol md={4}>
-    <CFormInput
-      type="text"
-      id="validationDefault01"
-      label="First name"
-      defaultValue="Mark"
-      required
-    />
-  </CCol>
-  <CCol md={4}>
-    <CFormInput
-      type="text"
-      id="validationDefault02"
-      label="Last name"
-      defaultValue="Otto"
-      required
-    />
-  </CCol>
-  <CCol md={4}>
-    <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
-    <CInputGroup>
-      <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
-      <CFormInput
-        type="text"
-        id="validationDefaultUsername"
-        defaultValue=""
-        aria-describedby="inputGroupPrepend02"
-        required
-      />
-    </CInputGroup>
-  </CCol>
-  <CCol md={6}>
-    <CFormInput type="text" id="validationDefault03" label="City" required />
-  </CCol>
-  <CCol md={3}>
-    <CFormSelect id="validationDefault04" label="State">
-      <option disabled>Choose...</option>
-      <option>...</option>
-    </CFormSelect>
-  </CCol>
-  <CCol md={3}>
-    <CFormInput type="text" id="validationDefault05" label="Zip" required />
-  </CCol>
-  <CCol xs={12}>
-    <CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required />
-  </CCol>
-  <CCol xs={12}>
-    <CButton color="primary" type="submit">
-      Submit form
-    </CButton>
-  </CCol>
-</CForm>
-```
-
-## Custom validation
-
-In case you require custom or server-side validation, you can indicate invalid and valid form fields with `invalid` and `valid` boolean properties.
-
-For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
-
-```jsx preview
-<CForm className="row g-3">
-  <CCol md={4}>
-    <CFormInput
-      type="text"
-      id="validationServer01"
-      label="Email"
-      feedback="Looks good!"
-      defaultValue="name@surname.com"
-      valid
-      required
-    />
-  </CCol>
-  <CCol md={4}>
-    <CFormInput
-      type="text"
-      id="validationServer02"
-      label="Repeat email"
-      feedback="Looks good!"
-      defaultValue="name@surname.com"
-      valid
-      required
-    />
-  </CCol>
-  <CCol md={4}>
-    <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
-    <CInputGroup className="has-validation">
-      <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
-      <CFormInput
-        type="text"
-        id="validationServerUsername"
-        feedback="Please choose a username."
-        defaultValue=""
-        aria-describedby="inputGroupPrepend03"
-        invalid
-        required
-      />
-    </CInputGroup>
-  </CCol>
-  <CCol md={6}>
-    <CFormInput
-      type="text"
-      id="validationServer03"
-      label="City"
-      feedback="Please provide a valid city."
-      invalid
-      required
-    />
-  </CCol>
-  <CCol md={3}>
-    <CFormSelect
-      id="validationServer04"
-      label="State"
-      feedback="Please provide a valid city."
-      invalid
-    >
-      <option disabled>Choose...</option>
-      <option>...</option>
-    </CFormSelect>
-  </CCol>
-  <CCol md={3}>
-    <CFormInput
-      type="text"
-      id="validationServer05"
-      label="zip"
-      feedback="Please provide a valid zip."
-      invalid
-      required
-    />
-  </CCol>
-  <CCol xs={12}>
-    <CFormCheck
-      type="checkbox"
-      id="invalidCheck"
-      label="Agree to terms and conditions"
-      invalid
-      required
-    />
-    <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
-  </CCol>
-  <CCol xs={12}>
-    <CButton color="primary" type="submit">
-      Submit form
-    </CButton>
-  </CCol>
-</CForm>
-```
-
-## Supported elements
-
-Validation styles are available for the following form controls and components:
-
-- `<CFormCheck>`s
-- `<CFormInput>`s
-- `<CFormSelect>`s
-- `<CFormTextarea>`s
-
-```jsx preview
-<CForm validated={true}>
-  <div className="mb-3">
-    <CFormTextarea
-      feedbackInvalid="Please enter a message in the textarea."
-      id="validationTextarea"
-      label="Textarea"
-      placeholder="Required example textarea"
-      required
-    ></CFormTextarea>
-  </div>
-  <CFormCheck
-    className="mb-3"
-    id="validationFormCheck1"
-    label="Check this checkbox"
-    feedbackInvalid="Example invalid feedback text"
-    required
-  />
-  <CFormCheck
-    type="radio"
-    name="radio-stacked"
-    id="validationFormCheck2"
-    label="Check this checkbox"
-    required
-  />
-  <CFormCheck
-    className="mb-3"
-    type="radio"
-    name="radio-stacked"
-    id="validationFormCheck3"
-    label="Or toggle this other radio"
-    feedbackInvalid="More example invalid feedback text"
-    required
-  />
-  <div className="mb-3">
-    <CFormSelect
-      feedbackInvalid="Example invalid select feedback"
-      aria-label="select example"
-      required
-    >
-      <option selected="" value="">
-        Open this select menu
-      </option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-    </CFormSelect>
-  </div>
-  <div className="mb-3">
-    <CFormInput
-      type="file"
-      id="validationTextarea"
-      feedbackInvalid="Example invalid form file feedback"
-      aria-label="file example"
-      required
-    />
-  </div>
-  <div className="mb-3">
-    <CButton type="submit" color="primary" disabled>
-      Submit form
-    </CButton>
-  </div>
-</CForm>
-```
-
-## Tooltips
-
-If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
-
-export const TooltipsExample = () => {
-  const [validated, setValidated] = useState(false)
-  const handleSubmit = (event) => {
-    const form = event.currentTarget
-    if (form.checkValidity() === false) {
-      event.preventDefault()
-      event.stopPropagation()
-    }
-    setValidated(true)
-  }
-  return (
-    <CForm
-      className="row g-3 needs-validation"
-      noValidate
-      validated={validated}
-      onSubmit={handleSubmit}
-    >
-      <CCol md={4} className="position-relative">
-        <CFormInput
-          type="text"
-          defaultValue="Mark"
-          feedbackValid="Looks good!"
-          id="validationTooltip01"
-          label="First name"
-          required
-          tooltipFeedback
-        />
-      </CCol>
-      <CCol md={4} className="position-relative">
-        <CFormInput
-          type="text"
-          defaultValue="Otto"
-          feedbackValid="Looks good!"
-          id="validationTooltip02"
-          label="First name"
-          required
-          tooltipFeedback
-        />
-      </CCol>
-      <CCol md={4} className="position-relative">
-        <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
-        <CInputGroup className="has-validation">
-          <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-          <CFormInput
-            type="text"
-            aria-describedby="inputGroupPrependFeedback"
-            feedbackInvalid="Please choose a username."
-            id="validationTooltipUsername"
-            required
-            tooltipFeedback
-          />
-        </CInputGroup>
-      </CCol>
-      <CCol md={6} className="position-relative">
-        <CFormInput
-          type="text"
-          aria-describedby="validationTooltip03Feedback"
-          feedbackInvalid="Please provide a valid city."
-          id="validationTooltip03"
-          label="City"
-          required
-          tooltipFeedback
-        />
-      </CCol>
-      <CCol md={3} className="position-relative">
-        <CFormSelect
-          aria-describedby="validationTooltip04Feedback"
-          feedbackInvalid="Please select a valid state."
-          id="validationTooltip04"
-          label="State"
-          required
-          tooltipFeedback
-        >
-          <option selected="" disabled="" value="">
-            Choose...
-          </option>
-          <option>...</option>
-        </CFormSelect>
-      </CCol>
-      <CCol md={3} className="position-relative">
-        <CFormInput
-          type="text"
-          aria-describedby="validationTooltip05Feedback"
-          feedbackInvalid="Please provide a valid zip."
-          id="validationTooltip05"
-          label="Zip"
-          required
-          tooltipFeedback
-        />
-      </CCol>
-      <CCol xs={12} className="position-relative">
-        <CButton color="primary" type="submit">
-          Submit form
-        </CButton>
-      </CCol>
-    </CForm>
-  )
-}
-
-<Example>
-  <TooltipsExample />
-</Example>
-
-```jsx
-const [validated, setValidated] = useState(false)
-const handleSubmit = (event) => {
-  const form = event.currentTarget
-  if (form.checkValidity() === false) {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-  setValidated(true)
-}
-return (
- <CForm
-  className="row g-3 needs-validation"
-  noValidate
-  validated={validated}
-  onSubmit={handleSubmit}
->
-  <CCol md={4} className="position-relative">
-    <CFormInput
-      type="text"
-      defaultValue="Mark"
-      feedbackValid="Looks good!"
-      id="validationTooltip01"
-      label="First name"
-      required
-      tooltipFeedback
-    />
-  </CCol>
-  <CCol md={4} className="position-relative">
-    <CFormInput
-      type="text"
-      defaultValue="Otto"
-      feedbackValid="Looks good!"
-      id="validationTooltip02"
-      label="First name"
-      required
-      tooltipFeedback
-    />
-  </CCol>
-  <CCol md={4} className="position-relative">
-    <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
-    <CInputGroup className="has-validation">
-      <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-      <CFormInput
-        type="text"
-        aria-describedby="inputGroupPrependFeedback"
-        feedbackInvalid="Please choose a username."
-        id="validationTooltipUsername"
-        required
-        tooltipFeedback
-      />
-    </CInputGroup>
-  </CCol>
-  <CCol md={6} className="position-relative">
-    <CFormInput
-      type="text"
-      aria-describedby="validationTooltip03Feedback"
-      feedbackInvalid="Please provide a valid city."
-      id="validationTooltip03"
-      label="City"
-      required
-      tooltipFeedback
-    />
-  </CCol>
-  <CCol md={3} className="position-relative">
-    <CFormSelect
-      aria-describedby="validationTooltip04Feedback"
-      feedbackInvalid="Please select a valid state."
-      id="validationTooltip04"
-      label="State"
-      required
-      tooltipFeedback
-    >
-      <option selected="" disabled="" value="">
-        Choose...
-      </option>
-      <option>...</option>
-    </CFormSelect>
-  </CCol>
-  <CCol md={3} className="position-relative">
-    <CFormInput
-      type="text"
-      aria-describedby="validationTooltip05Feedback"
-      feedbackInvalid="Please provide a valid zip."
-      id="validationTooltip05"
-      label="Zip"
-      required
-      tooltipFeedback
-    />
-  </CCol>
-  <CCol xs={12} className="position-relative">
-    <CButton color="primary" type="submit">
-      Submit form
-    </CButton>
-  </CCol>
-</CForm>
-)
-```
-
-## Customizing
-
-### CSS variables
-
-CoreUI for React components 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 file="_root.scss" capture="root-form-validation-variables"/>
-
-These variables are also color mode adaptive, meaning they change color while in dark mode.
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-feedback-variables" />
-
-<ScssDocs file="_variables.scss" capture="form-validation-colors" />
-
-<ScssDocs file="_variables-dark.scss" capture="form-validation-colors-dark" />
diff --git a/packages/docs/content/forms/validation/bootstrap.mdx b/packages/docs/content/forms/validation/bootstrap.mdx
new file mode 100644
index 00000000..2b3ddbfb
--- /dev/null
+++ b/packages/docs/content/forms/validation/bootstrap.mdx
@@ -0,0 +1,57 @@
+---
+title: React Bootstrap Form Validation
+name: Form Validation with Bootstrap Styling
+description: Learn how to use Bootstrap-style validation in React forms using CoreUI components. Show validation messages, use custom styles, and support native browser behavior.
+route: /forms/validation/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Form Validation
+
+React Bootstrap validation lets you provide custom or native HTML5 feedback styles for form controls. CoreUI components support both approaches for a better user experience.
+
+### Custom validation styles
+
+Disable the browser’s native validation UI with the `noValidate` prop on `<CForm>`, and use the `validated` prop to enable feedback based on custom logic. Try submitting the form below to see how validation classes like `:invalid` and `:valid` are applied.
+
+<ExampleSnippet className="theme-bootstrap" component="ValidationExample" componentName="React Bootstrap Form Validation" />
+
+### Browser default behavior
+
+If you prefer to rely on native browser validation, skip `noValidate` and `validated`. Submit the form and let the browser handle feedback based on built-in rules.
+
+<ExampleSnippet className="theme-bootstrap" component="ValidationBrowserDefaultsExample" componentName="React Bootstrap Form Validation" />
+
+### Manual validation
+
+Use the `valid` and `invalid` props directly on components like `<CFormInput>` to apply validation styles manually, which is useful for server-side validation or complex form logic.
+
+<ExampleSnippet className="theme-bootstrap" component="ValidationCustomExample" componentName="React Bootstrap Form Validation" />
+
+### Supported components
+
+These CoreUI components support Bootstrap validation classes:
+
+- `<CFormCheck>`
+- `<CFormInput>`
+- `<CFormSelect>`
+- `<CFormTextarea>`
+
+<ExampleSnippet className="theme-bootstrap" component="ValidationSupportedElementsExample" componentName="React Bootstrap Form Validation" />
+
+### Tooltip feedback
+
+For compact layouts, validation messages can appear as tooltips. Make sure the parent container has `position: relative` to position tooltips correctly.
+
+<ExampleSnippet className="theme-bootstrap" component="ValidationTooltipsExample" componentName="React Bootstrap Form Validation" />
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of the props and features available:
+
+- [&lt;CForm /&gt;](../api/#cform)
+- [&lt;CFormCheck /&gt;](../api/#cformcheck)
+- [&lt;CFormInput /&gt;](../api/#cforminput)
+- [&lt;CFormSelect /&gt;](../api/#cformselect)
+- [&lt;CFormTextarea /&gt;](../api/#cformtextarea)
+- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
diff --git a/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx b/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx
new file mode 100644
index 00000000..0ac49071
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import {
+  CCol,
+  CButton,
+  CForm,
+  CFormCheck,
+  CFormInput,
+  CFormLabel,
+  CInputGroup,
+  CInputGroupText,
+  CFormSelect,
+} from '@coreui/react'
+
+export const ValidationBrowserDefaultsExample = () => {
+  return (
+    <CForm className="row g-3">
+      <CCol md={4}>
+        <CFormInput
+          type="text"
+          id="validationDefault01"
+          label="First name"
+          defaultValue="Mark"
+          required
+        />
+      </CCol>
+      <CCol md={4}>
+        <CFormInput
+          type="text"
+          id="validationDefault02"
+          label="Last name"
+          defaultValue="Otto"
+          required
+        />
+      </CCol>
+      <CCol md={4}>
+        <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
+        <CInputGroup>
+          <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
+          <CFormInput
+            type="text"
+            id="validationDefaultUsername"
+            defaultValue=""
+            aria-describedby="inputGroupPrepend02"
+            required
+          />
+        </CInputGroup>
+      </CCol>
+      <CCol md={6}>
+        <CFormInput type="text" id="validationDefault03" label="City" required />
+      </CCol>
+      <CCol md={3}>
+        <CFormSelect id="validationDefault04" label="State">
+          <option disabled>Choose...</option>
+          <option>...</option>
+        </CFormSelect>
+      </CCol>
+      <CCol md={3}>
+        <CFormInput type="text" id="validationDefault05" label="Zip" required />
+      </CCol>
+      <CCol xs={12}>
+        <CFormCheck
+          type="checkbox"
+          id="invalidCheck"
+          label="Agree to terms and conditions"
+          required
+        />
+      </CCol>
+      <CCol xs={12}>
+        <CButton color="primary" type="submit">
+          Submit form
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx b/packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx
new file mode 100644
index 00000000..9a5c979e
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import {
+  CCol,
+  CButton,
+  CForm,
+  CFormCheck,
+  CFormFeedback,
+  CFormInput,
+  CFormLabel,
+  CInputGroup,
+  CInputGroupText,
+  CFormSelect,
+} from '@coreui/react'
+
+export const ValidationCustomExample = () => {
+  return (
+    <CForm className="row g-3">
+      <CCol md={4}>
+        <CFormInput
+          type="text"
+          id="validationServer01"
+          label="Email"
+          feedback="Looks good!"
+          defaultValue="name@surname.com"
+          valid
+          required
+        />
+      </CCol>
+      <CCol md={4}>
+        <CFormInput
+          type="text"
+          id="validationServer02"
+          label="Repeat email"
+          feedback="Looks good!"
+          defaultValue="name@surname.com"
+          valid
+          required
+        />
+      </CCol>
+      <CCol md={4}>
+        <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
+        <CInputGroup className="has-validation">
+          <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
+          <CFormInput
+            type="text"
+            id="validationServerUsername"
+            feedback="Please choose a username."
+            defaultValue=""
+            aria-describedby="inputGroupPrepend03"
+            invalid
+            required
+          />
+        </CInputGroup>
+      </CCol>
+      <CCol md={6}>
+        <CFormInput
+          type="text"
+          id="validationServer03"
+          label="City"
+          feedback="Please provide a valid city."
+          invalid
+          required
+        />
+      </CCol>
+      <CCol md={3}>
+        <CFormSelect
+          id="validationServer04"
+          label="State"
+          feedback="Please provide a valid city."
+          invalid
+        >
+          <option disabled>Choose...</option>
+          <option>...</option>
+        </CFormSelect>
+      </CCol>
+      <CCol md={3}>
+        <CFormInput
+          type="text"
+          id="validationServer05"
+          label="zip"
+          feedback="Please provide a valid zip."
+          invalid
+          required
+        />
+      </CCol>
+      <CCol xs={12}>
+        <CFormCheck
+          type="checkbox"
+          id="invalidCheck"
+          label="Agree to terms and conditions"
+          invalid
+          required
+        />
+        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
+      </CCol>
+      <CCol xs={12}>
+        <CButton color="primary" type="submit">
+          Submit form
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationExample.jsx b/packages/docs/content/forms/validation/examples/ValidationExample.jsx
new file mode 100644
index 00000000..903851b1
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationExample.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import {
+  CCol,
+  CButton,
+  CForm,
+  CFormCheck,
+  CFormFeedback,
+  CFormInput,
+  CFormLabel,
+  CInputGroup,
+  CInputGroupText,
+  CFormSelect,
+} from '@coreui/react'
+
+export const ValidationExample = () => {
+  const [validated, setValidated] = useState(false)
+  const handleSubmit = (event) => {
+    const form = event.currentTarget
+    if (form.checkValidity() === false) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    setValidated(true)
+  }
+
+  return (
+    <CForm
+      className="row g-3 needs-validation"
+      noValidate
+      validated={validated}
+      onSubmit={handleSubmit}
+    >
+      <CCol md={4}>
+        <CFormInput
+          type="text"
+          defaultValue="Mark"
+          feedbackValid="Looks good!"
+          id="validationCustom01"
+          label="First name"
+          required
+        />
+      </CCol>
+      <CCol md={4}>
+        <CFormInput
+          type="text"
+          defaultValue="Otto"
+          feedbackValid="Looks good!"
+          id="validationCustom02"
+          label="First name"
+          required
+        />
+      </CCol>
+      <CCol md={4}>
+        <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
+        <CInputGroup className="has-validation">
+          <CInputGroupText>@</CInputGroupText>
+          <CFormInput
+            type="text"
+            aria-describedby="inputGroupPrependFeedback"
+            feedbackValid="Please choose a username."
+            id="validationCustomUsername"
+            required
+          />
+        </CInputGroup>
+      </CCol>
+      <CCol md={6}>
+        <CFormInput
+          type="text"
+          aria-describedby="validationCustom03Feedback"
+          feedbackInvalid="Please provide a valid city."
+          id="validationCustom03"
+          label="City"
+          required
+        />
+      </CCol>
+      <CCol md={3}>
+        <CFormSelect
+          aria-describedby="validationCustom04Feedback"
+          feedbackInvalid="Please select a valid state."
+          id="validationCustom04"
+          label="State"
+          required
+        >
+          <option disabled>Choose...</option>
+          <option>...</option>
+        </CFormSelect>
+      </CCol>
+      <CCol md={3}>
+        <CFormInput
+          type="text"
+          aria-describedby="validationCustom05Feedback"
+          feedbackInvalid="Please provide a valid zip."
+          id="validationCustom05"
+          label="Zip"
+          required
+        />
+      </CCol>
+      <CCol xs={12}>
+        <CFormCheck
+          type="checkbox"
+          id="invalidCheck"
+          label="Agree to terms and conditions"
+          required
+        />
+        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
+      </CCol>
+      <CCol xs={12}>
+        <CButton color="primary" type="submit">
+          Submit form
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationExample.tsx b/packages/docs/content/forms/validation/examples/ValidationExample.tsx
new file mode 100644
index 00000000..8ab9ce35
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationExample.tsx
@@ -0,0 +1,115 @@
+import React, { FormEvent, useState } from 'react'
+import {
+  CCol,
+  CButton,
+  CForm,
+  CFormCheck,
+  CFormFeedback,
+  CFormInput,
+  CFormLabel,
+  CInputGroup,
+  CInputGroupText,
+  CFormSelect,
+} from '@coreui/react'
+
+export const ValidationExample = () => {
+  const [validated, setValidated] = useState(false)
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    const form = event.currentTarget
+    if (form.checkValidity() === false) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    setValidated(true)
+  }
+
+  return (
+    <CForm
+      className="row g-3 needs-validation"
+      noValidate
+      validated={validated}
+      onSubmit={handleSubmit}
+    >
+      <CCol md={4}>
+        <CFormInput
+          type="text"
+          defaultValue="Mark"
+          feedbackValid="Looks good!"
+          id="validationCustom01"
+          label="First name"
+          required
+        />
+      </CCol>
+      <CCol md={4}>
+        <CFormInput
+          type="text"
+          defaultValue="Otto"
+          feedbackValid="Looks good!"
+          id="validationCustom02"
+          label="First name"
+          required
+        />
+      </CCol>
+      <CCol md={4}>
+        <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
+        <CInputGroup className="has-validation">
+          <CInputGroupText>@</CInputGroupText>
+          <CFormInput
+            type="text"
+            aria-describedby="inputGroupPrependFeedback"
+            feedbackValid="Please choose a username."
+            id="validationCustomUsername"
+            required
+          />
+        </CInputGroup>
+      </CCol>
+      <CCol md={6}>
+        <CFormInput
+          type="text"
+          aria-describedby="validationCustom03Feedback"
+          feedbackInvalid="Please provide a valid city."
+          id="validationCustom03"
+          label="City"
+          required
+        />
+      </CCol>
+      <CCol md={3}>
+        <CFormSelect
+          aria-describedby="validationCustom04Feedback"
+          feedbackInvalid="Please select a valid state."
+          id="validationCustom04"
+          label="State"
+          required
+        >
+          <option disabled>Choose...</option>
+          <option>...</option>
+        </CFormSelect>
+      </CCol>
+      <CCol md={3}>
+        <CFormInput
+          type="text"
+          aria-describedby="validationCustom05Feedback"
+          feedbackInvalid="Please provide a valid zip."
+          id="validationCustom05"
+          label="Zip"
+          required
+        />
+      </CCol>
+      <CCol xs={12}>
+        <CFormCheck
+          type="checkbox"
+          id="invalidCheck"
+          label="Agree to terms and conditions"
+          required
+        />
+        <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
+      </CCol>
+      <CCol xs={12}>
+        <CButton color="primary" type="submit">
+          Submit form
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx b/packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx
new file mode 100644
index 00000000..5d688f21
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { CButton, CForm, CFormCheck, CFormInput, CFormSelect, CFormTextarea } from '@coreui/react'
+
+export const ValidationSupportedElementsExample = () => {
+  return (
+    <CForm validated={true}>
+      <div className="mb-3">
+        <CFormTextarea
+          feedbackInvalid="Please enter a message in the textarea."
+          id="validationTextarea"
+          label="Textarea"
+          placeholder="Required example textarea"
+          required
+        ></CFormTextarea>
+      </div>
+      <CFormCheck
+        className="mb-3"
+        id="validationFormCheck1"
+        label="Check this checkbox"
+        feedbackInvalid="Example invalid feedback text"
+        required
+      />
+      <CFormCheck
+        type="radio"
+        name="radio-stacked"
+        id="validationFormCheck2"
+        label="Check this checkbox"
+        required
+      />
+      <CFormCheck
+        className="mb-3"
+        type="radio"
+        name="radio-stacked"
+        id="validationFormCheck3"
+        label="Or toggle this other radio"
+        feedbackInvalid="More example invalid feedback text"
+        required
+      />
+      <div className="mb-3">
+        <CFormSelect
+          feedbackInvalid="Example invalid select feedback"
+          aria-label="select example"
+          required
+        >
+          <option selected value="">
+            Open this select menu
+          </option>
+          <option value="1">One</option>
+          <option value="2">Two</option>
+          <option value="3">Three</option>
+        </CFormSelect>
+      </div>
+      <div className="mb-3">
+        <CFormInput
+          type="file"
+          id="validationTextarea"
+          feedbackInvalid="Example invalid form file feedback"
+          aria-label="file example"
+          required
+        />
+      </div>
+      <div className="mb-3">
+        <CButton type="submit" color="primary" disabled>
+          Submit form
+        </CButton>
+      </div>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx b/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx
new file mode 100644
index 00000000..d4a6d40a
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+import {
+  CCol,
+  CButton,
+  CForm,
+  CFormInput,
+  CFormLabel,
+  CInputGroup,
+  CInputGroupText,
+  CFormSelect,
+} from '@coreui/react'
+
+export const ValidationTooltipsExample = () => {
+  const [validated, setValidated] = useState(false)
+  const handleSubmit = (event) => {
+    const form = event.currentTarget
+    if (form.checkValidity() === false) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    setValidated(true)
+  }
+
+  return (
+    <CForm
+      className="row g-3 needs-validation"
+      noValidate
+      validated={validated}
+      onSubmit={handleSubmit}
+    >
+      <CCol md={4} className="position-relative">
+        <CFormInput
+          type="text"
+          defaultValue="Mark"
+          feedbackValid="Looks good!"
+          id="validationTooltip01"
+          label="First name"
+          required
+          tooltipFeedback
+        />
+      </CCol>
+      <CCol md={4} className="position-relative">
+        <CFormInput
+          type="text"
+          defaultValue="Otto"
+          feedbackValid="Looks good!"
+          id="validationTooltip02"
+          label="First name"
+          required
+          tooltipFeedback
+        />
+      </CCol>
+      <CCol md={4} className="position-relative">
+        <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
+        <CInputGroup className="has-validation">
+          <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
+          <CFormInput
+            type="text"
+            aria-describedby="inputGroupPrependFeedback"
+            feedbackInvalid="Please choose a username."
+            id="validationTooltipUsername"
+            required
+            tooltipFeedback
+          />
+        </CInputGroup>
+      </CCol>
+      <CCol md={6} className="position-relative">
+        <CFormInput
+          type="text"
+          aria-describedby="validationTooltip03Feedback"
+          feedbackInvalid="Please provide a valid city."
+          id="validationTooltip03"
+          label="City"
+          required
+          tooltipFeedback
+        />
+      </CCol>
+      <CCol md={3} className="position-relative">
+        <CFormSelect
+          aria-describedby="validationTooltip04Feedback"
+          feedbackInvalid="Please select a valid state."
+          id="validationTooltip04"
+          label="State"
+          required
+          tooltipFeedback
+        >
+          <option selected disabled value="">
+            Choose...
+          </option>
+          <option>...</option>
+        </CFormSelect>
+      </CCol>
+      <CCol md={3} className="position-relative">
+        <CFormInput
+          type="text"
+          aria-describedby="validationTooltip05Feedback"
+          feedbackInvalid="Please provide a valid zip."
+          id="validationTooltip05"
+          label="Zip"
+          required
+          tooltipFeedback
+        />
+      </CCol>
+      <CCol xs={12} className="position-relative">
+        <CButton color="primary" type="submit">
+          Submit form
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx b/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx
new file mode 100644
index 00000000..b50e5f58
--- /dev/null
+++ b/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx
@@ -0,0 +1,112 @@
+import React, { FormEvent, useState } from 'react'
+import {
+  CCol,
+  CButton,
+  CForm,
+  CFormInput,
+  CFormLabel,
+  CInputGroup,
+  CInputGroupText,
+  CFormSelect,
+} from '@coreui/react'
+
+export const ValidationTooltipsExample = () => {
+  const [validated, setValidated] = useState(false)
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    const form = event.currentTarget
+    if (form.checkValidity() === false) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    setValidated(true)
+  }
+
+  return (
+    <CForm
+      className="row g-3 needs-validation"
+      noValidate
+      validated={validated}
+      onSubmit={handleSubmit}
+    >
+      <CCol md={4} className="position-relative">
+        <CFormInput
+          type="text"
+          defaultValue="Mark"
+          feedbackValid="Looks good!"
+          id="validationTooltip01"
+          label="First name"
+          required
+          tooltipFeedback
+        />
+      </CCol>
+      <CCol md={4} className="position-relative">
+        <CFormInput
+          type="text"
+          defaultValue="Otto"
+          feedbackValid="Looks good!"
+          id="validationTooltip02"
+          label="First name"
+          required
+          tooltipFeedback
+        />
+      </CCol>
+      <CCol md={4} className="position-relative">
+        <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
+        <CInputGroup className="has-validation">
+          <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
+          <CFormInput
+            type="text"
+            aria-describedby="inputGroupPrependFeedback"
+            feedbackInvalid="Please choose a username."
+            id="validationTooltipUsername"
+            required
+            tooltipFeedback
+          />
+        </CInputGroup>
+      </CCol>
+      <CCol md={6} className="position-relative">
+        <CFormInput
+          type="text"
+          aria-describedby="validationTooltip03Feedback"
+          feedbackInvalid="Please provide a valid city."
+          id="validationTooltip03"
+          label="City"
+          required
+          tooltipFeedback
+        />
+      </CCol>
+      <CCol md={3} className="position-relative">
+        <CFormSelect
+          aria-describedby="validationTooltip04Feedback"
+          feedbackInvalid="Please select a valid state."
+          id="validationTooltip04"
+          label="State"
+          required
+          tooltipFeedback
+        >
+          <option selected disabled value="">
+            Choose...
+          </option>
+          <option>...</option>
+        </CFormSelect>
+      </CCol>
+      <CCol md={3} className="position-relative">
+        <CFormInput
+          type="text"
+          aria-describedby="validationTooltip05Feedback"
+          feedbackInvalid="Please provide a valid zip."
+          id="validationTooltip05"
+          label="Zip"
+          required
+          tooltipFeedback
+        />
+      </CCol>
+      <CCol xs={12} className="position-relative">
+        <CButton color="primary" type="submit">
+          Submit form
+        </CButton>
+      </CCol>
+    </CForm>
+  )
+}
diff --git a/packages/docs/content/forms/validation/index.mdx b/packages/docs/content/forms/validation/index.mdx
new file mode 100644
index 00000000..35d1a7f0
--- /dev/null
+++ b/packages/docs/content/forms/validation/index.mdx
@@ -0,0 +1,47 @@
+---
+title: React Form Validation
+name: Validation
+description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
+route: /forms/validation/
+---
+
+## Example
+
+For custom CoreUI form validation messages, you'll need to add the `noValidate` boolean property to your `<CForm>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
+
+Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.
+
+<ExampleSnippet component="ValidationExample" componentName="React Form Validation" />
+
+## Browser defaults
+
+Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.
+
+While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
+
+<ExampleSnippet component="ValidationBrowserDefaultsExample" componentName="React Form Validation" />
+
+## Custom validation
+
+In case you require custom or server-side validation, you can indicate invalid and valid form fields with `invalid` and `valid` boolean properties.
+
+For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
+
+<ExampleSnippet component="ValidationCustomExample" componentName="React Form Validation" />
+
+## Supported elements
+
+Validation styles are available for the following form controls and components:
+
+- `<CFormCheck>`s
+- `<CFormInput>`s
+- `<CFormSelect>`s
+- `<CFormTextarea>`s
+
+<ExampleSnippet component="ValidationSupportedElementsExample" componentName="React Form Validation" />
+
+## Tooltips
+
+If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
+
+<ExampleSnippet component="ValidationTooltipsExample" componentName="React Form Validation" />
diff --git a/packages/docs/content/forms/validation/styling.mdx b/packages/docs/content/forms/validation/styling.mdx
new file mode 100644
index 00000000..4370de0b
--- /dev/null
+++ b/packages/docs/content/forms/validation/styling.mdx
@@ -0,0 +1,22 @@
+---
+title: React Form Validation Styling
+name: Form Validation Styling
+description: Learn how to customize the React form validation with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
+route: /forms/validation/
+---
+
+### CSS variables
+
+CoreUI for React components 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 file="_root.scss" capture="root-form-validation-variables" />
+
+These variables are also color mode adaptive, meaning they change color while in dark mode.
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-feedback-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-validation-colors" />
+
+<ScssDocs file="_variables-dark.scss" capture="form-validation-colors-dark" />
diff --git a/packages/docs/content/layout/breakpoints.mdx b/packages/docs/content/layout/breakpoints.mdx
index fd7ddd93..16dced59 100644
--- a/packages/docs/content/layout/breakpoints.mdx
+++ b/packages/docs/content/layout/breakpoints.mdx
@@ -1,4 +1,5 @@
 ---
+title: Breakpoints
 name: Breakpoints
 description: Breakpoints are the triggers in CoreUI for React.js for how your layout responsive changes across device or viewport sizes.
 menu: Layout
diff --git a/packages/docs/content/layout/columns.mdx b/packages/docs/content/layout/columns.mdx
index ed496b07..982add80 100644
--- a/packages/docs/content/layout/columns.mdx
+++ b/packages/docs/content/layout/columns.mdx
@@ -1,11 +1,12 @@
 ---
+title: Columns
 name: Columns
 description: Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.
 menu: Layout
 route: '/layout/columns'
 ---
 
-import { CCol, CContainer, CRow } from '@coreui/react/src/index'
+import { CCol, CContainer, CRow } from '@coreui/react'
 
 ## How they work
 
diff --git a/packages/docs/content/layout/containers.mdx b/packages/docs/content/layout/containers.mdx
index 3e0fe2a7..0c8a43f2 100644
--- a/packages/docs/content/layout/containers.mdx
+++ b/packages/docs/content/layout/containers.mdx
@@ -6,7 +6,7 @@ menu: Layout
 route: "/layout/containers"
 ---
 
-import { CCol, CContainer, CRow } from '@coreui/react/src/index'
+import { CCol, CContainer, CRow } from '@coreui/react'
 
 ## How they work
 
diff --git a/packages/docs/content/layout/grid.mdx b/packages/docs/content/layout/grid.mdx
index e6c2c9f3..e4124778 100644
--- a/packages/docs/content/layout/grid.mdx
+++ b/packages/docs/content/layout/grid.mdx
@@ -1,11 +1,12 @@
 ---
 name: Grid
+title: Grid
 description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
 menu: Layout
-route: '/layout/grid'
+route: "/layout/grid"
 ---
 
-import { CCol, CContainer, CRow } from '@coreui/react/src/index'
+import { CCol, CContainer, CRow } from '@coreui/react'
 
 ## Example
 
diff --git a/packages/docs/content/layout/gutters.mdx b/packages/docs/content/layout/gutters.mdx
index 0674a963..af9d3ff6 100644
--- a/packages/docs/content/layout/gutters.mdx
+++ b/packages/docs/content/layout/gutters.mdx
@@ -6,7 +6,7 @@ menu: Layout
 route: "/layout/gutters"
 ---
 
-import { CCol, CContainer, CRow } from '@coreui/react/src/index'
+import { CCol, CContainer, CRow } from '@coreui/react'
 
 ## How they work
 
diff --git a/packages/docs/content/templates/admin-dashboard.mdx b/packages/docs/content/templates/admin-dashboard.mdx
index 42153487..4766c72d 100644
--- a/packages/docs/content/templates/admin-dashboard.mdx
+++ b/packages/docs/content/templates/admin-dashboard.mdx
@@ -15,7 +15,7 @@ import {
   CImage,
   CLink,
   CRow 
-} from '@coreui/react/src/index'
+} from '@coreui/react'
 
 ## React Admin & Dashboard Templates
 
diff --git a/packages/docs/gatsby-browser.tsx b/packages/docs/gatsby-browser.tsx
index 4791853e..3eb149f6 100644
--- a/packages/docs/gatsby-browser.tsx
+++ b/packages/docs/gatsby-browser.tsx
@@ -1,8 +1,18 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
+import DocsLayout from './src/templates/DocsLayout'
 import './src/styles/styles.scss'
+import './src/styles/search.scss'
 
-export const wrapPageElement = ({ element, props }) => {
-  return <DefaultLayout {...props}>{element}</DefaultLayout>
+export const wrapRootElement = ({ element }: { element: ReactNode }) => {
+  return <DefaultLayout>{element}</DefaultLayout>
+}
+
+export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => {
+  const path = props.location.pathname
+  if (path.endsWith('/bootstrap') || path.endsWith('/bootstrap/')) {
+    require('./src/styles/bootstrap-examples.scss')
+  }
+  return <DocsLayout {...props}>{element}</DocsLayout>
 }
diff --git a/packages/docs/gatsby-config.mjs b/packages/docs/gatsby-config.mjs
index 93254870..99256c61 100644
--- a/packages/docs/gatsby-config.mjs
+++ b/packages/docs/gatsby-config.mjs
@@ -17,9 +17,8 @@ const config = {
     image: ``, // Path to your image you placed in the `static` folder
     twitterUsername: `@coreui_io`,
   },
-  pathPrefix: `react/docs/`,
+  pathPrefix: `/react/docs/`,
   plugins: [
-    `gatsby-plugin-react-helmet`,
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-source-filesystem`,
@@ -102,6 +101,9 @@ const config = {
         id: `GTM-KX4JH47`,
       },
     },
+    {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+    },
   ],
 }
 
diff --git a/packages/docs/gatsby-node.mjs b/packages/docs/gatsby-node.mjs
index 97f4a8e1..3deb22e8 100644
--- a/packages/docs/gatsby-node.mjs
+++ b/packages/docs/gatsby-node.mjs
@@ -1,5 +1,26 @@
-import { resolve } from 'node:path'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { createFilePath } from 'gatsby-source-filesystem'
+import { glob } from 'glob'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export const onCreateWebpackConfig = ({ actions }) => {
+  const { setWebpackConfig } = actions
+
+  // Find all 'examples' directories
+  const examplePaths = glob.sync(resolve(__dirname, 'content/**/**/examples'))
+
+  // Create Webpack alias
+  setWebpackConfig({
+    resolve: {
+      alias: {
+        '@coreui/react': resolve(__dirname, '..', 'coreui-react/src/index.ts'),
+        '@example': examplePaths, // Adds all paths to a single alias
+      },
+    },
+  })
+}
 
 export const onCreateNode = async ({
   node,
@@ -34,12 +55,15 @@ export const createPages = async ({
 }) => {
   const result = await graphql(`
     query {
-      allMdx {
+      allMdx(filter: { fields: { slug: { regex: "/^(?!/api/).*/" } } }) {
         nodes {
           id
           fields {
             slug
           }
+          frontmatter {
+            route
+          }
           internal {
             contentFilePath
           }
@@ -62,7 +86,11 @@ export const createPages = async ({
         component: `${resolve(`./src/templates/MdxLayout.tsx`)}?__contentFilePath=${
           node.internal.contentFilePath
         }`,
-        context: { id: node.id },
+        context: {
+          id: node.id,
+          route: node.frontmatter.route,
+          regex: `/^${node.frontmatter.route}/`,
+        },
       })
     })
     createRedirect({
diff --git a/packages/docs/gatsby-ssr.tsx b/packages/docs/gatsby-ssr.tsx
index 4791853e..3eb149f6 100644
--- a/packages/docs/gatsby-ssr.tsx
+++ b/packages/docs/gatsby-ssr.tsx
@@ -1,8 +1,18 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
+import DocsLayout from './src/templates/DocsLayout'
 import './src/styles/styles.scss'
+import './src/styles/search.scss'
 
-export const wrapPageElement = ({ element, props }) => {
-  return <DefaultLayout {...props}>{element}</DefaultLayout>
+export const wrapRootElement = ({ element }: { element: ReactNode }) => {
+  return <DefaultLayout>{element}</DefaultLayout>
+}
+
+export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => {
+  const path = props.location.pathname
+  if (path.endsWith('/bootstrap') || path.endsWith('/bootstrap/')) {
+    require('./src/styles/bootstrap-examples.scss')
+  }
+  return <DocsLayout {...props}>{element}</DocsLayout>
 }
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 664f6d35..7055ba02 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-docs",
-  "version": "5.4.1",
+  "version": "5.7.1",
   "private": true,
   "description": "",
   "homepage": "https://coreui.io/react/",
@@ -15,50 +15,51 @@
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
     "api": "rimraf \"content/api/*\" & node build/api.mjs",
-    "build": "gatsby build",
+    "build": "gatsby build --prefix-paths",
     "develop": "gatsby develop",
     "dist": "run-s api build",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "gatsby develop",
-    "serve": "gatsby serve",
+    "serve": "gatsby serve --prefix-paths",
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.2.0",
+    "@coreui/chartjs": "^4.1.0",
+    "@coreui/coreui": "^5.4.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.3.0",
     "@coreui/react-chartjs": "^3.0.0",
     "@coreui/utils": "^2.0.2",
-    "@docsearch/css": "^3.6.2",
+    "@docsearch/css": "^3.9.0",
+    "@docsearch/react": "^3.9.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@types/react-helmet": "^6.1.11",
-    "gatsby": "^5.13.7",
-    "gatsby-plugin-google-tagmanager": "^5.13.1",
-    "gatsby-plugin-image": "^3.13.1",
-    "gatsby-plugin-manifest": "^5.13.1",
-    "gatsby-plugin-mdx": "^5.13.1",
-    "gatsby-plugin-offline": "^6.13.3",
-    "gatsby-plugin-react-helmet": "^6.13.1",
-    "gatsby-plugin-sass": "^6.13.1",
-    "gatsby-plugin-sharp": "^5.13.1",
-    "gatsby-plugin-sitemap": "^6.13.1",
-    "gatsby-remark-autolink-headers": "^6.13.1",
+    "@stackblitz/sdk": "^1.11.0",
+    "gatsby": "^5.14.5",
+    "gatsby-plugin-google-tagmanager": "^5.14.0",
+    "gatsby-plugin-image": "^3.14.0",
+    "gatsby-plugin-manifest": "^5.14.0",
+    "gatsby-plugin-mdx": "^5.14.1",
+    "gatsby-plugin-sass": "^6.14.0",
+    "gatsby-plugin-sharp": "^5.14.0",
+    "gatsby-plugin-sitemap": "^6.14.0",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
+    "gatsby-remark-autolink-headers": "^6.14.0",
     "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-source-filesystem": "^5.13.1",
-    "gatsby-transformer-sharp": "^5.13.1",
-    "globby": "^14.0.2",
-    "prism-react-renderer": "^2.4.0",
-    "prismjs": "^1.29.0",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-transformer-sharp": "^5.14.0",
+    "globby": "^14.1.0",
+    "prism-react-renderer": "^2.4.1",
+    "prismjs": "^1.30.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-docgen-typescript": "^2.2.2",
+    "react-docgen-typescript": "^2.4.0",
     "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
     "react-imask": "^7.6.1",
+    "react-markdown": "^10.1.0",
     "rimraf": "^6.0.1",
-    "sass": "^1.80.4"
+    "sass": "^1.89.2",
+    "showdown": "^2.1.0"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"
diff --git a/packages/docs/src/assets/images/hex_bootstrap.png b/packages/docs/src/assets/images/hex_bootstrap.png
new file mode 100755
index 00000000..1b113885
Binary files /dev/null and b/packages/docs/src/assets/images/hex_bootstrap.png differ
diff --git a/packages/docs/src/assets/images/hex_react.png b/packages/docs/src/assets/images/hex_react.png
new file mode 100755
index 00000000..a1ce6fba
Binary files /dev/null and b/packages/docs/src/assets/images/hex_react.png differ
diff --git a/packages/docs/src/components/Ads.tsx b/packages/docs/src/components/Ads.tsx
index a873d30a..e7deca2a 100644
--- a/packages/docs/src/components/Ads.tsx
+++ b/packages/docs/src/components/Ads.tsx
@@ -19,7 +19,7 @@ export const Ads: FC<AdsProps> = ({ code, location, placement }) => {
     }
   }, [location])
 
-  return <div ref={ref} />
+  return <div className="carbonads-wrapper" ref={ref} />
 }
 
 Ads.displayName = 'Ads'
diff --git a/packages/docs/src/components/Banner.tsx b/packages/docs/src/components/Banner.tsx
index 4d0fc3a0..f422502f 100644
--- a/packages/docs/src/components/Banner.tsx
+++ b/packages/docs/src/components/Banner.tsx
@@ -1,52 +1,82 @@
 import React, { FC } from 'react'
-import { CLink } from '@coreui/react/src/index'
+import { StaticImage } from 'gatsby-plugin-image'
+import { CButton, CCol, CRow } from '@coreui/react'
 
 interface BannerProps {
-  pro: boolean
+  bootstrap?: boolean | string
+  preview?: boolean | string
+  pro?: boolean
 }
 
-const Banner: FC<BannerProps> = ({ pro }) => {
-  return pro ? (
-    <div className="bg-danger d-none d-lg-block bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5">
-      <h3 className="mb-4">CoreUI PRO Component</h3>
-      <p>
-        To use this component you must have a CoreUI PRO license. Buy the{' '}
-        <a href="https://coreui.io/pricing/?framework=react&docs=coreui-banner-pro">CoreUI PRO</a>{' '}
-        and get access to all PRO components, features, templates, and dedicated support.
-      </p>
-    </div>
-  ) : (
-    <div className="bg-info d-none d-lg-block bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5">
-      <h3 className="mb-4">Support CoreUI Development</h3>
-      <p>
-        CoreUI is an MIT-licensed open source project and is completely free to use. However, the
-        amount of effort needed to maintain and develop new features for the project is not
-        sustainable without proper financial backing.
-      </p>
-      <p>You can support our Open Source software development in the following ways:</p>
-      <ul>
-        <li>
-          Buy the{' '}
-          <CLink href="https://coreui.io/pricing/?framework=react&docs=coreui-banner-free">
-            CoreUI PRO
-          </CLink>
-          , and get access to PRO components, and dedicated support.
-        </li>
-        <li>
-          <CLink href="https://opencollective.com/coreui" target="_blank">
-            Became a sponsor
-          </CLink>
-          , and get your logo on BACKERS.md/README.md files or each site of this documentation
-        </li>
-        <li>
-          Give us a star ⭐️ on{' '}
-          <CLink href="https://github.com/coreui/coreui-react" target="_blank">
-            Github
-          </CLink>
-          .
-        </li>
-      </ul>
-    </div>
+const Banner: FC<BannerProps> = ({ bootstrap, preview, pro }) => {
+  return (
+    <>
+      {bootstrap && (
+        <div className="bg-primary bg-opacity-10 border border-2 border-primary text-primary-emphasis rounded p-3 px-xl-4 mb-5">
+          <CRow className="d-flex align-items-center flex-xl-nowrap">
+            <CCol className="d-none d-xl-block p-0" xs={12} xl="auto">
+              <StaticImage
+                src="../assets/images/hex_bootstrap.png"
+                alt="CoreUI PRO for React.js & Bootstrap"
+                height={160}
+                width={160}
+              />
+            </CCol>
+            <CCol className="px-lg-4" xs={12} md>
+              <h4>Bootstrap 5 components designed for React.js</h4>
+              <p>
+                This component is part of the CoreUI for React.js UI components library, which
+                offers all Bootstrap components designed to work seamlessly with React.js.
+              </p>
+              <p className="mb-0">
+                If you want to use Bootstrap 5 in a React.js environment while also needing advanced
+                components that Bootstrap does not offer and dedicated developer support, then this
+                library is the best solution for you.
+              </p>
+            </CCol>
+          </CRow>
+        </div>
+      )}
+      {pro && (
+        <div className="bg-info bg-opacity-10 border border-2 border-info rounded p-3 px-xl-4 mb-5">
+          <CRow className="d-flex align-items-center flex-xl-nowrap">
+            <CCol className="d-none d-xl-block p-0" xs={12} xl="auto">
+              <StaticImage
+                src="../assets/images/hex_react.png"
+                alt="CoreUI PRO for React.js"
+                height={160}
+                width={160}
+              />
+            </CCol>
+            <CCol className="px-lg-4" xs={12} md>
+              This Component is a part of CoreUI PRO for React.js, an advanced UI library offering
+              over 100 components designed for creating responsive, sleek, and powerful
+              applications. Experience it yourself by signing up for a complimentary 7-day trial.
+            </CCol>
+            <CCol className="mt-3 mt-lg-0" xs={12} md="auto">
+              <CButton
+                className="text-nowrap text-white"
+                color="danger"
+                href="https://coreui.io/trial/?src=react-docs&cta=pro-banner"
+              >
+                Start Free Trial
+              </CButton>
+            </CCol>
+          </CRow>
+        </div>
+      )}
+      {preview && (
+        <div className="bg-warning d-none d-lg-block bg-opacity-10 border-start border-start-5 border-start-warning p-4 pb-3 mb-5">
+          <h3 className="mb-4">Alpha release</h3>
+          <p>
+            This component is in the Alpha phase and has an experimental API, which can be changed
+            in the final release. If you want to use this component, please install{' '}
+            <strong>@coreui/coreui-pro {preview}</strong> and{' '}
+            <strong>@coreui/react-pro {preview}</strong>
+          </p>
+        </div>
+      )}
+    </>
   )
 }
 
diff --git a/packages/docs/src/components/Callout.tsx b/packages/docs/src/components/Callout.tsx
index b1299b12..8c7b9ffe 100644
--- a/packages/docs/src/components/Callout.tsx
+++ b/packages/docs/src/components/Callout.tsx
@@ -1,15 +1,92 @@
 import React, { FC, ReactNode } from 'react'
-interface CalloutProps {
+export interface CalloutProps {
   children: ReactNode
   color: string
-  title?: string
+  title?: string | ReactNode
+  type?: string
 }
 
-const Callout: FC<CalloutProps> = ({ children, color, title }) => {
+const description = (type: string) => {
+  switch (type) {
+    case 'colorAssistiveTechnologies': {
+      return (
+        <>
+          <h5>Conveying meaning to assistive technologies</h5>
+          <p>
+            Using color to add meaning only provides a visual indication, which will not be conveyed
+            to users of assistive technologies – such as screen readers. Ensure that information
+            denoted by the color is either obvious from the content itself (e.g. the visible text),
+            or is included through alternative means, such as additional text hidden with the{' '}
+            <code>.visually-hidden</code> class.
+          </p>
+        </>
+      )
+    }
+    case 'dartSassModules': {
+      return (
+        <>
+          <p>
+            <strong>Heads up!</strong> Since <code>@coreui/coreui</code> v5.3.0 and{' '}
+            <code>@coreui/coreui-pro</code> v5.10.0, we support Sass modules.
+          </p>
+          <p>
+            You can now use the modern <code>@use</code> and <code>@forward</code> rules instead of{' '}
+            <code>@import</code>, which is deprecated and will be removed in Dart Sass 3.0.0. Using{' '}
+            <code>@import</code> will result in a compilation warning. You can learn more about this
+            transition{' '}
+            <a
+              href="https://sass-lang.com/documentation/breaking-changes/import/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              here
+            </a>
+            .
+          </p>
+        </>
+      )
+    }
+    case 'dartSassDeprecations': {
+      return (
+        <>
+          <p>
+            <strong>
+              Sass <code>@import</code> are deprecated and will be removed in Dart Sass 3.0.0.!
+            </strong>
+          </p>
+          <p>
+            You can also use <code>@import</code> rules, but please be aware that they are
+            deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning.
+            You can learn more about this deprecation{' '}
+            <a
+              href="https://sass-lang.com/documentation/breaking-changes/import/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              here
+            </a>
+            .
+          </p>
+        </>
+      )
+    }
+    default: {
+      return ''
+    }
+  }
+}
+
+const Callout: FC<CalloutProps> = ({ children, color, title, type }) => {
   return (
     <div className={`docs-callout docs-callout-${color}`}>
-      {title && <h5>{title}</h5>}
-      {children}
+      {type ? (
+        description(type)
+      ) : (
+        <>
+          {title && <h5>{title}</h5>}
+          {children}
+        </>
+      )}
     </div>
   )
 }
diff --git a/packages/docs/src/components/ClassNamesDocs.tsx b/packages/docs/src/components/ClassNamesDocs.tsx
new file mode 100644
index 00000000..6adc8988
--- /dev/null
+++ b/packages/docs/src/components/ClassNamesDocs.tsx
@@ -0,0 +1,134 @@
+import React from 'react'
+import Markdown from 'react-markdown'
+
+const extractCLassNames = (code: string) => {
+  const re = new RegExp(`export const .*CLASS_NAMES((?:.|\n)*?)}`)
+  const captured = re.exec(code)[0]
+
+  // Regular expression to match each comment block followed by a key-value pair
+  const regexWithComments = /\/\*\*\s*([\s\S]*?)\s*\*\/\s*(\w+):\s*['"]([^'"]+)['"]/g
+
+  // Regular expression to match key-value pairs without preceding comments
+  const regexWithoutComments = /(^|\n)\s*(\w+):\s*['"]([^'"]+)['"]/g
+
+  // Array to hold the resulting objects
+  const classNamesArray = []
+
+  // Temporary map to hold key-value pairs with their descriptions
+  const tempMap = new Map()
+
+  // First, extract all entries with comments
+  let match
+  while ((match = regexWithComments.exec(captured)) !== null) {
+    const rawDescription = match[1]
+    const description = rawDescription
+      .split('\n')
+      .map((line) => line.replace(/^\s*\*\s?/, '').trim())
+      .join(' ')
+      .replaceAll(/\s+/g, ' ')
+      .trim()
+
+    const className = match[2]
+    const value = match[3]
+
+    tempMap.set(className, { className, value, description })
+  }
+
+  // Now, extract all entries without comments
+  while ((match = regexWithoutComments.exec(captured)) !== null) {
+    const className = match[2]
+    const value = match[3]
+
+    // If this key was already processed with a comment, skip it
+    if (tempMap.has(className)) continue
+
+    classNamesArray.push({
+      className,
+      value,
+      description: null, // or undefined
+    })
+  }
+
+  // Add the entries with comments
+  for (const entry of tempMap.values()) {
+    classNamesArray.push(entry)
+  }
+
+  // Optional: Sort the array based on the order in the original string
+  // This step ensures that entries appear in the array in the same order as in the object
+  const orderedClassNames = []
+  const lines = captured.split('\n')
+  for (const line of lines) {
+    const keyMatch = line.match(/^\s*(\w+):\s*['"]([^'"]+)['"]/)
+    if (keyMatch) {
+      const key = keyMatch[1]
+      const entry = classNamesArray.find((item) => item.className === key)
+      if (entry && !orderedClassNames.includes(entry)) {
+        orderedClassNames.push(entry)
+      }
+    }
+  }
+
+  return classNamesArray
+}
+
+const ClassNamesDocs = ({ files }: { files: string | string[] }) => {
+  const _files = Array.isArray(files) ? files : [files]
+
+  const classNames = _files.flatMap((file) => {
+    let _file
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      _file = require(`!!raw-loader!../../../../packages/coreui-react/src/${file}`)
+      console.log('File loaded from coreui-react.')
+    } catch {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        _file = require(`!!raw-loader!../../../../packages/coreui-react-pro/src/${file}`)
+        console.log('File loaded from coreui-react-pro.')
+      } catch {
+        console.error('File not found in both paths.')
+        _file = null // Set to null or handle as needed
+      }
+    }
+    return extractCLassNames(_file.default)
+  })
+
+  const sortedClassNames = classNames.sort((a, b) => {
+    if (a.className < b.className) return -1
+    if (a.className > b.className) return 1
+    return 0
+  })
+
+  return (
+    <div className="table-api table-responsive border rounded mb-3">
+      <table className="table">
+        <thead>
+          <tr>
+            <th>customClassNames</th>
+            <th>Class Name</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedClassNames.map((className, index) => (
+            <tr className="align-middle" key={index}>
+              <td className="fw-semibold text-primary small">{className.className}</td>
+              <td>
+                <code className="text-nowrap">.{className.value}</code>
+              </td>
+              <td>
+                <Markdown>{className.description}</Markdown>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+ClassNamesDocs.displayName = 'ClassNamesDocs'
+
+export default ClassNamesDocs
diff --git a/packages/docs/src/components/CodeBlock.tsx b/packages/docs/src/components/CodeBlock.tsx
index d7fd2422..9b78aabc 100644
--- a/packages/docs/src/components/CodeBlock.tsx
+++ b/packages/docs/src/components/CodeBlock.tsx
@@ -1,12 +1,12 @@
 import React, { FC } from 'react'
 import { Highlight, Prism } from 'prism-react-renderer'
 
-interface CodeBlockProps {
+export interface CodeBlockProps {
   children: any // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 const CodeBlock: FC<CodeBlockProps> = ({ children }) => {
-  ;(typeof global === 'undefined' ? window : global).Prism = Prism
+  ;(typeof globalThis === 'undefined' ? globalThis : globalThis).Prism = Prism
   // eslint-disable-next-line unicorn/prefer-module
   require('prismjs/components/prism-bash')
   require('prismjs/components/prism-scss')
diff --git a/packages/docs/src/components/ComponentSubNav.tsx b/packages/docs/src/components/ComponentSubNav.tsx
new file mode 100644
index 00000000..304b337b
--- /dev/null
+++ b/packages/docs/src/components/ComponentSubNav.tsx
@@ -0,0 +1,128 @@
+import React, { forwardRef, HTMLAttributes, useMemo, useRef } from 'react'
+import { Link } from 'gatsby'
+import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react'
+import useStickyObserver from '../hooks/useStickyObserver' // Adjust the path as needed
+
+type Fields = {
+  slug: string
+}
+
+type Node = {
+  id: string
+  fields: Fields
+}
+
+export interface Item {
+  node: Node
+}
+
+export interface ComponentSubNavProps extends HTMLAttributes<HTMLDivElement> {
+  nodes: Item[]
+}
+
+const findShortestSlug = (items: Item[]): string | undefined => {
+  if (items.length === 0) {
+    return undefined
+  }
+
+  let shortestSlug = items[0].node.fields.slug
+
+  for (const item of items) {
+    const currentSlug = item.node.fields.slug
+    if (currentSlug.length < shortestSlug.length) {
+      shortestSlug = currentSlug
+    }
+  }
+
+  return shortestSlug
+}
+
+const ComponentSubNav = forwardRef<HTMLDivElement, ComponentSubNavProps>(
+  ({ nodes, ...rest }, ref) => {
+    const parentPathname = findShortestSlug(nodes)
+    const hasNavAccessibility = useMemo(
+      () => nodes.some((edge) => edge.node.fields.slug.includes('accessibility')),
+      [nodes]
+    )
+    const hasNavAPI = useMemo(
+      () => nodes.some((edge) => edge.node.fields.slug.includes('api')),
+      [nodes]
+    )
+    const hasNavStyling = useMemo(
+      () => nodes.some((edge) => edge.node.fields.slug.includes('styling')),
+      [nodes]
+    )
+
+    const hasNavBootstrap = useMemo(
+      () => nodes.some((edge) => edge.node.fields.slug.includes('bootstrap')),
+      [nodes]
+    )
+
+    // Ref for the sentinel element
+    const sentinelRef = useRef<HTMLDivElement>(null)
+
+    // Use the custom hook to track sticky state
+    const isSticky = useStickyObserver(sentinelRef)
+
+    return (
+      <>
+        <div ref={sentinelRef} style={{ height: '1px' }} />
+        <div
+          className={`component-sub-nav-wrapper bg-body position-sticky z-3 ${isSticky ? 'sticky shadow-sm' : ''}`}
+          ref={ref}
+          {...rest}
+        >
+          <CContainer lg className="px-3 px-sm-4">
+            <CNav
+              className="docs-nav component-sub-nav"
+              variant="underline-border"
+              role={undefined}
+            >
+              <CNavItem>
+                <CNavLink as={Link} to={parentPathname} activeClassName="active">
+                  Features
+                </CNavLink>
+              </CNavItem>
+              {hasNavAPI && (
+                <CNavItem>
+                  <CNavLink as={Link} to={`${parentPathname}api/`} activeClassName="active">
+                    API
+                  </CNavLink>
+                </CNavItem>
+              )}
+              {hasNavStyling && (
+                <CNavItem>
+                  <CNavLink as={Link} to={`${parentPathname}styling/`} activeClassName="active">
+                    Styling
+                  </CNavLink>
+                </CNavItem>
+              )}
+              {hasNavAccessibility && (
+                <CNavItem>
+                  <CNavLink
+                    as={Link}
+                    to={`${parentPathname}accessibility/`}
+                    activeClassName="active"
+                  >
+                    Accessibility
+                  </CNavLink>
+                </CNavItem>
+              )}
+              {hasNavBootstrap && (
+                <CNavItem>
+                  <CNavLink as={Link} to={`${parentPathname}bootstrap/`} activeClassName="active">
+                    Use with Bootstrap
+                  </CNavLink>
+                </CNavItem>
+              )}
+            </CNav>
+          </CContainer>
+        </div>
+      </>
+    )
+  }
+)
+
+ComponentSubNav.displayName = 'ComponentSubNav'
+
+export default ComponentSubNav
diff --git a/packages/docs/src/components/Example.tsx b/packages/docs/src/components/Example.tsx
index c8c2a47e..d5992eae 100644
--- a/packages/docs/src/components/Example.tsx
+++ b/packages/docs/src/components/Example.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react'
-interface ExampleProps {
+export interface ExampleProps {
   children: ReactNode
   className: string
 }
diff --git a/packages/docs/src/components/ExampleSnippet.tsx b/packages/docs/src/components/ExampleSnippet.tsx
new file mode 100644
index 00000000..a76b2105
--- /dev/null
+++ b/packages/docs/src/components/ExampleSnippet.tsx
@@ -0,0 +1,192 @@
+import React, { FC, lazy, Suspense, useEffect, useMemo, useState } from 'react'
+import { Highlight, Language } from 'prism-react-renderer'
+import CIcon from '@coreui/icons-react'
+import { cibCodesandbox, cilCheckAlt, cilCopy } from '@coreui/icons'
+import { CNav, CNavLink, CTooltip, useClipboard } from '@coreui/react'
+import { openStackBlitzProject } from '../utils/stackblitz'
+import { openCodeSandboxProject } from '../utils/codesandbox'
+
+export interface ExampleSnippetProps {
+  className?: string
+  codeSandbox?: boolean
+  component: string
+  componentName?: string
+  pro?: boolean
+  stackBlitz?: boolean
+}
+
+const ExampleSnippet: FC<ExampleSnippetProps> = ({
+  className = '',
+  codeSandbox = true,
+  component,
+  componentName = 'Example Component',
+  pro = false,
+  stackBlitz = true,
+}) => {
+  const [clipboardCode, setClipboardCode] = useState<string>()
+  const [highlightCode, setHighlightCode] = useState<string>()
+  const [language, setLanguage] = useState<'js' | 'ts'>('js')
+  const { copy, isCopied } = useClipboard()
+
+  const Preview = useMemo(() => {
+    if (!component) return null
+    return lazy(() =>
+      import(`@example/${component}.tsx`)
+        .then((module) => ({ default: module[component] }))
+        .catch((error) => {
+          console.error(`Failed to load Preview component for ${component}:`, error)
+          return { default: () => <div>Preview not available.</div> }
+        })
+    )
+  }, [component])
+
+  useEffect(() => {
+    const loadCode = async () => {
+      try {
+        const module = await import(`!!raw-loader!@example/${component}.${language}x`)
+        setClipboardCode(module.default)
+      } catch {
+        const tsModule = await import(`!!raw-loader!@example/${component}.tsx`)
+        setClipboardCode(tsModule.default)
+      }
+    }
+
+    loadCode()
+  }, [component, language])
+
+  useEffect(() => {
+    const loadCode = async () => {
+      try {
+        const module = await import(`!!raw-loader!@example/${component}.short.${language}x`)
+        setHighlightCode(module.default)
+      } catch {
+        try {
+          const tsModule = await import(`!!raw-loader!@example/${component}.short.tsx`)
+          setHighlightCode(tsModule.default)
+        } catch {
+          setHighlightCode(clipboardCode)
+        }
+      }
+    }
+
+    loadCode()
+  }, [clipboardCode])
+
+  const handleCopy = () => {
+    if (clipboardCode) copy(clipboardCode)
+  }
+
+  const prismLanguage: Language = language === 'js' ? 'jsx' : 'tsx'
+
+  return (
+    <div className="docs-example-snippet">
+      <div className={`docs-example ${className}`}>
+        {Preview ? (
+          <Suspense fallback={<div>Loading preview...</div>}>
+            <Preview />
+          </Suspense>
+        ) : (
+          <div>No component specified.</div>
+        )}
+      </div>
+      <div className="highlight-toolbar border-top">
+        <CNav as="div" className="px-3" variant="underline-border" role={undefined}>
+          <CNavLink as="button" active={language === 'js'} onClick={() => setLanguage('js')}>
+            JavaScript
+          </CNavLink>
+          <CNavLink as="button" active={language === 'ts'} onClick={() => setLanguage('ts')}>
+            TypeScript
+          </CNavLink>
+          <span className="ms-auto"></span>
+          {codeSandbox && clipboardCode && (
+            <CTooltip content="Try it on CodeSandbox">
+              <button
+                type="button"
+                className="btn btn-transparent"
+                aria-label="Try it on CodeSandbox"
+                onClick={() =>
+                  openCodeSandboxProject({
+                    name: component,
+                    language,
+                    code: clipboardCode,
+                    componentName,
+                    pro,
+                  })
+                }
+              >
+                <CIcon icon={cibCodesandbox} />
+              </button>
+            </CTooltip>
+          )}
+          {stackBlitz && clipboardCode && (
+            <CTooltip content="Try it on StackBlitz">
+              <button
+                type="button"
+                className="btn btn-transparent px-1"
+                aria-label="Try it on StackBlitz"
+                onClick={() =>
+                  openStackBlitzProject({
+                    name: component,
+                    language,
+                    code: clipboardCode,
+                    componentName,
+                    pro,
+                  })
+                }
+              >
+                <svg
+                  className="icon"
+                  width="56"
+                  height="78"
+                  viewBox="0 0 56 78"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.4273 48.2853C23.7931 47.5845 23.0614 46.8837 22.3298 46.8837H1.11228C0.0148224 46.8837 -0.350997 45.8326 0.380642 45.1318L40.9866 0.282084C41.7182 -0.418693 43.1815 0.282084 42.8157 1.33325L32.9386 30.0651C32.5727 30.7659 32.9386 31.4666 33.6702 31.4666H54.8877C55.9852 31.4666 56.351 32.5178 55.6194 33.2186L15.0134 77.7179C14.2818 78.4187 12.8185 77.7179 13.1843 76.6667L23.4273 48.2853Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </button>
+            </CTooltip>
+          )}
+          <CTooltip content={isCopied ? 'Copied' : 'Copy to clipboard'}>
+            <button
+              type="button"
+              className="btn btn-transparent px-1"
+              aria-label="Copy to clipboard"
+              onClick={handleCopy}
+            >
+              <CIcon icon={isCopied ? cilCheckAlt : cilCopy} />
+            </button>
+          </CTooltip>
+        </CNav>
+      </div>
+      {highlightCode && (
+        <div className="highlight">
+          <Highlight
+            code={highlightCode}
+            language={prismLanguage}
+            theme={{ plain: {}, styles: [] }}
+          >
+            {({ className: highlightClass, style, tokens, getLineProps, getTokenProps }) => (
+              <pre className={highlightClass} style={style}>
+                {tokens.map((line, i) => (
+                  <div {...getLineProps({ line, key: i })} key={i}>
+                    {line.map((token, key) => (
+                      <span {...getTokenProps({ token, key })} key={key} />
+                    ))}
+                  </div>
+                ))}
+              </pre>
+            )}
+          </Highlight>
+        </div>
+      )}
+    </div>
+  )
+}
+
+ExampleSnippet.displayName = 'ExampleSnippet'
+
+export default ExampleSnippet
diff --git a/packages/docs/src/components/ExampleSnippetLazy.tsx b/packages/docs/src/components/ExampleSnippetLazy.tsx
new file mode 100644
index 00000000..252b38c1
--- /dev/null
+++ b/packages/docs/src/components/ExampleSnippetLazy.tsx
@@ -0,0 +1,258 @@
+import React, { FC, lazy, ReactNode, Suspense, useEffect, useMemo, useRef, useState } from 'react'
+import { Highlight, Language } from 'prism-react-renderer'
+import CIcon from '@coreui/icons-react'
+import { cibCodesandbox, cilCheckAlt, cilCopy } from '@coreui/icons'
+import { CNav, CNavLink, CTooltip, useClipboard } from '@coreui/react'
+import { openStackBlitzProject } from '../utils/stackblitz'
+import { openCodeSandboxProject } from '../utils/codesandbox'
+import { isInViewport } from '@coreui/react'
+
+interface CodeSnippets {
+  js?: string
+  ts?: string
+}
+
+export interface ExampleSnippetLazyProps {
+  children: ReactNode
+  className?: string
+  code?: string | CodeSnippets
+  codeSandbox?: boolean
+  component?: string
+  componentName?: string
+  pro?: boolean
+  stackBlitz?: boolean
+}
+
+const ExampleSnippetLazy: FC<ExampleSnippetLazyProps> = ({
+  children,
+  className = '',
+  code,
+  codeSandbox = true,
+  component,
+  componentName,
+  pro = false,
+  stackBlitz = true,
+}) => {
+  const exampleSnippetRef = useRef<HTMLDivElement>(null)
+  const [codeJS, setCodeJS] = useState<string>()
+  const [codeTS, setCodeTS] = useState<string>()
+  const [language, setLanguage] = useState<'js' | 'ts'>('js')
+  const [visible, setVisible] = useState(false)
+  const { copy, isCopied } = useClipboard()
+
+  const Preview = useMemo(() => {
+    if (!component) return null
+    return lazy(() =>
+      import(`@example/${component}.tsx`)
+        .then((module) => ({ default: module[component] }))
+        .catch((error) => {
+          console.error(`Failed to load Preview component for ${component}:`, error)
+          return { default: () => <div>Preview not available.</div> }
+        }),
+    )
+  }, [component])
+
+  const handleScroll = () => {
+    setVisible(true)
+  }
+
+  useEffect(() => {
+    if (exampleSnippetRef.current && isInViewport(exampleSnippetRef.current)) {
+      setVisible(true)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (visible) {
+      window.removeEventListener('scroll', handleScroll)
+    } else {
+      window.addEventListener('scroll', handleScroll)
+    }
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  useEffect(() => {
+    const loadCode = async () => {
+      if (code) {
+        if (typeof code === 'string') {
+          setCodeJS(code)
+        } else {
+          setCodeJS(code.js)
+          setCodeTS(code.ts)
+        }
+      } else if (component) {
+        try {
+          const tsModule = await import(`!!raw-loader!@example/${component}.tsx`)
+          setCodeTS(tsModule.default)
+          setCodeJS(tsModule.default)
+        } catch (error) {
+          console.error(`Failed to load TypeScript code for component ${component}:`, error)
+        }
+
+        try {
+          const jsModule = await import(`!!raw-loader!@example/${component}.jsx`)
+          setCodeJS(jsModule.default)
+        } catch {
+          // JSX version may not exist
+        }
+      }
+    }
+
+    loadCode()
+  }, [code, component])
+
+  const hasJS = codeJS !== undefined && codeJS !== ''
+  const hasTS = codeTS !== undefined && codeTS !== ''
+
+  useEffect(() => {
+    if (!hasJS && hasTS) {
+      setLanguage('ts')
+    } else {
+      setLanguage('js')
+    }
+  }, [hasJS, hasTS])
+
+  const handleCopy = () => {
+    const codeToCopy = language === 'js' ? codeJS : codeTS
+    if (codeToCopy) copy(codeToCopy)
+  }
+
+  const prismLanguage: Language = language === 'js' ? 'jsx' : 'tsx'
+  const showJSTab = hasJS && !(typeof code === 'object' && code?.js === code?.ts)
+  const showTSTab = hasTS
+
+  const getProjectName = (): string => {
+    if (React.isValidElement(children)) {
+      const childType = (children as React.ReactElement).type
+      if (typeof childType === 'string') return childType
+      if (typeof childType === 'function' && childType.name) return childType.name
+    }
+    return 'ExampleProject'
+  }
+
+  return (
+    <div className="docs-example-snippet" ref={exampleSnippetRef}>
+      {visible && (
+        <div className={`docs-example ${className}`}>
+          {children ? (
+            children
+          ) : Preview ? (
+            <Suspense fallback={<div>Loading preview...</div>}>
+              <Preview />
+            </Suspense>
+          ) : (
+            <div>No component specified.</div>
+          )}
+        </div>
+      )}
+      <div className="highlight-toolbar border-top">
+        <CNav className="px-3" variant="underline-border">
+          {showJSTab && (
+            <CNavLink as="button" active={language === 'js'} onClick={() => setLanguage('js')}>
+              JavaScript
+            </CNavLink>
+          )}
+          {showTSTab && (
+            <CNavLink as="button" active={language === 'ts'} onClick={() => setLanguage('ts')}>
+              TypeScript
+            </CNavLink>
+          )}
+          <span className="ms-auto"></span>
+          {codeSandbox && (
+            <CTooltip content="Try it on CodeSandbox">
+              <button
+                type="button"
+                className="btn btn-transparent"
+                aria-label="Try it on CodeSandbox"
+                onClick={() =>
+                  openCodeSandboxProject({
+                    name: component || getProjectName(),
+                    language,
+                    code: language === 'js' ? codeJS || '' : codeTS || '',
+                    componentName,
+                    pro,
+                  })
+                }
+                disabled={language === 'ts' && !hasTS}
+              >
+                <CIcon icon={cibCodesandbox} />
+              </button>
+            </CTooltip>
+          )}
+          {stackBlitz && (
+            <CTooltip content="Try it on StackBlitz">
+              <button
+                type="button"
+                className="btn btn-transparent px-1"
+                aria-label="Try it on StackBlitz"
+                onClick={() =>
+                  openStackBlitzProject({
+                    name: component || getProjectName(),
+                    language,
+                    code: language === 'js' ? codeJS || '' : codeTS || '',
+                    componentName,
+                    pro,
+                  })
+                }
+                disabled={language === 'ts' && !hasTS}
+              >
+                <svg
+                  className="icon"
+                  width="56"
+                  height="78"
+                  viewBox="0 0 56 78"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M23.4273 48.2853C23.7931 47.5845 23.0614 46.8837 22.3298 46.8837H1.11228C0.0148224 46.8837 -0.350997 45.8326 0.380642 45.1318L40.9866 0.282084C41.7182 -0.418693 43.1815 0.282084 42.8157 1.33325L32.9386 30.0651C32.5727 30.7659 32.9386 31.4666 33.6702 31.4666H54.8877C55.9852 31.4666 56.351 32.5178 55.6194 33.2186L15.0134 77.7179C14.2818 78.4187 12.8185 77.7179 13.1843 76.6667L23.4273 48.2853Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </button>
+            </CTooltip>
+          )}
+          <CTooltip content={isCopied ? 'Copied' : 'Copy to clipboard'}>
+            <button
+              type="button"
+              className="btn btn-transparent px-1"
+              aria-label="Copy to clipboard"
+              onClick={handleCopy}
+              disabled={(language === 'js' && !hasJS) || (language === 'ts' && !hasTS)}
+            >
+              <CIcon icon={isCopied ? cilCheckAlt : cilCopy} />
+            </button>
+          </CTooltip>
+        </CNav>
+      </div>
+      {visible && (hasJS || hasTS) && (
+        <div className="highlight">
+          <Highlight
+            code={language === 'js' ? codeJS || '' : codeTS || ''}
+            language={prismLanguage}
+            theme={{ plain: {}, styles: [] }}
+          >
+            {({ className: highlightClass, style, tokens, getLineProps, getTokenProps }) => (
+              <pre className={highlightClass} style={style}>
+                {tokens.map((line, i) => (
+                  <div {...getLineProps({ line, key: i })} key={i}>
+                    {line.map((token, key) => (
+                      <span {...getTokenProps({ token, key })} key={key} />
+                    ))}
+                  </div>
+                ))}
+              </pre>
+            )}
+          </Highlight>
+        </div>
+      )}
+    </div>
+  )
+}
+
+ExampleSnippetLazy.displayName = 'ExampleSnippetLazy'
+
+export default ExampleSnippetLazy
diff --git a/packages/docs/src/components/Footer.tsx b/packages/docs/src/components/Footer.tsx
index 0533513f..d5282cff 100644
--- a/packages/docs/src/components/Footer.tsx
+++ b/packages/docs/src/components/Footer.tsx
@@ -1,36 +1,27 @@
 import React, { FC } from 'react'
 
-import { CContainer, CFooter } from '@coreui/react/src/index'
+import { CContainer, CFooter } from '@coreui/react'
 
 // @ts-expect-error json file
 import pkg from './../../package.json'
 
 const Footer: FC = () => {
   return (
-    <CFooter className="docs-footer p-3 p-md-5 mt-5 text-center text-sm-start">
-      <CContainer>
-        <ul className="docs-footer-links ps-0 mb-3">
-          <li className="d-inline-block">
-            <a href="https://github.com/coreui">GitHub</a>
-          </li>
-          <li className="d-inline-block ms-3">
-            <a href="https://twitter.com/core_ui">Twitter</a>
-          </li>
-          <li className="d-inline-block ms-3 ps-3 border-start border-2">
-            <a href="https://coreui.io/">CoreUI (Vanilla)</a>
-          </li>
-          <li className="d-inline-block ms-3">
-            <a href="https://coreui.io/angular/">CoreUI for Angular</a>
-          </li>
-          <li className="d-inline-block ms-3">
-            <a href="https://coreui.io/vue/">CoreUI for Vue.js</a>
-          </li>
-        </ul>
+    <CFooter className="docs-footer py-md-5 mt-5 text-center text-sm-start">
+      <CContainer lg className="px-4">
+        <div className="docs-footer-links mb-3 d-flex flex-column flex-sm-row gap-3">
+          <a href="https://github.com/coreui">GitHub</a>
+          <a href="https://twitter.com/core_ui">Twitter</a>
+          <span className="border-start border-start-2 d-none d-sm-flex"></span>
+          <a href="https://coreui.io/bootstrap/">CoreUI (Vanilla)</a>
+          <a href="https://coreui.io/angular/">CoreUI for Angular</a>
+          <a href="https://coreui.io/vue/">CoreUI for Vue.js</a>
+        </div>
         <p className="mb-0">CoreUI for React is Open Source UI Components Library for React.js.</p>
         <p className="mb-0">
           Currently v{pkg.version}. CoreUI code licensed{' '}
           <a
-            href="https://github.com/coreui/coreui/blob/main/LICENSE"
+            href="https://github.com/coreui/coreui-react/blob/main/LICENSE"
             target="_blank"
             rel="noreferrer"
           >
diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx
index 8edc0938..9b13856d 100644
--- a/packages/docs/src/components/Header.tsx
+++ b/packages/docs/src/components/Header.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React, { forwardRef } from 'react'
+import { DocSearch } from '@docsearch/react'
 
 import CIcon from '@coreui/icons-react'
 import {
@@ -24,26 +25,31 @@ import {
   CHeaderToggler,
   CNavItem,
   useColorModes,
-} from '@coreui/react/src'
+} from '@coreui/react'
 import { AppContext } from './../AppContext'
 
-const Header: FC = () => {
+const Header = forwardRef<HTMLDivElement>(({}, ref) => {
   const { colorMode, setColorMode } = useColorModes('coreui-react-docs-theme')
   return (
     <>
       <AppContext.Consumer>
         {(context) => (
-          <CHeader className="mb-5" position="sticky">
+          <CHeader className="mb-5" position="sticky" ref={ref}>
             <CHeaderToggler
               className="ms-md-3"
-              onClick={() => {
+              aria-label="Close"
+              onClick={() =>
                 context.setSidebarVisible && context.setSidebarVisible(!context.sidebarVisible)
-              }}
+              }
             >
               <CIcon icon={cilMenu} size="lg" />
             </CHeaderToggler>
-            <div className="docs-search" id="docsearch"></div>
-            <CHeaderNav className="ms-auto">
+            <DocSearch
+              appId="JIOZIZPLMM"
+              indexName="coreui-react"
+              apiKey="6e3f7692d2589d042bb40426b75df1b7"
+            />
+            <CHeaderNav className="ms-auto" role={undefined}>
               <CNavItem
                 href="https://github.com/coreui/coreui-react/"
                 aria-label="Visit our GitHub"
@@ -63,15 +69,19 @@ const Header: FC = () => {
                 <div className="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"></div>
                 <hr className="d-lg-none my-2 text-white-50" />
               </li>
-              <CDropdown variant="nav-item" placement="bottom-end">
-                <CDropdownToggle className="nav-link" color="link" caret={false}>
+              <CDropdown placement="bottom-end" variant="nav-item">
+                <CDropdownToggle
+                  color="link"
+                  caret={false}
+                  aria-label="Light/Dark mode switch"
+                >
                   {colorMode === 'dark' ? (
                     <CIcon icon={cilMoon} size="xl" />
-                  ) : (colorMode === 'auto' ? (
+                  ) : colorMode === 'auto' ? (
                     <CIcon icon={cilContrast} size="xl" />
                   ) : (
                     <CIcon icon={cilSun} size="xl" />
-                  ))}
+                  )}
                 </CDropdownToggle>
                 <CDropdownMenu>
                   <CDropdownItem
@@ -136,7 +146,7 @@ const Header: FC = () => {
       </AppContext.Consumer>
     </>
   )
-}
+})
 
 Header.displayName = 'Header'
 
diff --git a/packages/docs/src/components/JSXDocs.tsx b/packages/docs/src/components/JSXDocs.tsx
new file mode 100644
index 00000000..f831974c
--- /dev/null
+++ b/packages/docs/src/components/JSXDocs.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Highlight } from 'prism-react-renderer'
+
+const JSXDocs = ({ code }: { code: string }) => {
+  return (
+    code && (
+      <div className="highlight">
+        <Highlight code={code} language="jsx" theme={{ plain: {}, styles: [] }}>
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <pre className={className} style={{ ...style }}>
+              {tokens.map((line, i) => {
+                const lineProps = getLineProps({ line, key: i })
+                return (
+                  <div className={lineProps.className} key={i}>
+                    {line.map((token, key) => {
+                      const tokenProps = getTokenProps({ token, key })
+                      return (
+                        <span className={tokenProps.className} key={key}>
+                          {tokenProps.children}
+                        </span>
+                      )
+                    })}
+                  </div>
+                )
+              })}
+            </pre>
+          )}
+        </Highlight>
+      </div>
+    )
+  )
+}
+
+JSXDocs.displayName = 'JSXDocs'
+
+export default JSXDocs
diff --git a/packages/docs/src/components/ScssDocs.tsx b/packages/docs/src/components/ScssDocs.tsx
index 53c36b9f..f6acfffb 100644
--- a/packages/docs/src/components/ScssDocs.tsx
+++ b/packages/docs/src/components/ScssDocs.tsx
@@ -2,11 +2,24 @@ import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
 import { Highlight, Prism } from 'prism-react-renderer'
 
-interface ScssDocsProps {
+export interface ScssDocsProps {
   file: string
   capture: string
 }
 
+const unindent = (text: string) => {
+  const lines = text.split('\n')
+  // Find first non-empty line to determine indentation
+  const firstLine = lines.find((line) => line.trim().length > 0) || ''
+  const indentMatch = firstLine.match(/^( *)/)
+  const indent = indentMatch ? indentMatch[1] : ''
+  const regex = new RegExp(`^${indent}`)
+  return lines
+    .map((line) => line.replace(regex, ''))
+    .join('\n')
+    .trimEnd()
+}
+
 const ScssDocs = ({ file, capture }: ScssDocsProps) => {
   ;(typeof global === 'undefined' ? window : global).Prism = Prism
   // eslint-disable-next-line unicorn/prefer-module
@@ -31,11 +44,11 @@ const ScssDocs = ({ file, capture }: ScssDocsProps) => {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const _file = data.allFile.edges.find((node: any) => node.node.relativePath === file)
-  const captureStart = `// scss-docs-start ${capture}`
-  const captureEnd = `// scss-docs-end ${capture}`
-  const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
+  const captureStart = `// scss-docs-start ${capture}\n`
+  const captureEnd = `// scss-docs-end ${capture}\n`
+  const re = new RegExp(`${captureStart}([\\s\\S]*?)${captureEnd}`, 'm')
   const captured = re.exec(_file.node.internal.content)
-  const code = captured ? captured[1].trim() : undefined
+  const code = captured ? captured[1] : undefined
 
   if (code === undefined) {
     console.error(`Can't find "${capture}" in ${_file.node.relativePath}`)
@@ -45,10 +58,7 @@ const ScssDocs = ({ file, capture }: ScssDocsProps) => {
     code && (
       <div className="highlight mb-3">
         <Highlight
-          code={code
-            .replaceAll('--#{$prefix}', '--cui-')
-            .replaceAll('\n  -', '\n-')
-            .replaceAll('\n  @', '\n@')}
+          code={unindent(code).replaceAll('--#{$prefix}', '--cui-')}
           language="scss"
           theme={{ plain: {}, styles: [] }}
         >
diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx
index d09b930a..2af0c1a2 100644
--- a/packages/docs/src/components/Seo.tsx
+++ b/packages/docs/src/components/Seo.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
 import { useLocation } from '@reach/router'
 import { useStaticQuery, graphql } from 'gatsby'
 
@@ -9,9 +8,10 @@ interface SEOProps {
   name?: string
   image?: string
   article?: string
+  pro?: boolean
 }
 
-const SEO = ({ title, description, name, image, article }: SEOProps) => {
+const SEO = ({ title, description, name, image, article, pro }: SEOProps) => {
   const { pathname } = useLocation()
   const { site } = useStaticQuery(query)
 
@@ -34,51 +34,141 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
     url: `${siteUrl}${pathname.replace(`${prefix}/`, '')}`,
   }
 
+  const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
+
+  const humanize = (text: string): string => {
+    return text
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  }
+
+  const breadcrumbList = (startIndex = 1) => {
+    return seo.url
+      .replace('docs//', 'docs/')
+      .replace(siteUrl, '')
+      .split('/')
+      .filter(Boolean)
+      .map((item, index) => ({
+        '@type': 'ListItem',
+        position: index + startIndex,
+        name: humanize(item),
+        item: `${siteUrl}${item}`,
+      }))
+  }
+
+  const getDynamicDescription = (pathname: string, name?: string): string => {
+    if (pathname.includes('/components/') && pathname.includes('api')) {
+      return `Complete guide to CoreUI React ${name} API documentation. Learn how to use the CoreUI React ${name} component, its properties, methods, and events.`
+    }
+
+    if (pathname.includes('/components/') && pathname.includes('bootstrap')) {
+      return `Complete guide to CoreUI React ${name} usage with Bootstrap 5. Learn how to use the CoreUI React ${name} component with Bootstrap 5, including its properties, methods, and events.`
+    }
+
+    if (pathname.includes('/components/') && pathname.includes('styling')) {
+      return `Complete guide to CoreUI React ${name} component styling. Learn how to customize the CoreUI React ${name} component styles, themes, and appearance.`
+    }
+
+    if (pathname.includes('/components/')) {
+      return `Complete guide to CoreUI React ${name} components and implementation. Learn how to use the CoreUI React ${name} component in your React.js application.`
+    }
+
+    if (pathname.includes('/customize/')) {
+      return `Complete guide to CoreUI React customization and theming. Learn how to customize CoreUI React components, styles, and themes to fit your project's needs.`
+    }
+
+    if (pathname.includes('/forms/')) {
+      return `Complete guide to CoreUI React ${name} components and implementation.`
+    }
+
+    if (pathname.includes('/layouts/')) {
+      return `Complete guide to CoreUI React ${name} implementation.`
+    }
+
+    if (pathname.includes('/templates/')) {
+      return 'Complete guide to CoreUI React Templates. Learn how to download, install, customize, and use CoreUI React templates.'
+    }
+
+    if (pathname.includes('/migration/')) {
+      return 'Complete guide to CoreUI React migration. Track and review changes to the CoreUI for React.js components to help you migrate to the latest version.'
+    }
+
+    return 'Complete guide to CoreUI for React.js components and implementation.'
+  }
+
+  const schema = [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        {
+          '@type': 'ListItem',
+          position: 1,
+          name: 'CoreUI',
+          item: 'https://coreui.io',
+        },
+        {
+          '@type': 'ListItem',
+          position: 2,
+          name: 'React',
+          item: 'https://coreui.io/react/',
+        },
+        {
+          '@type': 'ListItem',
+          position: 3,
+          name: 'Documentation',
+          item: siteUrl,
+        },
+        ...breadcrumbList(4),
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'TechArticle',
+      headline: `${seo.title} documentation`,
+      description: getDynamicDescription(seo.url, name),
+      author: {
+        '@type': 'Organization',
+        name: 'CoreUI Team',
+        sameAs: 'https://github.com/coreui/',
+      },
+      publisher: {
+        '@type': 'Organization',
+        name: 'CoreUI',
+        logo: {
+          '@type': 'ImageObject',
+          url: 'https://coreui.io/images/brand/coreui-logo.svg',
+        },
+      },
+      datePublished: '2021-01-13',
+      dateModified: new Date().toISOString().split('T')[0],
+      mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': seo.url.replace('docs//', 'docs/'),
+      },
+      version: pro ? '5.17.1' : '5.7.1',
+      proficiencyLevel: 'Beginner',
+    },
+  ]
+
   return (
-    <Helmet title={seo.title} titleTemplate={titleTemplate}>
+    <>
+      <title>{formattedTitle}</title>
       <meta name="description" content={seo.description} />
       <meta name="image" content={seo.image} />
-
       {seo.url && <meta property="og:url" content={seo.url.replace('docs//', 'docs/')} />}
-
       {(article ? true : null) && <meta property="og:type" content="article" />}
-
       {seo.title && <meta property="og:title" content={seo.title} />}
-
       {seo.description && <meta property="og:description" content={seo.description} />}
-
       {seo.image && <meta property="og:image" content={seo.image} />}
-
       <meta name="twitter:card" content="summary_large_image" />
-
       {twitterUsername && <meta name="twitter:creator" content={twitterUsername} />}
-
       {seo.title && <meta name="twitter:title" content={seo.title} />}
-
       {seo.description && <meta name="twitter:description" content={seo.description} />}
-
       {seo.image && <meta name="twitter:image" content={seo.image} />}
-
-      {seo.name && (
-        <script type="application/ld+json">
-          {`{
-            "@context": "https://schema.org",
-            "@type": "BreadcrumbList",
-            "itemListElement": [{
-              "@type": "ListItem",
-              "position": 1,
-              "name": "React",
-              "item": "${siteUrl}"
-            },{
-              "@type": "ListItem",
-              "position": 2,
-              "name": "${seo.name}",
-              "item": "${seo.url.replace('docs//', 'docs/')}"
-            }]
-          }`}
-        </script>
-      )}
-    </Helmet>
+      {seo.name && <script type="application/ld+json">{JSON.stringify(schema)}</script>}
+    </>
   )
 }
 
diff --git a/packages/docs/src/components/Sidebar.tsx b/packages/docs/src/components/Sidebar.tsx
index 647470f6..7897a3d6 100644
--- a/packages/docs/src/components/Sidebar.tsx
+++ b/packages/docs/src/components/Sidebar.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import { Link } from 'gatsby'
 
 import {
   CDropdown,
@@ -7,7 +8,7 @@ import {
   CDropdownItem,
   CSidebar,
   CSidebarBrand,
-} from '@coreui/react/src'
+} from '@coreui/react'
 import { SidebarNav } from '.'
 
 import { AppContext } from './../AppContext'
@@ -23,11 +24,16 @@ const Sidebar: FC = () => {
           position="fixed"
           size="lg"
           visible={context.sidebarVisible}
-          onVisibleChange={(value: boolean) => {
+          onVisibleChange={(value: boolean) =>
             context.setSidebarVisible && context.setSidebarVisible(value)
-          }}
+          }
         >
-          <CSidebarBrand className="justify-content-start ps-3">
+          <CSidebarBrand
+            as={Link}
+            className="justify-content-start ps-3"
+            to="/"
+            aria-label="Go to CoreUI for React.js documentation"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 615 134"
diff --git a/packages/docs/src/components/SidebarNav.tsx b/packages/docs/src/components/SidebarNav.tsx
index 59bee98c..1bd5e299 100644
--- a/packages/docs/src/components/SidebarNav.tsx
+++ b/packages/docs/src/components/SidebarNav.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import { Link } from 'gatsby'
 
-import { CBadge, CNavGroup, CNavItem, CNavLink, CSidebarNav } from '@coreui/react/src/index'
+import { CBadge, CNavGroup, CNavItem, CNavLink, CSidebarNav } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 
 export type Badge = {
@@ -40,7 +40,7 @@ export const SidebarNav = ({ items }: SidebarNavProps) => {
     const { name, badge, icon, ...rest } = item
     return (
       <CNavItem key={index}>
-        <CNavLink as={Link} activeClassName="active" {...rest}>
+        <CNavLink as={Link} activeClassName="active" partiallyActive {...rest}>
           {navLink(name, icon, badge)}
         </CNavLink>
       </CNavItem>
diff --git a/packages/docs/src/components/Toc.tsx b/packages/docs/src/components/Toc.tsx
index ad99fa73..e5d3825f 100644
--- a/packages/docs/src/components/Toc.tsx
+++ b/packages/docs/src/components/Toc.tsx
@@ -1,7 +1,7 @@
-import React, { FC, useState } from 'react'
-import { CCollapse, CNav } from '@coreui/react/src/index'
+import React, { CSSProperties, forwardRef, useState } from 'react'
+import { CCollapse, CNav } from '@coreui/react'
 
-type TocItem = {
+export type TocItem = {
   url: string
   title: string
   items: TocItem[]
@@ -9,6 +9,7 @@ type TocItem = {
 
 interface TocProps {
   items: TocItem[]
+  style: CSSProperties
 }
 
 const toc = (items: TocItem[]) => {
@@ -32,12 +33,16 @@ const toc = (items: TocItem[]) => {
   )
 }
 
-const Toc: FC<TocProps> = ({ items }) => {
+const Toc = forwardRef<HTMLDivElement, TocProps>(({ items, ...rest }, ref) => {
   const [visible, setVisible] = useState(false)
   return (
-    <div className="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
+    <div
+      className="docs-toc mt-4 mb-5 my-lg-0 ps-xl-5 mb-lg-5 text-body-secondary"
+      ref={ref}
+      {...rest}
+    >
       <button
-        className="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none"
+        className="btn btn-link p-lg-0 mb-2 mb-lg-0 text-decoration-none docs-toc-toggle d-lg-none"
         type="button"
         aria-expanded={visible ? true : false}
         aria-controls="tocContents"
@@ -46,7 +51,7 @@ const Toc: FC<TocProps> = ({ items }) => {
         On this page
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          className="icon d-md-none ms-2"
+          className="icon d-lg-none ms-2"
           aria-hidden="true"
           viewBox="0 0 512 512"
         >
@@ -57,7 +62,7 @@ const Toc: FC<TocProps> = ({ items }) => {
           />
         </svg>
       </button>
-      <strong className="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
+      <strong className="d-none d-lg-block h6 mb-2 pb-2 border-bottom">On this page</strong>
       <CCollapse className="docs-toc-collapse" id="tocContents" visible={visible}>
         <CNav as="nav">
           <ul>{toc(items)}</ul>
@@ -65,6 +70,8 @@ const Toc: FC<TocProps> = ({ items }) => {
       </CCollapse>
     </div>
   )
-}
+})
+
+Toc.displayName = 'Toc'
 
 export default Toc
diff --git a/packages/docs/src/components/index.ts b/packages/docs/src/components/index.ts
index fe8398f8..3770af70 100644
--- a/packages/docs/src/components/index.ts
+++ b/packages/docs/src/components/index.ts
@@ -2,9 +2,13 @@ import Ads from './Ads'
 import Banner from './Banner'
 import Callout from './Callout'
 import CodeBlock from './CodeBlock'
+import ClassNamesDocs from './ClassNamesDocs'
+import ComponentSubNav from './ComponentSubNav'
 import Example from './Example'
+import ExampleSnippet from './ExampleSnippet'
 import Footer from './Footer'
 import Header from './Header'
+import JSXDocs from './JSXDocs'
 import ScssDocs from './ScssDocs'
 import Seo from './Seo'
 import Sidebar from './Sidebar'
@@ -16,9 +20,13 @@ export {
   Banner,
   Callout,
   CodeBlock,
+  ClassNamesDocs,
+  ComponentSubNav,
   Example,
+  ExampleSnippet,
   Footer,
   Header,
+  JSXDocs,
   ScssDocs,
   Seo,
   Sidebar,
diff --git a/packages/docs/src/hooks/useStickyObserver.ts b/packages/docs/src/hooks/useStickyObserver.ts
new file mode 100644
index 00000000..325c719b
--- /dev/null
+++ b/packages/docs/src/hooks/useStickyObserver.ts
@@ -0,0 +1,36 @@
+import { useEffect, useState, RefObject } from 'react'
+
+const useStickyObserver = (
+  sentinelRef: RefObject<HTMLElement>,
+  options?: IntersectionObserverInit,
+): boolean => {
+  const [isSticky, setIsSticky] = useState(false)
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel) return
+
+    const observerOptions = options || {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0,
+    }
+
+    const observerCallback: IntersectionObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        setIsSticky(!entry.isIntersecting)
+      })
+    }
+
+    const observer = new IntersectionObserver(observerCallback, observerOptions)
+    observer.observe(sentinel)
+
+    return () => {
+      observer.unobserve(sentinel)
+    }
+  }, [sentinelRef, options])
+
+  return isSticky
+}
+
+export default useStickyObserver
diff --git a/packages/docs/src/pages/404.tsx b/packages/docs/src/pages/404.tsx
index e72e73b4..d0f696de 100644
--- a/packages/docs/src/pages/404.tsx
+++ b/packages/docs/src/pages/404.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
-import { CButton } from '@coreui/react/src/index'
+import { CButton } from '@coreui/react'
 
-import Seo from './../components/Seo'
+import Seo from '../components/Seo'
 
 const NotFoundPage = () => {
   const { site } = useStaticQuery(query)
diff --git a/packages/docs/src/styles/_ads.scss b/packages/docs/src/styles/_ads.scss
index 575db8b0..b2b942f0 100644
--- a/packages/docs/src/styles/_ads.scss
+++ b/packages/docs/src/styles/_ads.scss
@@ -1,4 +1,7 @@
 // stylelint-disable declaration-no-important, selector-max-id
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
 
 //
 // Carbon ads
diff --git a/packages/docs/src/styles/_anchor.scss b/packages/docs/src/styles/_anchor.scss
index 1f8831fb..974fc725 100644
--- a/packages/docs/src/styles/_anchor.scss
+++ b/packages/docs/src/styles/_anchor.scss
@@ -1,23 +1,20 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
 
 .anchor-link {
+  padding: 0 .175rem;
   font-weight: 400;
   color: rgba($link-color, .5);
-  padding-left: 0.375em;
   text-decoration: none;
   opacity: 0;
-  @include transition(color .15s ease-in-out);
+  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
 
   &:focus,
-  &:hover {
+  &:hover,
+  :hover > &,
+  :target > & {
     color: $link-color;
     text-decoration: none;
+    opacity: 1;
   }
 }
-
-h2, h3, h4, h5, h6 {
-  &:hover {
-    .anchor-link {
-      opacity: 1;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/docs/src/styles/_callouts.scss b/packages/docs/src/styles/_callouts.scss
index a0dc566c..9c29d8b1 100644
--- a/packages/docs/src/styles/_callouts.scss
+++ b/packages/docs/src/styles/_callouts.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
 //
 // Callouts
 //
diff --git a/packages/docs/src/styles/_component-examples.scss b/packages/docs/src/styles/_component-examples.scss
index 1fb306de..a93971ce 100644
--- a/packages/docs/src/styles/_component-examples.scss
+++ b/packages/docs/src/styles/_component-examples.scss
@@ -1,3 +1,12 @@
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/clearfix" as *;
+@use "@coreui/coreui/scss/mixins/container" as *;
+@use "@coreui/coreui/scss/mixins/grid" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
 //
 // Docs examples
 //
@@ -27,9 +36,39 @@
 .docs-example-snippet {
   border: solid var(--cui-border-color);
   border-width: 1px 0;
+  margin: 0 ($cd-gutter-x * -.5) 1rem ($cd-gutter-x * -.5);
+  padding: 0;
+  @include border-radius(0);
 
-  @include media-breakpoint-up(md) {
+  .docs-example {
+    margin: 0;
+    padding: 1rem;
+    border-width: 0 1px 0 0;
+  }
+
+  .highlight-toolbar {
+    border-top: 1px solid var(--cui-border-color);
+  }
+
+  .highlight {
+    margin: 0;
+    padding: 1rem;
+  }
+
+  .docs-example,
+  .highlight {
+    border: 0
+  }
+
+  .highlight {
+    margin-bottom: 0;
+    @include border-top-radius(0);
+  }
+
+  @include media-breakpoint-up(sm) {
+    margin: 0 0 1rem 0;
     border-width: 1px;
+    @include border-radius(var(--cui-border-radius));
   }
 }
 
diff --git a/packages/docs/src/styles/_component-sub-nav.scss b/packages/docs/src/styles/_component-sub-nav.scss
new file mode 100644
index 00000000..093eeb58
--- /dev/null
+++ b/packages/docs/src/styles/_component-sub-nav.scss
@@ -0,0 +1,38 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+
+.component-sub-nav-wrapper {
+  @include transition(box-shadow 0.2s linear);
+  &:before {
+    position: absolute;
+    z-index: -1;
+    content: '';
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 90%;
+    max-width: 1140px;
+    margin: 0 auto;
+    background: var(--cui-border-color);
+    @include transition(max-width .2s ease-in-out, width .2s ease-in-out);
+  }
+
+  .component-sub-nav {
+    .nav-link {
+      @include transition(padding .2s linear);
+    }
+  }
+
+  &.sticky {
+    &::before {
+      width: 100%;
+      max-width: 100%;
+    }
+
+    .component-sub-nav {
+      .nav-link {
+        --cui-nav-underline-border-link-padding-y: .75rem;
+      }
+    }
+  }
+}
diff --git a/packages/docs/src/styles/_footer.scss b/packages/docs/src/styles/_footer.scss
index 7544a17b..d7edfce1 100644
--- a/packages/docs/src/styles/_footer.scss
+++ b/packages/docs/src/styles/_footer.scss
@@ -1,3 +1,6 @@
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 //
 // Footer
 //
@@ -7,13 +10,12 @@
   @include font-size(.875rem);
 
   a {
-    color: var(--#{$prefix}tertiary-color);
-    text-decoration: none;
+    color: var(--#{$prefix}secondary-color);
+    // text-decoration: none;
 
     &:hover,
     &:focus {
       color: var(--cui-link-hover-color);
-      text-decoration: underline;
     }
   }
 }
diff --git a/packages/docs/src/styles/_layout.scss b/packages/docs/src/styles/_layout.scss
index 2ee63995..7b4740de 100644
--- a/packages/docs/src/styles/_layout.scss
+++ b/packages/docs/src/styles/_layout.scss
@@ -1,12 +1,12 @@
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 .wrapper {
   width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  padding-inline-start: var(--cui-sidebar-occupy-start, 0);
   will-change: auto;
   @include transition(padding .15s);
-
-  > .container-lg {
-    --cui-gutter-x: 3rem;
-  }
 }
 
 .docs-sidebar {
@@ -15,31 +15,34 @@
 
 .docs-main {
   grid-area: main;
+  display: grid;
+  grid-template-areas:
+    "header"
+    "intro"
+    "toc"
+    "content";
+  grid-template-rows: auto auto 1fr;
+  gap: .5rem;
 
   @include media-breakpoint-down(lg) {
     max-width: 760px;
     margin-inline: auto;
   }
 
-  @include media-breakpoint-up(md) {
-    display: grid;
-    grid-template-areas:
-      "intro"
-      "toc"
-      "content";
-    grid-template-rows: auto auto 1fr;
-    gap: $grid-gutter-width;
-  }
-
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     grid-template-areas:
       "intro   toc"
       "content toc";
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto;
     grid-template-columns: 4fr 1fr;
+    gap: $grid-gutter-width;
   }
 }
 
+.docs-header {
+  grid-area: header;
+}
+
 .docs-intro {
   grid-area: intro;
 }
diff --git a/packages/docs/src/styles/_prism.scss b/packages/docs/src/styles/_prism.scss
index 6145e4b6..8e6bc187 100644
--- a/packages/docs/src/styles/_prism.scss
+++ b/packages/docs/src/styles/_prism.scss
@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
 /* PrismJS 1.24.1
 https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
 /**
@@ -16,7 +20,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
   --base05: #333;
   --base06: #fff;
   --base07: #{$teal-700}; // #9a6700
-  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
   --base09: #{$cyan-700}; // #087990
   --base0A: #{$purple-500}; // #795da3
   --base0B: #{$blue-700}; // #183691
diff --git a/packages/docs/src/styles/_root.scss b/packages/docs/src/styles/_root.scss
new file mode 100644
index 00000000..417e1fb0
--- /dev/null
+++ b/packages/docs/src/styles/_root.scss
@@ -0,0 +1,19 @@
+@use "@coreui/coreui/scss/functions/to-rgb" as *;
+@use "@coreui/coreui/scss/variables" as *;
+@use "variables" as *;
+
+:root {
+  --cd-purple: #{$cd-purple};
+  --cd-violet: #{$cd-violet};
+  --cd-accent: #{$cd-accent};
+  --cd-violet-rgb: #{to-rgb($cd-violet)};
+  --cd-accent-rgb: #{to-rgb($cd-accent)};
+  --cd-pink-rgb: #{to-rgb($pink-500)};
+  --cd-teal-rgb: #{to-rgb($teal-500)};
+  --cd-violet-bg: var(--cd-violet);
+  --cd-toc-color: var(--cd-violet);
+  --cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
+  --cd-callout-link: #{to-rgb($blue-600)};
+  --cd-callout-code-color: #{$pink-600};
+  --cd-pre-bg: var(--cui-tertiary-bg);
+}
diff --git a/packages/docs/src/styles/_scrolling.scss b/packages/docs/src/styles/_scrolling.scss
index 20179600..1026b940 100644
--- a/packages/docs/src/styles/_scrolling.scss
+++ b/packages/docs/src/styles/_scrolling.scss
@@ -6,8 +6,19 @@ main {
   h2,
   h3,
   h4,
-  [tabindex="0"] {
+  [tabindex='0'] {
     scroll-margin-top: 80px;
     scroll-margin-bottom: 100px;
   }
 }
+
+.component-sub-nav-wrapper + .container-lg .docs-main {
+  a,
+  button,
+  h2,
+  h3,
+  h4,
+  [tabindex='0'] {
+    scroll-margin-top: 130px;
+  }
+}
diff --git a/packages/docs/src/styles/_sidebar.scss b/packages/docs/src/styles/_sidebar.scss
index c6d8818e..d8cfb716 100644
--- a/packages/docs/src/styles/_sidebar.scss
+++ b/packages/docs/src/styles/_sidebar.scss
@@ -1,3 +1,5 @@
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+
 .docs-sidebar {
   --cui-sidebar-bg: var(--cui-tertiary-bg);
   --cui-sidebar-brand-bg: transparent;
@@ -23,10 +25,8 @@
   }
 }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .docs-sidebar {
-      --cui-sidebar-bg: var(--cui-body-bg);
-    }
+@include color-mode(dark) {
+  .docs-sidebar {
+    --cui-sidebar-bg: var(--cui-body-bg);
   }
 }
diff --git a/packages/docs/src/styles/_table-api.scss b/packages/docs/src/styles/_table-api.scss
index 9e430366..7018717e 100644
--- a/packages/docs/src/styles/_table-api.scss
+++ b/packages/docs/src/styles/_table-api.scss
@@ -1,24 +1,52 @@
-.table-api {
+.table-api,
+.table-docs {
+  .table {
+    margin: 0;
+  }
+
+  tr {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+  }
+
+  tr th {
+    padding: 0.75rem 1rem;
+  }
+
   tr td {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+    padding: 1rem;
+  }
+
+  th {
+    background-color: var(--cui-tertiary-bg);
   }
-  td:nth-child(1n),
-  th:nth-child(1n) {
-    width: 15%;
-    padding-left: 1rem;
+
+  tr:nth-child(2n-1):has(+ tr td[colspan='3']) td {
+    border-bottom-style: dashed;
   }
-  td:nth-child(2n) {
-    width: 55%;
+
+  p {
+    margin: 0;
   }
-  td:nth-child(3n) {
-    width: 20%;
+
+  tbody tr:last-child td {
+    border-bottom: 0;
   }
-  td:nth-child(4n) {
-    width: 10%;
+
+  .highlight {
+    margin: 1rem -1rem -1rem -1rem !important;
+    padding: 0.25rem 1rem;
+    border: 0;
+    border-radius: 0;
+    border: 2px solid var(--cui-body-bg);
+
+    code[class*='language-'],
+    pre[class*='language-'] {
+      white-space: pre-wrap;
+    }
   }
 }
 
-.markdown + h3 {
-  margin-top: 3rem;
-}
\ No newline at end of file
+.table-api tr th:nth-child(3) {
+  width: 50%;
+}
diff --git a/packages/docs/src/styles/_toc.scss b/packages/docs/src/styles/_toc.scss
index 8f6dc04d..7a016e59 100644
--- a/packages/docs/src/styles/_toc.scss
+++ b/packages/docs/src/styles/_toc.scss
@@ -1,7 +1,12 @@
 // stylelint-disable selector-max-type
 
+@use "@coreui/coreui/scss/functions/math" as *;
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+
 .docs-toc {
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     position: sticky;
     top: 5rem;
     right: 0;
@@ -45,12 +50,12 @@
   display: flex;
   align-items: center;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(lg) {
     justify-content: space-between;
     width: 100%;
   }
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     color: var(--cui-body-color);
     border: 1px solid var(--cui-border-color);
     @include border-radius(var(--cui-border-radius));
@@ -72,7 +77,7 @@
 }
 
 .docs-toc-collapse {
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     nav {
       padding: 1.25rem 1.25rem 1.25rem 1rem;
       background-color: var(--cui-tertiary-bg);
@@ -81,7 +86,7 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     display: block !important; // stylelint-disable-line declaration-no-important
   }
 }
diff --git a/packages/docs/src/styles/_variables.scss b/packages/docs/src/styles/_variables.scss
index b53b7754..a4794811 100644
--- a/packages/docs/src/styles/_variables.scss
+++ b/packages/docs/src/styles/_variables.scss
@@ -1,25 +1,10 @@
-// stylelint-disable scss/dollar-variable-default
-
+@use "sass:color";
+@use "@coreui/coreui/scss/variables" as *;
 // Local docs variables
-$cd-purple:        #4c0bce;
-$cd-violet:        lighten(saturate($cd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+
+$cd-purple:       #4c0bce;
+$cd-violet:        color.scale($cd-purple, $saturation: 10%, $lightness: 25%); // stylelint-disable-line scss/at-function-named-arguments
 $cd-accent:       #ffe484;
 
 $cd-gutter-x: 3rem;
 $cd-callout-variants: info, warning, danger !default;
-
-:root {
-  --cd-purple: #{$cd-purple};
-  --cd-violet: #{$cd-violet};
-  --cd-accent: #{$cd-accent};
-  --cd-violet-rgb: #{to-rgb($cd-violet)};
-  --cd-accent-rgb: #{to-rgb($cd-accent)};
-  --cd-pink-rgb: #{to-rgb($pink-500)};
-  --cd-teal-rgb: #{to-rgb($teal-500)};
-  --cd-violet-bg: var(--cd-violet);
-  --cd-toc-color: var(--cd-violet);
-  --cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
-  --cd-callout-link: #{to-rgb($blue-600)};
-  --cd-callout-code-color: #{$pink-600};
-  --cd-pre-bg: var(--cui-tertiary-bg);
-}
diff --git a/packages/docs/src/styles/bootstrap-examples.scss b/packages/docs/src/styles/bootstrap-examples.scss
new file mode 100644
index 00000000..0b6666ea
--- /dev/null
+++ b/packages/docs/src/styles/bootstrap-examples.scss
@@ -0,0 +1,538 @@
+@charset "UTF-8";
+/*!
+ * CoreUI Bootstrap Theme v5.3.2 (https://coreui.io)
+ * Copyright (c) 2025 creativeLabs Łukasz Holeczek
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ */
+.theme-bootstrap,
+[data-coreui-theme=light] .theme-bootstrap {
+  --cui-blue: #0d6efd;
+  --cui-indigo: #6610f2;
+  --cui-purple: #6f42c1;
+  --cui-pink: #d63384;
+  --cui-red: #dc3545;
+  --cui-orange: #fd7e14;
+  --cui-yellow: #ffc107;
+  --cui-green: #198754;
+  --cui-teal: #20c997;
+  --cui-cyan: #0dcaf0;
+  --cui-black: #000;
+  --cui-white: #fff;
+  --cui-gray: #6c757d;
+  --cui-gray-dark: #343a40;
+  --cui-gray-100: #f8f9fa;
+  --cui-gray-200: #e9ecef;
+  --cui-gray-300: #dee2e6;
+  --cui-gray-400: #ced4da;
+  --cui-gray-500: #adb5bd;
+  --cui-gray-600: #6c757d;
+  --cui-gray-700: #495057;
+  --cui-gray-800: #343a40;
+  --cui-gray-900: #212529;
+  --cui-primary: #0d6efd;
+  --cui-secondary: #6c757d;
+  --cui-success: #198754;
+  --cui-info: #0dcaf0;
+  --cui-warning: #ffc107;
+  --cui-danger: #dc3545;
+  --cui-light: #f8f9fa;
+  --cui-dark: #212529;
+  --cui-primary-rgb: 13, 110, 253;
+  --cui-secondary-rgb: 108, 117, 125;
+  --cui-success-rgb: 25, 135, 84;
+  --cui-info-rgb: 13, 202, 240;
+  --cui-warning-rgb: 255, 193, 7;
+  --cui-danger-rgb: 220, 53, 69;
+  --cui-light-rgb: 248, 249, 250;
+  --cui-dark-rgb: 33, 37, 41;
+  --cui-primary-text-emphasis: #052c65;
+  --cui-secondary-text-emphasis: #2b2f32;
+  --cui-success-text-emphasis: #0a3622;
+  --cui-info-text-emphasis: #055160;
+  --cui-warning-text-emphasis: #664d03;
+  --cui-danger-text-emphasis: #58151c;
+  --cui-light-text-emphasis: #495057;
+  --cui-dark-text-emphasis: #495057;
+  --cui-primary-bg-subtle: #cfe2ff;
+  --cui-secondary-bg-subtle: #e2e3e5;
+  --cui-success-bg-subtle: #d1e7dd;
+  --cui-info-bg-subtle: #cff4fc;
+  --cui-warning-bg-subtle: #fff3cd;
+  --cui-danger-bg-subtle: #f8d7da;
+  --cui-light-bg-subtle: #fcfcfd;
+  --cui-dark-bg-subtle: #ced4da;
+  --cui-primary-border-subtle: #9ec5fe;
+  --cui-secondary-border-subtle: #c4c8cb;
+  --cui-success-border-subtle: #a3cfbb;
+  --cui-info-border-subtle: #9eeaf9;
+  --cui-warning-border-subtle: #ffe69c;
+  --cui-danger-border-subtle: #f1aeb5;
+  --cui-light-border-subtle: #e9ecef;
+  --cui-dark-border-subtle: #adb5bd;
+  --cui-white-rgb: 255, 255, 255;
+  --cui-black-rgb: 0, 0, 0;
+  --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --cui-body-font-family: var(--cui-font-sans-serif);
+  --cui-body-font-size: 1rem;
+  --cui-body-font-weight: 400;
+  --cui-body-line-height: 1.5;
+  --cui-body-color: #212529;
+  --cui-body-color-rgb: 33, 37, 41;
+  --cui-body-bg: #fff;
+  --cui-body-bg-rgb: 255, 255, 255;
+  --cui-emphasis-color: #000;
+  --cui-emphasis-color-rgb: 0, 0, 0;
+  --cui-secondary-color: rgba(33, 37, 41, 0.75);
+  --cui-secondary-color-rgb: 33, 37, 41;
+  --cui-secondary-bg: #e9ecef;
+  --cui-secondary-bg-rgb: 233, 236, 239;
+  --cui-tertiary-color: rgba(37, 42.92, 54.02, 0.38);
+  --cui-tertiary-color-rgb: 37, 42.92, 54.02;
+  --cui-tertiary-bg: rgba(33, 37, 41, 0.75);
+  --cui-tertiary-bg-rgb: 33, 37, 41;
+  --cui-body-color: #212529;
+  --cui-body-color-rgb: 33, 37, 41;
+  --cui-body-bg: #fff;
+  --cui-body-bg-rgb: 255, 255, 255;
+  --cui-emphasis-color: #000;
+  --cui-emphasis-color-rgb: 0, 0, 0;
+  --cui-secondary-color: rgba(33, 37, 41, 0.75);
+  --cui-secondary-color-rgb: 33, 37, 41;
+  --cui-secondary-bg: #e9ecef;
+  --cui-secondary-bg-rgb: 233, 236, 239;
+  --cui-tertiary-color: rgba(33, 37, 41, 0.5);
+  --cui-tertiary-color-rgb: 33, 37, 41;
+  --cui-tertiary-bg: #f8f9fa;
+  --cui-tertiary-bg-rgb: 248, 249, 250;
+  --cui-heading-color: inherit;
+  --cui-link-color: #0d6efd;
+  --cui-link-color-rgb: 13, 110, 253;
+  --cui-link-decoration: underline;
+  --cui-link-hover-color: #0a58ca;
+  --cui-link-hover-color-rgb: 10, 88, 202;
+  --cui-code-color: #d63384;
+  --cui-highlight-color: #212529;
+  --cui-highlight-bg: #fff3cd;
+  --cui-border-width: 1px;
+  --cui-border-style: solid;
+  --cui-border-color: #dee2e6;
+  --cui-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --cui-border-radius: 0.375rem;
+  --cui-border-radius-sm: 0.25rem;
+  --cui-border-radius-lg: 0.5rem;
+  --cui-border-radius-xl: 1rem;
+  --cui-border-radius-xxl: 2rem;
+  --cui-border-radius-2xl: var(--cui-border-radius-xxl);
+  --cui-border-radius-pill: 50rem;
+  --cui-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --cui-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --cui-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --cui-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --cui-focus-ring-width: 0.25rem;
+  --cui-focus-ring-opacity: 0.25;
+  --cui-focus-ring-color: rgba(13, 110, 253, 0.25);
+  --cui-form-valid-color: #198754;
+  --cui-form-valid-border-color: #198754;
+  --cui-form-invalid-color: #dc3545;
+  --cui-form-invalid-border-color: #dc3545;
+  --cui-btn-close-filter: ;
+  --cui-carousel-indicator-active-bg: #fff;
+  --cui-carousel-caption-color: #fff;
+  --cui-carousel-control-icon-filter: ;
+}
+
+[data-coreui-theme=dark] .theme-bootstrap {
+  color-scheme: dark;
+  --cui-body-color: #dee2e6;
+  --cui-body-color-rgb: 222, 226, 230;
+  --cui-body-bg: #212529;
+  --cui-body-bg-rgb: 33, 37, 41;
+  --cui-emphasis-color: #fff;
+  --cui-emphasis-color-rgb: 255, 255, 255;
+  --cui-secondary-color: rgba(222, 226, 230, 0.75);
+  --cui-secondary-color-rgb: 222, 226, 230;
+  --cui-secondary-bg: #343a40;
+  --cui-secondary-bg-rgb: 52, 58, 64;
+  --cui-tertiary-color: rgba(222, 226, 230, 0.5);
+  --cui-tertiary-color-rgb: 222, 226, 230;
+  --cui-tertiary-bg: rgb(42.5, 47.5, 52.5);
+  --cui-tertiary-bg-rgb: 42.5, 47.5, 52.5;
+  --cui-high-emphasis: rgba(255, 255, 255, 0.87);
+  --cui-medium-emphasis: rgba(255, 255, 255, 0.6);
+  --cui-disabled: rgba(255, 255, 255, 0.38);
+  --cui-primary-text-emphasis: rgb(109.8, 168, 253.8);
+  --cui-secondary-text-emphasis: rgb(166.8, 172.2, 177);
+  --cui-success-text-emphasis: rgb(117, 183, 152.4);
+  --cui-info-text-emphasis: rgb(109.8, 223.2, 246);
+  --cui-warning-text-emphasis: rgb(255, 217.8, 106.2);
+  --cui-danger-text-emphasis: rgb(234, 133.8, 143.4);
+  --cui-light-text-emphasis: #f8f9fa;
+  --cui-dark-text-emphasis: #dee2e6;
+  --cui-primary-bg-subtle: rgb(2.6, 22, 50.6);
+  --cui-secondary-bg-subtle: rgb(21.6, 23.4, 25);
+  --cui-success-bg-subtle: rgb(5, 27, 16.8);
+  --cui-info-bg-subtle: rgb(2.6, 40.4, 48);
+  --cui-warning-bg-subtle: rgb(51, 38.6, 1.4);
+  --cui-danger-bg-subtle: rgb(44, 10.6, 13.8);
+  --cui-light-bg-subtle: #343a40;
+  --cui-dark-bg-subtle: #1a1d20;
+  --cui-primary-border-subtle: rgb(7.8, 66, 151.8);
+  --cui-secondary-border-subtle: rgb(64.8, 70.2, 75);
+  --cui-success-border-subtle: rgb(15, 81, 50.4);
+  --cui-info-border-subtle: rgb(7.8, 121.2, 144);
+  --cui-warning-border-subtle: rgb(153, 115.8, 4.2);
+  --cui-danger-border-subtle: rgb(132, 31.8, 41.4);
+  --cui-light-border-subtle: #495057;
+  --cui-dark-border-subtle: #343a40;
+  --cui-heading-color: inherit;
+  --cui-link-color: rgb(25, 112.3, 241);
+  --cui-link-hover-color: rgb(71, 140.84, 243.8);
+  --cui-link-color-rgb: 25, 112.3, 241;
+  --cui-link-hover-color-rgb: 71, 140.84, 243.8;
+  --cui-code-color: rgb(230.4, 132.6, 181.2);
+  --cui-highlight-color: #dee2e6;
+  --cui-highlight-bg: rgb(102, 77.2, 2.8);
+  --cui-border-color: #343a40;
+  --cui-border-color-translucent: rgba(255, 255, 255, 0.1);
+  --cui-form-valid-color: rgb(117, 183, 152.4);
+  --cui-form-valid-border-color: rgb(117, 183, 152.4);
+  --cui-form-invalid-color: rgb(234, 133.8, 143.4);
+  --cui-form-invalid-border-color: rgb(234, 133.8, 143.4);
+  --cui-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
+  --cui-carousel-indicator-active-bg: #000;
+  --cui-carousel-caption-color: #000;
+  --cui-carousel-control-icon-filter: invert(1) grayscale(100);
+}
+
+.theme-bootstrap {
+  .accordion {
+    --cui-accordion-color: var(--cui-body-color);
+    --cui-accordion-bg: var(--cui-body-bg);
+    --cui-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
+    --cui-accordion-border-color: var(--cui-border-color);
+    --cui-accordion-border-width: var(--cui-border-width);
+    --cui-accordion-border-radius: var(--cui-border-radius);
+    --cui-accordion-inner-border-radius: calc(var(--cui-border-radius) - (var(--cui-border-width)));
+    --cui-accordion-btn-padding-x: 1.25rem;
+    --cui-accordion-btn-padding-y: 1rem;
+    --cui-accordion-btn-color: var(--cui-body-color);
+    --cui-accordion-btn-bg: var(--cui-accordion-bg);
+    --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    --cui-accordion-btn-icon-width: 1.25rem;
+    --cui-accordion-btn-icon-transform: rotate(-180deg);
+    --cui-accordion-btn-icon-transition: transform 0.2s ease-in-out;
+    --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    --cui-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    --cui-accordion-body-padding-x: 1.25rem;
+    --cui-accordion-body-padding-y: 1rem;
+    --cui-accordion-active-color: var(--cui-primary-text-emphasis);
+    --cui-accordion-active-bg: var(--cui-primary-bg-subtle);
+  }
+
+  .btn-primary {
+    --cui-btn-color: #fff;
+    --cui-btn-bg: #0d6efd;
+    --cui-btn-border-color: #0d6efd;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #0b5ed7;
+    --cui-btn-hover-border-color: #0a58ca;
+    --cui-btn-focus-shadow-rgb: 49, 132, 253;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #0a58ca;
+    --cui-btn-active-border-color: #0a53be;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #fff;
+    --cui-btn-disabled-bg: #0d6efd;
+    --cui-btn-disabled-border-color: #0d6efd;
+  }
+  
+  .btn-secondary {
+    --cui-btn-color: #fff;
+    --cui-btn-bg: #6c757d;
+    --cui-btn-border-color: #6c757d;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #5c636a;
+    --cui-btn-hover-border-color: #565e64;
+    --cui-btn-focus-shadow-rgb: 130, 138, 145;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #565e64;
+    --cui-btn-active-border-color: #51585e;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #fff;
+    --cui-btn-disabled-bg: #6c757d;
+    --cui-btn-disabled-border-color: #6c757d;
+  }
+  
+  .btn-success {
+    --cui-btn-color: #fff;
+    --cui-btn-bg: #198754;
+    --cui-btn-border-color: #198754;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #157347;
+    --cui-btn-hover-border-color: #146c43;
+    --cui-btn-focus-shadow-rgb: 60, 153, 110;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #146c43;
+    --cui-btn-active-border-color: #13653f;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #fff;
+    --cui-btn-disabled-bg: #198754;
+    --cui-btn-disabled-border-color: #198754;
+  }
+  
+  .btn-info {
+    --cui-btn-color: #000;
+    --cui-btn-bg: #0dcaf0;
+    --cui-btn-border-color: #0dcaf0;
+    --cui-btn-hover-color: #000;
+    --cui-btn-hover-bg: #31d2f2;
+    --cui-btn-hover-border-color: #25cff2;
+    --cui-btn-focus-shadow-rgb: 11, 172, 204;
+    --cui-btn-active-color: #000;
+    --cui-btn-active-bg: #3dd5f3;
+    --cui-btn-active-border-color: #25cff2;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #000;
+    --cui-btn-disabled-bg: #0dcaf0;
+    --cui-btn-disabled-border-color: #0dcaf0;
+  }
+  
+  .btn-warning {
+    --cui-btn-color: #000;
+    --cui-btn-bg: #ffc107;
+    --cui-btn-border-color: #ffc107;
+    --cui-btn-hover-color: #000;
+    --cui-btn-hover-bg: #ffca2c;
+    --cui-btn-hover-border-color: #ffc720;
+    --cui-btn-focus-shadow-rgb: 217, 164, 6;
+    --cui-btn-active-color: #000;
+    --cui-btn-active-bg: #ffcd39;
+    --cui-btn-active-border-color: #ffc720;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #000;
+    --cui-btn-disabled-bg: #ffc107;
+    --cui-btn-disabled-border-color: #ffc107;
+  }
+  
+  .btn-danger {
+    --cui-btn-color: #fff;
+    --cui-btn-bg: #dc3545;
+    --cui-btn-border-color: #dc3545;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #bb2d3b;
+    --cui-btn-hover-border-color: #b02a37;
+    --cui-btn-focus-shadow-rgb: 225, 83, 97;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #b02a37;
+    --cui-btn-active-border-color: #a52834;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #fff;
+    --cui-btn-disabled-bg: #dc3545;
+    --cui-btn-disabled-border-color: #dc3545;
+  }
+  
+  .btn-light {
+    --cui-btn-color: #000;
+    --cui-btn-bg: #f8f9fa;
+    --cui-btn-border-color: #f8f9fa;
+    --cui-btn-hover-color: #000;
+    --cui-btn-hover-bg: #d3d4d5;
+    --cui-btn-hover-border-color: #c6c7c8;
+    --cui-btn-focus-shadow-rgb: 211, 212, 213;
+    --cui-btn-active-color: #000;
+    --cui-btn-active-bg: #c6c7c8;
+    --cui-btn-active-border-color: #babbbc;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #000;
+    --cui-btn-disabled-bg: #f8f9fa;
+    --cui-btn-disabled-border-color: #f8f9fa;
+  }
+  
+  .btn-dark {
+    --cui-btn-color: #fff;
+    --cui-btn-bg: #212529;
+    --cui-btn-border-color: #212529;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #424649;
+    --cui-btn-hover-border-color: #373b3e;
+    --cui-btn-focus-shadow-rgb: 66, 70, 73;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #4d5154;
+    --cui-btn-active-border-color: #373b3e;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #fff;
+    --cui-btn-disabled-bg: #212529;
+    --cui-btn-disabled-border-color: #212529;
+  }
+  
+  .btn-outline-primary {
+    --cui-btn-color: #0d6efd;
+    --cui-btn-border-color: #0d6efd;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #0d6efd;
+    --cui-btn-hover-border-color: #0d6efd;
+    --cui-btn-focus-shadow-rgb: 13, 110, 253;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #0d6efd;
+    --cui-btn-active-border-color: #0d6efd;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #0d6efd;
+    --cui-btn-disabled-bg: transparent;
+    --cui-btn-disabled-border-color: #0d6efd;
+    --cui-gradient: none;
+  }
+  
+  .btn-outline-secondary {
+    --cui-btn-color: #6c757d;
+    --cui-btn-border-color: #6c757d;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #6c757d;
+    --cui-btn-hover-border-color: #6c757d;
+    --cui-btn-focus-shadow-rgb: 108, 117, 125;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #6c757d;
+    --cui-btn-active-border-color: #6c757d;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #6c757d;
+    --cui-btn-disabled-bg: transparent;
+    --cui-btn-disabled-border-color: #6c757d;
+    --cui-gradient: none;
+  }
+  
+  .btn-outline-success {
+    --cui-btn-color: #198754;
+    --cui-btn-border-color: #198754;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #198754;
+    --cui-btn-hover-border-color: #198754;
+    --cui-btn-focus-shadow-rgb: 25, 135, 84;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #198754;
+    --cui-btn-active-border-color: #198754;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #198754;
+    --cui-btn-disabled-bg: transparent;
+    --cui-btn-disabled-border-color: #198754;
+    --cui-gradient: none;
+  }
+  
+  .btn-outline-info {
+    --cui-btn-color: #0dcaf0;
+    --cui-btn-border-color: #0dcaf0;
+    --cui-btn-hover-color: #000;
+    --cui-btn-hover-bg: #0dcaf0;
+    --cui-btn-hover-border-color: #0dcaf0;
+    --cui-btn-focus-shadow-rgb: 13, 202, 240;
+    --cui-btn-active-color: #000;
+    --cui-btn-active-bg: #0dcaf0;
+    --cui-btn-active-border-color: #0dcaf0;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #0dcaf0;
+    --cui-btn-disabled-bg: transparent;
+    --cui-btn-disabled-border-color: #0dcaf0;
+    --cui-gradient: none;
+  }
+  
+  .btn-outline-warning {
+    --cui-btn-color: #ffc107;
+    --cui-btn-border-color: #ffc107;
+    --cui-btn-hover-color: #000;
+    --cui-btn-hover-bg: #ffc107;
+    --cui-btn-hover-border-color: #ffc107;
+    --cui-btn-focus-shadow-rgb: 255, 193, 7;
+    --cui-btn-active-color: #000;
+    --cui-btn-active-bg: #ffc107;
+    --cui-btn-active-border-color: #ffc107;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #ffc107;
+    --cui-btn-disabled-bg: transparent;
+    --cui-btn-disabled-border-color: #ffc107;
+    --cui-gradient: none;
+  }
+  
+  .btn-outline-danger {
+    --cui-btn-color: #dc3545;
+    --cui-btn-border-color: #dc3545;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #dc3545;
+    --cui-btn-hover-border-color: #dc3545;
+    --cui-btn-focus-shadow-rgb: 220, 53, 69;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #dc3545;
+    --cui-btn-active-border-color: #dc3545;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #dc3545;
+    --cui-btn-disabled-bg: transparent;
+    --cui-btn-disabled-border-color: #dc3545;
+    --cui-gradient: none;
+  }
+  
+  .btn-outline-light {
+    --cui-btn-color: #f8f9fa;
+    --cui-btn-border-color: #f8f9fa;
+    --cui-btn-hover-color: #000;
+    --cui-btn-hover-bg: #f8f9fa;
+    --cui-btn-hover-border-color: #f8f9fa;
+    --cui-btn-focus-shadow-rgb: 248, 249, 250;
+    --cui-btn-active-color: #000;
+    --cui-btn-active-bg: #f8f9fa;
+    --cui-btn-active-border-color: #f8f9fa;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #f8f9fa;
+    --cui-btn-disabled-bg: transparent;
+    --cui-btn-disabled-border-color: #f8f9fa;
+    --cui-gradient: none;
+  }
+  
+  .btn-outline-dark {
+    --cui-btn-color: #212529;
+    --cui-btn-border-color: #212529;
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: #212529;
+    --cui-btn-hover-border-color: #212529;
+    --cui-btn-focus-shadow-rgb: 33, 37, 41;
+    --cui-btn-active-color: #fff;
+    --cui-btn-active-bg: #212529;
+    --cui-btn-active-border-color: #212529;
+    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --cui-btn-disabled-color: #212529;
+    --cui-btn-disabled-bg: transparent;
+    --cui-btn-disabled-border-color: #212529;
+    --cui-gradient: none;
+  }
+  
+  .btn-link {
+    --cui-btn-font-weight: 400;
+    --cui-btn-color: var(--cui-link-color);
+    --cui-btn-bg: transparent;
+    --cui-btn-border-color: transparent;
+    --cui-btn-hover-color: var(--cui-link-hover-color);
+    --cui-btn-hover-border-color: transparent;
+    --cui-btn-active-color: var(--cui-link-hover-color);
+    --cui-btn-active-border-color: transparent;
+    --cui-btn-disabled-color: #6c757d;
+    --cui-btn-disabled-border-color: transparent;
+    --cui-btn-box-shadow: 0 0 0 #000;
+    --cui-btn-focus-shadow-rgb: 49, 132, 253;
+    text-decoration: underline;
+  }
+
+  .form-control::-webkit-file-upload-button {
+    color: var(--cui-body-color);
+    background-color: var(--cui-tertiary-bg);
+    border-inline-end-width: var(--cui-border-width);
+  }
+  .form-control::file-selector-button {
+    color: var(--cui-body-color);
+    background-color: var(--cui-tertiary-bg);
+    border-inline-end-width: var(--cui-border-width);
+  }
+  .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+    background-color: var(--cui-secondary-bg);
+  }
+  .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: var(--cui-secondary-bg);
+  }
+}
\ No newline at end of file
diff --git a/packages/docs/src/styles/_search.scss b/packages/docs/src/styles/search.scss
similarity index 86%
rename from packages/docs/src/styles/_search.scss
rename to packages/docs/src/styles/search.scss
index c487e640..ae1e0b17 100644
--- a/packages/docs/src/styles/_search.scss
+++ b/packages/docs/src/styles/search.scss
@@ -1,5 +1,22 @@
-// stylelint-disable selector-class-pattern
+/*!
+ * CoreUI Docs (https://coreui.io/bootstrap/docs/)
+ * Copyright 2025 creativeLabs Łukasz Holeczek
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/mixins/box-shadow" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/vendor/rfs" as *;
+@use "@coreui/coreui/scss/variables" as *;
+ 
+@forward "@docsearch/css/dist/style";
+
 
+// stylelint-disable selector-class-pattern
 :root {
   --docsearch-primary-color: var(--cui-primary);
   --docsearch-logo-color: var(--cui-primary);
@@ -29,6 +46,7 @@
   --docsearch-muted-color: var(--cui-secondary-color);
   --docsearch-hit-shadow: none;
 
+  position: fixed;
   z-index: 2000; // Make sure to be over all components showcased in the documentation
   cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
 
@@ -39,11 +57,7 @@
 
 .DocSearch-Button {
   --docsearch-searchbox-background: #{rgba($black, .1)};
-  // --docsearch-searchbox-color: #{$white};
   --docsearch-searchbox-focus-background: #{rgba($black, .25)};
-  // --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
-  // --docsearch-text-color: #{$white};
-  // --docsearch-muted-color: #{rgba($white, .65)};
 
   min-width: 200px;
   min-height: 38px;
@@ -58,7 +72,6 @@
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($btn-border-radius);
-
   @include box-shadow($input-box-shadow);
   @include transition($input-transition);
 
diff --git a/packages/docs/src/styles/styles.scss b/packages/docs/src/styles/styles.scss
index d90d130a..40a7a1dd 100644
--- a/packages/docs/src/styles/styles.scss
+++ b/packages/docs/src/styles/styles.scss
@@ -1,18 +1,21 @@
-@import "@coreui/coreui/scss/coreui";
+@use "@coreui/coreui/scss/coreui" with (
+  $enable-deprecation-messages: false
+);
 
 // Import Chart.js custom tooltips styles
-@import "@coreui/chartjs/scss/coreui-chartjs";
+@use "@coreui/chartjs/scss/coreui-chartjs";
 
-@import "variables";
-@import "ads";
-@import "anchor";
-@import "callouts";
-@import "component-examples";
-@import "footer";
-@import "layout";
-@import "prism";
-@import "scrolling";
-@import "search";
-@import "sidebar";
-@import "table-api";
-@import "toc";
+// Load docs components
+@forward "root";
+@forward "ads";
+@forward "anchor";
+@forward "callouts";
+@forward "component-examples";
+@forward "component-sub-nav";
+@forward "footer";
+@forward "layout";
+@forward "prism";
+@forward "scrolling";
+@forward "sidebar";
+@forward "table-api";
+@forward "toc";
diff --git a/packages/docs/src/templates/DefaultLayout.tsx b/packages/docs/src/templates/DefaultLayout.tsx
index 83c5fd99..f4c6ceb2 100644
--- a/packages/docs/src/templates/DefaultLayout.tsx
+++ b/packages/docs/src/templates/DefaultLayout.tsx
@@ -1,25 +1,12 @@
-import React, { FC, useState } from 'react'
-import { Footer, Header, Sidebar, Seo } from '../components'
-import { CContainer } from '@coreui/react/src/'
-import DocsLayout from './DocsLayout'
-
+import React, { FC, ReactNode, useState } from 'react'
 import { AppContext } from '../AppContext'
-import { Script } from 'gatsby'
 
 interface DefaultLayoutProps {
-  children: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  data: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  pageContext: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  path: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  children: ReactNode
 }
 
-const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, pageContext, path }) => {
+const DefaultLayout: FC<DefaultLayoutProps> = ({ children }) => {
   const [sidebarVisible, setSidebarVisible] = useState()
-
-  const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
-  const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
-  const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
-
   return (
     <AppContext.Provider
       value={{
@@ -27,42 +14,7 @@ const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, pageContext, pa
         setSidebarVisible,
       }}
     >
-      <Seo title={title} description={description} name={name} />
-      <Sidebar />
-      <div className="wrapper flex-grow-1">
-        <Header />
-        {path === '/404/' ? (
-          <CContainer lg>{children}</CContainer>
-        ) : (
-          <DocsLayout data={data} pageContext={pageContext}>
-            {children}
-          </DocsLayout>
-        )}
-        <Footer />
-      </div>
-      <Script
-        src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"
-        onLoad={() => {
-          const searchElement = document.getElementById('docsearch')
-
-          // @ts-expect-error global variable
-          if (!window.docsearch || !searchElement) {
-            return
-          }
-
-          // @ts-expect-error global variable
-          window.docsearch({
-            appId: 'JIOZIZPLMM',
-            apiKey: '6e3f7692d2589d042bb40426b75df1b7',
-            indexName: 'coreui-react',
-            container: searchElement,
-            // Set debug to `true` if you want to inspect the dropdown
-            debug: true,
-          })
-        }}
-      />
-
-      <script type="text/javascript"></script>
+      {children}
     </AppContext.Provider>
   )
 }
diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx
index f0c53da6..c16b7241 100644
--- a/packages/docs/src/templates/DocsLayout.tsx
+++ b/packages/docs/src/templates/DocsLayout.tsx
@@ -1,89 +1,199 @@
-import React, { FC } from 'react'
-import { Ads, Banner, Seo, Toc } from '../components'
-import { CContainer } from '@coreui/react/src/'
+import React, { FC, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { Link } from 'gatsby'
+import { CContainer } from '@coreui/react'
+import { Ads, Banner, ComponentSubNav, Footer, Header, Sidebar, Toc } from '../components'
+// @ts-expect-error json file
+import jsonData from './../data/other_frameworks.json'
+
+import { Item } from '../components/ComponentSubNav'
+import type { TocItem } from '../components/Toc'
 
 interface DocsLayoutProps {
-  children: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  data: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  pageContext: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  children: ReactNode
+  data: DocsData
+  location: Location
+  pageContext: PageContext
+  path: string
 }
 
-// @ts-expect-error json file
-import jsonData from './../data/other_frameworks.json'
+interface DocsData {
+  allMdx: {
+    edges: Array<{
+      node: {
+        fields: {
+          slug: string
+        }
+      }
+    }>
+  }
+  mdx?: {
+    tableOfContents: {
+      items: TocItem[]
+    }
+  }
+}
+
+interface PageContext {
+  frontmatter?: Frontmatter
+}
+
+interface Frontmatter {
+  title?: string
+  description?: string
+  name?: string
+  other_frameworks?: string
+  pro_component?: boolean
+  route?: string
+}
+
+interface OtherFrameworks {
+  [key: string]: {
+    [key: string]: string
+  }
+}
 
-const humanize = (text: string) => {
-  const string = text
+const humanize = (text: string): string => {
+  return text
     .split('-')
-    .reduce(
-      (accumulator, currentValue) =>
-        accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
-    )
-  return string[0].toUpperCase() + string.slice(1)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+const getDescription = (location: Location, description: string) => {
+  if (location.pathname.includes('api') || location.pathname.includes('styling')) {
+    const regex = /React\s+(.*?)\s+component/
+    const parts = description.split(regex)
+    const matches = description.match(regex)
+
+    if (matches && parts.length > 1) {
+      return (
+        <>
+          {parts[0]}
+          <Link to="../">React {parts[1]}</Link> component
+          {parts[2]}
+        </>
+      )
+    }
+
+    return description
+  }
+
+  return description
 }
 
-const DocsLayout: FC<DocsLayoutProps> = ({ children, data, pageContext }) => {
-  const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
-  const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
-  const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
-  const other_frameworks = pageContext.frontmatter ? pageContext.frontmatter.other_frameworks : ''
-  const pro_component = pageContext.frontmatter ? pageContext.frontmatter.pro_component : ''
-  const route = pageContext.frontmatter ? pageContext.frontmatter.route : ''
-  const frameworks = other_frameworks ? other_frameworks.split(', ') : false
-  const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
+const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext, path }) => {
+  const docsNavRef = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLDivElement>(null)
+  const [docsNavHeight, setDocsNavHeigh] = useState<number>(0)
+  const [headerHeight, setHeaderHeight] = useState<number>(0)
+  const frontmatter = pageContext.frontmatter || {}
+
+  const {
+    title = '',
+    description = '',
+    name = '',
+    other_frameworks: otherFrameworksStr = '',
+    pro_component: proComponent = false,
+    bootstrap_component: bootstrapComponent = false,
+  } = frontmatter
+  const frameworks = useMemo(
+    () => otherFrameworksStr.split(', ').filter(Boolean),
+    [otherFrameworksStr]
+  )
+  const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), [])
+  const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data])
+
+  const handleScroll = () => {
+    if (docsNavRef.current) {
+      setDocsNavHeigh(docsNavRef.current.offsetHeight)
+    }
+    if (headerRef.current) {
+      setHeaderHeight(headerRef.current.offsetHeight)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
 
   return (
     <>
-      <Seo title={title} description={description} name={name} />
-      <CContainer lg className="my-md-4 flex-grow-1">
-        <main className="docs-main order-1">
-          <div className="docs-intro ps-lg-4">
-            <Banner pro={pro_component} />
-            {name && name !== title ? (
-              <div className="d-flex flex-column">
-                <h1 className="order-2 h5 mb-4 text-body-secondary" id="content">
-                  {title}
-                </h1>
-                <h2 className="docs-title order-1 h1">{name}</h2>
+      <Sidebar />
+      <div className="wrapper flex-grow-1">
+        <Header ref={headerRef} />
+        {hasNav && (
+          <ComponentSubNav
+            nodes={data?.allMdx?.edges as Item[]}
+            style={{ top: `${headerHeight}px` } as React.CSSProperties}
+            ref={docsNavRef}
+          />
+        )}
+        {path === '/404/' ? (
+          <CContainer lg className="px-4">
+            {children}
+          </CContainer>
+        ) : (
+          <CContainer lg className="my-md-4 flex-grow-1 px-4">
+            <main className="docs-main order-1">
+              <div className="docs-intro">
+                {name && name !== title ? (
+                  <div className="d-flex flex-column">
+                    <h1 className="order-2 h5 mb-4 text-body-secondary" id="content">
+                      {title}
+                    </h1>
+                    <h2 className="docs-title order-1 h1">{name}</h2>
+                  </div>
+                ) : (
+                  <h1 className="docs-title" id="content">
+                    {title}
+                  </h1>
+                )}
+                <Banner bootstrap={bootstrapComponent} />
+                <Banner pro={proComponent} />
+                <p className="docs-lead">{getDescription(location, description)}</p>
+                <Ads code="CEAICKJY" location={location.pathname} placement="coreuiio" />
+                {frameworks.length > 0 && (
+                  <>
+                    <h2>Other Frameworks</h2>
+                    <p>
+                      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and
+                      Vue components. To learn more please visit the following pages.
+                    </p>
+                    <ul>
+                      {frameworks.map((item) => (
+                        <React.Fragment key={item}>
+                          {Object.entries(otherFrameworks[item] || {})
+                            .filter(([key]) => key !== 'react')
+                            .map(([framework, url]) => (
+                              <li key={framework}>
+                                <a href={url}>
+                                  {framework.charAt(0).toUpperCase() + framework.slice(1)}{' '}
+                                  {humanize(item)}
+                                </a>
+                              </li>
+                            ))}
+                        </React.Fragment>
+                      ))}
+                    </ul>
+                  </>
+                )}
               </div>
-            ) : (
-              <h1 className="docs-title" id="content">
-                {title}
-              </h1>
-            )}
-            <p className="docs-lead">{description}</p>
-            <Ads code="CEAICKJY" location={route} placement="coreuiio" />
-            {frameworks && (
-              <>
-                <h2>Other frameworks</h2>
-                <p>
-                  CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue
-                  components. To learn more please visit the following pages.
-                </p>
-                <ul>
-                  {frameworks.map((item: string, index: number) => (
-                    <React.Fragment key={index}>
-                      {Object.keys(otherFrameworks[item]).map(
-                        (el, index) =>
-                          el !== 'react' && (
-                            <li key={index}>
-                              <a href={otherFrameworks[item][el]}>
-                                <>
-                                  {el[0].toUpperCase() + el.slice(1)} {humanize(item)}
-                                </>
-                              </a>
-                            </li>
-                          ),
-                      )}
-                    </React.Fragment>
-                  ))}
-                </ul>
-              </>
-            )}
-          </div>
-          {data && data.mdx && <Toc items={data.mdx.tableOfContents.items} />}
-          <div className="docs-content ps-lg-4">{children}</div>
-        </main>
-      </CContainer>
+              {data?.mdx && (
+                <Toc
+                  items={data.mdx.tableOfContents.items}
+                  style={{ top: `${docsNavHeight + headerHeight + 16}px` }}
+                />
+              )}
+              <div className="docs-content">{children}</div>
+            </main>
+          </CContainer>
+        )}
+        <Footer />
+      </div>
     </>
   )
 }
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
index cfe62f86..4fddc174 100644
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ b/packages/docs/src/templates/MdxLayout.tsx
@@ -1,91 +1,127 @@
-import React, { FC } from 'react'
-import { graphql } from 'gatsby'
+import React, { FC, useMemo } from 'react'
+import { graphql, PageProps } from 'gatsby'
 import { MDXProvider } from '@mdx-js/react'
-import { CBadge, CTable } from '@coreui/react/src/index'
-import { Callout, CodeBlock, Example, ScssDocs } from '../components'
+import {
+  Callout,
+  CodeBlock,
+  ClassNamesDocs,
+  Example,
+  ExampleSnippet,
+  JSXDocs,
+  ScssDocs,
+  Seo,
+} from '../components'
 
-interface MdxLayoutProps {
-  data: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  children: any // eslint-disable-line @typescript-eslint/no-explicit-any
+import { CalloutProps } from '../components/Callout'
+import { CodeBlockProps } from '../components/CodeBlock'
+import { ExampleProps } from '../components/Example'
+import { ExampleSnippetProps } from '../components/ExampleSnippet'
+import { ScssDocsProps } from '../components/ScssDocs'
+import type { TocItem } from '../components/Toc'
+
+interface DataProps {
+  mdx: {
+    tableOfContents: Toc
+  }
+  allMdx: {
+    edges: Array<{
+      node: {
+        id: string
+        fields: {
+          slug: string
+        }
+      }
+    }>
+  }
 }
 
-const MdxLayout: FC<MdxLayoutProps> = ({ children }) => {
-  return (
-    <MDXProvider
-      components={{
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ScssDocs: (props: any) => <ScssDocs {...props} />,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        strong: (props: any) => {
-          if (props.children.type == 'em') {
-            const color = props.children.props.children.includes('Deprecated')
-              ? 'warning'
-              : 'primary'
-            return (
-              <>
-                <br />
-                <CBadge {...props.children.props} color={color} />
-              </>
-            )
-          } else {
-            return <strong>{props.children}</strong>
-          }
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        pre: (props: any) => <CodeBlock {...props} />,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        table: (props: any) => {
-          // TODO: find better soultion
-          const isApiTable =
-            props.children[0].props.children.props.children[0].props.children &&
-            props.children[0].props.children.props.children[0].props.children.includes('Property')
-          return (
-            <CTable
-              responsive
-              {...props}
-              className={`table ${isApiTable && ' table-striped table-api'}`}
-            />
-          )
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Callout: (props: any) => {
-          const { children, title, ...rest } = props
-          return (
-            <Callout {...rest}>
-              {title && <h5>{title}</h5>}
-              {children}
-            </Callout>
-          )
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Example: (props: any) => {
-          const { children, ...rest } = props
-          return (
-            <Example {...rest}>
-              {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                  return React.cloneElement(child)
-                }
-                return
-              })}
-            </Example>
-          )
-        },
-      }}
-    >
-      {children}
-    </MDXProvider>
+interface PageContextType {
+  frontmatter: {
+    title: string
+    description: string
+    name: string
+  }
+}
+
+interface Toc {
+  items: TocItem[]
+}
+
+const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
+  const components = useMemo(
+    () => ({
+      Callout: (props: CalloutProps) => {
+        const { children, title, ...rest } = props
+        return (
+          <Callout {...rest}>
+            {title && <h5>{title}</h5>}
+            {children}
+          </Callout>
+        )
+      },
+      ClassNamesDocs: (props: { files: string | string[] }) => <ClassNamesDocs {...props} />,
+      Example: (props: ExampleProps) => {
+        const { children, ...rest } = props
+        return (
+          <Example {...rest}>
+            {React.Children.map(children, (child) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child)
+              }
+              return
+            })}
+          </Example>
+        )
+      },
+      ExampleSnippet: (props: ExampleSnippetProps) => <ExampleSnippet {...props} />,
+      JSXDocs: (props: { code: string }) => <JSXDocs {...props} />,
+      ScssDocs: (props: ScssDocsProps) => <ScssDocs {...props} />,
+      pre: (props: CodeBlockProps) => <CodeBlock {...props} />,
+      table: (props) => (
+        <div className="table-responsive table-docs border rounded mb-3">
+          <table className="table table-docs" {...props} />
+        </div>
+      ),
+    }),
+    [],
   )
+  return <MDXProvider components={components}>{children}</MDXProvider>
 }
 
 MdxLayout.displayName = 'MdxLayout'
 
 export default MdxLayout
 
+export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
+  const { frontmatter } = pageContext
+
+  const title = frontmatter?.title || ''
+  const description = frontmatter?.description || ''
+  const name = frontmatter?.name || ''
+  const pro = frontmatter?.pro_component || false
+
+  return (
+    <>
+      <html lang="en" />
+      <Seo title={title} description={description} name={name} pro={pro} />
+    </>
+  )
+}
+
 export const pageQuery = graphql`
-  query BlogPostQuery($id: String) {
+  query PageQuery($id: String, $regex: String) {
     mdx(id: { eq: $id }) {
       tableOfContents(maxDepth: 3)
     }
+    allMdx(filter: { fields: { slug: { regex: $regex } } }) {
+      edges {
+        node {
+          id
+          fields {
+            slug
+          }
+        }
+      }
+    }
   }
 `
diff --git a/packages/docs/src/utils/codesandbox.ts b/packages/docs/src/utils/codesandbox.ts
new file mode 100644
index 00000000..e2964eb9
--- /dev/null
+++ b/packages/docs/src/utils/codesandbox.ts
@@ -0,0 +1,76 @@
+import {
+  ProjectOptions,
+  generateTitle,
+  generateDescription,
+  generateIndexHTML,
+  generateIndexJS,
+  generatePackageJSON,
+} from './projectUtils'
+
+// Define the options interface specific to CodeSandbox
+interface CodeSandboxOptions extends ProjectOptions {
+  language: 'js' | 'ts'
+}
+
+// Function to open a CodeSandbox project
+export const openCodeSandboxProject = async (options: CodeSandboxOptions) => {
+  const { code, componentName, language, name, pro = false } = options
+
+  const title = generateTitle(componentName)
+  const description = generateDescription(componentName)
+  const template = 'create-react-app'
+
+  const indexHTML = generateIndexHTML(title)
+  const indexExtension = language === 'ts' ? 'tsx' : 'js'
+  const indexJS = generateIndexJS(name, language, pro)
+  const packageJSON = generatePackageJSON(title, description, language, pro, code, 'codesandbox')
+
+  // Define the files structure
+  const files: Record<string, { content: string }> = {
+    'public/index.html': {
+      content: indexHTML,
+    },
+    [`src/${name}.${language}x`]: {
+      content: code.replaceAll('../../images/', 'https://assets.coreui.io/images/'),
+    },
+    [`src/index.${indexExtension}`]: {
+      content: indexJS,
+    },
+    'package.json': {
+      content: packageJSON,
+    },
+  }
+
+  // Define the payload for CodeSandbox API
+  const payload = {
+    files,
+    template,
+    title,
+    description,
+  }
+
+  try {
+    // Make a POST request to CodeSandbox API
+    const response = await fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+
+    if (!response.ok) {
+      throw new Error(`Error creating sandbox: ${response.statusText}`)
+    }
+
+    const result = await response.json()
+
+    // Open the sandbox in a new tab
+    const sandboxURL = `https://codesandbox.io/s/${result.sandbox_id}`
+    window.open(sandboxURL, '_blank')
+  } catch (error) {
+    console.error('Failed to create CodeSandbox:', error)
+    alert('Failed to create CodeSandbox. Please check the console for more details.')
+  }
+}
diff --git a/packages/docs/src/utils/projectUtils.ts b/packages/docs/src/utils/projectUtils.ts
new file mode 100644
index 00000000..8404ecaa
--- /dev/null
+++ b/packages/docs/src/utils/projectUtils.ts
@@ -0,0 +1,146 @@
+export interface ProjectOptions {
+  code: string
+  componentName?: string
+  language: 'js' | 'ts'
+  name: string
+  pro: boolean
+}
+
+export const extractDependencies = (code: string, exclude: string[] = []) => {
+  const importRegex = /import\s+(?:{[^}]+}|\S+)\s+from\s+["']([^"']+)["']/g
+  const dependencies = []
+
+  let match
+  while ((match = importRegex.exec(code)) !== null) {
+    const dependency = match[1]
+
+    if (!exclude.includes(dependency) && !exclude.some((prefix) => dependency.startsWith(prefix))) {
+      dependencies.push(dependency)
+    }
+  }
+
+  return dependencies
+}
+
+// Function to generate title
+export const generateTitle = (componentName?: string): string => {
+  return componentName ? `${componentName} Example` : 'Project Preview'
+}
+
+// Function to generate description
+export const generateDescription = (componentName?: string): string => {
+  const baseURL = globalThis.location.href
+  return componentName
+    ? `${componentName} example from ${baseURL}`
+    : `Official example from ${baseURL}`
+}
+
+// Function to generate dependencies
+export const getDependencies = (
+  language: 'js' | 'ts',
+  pro: boolean,
+  code: string,
+): Record<string, string> => {
+  const dependencies: Record<string, string> = {
+    ...(pro
+      ? {
+          '@coreui/coreui-pro': 'latest',
+          '@coreui/react-pro': 'latest',
+        }
+      : {
+          '@coreui/coreui': 'latest',
+          '@coreui/react': 'latest',
+        }),
+    '@popperjs/core': 'latest',
+    react: '~18.3',
+    'react-dom': '~18.3',
+    'react-scripts': 'latest',
+  }
+
+  const externalDependencies = extractDependencies(code, ['react', 'react-dom'])
+
+  for (const dependency of externalDependencies) {
+    dependencies[`${dependency}`] = 'latest'
+  }
+
+  if (language === 'ts') {
+    dependencies['typescript'] = 'latest'
+    dependencies['@types/jest'] = 'latest'
+    dependencies['@types/node'] = 'latest'
+    dependencies['@types/react'] = '~18.3'
+    dependencies['@types/react-dom'] = '~18.3'
+  }
+
+  const sortedDependencies: Record<string, string> = {}
+  const keys = Object.keys(dependencies).sort()
+  for (const key of keys) {
+    sortedDependencies[key] = dependencies[key]
+  }
+
+  return sortedDependencies
+}
+
+// Function to generate scripts
+export const getScripts = (): Record<string, string> => {
+  return {
+    start: 'react-scripts start',
+    build: 'react-scripts build',
+  }
+}
+
+// Function to generate index.html content
+export const generateIndexHTML = (title: string): string => {
+  return `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <title>${title}</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+      <div id="root"></div>
+    </body>
+  </html>`
+}
+
+// Function to generate index.js or index.tsx content
+export const generateIndexJS = (name: string, language: 'js' | 'ts', pro: boolean): string => {
+  return `import React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css';
+import { ${name} } from './${name}.${language}x';
+  
+ReactDOM.createRoot(document.querySelector("#root")).render(
+  <React.StrictMode>
+    <div className="p-3">
+      <${name} />
+    </div>
+  </React.StrictMode>
+);`
+}
+
+// Function to generate package.json content
+export const generatePackageJSON = (
+  title: string,
+  description: string,
+  language: 'js' | 'ts',
+  pro: boolean,
+  code: string,
+  templateType: 'codesandbox' | 'stackblitz',
+): string => {
+  const indexExtension = language === 'ts' ? 'tsx' : 'js'
+
+  const packageJSON = {
+    name: title.toLowerCase().replaceAll(/\s+/g, '-'),
+    version: '1.0.0',
+    description,
+    main: templateType === 'codesandbox' ? `src/index.${indexExtension}` : `index.js`,
+    scripts: getScripts(),
+    dependencies: getDependencies(language, pro, code),
+    ...(templateType === 'stackblitz' && {
+      devDependencies: language === 'ts' ? getDependencies(language, pro, code) : {},
+    }),
+  }
+
+  return JSON.stringify(packageJSON, null, 2)
+}
diff --git a/packages/docs/src/utils/stackblitz.ts b/packages/docs/src/utils/stackblitz.ts
new file mode 100644
index 00000000..f0161e27
--- /dev/null
+++ b/packages/docs/src/utils/stackblitz.ts
@@ -0,0 +1,49 @@
+import sdk, { Project } from '@stackblitz/sdk'
+import {
+  ProjectOptions,
+  generateTitle,
+  generateDescription,
+  getDependencies,
+  generateIndexHTML,
+  generateIndexJS,
+  generatePackageJSON,
+} from './projectUtils'
+
+// Define the options interface specific to StackBlitz
+interface StackBlitzOptions extends ProjectOptions {
+  language: 'js' | 'ts'
+}
+
+// Function to open a StackBlitz project
+export const openStackBlitzProject = (options: StackBlitzOptions) => {
+  const { code, componentName, language, name, pro = false } = options
+
+  const title = generateTitle(componentName)
+  const description = generateDescription(componentName)
+  const template = 'create-react-app'
+
+  const indexHTML = generateIndexHTML(title)
+  const indexJS = generateIndexJS(name, language, pro)
+  const packageJSON = generatePackageJSON(title, description, language, pro, code, 'stackblitz')
+
+  const files = {
+    'public/index.html': indexHTML,
+    [`src/${name}.${language}x`]: code.replaceAll(
+      '../../images/',
+      'https://assets.coreui.io/images/',
+    ),
+    [`src/index.js`]: indexJS, // StackBlitz uses 'index.js' regardless of language
+    'package.json': packageJSON,
+  }
+
+  const project: Project = {
+    title,
+    description,
+    template,
+    files,
+    dependencies: getDependencies(language, pro, code),
+    tags: ['coreui', 'react'],
+  }
+
+  sdk.openProject(project, { openFile: `src/index.${language === 'ts' ? 'tsx' : 'js'}` })
+}
diff --git a/packages/docs/content/assets/images/angular.jpg b/packages/docs/static/images/angular.jpg
similarity index 100%
rename from packages/docs/content/assets/images/angular.jpg
rename to packages/docs/static/images/angular.jpg
diff --git a/packages/docs/content/assets/images/avatars/1.jpg b/packages/docs/static/images/avatars/1.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/1.jpg
rename to packages/docs/static/images/avatars/1.jpg
diff --git a/packages/docs/content/assets/images/avatars/2.jpg b/packages/docs/static/images/avatars/2.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/2.jpg
rename to packages/docs/static/images/avatars/2.jpg
diff --git a/packages/docs/content/assets/images/avatars/3.jpg b/packages/docs/static/images/avatars/3.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/3.jpg
rename to packages/docs/static/images/avatars/3.jpg
diff --git a/packages/docs/content/assets/images/avatars/4.jpg b/packages/docs/static/images/avatars/4.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/4.jpg
rename to packages/docs/static/images/avatars/4.jpg
diff --git a/packages/docs/content/assets/images/avatars/5.jpg b/packages/docs/static/images/avatars/5.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/5.jpg
rename to packages/docs/static/images/avatars/5.jpg
diff --git a/packages/docs/content/assets/images/avatars/6.jpg b/packages/docs/static/images/avatars/6.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/6.jpg
rename to packages/docs/static/images/avatars/6.jpg
diff --git a/packages/docs/content/assets/images/avatars/7.jpg b/packages/docs/static/images/avatars/7.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/7.jpg
rename to packages/docs/static/images/avatars/7.jpg
diff --git a/packages/docs/content/assets/images/avatars/8.jpg b/packages/docs/static/images/avatars/8.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/8.jpg
rename to packages/docs/static/images/avatars/8.jpg
diff --git a/packages/docs/content/assets/images/avatars/9.jpg b/packages/docs/static/images/avatars/9.jpg
similarity index 100%
rename from packages/docs/content/assets/images/avatars/9.jpg
rename to packages/docs/static/images/avatars/9.jpg
diff --git a/packages/docs/content/assets/images/brand/coreui-signet.svg b/packages/docs/static/images/brand/coreui-signet.svg
similarity index 100%
rename from packages/docs/content/assets/images/brand/coreui-signet.svg
rename to packages/docs/static/images/brand/coreui-signet.svg
diff --git a/packages/docs/content/assets/images/react.jpg b/packages/docs/static/images/react.jpg
similarity index 100%
rename from packages/docs/content/assets/images/react.jpg
rename to packages/docs/static/images/react.jpg
diff --git a/packages/docs/content/assets/images/react400.jpg b/packages/docs/static/images/react400.jpg
similarity index 100%
rename from packages/docs/content/assets/images/react400.jpg
rename to packages/docs/static/images/react400.jpg
diff --git a/packages/docs/content/assets/images/vue.jpg b/packages/docs/static/images/vue.jpg
similarity index 100%
rename from packages/docs/content/assets/images/vue.jpg
rename to packages/docs/static/images/vue.jpg
diff --git a/packages/gatsby-remark-import-markdown/index.js b/packages/gatsby-remark-import-markdown/index.js
index 398ce941..f1e5018b 100755
--- a/packages/gatsby-remark-import-markdown/index.js
+++ b/packages/gatsby-remark-import-markdown/index.js
@@ -1,52 +1,143 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-'use strict'
-
-const fs = require('fs')
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, unicorn/prefer-module */
+const fs = require('node:fs')
+const path = require('node:path')
 const normalizePath = require('normalize-path')
-const visit = require('unist-util-visit')
+const visitParents = require('unist-util-visit-parents') // Ensure you have installed this
 const unified = require('unified')
 const parse = require('remark-parse')
 const remarkGfm = require('remark-gfm')
-const html = require('remark-html')
 
+/**
+ * Plugin Options Interface
+ * @typedef {Object} PluginOptions
+ * @property {string} directory - The directory containing markdown fragments
+ */
+
+/**
+ * Main plugin function
+ * @param {Object} param0 - Object containing the markdown AST
+ * @param {Object} [pluginOptions={}] - Plugin options
+ * @param {PluginOptions} pluginOptions.directory - Required directory option
+ * @returns {Object} - The transformed markdown AST
+ */
+// eslint-disable-next-line unicorn/no-anonymous-default-export
 module.exports = ({ markdownAST }, pluginOptions = {}) => {
-  const directory = pluginOptions.directory
+  const { directory } = pluginOptions
+
+  validateDirectory(directory)
+
+  const normalizedDirectory = ensureTrailingSlash(normalizeDirectory(directory))
+
+  const processor = unified().use(parse).use(remarkGfm)
 
+  visitParents(markdownAST, 'inlineCode', (node, ancestors) => {
+    processInlineCodeNode(node, ancestors, normalizedDirectory, processor)
+  })
+
+  return markdownAST
+}
+
+/**
+ * Validates the directory option
+ * @param {string} directory - The directory to validate
+ */
+function validateDirectory(directory) {
   if (!directory) {
-    throw Error(`Required option \"directory\" not specified`)
-  } else if (!fs.existsSync(directory)) {
-    throw Error(`Invalid directory specified \"${directory}\"`)
-  } else if (!directory.endsWith('/')) {
-    directory += '/'
+    throw new Error(`Required option "directory" not specified`)
+  }
+
+  if (!fs.existsSync(directory)) {
+    throw new Error(`Invalid directory specified "${directory}"`)
+  }
+}
+
+/**
+ * Normalizes the directory path
+ * @param {string} directory - The directory path to normalize
+ * @returns {string} - The normalized directory path
+ */
+function normalizeDirectory(directory) {
+  return path.resolve(directory)
+}
+
+/**
+ * Ensures the directory path ends with a trailing slash
+ * @param {string} directory - The directory path
+ * @returns {string} - The directory path with a trailing slash
+ */
+function ensureTrailingSlash(directory) {
+  return directory.endsWith(path.sep) ? directory : `${directory}${path.sep}`
+}
+
+/**
+ * Processes an inline code node that starts with 'markdown:'
+ * @param {Object} node - The AST node
+ * @param {Array} ancestors - Ancestor nodes
+ * @param {string} directory - The base directory for markdown fragments
+ * @param {Object} processor - Unified processor instance
+ */
+function processInlineCodeNode(node, ancestors, directory, processor) {
+  const { value } = node
+
+  if (!value.startsWith('markdown:')) {
+    return
   }
 
-  visit(markdownAST, 'inlineCode', (node, _, parent) => {
-    const value = node.value
+  const fileName = value.slice('markdown:'.length).trim()
 
-    if (value.startsWith('markdown:')) {
-      const file = value.substr(9)
-      const path = normalizePath('' + directory + file)
+  if (!fileName) {
+    throw new Error('Inline code starting with "markdown:" must specify a file name')
+  }
 
-      if (!fs.existsSync(path)) {
-        throw Error(`Invalid fragment specified; no such file "${path}"`)
-      }
+  const filePath = normalizePath(path.join(directory, fileName))
 
-      const code = fs.readFileSync(path, 'utf8')
-      const markdown = unified()
-        .use(parse)
-        .use(remarkGfm)
-        .use(html, { sanitize: false })
-        .parse(code)
+  if (!fs.existsSync(filePath)) {
+    throw new Error(`Invalid fragment specified; no such file "${filePath}"`)
+  }
+
+  const fileContent = fs.readFileSync(filePath, 'utf8')
+  const parsed = processor.parse(
+    fileContent.replaceAll('className="', 'class="').replaceAll('{`', '').replaceAll('`}', ''),
+  )
+
+  removePositionData(parsed)
+
+  replaceParentNodeWithParsedContent(ancestors, parsed.children)
+}
 
-      parent.type = 'div'
-      parent.children = []
+/**
+ * Removes position information from AST nodes to avoid conflicts
+ * @param {Object} parsed - The parsed AST
+ */
+function removePositionData(parsed) {
+  if (!parsed.children) return
 
-      markdown.children.forEach((child) => {
-        delete child.position
-        parent.children.push(child)
-      })
+  parsed.children.forEach((child) => {
+    if (child.position) {
+      delete child.position
     }
   })
+}
 
-  return markdownAST
+/**
+ * Replaces the parent node with the new array of nodes from the parsed content
+ * @param {Array} ancestors - Ancestor nodes
+ * @param {Array} newChildren - New child nodes to insert
+ */
+function replaceParentNodeWithParsedContent(ancestors, newChildren) {
+  const parent = ancestors.at(-1)
+  const grandparent = ancestors.at(-2)
+
+  if (!grandparent || !Array.isArray(grandparent.children)) {
+    throw new Error('Parent node does not have a grandparent with children')
+  }
+
+  const parentIndex = grandparent.children.indexOf(parent)
+
+  if (parentIndex === -1) {
+    throw new Error("Parent node not found in grandparent's children")
+  }
+
+  // Replace the parent node with the new nodes
+  grandparent.children.splice(parentIndex, 1, ...newChildren)
 }
diff --git a/packages/gatsby-remark-import-markdown/package.json b/packages/gatsby-remark-import-markdown/package.json
index 84f9c71d..42b8f614 100644
--- a/packages/gatsby-remark-import-markdown/package.json
+++ b/packages/gatsby-remark-import-markdown/package.json
@@ -14,9 +14,9 @@
   "description": "Gatsby plugin to embed markdown fragments within markdown",
   "dependencies": {
     "normalize-path": "^2.1.1",
-    "unist-util-map": "^1.0.3",
-    "unist-util-visit": "^2.0.3",
-    "unified": "^9.2.1",
+    "unist-util-map": "^1.0.5",
+    "unist-util-visit-parents": "^3.1.1",
+    "unified": "^9.2.2",
     "remark-gfm": "^1.0.0",
     "remark-html": "^13.0.2",
     "remark-parse": "^9.0.0",
diff --git a/packages/gatsby-remark-jsx-preview/index.js b/packages/gatsby-remark-jsx-preview/index.js
index f2219dba..a0eaadb8 100755
--- a/packages/gatsby-remark-jsx-preview/index.js
+++ b/packages/gatsby-remark-jsx-preview/index.js
@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-'use strict'
-
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, unicorn/prefer-module */
 const acorn = require('acorn')
 const fromMarkdown = require('mdast-util-from-markdown')
 const mdxJsx = require('mdast-util-mdx-jsx')
@@ -8,12 +6,13 @@ const mdxMd = require('micromark-extension-mdx-md')
 const syntax = require('micromark-extension-mdx-jsx')
 const visit = require('unist-util-visit')
 
+// eslint-disable-next-line unicorn/no-anonymous-default-export
 module.exports = ({ markdownAST }) => {
   visit(markdownAST, 'code', (node) => {
     if (node.meta && node.meta.includes('preview')) {
       const value = node.value
       const className = /className="(.*)"/.test(node.meta) ? RegExp.$1 : ''
-      const tree = fromMarkdown(value.replace(/(\r\n|\n|\r)/gm, ''), {
+      const tree = fromMarkdown(value.replaceAll(/(\r\n|\n|\r)/gm, ''), {
         extensions: [syntax({ acorn: acorn, addResult: true }), mdxMd],
         mdastExtensions: [mdxJsx.fromMarkdown],
       })
diff --git a/packages/remark-code-tabs/index.js b/packages/remark-code-tabs/index.js
index bb414d7d..e8b6d6a6 100755
--- a/packages/remark-code-tabs/index.js
+++ b/packages/remark-code-tabs/index.js
@@ -140,7 +140,7 @@ function createTabs(tabNodes, { labels }) {
   })
 
   return {
-    attributes: [{ name: 'activeItemKey', type: 'mdxJsxAttribute', value: 0 }],
+    attributes: [{ name: 'defaultActiveItemKey', type: 'mdxJsxAttribute', value: 0 }],
     children: [
       {
         attributes: [
diff --git a/prettier.config.mjs b/prettier.config.mjs
new file mode 100644
index 00000000..6e0ae723
--- /dev/null
+++ b/prettier.config.mjs
@@ -0,0 +1,13 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+const config = {
+  printWidth: 100,
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+};
+
+export default config;
\ No newline at end of file
