diff --git a/package.json b/package.json
index f27bd5f4..91b0b416 100644
--- a/package.json
+++ b/package.json
@@ -22,17 +22,17 @@
     "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",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.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",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "lerna": "^8.1.9",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3"
+    "prettier": "^3.4.2"
   },
   "overrides": {
     "gatsby-remark-external-links": {
diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
index e106f5a0..a878d9d0 100644
--- a/packages/coreui-react/package.json
+++ b/packages/coreui-react/package.json
@@ -46,15 +46,15 @@
     "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.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.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/react": "18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-transition-group": "^4.4.12",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
@@ -62,10 +62,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.24.2",
+    "rollup": "^4.28.1",
     "ts-jest": "^29.2.5",
-    "tslib": "^2.8.0",
-    "typescript": "^5.6.3"
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "react": ">=17",
diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx
index 5504f915..9fe4c634 100644
--- a/packages/coreui-react/src/components/accordion/CAccordion.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordion.tsx
@@ -2,78 +2,25 @@ import React, { createContext, forwardRef, HTMLAttributes, useState } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { mergeClassNames } from '../../utils'
-
 export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Determines which accordion item is currently active (expanded) by default.
-   * Accepts a number or string corresponding to the `itemKey` of the desired accordion item.
-   *
-   * @example
-   * <CAccordion activeItemKey="1">...</CAccordion>
+   * The active item key.
    */
   activeItemKey?: number | string
-
   /**
-   * When set to `true`, multiple accordion items within the React Accordion can be open simultaneously.
-   * This is ideal for scenarios where users need to view multiple sections at once without collapsing others.
-   *
-   * @default false
-   *
-   * @example
-   * <CAccordion alwaysOpen>...</CAccordion>
+   * Make accordion items stay open when another item is opened
    */
   alwaysOpen?: boolean
-
   /**
-   * Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.
-   *
-   * @example
-   * <CAccordion className="my-custom-accordion">...</CAccordion>
+   * A string of all className you want applied to the base component.
    */
   className?: string
-
   /**
-   * Allows overriding or extending the default CSS class names used in the component.
-   *
-   * - `ACCORDION`: Base class for the accordion component.
-   * - `ACCORDION_FLUSH`: Class applied when the `flush` prop is set to true, ensuring an edge-to-edge layout.
-   *
-   * Use this prop to customize the styles of specific parts of the accordion.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION: 'custom-accordion',
-   *   ACCORDION_FLUSH: 'custom-accordion-flush'
-   * }
-   * <CAccordion customClassNames={customClasses}>...</CAccordion>
-   */
-  customClassNames?: Partial<typeof ACCORDION_CLASS_NAMES>
-
-  /**
-   * When `flush` is set to `true`, the React Accordion renders edge-to-edge with its parent container,
-   * creating a seamless and modern look ideal for minimalist designs.
-   *
-   * @default false
-   *
-   * @example
-   * <CAccordion flush>...</CAccordion>
+   * Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
    */
   flush?: boolean
 }
 
-export const ACCORDION_CLASS_NAMES = {
-  /**
-   * Base class for the accordion container.
-   */
-  ACCORDION: 'accordion',
-
-  /**
-   * Applied when the `flush` prop is enabled.
-   */
-  ACCORDION_FLUSH: 'accordion-flush',
-}
-
 export interface CAccordionContextProps {
   _activeItemKey?: number | string
   alwaysOpen?: boolean
@@ -83,24 +30,12 @@ export interface CAccordionContextProps {
 export const CAccordionContext = createContext({} as CAccordionContextProps)
 
 export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
-  (
-    { children, activeItemKey, alwaysOpen = false, className, customClassNames, flush, ...rest },
-    ref,
-  ) => {
+  ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => {
     const [_activeItemKey, setActiveKey] = useState(activeItemKey)
 
-    const mergedClassNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
-      ACCORDION_CLASS_NAMES,
-      customClassNames,
-    )
-
     return (
       <div
-        className={classNames(
-          mergedClassNames.ACCORDION,
-          { [mergedClassNames.ACCORDION_FLUSH]: flush },
-          className,
-        )}
+        className={classNames('accordion', { 'accordion-flush': flush }, className)}
         {...rest}
         ref={ref}
       >
diff --git a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
index 00d48964..532f3ff6 100644
--- a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
@@ -5,60 +5,21 @@ import classNames from 'classnames'
 import { CAccordionItemContext } from './CAccordionItem'
 
 import { CCollapse } from './../collapse/CCollapse'
-import { mergeClassNames } from '../../utils'
 
 export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.
-   *
-   * @example
-   * <CAccordionBody className="custom-accordion-body">...</CAccordionBody>
+   * A string of all className you want applied to the base component.
    */
   className?: string
-
-  /**
-   * Allows overriding or extending the default CSS class names used in the accordion body component.
-   * Accepts a partial object matching the shape of `ACCORDION_BODY_CLASS_NAMES`, which includes:
-   *
-   * - `ACCORDION_COLLAPSE`: Base class for the collapse container in the accordion body.
-   * - `ACCORDION_BODY`: Base class for the main content container inside the accordion body.
-   *
-   * Use this prop to customize the styles of specific parts of the accordion body.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION_COLLAPSE: 'custom-collapse-class',
-   *   ACCORDION_BODY: 'custom-body-class',
-   * }
-   * <CAccordionBody customClassNames={customClasses}>...</CAccordionBody>
-   */
-  customClassNames?: Partial<typeof ACCORDION_BODY_CLASS_NAMES>
-}
-
-export const ACCORDION_BODY_CLASS_NAMES = {
-  /**
-   * Used for managing collapsible behavior in the accordion body.
-   */
-  ACCORDION_COLLAPSE: 'accordion-collapse',
-
-  /**
-   * Styles the main content container inside the accordion.
-   */
-  ACCORDION_BODY: 'accordion-body',
 }
 
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
-  ({ children, className, customClassNames, ...rest }, ref) => {
-    const { id, visible } = useContext(CAccordionItemContext)
-
-    const mergedClassNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
-      ACCORDION_BODY_CLASS_NAMES,
-      customClassNames,
-    )
+  ({ children, className, ...rest }, ref) => {
+    const { visible } = useContext(CAccordionItemContext)
 
     return (
-      <CCollapse id={id} className={mergedClassNames.ACCORDION_COLLAPSE} visible={visible}>
-        <div className={classNames(mergedClassNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
+      <CCollapse className="accordion-collapse" visible={visible}>
+        <div className={classNames('accordion-body', className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>
diff --git a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
index e6bc38a4..2a54e345 100644
--- a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
@@ -4,49 +4,21 @@ import classNames from 'classnames'
 
 import { CAccordionItemContext } from './CAccordionItem'
 
-import { mergeClassNames } from '../../utils'
-
 export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
   /**
-   * Styles the clickable element in the accordion header.
+   * A string of all className you want applied to the base component.
    */
   className?: string
-
-  /**
-   * Allows overriding or extending the default CSS class names used in the accordion button component.
-   * Accepts a partial object matching the shape of `CLASS_NAMES`, which includes:
-   *
-   * - `ACCORDION_BUTTON`: Base class for the accordion button.
-   *
-   * Use this prop to customize the styles of the accordion button.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION_BUTTON: 'custom-button-class',
-   * }
-   * <CAccordionButton customClassNames={customClasses}>...</CAccordionButton>
-   */
-  customClassNames?: Partial<typeof CLASS_NAMES>
-}
-
-export const CLASS_NAMES = {
-  ACCORDION_BUTTON: 'accordion-button',
 }
 
 export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
-  ({ children, className, customClassNames, ...rest }, ref) => {
+  ({ children, className, ...rest }, ref) => {
     const { id, visible, setVisible } = useContext(CAccordionItemContext)
 
-    const mergedClassNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
-
     return (
       <button
         type="button"
-        className={classNames(
-          mergedClassNames.ACCORDION_BUTTON,
-          { collapsed: !visible },
-          className,
-        )}
+        className={classNames('accordion-button', { collapsed: !visible }, className)}
         aria-controls={id}
         aria-expanded={visible}
         onClick={() => setVisible(!visible)}
diff --git a/packages/coreui-react/src/components/accordion/CAccordionHeader.tsx b/packages/coreui-react/src/components/accordion/CAccordionHeader.tsx
index 10d270f8..b11650f4 100644
--- a/packages/coreui-react/src/components/accordion/CAccordionHeader.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordionHeader.tsx
@@ -3,55 +3,19 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CAccordionButton } from './CAccordionButton'
-import { mergeClassNames } from '../../utils'
 
 export interface CAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
    */
   className?: string
-  /**
-   * Allows overriding or extending the default CSS class names used in the accordion header component.
-   * Accepts a partial object matching the shape of `ACCORDION_HEADER_CLASS_NAMES`, which includes:
-   *
-   * - `ACCORDION_HEADER`: Base class for the accordion header container.
-   * - `ACCORDION_BUTTON`: Class applied to the button within the accordion header.
-   *
-   * Use this prop to customize the styles of specific parts of the accordion header.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION_HEADER: 'custom-header-class',
-   *   ACCORDION_BUTTON: 'custom-button-class',
-   * }
-   * <CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>
-   */
-  customClassNames?: Partial<typeof ACCORDION_HEADER_CLASS_NAMES>
-}
-
-export const ACCORDION_HEADER_CLASS_NAMES = {
-  /**
-   * Styles the header container of an accordion item.
-   */
-  ACCORDION_HEADER: 'accordion-header',
-
-  /**
-   * Styles the clickable element in the accordion header.
-   */
-  ACCORDION_BUTTON: 'accordion-button',
 }
 
 export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
-  ({ children, className, customClassNames, ...rest }, ref) => {
-    const mergedClassNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
-      ACCORDION_HEADER_CLASS_NAMES,
-      customClassNames,
-    )
+  ({ children, className, ...rest }, ref) => {
     return (
-      <div className={classNames(mergedClassNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
-        <CAccordionButton className={mergedClassNames.ACCORDION_HEADER}>
-          {children}
-        </CAccordionButton>
+      <div className={classNames('accordion-header', className)} {...rest} ref={ref}>
+        <CAccordionButton>{children}</CAccordionButton>
       </div>
     )
   },
diff --git a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
index 1d69d0b8..b87c1509 100644
--- a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
+++ b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
@@ -12,7 +12,6 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CAccordionContext } from './CAccordion'
-import { mergeClassNames } from '../../utils'
 
 export interface CAccordionItemContextProps {
   id: string
@@ -27,49 +26,20 @@ export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
-
-  /**
-   * Allows overriding or extending the default CSS class names used in the accordion item component.
-   * Accepts a partial object matching the shape of `ACCORDION_ITEM_CLASS_NAMES`, which includes:
-   *
-   * - `ACCORDION_ITEM`: Base class for an individual accordion item.
-   *
-   * Use this prop to customize the styles of specific parts of the accordion item.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION_ITEM: 'custom-item-class',
-   * }
-   * <CAccordionItem customClassNames={customClasses}>...</CAccordionItem>
-   */
-  customClassNames?: Partial<typeof ACCORDION_ITEM_CLASS_NAMES>
-
   /**
    * Item key.
    */
   itemKey?: number | string
 }
 
-export const ACCORDION_ITEM_CLASS_NAMES = {
-  /**
-   * Base class for an individual accordion item.
-   */
-  ACCORDION_ITEM: 'accordion-item',
-}
-
 export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
-  ({ children, className, customClassNames, itemKey, ...rest }, ref) => {
+  ({ children, className, itemKey, ...rest }, ref) => {
     const id = useId()
-    const _itemKey = useRef(itemKey ?? Math.random().toString(36).slice(2, 11))
+    const _itemKey = useRef(itemKey ?? id)
 
     const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
     const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
 
-    const mergedClassNames = mergeClassNames<typeof ACCORDION_ITEM_CLASS_NAMES>(
-      ACCORDION_ITEM_CLASS_NAMES,
-      customClassNames,
-    )
-
     useEffect(() => {
       if (!alwaysOpen && visible) {
         setActiveKey(_itemKey.current)
@@ -81,7 +51,7 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
     }, [_activeItemKey])
 
     return (
-      <div className={classNames(mergedClassNames.ACCORDION_ITEM, className)} {...rest} ref={ref}>
+      <div className={classNames('accordion-item', className)} {...rest} ref={ref}>
         <CAccordionItemContext.Provider value={{ id, setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>
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/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
index 3d7ce44c..5689c0f4 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
@@ -90,7 +90,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
 
     if (variant === 'nav-item' && navLink) {
       return (
-        <a href="#" {...togglerProps} role="button" ref={dropdownToggleRef}>
+        <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
           {children}
         </a>
       )
diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx
index 5a7d891e..854882c5 100644
--- a/packages/coreui-react/src/components/nav/CNavGroup.tsx
+++ b/packages/coreui-react/src/components/nav/CNavGroup.tsx
@@ -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/progress/CProgress.tsx b/packages/coreui-react/src/components/progress/CProgress.tsx
index 62aab13d..20c3c176 100644
--- a/packages/coreui-react/src/components/progress/CProgress.tsx
+++ b/packages/coreui-react/src/components/progress/CProgress.tsx
@@ -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/docs/build/api.mjs b/packages/docs/build/api.mjs
index d0fddefe..a1118348 100644
--- a/packages/docs/build/api.mjs
+++ b/packages/docs/build/api.mjs
@@ -18,10 +18,8 @@ const converter = new showdown.Converter({ simpleLineBreaks: true })
 
 /**
  * Glob patterns to locate .tsx files for documentation.
- * Adjust these patterns based on your project structure.
  */
 const GLOB_PATTERNS = [
-  // '**/src/components/date-picker/*.tsx',
   '**/src/**/*.tsx',
   '../node_modules/@coreui/icons-react/src/**/*.tsx',
   '../node_modules/@coreui/react-chartjs/src/**/*.tsx',
@@ -39,7 +37,6 @@ const GLOBBY_OPTIONS = {
 
 /**
  * Excluded files list (currently unused).
- * Can be utilized for additional exclusion patterns if needed.
  */
 const EXCLUDED_FILES = [] // Currently unused, but can be utilized if needed
 
@@ -69,6 +66,9 @@ const PRO_COMPONENTS = [
   'CVirtualScroller',
 ]
 
+/**
+ * Text replacements for certain components.
+ */
 const TEXT_REPLACEMENTS = {
   CDatePicker: {
     description: [{ 'React Calendar': 'React Date Picker' }],
@@ -78,6 +78,15 @@ const TEXT_REPLACEMENTS = {
     description: [{ 'React Calendar': 'React Date Range Picker' }],
     example: [{ CCalendar: 'CDateRangePicker' }],
   },
+  CFormInput: {
+    example: [{ CFormControlValidation: 'CFormInput' }, { CFormControlWrapper: 'CFormInput' }],
+  },
+  CFormTextarea: {
+    example: [
+      { CFormControlValidation: 'CFormTextarea' },
+      { CFormControlWrapper: 'CFormTextarea' },
+    ],
+  },
 }
 
 /**
@@ -86,7 +95,7 @@ const TEXT_REPLACEMENTS = {
  * @param {string} text - The text to escape.
  * @returns {string} - The escaped text.
  */
-function escapeMarkdown(text) {
+const escapeMarkdown = (text) => {
   if (typeof text !== 'string') return text
   return text
     .replaceAll(/(<)/g, String.raw`\$1`)
@@ -100,9 +109,8 @@ function escapeMarkdown(text) {
  * @param {string} file - The absolute file path.
  * @returns {string} - The relative filename.
  */
-function getRelativeFilename(file) {
-  let relativePath
-  relativePath = file.includes('node_modules')
+const getRelativeFilename = (file) => {
+  let relativePath = file.includes('node_modules')
     ? path.relative(path.join(__dirname, '..', '..'), file).replace('coreui-', '')
     : path.relative(GLOBBY_OPTIONS.cwd, file).replace('coreui-', '')
 
@@ -122,15 +130,15 @@ function getRelativeFilename(file) {
  * @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.
  */
-function splitOutsideBracesAndParentheses(input) {
+const splitOutsideBracesAndParentheses = (input) => {
   if (input.endsWith('...')) {
     return [input]
   }
 
   const parts = []
   let currentPart = ''
-  let braceDepth = 0 // Tracks depth of curly braces {}
-  let parenthesisDepth = 0 // Tracks depth of parentheses ()
+  let braceDepth = 0
+  let parenthesisDepth = 0
 
   for (const char of input) {
     switch (char) {
@@ -161,19 +169,17 @@ function splitOutsideBracesAndParentheses(input) {
         if (braceDepth === 0 && parenthesisDepth === 0 && currentPart.trim()) {
           parts.push(currentPart.trim())
           currentPart = ''
-          continue // Skip adding the '|' to currentPart
+          continue
         }
         break
       }
       default: {
-        // No action needed for other characters
         break
       }
     }
     currentPart += char
   }
 
-  // After processing all characters, check for unmatched opening braces or parentheses
   if (braceDepth !== 0) {
     throw new Error('Unmatched opening curly brace detected.')
   }
@@ -181,7 +187,6 @@ function splitOutsideBracesAndParentheses(input) {
     throw new Error('Unmatched opening parenthesis detected.')
   }
 
-  // Add the last accumulated part if it's not empty
   if (currentPart.trim()) {
     parts.push(currentPart.trim())
   }
@@ -189,10 +194,18 @@ function splitOutsideBracesAndParentheses(input) {
   return parts
 }
 
-function replaceText(componenName, keyName, text) {
+/**
+ * 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)) {
+  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)) {
@@ -210,17 +223,14 @@ function replaceText(componenName, keyName, 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 information extracted by react-docgen-typescript.
+ * @param {object} component - The component info extracted by react-docgen-typescript.
  */
-async function createMdx(file, component) {
-  if (!component) {
-    return
-  }
+const createMdx = async (file, component) => {
+  if (!component) return
 
   const filename = path.basename(file, '.tsx')
   const relativeFilename = getRelativeFilename(file)
 
-  // Construct import statements
   let content = `\n\`\`\`jsx\n`
   const importPathParts = relativeFilename.split('/')
   if (importPathParts.length > 1) {
@@ -230,11 +240,17 @@ async function createMdx(file, component) {
   content += `import ${component.displayName} from '@coreui/${relativeFilename.replace('.tsx', '')}'\n`
   content += `\`\`\`\n\n`
 
-  const sortedProps = Object.entries(component.props).sort(([a], [b]) => a.localeCompare(b))
-
-  // Initialize table headers
-  for (const [index, [propName, propInfo]] of sortedProps.entries()) {
-    const isLast = index === sortedProps.length - 1
+  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`
@@ -248,20 +264,6 @@ async function createMdx(file, component) {
       content += `    <tbody>\n`
     }
 
-    // Skip props from React's type definitions
-    if (
-      propInfo.parent?.fileName?.includes('@types/react/index.d.ts') ||
-      propInfo.parent?.fileName?.includes('@types/react/ts5.0/index.d.ts')
-    ) {
-      if (isLast) {
-        content += `    </tbody>\n`
-        content += `  </table>\n`
-        content += `</div>\n`
-      }
-
-      continue
-    }
-
     // Skip props marked to be ignored
     if (propInfo.tags?.ignore === '') {
       continue
@@ -272,12 +274,11 @@ async function createMdx(file, component) {
       ? `<span className="badge bg-success">${propInfo.tags.since}+</span>`
       : ''
     const deprecated = propInfo.tags?.deprecated
-      ? `<span className="badge bg-success">Deprecated ${propInfo.tags.since}</span>`
+      ? `<span className="badge bg-danger">Deprecated ${propInfo.tags.deprecated}</span>`
       : ''
     const description = propInfo.description
       ? replaceText(component.displayName, 'description', propInfo.description)
       : '-'
-
     const type = propInfo.type
       ? propInfo.type.name.includes('ReactElement')
         ? 'ReactElement'
@@ -285,7 +286,7 @@ async function createMdx(file, component) {
       : ''
     const defaultValue = propInfo.defaultValue ? `\`${propInfo.defaultValue.value}\`` : `undefined`
     const example = propInfo.tags?.example
-      ? replaceText(component.displayName, 'example', propInfo.tags?.example)
+      ? replaceText(component.displayName, 'example', propInfo.tags.example)
       : false
 
     // Format types as inline code
@@ -293,7 +294,7 @@ async function createMdx(file, component) {
       .map((_type) => `\`${_type.trim()}\``)
       .join(', ')
 
-    const id = `${component.displayName.toLowerCase()}-${propName}`
+    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`
@@ -305,7 +306,8 @@ async function createMdx(file, component) {
     content += `        <td colSpan="3">\n`
     content += `          ${converter
       .makeHtml(description)
-      .replaceAll(/<code>(.*?)<\/code>/g, '<code>{`$1`}</code>')}\n`
+      .replaceAll(/<code>(.*?)<\/code>/g, '<code>{`$1`}</code>')
+      .replaceAll(/<code>{`&lt;(.*?)&gt;`}<\/code>/g, '<code>{`<$1>`}</code>')}\n`
 
     if (example) {
       content += `        <JSXDocs code={\`${example.trim()}\`} />\n`
@@ -313,19 +315,15 @@ async function createMdx(file, component) {
 
     content += `        </td>\n`
     content += `      </tr>\n`
-
-    if (isLast) {
-      content += `    </tbody>\n`
-      content += `  </table>\n`
-      content += `</div>\n`
-    }
   }
 
-  // Define the output directory and ensure it exists
+  content += `    </tbody>\n`
+  content += `  </table>\n`
+  content += `</div>\n`
+
   const outputDir = path.join('content', 'api')
   const outputPath = path.join(outputDir, `${filename}.api.mdx`)
 
-  // Create the directory if it doesn't exist
   try {
     await mkdir(outputDir, { recursive: true })
     await writeFile(outputPath, content, { encoding: 'utf8' })
@@ -336,31 +334,28 @@ async function createMdx(file, component) {
 }
 
 /**
- * Main function to execute the script.
+ * Main execution function.
  */
-async function main() {
+const main = async () => {
   try {
-    // Retrieve all matching files based on the glob patterns
     const files = await globby(GLOB_PATTERNS, GLOBBY_OPTIONS)
 
-    // Process each file concurrently
-    await Promise.all(
-      files.map(async (file) => {
-        console.log(`Processing file: ${file}`)
-        let components
-
-        try {
-          components = parse(file, DOCGEN_OPTIONS)
-        } catch (parseError) {
-          console.error(`Failed to parse ${file}:`, parseError)
-          return
-        }
+    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) {
-          await Promise.all(components.map((component) => createMdx(file, component)))
+      if (components && components.length > 0) {
+        for (const component of components) {
+          await createMdx(file, component) // Sequentially create MDX files
         }
-      }),
-    )
+      }
+    }
   } catch (error) {
     console.error('An error occurred:', error)
     process.exit(1)
diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx
index dfff727c..971761dd 100644
--- a/packages/docs/content/api/CAccordion.api.mdx
+++ b/packages/docs/content/api/CAccordion.api.mdx
@@ -15,49 +15,45 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
       </tr>
     </thead>
     <tbody>
-      <tr id="caccordion-activeItemKey">
-        <td className="text-primary fw-semibold">activeItemKey<a href="#caccordion-activeItemKey" aria-label="CAccordion activeItemKey permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code>, <code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Determines which accordion item is currently active (expanded) by default.<br/>Accepts a number or string corresponding to the <code>{`itemKey`}</code> of the desired accordion item.<br /><JSXDocs code={`<CAccordion activeItemKey="1">...</CAccordion>`} /></td>
+        <td colSpan="3">
+          <p>The active item key.</p>
+        </td>
       </tr>
-      <tr id="caccordion-alwaysOpen">
-        <td className="text-primary fw-semibold">alwaysOpen<a href="#caccordion-alwaysOpen" aria-label="CAccordion alwaysOpen permalink" className="anchor-link after">#</a></td>
+      <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">When set to <code>{`true`}</code>, multiple accordion items within the React Accordion can be open simultaneously.<br/>This is ideal for scenarios where users need to view multiple sections at once without collapsing others.<br /><JSXDocs code={`<CAccordion alwaysOpen>...</CAccordion>`} /></td>
+        <td colSpan="3">
+          <p>Make accordion items stay open when another item is opened</p>
+        </td>
       </tr>
-      <tr id="caccordion-className">
-        <td className="text-primary fw-semibold">className<a href="#caccordion-className" aria-label="CAccordion className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.<br /><JSXDocs code={`<CAccordion className="my-custom-accordion">...</CAccordion>`} /></td>
-      </tr>
-      <tr id="caccordion-customClassNames">
-        <td className="text-primary fw-semibold">customClassNames<a href="#caccordion-customClassNames" aria-label="CAccordion customClassNames permalink" className="anchor-link after">#</a></td>
-        <td>undefined</td>
-        <td><code>{`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">Allows overriding or extending the default CSS class names used in the component.<br/><br/>- <code>{`ACCORDION`}</code>: Base class for the accordion component.<br/>- <code>{`ACCORDION_FLUSH`}</code>: Class applied when the <code>{`flush`}</code> prop is set to true, ensuring an edge-to-edge layout.<br/><br/>Use this prop to customize the styles of specific parts of the accordion.<br /><JSXDocs code={`const customClasses = {
-  ACCORDION: 'custom-accordion',
-  ACCORDION_FLUSH: 'custom-accordion-flush'
-}
-<CAccordion customClassNames={customClasses}>...</CAccordion>`} /></td>
+        <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><code>{`false`}</code></td>
+        <td>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">When <code>{`flush`}</code> is set to <code>{`true`}</code>, the React Accordion renders edge-to-edge with its parent container,<br/>creating a seamless and modern look ideal for minimalist designs.<br /><JSXDocs code={`<CAccordion flush>...</CAccordion>`} /></td>
+        <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>
diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx
index c280bef1..566d4aec 100644
--- a/packages/docs/content/api/CAccordionBody.api.mdx
+++ b/packages/docs/content/api/CAccordionBody.api.mdx
@@ -15,25 +15,15 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod
       </tr>
     </thead>
     <tbody>
-      <tr id="caccordionbody-className">
-        <td className="text-primary fw-semibold">className<a href="#caccordionbody-className" aria-label="CAccordionBody className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.<br /><JSXDocs code={`<CAccordionBody className="custom-accordion-body">...</CAccordionBody>`} /></td>
-      </tr>
-      <tr id="caccordionbody-customClassNames">
-        <td className="text-primary fw-semibold">customClassNames<a href="#caccordionbody-customClassNames" aria-label="CAccordionBody customClassNames permalink" className="anchor-link after">#</a></td>
-        <td>undefined</td>
-        <td><code>{`Partial\<{ ACCORDION_COLLAPSE: string; ACCORDION_BODY: string; }>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion body component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_BODY_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_COLLAPSE`}</code>: Base class for the collapse container in the accordion body.<br/>- <code>{`ACCORDION_BODY`}</code>: Base class for the main content container inside the accordion body.<br/><br/>Use this prop to customize the styles of specific parts of the accordion body.<br /><JSXDocs code={`const customClasses = {
-  ACCORDION_COLLAPSE: 'custom-collapse-class',
-  ACCORDION_BODY: 'custom-body-class',
-}
-<CAccordionBody customClassNames={customClasses}>...</CAccordionBody>`} /></td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx
index c659fd49..21461dd2 100644
--- a/packages/docs/content/api/CAccordionButton.api.mdx
+++ b/packages/docs/content/api/CAccordionButton.api.mdx
@@ -15,24 +15,15 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB
       </tr>
     </thead>
     <tbody>
-      <tr id="caccordionbutton-className">
-        <td className="text-primary fw-semibold">className<a href="#caccordionbutton-className" aria-label="CAccordionButton className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Styles the clickable element in the accordion header.</td>
-      </tr>
-      <tr id="caccordionbutton-customClassNames">
-        <td className="text-primary fw-semibold">customClassNames<a href="#caccordionbutton-customClassNames" aria-label="CAccordionButton customClassNames permalink" className="anchor-link after">#</a></td>
-        <td>undefined</td>
-        <td><code>{`Partial\<{ ACCORDION_BUTTON: string; }>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion button component.<br/>Accepts a partial object matching the shape of <code>{`CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_BUTTON`}</code>: Base class for the accordion button.<br/><br/>Use this prop to customize the styles of the accordion button.<br /><JSXDocs code={`const customClasses = {
-  ACCORDION_BUTTON: 'custom-button-class',
-}
-<CAccordionButton customClassNames={customClasses}>...</CAccordionButton>`} /></td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx
index c158599b..e0ef9462 100644
--- a/packages/docs/content/api/CAccordionHeader.api.mdx
+++ b/packages/docs/content/api/CAccordionHeader.api.mdx
@@ -15,25 +15,15 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH
       </tr>
     </thead>
     <tbody>
-      <tr id="caccordionheader-className">
-        <td className="text-primary fw-semibold">className<a href="#caccordionheader-className" aria-label="CAccordionHeader className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
-      </tr>
-      <tr id="caccordionheader-customClassNames">
-        <td className="text-primary fw-semibold">customClassNames<a href="#caccordionheader-customClassNames" aria-label="CAccordionHeader customClassNames permalink" className="anchor-link after">#</a></td>
-        <td>undefined</td>
-        <td><code>{`Partial\<{ ACCORDION_HEADER: string; ACCORDION_BUTTON: string; }>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion header component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_HEADER_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_HEADER`}</code>: Base class for the accordion header container.<br/>- <code>{`ACCORDION_BUTTON`}</code>: Class applied to the button within the accordion header.<br/><br/>Use this prop to customize the styles of specific parts of the accordion header.<br /><JSXDocs code={`const customClasses = {
-  ACCORDION_HEADER: 'custom-header-class',
-  ACCORDION_BUTTON: 'custom-button-class',
-}
-<CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>`} /></td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx
index 1eb6b121..f9adfbbc 100644
--- a/packages/docs/content/api/CAccordionItem.api.mdx
+++ b/packages/docs/content/api/CAccordionItem.api.mdx
@@ -15,32 +15,25 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
       </tr>
     </thead>
     <tbody>
-      <tr id="caccordionitem-className">
-        <td className="text-primary fw-semibold">className<a href="#caccordionitem-className" aria-label="CAccordionItem className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
-      <tr id="caccordionitem-customClassNames">
-        <td className="text-primary fw-semibold">customClassNames<a href="#caccordionitem-customClassNames" aria-label="CAccordionItem customClassNames permalink" className="anchor-link after">#</a></td>
-        <td>undefined</td>
-        <td><code>{`Partial\<{ ACCORDION_ITEM: string; }>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">Allows overriding or extending the default CSS class names used in the accordion item component.<br/>Accepts a partial object matching the shape of <code>{`ACCORDION_ITEM_CLASS_NAMES`}</code>, which includes:<br/><br/>- <code>{`ACCORDION_ITEM`}</code>: Base class for an individual accordion item.<br/><br/>Use this prop to customize the styles of specific parts of the accordion item.<br /><JSXDocs code={`const customClasses = {
-  ACCORDION_ITEM: 'custom-item-class',
-}
-<CAccordionItem customClassNames={customClasses}>...</CAccordionItem>`} /></td>
-      </tr>
-      <tr id="caccordionitem-itemKey">
-        <td className="text-primary fw-semibold">itemKey<a href="#caccordionitem-itemKey" aria-label="CAccordionItem itemKey permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code>, <code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Item key.</td>
+        <td colSpan="3">
+          <p>Item key.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx
index f2f95bfd..01a98cb0 100644
--- a/packages/docs/content/api/CAlert.api.mdx
+++ b/packages/docs/content/api/CAlert.api.mdx
@@ -15,13 +15,15 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
       </tr>
     </thead>
     <tbody>
-      <tr id="calert-className">
-        <td className="text-primary fw-semibold">className<a href="#calert-className" aria-label="CAlert className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -37,15 +41,19 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Optionally add a close button to alert and allow it to self dismiss.</td>
+        <td colSpan="3">
+          <p>Optionally add a close button to alert and allow it to self dismiss.</p>
+        </td>
       </tr>
-      <tr id="calert-onClose">
-        <td className="text-primary fw-semibold">onClose<a href="#calert-onClose" aria-label="CAlert onClose permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be closed.</td>
+        <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>
@@ -53,7 +61,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the alert variant to a solid.</td>
+        <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>
@@ -61,7 +71,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx
index 0bb3f9dd..a6596378 100644
--- a/packages/docs/content/api/CAlertHeading.api.mdx
+++ b/packages/docs/content/api/CAlertHeading.api.mdx
@@ -21,15 +21,19 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#calertheading-className" aria-label="CAlertHeading className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx
index bbff921e..bf1c8a5a 100644
--- a/packages/docs/content/api/CAlertLink.api.mdx
+++ b/packages/docs/content/api/CAlertLink.api.mdx
@@ -15,13 +15,15 @@ import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
       </tr>
     </thead>
     <tbody>
-      <tr id="calertlink-className">
-        <td className="text-primary fw-semibold">className<a href="#calertlink-className" aria-label="CAlertLink className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx
index e0a72315..485f06c4 100644
--- a/packages/docs/content/api/CAvatar.api.mdx
+++ b/packages/docs/content/api/CAvatar.api.mdx
@@ -15,13 +15,15 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
       </tr>
     </thead>
     <tbody>
-      <tr id="cavatar-className">
-        <td className="text-primary fw-semibold">className<a href="#cavatar-className" aria-label="CAvatar className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -37,7 +41,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
         <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">Select the shape of the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small, large, or extra large.</td>
+        <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>
@@ -53,7 +61,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The src attribute for the img element.</td>
+        <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>
@@ -61,15 +71,19 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
         <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">Sets the color context of the status indicator to one of CoreUI’s themed colors.</td>
+        <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-textColor">
-        <td className="text-primary fw-semibold">textColor<a href="#cavatar-textColor" aria-label="CAvatar textColor permalink" className="anchor-link after">#</a></td>
+      <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>undefined</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">Sets the text color of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the text color of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx
index a39d1537..5e725a9d 100644
--- a/packages/docs/content/api/CBackdrop.api.mdx
+++ b/packages/docs/content/api/CBackdrop.api.mdx
@@ -15,13 +15,15 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
       </tr>
     </thead>
     <tbody>
-      <tr id="cbackdrop-className">
-        <td className="text-primary fw-semibold">className<a href="#cbackdrop-className" aria-label="CBackdrop className permalink" className="anchor-link after">#</a></td>
+      <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">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of modal component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of modal component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx
index 67e73873..571d29ba 100644
--- a/packages/docs/content/api/CBadge.api.mdx
+++ b/packages/docs/content/api/CBadge.api.mdx
@@ -21,15 +21,19 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cbadge-className" aria-label="CBadge className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -45,7 +51,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
         <td><code>{`"top-start"`}</code>, <code>{`"top-end"`}</code>, <code>{`"bottom-end"`}</code>, <code>{`"bottom-start"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Position badge in one of the corners of a link or button.</td>
+        <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>
@@ -53,7 +61,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
         <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">Select the shape of the component.</td>
+        <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>
@@ -61,23 +71,29 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
         <td><code>{`"sm"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small.</td>
+        <td colSpan="3">
+          <p>Size the component small.</p>
+        </td>
       </tr>
-      <tr id="cbadge-textBgColor">
-        <td className="text-primary fw-semibold">textBgColor<a href="#cbadge-textBgColor" aria-label="CBadge textBgColor permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+      <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>undefined</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">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.</td>
+        <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-textColor">
-        <td className="text-primary fw-semibold">textColor<a href="#cbadge-textColor" aria-label="CBadge textColor permalink" className="anchor-link after">#</a></td>
+      <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>undefined</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">Sets the text color of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the text color of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx
index c6994e9e..053af3ca 100644
--- a/packages/docs/content/api/CBreadcrumb.api.mdx
+++ b/packages/docs/content/api/CBreadcrumb.api.mdx
@@ -15,13 +15,15 @@ import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb'
       </tr>
     </thead>
     <tbody>
-      <tr id="cbreadcrumb-className">
-        <td className="text-primary fw-semibold">className<a href="#cbreadcrumb-className" aria-label="CBreadcrumb className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx
index e48c7a5e..ac72b194 100644
--- a/packages/docs/content/api/CBreadcrumbItem.api.mdx
+++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx
@@ -21,7 +21,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cbreadcrumbitem-className" aria-label="CBreadcrumbItem className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The <code>{`href`}</code> attribute for the inner <code>{`\<CLink>`}</code> component.</td>
+        <td colSpan="3">
+          <p>The <code>{`href`}</code> attribute for the inner <code>{`<CLink>`}</code> component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx
index eabef071..47774ac8 100644
--- a/packages/docs/content/api/CButton.api.mdx
+++ b/packages/docs/content/api/CButton.api.mdx
@@ -21,7 +21,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cbutton-className" aria-label="CButton className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -53,7 +61,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -61,7 +71,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <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>
@@ -69,7 +81,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</td>
+        <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>
@@ -77,7 +91,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <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">Select the shape of the component.</td>
+        <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>
@@ -85,7 +101,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small or large.</td>
+        <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>
@@ -93,7 +111,10 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <td><code>{`"button"`}</code>, <code>{`"submit"`}</code>, <code>{`"reset"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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.</td>
+        <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>
@@ -101,7 +122,9 @@ import CButton from '@coreui/react/src/components/button/CButton'
         <td><code>{`"outline"`}</code>, <code>{`"ghost"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the button variant to an outlined button or a ghost button.</td>
+        <td colSpan="3">
+          <p>Set the button variant to an outlined button or a ghost button.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CButtonGroup.api.mdx b/packages/docs/content/api/CButtonGroup.api.mdx
index 892c8ab2..89726cff 100644
--- a/packages/docs/content/api/CButtonGroup.api.mdx
+++ b/packages/docs/content/api/CButtonGroup.api.mdx
@@ -15,13 +15,15 @@ import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup
       </tr>
     </thead>
     <tbody>
-      <tr id="cbuttongroup-className">
-        <td className="text-primary fw-semibold">className<a href="#cbuttongroup-className" aria-label="CButtonGroup className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small or large.</td>
+        <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>
@@ -37,7 +41,9 @@ import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</td>
+        <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>
diff --git a/packages/docs/content/api/CButtonToolbar.api.mdx b/packages/docs/content/api/CButtonToolbar.api.mdx
index 8c17ddf6..07124772 100644
--- a/packages/docs/content/api/CButtonToolbar.api.mdx
+++ b/packages/docs/content/api/CButtonToolbar.api.mdx
@@ -15,13 +15,15 @@ import CButtonToolbar from '@coreui/react/src/components/button-group/CButtonToo
       </tr>
     </thead>
     <tbody>
-      <tr id="cbuttontoolbar-className">
-        <td className="text-primary fw-semibold">className<a href="#cbuttontoolbar-className" aria-label="CButtonToolbar className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCallout.api.mdx b/packages/docs/content/api/CCallout.api.mdx
index bded50c8..3300d21a 100644
--- a/packages/docs/content/api/CCallout.api.mdx
+++ b/packages/docs/content/api/CCallout.api.mdx
@@ -15,13 +15,15 @@ import CCallout from '@coreui/react/src/components/callout/CCallout'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccallout-className">
-        <td className="text-primary fw-semibold">className<a href="#ccallout-className" aria-label="CCallout className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CCallout from '@coreui/react/src/components/callout/CCallout'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCard.api.mdx b/packages/docs/content/api/CCard.api.mdx
index ed842ac3..4c47fb26 100644
--- a/packages/docs/content/api/CCard.api.mdx
+++ b/packages/docs/content/api/CCard.api.mdx
@@ -15,13 +15,15 @@ import CCard from '@coreui/react/src/components/card/CCard'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccard-className">
-        <td className="text-primary fw-semibold">className<a href="#ccard-className" aria-label="CCard className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,23 +31,29 @@ import CCard from '@coreui/react/src/components/card/CCard'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
-      <tr id="ccard-textBgColor">
-        <td className="text-primary fw-semibold">textBgColor<a href="#ccard-textBgColor" aria-label="CCard textBgColor permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+      <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>undefined</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">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.</td>
+        <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-textColor">
-        <td className="text-primary fw-semibold">textColor<a href="#ccard-textColor" aria-label="CCard textColor permalink" className="anchor-link after">#</a></td>
+      <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>undefined</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">Sets the text color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the text color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardBody.api.mdx b/packages/docs/content/api/CCardBody.api.mdx
index 120166fc..59f7b5c8 100644
--- a/packages/docs/content/api/CCardBody.api.mdx
+++ b/packages/docs/content/api/CCardBody.api.mdx
@@ -15,13 +15,15 @@ import CCardBody from '@coreui/react/src/components/card/CCardBody'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccardbody-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardbody-className" aria-label="CCardBody className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardFooter.api.mdx b/packages/docs/content/api/CCardFooter.api.mdx
index 56002829..8c20dc0e 100644
--- a/packages/docs/content/api/CCardFooter.api.mdx
+++ b/packages/docs/content/api/CCardFooter.api.mdx
@@ -15,13 +15,15 @@ import CCardFooter from '@coreui/react/src/components/card/CCardFooter'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccardfooter-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardfooter-className" aria-label="CCardFooter className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardGroup.api.mdx b/packages/docs/content/api/CCardGroup.api.mdx
index 17c9234c..df4db1db 100644
--- a/packages/docs/content/api/CCardGroup.api.mdx
+++ b/packages/docs/content/api/CCardGroup.api.mdx
@@ -15,13 +15,15 @@ import CCardGroup from '@coreui/react/src/components/card/CCardGroup'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccardgroup-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardgroup-className" aria-label="CCardGroup className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardHeader.api.mdx b/packages/docs/content/api/CCardHeader.api.mdx
index eee36618..b93f305c 100644
--- a/packages/docs/content/api/CCardHeader.api.mdx
+++ b/packages/docs/content/api/CCardHeader.api.mdx
@@ -21,15 +21,19 @@ import CCardHeader from '@coreui/react/src/components/card/CCardHeader'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardheader-className" aria-label="CCardHeader className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardImage.api.mdx b/packages/docs/content/api/CCardImage.api.mdx
index bdf36f87..153a3e9d 100644
--- a/packages/docs/content/api/CCardImage.api.mdx
+++ b/packages/docs/content/api/CCardImage.api.mdx
@@ -21,15 +21,19 @@ import CCardImage from '@coreui/react/src/components/card/CCardImage'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardimage-className" aria-label="CCardImage className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CCardImage from '@coreui/react/src/components/card/CCardImage'
         <td><code>{`"top"`}</code>, <code>{`"bottom"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Optionally orientate the image to the top, bottom, or make it overlaid across the card.</td>
+        <td colSpan="3">
+          <p>Optionally orientate the image to the top, bottom, or make it overlaid across the card.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardImageOverlay.api.mdx b/packages/docs/content/api/CCardImageOverlay.api.mdx
index b22f8289..d65a2469 100644
--- a/packages/docs/content/api/CCardImageOverlay.api.mdx
+++ b/packages/docs/content/api/CCardImageOverlay.api.mdx
@@ -15,13 +15,15 @@ import CCardImageOverlay from '@coreui/react/src/components/card/CCardImageOverl
       </tr>
     </thead>
     <tbody>
-      <tr id="ccardimageoverlay-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardimageoverlay-className" aria-label="CCardImageOverlay className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardLink.api.mdx b/packages/docs/content/api/CCardLink.api.mdx
index 5da3c52c..96f44171 100644
--- a/packages/docs/content/api/CCardLink.api.mdx
+++ b/packages/docs/content/api/CCardLink.api.mdx
@@ -15,13 +15,15 @@ import CCardLink from '@coreui/react/src/components/card/CCardLink'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccardlink-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardlink-className" aria-label="CCardLink className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CCardLink from '@coreui/react/src/components/card/CCardLink'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardSubtitle.api.mdx b/packages/docs/content/api/CCardSubtitle.api.mdx
index 9a02ae2b..be9c5b47 100644
--- a/packages/docs/content/api/CCardSubtitle.api.mdx
+++ b/packages/docs/content/api/CCardSubtitle.api.mdx
@@ -21,15 +21,19 @@ import CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardsubtitle-className" aria-label="CCardSubtitle className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardText.api.mdx b/packages/docs/content/api/CCardText.api.mdx
index 6efe6ce0..ea0d07ef 100644
--- a/packages/docs/content/api/CCardText.api.mdx
+++ b/packages/docs/content/api/CCardText.api.mdx
@@ -21,15 +21,19 @@ import CCardText from '@coreui/react/src/components/card/CCardText'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardtext-className" aria-label="CCardText className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCardTitle.api.mdx b/packages/docs/content/api/CCardTitle.api.mdx
index 3e25134a..a37fd610 100644
--- a/packages/docs/content/api/CCardTitle.api.mdx
+++ b/packages/docs/content/api/CCardTitle.api.mdx
@@ -21,15 +21,19 @@ import CCardTitle from '@coreui/react/src/components/card/CCardTitle'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#ccardtitle-className" aria-label="CCardTitle className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCarousel.api.mdx b/packages/docs/content/api/CCarousel.api.mdx
index d0f96cc8..c23deeaa 100644
--- a/packages/docs/content/api/CCarousel.api.mdx
+++ b/packages/docs/content/api/CCarousel.api.mdx
@@ -15,21 +15,25 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccarousel-activeIndex">
-        <td className="text-primary fw-semibold">activeIndex<a href="#ccarousel-activeIndex" aria-label="CCarousel activeIndex permalink" className="anchor-link after">#</a></td>
+      <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">index of the active item.</td>
+        <td colSpan="3">
+          <p>index of the active item.</p>
+        </td>
       </tr>
-      <tr id="ccarousel-className">
-        <td className="text-primary fw-semibold">className<a href="#ccarousel-className" aria-label="CCarousel className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Adding in the previous and next controls.</td>
+        <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>
@@ -45,7 +51,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add darker controls, indicators, and captions.</td>
+        <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>
@@ -53,7 +61,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Adding indicators at the bottom of the carousel for each item.</td>
+        <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>
@@ -61,23 +71,29 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
         <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
+        <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-onSlid">
-        <td className="text-primary fw-semibold">onSlid<a href="#ccarousel-onSlid" aria-label="CCarousel onSlid permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(active: number, direction: string) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when a slide transition end.</td>
+        <td colSpan="3">
+          <p>Callback fired when a slide transition end.</p>
+        </td>
       </tr>
-      <tr id="ccarousel-onSlide">
-        <td className="text-primary fw-semibold">onSlide<a href="#ccarousel-onSlide" aria-label="CCarousel onSlide permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(active: number, direction: string) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when a slide transition starts.</td>
+        <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>
@@ -85,7 +101,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
         <td><code>{`boolean`}</code>, <code>{`"hover"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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.</td>
+        <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>
@@ -93,7 +111,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set whether the carousel should support left/right swipe interactions on touchscreen devices.</td>
+        <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>
@@ -101,7 +121,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
         <td><code>{`"slide"`}</code>, <code>{`"crossfade"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set type of the transition.</td>
+        <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>
@@ -109,7 +131,9 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set whether the carousel should cycle continuously or have hard stops.</td>
+        <td colSpan="3">
+          <p>Set whether the carousel should cycle continuously or have hard stops.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCarouselCaption.api.mdx b/packages/docs/content/api/CCarouselCaption.api.mdx
index 3e0493cd..9990fb72 100644
--- a/packages/docs/content/api/CCarouselCaption.api.mdx
+++ b/packages/docs/content/api/CCarouselCaption.api.mdx
@@ -15,13 +15,15 @@ import CCarouselCaption from '@coreui/react/src/components/carousel/CCarouselCap
       </tr>
     </thead>
     <tbody>
-      <tr id="ccarouselcaption-className">
-        <td className="text-primary fw-semibold">className<a href="#ccarouselcaption-className" aria-label="CCarouselCaption className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCarouselItem.api.mdx b/packages/docs/content/api/CCarouselItem.api.mdx
index 80cc26ca..062cad22 100644
--- a/packages/docs/content/api/CCarouselItem.api.mdx
+++ b/packages/docs/content/api/CCarouselItem.api.mdx
@@ -15,13 +15,15 @@ import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccarouselitem-className">
-        <td className="text-primary fw-semibold">className<a href="#ccarouselitem-className" aria-label="CCarouselItem className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'
         <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The amount of time to delay between automatically cycling an item.</td>
+        <td colSpan="3">
+          <p>The amount of time to delay between automatically cycling an item.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CChart.api.mdx b/packages/docs/content/api/CChart.api.mdx
index 63605ab9..f19be174 100644
--- a/packages/docs/content/api/CChart.api.mdx
+++ b/packages/docs/content/api/CChart.api.mdx
@@ -15,21 +15,25 @@ import CChart from '@coreui/react-chartjs/src/CChart'
       </tr>
     </thead>
     <tbody>
-      <tr id="cchart-className">
-        <td className="text-primary fw-semibold">className<a href="#cchart-className" aria-label="CChart className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
-      <tr id="cchart-customTooltips">
-        <td className="text-primary fw-semibold">customTooltips<a href="#cchart-customTooltips" aria-label="CChart customTooltips permalink" className="anchor-link after">#</a></td>
+      <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">Enables custom html based tooltips instead of standard tooltips.</td>
+        <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>
@@ -37,39 +41,49 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`ChartData\<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData\<...>)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The data object that is passed into the Chart.js chart (more info).</td>
+        <td colSpan="3">
+          <p>The data object that is passed into the Chart.js chart (more info).</p>
+        </td>
       </tr>
-      <tr id="cchart-fallbackContent">
-        <td className="text-primary fw-semibold">fallbackContent<a href="#cchart-fallbackContent" aria-label="CChart fallbackContent permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`React.ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</td>
+        <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-getDatasetAtEvent">
-        <td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchart-getDatasetAtEvent" aria-label="CChart getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(dataset: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</td>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
+        </td>
       </tr>
-      <tr id="cchart-getElementAtEvent">
-        <td className="text-primary fw-semibold">getElementAtEvent<a href="#cchart-getElementAtEvent" aria-label="CChart getElementAtEvent permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(element: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</td>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
+        </td>
       </tr>
-      <tr id="cchart-getElementsAtEvent">
-        <td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchart-getElementsAtEvent" aria-label="CChart getElementsAtEvent permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(elements: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</td>
+        <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>
@@ -77,7 +91,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Height attribute applied to the rendered canvas.</td>
+        <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>
@@ -85,7 +101,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">ID attribute applied to the rendered canvas.</td>
+        <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>
@@ -93,7 +111,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`_DeepPartialObject\<CoreChartOptions\<keyof ChartTypeRegistry> & ElementChartOptions\<keyof ChartTypeRegistry> & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The options object that is passed into the Chart.js chart.</td>
+        <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>
@@ -101,7 +121,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`Plugin\<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The plugins array that is passed into the Chart.js chart (more info)</td>
+        <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>
@@ -109,7 +131,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">If true, will tear down and redraw chart on all updates.</td>
+        <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>
@@ -117,7 +141,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`{'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Chart.js chart type.</td>
+        <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>
@@ -125,7 +151,9 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Width attribute applied to the rendered canvas.</td>
+        <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>
@@ -133,10 +161,10 @@ import CChart from '@coreui/react-chartjs/src/CChart'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Put the chart into the wrapper div element.</td>
+        <td colSpan="3">
+          <p>Put the chart into the wrapper div element.</p>
+        </td>
       </tr>
     </tbody>
   </table>
 </div>
-able>
-</div>
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx
index df4faa63..51f32ed4 100644
--- a/packages/docs/content/api/CCharts.api.mdx
+++ b/packages/docs/content/api/CCharts.api.mdx
@@ -15,21 +15,25 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
       </tr>
     </thead>
     <tbody>
-      <tr id="cchartbar-className">
-        <td className="text-primary fw-semibold">className<a href="#cchartbar-className" aria-label="CChartBar className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
-      <tr id="cchartbar-customTooltips">
-        <td className="text-primary fw-semibold">customTooltips<a href="#cchartbar-customTooltips" aria-label="CChartBar customTooltips permalink" className="anchor-link after">#</a></td>
+      <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">Enables custom html based tooltips instead of standard tooltips.</td>
+        <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>
@@ -37,39 +41,49 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         <td><code>{`ChartData\<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData\<...>)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The data object that is passed into the Chart.js chart (more info).</td>
+        <td colSpan="3">
+          <p>The data object that is passed into the Chart.js chart (more info).</p>
+        </td>
       </tr>
-      <tr id="cchartbar-fallbackContent">
-        <td className="text-primary fw-semibold">fallbackContent<a href="#cchartbar-fallbackContent" aria-label="CChartBar fallbackContent permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`React.ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</td>
+        <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-getDatasetAtEvent">
-        <td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchartbar-getDatasetAtEvent" aria-label="CChartBar getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(dataset: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</td>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
+        </td>
       </tr>
-      <tr id="cchartbar-getElementAtEvent">
-        <td className="text-primary fw-semibold">getElementAtEvent<a href="#cchartbar-getElementAtEvent" aria-label="CChartBar getElementAtEvent permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(element: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</td>
+        <td colSpan="3">
+          <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
+        </td>
       </tr>
-      <tr id="cchartbar-getElementsAtEvent">
-        <td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchartbar-getElementsAtEvent" aria-label="CChartBar getElementsAtEvent permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(elements: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</td>
+        <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>
@@ -77,7 +91,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Height attribute applied to the rendered canvas.</td>
+        <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>
@@ -85,7 +101,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">ID attribute applied to the rendered canvas.</td>
+        <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>
@@ -93,7 +111,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         <td><code>{`_DeepPartialObject\<CoreChartOptions\<keyof ChartTypeRegistry> & ElementChartOptions\<keyof ChartTypeRegistry> & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The options object that is passed into the Chart.js chart.</td>
+        <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>
@@ -101,7 +121,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         <td><code>{`Plugin\<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The plugins array that is passed into the Chart.js chart (more info)</td>
+        <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>
@@ -109,7 +131,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">If true, will tear down and redraw chart on all updates.</td>
+        <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>
@@ -117,7 +141,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Width attribute applied to the rendered canvas.</td>
+        <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>
@@ -125,10 +151,10 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Put the chart into the wrapper div element.</td>
+        <td colSpan="3">
+          <p>Put the chart into the wrapper div element.</p>
+        </td>
       </tr>
     </tbody>
   </table>
 </div>
-able>
-</div>
diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx
index 46f59259..c6d34b32 100644
--- a/packages/docs/content/api/CCloseButton.api.mdx
+++ b/packages/docs/content/api/CCloseButton.api.mdx
@@ -15,13 +15,15 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
       </tr>
     </thead>
     <tbody>
-      <tr id="cclosebutton-className">
-        <td className="text-primary fw-semibold">className<a href="#cclosebutton-className" aria-label="CCloseButton className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Invert the default color.</td>
+        <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>
@@ -37,15 +41,19 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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-success">Deprecated undefined</span></td>
+        <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Change the default color to white.</td>
+        <td colSpan="3">
+          <p>Change the default color to white.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx
index a905bd79..f9e0847f 100644
--- a/packages/docs/content/api/CCol.api.mdx
+++ b/packages/docs/content/api/CCol.api.mdx
@@ -15,13 +15,15 @@ import CCol from '@coreui/react/src/components/grid/CCol'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccol-className">
-        <td className="text-primary fw-semibold">className<a href="#ccol-className" aria-label="CCol className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         <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">The number of columns/offset/order on large devices (\<1200px).</td>
+        <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>
@@ -37,7 +41,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         <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">The number of columns/offset/order on medium devices (\<992px).</td>
+        <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>
@@ -45,7 +51,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         <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">The number of columns/offset/order on small devices (\<768px).</td>
+        <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>
@@ -53,7 +61,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         <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">The number of columns/offset/order on X-Large devices (\<1400px).</td>
+        <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>
@@ -61,7 +71,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         <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">The number of columns/offset/order on extra small devices (\<576px).</td>
+        <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>
@@ -69,7 +81,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         <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">The number of columns/offset/order on XX-Large devices (≥1400px).</td>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx
index 3fe185f9..08d54233 100644
--- a/packages/docs/content/api/CCollapse.api.mdx
+++ b/packages/docs/content/api/CCollapse.api.mdx
@@ -15,13 +15,15 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccollapse-className">
-        <td className="text-primary fw-semibold">className<a href="#ccollapse-className" aria-label="CCollapse className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,23 +31,29 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set horizontal collapsing to transition the width instead of height.</td>
+        <td colSpan="3">
+          <p>Set horizontal collapsing to transition the width instead of height.</p>
+        </td>
       </tr>
-      <tr id="ccollapse-onHide">
-        <td className="text-primary fw-semibold">onHide<a href="#ccollapse-onHide" aria-label="CCollapse onHide permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
       </tr>
-      <tr id="ccollapse-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#ccollapse-onShow" aria-label="CCollapse onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <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>
@@ -53,7 +61,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx
index 1b24cc9d..18508ee1 100644
--- a/packages/docs/content/api/CConditionalPortal.api.mdx
+++ b/packages/docs/content/api/CConditionalPortal.api.mdx
@@ -21,7 +21,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/
         <td><code>{`DocumentFragment`}</code>, <code>{`Element`}</code>, <code>{`(() => DocumentFragment | Element)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">An HTML element or function that returns a single element, with <code>{`document.body`}</code> as the default.</td>
+        <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>
@@ -29,7 +31,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Render some children into a different part of the DOM</td>
+        <td colSpan="3">
+          <p>Render some children into a different part of the DOM</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx
index 23928448..48cafc0c 100644
--- a/packages/docs/content/api/CContainer.api.mdx
+++ b/packages/docs/content/api/CContainer.api.mdx
@@ -15,13 +15,15 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
       </tr>
     </thead>
     <tbody>
-      <tr id="ccontainer-className">
-        <td className="text-primary fw-semibold">className<a href="#ccontainer-className" aria-label="CContainer className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set container 100% wide, spanning the entire width of the viewport.</td>
+        <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>
@@ -37,7 +41,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set container 100% wide until large breakpoint.</td>
+        <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>
@@ -45,7 +51,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set container 100% wide until medium breakpoint.</td>
+        <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>
@@ -53,7 +61,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set container 100% wide until small breakpoint.</td>
+        <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>
@@ -61,7 +71,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set container 100% wide until X-large breakpoint.</td>
+        <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>
@@ -69,7 +81,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set container 100% wide until XX-large breakpoint.</td>
+        <td colSpan="3">
+          <p>Set container 100% wide until XX-large breakpoint.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx
index ef5afd8f..e5393293 100644
--- a/packages/docs/content/api/CDropdown.api.mdx
+++ b/packages/docs/content/api/CDropdown.api.mdx
@@ -21,7 +21,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <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">Set aligment of dropdown menu.</td>
+        <td colSpan="3">
+          <p>Set aligment of dropdown menu.</p>
+        </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>
@@ -29,23 +31,35 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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="cdropdown-autoClose">
-        <td className="text-primary fw-semibold">autoClose<a href="#cdropdown-autoClose" aria-label="CDropdown autoClose permalink" className="anchor-link after">#</a></td>
+      <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">Configure the auto close behavior of the dropdown:<br/>- <code>{`true`}</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.<br/>- <code>{`false`}</code> - 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/>- <code>{`'inside'`}</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.<br/>- <code>{`'outside'`}</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</td>
+        <td colSpan="3">
+          <p>Configure the auto close behavior of the dropdown:</p>
+<ul>
+<li><code>{`true`}</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li>
+<li><code>{`false`}</code> - 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)</li>
+<li><code>{`'inside'`}</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li>
+<li><code>{`'outside'`}</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li>
+</ul>
+        </td>
       </tr>
-      <tr id="cdropdown-className">
-        <td className="text-primary fw-semibold">className<a href="#cdropdown-className" aria-label="CDropdown className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</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>
@@ -53,7 +67,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</td>
+        <td colSpan="3">
+          <p>Appends the react dropdown menu 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="cdropdown-dark">
         <td className="text-primary fw-semibold">dark<a href="#cdropdown-dark" aria-label="CDropdown dark permalink" className="anchor-link after">#</a></td>
@@ -61,7 +77,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets a darker color scheme to match a dark navbar.</td>
+        <td colSpan="3">
+          <p>Sets a darker color scheme to match a dark navbar.</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>
@@ -69,7 +87,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`"center"`}</code>, <code>{`"dropup"`}</code>, <code>{`"dropup-center"`}</code>, <code>{`"dropend"`}</code>, <code>{`"dropstart"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets a specified  direction and location of the dropdown menu.</td>
+        <td colSpan="3">
+          <p>Sets a specified  direction and location of the dropdown menu.</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>
@@ -77,23 +97,29 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`[number, number]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Offset of the dropdown menu relative to its target.</td>
+        <td colSpan="3">
+          <p>Offset of the dropdown menu relative to its target.</p>
+        </td>
       </tr>
-      <tr id="cdropdown-onHide">
-        <td className="text-primary fw-semibold">onHide<a href="#cdropdown-onHide" aria-label="CDropdown onHide permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
       </tr>
-      <tr id="cdropdown-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#cdropdown-onShow" aria-label="CDropdown onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</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>
@@ -101,7 +127,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`'auto'`}</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">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.</td>
+        <td colSpan="3">
+          <p>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.</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>
@@ -109,7 +137,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">If you want to disable dynamic positioning set this property to <code>{`true`}</code>.</td>
+        <td colSpan="3">
+          <p>If you want to disable dynamic positioning set this property to <code>{`true`}</code>.</p>
+        </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>
@@ -117,7 +147,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Generates dropdown menu using createPortal.</td>
+        <td colSpan="3">
+          <p>Generates dropdown menu using createPortal.</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>
@@ -125,7 +157,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`"btn-group"`}</code>, <code>{`"dropdown"`}</code>, <code>{`"input-group"`}</code>, <code>{`"nav-item"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.</td>
+        <td colSpan="3">
+          <p>Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.</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>
@@ -133,7 +167,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of dropdown menu component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of dropdown menu component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx
index c364ba91..dc8842ea 100644
--- a/packages/docs/content/api/CDropdownDivider.api.mdx
+++ b/packages/docs/content/api/CDropdownDivider.api.mdx
@@ -15,13 +15,15 @@ import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDiv
       </tr>
     </thead>
     <tbody>
-      <tr id="cdropdowndivider-className">
-        <td className="text-primary fw-semibold">className<a href="#cdropdowndivider-className" aria-label="CDropdownDivider className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx
index 727ce4dc..f4793433 100644
--- a/packages/docs/content/api/CDropdownHeader.api.mdx
+++ b/packages/docs/content/api/CDropdownHeader.api.mdx
@@ -21,15 +21,19 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cdropdownheader-className" aria-label="CDropdownHeader className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx
index 210289c3..c427f418 100644
--- a/packages/docs/content/api/CDropdownItem.api.mdx
+++ b/packages/docs/content/api/CDropdownItem.api.mdx
@@ -21,7 +21,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cdropdownitem-className" aria-label="CDropdownItem className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -53,7 +61,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx
index 77b6a09b..a8be60ec 100644
--- a/packages/docs/content/api/CDropdownItemPlain.api.mdx
+++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx
@@ -21,15 +21,19 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cdropdownitemplain-className" aria-label="CDropdownItemPlain className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx
index 659abcb3..30989ae0 100644
--- a/packages/docs/content/api/CDropdownMenu.api.mdx
+++ b/packages/docs/content/api/CDropdownMenu.api.mdx
@@ -21,15 +21,19 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cdropdownmenu-className" aria-label="CDropdownMenu className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx
index c8e5832f..9cb992f8 100644
--- a/packages/docs/content/api/CDropdownToggle.api.mdx
+++ b/packages/docs/content/api/CDropdownToggle.api.mdx
@@ -21,7 +21,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`ElementType`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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>
@@ -37,15 +41,19 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Enables pseudo element caret on toggler.</td>
+        <td colSpan="3">
+          <p>Enables pseudo element caret on toggler.</p>
+        </td>
       </tr>
-      <tr id="cdropdowntoggle-className">
-        <td className="text-primary fw-semibold">className<a href="#cdropdowntoggle-className" aria-label="CDropdownToggle className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -53,7 +61,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -61,7 +71,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Create a custom toggler which accepts any content.</td>
+        <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>
@@ -69,7 +81,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -77,15 +91,19 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
       </tr>
-      <tr id="cdropdowntoggle-navLink">
-        <td className="text-primary fw-semibold">navLink<a href="#cdropdowntoggle-navLink" aria-label="CDropdownToggle navLink permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
+      <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">If a dropdown <code>{`variant`}</code> is set to <code>{`nav-item`}</code> then render the toggler as a link instead of a button.</td>
+        <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>
@@ -93,7 +111,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</td>
+        <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>
@@ -101,7 +121,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <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">Select the shape of the component.</td>
+        <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>
@@ -109,7 +131,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small or large.</td>
+        <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>
@@ -117,7 +141,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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.</td>
+        <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>
@@ -125,7 +151,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td>
+        <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>
@@ -133,7 +161,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         <td><code>{`"outline"`}</code>, <code>{`"ghost"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the button variant to an outlined button or a ghost button.</td>
+        <td colSpan="3">
+          <p>Set the button variant to an outlined button or a ghost button.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx
index 91d28698..f54439f0 100644
--- a/packages/docs/content/api/CFooter.api.mdx
+++ b/packages/docs/content/api/CFooter.api.mdx
@@ -15,13 +15,15 @@ import CFooter from '@coreui/react/src/components/footer/CFooter'
       </tr>
     </thead>
     <tbody>
-      <tr id="cfooter-className">
-        <td className="text-primary fw-semibold">className<a href="#cfooter-className" aria-label="CFooter className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter'
         <td><code>{`"fixed"`}</code>, <code>{`"sticky"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Place footer in non-static positions.</td>
+        <td colSpan="3">
+          <p>Place footer in non-static positions.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx
index e1fca1e0..5c6b86dc 100644
--- a/packages/docs/content/api/CForm.api.mdx
+++ b/packages/docs/content/api/CForm.api.mdx
@@ -15,13 +15,15 @@ import CForm from '@coreui/react/src/components/form/CForm'
       </tr>
     </thead>
     <tbody>
-      <tr id="cform-className">
-        <td className="text-primary fw-semibold">className<a href="#cform-className" aria-label="CForm className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CForm from '@coreui/react/src/components/form/CForm'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Mark a form as validated. If you set it <code>{`true`}</code>, all validation styles will be applied to the forms component.</td>
+        <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>
diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx
index 59fcbea7..2798a834 100644
--- a/packages/docs/content/api/CFormCheck.api.mdx
+++ b/packages/docs/content/api/CFormCheck.api.mdx
@@ -21,15 +21,19 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`ButtonObject`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Create button-like checkboxes and radio buttons.</td>
+        <td colSpan="3">
+          <p>Create button-like checkboxes and radio buttons.</p>
+        </td>
       </tr>
-      <tr id="cformcheck-className">
-        <td className="text-primary fw-semibold">className<a href="#cformcheck-className" aria-label="CFormCheck className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,39 +41,49 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformcheck-feedbackInvalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcheck-feedbackInvalid" aria-label="CFormCheck feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformcheck-feedbackValid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcheck-feedbackValid" aria-label="CFormCheck feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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-floatingLabel">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcheck-floatingLabel" aria-label="CFormCheck floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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-hitArea">
-        <td className="text-primary fw-semibold">hitArea<a href="#cformcheck-hitArea" aria-label="CFormCheck hitArea permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`"full"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets hit area to the full area of the component.</td>
+        <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>
@@ -77,7 +91,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The id global attribute defines an identifier (ID) that must be unique in the whole document.</td>
+        <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>
@@ -85,7 +101,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Input Checkbox indeterminate Property.</td>
+        <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>
@@ -93,7 +111,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Group checkboxes or radios on the same horizontal row.</td>
+        <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>
@@ -101,7 +121,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to invalid.</td>
+        <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>
@@ -109,7 +131,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The element represents a caption for a component.</td>
+        <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>
@@ -117,15 +141,19 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Put checkboxes or radios on the opposite side.</td>
+        <td colSpan="3">
+          <p>Put checkboxes or radios on the opposite side.</p>
+        </td>
       </tr>
-      <tr id="cformcheck-tooltipFeedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcheck-tooltipFeedback" aria-label="CFormCheck tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+        <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>
@@ -133,7 +161,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`"checkbox"`}</code>, <code>{`"radio"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specifies the type of component.</td>
+        <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>
@@ -141,7 +171,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to valid.</td>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx
index be49958a..49863167 100644
--- a/packages/docs/content/api/CFormControlValidation.api.mdx
+++ b/packages/docs/content/api/CFormControlValidation.api.mdx
@@ -21,31 +21,39 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformcontrolvalidation-feedbackInvalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcontrolvalidation-feedbackInvalid" aria-label="CFormControlValidation feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformcontrolvalidation-feedbackValid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcontrolvalidation-feedbackValid" aria-label="CFormControlValidation feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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-floatingLabel">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcontrolvalidation-floatingLabel" aria-label="CFormControlValidation floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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>
@@ -53,15 +61,19 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to invalid.</td>
+        <td colSpan="3">
+          <p>Set component validation state to invalid.</p>
+        </td>
       </tr>
-      <tr id="cformcontrolvalidation-tooltipFeedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcontrolvalidation-tooltipFeedback" aria-label="CFormControlValidation tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+        <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>
@@ -69,7 +81,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to valid.</td>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx
index 49ab36b1..24b0d2ec 100644
--- a/packages/docs/content/api/CFormControlWrapper.api.mdx
+++ b/packages/docs/content/api/CFormControlWrapper.api.mdx
@@ -21,39 +21,49 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformcontrolwrapper-feedbackInvalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcontrolwrapper-feedbackInvalid" aria-label="CFormControlWrapper feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformcontrolwrapper-feedbackValid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcontrolwrapper-feedbackValid" aria-label="CFormControlWrapper feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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-floatingClassName">
-        <td className="text-primary fw-semibold">floatingClassName<a href="#cformcontrolwrapper-floatingClassName" aria-label="CFormControlWrapper floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the floating label wrapper.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the floating label wrapper.</p>
+        </td>
       </tr>
-      <tr id="cformcontrolwrapper-floatingLabel">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcontrolwrapper-floatingLabel" aria-label="CFormControlWrapper floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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>
@@ -61,7 +71,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to invalid.</td>
+        <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>
@@ -69,7 +81,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add a caption for a component.</td>
+        <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>
@@ -77,15 +91,19 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add helper text to the component.</td>
+        <td colSpan="3">
+          <p>Add helper text to the component.</p>
+        </td>
       </tr>
-      <tr id="cformcontrolwrapper-tooltipFeedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcontrolwrapper-tooltipFeedback" aria-label="CFormControlWrapper tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+        <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>
@@ -93,7 +111,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to valid.</td>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx
index 0ee22dde..db5b54fe 100644
--- a/packages/docs/content/api/CFormFeedback.api.mdx
+++ b/packages/docs/content/api/CFormFeedback.api.mdx
@@ -21,15 +21,19 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cformfeedback-className" aria-label="CFormFeedback className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+        <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>
@@ -45,7 +51,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">If your form layout allows it, you can display validation feedback in a styled tooltip.</td>
+        <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>
@@ -53,7 +61,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to valid.</td>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx
index 0ba29670..5f456c6c 100644
--- a/packages/docs/content/api/CFormFloating.api.mdx
+++ b/packages/docs/content/api/CFormFloating.api.mdx
@@ -15,13 +15,15 @@ import CFormFloating from '@coreui/react/src/components/form/CFormFloating'
       </tr>
     </thead>
     <tbody>
-      <tr id="cformfloating-className">
-        <td className="text-primary fw-semibold">className<a href="#cformfloating-className" aria-label="CFormFloating className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx
index b69c5cfb..c1e48174 100644
--- a/packages/docs/content/api/CFormInput.api.mdx
+++ b/packages/docs/content/api/CFormInput.api.mdx
@@ -15,13 +15,15 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
       </tr>
     </thead>
     <tbody>
-      <tr id="cforminput-className">
-        <td className="text-primary fw-semibold">className<a href="#cforminput-className" aria-label="CFormInput className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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.</td>
+        <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>
@@ -37,7 +41,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -45,39 +51,49 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cforminput-feedbackInvalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cforminput-feedbackInvalid" aria-label="CFormInput feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cforminput-feedbackValid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cforminput-feedbackValid" aria-label="CFormInput feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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-floatingClassName">
-        <td className="text-primary fw-semibold">floatingClassName<a href="#cforminput-floatingClassName" aria-label="CFormInput floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the floating label wrapper.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the floating label wrapper.</p>
+        </td>
       </tr>
-      <tr id="cforminput-floatingLabel">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cforminput-floatingLabel" aria-label="CFormInput floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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>
@@ -85,7 +101,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to invalid.</td>
+        <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>
@@ -93,31 +111,39 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add a caption for a component.</td>
+        <td colSpan="3">
+          <p>Add a caption for a component.</p>
+        </td>
       </tr>
-      <tr id="cforminput-onChange">
-        <td className="text-primary fw-semibold">onChange<a href="#cforminput-onChange" aria-label="CFormInput onChange permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+        <td colSpan="3">
+          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
+        </td>
       </tr>
-      <tr id="cforminput-plainText">
-        <td className="text-primary fw-semibold">plainText<a href="#cforminput-plainText" aria-label="CFormInput plainText permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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>.</td>
+        <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-readOnly">
-        <td className="text-primary fw-semibold">readOnly<a href="#cforminput-readOnly" aria-label="CFormInput readOnly permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the readonly state for the component.</td>
+        <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>
@@ -125,7 +151,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small or large.</td>
+        <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>
@@ -133,15 +161,19 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add helper text to the component.</td>
+        <td colSpan="3">
+          <p>Add helper text to the component.</p>
+        </td>
       </tr>
-      <tr id="cforminput-tooltipFeedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cforminput-tooltipFeedback" aria-label="CFormInput tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+        <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>
@@ -149,7 +181,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specifies the type of component.</td>
+        <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>
@@ -157,7 +191,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to valid.</td>
+        <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>
@@ -165,7 +201,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The <code>{`value`}</code> attribute of component.</td>
+        <td colSpan="3">
+          <p>The <code>{`value`}</code> attribute of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx
index d6d7ab74..1f30c9e1 100644
--- a/packages/docs/content/api/CFormLabel.api.mdx
+++ b/packages/docs/content/api/CFormLabel.api.mdx
@@ -15,21 +15,25 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
       </tr>
     </thead>
     <tbody>
-      <tr id="cformlabel-className">
-        <td className="text-primary fw-semibold">className<a href="#cformlabel-className" aria-label="CFormLabel className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
-      <tr id="cformlabel-customClassName">
-        <td className="text-primary fw-semibold">customClassName<a href="#cformlabel-customClassName" aria-label="CFormLabel customClassName permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want to be applied to the component, and override standard className value.</td>
+        <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>
diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx
index 65ea10c7..ef1a9732 100644
--- a/packages/docs/content/api/CFormRange.api.mdx
+++ b/packages/docs/content/api/CFormRange.api.mdx
@@ -15,13 +15,15 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
       </tr>
     </thead>
     <tbody>
-      <tr id="cformrange-className">
-        <td className="text-primary fw-semibold">className<a href="#cformrange-className" aria-label="CFormRange className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add a caption for a component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specifies the maximum value for the component.</td>
+        <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>
@@ -53,23 +61,29 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specifies the minimum value for the component.</td>
+        <td colSpan="3">
+          <p>Specifies the minimum value for the component.</p>
+        </td>
       </tr>
-      <tr id="cformrange-onChange">
-        <td className="text-primary fw-semibold">onChange<a href="#cformrange-onChange" aria-label="CFormRange onChange permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+        <td colSpan="3">
+          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
+        </td>
       </tr>
-      <tr id="cformrange-readOnly">
-        <td className="text-primary fw-semibold">readOnly<a href="#cformrange-readOnly" aria-label="CFormRange readOnly permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the readonly state for the component.</td>
+        <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>
@@ -77,7 +91,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specifies the interval between legal numbers in the component.</td>
+        <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>
@@ -85,7 +101,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The <code>{`value`}</code> attribute of component.</td>
+        <td colSpan="3">
+          <p>The <code>{`value`}</code> attribute of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx
index 105db26a..90343476 100644
--- a/packages/docs/content/api/CFormSelect.api.mdx
+++ b/packages/docs/content/api/CFormSelect.api.mdx
@@ -15,13 +15,15 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
       </tr>
     </thead>
     <tbody>
-      <tr id="cformselect-className">
-        <td className="text-primary fw-semibold">className<a href="#cformselect-className" aria-label="CFormSelect className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,47 +31,59 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformselect-feedbackInvalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformselect-feedbackInvalid" aria-label="CFormSelect feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformselect-feedbackValid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformselect-feedbackValid" aria-label="CFormSelect feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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-floatingClassName">
-        <td className="text-primary fw-semibold">floatingClassName<a href="#cformselect-floatingClassName" aria-label="CFormSelect floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the floating label wrapper.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the floating label wrapper.</p>
+        </td>
       </tr>
-      <tr id="cformselect-floatingLabel">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformselect-floatingLabel" aria-label="CFormSelect floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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-htmlSize">
-        <td className="text-primary fw-semibold">htmlSize<a href="#cformselect-htmlSize" aria-label="CFormSelect htmlSize permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specifies the number of visible options in a drop-down list.</td>
+        <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>
@@ -77,7 +91,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to invalid.</td>
+        <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>
@@ -85,15 +101,19 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add a caption for a component.</td>
+        <td colSpan="3">
+          <p>Add a caption for a component.</p>
+        </td>
       </tr>
-      <tr id="cformselect-onChange">
-        <td className="text-primary fw-semibold">onChange<a href="#cformselect-onChange" aria-label="CFormSelect onChange permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`ChangeEventHandler\<HTMLSelectElement>`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+        <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>
@@ -101,7 +121,14 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         <td><code>{`Option[]`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Options list of the select component. Available keys: <code>{`label`}</code>, <code>{`value`}</code>, <code>{`disabled`}</code>.<br/>Examples:<br/>- <code>{`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}</code><br/>- <code>{`options={['js', 'html']}`}</code></td>
+        <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>
@@ -109,7 +136,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small or large.</td>
+        <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>
@@ -117,15 +146,19 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add helper text to the component.</td>
+        <td colSpan="3">
+          <p>Add helper text to the component.</p>
+        </td>
       </tr>
-      <tr id="cformselect-tooltipFeedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformselect-tooltipFeedback" aria-label="CFormSelect tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+        <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>
@@ -133,7 +166,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to valid.</td>
+        <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>
@@ -141,7 +176,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The <code>{`value`}</code> attribute of component.</td>
+        <td colSpan="3">
+          <p>The <code>{`value`}</code> attribute of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx
index 5c420a83..415810d4 100644
--- a/packages/docs/content/api/CFormSwitch.api.mdx
+++ b/packages/docs/content/api/CFormSwitch.api.mdx
@@ -15,13 +15,15 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
       </tr>
     </thead>
     <tbody>
-      <tr id="cformswitch-className">
-        <td className="text-primary fw-semibold">className<a href="#cformswitch-className" aria-label="CFormSwitch className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The id global attribute defines an identifier (ID) that must be unique in the whole document.</td>
+        <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>
@@ -37,7 +41,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to invalid.</td>
+        <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>
@@ -45,7 +51,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The element represents a caption for a component.</td>
+        <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>
@@ -53,7 +61,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Put switch on the opposite side.</td>
+        <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>
@@ -61,7 +71,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         <td><code>{`"lg"`}</code>, <code>{`"xl"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component large or extra large. Works only with <code>{`switch`}</code>.</td>
+        <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>
@@ -69,7 +81,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         <td><code>{`"checkbox"`}</code>, <code>{`"radio"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specifies the type of component.</td>
+        <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>
@@ -77,7 +91,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to valid.</td>
+        <td colSpan="3">
+          <p>Set component validation state to valid.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx
index 2f666b98..d029eefb 100644
--- a/packages/docs/content/api/CFormText.api.mdx
+++ b/packages/docs/content/api/CFormText.api.mdx
@@ -21,15 +21,19 @@ import CFormText from '@coreui/react/src/components/form/CFormText'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cformtext-className" aria-label="CFormText className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx
index 6f831f59..8618fcb7 100644
--- a/packages/docs/content/api/CFormTextarea.api.mdx
+++ b/packages/docs/content/api/CFormTextarea.api.mdx
@@ -15,13 +15,15 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
       </tr>
     </thead>
     <tbody>
-      <tr id="cformtextarea-className">
-        <td className="text-primary fw-semibold">className<a href="#cformtextarea-className" aria-label="CFormTextarea className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -37,39 +41,49 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformtextarea-feedbackInvalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformtextarea-feedbackInvalid" aria-label="CFormTextarea feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable feedback.</td>
+        <td colSpan="3">
+          <p>Provide valuable, actionable feedback.</p>
+        </td>
       </tr>
-      <tr id="cformtextarea-feedbackValid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformtextarea-feedbackValid" aria-label="CFormTextarea feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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-floatingClassName">
-        <td className="text-primary fw-semibold">floatingClassName<a href="#cformtextarea-floatingClassName" aria-label="CFormTextarea floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the floating label wrapper.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the floating label wrapper.</p>
+        </td>
       </tr>
-      <tr id="cformtextarea-floatingLabel">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformtextarea-floatingLabel" aria-label="CFormTextarea floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</td>
+        <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>
@@ -77,7 +91,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to invalid.</td>
+        <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>
@@ -85,31 +101,39 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add a caption for a component.</td>
+        <td colSpan="3">
+          <p>Add a caption for a component.</p>
+        </td>
       </tr>
-      <tr id="cformtextarea-onChange">
-        <td className="text-primary fw-semibold">onChange<a href="#cformtextarea-onChange" aria-label="CFormTextarea onChange permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`ChangeEventHandler\<HTMLTextAreaElement>`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Method called immediately after the <code>{`value`}</code> prop changes.</td>
+        <td colSpan="3">
+          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
+        </td>
       </tr>
-      <tr id="cformtextarea-plainText">
-        <td className="text-primary fw-semibold">plainText<a href="#cformtextarea-plainText" aria-label="CFormTextarea plainText permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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>.</td>
+        <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-readOnly">
-        <td className="text-primary fw-semibold">readOnly<a href="#cformtextarea-readOnly" aria-label="CFormTextarea readOnly permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the readonly state for the component.</td>
+        <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>
@@ -117,15 +141,19 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add helper text to the component.</td>
+        <td colSpan="3">
+          <p>Add helper text to the component.</p>
+        </td>
       </tr>
-      <tr id="cformtextarea-tooltipFeedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformtextarea-tooltipFeedback" aria-label="CFormTextarea tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Display validation feedback in a styled tooltip.</td>
+        <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>
@@ -133,7 +161,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set component validation state to valid.</td>
+        <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>
@@ -141,7 +171,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The <code>{`value`}</code> attribute of component.</td>
+        <td colSpan="3">
+          <p>The <code>{`value`}</code> attribute of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx
index 692cee33..2b225673 100644
--- a/packages/docs/content/api/CHeader.api.mdx
+++ b/packages/docs/content/api/CHeader.api.mdx
@@ -15,13 +15,15 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
       </tr>
     </thead>
     <tbody>
-      <tr id="cheader-className">
-        <td className="text-primary fw-semibold">className<a href="#cheader-className" aria-label="CHeader className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
         <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">Defines optional container wrapping children elements.</td>
+        <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>
@@ -37,7 +41,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
         <td><code>{`"fixed"`}</code>, <code>{`"sticky"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Place header in non-static positions.</td>
+        <td colSpan="3">
+          <p>Place header in non-static positions.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx
index 10369861..abfd6005 100644
--- a/packages/docs/content/api/CHeaderBrand.api.mdx
+++ b/packages/docs/content/api/CHeaderBrand.api.mdx
@@ -21,15 +21,19 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cheaderbrand-className" aria-label="CHeaderBrand className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx
index ba8343d3..78046399 100644
--- a/packages/docs/content/api/CHeaderDivider.api.mdx
+++ b/packages/docs/content/api/CHeaderDivider.api.mdx
@@ -15,13 +15,15 @@ import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider'
       </tr>
     </thead>
     <tbody>
-      <tr id="cheaderdivider-className">
-        <td className="text-primary fw-semibold">className<a href="#cheaderdivider-className" aria-label="CHeaderDivider className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx
index c9538fbe..6ce66614 100644
--- a/packages/docs/content/api/CHeaderNav.api.mdx
+++ b/packages/docs/content/api/CHeaderNav.api.mdx
@@ -21,15 +21,19 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cheadernav-className" aria-label="CHeaderNav className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx
index 7b2b049d..e4bed1f7 100644
--- a/packages/docs/content/api/CHeaderText.api.mdx
+++ b/packages/docs/content/api/CHeaderText.api.mdx
@@ -15,13 +15,15 @@ import CHeaderText from '@coreui/react/src/components/header/CHeaderText'
       </tr>
     </thead>
     <tbody>
-      <tr id="cheadertext-className">
-        <td className="text-primary fw-semibold">className<a href="#cheadertext-className" aria-label="CHeaderText className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx
index 9ed97ec8..9294a16c 100644
--- a/packages/docs/content/api/CHeaderToggler.api.mdx
+++ b/packages/docs/content/api/CHeaderToggler.api.mdx
@@ -15,13 +15,15 @@ import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler'
       </tr>
     </thead>
     <tbody>
-      <tr id="cheadertoggler-className">
-        <td className="text-primary fw-semibold">className<a href="#cheadertoggler-className" aria-label="CHeaderToggler className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx
index 922cde27..9555a4ff 100644
--- a/packages/docs/content/api/CIcon.api.mdx
+++ b/packages/docs/content/api/CIcon.api.mdx
@@ -1,8 +1,8 @@
 
 ```jsx
-import { CIcon } from '@coreui/..'
+import { CIcon } from '@coreui/icons-react'
 // or
-import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
+import CIcon from '@coreui/icons-react/src/CIcon'
 ```
 
 <div className="table-responsive table-api border rounded mb-3">
@@ -15,29 +15,35 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
       </tr>
     </thead>
     <tbody>
-      <tr id="cicon-className">
-        <td className="text-primary fw-semibold">className<a href="#cicon-className" aria-label="CIcon className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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-success">Deprecated undefined</span></td>
+        <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>undefined</td>
         <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Use <code>{`icon={...}`}</code> instead of</td>
+        <td colSpan="3">
+          <p>Use <code>{`icon={...}`}</code> instead of</p>
+        </td>
       </tr>
-      <tr id="cicon-customClassName">
-        <td className="text-primary fw-semibold">customClassName<a href="#cicon-customClassName" aria-label="CIcon customClassName permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</td>
+        <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>
@@ -45,7 +51,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The height attribute defines the vertical length of an icon.</td>
+        <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>
@@ -53,15 +61,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Name of the icon placed in React object or SVG content.</td>
+        <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-success">Deprecated undefined</span></td>
+        <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Use <code>{`icon="..."`}</code> instead of</td>
+        <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>
@@ -69,7 +81,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         <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">Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.</td>
+        <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>
@@ -77,7 +91,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Title tag content.</td>
+        <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>
@@ -85,15 +101,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">If defined component will be rendered using 'use' tag.</td>
+        <td colSpan="3">
+          <p>If defined component will be rendered using 'use' tag.</p>
+        </td>
       </tr>
-      <tr id="cicon-viewBox">
-        <td className="text-primary fw-semibold">viewBox<a href="#cicon-viewBox" aria-label="CIcon viewBox permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The viewBox attribute defines the position and dimension of an SVG viewport.</td>
+        <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>
@@ -101,7 +121,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The width attribute defines the horizontal length of an icon.</td>
+        <td colSpan="3">
+          <p>The width attribute defines the horizontal length of an icon.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx
index 66f86fd5..cbbc7a1c 100644
--- a/packages/docs/content/api/CIconSvg.api.mdx
+++ b/packages/docs/content/api/CIconSvg.api.mdx
@@ -15,21 +15,25 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
       </tr>
     </thead>
     <tbody>
-      <tr id="ciconsvg-className">
-        <td className="text-primary fw-semibold">className<a href="#ciconsvg-className" aria-label="CIconSvg className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
-      <tr id="ciconsvg-customClassName">
-        <td className="text-primary fw-semibold">customClassName<a href="#ciconsvg-customClassName" aria-label="CIconSvg customClassName permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</td>
+        <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>
@@ -37,7 +41,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The height attribute defines the vertical length of an icon.</td>
+        <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>
@@ -45,7 +51,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         <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">Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.</td>
+        <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>
@@ -53,7 +61,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Title tag content.</td>
+        <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>
@@ -61,10 +71,10 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The width attribute defines the horizontal length of an icon.</td>
+        <td colSpan="3">
+          <p>The width attribute defines the horizontal length of an icon.</p>
+        </td>
       </tr>
     </tbody>
   </table>
 </div>
-/table>
-</div>
diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx
index 2b619e44..67bd9ae3 100644
--- a/packages/docs/content/api/CImage.api.mdx
+++ b/packages/docs/content/api/CImage.api.mdx
@@ -21,15 +21,19 @@ import CImage from '@coreui/react/src/components/image/CImage'
         <td><code>{`"start"`}</code>, <code>{`"center"`}</code>, <code>{`"end"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the horizontal aligment.</td>
+        <td colSpan="3">
+          <p>Set the horizontal aligment.</p>
+        </td>
       </tr>
-      <tr id="cimage-className">
-        <td className="text-primary fw-semibold">className<a href="#cimage-className" aria-label="CImage className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Make image responsive.</td>
+        <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>
@@ -45,7 +51,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Make image rounded.</td>
+        <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>
@@ -53,7 +61,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Give an image a rounded 1px border appearance.</td>
+        <td colSpan="3">
+          <p>Give an image a rounded 1px border appearance.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx
index 8e11a1cb..44487540 100644
--- a/packages/docs/content/api/CInputGroup.api.mdx
+++ b/packages/docs/content/api/CInputGroup.api.mdx
@@ -15,13 +15,15 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
       </tr>
     </thead>
     <tbody>
-      <tr id="cinputgroup-className">
-        <td className="text-primary fw-semibold">className<a href="#cinputgroup-className" aria-label="CInputGroup className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small or large.</td>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx
index 7333ae46..49bcb81e 100644
--- a/packages/docs/content/api/CInputGroupText.api.mdx
+++ b/packages/docs/content/api/CInputGroupText.api.mdx
@@ -21,15 +21,19 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cinputgrouptext-className" aria-label="CInputGroupText className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx
index 297687c3..765d243f 100644
--- a/packages/docs/content/api/CLink.api.mdx
+++ b/packages/docs/content/api/CLink.api.mdx
@@ -21,7 +21,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CLink from '@coreui/react/src/components/link/CLink'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#clink-className" aria-label="CLink className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -53,7 +61,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx
index 5ff0ad27..9651e1c3 100644
--- a/packages/docs/content/api/CListGroup.api.mdx
+++ b/packages/docs/content/api/CListGroup.api.mdx
@@ -21,15 +21,19 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#clistgroup-className" aria-label="CListGroup className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>{`\<CCard>`}</code>).</td>
+        <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>
@@ -45,7 +51,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
         <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">Specify a layout type.</td>
+        <td colSpan="3">
+          <p>Specify a layout type.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx
index ae42cde7..b80d7ab2 100644
--- a/packages/docs/content/api/CListGroupItem.api.mdx
+++ b/packages/docs/content/api/CListGroupItem.api.mdx
@@ -21,7 +21,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#clistgroupitem-className" aria-label="CListGroupItem className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -53,7 +61,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx
index 5d55be8e..5431acb5 100644
--- a/packages/docs/content/api/CModal.api.mdx
+++ b/packages/docs/content/api/CModal.api.mdx
@@ -21,7 +21,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`"top"`}</code>, <code>{`"center"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Align the modal in the center or top of the screen.</td>
+        <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>
@@ -29,15 +31,19 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`boolean`}</code>, <code>{`"static"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Apply a backdrop on body while modal is open.</td>
+        <td colSpan="3">
+          <p>Apply a backdrop on body while modal is open.</p>
+        </td>
       </tr>
-      <tr id="cmodal-className">
-        <td className="text-primary fw-semibold">className<a href="#cmodal-className" aria-label="CModal className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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>.</td>
+        <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>
@@ -53,7 +61,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Puts the focus on the modal when shown.</td>
+        <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>
@@ -61,7 +71,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <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">Set modal to covers the entire user viewport.</td>
+        <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>
@@ -69,31 +81,39 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Closes the modal when escape key is pressed.</td>
+        <td colSpan="3">
+          <p>Closes the modal when escape key is pressed.</p>
+        </td>
       </tr>
-      <tr id="cmodal-onClose">
-        <td className="text-primary fw-semibold">onClose<a href="#cmodal-onClose" aria-label="CModal onClose permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be closed.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be closed.</p>
+        </td>
       </tr>
-      <tr id="cmodal-onClosePrevented">
-        <td className="text-primary fw-semibold">onClosePrevented<a href="#cmodal-onClosePrevented" aria-label="CModal onClosePrevented permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be closed.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be closed.</p>
+        </td>
       </tr>
-      <tr id="cmodal-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#cmodal-onShow" aria-label="CModal onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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.</td>
+        <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>
@@ -101,7 +121,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Generates modal using createPortal.</td>
+        <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>
@@ -109,7 +131,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Create a scrollable modal that allows scrolling the modal body.</td>
+        <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>
@@ -117,7 +141,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small, large, or extra large.</td>
+        <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>
@@ -125,15 +151,19 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Remove animation to create modal that simply appear rather than fade in to view.</td>
+        <td colSpan="3">
+          <p>Remove animation to create modal that simply appear rather than fade in to view.</p>
+        </td>
       </tr>
-      <tr id="cmodal-unmountOnClose">
-        <td className="text-primary fw-semibold">unmountOnClose<a href="#cmodal-unmountOnClose" aria-label="CModal unmountOnClose permalink" className="anchor-link after">#</a></td>
+      <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">By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</td>
+        <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>
@@ -141,7 +171,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of modal component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of modal component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx
index db2858ae..4f47fab6 100644
--- a/packages/docs/content/api/CModalBody.api.mdx
+++ b/packages/docs/content/api/CModalBody.api.mdx
@@ -15,13 +15,15 @@ import CModalBody from '@coreui/react/src/components/modal/CModalBody'
       </tr>
     </thead>
     <tbody>
-      <tr id="cmodalbody-className">
-        <td className="text-primary fw-semibold">className<a href="#cmodalbody-className" aria-label="CModalBody className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx
index 65bcb134..45fc3002 100644
--- a/packages/docs/content/api/CModalContent.api.mdx
+++ b/packages/docs/content/api/CModalContent.api.mdx
@@ -15,13 +15,15 @@ import CModalContent from '@coreui/react/src/components/modal/CModalContent'
       </tr>
     </thead>
     <tbody>
-      <tr id="cmodalcontent-className">
-        <td className="text-primary fw-semibold">className<a href="#cmodalcontent-className" aria-label="CModalContent className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx
index aa9ee1e4..a0486d4e 100644
--- a/packages/docs/content/api/CModalDialog.api.mdx
+++ b/packages/docs/content/api/CModalDialog.api.mdx
@@ -21,15 +21,19 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         <td><code>{`"top"`}</code>, <code>{`"center"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Align the modal in the center or top of the screen.</td>
+        <td colSpan="3">
+          <p>Align the modal in the center or top of the screen.</p>
+        </td>
       </tr>
-      <tr id="cmodaldialog-className">
-        <td className="text-primary fw-semibold">className<a href="#cmodaldialog-className" aria-label="CModalDialog className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         <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">Set modal to covers the entire user viewport.</td>
+        <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>
@@ -45,7 +51,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Does the modal dialog itself scroll, or does the whole dialog scroll within the window.</td>
+        <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>
@@ -53,7 +61,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small, large, or extra large.</td>
+        <td colSpan="3">
+          <p>Size the component small, large, or extra large.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx
index 25a3d54e..73ee5ccd 100644
--- a/packages/docs/content/api/CModalFooter.api.mdx
+++ b/packages/docs/content/api/CModalFooter.api.mdx
@@ -15,13 +15,15 @@ import CModalFooter from '@coreui/react/src/components/modal/CModalFooter'
       </tr>
     </thead>
     <tbody>
-      <tr id="cmodalfooter-className">
-        <td className="text-primary fw-semibold">className<a href="#cmodalfooter-className" aria-label="CModalFooter className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx
index 3bb8fdb8..0dddfa96 100644
--- a/packages/docs/content/api/CModalHeader.api.mdx
+++ b/packages/docs/content/api/CModalHeader.api.mdx
@@ -15,21 +15,25 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'
       </tr>
     </thead>
     <tbody>
-      <tr id="cmodalheader-className">
-        <td className="text-primary fw-semibold">className<a href="#cmodalheader-className" aria-label="CModalHeader className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
-      <tr id="cmodalheader-closeButton">
-        <td className="text-primary fw-semibold">closeButton<a href="#cmodalheader-closeButton" aria-label="CModalHeader closeButton permalink" className="anchor-link after">#</a></td>
+      <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">Add a close button component to the header.</td>
+        <td colSpan="3">
+          <p>Add a close button component to the header.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx
index 78393a10..9b14bbb1 100644
--- a/packages/docs/content/api/CModalTitle.api.mdx
+++ b/packages/docs/content/api/CModalTitle.api.mdx
@@ -21,15 +21,19 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cmodaltitle-className" aria-label="CModalTitle className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx
index 7a216738..f87d8e1e 100644
--- a/packages/docs/content/api/CNav.api.mdx
+++ b/packages/docs/content/api/CNav.api.mdx
@@ -21,15 +21,19 @@ import CNav from '@coreui/react/src/components/nav/CNav'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnav-className" aria-label="CNav className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
         <td><code>{`"fill"`}</code>, <code>{`"justified"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specify a layout type for component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
         <td><code>{`"pills"`}</code>, <code>{`"tabs"`}</code>, <code>{`"underline"`}</code>, <code>{`"underline-border"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the nav variant to tabs or pills.</td>
+        <td colSpan="3">
+          <p>Set the nav variant to tabs or pills.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx
index 83b3d884..59506032 100644
--- a/packages/docs/content/api/CNavGroup.api.mdx
+++ b/packages/docs/content/api/CNavGroup.api.mdx
@@ -21,15 +21,19 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavgroup-className" aria-label="CNavGroup className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Make nav group more compact by cutting all <code>{`padding`}</code> in half.</td>
+        <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>
@@ -45,7 +51,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set group toggler label.</td>
+        <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>
@@ -53,7 +61,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Show nav group items.</td>
+        <td colSpan="3">
+          <p>Show nav group items.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx
index 3b911547..eaca90f5 100644
--- a/packages/docs/content/api/CNavGroupItems.api.mdx
+++ b/packages/docs/content/api/CNavGroupItems.api.mdx
@@ -21,15 +21,19 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavgroupitems-className" aria-label="CNavGroupItems className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx
index 5d629503..e635d32c 100644
--- a/packages/docs/content/api/CNavItem.api.mdx
+++ b/packages/docs/content/api/CNavItem.api.mdx
@@ -21,7 +21,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavitem-className" aria-label="CNavItem className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -53,7 +61,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx
index f3154093..d6f838e3 100644
--- a/packages/docs/content/api/CNavLink.api.mdx
+++ b/packages/docs/content/api/CNavLink.api.mdx
@@ -21,7 +21,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavlink-className" aria-label="CNavLink className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -53,7 +61,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx
index 83abb795..f9489cb0 100644
--- a/packages/docs/content/api/CNavTitle.api.mdx
+++ b/packages/docs/content/api/CNavTitle.api.mdx
@@ -21,15 +21,19 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavtitle-className" aria-label="CNavTitle className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx
index 730f1c1e..662d80c2 100644
--- a/packages/docs/content/api/CNavbar.api.mdx
+++ b/packages/docs/content/api/CNavbar.api.mdx
@@ -21,15 +21,19 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavbar-className" aria-label="CNavbar className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,15 +41,19 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
-      <tr id="cnavbar-colorScheme">
-        <td className="text-primary fw-semibold">colorScheme<a href="#cnavbar-colorScheme" aria-label="CNavbar colorScheme permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`"dark"`}</code>, <code>{`"light"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets if the color of text should be colored for a light or dark background.</td>
+        <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>
@@ -53,7 +61,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         <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">Defines optional container wrapping children elements.</td>
+        <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>
@@ -61,7 +71,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         <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">Defines the responsive breakpoint to determine when content collapses.</td>
+        <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>
@@ -69,7 +81,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         <td><code>{`"fixed-top"`}</code>, <code>{`"fixed-bottom"`}</code>, <code>{`"sticky-top"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Place component in non-static positions.</td>
+        <td colSpan="3">
+          <p>Place component in non-static positions.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx
index 03d98309..bdd3e6f7 100644
--- a/packages/docs/content/api/CNavbarBrand.api.mdx
+++ b/packages/docs/content/api/CNavbarBrand.api.mdx
@@ -21,15 +21,19 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavbarbrand-className" aria-label="CNavbarBrand className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <td colSpan="3">
+          <p>The href attribute specifies the URL of the page the link goes to.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx
index 2c46edf3..f7e05623 100644
--- a/packages/docs/content/api/CNavbarNav.api.mdx
+++ b/packages/docs/content/api/CNavbarNav.api.mdx
@@ -21,15 +21,19 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavbarnav-className" aria-label="CNavbarNav className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx
index a7c58443..17ce32d4 100644
--- a/packages/docs/content/api/CNavbarText.api.mdx
+++ b/packages/docs/content/api/CNavbarText.api.mdx
@@ -15,13 +15,15 @@ import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText'
       </tr>
     </thead>
     <tbody>
-      <tr id="cnavbartext-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavbartext-className" aria-label="CNavbarText className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx
index ce474a31..7470ace3 100644
--- a/packages/docs/content/api/CNavbarToggler.api.mdx
+++ b/packages/docs/content/api/CNavbarToggler.api.mdx
@@ -15,13 +15,15 @@ import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler'
       </tr>
     </thead>
     <tbody>
-      <tr id="cnavbartoggler-className">
-        <td className="text-primary fw-semibold">className<a href="#cnavbartoggler-className" aria-label="CNavbarToggler className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx
index 744d2595..e2377df9 100644
--- a/packages/docs/content/api/COffcanvas.api.mdx
+++ b/packages/docs/content/api/COffcanvas.api.mdx
@@ -21,15 +21,19 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         <td><code>{`boolean`}</code>, <code>{`"static"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Apply a backdrop on body while offcanvas is open.</td>
+        <td colSpan="3">
+          <p>Apply a backdrop on body while offcanvas is open.</p>
+        </td>
       </tr>
-      <tr id="coffcanvas-className">
-        <td className="text-primary fw-semibold">className<a href="#coffcanvas-className" aria-label="COffcanvas className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -37,7 +41,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets a darker color scheme.</td>
+        <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>
@@ -45,23 +51,29 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Closes the offcanvas when escape key is pressed.</td>
+        <td colSpan="3">
+          <p>Closes the offcanvas when escape key is pressed.</p>
+        </td>
       </tr>
-      <tr id="coffcanvas-onHide">
-        <td className="text-primary fw-semibold">onHide<a href="#coffcanvas-onHide" aria-label="COffcanvas onHide permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
       </tr>
-      <tr id="coffcanvas-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#coffcanvas-onShow" aria-label="COffcanvas onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <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>
@@ -69,7 +81,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         <td><code>{`"start"`}</code>, <code>{`"end"`}</code>, <code>{`"top"`}</code>, <code>{`"bottom"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Components placement, there’s no default placement.</td>
+        <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>
@@ -77,7 +91,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Generates modal using createPortal.</td>
+        <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>
@@ -85,7 +101,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         <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">Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</td>
+        <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>
@@ -93,7 +111,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Allow body scrolling while offcanvas is open</td>
+        <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>
@@ -101,7 +121,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of offcanvas component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of offcanvas component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx
index 63a205df..29c8479a 100644
--- a/packages/docs/content/api/COffcanvasBody.api.mdx
+++ b/packages/docs/content/api/COffcanvasBody.api.mdx
@@ -15,13 +15,15 @@ import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBod
       </tr>
     </thead>
     <tbody>
-      <tr id="coffcanvasbody-className">
-        <td className="text-primary fw-semibold">className<a href="#coffcanvasbody-className" aria-label="COffcanvasBody className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx
index 5ca4bdd5..c896e1b1 100644
--- a/packages/docs/content/api/COffcanvasHeader.api.mdx
+++ b/packages/docs/content/api/COffcanvasHeader.api.mdx
@@ -15,13 +15,15 @@ import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasH
       </tr>
     </thead>
     <tbody>
-      <tr id="coffcanvasheader-className">
-        <td className="text-primary fw-semibold">className<a href="#coffcanvasheader-className" aria-label="COffcanvasHeader className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx
index 5ff8759d..b22e4b6c 100644
--- a/packages/docs/content/api/COffcanvasTitle.api.mdx
+++ b/packages/docs/content/api/COffcanvasTitle.api.mdx
@@ -21,15 +21,19 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#coffcanvastitle-className" aria-label="COffcanvasTitle className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx
index d1870dac..d969c7f0 100644
--- a/packages/docs/content/api/CPagination.api.mdx
+++ b/packages/docs/content/api/CPagination.api.mdx
@@ -21,15 +21,19 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'
         <td><code>{`"start"`}</code>, <code>{`"center"`}</code>, <code>{`"end"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the alignment of pagination components.</td>
+        <td colSpan="3">
+          <p>Set the alignment of pagination components.</p>
+        </td>
       </tr>
-      <tr id="cpagination-className">
-        <td className="text-primary fw-semibold">className<a href="#cpagination-className" aria-label="CPagination className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small or large.</td>
+        <td colSpan="3">
+          <p>Size the component small or large.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx
index b8573635..71479d0a 100644
--- a/packages/docs/content/api/CPaginationItem.api.mdx
+++ b/packages/docs/content/api/CPaginationItem.api.mdx
@@ -21,7 +21,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
         <td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass\<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent\<any>)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx
index 7247c5cc..83565b12 100644
--- a/packages/docs/content/api/CPlaceholder.api.mdx
+++ b/packages/docs/content/api/CPlaceholder.api.mdx
@@ -21,7 +21,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <td><code>{`"glow"`}</code>, <code>{`"wave"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set animation type to better convey the perception of something being actively loaded.</td>
+        <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>
@@ -29,15 +31,19 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cplaceholder-className" aria-label="CPlaceholder className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -53,7 +61,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns on large devices (\<1200px).</td>
+        <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>
@@ -61,7 +71,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns on medium devices (\<992px).</td>
+        <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>
@@ -69,7 +81,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <td><code>{`"xs"`}</code>, <code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component extra small, small, or large.</td>
+        <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>
@@ -77,7 +91,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns on small devices (\<768px).</td>
+        <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>
@@ -85,7 +101,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns on X-Large devices (\<1400px).</td>
+        <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>
@@ -93,7 +111,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns on extra small devices (\<576px).</td>
+        <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>
@@ -101,7 +121,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns on XX-Large devices (≥1400px).</td>
+        <td colSpan="3">
+          <p>The number of columns on XX-Large devices (≥1400px).</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx
index 784e2a0d..752bc171 100644
--- a/packages/docs/content/api/CPopover.api.mdx
+++ b/packages/docs/content/api/CPopover.api.mdx
@@ -21,15 +21,19 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Apply a CSS fade transition to the popover.</td>
+        <td colSpan="3">
+          <p>Apply a CSS fade transition to the popover.</p>
+        </td>
       </tr>
-      <tr id="cpopover-className">
-        <td className="text-primary fw-semibold">className<a href="#cpopover-className" aria-label="CPopover className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</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>
@@ -37,7 +41,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</td>
+        <td colSpan="3">
+          <p>Appends the react popover 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="cpopover-content">
         <td className="text-primary fw-semibold">content<a href="#cpopover-content" aria-label="CPopover content permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Content node for your component.</td>
+        <td colSpan="3">
+          <p>Content node for your component.</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>
@@ -53,15 +61,19 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`number`}</code>, <code>{`{ show: number; hide: number; }`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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: <code>{`{ 'show': 500, 'hide': 100 }`}</code>.</td>
+        <td colSpan="3">
+          <p>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: <code>{`{ 'show': 500, 'hide': 100 }`}</code>.</p>
+        </td>
       </tr>
-      <tr id="cpopover-fallbackPlacements">
-        <td className="text-primary fw-semibold">fallbackPlacements<a href="#cpopover-fallbackPlacements" aria-label="CPopover fallbackPlacements permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+      <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>{`Placements`}</code>, <code>{`Placements[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td>
+        <td colSpan="3">
+          <p>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</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>
@@ -69,23 +81,29 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`[number, number]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Offset of the popover relative to its target.</td>
+        <td colSpan="3">
+          <p>Offset of the popover relative to its target.</p>
+        </td>
       </tr>
-      <tr id="cpopover-onHide">
-        <td className="text-primary fw-semibold">onHide<a href="#cpopover-onHide" aria-label="CPopover onHide permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
       </tr>
-      <tr id="cpopover-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#cpopover-onShow" aria-label="CPopover onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</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>
@@ -93,7 +111,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`"auto"`}</code>, <code>{`"top"`}</code>, <code>{`"bottom"`}</code>, <code>{`"right"`}</code>, <code>{`"left"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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.</td>
+        <td colSpan="3">
+          <p>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.</p>
+        </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>
@@ -101,7 +121,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Title node for your component.</td>
+        <td colSpan="3">
+          <p>Title node for your component.</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>
@@ -109,7 +131,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td>
+        <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="cpopover-visible">
         <td className="text-primary fw-semibold">visible<a href="#cpopover-visible" aria-label="CPopover visible permalink" className="anchor-link after">#</a></td>
@@ -117,7 +141,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of popover component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of popover component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx
index efd6a125..3012a109 100644
--- a/packages/docs/content/api/CProgress.api.mdx
+++ b/packages/docs/content/api/CProgress.api.mdx
@@ -21,15 +21,19 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Use to animate the stripes right to left via CSS3 animations.</td>
+        <td colSpan="3">
+          <p>Use to animate the stripes right to left via CSS3 animations.</p>
+        </td>
       </tr>
-      <tr id="cprogress-className">
-        <td className="text-primary fw-semibold">className<a href="#cprogress-className" aria-label="CProgress className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -45,15 +51,19 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets the height of the component. If you set that value the inner <code>{`\<CProgressBar>`}</code> will automatically resize accordingly.</td>
+        <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-progressBarClassName">
-        <td className="text-primary fw-semibold">progressBarClassName<a href="#cprogress-progressBarClassName" aria-label="CProgress progressBarClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the \<CProgressBar/> component.</td>
+        <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>
@@ -61,7 +71,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Makes progress bar thinner.</td>
+        <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>
@@ -69,7 +81,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The percent to progress the ProgressBar (out of 100).</td>
+        <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>
@@ -77,7 +91,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         <td><code>{`"striped"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the progress bar variant to optional striped.</td>
+        <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>
@@ -85,7 +101,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Change the default color to white.</td>
+        <td colSpan="3">
+          <p>Change the default color to white.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx
index 1e21b9c7..8a5e99f7 100644
--- a/packages/docs/content/api/CProgressBar.api.mdx
+++ b/packages/docs/content/api/CProgressBar.api.mdx
@@ -21,15 +21,19 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Use to animate the stripes right to left via CSS3 animations.</td>
+        <td colSpan="3">
+          <p>Use to animate the stripes right to left via CSS3 animations.</p>
+        </td>
       </tr>
-      <tr id="cprogressbar-className">
-        <td className="text-primary fw-semibold">className<a href="#cprogressbar-className" aria-label="CProgressBar className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -45,7 +51,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The percent to progress the ProgressBar.</td>
+        <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>
@@ -53,7 +61,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         <td><code>{`"striped"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the progress bar variant to optional striped.</td>
+        <td colSpan="3">
+          <p>Set the progress bar variant to optional striped.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx
index 19f2beef..81f146f0 100644
--- a/packages/docs/content/api/CProgressStacked.api.mdx
+++ b/packages/docs/content/api/CProgressStacked.api.mdx
@@ -15,13 +15,15 @@ import CProgressStacked from '@coreui/react/src/components/progress/CProgressSta
       </tr>
     </thead>
     <tbody>
-      <tr id="cprogressstacked-className">
-        <td className="text-primary fw-semibold">className<a href="#cprogressstacked-className" aria-label="CProgressStacked className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx
index f2e0f907..46a6b5b6 100644
--- a/packages/docs/content/api/CRow.api.mdx
+++ b/packages/docs/content/api/CRow.api.mdx
@@ -15,13 +15,15 @@ import CRow from '@coreui/react/src/components/grid/CRow'
       </tr>
     </thead>
     <tbody>
-      <tr id="crow-className">
-        <td className="text-primary fw-semibold">className<a href="#crow-className" aria-label="CRow className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns/offset/order on large devices (\<1200px).</td>
+        <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>
@@ -37,7 +41,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns/offset/order on medium devices (\<992px).</td>
+        <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>
@@ -45,7 +51,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns/offset/order on small devices (\<768px).</td>
+        <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>
@@ -53,7 +61,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns/offset/order on X-Large devices (\<1400px).</td>
+        <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>
@@ -61,7 +71,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns/offset/order on extra small devices (\<576px).</td>
+        <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>
@@ -69,7 +81,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The number of columns/offset/order on XX-Large devices (≥1400px).</td>
+        <td colSpan="3">
+          <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx
index e251864c..a0ae96ee 100644
--- a/packages/docs/content/api/CSidebar.api.mdx
+++ b/packages/docs/content/api/CSidebar.api.mdx
@@ -15,21 +15,25 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
       </tr>
     </thead>
     <tbody>
-      <tr id="csidebar-className">
-        <td className="text-primary fw-semibold">className<a href="#csidebar-className" aria-label="CSidebar className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
-      <tr id="csidebar-colorScheme">
-        <td className="text-primary fw-semibold">colorScheme<a href="#csidebar-colorScheme" aria-label="CSidebar colorScheme permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`'dark'`}</code>, <code>{`'light'`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets if the color of text should be colored for a light or dark dark background.</td>
+        <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>
@@ -37,31 +41,39 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Make sidebar narrow.</td>
+        <td colSpan="3">
+          <p>Make sidebar narrow.</p>
+        </td>
       </tr>
-      <tr id="csidebar-onHide">
-        <td className="text-primary fw-semibold">onHide<a href="#csidebar-onHide" aria-label="CSidebar onHide permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
       </tr>
-      <tr id="csidebar-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#csidebar-onShow" aria-label="CSidebar onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be shown.</p>
+        </td>
       </tr>
-      <tr id="csidebar-onVisibleChange">
-        <td className="text-primary fw-semibold">onVisibleChange<a href="#csidebar-onVisibleChange" aria-label="CSidebar onVisibleChange permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(visible: boolean) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Event emitted after visibility of component changed.</td>
+        <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>
@@ -69,7 +81,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set sidebar to overlaid variant.</td>
+        <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>
@@ -77,7 +91,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         <td><code>{`'start'`}</code>, <code>{`'end'`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Components placement, there’s no default placement.</td>
+        <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>
@@ -85,7 +101,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         <td><code>{`"fixed"`}</code>, <code>{`"sticky"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Place sidebar in non-static positions.</td>
+        <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>
@@ -93,7 +111,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code>, <code>{`"xl"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small, large, or extra large.</td>
+        <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>
@@ -101,7 +121,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Expand narrowed sidebar on hover.</td>
+        <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>
@@ -109,7 +131,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of sidebar component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of sidebar component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx
index fc56e0d0..3494b5d8 100644
--- a/packages/docs/content/api/CSidebarBrand.api.mdx
+++ b/packages/docs/content/api/CSidebarBrand.api.mdx
@@ -21,15 +21,19 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#csidebarbrand-className" aria-label="CSidebarBrand className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx
index ac4cc6b1..745c2f6c 100644
--- a/packages/docs/content/api/CSidebarFooter.api.mdx
+++ b/packages/docs/content/api/CSidebarFooter.api.mdx
@@ -15,13 +15,15 @@ import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter'
       </tr>
     </thead>
     <tbody>
-      <tr id="csidebarfooter-className">
-        <td className="text-primary fw-semibold">className<a href="#csidebarfooter-className" aria-label="CSidebarFooter className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx
index fae56074..4379c56f 100644
--- a/packages/docs/content/api/CSidebarHeader.api.mdx
+++ b/packages/docs/content/api/CSidebarHeader.api.mdx
@@ -15,13 +15,15 @@ import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader'
       </tr>
     </thead>
     <tbody>
-      <tr id="csidebarheader-className">
-        <td className="text-primary fw-semibold">className<a href="#csidebarheader-className" aria-label="CSidebarHeader className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx
index 099b5949..7bcb30df 100644
--- a/packages/docs/content/api/CSidebarNav.api.mdx
+++ b/packages/docs/content/api/CSidebarNav.api.mdx
@@ -21,15 +21,19 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#csidebarnav-className" aria-label="CSidebarNav className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx
index f35f392e..59755018 100644
--- a/packages/docs/content/api/CSidebarToggler.api.mdx
+++ b/packages/docs/content/api/CSidebarToggler.api.mdx
@@ -15,13 +15,15 @@ import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggle
       </tr>
     </thead>
     <tbody>
-      <tr id="csidebartoggler-className">
-        <td className="text-primary fw-semibold">className<a href="#csidebartoggler-className" aria-label="CSidebarToggler className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx
index 48fc06f8..159c58a9 100644
--- a/packages/docs/content/api/CSpinner.api.mdx
+++ b/packages/docs/content/api/CSpinner.api.mdx
@@ -21,15 +21,19 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         <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">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#cspinner-className" aria-label="CSpinner className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -45,7 +51,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         <td><code>{`"sm"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small.</td>
+        <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>
@@ -53,15 +61,19 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         <td><code>{`"border"`}</code>, <code>{`"grow"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the button variant to an outlined button or a ghost button.</td>
+        <td colSpan="3">
+          <p>Set the button variant to an outlined button or a ghost button.</p>
+        </td>
       </tr>
-      <tr id="cspinner-visuallyHiddenLabel">
-        <td className="text-primary fw-semibold">visuallyHiddenLabel<a href="#cspinner-visuallyHiddenLabel" aria-label="CSpinner visuallyHiddenLabel permalink" className="anchor-link after">#</a></td>
+      <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">Set visually hidden label for accessibility purposes.</td>
+        <td colSpan="3">
+          <p>Set visually hidden label for accessibility purposes.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx
index 6ead7a6c..138639d0 100644
--- a/packages/docs/content/api/CTab.api.mdx
+++ b/packages/docs/content/api/CTab.api.mdx
@@ -15,13 +15,15 @@ import CTab from '@coreui/react/src/components/tabs/CTab'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctab-className">
-        <td className="text-primary fw-semibold">className<a href="#ctab-className" aria-label="CTab className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CTab from '@coreui/react/src/components/tabs/CTab'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <td colSpan="3">
+          <p>Toggle the disabled state for the component.</p>
+        </td>
       </tr>
-      <tr id="ctab-itemKey">
-        <td className="text-primary fw-semibold">itemKey<a href="#ctab-itemKey" aria-label="CTab itemKey permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code>, <code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Item key.</td>
+        <td colSpan="3">
+          <p>Item key.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx
index 76755621..467a7d97 100644
--- a/packages/docs/content/api/CTabContent.api.mdx
+++ b/packages/docs/content/api/CTabContent.api.mdx
@@ -15,13 +15,15 @@ import CTabContent from '@coreui/react/src/components/tabs/CTabContent'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctabcontent-className">
-        <td className="text-primary fw-semibold">className<a href="#ctabcontent-className" aria-label="CTabContent className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx
index 59fe0074..2be37d8c 100644
--- a/packages/docs/content/api/CTabList.api.mdx
+++ b/packages/docs/content/api/CTabList.api.mdx
@@ -15,13 +15,15 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctablist-className">
-        <td className="text-primary fw-semibold">className<a href="#ctablist-className" aria-label="CTabList className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
         <td><code>{`"fill"`}</code>, <code>{`"justified"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specify a layout type for component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
         <td><code>{`"pills"`}</code>, <code>{`"tabs"`}</code>, <code>{`"underline"`}</code>, <code>{`"underline-border"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the nav variant to tabs or pills.</td>
+        <td colSpan="3">
+          <p>Set the nav variant to tabs or pills.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx
index 96326f15..197dc805 100644
--- a/packages/docs/content/api/CTabPane.api.mdx
+++ b/packages/docs/content/api/CTabPane.api.mdx
@@ -15,29 +15,35 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctabpane-className">
-        <td className="text-primary fw-semibold">className<a href="#ctabpane-className" aria-label="CTabPane className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
-      <tr id="ctabpane-onHide">
-        <td className="text-primary fw-semibold">onHide<a href="#ctabpane-onHide" aria-label="CTabPane onHide permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
       </tr>
-      <tr id="ctabpane-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#ctabpane-onShow" aria-label="CTabPane onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <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>
@@ -45,7 +51,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Enable fade in and fade out transition.</td>
+        <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>
@@ -53,7 +61,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx
index db4df643..3b6f9bd6 100644
--- a/packages/docs/content/api/CTabPanel.api.mdx
+++ b/packages/docs/content/api/CTabPanel.api.mdx
@@ -15,37 +15,45 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctabpanel-className">
-        <td className="text-primary fw-semibold">className<a href="#ctabpanel-className" aria-label="CTabPanel className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
-      <tr id="ctabpanel-itemKey">
-        <td className="text-primary fw-semibold">itemKey<a href="#ctabpanel-itemKey" aria-label="CTabPanel itemKey permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code>, <code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Item key.</td>
+        <td colSpan="3">
+          <p>Item key.</p>
+        </td>
       </tr>
-      <tr id="ctabpanel-onHide">
-        <td className="text-primary fw-semibold">onHide<a href="#ctabpanel-onHide" aria-label="CTabPanel onHide permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
       </tr>
-      <tr id="ctabpanel-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#ctabpanel-onShow" aria-label="CTabPanel onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <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>
@@ -53,7 +61,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Enable fade in and fade out transition.</td>
+        <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>
@@ -61,7 +71,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx
index b1f101b4..75db1ece 100644
--- a/packages/docs/content/api/CTable.api.mdx
+++ b/packages/docs/content/api/CTable.api.mdx
@@ -21,15 +21,19 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the vertical aligment.</td>
+        <td colSpan="3">
+          <p>Set the vertical aligment.</p>
+        </td>
       </tr>
-      <tr id="ctable-borderColor">
-        <td className="text-primary fw-semibold">borderColor<a href="#ctable-borderColor" aria-label="CTable borderColor permalink" className="anchor-link after">#</a></td>
+      <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>undefined</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">Sets the border color of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -37,7 +41,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add borders on all sides of the table and cells.</td>
+        <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>
@@ -45,7 +51,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Remove borders on all sides of the table and cells.</td>
+        <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>
@@ -53,23 +61,29 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Put the caption on the top if you set <code>{`caption="top"`}</code> of the table or set the text of the table caption.</td>
+        <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-captionTop">
-        <td className="text-primary fw-semibold">captionTop<a href="#ctable-captionTop" aria-label="CTable captionTop permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the text of the table caption and the caption on the top of the table.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#ctable-className" aria-label="CTable className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -77,7 +91,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -85,7 +101,18 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`(string | Column)[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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. <code>{`_props: { scope: 'col', className: 'custom-class' }`}</code>,<br/>- _style (Object) - adds styles to the column header (useful for defining widths)</td>
+        <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>
@@ -93,7 +120,13 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`(string | FooterItem)[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Array of objects or strings, where each element represents one cell in the table footer.<br/><br/>Example items:<br/><code>{`['FooterCell', 'FooterCell', 'FooterCell']`}</code><br/>or<br/><code>{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}</code></td>
+        <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>
@@ -101,7 +134,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Enable a hover state on table rows within a <code>{`\<CTableBody>`}</code>.</td>
+        <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>
@@ -109,7 +144,11 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`Item[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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/><code>{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}</code></td>
+        <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>
@@ -117,7 +156,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <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">Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</td>
+        <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>
@@ -125,7 +166,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Make table more compact by cutting all cell <code>{`padding`}</code> in half.</td>
+        <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>
@@ -133,31 +176,39 @@ import CTable from '@coreui/react/src/components/table/CTable'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add zebra-striping to any table row within the <code>{`\<CTableBody>`}</code>.</td>
+        <td colSpan="3">
+          <p>Add zebra-striping to any table row within the <code>{`<CTableBody>`}</code>.</p>
+        </td>
       </tr>
-      <tr id="ctable-stripedColumns">
-        <td className="text-primary fw-semibold">stripedColumns<a href="#ctable-stripedColumns" aria-label="CTable stripedColumns permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Add zebra-striping to any table column.</td>
+        <td colSpan="3">
+          <p>Add zebra-striping to any table column.</p>
+        </td>
       </tr>
-      <tr id="ctable-tableFootProps">
-        <td className="text-primary fw-semibold">tableFootProps<a href="#ctable-tableFootProps" aria-label="CTable tableFootProps permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+      <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>undefined</td>
         <td><code>{`CTableFootProps`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Properties that will be passed to the table footer component.</td>
+        <td colSpan="3">
+          <p>Properties that will be passed to the table footer component.</p>
+        </td>
       </tr>
-      <tr id="ctable-tableHeadProps">
-        <td className="text-primary fw-semibold">tableHeadProps<a href="#ctable-tableHeadProps" aria-label="CTable tableHeadProps permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
+      <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>undefined</td>
         <td><code>{`CTableHeadProps`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Properties that will be passed to the table head component.</td>
+        <td colSpan="3">
+          <p>Properties that will be passed to the table head component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx
index 8bfc35ea..c056b40d 100644
--- a/packages/docs/content/api/CTableBody.api.mdx
+++ b/packages/docs/content/api/CTableBody.api.mdx
@@ -15,13 +15,15 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctablebody-className">
-        <td className="text-primary fw-semibold">className<a href="#ctablebody-className" aria-label="CTableBody className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx
index b98bd598..73372f90 100644
--- a/packages/docs/content/api/CTableCaption.api.mdx
+++ b/packages/docs/content/api/CTableCaption.api.mdx
@@ -5,16 +5,6 @@ import { CTableCaption } from '@coreui/react'
 import CTableCaption from '@coreui/react/src/components/table/CTableCaption'
 ```
 
-<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>
     </tbody>
   </table>
 </div>
diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx
index 1c8c79ac..7dcc4370 100644
--- a/packages/docs/content/api/CTableDataCell.api.mdx
+++ b/packages/docs/content/api/CTableDataCell.api.mdx
@@ -21,7 +21,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Highlight a table row or cell.</td>
+        <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>
@@ -29,15 +31,19 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the vertical aligment.</td>
+        <td colSpan="3">
+          <p>Set the vertical aligment.</p>
+        </td>
       </tr>
-      <tr id="ctabledatacell-className">
-        <td className="text-primary fw-semibold">className<a href="#ctabledatacell-className" aria-label="CTableDataCell className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx
index 87e1e2c8..02c7a033 100644
--- a/packages/docs/content/api/CTableFoot.api.mdx
+++ b/packages/docs/content/api/CTableFoot.api.mdx
@@ -15,13 +15,15 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctablefoot-className">
-        <td className="text-primary fw-semibold">className<a href="#ctablefoot-className" aria-label="CTableFoot className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx
index 00b9bca3..b1473088 100644
--- a/packages/docs/content/api/CTableHead.api.mdx
+++ b/packages/docs/content/api/CTableHead.api.mdx
@@ -15,13 +15,15 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctablehead-className">
-        <td className="text-primary fw-semibold">className<a href="#ctablehead-className" aria-label="CTableHead className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx
index 1e1c963e..ec1078ab 100644
--- a/packages/docs/content/api/CTableHeaderCell.api.mdx
+++ b/packages/docs/content/api/CTableHeaderCell.api.mdx
@@ -15,13 +15,15 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel
       </tr>
     </thead>
     <tbody>
-      <tr id="ctableheadercell-className">
-        <td className="text-primary fw-semibold">className<a href="#ctableheadercell-className" aria-label="CTableHeaderCell className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
index ff57b8c7..34bfbfeb 100644
--- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
+++ b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
@@ -21,7 +21,9 @@ import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableRe
         <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">Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</td>
+        <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>
diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx
index c45094b8..21c4cc31 100644
--- a/packages/docs/content/api/CTableRow.api.mdx
+++ b/packages/docs/content/api/CTableRow.api.mdx
@@ -21,7 +21,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Highlight a table row or cell..</td>
+        <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>
@@ -29,15 +31,19 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the vertical aligment.</td>
+        <td colSpan="3">
+          <p>Set the vertical aligment.</p>
+        </td>
       </tr>
-      <tr id="ctablerow-className">
-        <td className="text-primary fw-semibold">className<a href="#ctablerow-className" aria-label="CTableRow className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <td colSpan="3">
+          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx
index 50d56cae..7a3a0d19 100644
--- a/packages/docs/content/api/CTabs.api.mdx
+++ b/packages/docs/content/api/CTabs.api.mdx
@@ -15,29 +15,35 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctabs-activeItemKey">
-        <td className="text-primary fw-semibold">activeItemKey<a href="#ctabs-activeItemKey" aria-label="CTabs activeItemKey permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code>, <code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The active item key.</td>
+        <td colSpan="3">
+          <p>The active item key.</p>
+        </td>
       </tr>
-      <tr id="ctabs-className">
-        <td className="text-primary fw-semibold">className<a href="#ctabs-className" aria-label="CTabs className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
-      <tr id="ctabs-onChange">
-        <td className="text-primary fw-semibold">onChange<a href="#ctabs-onChange" aria-label="CTabs onChange permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(value: string | number) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The callback is fired when the active tab changes.</td>
+        <td colSpan="3">
+          <p>The callback is fired when the active tab changes.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx
index 4c623448..e05ba87d 100644
--- a/packages/docs/content/api/CToast.api.mdx
+++ b/packages/docs/content/api/CToast.api.mdx
@@ -21,7 +21,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Apply a CSS fade transition to the toast.</td>
+        <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>
@@ -29,15 +31,19 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Auto hide the toast.</td>
+        <td colSpan="3">
+          <p>Auto hide the toast.</p>
+        </td>
       </tr>
-      <tr id="ctoast-className">
-        <td className="text-primary fw-semibold">className<a href="#ctoast-className" aria-label="CToast className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -53,23 +61,29 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         <td><code>{`number`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Delay hiding the toast (ms).</td>
+        <td colSpan="3">
+          <p>Delay hiding the toast (ms).</p>
+        </td>
       </tr>
-      <tr id="ctoast-onClose">
-        <td className="text-primary fw-semibold">onClose<a href="#ctoast-onClose" aria-label="CToast onClose permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(index: number) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be closed.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be closed.</p>
+        </td>
       </tr>
-      <tr id="ctoast-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#ctoast-onShow" aria-label="CToast onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`(index: number) => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <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>
@@ -77,7 +91,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx
index b5c2004f..467c581a 100644
--- a/packages/docs/content/api/CToastBody.api.mdx
+++ b/packages/docs/content/api/CToastBody.api.mdx
@@ -15,13 +15,15 @@ import CToastBody from '@coreui/react/src/components/toast/CToastBody'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctoastbody-className">
-        <td className="text-primary fw-semibold">className<a href="#ctoastbody-className" aria-label="CToastBody className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx
index f08ce983..6b865f4b 100644
--- a/packages/docs/content/api/CToastClose.api.mdx
+++ b/packages/docs/content/api/CToastClose.api.mdx
@@ -21,7 +21,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the active state for the component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass\<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent\<any>)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+        <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-className">
-        <td className="text-primary fw-semibold">className<a href="#ctoastclose-className" aria-label="CToastClose className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Invert the default color.</td>
+        <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>
@@ -53,7 +61,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the disabled state for the component.</td>
+        <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>
@@ -61,7 +71,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">The href attribute specifies the URL of the page the link goes to.</td>
+        <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>
@@ -69,7 +81,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <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">Select the shape of the component.</td>
+        <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>
@@ -77,7 +91,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <td><code>{`"sm"`}</code>, <code>{`"lg"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Size the component small or large.</td>
+        <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>
@@ -85,7 +101,10 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <td><code>{`"button"`}</code>, <code>{`"submit"`}</code>, <code>{`"reset"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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.</td>
+        <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>
@@ -93,15 +112,19 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         <td><code>{`"outline"`}</code>, <code>{`"ghost"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set the button variant to an outlined button or a ghost button.</td>
+        <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-success">Deprecated undefined</span></td>
+        <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Change the default color to white.</td>
+        <td colSpan="3">
+          <p>Change the default color to white.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CToastHeader.api.mdx b/packages/docs/content/api/CToastHeader.api.mdx
index 2d5725c5..c0c261fc 100644
--- a/packages/docs/content/api/CToastHeader.api.mdx
+++ b/packages/docs/content/api/CToastHeader.api.mdx
@@ -15,21 +15,25 @@ import CToastHeader from '@coreui/react/src/components/toast/CToastHeader'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctoastheader-className">
-        <td className="text-primary fw-semibold">className<a href="#ctoastheader-className" aria-label="CToastHeader className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the base component.</p>
+        </td>
       </tr>
-      <tr id="ctoastheader-closeButton">
-        <td className="text-primary fw-semibold">closeButton<a href="#ctoastheader-closeButton" aria-label="CToastHeader closeButton permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Automatically add a close button to the header.</td>
+        <td colSpan="3">
+          <p>Automatically add a close button to the header.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CToaster.api.mdx b/packages/docs/content/api/CToaster.api.mdx
index a0dde001..3a86393c 100644
--- a/packages/docs/content/api/CToaster.api.mdx
+++ b/packages/docs/content/api/CToaster.api.mdx
@@ -15,13 +15,15 @@ import CToaster from '@coreui/react/src/components/toast/CToaster'
       </tr>
     </thead>
     <tbody>
-      <tr id="ctoaster-className">
-        <td className="text-primary fw-semibold">className<a href="#ctoaster-className" aria-label="CToaster className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CToaster from '@coreui/react/src/components/toast/CToaster'
         <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">Describes the placement of your component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CToaster from '@coreui/react/src/components/toast/CToaster'
         <td><code>{`ReactElement`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Adds new <code>{`CToast`}</code> to <code>{`CToaster`}</code>.</td>
+        <td colSpan="3">
+          <p>Adds new <code>{`CToast`}</code> to <code>{`CToaster`}</code>.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx
index 3c644692..335bf4d1 100644
--- a/packages/docs/content/api/CTooltip.api.mdx
+++ b/packages/docs/content/api/CTooltip.api.mdx
@@ -21,15 +21,19 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Apply a CSS fade transition to the tooltip.</td>
+        <td colSpan="3">
+          <p>Apply a CSS fade transition to the tooltip.</p>
+        </td>
       </tr>
-      <tr id="ctooltip-className">
-        <td className="text-primary fw-semibold">className<a href="#ctooltip-className" aria-label="CTooltip className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the component.</td>
+        <td colSpan="3">
+          <p>A string of all className you want applied to the component.</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>
@@ -37,7 +41,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
         <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</td>
+        <td colSpan="3">
+          <p>Appends the react tooltip 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="ctooltip-content">
         <td className="text-primary fw-semibold">content<a href="#ctooltip-content" aria-label="CTooltip content permalink" className="anchor-link after">#</a></td>
@@ -45,7 +51,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Content node for your component.</td>
+        <td colSpan="3">
+          <p>Content node for your component.</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>
@@ -53,15 +61,19 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
         <td><code>{`number`}</code>, <code>{`{ show: number; hide: number; }`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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: <code>{`{ 'show': 500, 'hide': 100 }`}</code>.</td>
+        <td colSpan="3">
+          <p>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: <code>{`{ 'show': 500, 'hide': 100 }`}</code>.</p>
+        </td>
       </tr>
-      <tr id="ctooltip-fallbackPlacements">
-        <td className="text-primary fw-semibold">fallbackPlacements<a href="#ctooltip-fallbackPlacements" aria-label="CTooltip fallbackPlacements permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
+      <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>{`Placements`}</code>, <code>{`Placements[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</td>
+        <td colSpan="3">
+          <p>Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.</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>
@@ -69,23 +81,29 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
         <td><code>{`[number, number]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Offset of the tooltip relative to its target.</td>
+        <td colSpan="3">
+          <p>Offset of the tooltip relative to its target.</p>
+        </td>
       </tr>
-      <tr id="ctooltip-onHide">
-        <td className="text-primary fw-semibold">onHide<a href="#ctooltip-onHide" aria-label="CTooltip onHide permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be hidden.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be hidden.</p>
+        </td>
       </tr>
-      <tr id="ctooltip-onShow">
-        <td className="text-primary fw-semibold">onShow<a href="#ctooltip-onShow" aria-label="CTooltip onShow permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`() => void`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Callback fired when the component requests to be shown.</td>
+        <td colSpan="3">
+          <p>Callback fired when the component requests to be 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>
@@ -93,7 +111,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
         <td><code>{`"auto"`}</code>, <code>{`"top"`}</code>, <code>{`"bottom"`}</code>, <code>{`"right"`}</code>, <code>{`"left"`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">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.</td>
+        <td colSpan="3">
+          <p>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.</p>
+        </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>
@@ -101,7 +121,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
         <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</td>
+        <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="ctooltip-visible">
         <td className="text-primary fw-semibold">visible<a href="#ctooltip-visible" aria-label="CTooltip visible permalink" className="anchor-link after">#</a></td>
@@ -109,7 +131,9 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Toggle the visibility of tooltip component.</td>
+        <td colSpan="3">
+          <p>Toggle the visibility of tooltip component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CWidgetStatsA.api.mdx b/packages/docs/content/api/CWidgetStatsA.api.mdx
index 089edbea..f0eb8778 100644
--- a/packages/docs/content/api/CWidgetStatsA.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsA.api.mdx
@@ -21,7 +21,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Action node for your component.</td>
+        <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>
@@ -29,15 +31,19 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Chart node for your component.</td>
+        <td colSpan="3">
+          <p>Chart node for your component.</p>
+        </td>
       </tr>
-      <tr id="cwidgetstatsa-className">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsa-className" aria-label="CWidgetStatsA className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -53,7 +61,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Title node for your component.</td>
+        <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>
@@ -61,7 +71,9 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Value node for your component.</td>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CWidgetStatsB.api.mdx b/packages/docs/content/api/CWidgetStatsB.api.mdx
index 89134329..36e042e0 100644
--- a/packages/docs/content/api/CWidgetStatsB.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsB.api.mdx
@@ -15,13 +15,15 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
       </tr>
     </thead>
     <tbody>
-      <tr id="cwidgetcwidgetstatsb-className">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetcwidgetstatsb-className" aria-label="CWidgetCWidgetStatsB className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -37,7 +41,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Colors have been inverted from their default dark shade.</td>
+        <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>
@@ -45,7 +51,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
         <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">Sets the color context of the progress bar to one of CoreUI’s themed colors.</td>
+        <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>
@@ -53,7 +61,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Helper text for your component.</td>
+        <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>
@@ -61,7 +71,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Title node for your component.</td>
+        <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>
@@ -69,7 +81,9 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Value node for your component.</td>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CWidgetStatsC.api.mdx b/packages/docs/content/api/CWidgetStatsC.api.mdx
index a3e44a23..9485d07f 100644
--- a/packages/docs/content/api/CWidgetStatsC.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsC.api.mdx
@@ -15,13 +15,15 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
       </tr>
     </thead>
     <tbody>
-      <tr id="cwidgetstatscwidgetstatsc-className">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatscwidgetstatsc-className" aria-label="CWidgetStatsCWidgetStatsC className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -37,7 +41,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Icon node for your component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Colors have been inverted from their default dark shade.</td>
+        <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>
@@ -53,7 +61,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
         <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">Sets the color context of the progress bar to one of CoreUI’s themed colors.</td>
+        <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>
@@ -61,7 +71,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Title node for your component.</td>
+        <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>
@@ -69,7 +81,9 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Value node for your component.</td>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CWidgetStatsD.api.mdx b/packages/docs/content/api/CWidgetStatsD.api.mdx
index 93fd72d6..9875979b 100644
--- a/packages/docs/content/api/CWidgetStatsD.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsD.api.mdx
@@ -21,15 +21,19 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Chart node for your component.</td>
+        <td colSpan="3">
+          <p>Chart node for your component.</p>
+        </td>
       </tr>
-      <tr id="cwidgetstatsd-className">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsd-className" aria-label="CWidgetStatsD className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -45,7 +51,9 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Icon node for your component.</td>
+        <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>
@@ -53,7 +61,9 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
         <td><code>{`Value[]`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Values and titles for your component.</td>
+        <td colSpan="3">
+          <p>Values and titles for your component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CWidgetStatsE.api.mdx b/packages/docs/content/api/CWidgetStatsE.api.mdx
index e1831870..1af5918c 100644
--- a/packages/docs/content/api/CWidgetStatsE.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsE.api.mdx
@@ -21,15 +21,19 @@ import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Chart node for your component.</td>
+        <td colSpan="3">
+          <p>Chart node for your component.</p>
+        </td>
       </tr>
-      <tr id="cwidgetstatse-className">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatse-className" aria-label="CWidgetStatsE className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -37,7 +41,9 @@ import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Title node for your component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Value node for your component.</td>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CWidgetStatsF.api.mdx b/packages/docs/content/api/CWidgetStatsF.api.mdx
index cc63e104..b3076836 100644
--- a/packages/docs/content/api/CWidgetStatsF.api.mdx
+++ b/packages/docs/content/api/CWidgetStatsF.api.mdx
@@ -15,13 +15,15 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
       </tr>
     </thead>
     <tbody>
-      <tr id="cwidgetstatsf-className">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsf-className" aria-label="CWidgetStatsF className permalink" className="anchor-link after">#</a></td>
+      <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>undefined</td>
         <td><code>{`string`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">A string of all className you want applied to the base component.</td>
+        <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>
@@ -29,7 +31,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
         <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">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+        <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>
@@ -37,7 +41,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Footer node for your component.</td>
+        <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>
@@ -45,7 +51,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Icon node for your component.</td>
+        <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>
@@ -53,7 +61,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
         <td><code>{`boolean`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Set padding of your component.</td>
+        <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>
@@ -61,7 +71,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Title node for your component.</td>
+        <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>
@@ -69,7 +81,9 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
         <td><code>{`ReactNode`}</code></td>
       </tr>
       <tr>
-        <td colSpan="3">Value node for your component.</td>
+        <td colSpan="3">
+          <p>Value node for your component.</p>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/docs/content/api/CoreUIProvider.api.mdx b/packages/docs/content/api/CoreUIProvider.api.mdx
deleted file mode 100644
index 17f75a27..00000000
--- a/packages/docs/content/api/CoreUIProvider.api.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-
-```jsx
-import { CoreUIProvider } from '@coreui/src'
-// or
-import CoreUIProvider from '@coreuireact/src/api/coreuivider/CoreUIProvider'
-```
-
diff --git a/packages/docs/content/components/accordion/accessibility.mdx b/packages/docs/content/components/accordion/accessibility.mdx
index 03615822..8dd1f95b 100644
--- a/packages/docs/content/components/accordion/accessibility.mdx
+++ b/packages/docs/content/components/accordion/accessibility.mdx
@@ -9,13 +9,13 @@ route: /components/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
+### 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
+### ARIA Attributes
 
 CoreUI React Accordion incorporates essential ARIA attributes to communicate the state and relationships of accordion items to assistive technologies:
 
@@ -25,18 +25,18 @@ CoreUI React Accordion incorporates essential ARIA attributes to communicate the
   
 - **`id`**: Unique identifiers for both headers and panels establish clear relationships, ensuring that screen readers can accurately describe the accordion structure.
 
-## Focus Management
+### 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
+### 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
+### Keyboard Support
 
 The Accordion component supports comprehensive keyboard navigation out of the box:
 
diff --git a/packages/docs/content/components/accordion/examples/AccordionExample.tsx b/packages/docs/content/components/accordion/examples/AccordionExample.tsx
index cc6598d0..e46f34ef 100644
--- a/packages/docs/content/components/accordion/examples/AccordionExample.tsx
+++ b/packages/docs/content/components/accordion/examples/AccordionExample.tsx
@@ -5,7 +5,7 @@ export const AccordionExample = () => {
   return (
     <CAccordion activeItemKey={2}>
       <CAccordionItem itemKey={1}>
-        <CAccordionHeader>Accordion Item #1 TSX</CAccordionHeader>
+        <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.
diff --git a/packages/docs/content/components/accordion/index.mdx b/packages/docs/content/components/accordion/index.mdx
index 491ea4bf..6bacb217 100644
--- a/packages/docs/content/components/accordion/index.mdx
+++ b/packages/docs/content/components/accordion/index.mdx
@@ -2,41 +2,34 @@
 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
 ---
 
 ## How to use React Accordion component.
 
 Click the accordions below to expand/collapse the accordion content.
 
-import { AccordionExample } from './examples/AccordionExample.tsx'
-import AccordionExampleTS from '!!raw-loader!./examples/AccordionExample.tsx'
-
-<ExampleSnippet code={AccordionExampleTS} componentName="React Accordion">
-  <AccordionExample />
-</ExampleSnippet>
+<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.
 
-import { AccordionFlushExample } from './examples/AccordionFlushExample.tsx'
-import AccordionFlushExampleTS from '!!raw-loader!./examples/AccordionFlushExample.tsx'
-
-<ExampleSnippet code={AccordionFlushExampleTS} componentName="React Accordion">
-  <AccordionFlushExample />
-</ExampleSnippet>
+<ExampleSnippet component="AccordionFlushExample" componentName="React Accordion" />
 
 ### Always open
 
 Add `alwaysOpen` property to make react accordion items stay open when another item is opened.
 
-import { AccordionAlwaysOpenExample } from './examples/AccordionAlwaysOpenExample.tsx'
-import AccordionAlwaysOpenExampleTS from '!!raw-loader!./examples/AccordionAlwaysOpenExample.tsx'
+<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)
 
-<ExampleSnippet code={AccordionAlwaysOpenExampleTS} componentName="React Accordion">
-  <AccordionAlwaysOpenExample />
-</ExampleSnippet>
diff --git a/packages/docs/content/components/accordion/styling.mdx b/packages/docs/content/components/accordion/styling.mdx
index 5f48c98a..17dadcea 100644
--- a/packages/docs/content/components/accordion/styling.mdx
+++ b/packages/docs/content/components/accordion/styling.mdx
@@ -5,21 +5,6 @@ description: Learn how to customize the React Accordion component with CSS class
 route: /components/accordion/
 ---
 
-import CAccordion from '@coreui/react'
-
-### CSS class names
-
-React Accordion comes with built-in class names that make styling super simple. Here’s a quick rundown of what you can use:
-
-<ClassNamesDocs
-  files={[
-    'components/accordion/CAccordion.tsx',
-    'components/accordion/CAccordionBody.tsx',
-    'components/accordion/CAccordionItem.tsx',
-    'components/accordion/CAccordionHeader.tsx',
-  ]}
-/>
-
 ### 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.
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/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..92ce7cbb
--- /dev/null
+++ b/packages/docs/content/components/alert/index.mdx
@@ -0,0 +1,75 @@
+---
+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="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.
+
+<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/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..ee4ffeb4
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarImage.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+import Avatar1 from '@assets/images/avatars/1.jpg'
+import Avatar2 from '@assets/images/avatars/2.jpg'
+import Avatar3 from '@assets/images/avatars/3.jpg'
+
+export const AvatarImage = () => {
+  return (
+    <>
+      <CAvatar src={Avatar1} />
+      <CAvatar src={Avatar2} />
+      <CAvatar src={Avatar3} />
+    </>
+  )
+}
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..b4a2342a
--- /dev/null
+++ b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { CAvatar } from '@coreui/react'
+
+import Avatar1 from '@assets/images/avatars/1.jpg'
+
+export const AvatarWithStatus = () => {
+  return (
+    <>
+      <CAvatar src={Avatar1} 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/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/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/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..7fda6db8
--- /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="Conveying meaning to assistive technologies">
+  For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper <code>role</code> attribute has to be provided. For button groups, this should be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.
+  
+  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 <code>aria-label</code>, but options such as <code>aria-labelledby</code> 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/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/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/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..78144289
--- /dev/null
+++ b/packages/docs/content/components/button/index.mdx
@@ -0,0 +1,109 @@
+---
+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="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.
+
+<ExampleSnippet component="ButtonComponentsExample" componentName="React Button" />
+
+## Outline buttons
+
+If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors.
+
+<ExampleSnippet component="ButtonOutlineExample" componentName="React Button" />
+
+## Ghost buttons
+
+If you need a ghost variant of react button, set `variant="ghost"` prop to remove all background colors.
+
+<ExampleSnippet component="ButtonGhostExample" componentName="React Button" />
+
+<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.
+
+<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..b158e7a3
--- /dev/null
+++ b/packages/docs/content/components/callout/index.mdx
@@ -0,0 +1,26 @@
+---
+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="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>
+
+## 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/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..452cfcb5
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardExample = () => {
+  return (
+    <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>
+  )
+}
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..198d11b8
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid2Example.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { CCard, CCardBody, CCardFooter, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardGrid2Example = () => {
+  return (
+    <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>
+  )
+}
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..0eb158f1
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid3Example.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardGrid3Example = () => {
+  return (
+    <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>
+  )
+}
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..6f670814
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGrid4Example.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardImage,
+  CCardText,
+  CCardTitle,
+  CCol,
+  CRow,
+} from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardGrid4Example = () => {
+  return (
+    <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>
+  )
+}
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..3b8c512e
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGridExample.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardImage,
+  CCardText,
+  CCardTitle,
+  CCol,
+  CRow,
+} from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardGridExample = () => {
+  return (
+    <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>
+  )
+}
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..64fa4a11
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGroups2Example.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardGroup,
+  CCardImage,
+  CCardText,
+  CCardTitle,
+} from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardGroups2Example = () => {
+  return (
+    <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>
+  )
+}
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..092b5069
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardGroupsExample.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardGroupsExample = () => {
+  return (
+    <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>
+  )
+}
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..dd6ad58a
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardImageCapsExample = () => {
+  return (
+    <>
+      <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>
+    </>
+  )
+}
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..627ca881
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
+
+import React400Img from '@assets/images/react400.jpg'
+
+export const CardImageHorizontalExample = () => {
+  return (
+    <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>
+  )
+}
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..9b56e67b
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardImageOverlaysExample = () => {
+  return (
+    <CCard className="mb-3 bg-dark text-white">
+      <CCardImage src={ReactImg} />
+      <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..4526f8e7
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardImagesExample.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardImagesExample = () => {
+  return (
+    <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>
+  )
+}
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..f1d0b0f7
--- /dev/null
+++ b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardImage,
+  CCardLink,
+  CCardText,
+  CCardTitle,
+  CListGroup,
+  CListGroupItem,
+} from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const CardKitchenSinkExample = () => {
+  return (
+    <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>
+  )
+}
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..97f8d81b
--- /dev/null
+++ b/packages/docs/content/components/card/index.mdx
@@ -0,0 +1,206 @@
+---
+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="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/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/examples/CarouselCrossfadeExample.tsx b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx
new file mode 100644
index 00000000..164d1d09
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from '@assets/images/angular.jpg'
+import ReactImg from '@assets/images/react.jpg'
+import VueImg from '@assets/images/vue.jpg'
+
+export const CarouselCrossfadeExample = () => {
+  return (
+    <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>
+  )
+}
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..161db12b
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from '@assets/images/angular.jpg'
+import ReactImg from '@assets/images/react.jpg'
+import VueImg from '@assets/images/vue.jpg'
+
+export const CarouselDarkVariantExample = () => {
+  return (
+    <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>
+  )
+}
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..6f1ec096
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from '@assets/images/angular.jpg'
+import ReactImg from '@assets/images/react.jpg'
+import VueImg from '@assets/images/vue.jpg'
+
+export const CarouselSlidesOnlyExample = () => {
+  return (
+    <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>
+  )
+}
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..ae939278
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from '@assets/images/angular.jpg'
+import ReactImg from '@assets/images/react.jpg'
+import VueImg from '@assets/images/vue.jpg'
+
+export const CarouselWithCaptionsExample = () => {
+  return (
+    <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>
+  )
+}
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..3bf80999
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from '@assets/images/angular.jpg'
+import ReactImg from '@assets/images/react.jpg'
+import VueImg from '@assets/images/vue.jpg'
+
+export const CarouselWithControlsExample = () => {
+  return (
+    <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>
+  )
+}
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..3d9ffad1
--- /dev/null
+++ b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
+
+import AngularImg from '@assets/images/angular.jpg'
+import ReactImg from '@assets/images/react.jpg'
+import VueImg from '@assets/images/vue.jpg'
+
+export const CarouselWithIndicatorsExample = () => {
+  return (
+    <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>
+  )
+}
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/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 64%
rename from packages/docs/content/components/close-button.mdx
rename to packages/docs/content/components/close-button/index.mdx
index 98fa69b8..08fb0746 100644
--- a/packages/docs/content/components/close-button.mdx
+++ b/packages/docs/content/components/close-button/index.mdx
@@ -2,8 +2,7 @@
 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
 ---
 
@@ -13,9 +12,7 @@ import { CCloseButton } from '@coreui/react/src/index'
 
 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
 
@@ -25,17 +22,16 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
 <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/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/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/icon.mdx b/packages/docs/content/components/icon.mdx
index 5e995616..53e63828 100644
--- a/packages/docs/content/components/icon.mdx
+++ b/packages/docs/content/components/icon.mdx
@@ -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/examples/ImageAligning2Example.tsx b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx
new file mode 100644
index 00000000..f8b33070
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import React400Img from '@assets/images/react400.jpg'
+
+export const ImageAligning2Example = () => {
+  return (
+    <div className="clearfix">
+      <CImage align="center" rounded src={React400Img} 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..3715e11d
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import React400Img from '@assets/images/react400.jpg'
+
+export const ImageAligning3Example = () => {
+  return (
+    <div className="text-center">
+      <CImage rounded src={React400Img} 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..aa81e817
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageAligningExample.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import React400Img from '@assets/images/react400.jpg'
+
+export const ImageAligningExample = () => {
+  return (
+    <div className="clearfix">
+      <CImage align="start" rounded src={React400Img} width={200} height={200} />
+      <CImage align="end" rounded src={React400Img} 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..90557bda
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const ImageResponsiveExample = () => {
+  return <CImage fluid src={ReactImg} />
+}
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..8616941a
--- /dev/null
+++ b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { CImage } from '@coreui/react'
+
+import React400Img from '@assets/images/react400.jpg'
+
+export const ImageThumbnailExample = () => {
+  return <CImage rounded thumbnail src={React400Img} 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/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..4137b3b4
--- /dev/null
+++ b/packages/docs/content/components/list-group/index.mdx
@@ -0,0 +1,93 @@
+---
+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="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.
+
+<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/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/examples/NavbarBrand2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx
new file mode 100644
index 00000000..dc5a13de
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+import CoreUISignetImg from '@assets/images/brand/coreui-signet.svg'
+
+export const NavbarBrand2Example = () => {
+  return (
+    <CNavbar className="bg-body-tertiary">
+      <CContainer fluid>
+        <CNavbarBrand href="#">
+          <img src={CoreUISignetImg} alt="" 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..70c6b9fa
--- /dev/null
+++ b/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
+
+import CoreUISignetImg from '@assets/images/brand/coreui-signet.svg'
+
+export const NavbarBrand3Example = () => {
+  return (
+    <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>
+  )
+}
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/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/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..5b07eb17
--- /dev/null
+++ b/packages/docs/content/components/navs-tabs/index.mdx
@@ -0,0 +1,121 @@
+---
+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" />
+
+### 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/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/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/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..95d46e3e
--- /dev/null
+++ b/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle, CPlaceholder } from '@coreui/react'
+
+import ReactImg from '@assets/images/react.jpg'
+
+export const PlaceholderExample = () => {
+  return (
+    <>
+      <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} />
+        </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/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/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/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..b373b4bc
--- /dev/null
+++ b/packages/docs/content/components/sidebar/index.mdx
@@ -0,0 +1,95 @@
+---
+title: React Sidebar Component
+name: Sidebar
+description:
+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.
+
+<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 dc977bda..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/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/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..3bba8edf 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
 ---
 
@@ -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/examples/TabsExample.tsx b/packages/docs/content/components/tabs/examples/TabsExample.tsx
new file mode 100644
index 00000000..0c1f0ac0
--- /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 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>
+  )
+}
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..bf93ff54
--- /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 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>
+  )
+}
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..e81723e1
--- /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 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="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..6a95cfa4
--- /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 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="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..3914e357
--- /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 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>
+  )
+}
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..ac19955b
--- /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 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>
+  )
+}
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..86c204d7
--- /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 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>
+  )
+}
diff --git a/packages/docs/content/components/tabs/index.mdx b/packages/docs/content/components/tabs/index.mdx
new file mode 100644
index 00000000..cd51c45d
--- /dev/null
+++ b/packages/docs/content/components/tabs/index.mdx
@@ -0,0 +1,123 @@
+---
+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 Spinner" />
+
+## 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 Spinner" />
+
+### Pills
+
+Take that same code, but use `variant="pills"` instead:
+
+<ExampleSnippet component="TabsPillsExample" componentName="React Spinner" />
+
+### Underline
+
+Take that same code, but use `variant="underline"` instead:
+
+<ExampleSnippet component="TabsUnderlineExample" componentName="React Spinner" />
+
+### Underline border
+
+Take that same code, but use `variant="underline-border"` instead:
+
+<ExampleSnippet component="TabsUnderlineBorderExample" componentName="React Spinner" />
+
+### 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 Spinner" />
+
+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 Spinner" />
+
+
+## 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/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/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..772c6bf7
--- /dev/null
+++ b/packages/docs/content/components/tooltip/index.mdx
@@ -0,0 +1,39 @@
+---
+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.
+
+### 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/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/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/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/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/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/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 57%
rename from packages/docs/content/forms/input-mask.mdx
rename to packages/docs/content/forms/input-mask/index.mdx
index 5f005cd6..0538d87b 100644
--- a/packages/docs/content/forms/input-mask.mdx
+++ b/packages/docs/content/forms/input-mask/index.mdx
@@ -2,14 +2,9 @@
 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.
@@ -43,37 +38,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 +48,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/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/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/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/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/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/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/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/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/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/gatsby-browser.tsx b/packages/docs/gatsby-browser.tsx
index 4791853e..9850d388 100644
--- a/packages/docs/gatsby-browser.tsx
+++ b/packages/docs/gatsby-browser.tsx
@@ -1,8 +1,13 @@
-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'
 
-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 }) => {
+  return <DocsLayout {...props}>{element}</DocsLayout>
 }
diff --git a/packages/docs/gatsby-config.mjs b/packages/docs/gatsby-config.mjs
index 93254870..c7a17ef7 100644
--- a/packages/docs/gatsby-config.mjs
+++ b/packages/docs/gatsby-config.mjs
@@ -19,7 +19,6 @@ const config = {
   },
   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 64d30826..4497f85a 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: {
+        '@assets': resolve(__dirname, 'content/assets'),
+        '@example': examplePaths, // Adds all paths to a single alias
+      },
+    },
+  })
+}
 
 export const onCreateNode = async ({
   node,
diff --git a/packages/docs/gatsby-ssr.tsx b/packages/docs/gatsby-ssr.tsx
index 4791853e..9850d388 100644
--- a/packages/docs/gatsby-ssr.tsx
+++ b/packages/docs/gatsby-ssr.tsx
@@ -1,8 +1,13 @@
-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'
 
-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 }) => {
+  return <DocsLayout {...props}>{element}</DocsLayout>
 }
diff --git a/packages/docs/package.json b/packages/docs/package.json
index bd396108..8ade1474 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -30,37 +30,36 @@
     "@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.8.2",
+    "@docsearch/react": "^3.8.2",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@stackblitz/sdk": "^1.11.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",
+    "gatsby": "^5.14.0",
+    "gatsby-plugin-google-tagmanager": "^5.14.0",
+    "gatsby-plugin-image": "^3.14.0",
+    "gatsby-plugin-manifest": "^5.14.0",
+    "gatsby-plugin-mdx": "^5.14.0",
+    "gatsby-plugin-offline": "^6.14.0",
+    "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",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-transformer-sharp": "^5.14.0",
     "globby": "^14.0.2",
-    "prism-react-renderer": "^2.4.0",
+    "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
     "react-imask": "^7.6.1",
     "react-markdown": "^9.0.1",
     "rimraf": "^6.0.1",
-    "sass": "^1.80.4",
+    "sass": "^1.83.0",
     "showdown": "^2.1.0"
   },
   "devDependencies": {
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/ClassNamesDocs.tsx b/packages/docs/src/components/ClassNamesDocs.tsx
index e9017c78..6adc8988 100644
--- a/packages/docs/src/components/ClassNamesDocs.tsx
+++ b/packages/docs/src/components/ClassNamesDocs.tsx
@@ -106,13 +106,15 @@ const ClassNamesDocs = ({ files }: { files: string | string[] }) => {
       <table className="table">
         <thead>
           <tr>
+            <th>customClassNames</th>
             <th>Class Name</th>
             <th>Description</th>
           </tr>
         </thead>
         <tbody>
           {sortedClassNames.map((className, index) => (
-            <tr key={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>
diff --git a/packages/docs/src/components/ComponentSubNav.tsx b/packages/docs/src/components/ComponentSubNav.tsx
new file mode 100644
index 00000000..48687f53
--- /dev/null
+++ b/packages/docs/src/components/ComponentSubNav.tsx
@@ -0,0 +1,116 @@
+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],
+    )
+
+    // 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>
+              )}
+            </CNav>
+          </CContainer>
+        </div>
+      </>
+    )
+  },
+)
+
+ComponentSubNav.displayName = 'ComponentSubNav'
+
+export default ComponentSubNav
diff --git a/packages/docs/src/components/ExampleSnippet.tsx b/packages/docs/src/components/ExampleSnippet.tsx
index c7a4ed09..57cbc589 100644
--- a/packages/docs/src/components/ExampleSnippet.tsx
+++ b/packages/docs/src/components/ExampleSnippet.tsx
@@ -1,10 +1,8 @@
-import React, { FC, ReactNode, useState } from 'react'
+import React, { FC, lazy, ReactNode, 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'
 
@@ -16,8 +14,9 @@ interface CodeSnippets {
 export interface ExampleSnippetProps {
   children: ReactNode
   className?: string
-  code: string | CodeSnippets
+  code?: string | CodeSnippets
   codeSandbox?: boolean
+  component?: string
   componentName?: string
   pro?: boolean
   stackBlitz?: boolean
@@ -28,22 +27,62 @@ const ExampleSnippet: FC<ExampleSnippetProps> = ({
   className = '',
   code,
   codeSandbox = true,
+  component,
   componentName,
   pro = false,
   stackBlitz = true,
 }) => {
+  const [codeJS, setCodeJS] = useState<string>()
+  const [codeTS, setCodeTS] = useState<string>()
   const [language, setLanguage] = useState<'js' | 'ts'>('js')
   const { copy, isCopied } = useClipboard()
 
-  // Type Guards to determine the shape of 'code' prop
-  const isCodeString = typeof code === 'string'
-  const codeJS = isCodeString ? code : code.js || code.ts
-  const codeTS = isCodeString ? code : code.ts
-  const hasJS = Boolean(codeJS)
-  const hasTS = Boolean(codeTS)
+  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 () => {
+      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])
 
-  // Set initial language based on available code snippets
-  React.useEffect(() => {
+  const hasJS = codeJS !== undefined && codeJS !== ''
+  const hasTS = codeTS !== undefined && codeTS !== ''
+
+  useEffect(() => {
     if (!hasJS && hasTS) {
       setLanguage('ts')
     } else {
@@ -53,22 +92,37 @@ const ExampleSnippet: FC<ExampleSnippetProps> = ({
 
   const handleCopy = () => {
     const codeToCopy = language === 'js' ? codeJS : codeTS
-    if (codeToCopy) {
-      copy(codeToCopy)
-    }
+    if (codeToCopy) copy(codeToCopy)
   }
 
   const prismLanguage: Language = language === 'js' ? 'jsx' : 'tsx'
-
-  // Determine if both languages are available
-  const showJSTab = hasJS && (isCodeString || code.js !== code.ts)
+  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">
-      {children && <div className={`docs-example ${className}`}>{children}</div>}
+      <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">
+        <CNav as="div" className="px-3" variant="underline-border" role={undefined}>
           {showJSTab && (
             <CNavLink as="button" active={language === 'js'} onClick={() => setLanguage('js')}>
               JavaScript
@@ -88,9 +142,9 @@ const ExampleSnippet: FC<ExampleSnippetProps> = ({
                 aria-label="Try it on CodeSandbox"
                 onClick={() =>
                   openCodeSandboxProject({
-                    name: React.isValidElement(children) && (children as any).type?.name,
+                    name: component || getProjectName(),
                     language,
-                    code: language === 'js' ? codeJS : codeTS || '',
+                    code: language === 'js' ? codeJS || '' : codeTS || '',
                     componentName,
                     pro,
                   })
@@ -109,9 +163,9 @@ const ExampleSnippet: FC<ExampleSnippetProps> = ({
                 aria-label="Try it on StackBlitz"
                 onClick={() =>
                   openStackBlitzProject({
-                    name: React.isValidElement(children) && (children as any).type?.name,
+                    name: component || getProjectName(),
                     language,
-                    code: language === 'js' ? codeJS : codeTS || '',
+                    code: language === 'js' ? codeJS || '' : codeTS || '',
                     componentName,
                     pro,
                   })
@@ -147,26 +201,27 @@ const ExampleSnippet: FC<ExampleSnippetProps> = ({
           </CTooltip>
         </CNav>
       </div>
-
-      <div className="highlight">
-        <Highlight
-          code={language === 'js' ? codeJS : codeTS || ''}
-          language={prismLanguage}
-          theme={{ plain: {}, styles: [] }}
-        >
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre className={className} 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>
+      {(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>
   )
 }
diff --git a/packages/docs/src/components/ExampleSnippetLazy.tsx b/packages/docs/src/components/ExampleSnippetLazy.tsx
new file mode 100644
index 00000000..1433b173
--- /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/src/utils'
+
+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..8b39d6db 100644
--- a/packages/docs/src/components/Footer.tsx
+++ b/packages/docs/src/components/Footer.tsx
@@ -7,30 +7,21 @@ 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..3a4c4fbb 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 {
@@ -27,23 +28,28 @@ import {
 } from '@coreui/react/src'
 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/Seo.tsx b/packages/docs/src/components/Seo.tsx
index d09b930a..26cd82d0 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'
 
@@ -34,31 +33,23 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
     url: `${siteUrl}${pathname.replace(`${prefix}/`, '')}`,
   }
 
+  const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
+
   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">
           {`{
@@ -78,7 +69,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
           }`}
         </script>
       )}
-    </Helmet>
+    </>
   )
 }
 
diff --git a/packages/docs/src/components/Sidebar.tsx b/packages/docs/src/components/Sidebar.tsx
index 647470f6..684fbe88 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,
@@ -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/Toc.tsx b/packages/docs/src/components/Toc.tsx
index cf29129c..a64cd55b 100644
--- a/packages/docs/src/components/Toc.tsx
+++ b/packages/docs/src/components/Toc.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import React, { forwardRef, useState } from 'react'
 import { CCollapse, CNav } from '@coreui/react/src/index'
 
 export type TocItem = {
@@ -32,12 +32,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 +50,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 +61,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 +69,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 346e8eb2..3770af70 100644
--- a/packages/docs/src/components/index.ts
+++ b/packages/docs/src/components/index.ts
@@ -3,6 +3,7 @@ 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'
@@ -20,6 +21,7 @@ export {
   Callout,
   CodeBlock,
   ClassNamesDocs,
+  ComponentSubNav,
   Example,
   ExampleSnippet,
   Footer,
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/styles/_ads.scss b/packages/docs/src/styles/_ads.scss
index 575db8b0..7bcfc4af 100644
--- a/packages/docs/src/styles/_ads.scss
+++ b/packages/docs/src/styles/_ads.scss
@@ -4,12 +4,16 @@
 // Carbon ads
 //
 
+.carbonads-wrapper {
+  min-height: 130px;
+  margin: 2rem 0;
+}
+
 #carbonads {
   position: static;
   display: block;
   max-width: 400px;
   padding: 15px 15px 15px 160px;
-  margin: 2rem 0;
   overflow: hidden;
   @include font-size(.8125rem);
   line-height: 1.4;
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..8f1dcd31
--- /dev/null
+++ b/packages/docs/src/styles/_component-sub-nav.scss
@@ -0,0 +1,36 @@
+.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..530bddf0 100644
--- a/packages/docs/src/styles/_footer.scss
+++ b/packages/docs/src/styles/_footer.scss
@@ -7,13 +7,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 923c9bf1..aebc7c14 100644
--- a/packages/docs/src/styles/_layout.scss
+++ b/packages/docs/src/styles/_layout.scss
@@ -3,10 +3,6 @@
   @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
   will-change: auto;
   @include transition(padding .15s);
-
-  > .container-lg {
-    --cui-gutter-x: 3rem;
-  }
 }
 
 .docs-sidebar {
@@ -17,7 +13,6 @@
   grid-area: main;
   display: grid;
   grid-template-areas:
-    "nav"
     "header"
     "intro"
     "toc"
@@ -30,12 +25,11 @@
     margin-inline: auto;
   }
 
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     grid-template-areas:
-      "nav     nav"
       "intro   toc"
       "content toc";
-    grid-template-rows: auto auto auto;
+    grid-template-rows: auto auto;
     grid-template-columns: 4fr 1fr;
     gap: $grid-gutter-width;
   }
@@ -45,10 +39,6 @@
   grid-area: header;
 }
 
-.docs-nav {
-  grid-area: nav;
-}
-
 .docs-intro {
   grid-area: intro;
 }
diff --git a/packages/docs/src/styles/_table-api.scss b/packages/docs/src/styles/_table-api.scss
index c537fce8..7018717e 100644
--- a/packages/docs/src/styles/_table-api.scss
+++ b/packages/docs/src/styles/_table-api.scss
@@ -1,4 +1,5 @@
-.table-api {
+.table-api,
+.table-docs {
   .table {
     margin: 0;
   }
@@ -10,10 +11,6 @@
 
   tr th {
     padding: 0.75rem 1rem;
-
-    &:nth-child(3) {
-      width: 50%;
-    }
   }
 
   tr td {
@@ -43,8 +40,13 @@
     border-radius: 0;
     border: 2px solid var(--cui-body-bg);
 
-    code[class*=language-], pre[class*=language-] {
+    code[class*='language-'],
+    pre[class*='language-'] {
       white-space: pre-wrap;
     }
   }
 }
+
+.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..e8d214b0 100644
--- a/packages/docs/src/styles/_toc.scss
+++ b/packages/docs/src/styles/_toc.scss
@@ -1,7 +1,7 @@
 // stylelint-disable selector-max-type
 
 .docs-toc {
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     position: sticky;
     top: 5rem;
     right: 0;
@@ -45,12 +45,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 +72,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 +81,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/styles.scss b/packages/docs/src/styles/styles.scss
index d90d130a..1d814d5e 100644
--- a/packages/docs/src/styles/styles.scss
+++ b/packages/docs/src/styles/styles.scss
@@ -8,6 +8,7 @@
 @import "anchor";
 @import "callouts";
 @import "component-examples";
+@import "component-sub-nav";
 @import "footer";
 @import "layout";
 @import "prism";
diff --git a/packages/docs/src/templates/DefaultLayout.tsx b/packages/docs/src/templates/DefaultLayout.tsx
index 007145cd..f4c6ceb2 100644
--- a/packages/docs/src/templates/DefaultLayout.tsx
+++ b/packages/docs/src/templates/DefaultLayout.tsx
@@ -1,26 +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
-  location: 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, location, 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={{
@@ -28,42 +14,7 @@ const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, location, pageC
         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} location={location} 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 (!globalThis.docsearch || !searchElement) {
-            return
-          }
-
-          // @ts-expect-error global variable
-          globalThis.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 99b256f2..791274f7 100644
--- a/packages/docs/src/templates/DocsLayout.tsx
+++ b/packages/docs/src/templates/DocsLayout.tsx
@@ -1,9 +1,10 @@
-import React, { FC, ReactNode, useMemo } from 'react'
-import { Ads, Banner, Seo, Toc } from '../components'
-import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react'
+import React, { FC, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+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 {
@@ -11,6 +12,7 @@ interface DocsLayoutProps {
   data: DocsData
   location: Location
   pageContext: PageContext
+  path: string
 }
 
 interface DocsData {
@@ -56,47 +58,11 @@ const humanize = (text: string): string => {
     .join(' ')
 }
 
-const DocsNav: FC<{
-  route: string
-  locationPathname: string
-  hasNavAPI: boolean
-  hasNavStyling: boolean
-  hasNavAccessibility: boolean
-}> = ({ route, locationPathname, hasNavAPI, hasNavStyling, hasNavAccessibility }) => (
-  <CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
-    <CNavItem>
-      <CNavLink href={route} active={route === locationPathname}>
-        Features
-      </CNavLink>
-    </CNavItem>
-    {hasNavAPI && (
-      <CNavItem>
-        <CNavLink href={`${route}api/`} active={`${route}api/` === locationPathname}>
-          API
-        </CNavLink>
-      </CNavItem>
-    )}
-    {hasNavStyling && (
-      <CNavItem>
-        <CNavLink href={`${route}styling/`} active={`${route}styling/` === locationPathname}>
-          Styling
-        </CNavLink>
-      </CNavItem>
-    )}
-    {hasNavAccessibility && (
-      <CNavItem>
-        <CNavLink
-          href={`${route}accessibility/`}
-          active={`${route}accessibility/` === locationPathname}
-        >
-          Accessibility
-        </CNavLink>
-      </CNavItem>
-    )}
-  </CNav>
-)
-
-const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext }) => {
+const DocsLayout: FC<DocsLayoutProps> = ({ children, data, 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 {
@@ -113,80 +79,97 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext
   )
   const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), [])
   const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data])
-  const hasNavAccessibility = useMemo(
-    () =>
-      hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('accessibility')),
-    [hasNav, data],
-  )
-  const hasNavAPI = useMemo(
-    () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('api')),
-    [hasNav, data],
-  )
-  const hasNavStyling = useMemo(
-    () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('styling')),
-    [hasNav, 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">
-          {hasNav && (
-            <DocsNav
-              route={route}
-              locationPathname={location.pathname}
-              hasNavAPI={hasNavAPI}
-              hasNavStyling={hasNavStyling}
-              hasNavAccessibility={hasNavAccessibility}
-            />
-          )}
-          <div className="docs-intro ps-lg-4">
-            {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 pro={proComponent} />
+                <p className="docs-lead">{description}</p>
+                <Ads code="CEAICKJY" location={route} 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>
-            )}
-            <Banner pro={proComponent} />
-            <p className="docs-lead">{description}</p>
-            <Ads code="CEAICKJY" location={route} 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>
-          {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 a0b1c551..00aa6f11 100644
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ b/packages/docs/src/templates/MdxLayout.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useMemo } from 'react'
 import { graphql, PageProps } from 'gatsby'
 import { MDXProvider } from '@mdx-js/react'
 import {
@@ -6,9 +6,10 @@ import {
   CodeBlock,
   ClassNamesDocs,
   Example,
-  JSXDocs,
   ExampleSnippet,
+  JSXDocs,
   ScssDocs,
+  Seo,
 } from '../components'
 
 import { CalloutProps } from '../components/Callout'
@@ -34,52 +35,78 @@ interface DataProps {
   }
 }
 
+interface PageContextType {
+  frontmatter: {
+    title: string
+    description: string
+    name: string
+  }
+}
+
 interface Toc {
   items: TocItem[]
 }
 
 const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
-  return (
-    <MDXProvider
-      components={{
-        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} />,
-      }}
-    >
-      {children}
-    </MDXProvider>
+  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 || ''
+
+  return (
+    <>
+      <html lang="en" />
+      <Seo title={title} description={description} name={name} />
+    </>
+  )
+}
+
 export const pageQuery = graphql`
   query PageQuery($id: String, $regex: String) {
     mdx(id: { eq: $id }) {
diff --git a/packages/docs/src/utils/codesandbox.ts b/packages/docs/src/utils/codesandbox.ts
index 19fbb6b2..536115f5 100644
--- a/packages/docs/src/utils/codesandbox.ts
+++ b/packages/docs/src/utils/codesandbox.ts
@@ -1,5 +1,3 @@
-// openCodeSandboxProject.ts
-
 import {
   ProjectOptions,
   generateTitle,
@@ -25,7 +23,7 @@ export const openCodeSandboxProject = async (options: CodeSandboxOptions) => {
   const indexHTML = generateIndexHTML(title)
   const indexExtension = language === 'ts' ? 'tsx' : 'js'
   const indexJS = generateIndexJS(name, language, pro, 'codesandbox')
-  const packageJSON = generatePackageJSON(title, description, language, pro, 'codesandbox')
+  const packageJSON = generatePackageJSON(title, description, language, pro, code, 'codesandbox')
 
   // Define the files structure
   const files: Record<string, { content: string }> = {
@@ -33,7 +31,7 @@ export const openCodeSandboxProject = async (options: CodeSandboxOptions) => {
       content: indexHTML,
     },
     [`src/${name}.${language}x`]: {
-      content: code,
+      content: code.replaceAll('@assets/images/', '@coreui/projects-assets/images/'),
     },
     [`src/index.${indexExtension}`]: {
       content: indexJS,
diff --git a/packages/docs/src/utils/projectUtils.ts b/packages/docs/src/utils/projectUtils.ts
index be6041fd..807d6835 100644
--- a/packages/docs/src/utils/projectUtils.ts
+++ b/packages/docs/src/utils/projectUtils.ts
@@ -1,6 +1,3 @@
-// projectUtils.ts
-
-// Define a unified options interface
 export interface ProjectOptions {
   code: string
   componentName?: string
@@ -9,6 +6,25 @@ export interface ProjectOptions {
   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 (dependency.startsWith('@assets/images')) {
+      dependencies.push('@coreui/projects-assets')
+    }
+
+    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'
@@ -23,7 +39,11 @@ export const generateDescription = (componentName?: string): string => {
 }
 
 // Function to generate dependencies
-export const getDependencies = (language: 'js' | 'ts', pro: boolean): Record<string, string> => {
+export const getDependencies = (
+  language: 'js' | 'ts',
+  pro: boolean,
+  code: string,
+): Record<string, string> => {
   const dependencies: Record<string, string> = {
     ...(pro
       ? {
@@ -40,6 +60,12 @@ export const getDependencies = (language: 'js' | 'ts', pro: boolean): Record<str
     'react-scripts': 'latest',
   }
 
+  const externalDependencies = extractDependencies(code, ['@assets/images/'])
+
+  for (const dependency of externalDependencies) {
+    dependencies[`${dependency}`] = 'latest'
+  }
+
   if (language === 'ts') {
     dependencies['typescript'] = 'latest'
     dependencies['@types/jest'] = 'latest'
@@ -48,7 +74,13 @@ export const getDependencies = (language: 'js' | 'ts', pro: boolean): Record<str
     dependencies['@types/react-dom'] = 'latest'
   }
 
-  return dependencies
+  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
@@ -62,16 +94,16 @@ export const getScripts = (): Record<string, string> => {
 // 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>`
+  <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
@@ -89,27 +121,27 @@ export const generateIndexJS = (
   const renderMethod =
     templateType === 'codesandbox'
       ? `ReactDOM.render(
-    <React.StrictMode>
-      <div className="p-3">
-        <${name} />
-      </div>
-    </React.StrictMode>,
-    document.getElementById('root')
-  );`
+  <React.StrictMode>
+    <div className="p-3">
+      <${name} />
+    </div>
+  </React.StrictMode>,
+  document.getElementById('root')
+);`
       : `ReactDOM.createRoot(document.querySelector("#root")).render(
-    <React.StrictMode>
-      <div className="p-3">
-        <${name} />
-      </div>
-    </React.StrictMode>
-  );`
+  <React.StrictMode>
+    <div className="p-3">
+      <${name} />
+    </div>
+  </React.StrictMode>
+);`
 
   return `import React from 'react';
-  ${importReactDOM}
-  import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css';
-  import { ${name} } from './${name}.${language}x';
-    
-  ${renderMethod}`
+${importReactDOM}
+import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css';
+import { ${name} } from './${name}.${language}x';
+  
+${renderMethod}`
 }
 
 // Function to generate package.json content
@@ -118,6 +150,7 @@ export const generatePackageJSON = (
   description: string,
   language: 'js' | 'ts',
   pro: boolean,
+  code: string,
   templateType: 'codesandbox' | 'stackblitz',
 ): string => {
   const indexExtension = language === 'ts' ? 'tsx' : 'js'
@@ -128,9 +161,9 @@ export const generatePackageJSON = (
     description,
     main: templateType === 'codesandbox' ? `src/index.${indexExtension}` : `index.js`,
     scripts: getScripts(),
-    dependencies: getDependencies(language, pro),
+    dependencies: getDependencies(language, pro, code),
     ...(templateType === 'stackblitz' && {
-      devDependencies: language === 'ts' ? getDependencies(language, pro) : {},
+      devDependencies: language === 'ts' ? getDependencies(language, pro, code) : {},
     }),
   }
 
diff --git a/packages/docs/src/utils/stackblitz.ts b/packages/docs/src/utils/stackblitz.ts
index 7805132b..ca9e89ba 100644
--- a/packages/docs/src/utils/stackblitz.ts
+++ b/packages/docs/src/utils/stackblitz.ts
@@ -1,5 +1,3 @@
-// openStackBlitzProject.ts
-
 import sdk, { Project } from '@stackblitz/sdk'
 import {
   ProjectOptions,
@@ -26,11 +24,14 @@ export const openStackBlitzProject = (options: StackBlitzOptions) => {
 
   const indexHTML = generateIndexHTML(title)
   const indexJS = generateIndexJS(name, language, pro, 'stackblitz')
-  const packageJSON = generatePackageJSON(title, description, language, pro, 'stackblitz')
+  const packageJSON = generatePackageJSON(title, description, language, pro, code, 'stackblitz')
 
   const files = {
     'public/index.html': indexHTML,
-    [`src/${name}.${language}x`]: code,
+    [`src/${name}.${language}x`]: code.replaceAll(
+      '@assets/images/',
+      '@coreui/projects-assets/images/',
+    ),
     [`src/index.js`]: indexJS, // StackBlitz uses 'index.js' regardless of language
     'package.json': packageJSON,
   }
@@ -40,7 +41,7 @@ export const openStackBlitzProject = (options: StackBlitzOptions) => {
     description,
     template,
     files,
-    dependencies: getDependencies(language, pro),
+    dependencies: getDependencies(language, pro, code),
     tags: ['coreui', 'react'],
   }