diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index ebe51d3b..00000000
--- a/.editorconfig
+++ /dev/null
@@ -1,12 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = false
-insert_final_newline = false
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..433332f8
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+test/coverage/
+es/
+lib/
+umd/
+*.test.js
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..4bfd9014
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,51 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "arrowFunctions": true,
+      "blockBindings": true,
+      "defaultParams": true,
+      "destructuring": true,
+      "forOf": true,
+      "generators": true,
+      "objectLiteralComputedProperties": true,
+      "objectLiteralShorthandMethods": true,
+      "objectLiteralShorthandProperties": true,
+      "experimentalObjectRestSpread": true,
+      "restParams": true,
+      "spread": true,
+      "templateStrings": true,
+      "modules": true,
+      "classes": true
+    }
+  },
+  "plugins": [
+    "react"
+  ],
+  "root": true,
+  "rules": {
+    "comma-dangle": 0,
+    "linebreak-style": 0
+  },
+  "settings": {
+    "react": {
+      "createClass": "createReactClass", // Regex for Component Factory to use,
+      // default to "createReactClass"
+      "pragma": "React",  // Pragma to use, default to "React"
+      "version": "16.8", // React version, default to the latest React stable release
+      "flowVersion": "0.81" // Flow version
+    },
+    "propWrapperFunctions": [ "forbidExtraProps" ] // The names of any functions used to wrap the
+    // propTypes object, e.g. `forbidExtraProps`.
+    // If this isn't set, any propTypes wrapped in
+    // a function will be skipped.
+  }
+}
diff --git a/.gitattributes b/.gitattributes
deleted file mode 100644
index 205021e4..00000000
--- a/.gitattributes
+++ /dev/null
@@ -1,2 +0,0 @@
-# Enforce Unix newlines
-* text=auto eol=lf
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 96e19d0c..37d6ae2a 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -1,178 +1,34 @@
-# Contributing to CoreUI
+# Contributing
 
-Looking to contribute something to CoreUI? **Here's how you can help.**
+## Usage
 
-Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
+```bash
+# Install dependencies
+npm install
 
-Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing
-patches and features.
+# Build 
+npm run build
 
-## Using the issue tracker
+# Run all tests with lint/jest
+npm run test
 
-The [issue tracker](https://github.com/coreui/coreui-react/issues) is
-the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
-and [submitting pull requests](#pull-requests), but please respect the following
-restrictions:
+# Run test in watch mode
+npm run test:watch
 
-* Please **do not** use the issue tracker for personal support requests.
+# Update test snapshot
+npm run test:update
 
-* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
-  Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
-  instead.
+# Run linter
+npm run lint
 
-## Bug reports
+# Run linter with auto fix
+npm run lint:fix
+```
+## Workflow
 
-A bug is a _demonstrable problem_ that is caused by the code in the repository.
-Good bug reports are extremely helpful, so thanks!
-
-Guidelines for bug reports:
-
-0. **Validate and lint your code** — to ensure your problem isn't caused by a simple error in your own code.
-
-1. **Use the GitHub issue search** — check if the issue has already been reported.
-
-2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.
-
-3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
-
-
-A good bug report shouldn't leave others needing to chase you up for more
-information. Please try to be as detailed as possible in your report. What is
-your environment? What steps will reproduce the issue? What browser(s) and OS
-experience the problem? Do other browsers show the bug differently? What
-would you expect to be the outcome? All these details will help people to fix
-any potential bugs.
-
-Example:
-
-> Short and descriptive example bug report title
->
-> A summary of the issue and the browser/OS environment in which it occurs. If
-> suitable, include the steps required to reproduce the bug.
->
-> 1. This is the first step
-> 2. This is the second step
-> 3. Further steps, etc.
->
-> `<url>` - a link to the reduced test case
->
-> Any other information you want to share that is relevant to the issue being
-> reported. This might include the lines of code that you have identified as
-> causing the bug, and potential solutions (and your opinions on their
-> merits).
-
-## Feature requests
-
-Feature requests are welcome. Before opening a feature request, please take a
-moment to find out whether your idea fits with the scope and aims of the
-project. It's up to *you* to make a strong case to convince the project's
-developers of the merits of this feature. Please provide as much detail
-and context as possible.
-
-
-## Pull requests
-
-Good pull requests—patches, improvements, new features—are a fantastic
-help. They should remain focused in scope and avoid containing unrelated
-commits.
-
-**Please ask first** before embarking on any significant pull request (e.g.
-implementing features, refactoring code, porting to a different language),
-otherwise you risk spending a lot of time working on something that the
-project's developers might not want to merge into the project.
-
-Adhering to the following process is the best way to get your work
-included in the project:
-
-1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
-   and configure the remotes:
-
-   ```bash
-   # Clone your fork of the repo into the current directory
-   git clone https://github.com/<your-username>/coreui-react.git
-   # Navigate to the newly cloned directory
-   cd coreui
-   # Assign the original repo to a remote called "upstream"
-   git remote add upstream https://github.com/coreui/coreui-react.git
-   ```
-
-2. If you cloned a while ago, get the latest changes from upstream:
-
-   ```bash
-   git checkout master
-   git pull upstream master
-   ```
-
-3. Create a new topic branch (off the main project development branch) to
-   contain your feature, change, or fix:
-
-   ```bash
-   git checkout -b <topic-branch-name>
-   ```
-
-4. Commit your changes in logical chunks. Please adhere to these [git commit
-   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
-   or your code is unlikely to be merged into the main project. Use Git's
-   [interactive rebase](https://help.github.com/articles/interactive-rebase)
-   feature to tidy up your commits before making them public.
-
-5. Locally merge (or rebase) the upstream development branch into your topic branch:
-
-   ```bash
-   git pull [--rebase] upstream master
-   ```
-
-6. Push your topic branch up to your fork:
-
-   ```bash
-   git push origin <topic-branch-name>
-   ```
-
-7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
-    with a clear title and description against the `master` branch.
-
-**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
-license your work under the terms of the [MIT License](LICENSE).
-
-### Semantic Git commit messages
-
-Inspired by Sparkbox's awesome article on
-[semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages).
-Please use following commit message format.
-
-* chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'```
-* docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'```
-* feat (new feature) -> ```git commit -m 'feat: commit-message-here'```
-* fix (bug fix) -> ```git commit -m 'fix: commit-message-here'```
-* refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'```
-* style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'```
-* test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'```
-
-## Code guidelines
-
-### HTML
-
-[Adhere to the Code Guide.](http://codeguide.co/#html)
-
-- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
-- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
-- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
-
-### CSS
-
-[Adhere to the Code Guide.](http://codeguide.co/#css)
-
-- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
-- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details.
-
-### JS
-
-- No semicolons (in client-side JS)
-- 2 spaces (no tabs)
-- strict mode
-- "Attractive"
-- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
-
-## License
-
-By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
\ No newline at end of file
+- Create a component in the src/components folder
+- Add tests in the src/components/\_\_tests\_\_ folder
+- Register this component in src/index.js
+- Run lint and tests before commiting anything
+- Commit using [Commit Convention](./COMMIT_CONVENTION.md) 
+- PR on github
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index 544d42d2..00000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-# These are supported funding model platforms
-
-custom: "https://coreui.io/pricing/?support=true"
-open_collective: coreui
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 00000000..9e0cfad4
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,26 @@
+Before opening an issue:
+
+- [Search for duplicate or closed issues](https://github.com/coreui/coreui-react/issues?utf8=%E2%9C%93&q=is%3Aissue)
+- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
+- Read the [contributing guidelines](./CONTRIBUTING.md)
+
+When asking general "how to" questions:
+
+- Please do not open an issue here
+- Post your question here - https://community.coreui.io/c/support/coreui-for-react/15
+
+When reporting a bug, include:
+
+- Operating system and version (Windows, Mac OS X, Android, iOS, etc...)
+- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
+- Reduced test cases and potential fixes using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
+
+When suggesting a feature:
+
+- Please do not open an issue here, 
+- Post your feature request here - https://community.coreui.io/c/feature-requests/12
+- Include:
+  - As much detail as possible for what we should add and why it's important to CoreUI for React.js
+  - Relevant links to prior art, screenshots, or live demos whenever possible
+
+**Please use GitHub only when reporting a bug, all issues with the general "how to" questions will be automatically closed.**
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index 87980fbc..00000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-name: Bug report
-about: Tell us about a bug you may have identified in Bootstrap.
-title: ''
-labels: ''
-assignees: ''
-
----
-
-Before opening:
-
-- [Search for duplicate or closed issues](https://github.com/coreui/coreui-react/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- [Validate](https://html5.validator.nu/) any HTML to avoid common problems
-- Read the [contributing guidelines](https://github.com/coreui/coreui-react/blob/main/.github/CONTRIBUTING.md)
-
-Bug reports must include:
-
-- Operating system and version (Windows, macOS, Android, iOS)
-- Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)
-- A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index ca4169dc..00000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for a new feature in CoreUI.
-title: ''
-labels: feature
-assignees: ''
-
----
-
-Before opening:
-
-- [Search for duplicate or closed issues](https://github.com/coreui/coreui-react/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- Read the [contributing guidelines](https://github.com/coreui/coreui-react/blob/main/.github/CONTRIBUTING.md)
-
-Feature requests must include:
-
-- As much detail as possible for what we should add and why it's important to Bootstrap
-- Relevant links to prior art, screenshots, or live demos whenever possible
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 00000000..af184f85
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,35 @@
+<!--
+Please make sure to read the Pull Request Guidelines:
+https://github.com/coreui/coreui-react/.github/CONTRIBUTING.md#pull-request-guidelines
+-->
+
+<!-- PULL REQUEST TEMPLATE -->
+<!-- (Update "[ ]" to "[x]" to check a box) -->
+
+**What kind of change does this PR introduce?** (check at least one)
+
+- [ ] Bugfix
+- [ ] Feature
+- [ ] Code style update
+- [ ] Refactor
+- [ ] Build-related changes
+- [ ] Other, please describe:
+
+**Does this PR introduce a breaking change?** (check one)
+
+- [ ] Yes
+- [ ] No
+
+If yes, please describe the impact and migration path for existing applications:
+
+**The PR fulfills these requirements:**
+
+- [ ] It's submitted to the `develop` branch (or to a previous version branch), _not_ the `master` branch
+- [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number)
+- [ ] All tests are passing
+- [ ] New/updated tests are included
+
+If adding a **new feature**, the PR's description includes:
+- [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)
+
+**Other information:**
diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md
deleted file mode 100644
index 9d4da715..00000000
--- a/.github/SUPPORT.md
+++ /dev/null
@@ -1,9 +0,0 @@
-### Bug reports
-
-See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.
-
-### How-to
-
-For general troubleshooting or help getting started:
-
-- Join [GitHub Discussions](https://github.com/coreui/coreui-react/discussions/).
diff --git a/.github/workflows/daily-project-check.yml b/.github/workflows/daily-project-check.yml
index 5776ce77..f68d27c9 100644
--- a/.github/workflows/daily-project-check.yml
+++ b/.github/workflows/daily-project-check.yml
@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
diff --git a/.github/workflows/project-check.yml b/.github/workflows/project-check.yml
index 854186a4..0c2f4402 100644
--- a/.github/workflows/project-check.yml
+++ b/.github/workflows/project-check.yml
@@ -5,8 +5,6 @@ on:
     branches:
       - master
   pull_request:
-    branches:
-      - master
 
 jobs:
   build:
@@ -15,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
deleted file mode 100644
index ae659d2c..00000000
--- a/.github/workflows/stale.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time.
-#
-# You can adjust the behavior by modifying this file.
-# For more information, see:
-# https://github.com/actions/stale
-name: Mark stale issues and pull requests
-
-on:
-  schedule:
-  - cron: '18 14 * * *'
-
-jobs:
-  stale:
-
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-
-    steps:
-    - uses: actions/stale@v3
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions'
-        stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions'
-        stale-issue-label: 'no-issue-activity'
-        stale-pr-label: 'no-pr-activity'
diff --git a/.gitignore b/.gitignore
index 70f24f47..01612b6a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,33 +1,23 @@
-.cache
-coverage/
-dist/
-node_modules/
-public/
-yarn.lock
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
-# IDEs and editors
-.idea/
+# dependencies
+node_modules
+/node_modules
+package-lock.json
 
-# Visual Studio Code
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
+# testing
+/demo/dist
 
-# System files
+# testing
+/coverage
+
+# production
+/es
+/lib
+/umd
+
+# misc
 .DS_Store
-Thumbs.db
+.idea
 
-# Numerous always-ignore extensions
-*.diff
-*.err
-*.log
-*.orig
-*.rej
-*.swo
-*.swp
-*.vi
-*.zip
-*~
\ No newline at end of file
+npm-debug.log*
diff --git a/.gitmodules b/.gitmodules
deleted file mode 100644
index d6139f86..00000000
--- a/.gitmodules
+++ /dev/null
@@ -1,8 +0,0 @@
-[submodule "packages/coreui-react-chartjs"]
-	path = packages/coreui-react-chartjs
-	url = https://github.com/coreui/coreui-react-chartjs.git
-  branch = main
-[submodule "packages/coreui-icons-react"]
-	path = packages/coreui-icons-react
-	url = https://github.com/coreui/coreui-icons-react.git
-  branch = main
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 849ddff3..00000000
--- a/.prettierignore
+++ /dev/null
@@ -1 +0,0 @@
-dist/
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 00000000..8aa29d07
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,32 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+    //stories: ['../stories/*.stories.js'],
+    //stories: ['/stories/*.stories.js'],
+   // stories: ['../stories/*.stories.js'],
+
+   //stories: ['../stories/TEST.stories.js'],
+   //stories: ['../src/*.stories.js']
+   //stories: ['../src/**/*.stories.js']
+   stories: ['../stories/*.stories.js'],
+   module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loaders: [ 'babel-loader' ],
+        exclude: /node_modules/,
+        include: __dirname
+      },
+      {
+        test: /\.css?$/,
+        loaders: [ 'style-loader', 'raw-loader' ],
+        include: __dirname
+      }
+    ]
+  },
+  addons: [
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
+  ],
+};
\ No newline at end of file
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 00000000..c6941510
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { addDecorator } from '@storybook/react';
+import '@coreui/coreui/dist/css/coreui.min.css';
+import CRow from '../src/grid/CRow'
+import CContainer from '../src/grid/CContainer'
+import CCol from '../src/grid/CCol'
+import CCard from '../src/card/CCard'
+//@import '~@coreui/icons/css/all.css';
+
+addDecorator(story => (
+  <>
+    <CContainer fluid>
+        <CRow> 
+            <CCol lg="12" xs="12">
+                <CCard lg="12" xs="12"> 
+                    <h1 className="ml-3">CoreUI</h1>
+                </CCard>
+            </CCol>
+            {story()}
+        </CRow>
+    </CContainer>
+  </>
+));
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
new file mode 100644
index 00000000..acbd10a5
--- /dev/null
+++ b/.storybook/webpack.config.js
@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css?$/,
+        loaders: [ 'style-loader', 'raw-loader' ],
+        include: path.resolve(__dirname, '../')
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 27a44689..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..58215b58
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,464 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+#### [3.4.6](https://github.com/coreui/coreui-react/compare/3.4.5...3.4.6)
+
+> 15 March 2021
+
+- Fix for custom CPagination props [`9ed2c9f`](https://github.com/coreui/coreui-react/commit/9ed2c9fef09782f44c12cb4b3687fedba1725c1a)
+- chore: dependencies update [`82e5c9c`](https://github.com/coreui/coreui-react/commit/82e5c9c41fad851974b4c221ff45247145896e71)
+- chore: github workflows update [`147b761`](https://github.com/coreui/coreui-react/commit/147b761a74f6f43db2901c65285e1f7cf4cb969e)
+
+#### [3.4.5](https://github.com/coreui/coreui-react/compare/3.4.4...3.4.5)
+
+> 20 January 2021
+
+- chore: dependencies update [`136c5ba`](https://github.com/coreui/coreui-react/commit/136c5ba88d9e72c7e1443cf676d952778d6f9427)
+- fix(CModal): add scrollable attribute to type definitions - thanks @pehlert [`7d03dfc`](https://github.com/coreui/coreui-react/commit/7d03dfcb8c633951c6466e6022f051c419bd66c7)
+
+#### [3.4.4](https://github.com/coreui/coreui-react/compare/3.4.3...3.4.4)
+
+> 19 January 2021
+
+- test(CModal): update test, snapshots and story [`c797328`](https://github.com/coreui/coreui-react/commit/c7973286896a7e354ba64ee7b81a78fbf35e19e4)
+- chore: dependencies update [`852c9c8`](https://github.com/coreui/coreui-react/commit/852c9c830108c303796ea677b890a614cdb38270)
+- added scrollable prop to CModal - uses modal-dialog-scrollable from Bootstrap [`1b3a019`](https://github.com/coreui/coreui-react/commit/1b3a019f12561b625567e805f4d489b3e79a1da1)
+- chore(release): 3.4.4 [`29b2471`](https://github.com/coreui/coreui-react/commit/29b2471f2ac5183f52e612306097bc8a75cf721b)
+- fix(CModal): add missing modal-dialog-scrollable - thanks @ljuborados [`9d480af`](https://github.com/coreui/coreui-react/commit/9d480afbe6d619c51abd152fc332b3c09974b2da)
+
+#### [3.4.3](https://github.com/coreui/coreui-react/compare/3.4.2...3.4.3)
+
+> 22 December 2020
+
+- fix(CDataTable): correct itemsPerPageSelect padding [`#171`](https://github.com/coreui/coreui-react/pull/171)
+- fix(CDataTable): tableFilter and cleaner minor cleanup [`1b5079f`](https://github.com/coreui/coreui-react/commit/1b5079f76020d579d2edc00da20edec0956521bf)
+- chore(release): 3.4.3 [`72497b6`](https://github.com/coreui/coreui-react/commit/72497b696f8f90694fc953c5d047511c14c351d1)
+
+#### [3.4.2](https://github.com/coreui/coreui-react/compare/3.4.1...3.4.2)
+
+> 18 December 2020
+
+- fix(CToast): add missing color prop [`f48c98c`](https://github.com/coreui/coreui-react/commit/f48c98cf7f66ed3089730fbb37da5d0c4a975563)
+- chore(release): 3.4.2 [`939098f`](https://github.com/coreui/coreui-react/commit/939098f265dc9fe8d908995db369bae3f3c65ef9)
+
+#### [3.4.1](https://github.com/coreui/coreui-react/compare/3.4.0...3.4.1)
+
+> 18 December 2020
+
+- fix(index.d.ts): CDropdownDivider and CDropdownHeader not defined [`#170`](https://github.com/coreui/coreui-react/issues/170)
+- chore(release): 3.4.1 [`cdb9aa7`](https://github.com/coreui/coreui-react/commit/cdb9aa7e247fbfb7053a7ad1e9ca2917b2c6640b)
+- chore: dependencies update [`4ae0d80`](https://github.com/coreui/coreui-react/commit/4ae0d80405a4093bd8d1545a1ea7006f33665f9e)
+
+#### [3.4.0](https://github.com/coreui/coreui-react/compare/3.4.0-beta.0...3.4.0)
+
+> 11 December 2020
+
+- chore: 3.4.0 version release for React 17 [`ddaea52`](https://github.com/coreui/coreui-react/commit/ddaea52b12d05825e56f79275e30132b14b8db2b)
+- fix(CWidgetBrand): addHeaderClass bad PropTypes [`d2c102b`](https://github.com/coreui/coreui-react/commit/d2c102b50f0b15a89a2a66334923798b267ddeea)
+- chore: dependencies update [`8b7abe8`](https://github.com/coreui/coreui-react/commit/8b7abe8716aec3aa3757a1e25067931253c14c6f)
+
+#### [3.4.0-beta.0](https://github.com/coreui/coreui-react/compare/3.3.6...3.4.0-beta.0)
+
+> 10 December 2020
+
+- test: enzyme-adapter-react-17 temp fix [`9a93f26`](https://github.com/coreui/coreui-react/commit/9a93f2610254f5584eb5e8f70b34a8456b3a2dc8)
+- chore: update to React 17 and dependencies [`dc7e219`](https://github.com/coreui/coreui-react/commit/dc7e219546b6c2a41a060042ce619e84fb1140ae)
+- test(CToast): use act() from react-dom/test-utils [`fce83f8`](https://github.com/coreui/coreui-react/commit/fce83f810768ed67a27acc2f9b10c4e845d91092)
+- fix(stories): className [`ab3348a`](https://github.com/coreui/coreui-react/commit/ab3348a5aac8eb008c23a5cc6292a7836353a311)
+- test(CDataTable): snap update className fix [`d6e58d5`](https://github.com/coreui/coreui-react/commit/d6e58d5003426184e632071d9a8fe2e38b73baad)
+- fix(CWidgetBrand): addHeaderClass bad PropTypes [`937a713`](https://github.com/coreui/coreui-react/commit/937a71394614d8bd66524900fdd415d8dc6f5918)
+
+#### [3.3.6](https://github.com/coreui/coreui-react/compare/3.3.5...3.3.6)
+
+> 10 December 2020
+
+- fix(CWidgetBrand): addHeaderClass bad PropTypes [`d2c102b`](https://github.com/coreui/coreui-react/commit/d2c102b50f0b15a89a2a66334923798b267ddeea)
+- 3.3.6 version release [`7fc09a3`](https://github.com/coreui/coreui-react/commit/7fc09a343da9b623548ebc99cddd5fe9bf40c956)
+- fix(stories): className [`ab3348a`](https://github.com/coreui/coreui-react/commit/ab3348a5aac8eb008c23a5cc6292a7836353a311)
+
+#### [3.3.5](https://github.com/coreui/coreui-react/compare/3.3.4...3.3.5)
+
+> 9 December 2020
+
+- test: add github actions project check [`552a1fd`](https://github.com/coreui/coreui-react/commit/552a1fd7a7dfe5273f55ed1445e98651df80928e)
+- 3.3.5 version release [`757f523`](https://github.com/coreui/coreui-react/commit/757f523cdac052fab1735d7ada274fc417d8021f)
+- fix(CDataTable): missing select perPageItems initial value [`eaca895`](https://github.com/coreui/coreui-react/commit/eaca8955913fafe0f6100952e98ebf7afd34c32b)
+- chore: dependencies update [`41f3899`](https://github.com/coreui/coreui-react/commit/41f38999bb2e32c80d23a425c66cb79bca3ec363)
+
+#### [3.3.4](https://github.com/coreui/coreui-react/compare/3.3.3...3.3.4)
+
+> 26 November 2020
+
+- chore: dependencies update [`7ded326`](https://github.com/coreui/coreui-react/commit/7ded3260c88bae4fda149cf2037c4f0cb5f75d9f)
+- chore: update changelog [`86cec07`](https://github.com/coreui/coreui-react/commit/86cec0727dc56160eadc71fb82b97dc5a460659b)
+- chore: 3.3.4 version release [`dea91fc`](https://github.com/coreui/coreui-react/commit/dea91fcac3e890c8ed3deeee5b386cf8d25547b4)
+
+#### [3.3.3](https://github.com/coreui/coreui-react/compare/3.3.2...3.3.3)
+
+> 4 November 2020
+
+- chore: dependencies update [`a53dbdc`](https://github.com/coreui/coreui-react/commit/a53dbdce08a200aacb52ab935b43dc480d85d327)
+- fix(Modal): missing className prop [`7bbc5fd`](https://github.com/coreui/coreui-react/commit/7bbc5fdd06d9a3de4cc56ac57e80dc4c4ef8fa45)
+- chore: 3.3.3 version release [`0022dc8`](https://github.com/coreui/coreui-react/commit/0022dc81ddf306aefdec0023d3c2f2c0cc8e7000)
+
+#### [3.3.2](https://github.com/coreui/coreui-react/compare/3.3.1...3.3.2)
+
+> 24 October 2020
+
+- chore: 3.3.2 version release [`fbf5379`](https://github.com/coreui/coreui-react/commit/fbf537971f7e83729832939ec979818d9a608dfe)
+- chore: dependencies update [`b3b5410`](https://github.com/coreui/coreui-react/commit/b3b54105bfc31cd60c84ce7418f5e1dced19ad6c)
+- test: fix test configuration, update snapshots [`81a4d7f`](https://github.com/coreui/coreui-react/commit/81a4d7f5f38cbee457ca4368fb1e40cbffb09cf8)
+- test: update tabs tests [`39b4284`](https://github.com/coreui/coreui-react/commit/39b4284b98cb507c6a83860f218f42a559d99532)
+- chore: delete test snapshots from es build [`b40c300`](https://github.com/coreui/coreui-react/commit/b40c300261b91c440543fbb477fc8ed6738cc2a9)
+- test: fix tooltip tests [`44839c9`](https://github.com/coreui/coreui-react/commit/44839c97fab34d645e424f33cec5e6bd18d525e3)
+- test: comment out some broken tests as todo [`64f7387`](https://github.com/coreui/coreui-react/commit/64f73871ff1c33f07adffc058c161e517db29167)
+- fix: CTabPane: fix 'active' prop, refactor component [`7fa04f8`](https://github.com/coreui/coreui-react/commit/7fa04f8311b7820e2b50a657d538f8d5a18c188e)
+- chore: exclude test files from es build [`cf34f54`](https://github.com/coreui/coreui-react/commit/cf34f549844d842d67e95da0f8ce98adc1e32549)
+- chore: update changelog [`edd558a`](https://github.com/coreui/coreui-react/commit/edd558a05dcbe7219cfdbff18b793c70b586147d)
+- chore: Merge branch 'dev-tests' into dev [`b47d3d5`](https://github.com/coreui/coreui-react/commit/b47d3d57de935dc753ed6b991828db067bdabcce)
+- chore: Merge branch 'dev-storybook' into dev [`27c4629`](https://github.com/coreui/coreui-react/commit/27c462980c3845d204c48f14eece0618b2021430)
+
+#### [3.3.1](https://github.com/coreui/coreui-react/compare/3.3.0...3.3.1)
+
+> 15 October 2020
+
+- chore: 3.3.1 version release [`abbe01f`](https://github.com/coreui/coreui-react/commit/abbe01f61b1c38cd764bb3e4ebbfa11ec10127a3)
+- chore: dependencies update [`93397ae`](https://github.com/coreui/coreui-react/commit/93397ae968cd4e11c6780b2ed7a00cacea74e2e9)
+- fix(CSidebar): onShowChange callback behavior overwritten for overlaid [`c463ea5`](https://github.com/coreui/coreui-react/commit/c463ea566e3b997d3926781f13273fcd66bf7065)
+- fix(CSidebar): add missing xxl breakpoint [`9c84573`](https://github.com/coreui/coreui-react/commit/9c84573511feeff615bee105a5cb2a0ced8fc5a6)
+
+#### [3.3.0](https://github.com/coreui/coreui-react/compare/3.2.3...3.3.0)
+
+> 4 September 2020
+
+- fix: CSidebarNavItem/CSidebarNavDropdown: accessibility fixes #141 [`#141`](https://github.com/coreui/coreui-react/issues/141)
+- chore: 3.3.0 version release - update dependencies [`b3be47d`](https://github.com/coreui/coreui-react/commit/b3be47da28c8813e273bc00af73f552589c7e52f)
+- refactor: CSidebar: clearify component [`02b6b0d`](https://github.com/coreui/coreui-react/commit/02b6b0d3b3d60635f51cb6340200d88ca8610f93)
+- feat: CSidebar: close mobile/overlaid sidebar on 'esc' #141 [`4e35ed8`](https://github.com/coreui/coreui-react/commit/4e35ed83c9d14737e10fb732984f0f5f8ca4da49)
+- fix: CSidebar: close sidebar when click on `Item` in overlaid mode [`59d31b7`](https://github.com/coreui/coreui-react/commit/59d31b7a315c115891ef0be371decddd6d0af68d)
+- chore: update changelog [`5f71c83`](https://github.com/coreui/coreui-react/commit/5f71c8306e86fdea0097483a57475b5ddb7e43b5)
+- feat: CSidebarNavItem: allow passing nodes to 'name' prop #140 [`074c7e7`](https://github.com/coreui/coreui-react/commit/074c7e775543efc3a87c904f4c8704883127edb5)
+- fix: CSidebar: disable 'useCapture' in overlaid sidebar closing [`30e7004`](https://github.com/coreui/coreui-react/commit/30e7004dd8edb8e947048188911b8a20049375e8)
+- fix: CDataTable: add space in 'noItemsText' [`1d41870`](https://github.com/coreui/coreui-react/commit/1d41870ca606e0c628fc89854ad3aad6490cb839)
+
+#### [3.2.3](https://github.com/coreui/coreui-react/compare/3.2.2...3.2.3)
+
+> 11 August 2020
+
+- chore: 3.2.3 version release - update dependencies [`f238624`](https://github.com/coreui/coreui-react/commit/f23862495a8a3d7e394108361dbee2d61dcb94fb)
+- chore: update changelog [`77a9487`](https://github.com/coreui/coreui-react/commit/77a94872ebdfcf235b29de8e7a3712db0bceb19c)
+- fix: CDataTable: fix wrong class assignment in itemsPerPageSelect #138 [`8425052`](https://github.com/coreui/coreui-react/commit/8425052d2c7cb4a431a1611977da98cc0f21b64c)
+
+#### [3.2.2](https://github.com/coreui/coreui-react/compare/3.2.1...3.2.2)
+
+> 31 July 2020
+
+- chore: 3.2.2 release: update dependencies [`895f454`](https://github.com/coreui/coreui-react/commit/895f4545e0de72c103e1e20b082161c1f9fab1e5)
+- fix: CDataTable component fixes [`9dae2ab`](https://github.com/coreui/coreui-react/commit/9dae2ab32fc9dcc730b1214ecb777776f5346bf9)
+- fix: CSidebarNavDropdown: add possibility of component as `icon` [`03c4c32`](https://github.com/coreui/coreui-react/commit/03c4c3239f42b174c703f0ee5b0eef45761ceb9f)
+- chore: update changelog [`df6d3b9`](https://github.com/coreui/coreui-react/commit/df6d3b9664c72690a542a1804fcff9164cc80f42)
+
+#### [3.2.1](https://github.com/coreui/coreui-react/compare/3.2.0...3.2.1)
+
+> 30 July 2020
+
+- chore: 3.2.1 release: update dependencies [`40bba4d`](https://github.com/coreui/coreui-react/commit/40bba4db24b2c83416397c0b6e269a70df626641)
+- chore: update chengelog [`cebb691`](https://github.com/coreui/coreui-react/commit/cebb69100d950948baa9e305a865a0ac95bf89a4)
+- fix: CDataTable: fix isSortable method [`581e5a2`](https://github.com/coreui/coreui-react/commit/581e5a20019f8c4981e1a9ad1e9be30f46297789)
+
+#### [3.2.0](https://github.com/coreui/coreui-react/compare/3.1.0...3.2.0)
+
+> 28 July 2020
+
+- chore: fix changelog [`0c6b6cb`](https://github.com/coreui/coreui-react/commit/0c6b6cbb2ef18e5c48be345bdace9ba51595a0f0)
+- chore: add postinstall script [`acde502`](https://github.com/coreui/coreui-react/commit/acde5021d1925e901926171b3381a34809f8cea5)
+- feat: CDataTable: add cleaner prop [`d0dba67`](https://github.com/coreui/coreui-react/commit/d0dba670cc49817e18f388fa80326d8b2141f6a7)
+- refactor: CDataTable: disable filtering and sorting on non data columns [`2b134aa`](https://github.com/coreui/coreui-react/commit/2b134aa0d388b99ab33ea574748814d4effba32e)
+- chore: 3.2.0 release: update dependencies [`9c8e377`](https://github.com/coreui/coreui-react/commit/9c8e37729073471c9a48e532e830782dec5ae1a6)
+- feat: CModal: add autofucus and `esc` key support [`ecc4920`](https://github.com/coreui/coreui-react/commit/ecc4920a6dc72b5b7a34cd71a08ccdae5d3ca156)
+- refactor: CDataTable: small refactors [`407201e`](https://github.com/coreui/coreui-react/commit/407201eddf3ce77591484dd78d2faa8d81a526e5)
+- feat: CDrodownMenu: hide menu on `esc` [`c4fea1c`](https://github.com/coreui/coreui-react/commit/c4fea1c72777ff63a62cf9c04cbb59f90cee882c)
+- chore: update changelog [`f3d83c3`](https://github.com/coreui/coreui-react/commit/f3d83c3286f4db4ad6b2b18bc8203b2944381d61)
+- fix: CDataTable disable auto removing columnFilter [`a745c28`](https://github.com/coreui/coreui-react/commit/a745c286c60bdbb7b75c7db263c303c860865508)
+- fix: CBreadcrumbRouter: display route only if it has 'name' key [`e4d743d`](https://github.com/coreui/coreui-react/commit/e4d743da43a51584ddf34a54746b9bd9208df44e)
+- fix: CSidebarNavItem: do not render `icon` if prop is undefined #133 [`5fd72b0`](https://github.com/coreui/coreui-react/commit/5fd72b05def832894f9c6b1b166182d984b5068b)
+
+#### [3.1.0](https://github.com/coreui/coreui-react/compare/3.0.6...3.1.0)
+
+> 23 July 2020
+
+- chore: modify library build [`62194bb`](https://github.com/coreui/coreui-react/commit/62194bb147e9327037778f951936663c14dc28e3)
+- refactor: add full propTypes to className prop in components [`cd9c98a`](https://github.com/coreui/coreui-react/commit/cd9c98a890c9717db3a882e39ac3ccde9a711db6)
+- chore: 3.1.0 release: update dependencies [`174370e`](https://github.com/coreui/coreui-react/commit/174370e754abf484bc47fba0641b7a3732e16de0)
+- fix: delete disabled string type from 'innerRef' prop [`5c91a7f`](https://github.com/coreui/coreui-react/commit/5c91a7f3fe705738508c9c79cb7edfd0694444fd)
+- chore: refactor typings [`7c584e4`](https://github.com/coreui/coreui-react/commit/7c584e4da250d7405080c59bc4721d0d4042bc16)
+- fix: make components using Transition component use new API #127 [`eba59c2`](https://github.com/coreui/coreui-react/commit/eba59c22abf28c55dc433e5cf5e8715cba9d12e0)
+- chore: add missing dependency [`0bb44f8`](https://github.com/coreui/coreui-react/commit/0bb44f8f9a406857c8652ce0fa548b458249a59e)
+- chore: update changelog [`14b0c52`](https://github.com/coreui/coreui-react/commit/14b0c52cbc3562792df5b73d6b58e668971111d8)
+- fix: CTabPane: fix passing innerRef [`7fa5601`](https://github.com/coreui/coreui-react/commit/7fa5601bd389078f7312b81c26962f2502dd6a87)
+- fix: CAlert: add innerRef prop [`c1022a8`](https://github.com/coreui/coreui-react/commit/c1022a8cc83b1a898bd18e774751597210108177)
+- feat: CSidebarNavItem: add possibility of passing icon as node [`520dc49`](https://github.com/coreui/coreui-react/commit/520dc49c2d1d1b39871ab864e64a8da18cef4273)
+- fix: CModal: fix deprecation warning [`ad88025`](https://github.com/coreui/coreui-react/commit/ad8802576a22fa612883e3d928087f234c402d60)
+- fix: CDropdownToggle: add role attribute in case of non-button tag [`4de6508`](https://github.com/coreui/coreui-react/commit/4de6508bbfdb128c07042b4c08e2bccc8b731988)
+
+#### [3.0.6](https://github.com/coreui/coreui-react/compare/3.0.5...3.0.6)
+
+> 15 July 2020
+
+- chore: 3.0.6 release - update dependencies [`86cdba4`](https://github.com/coreui/coreui-react/commit/86cdba439efcc0eba1dc795579e0f7c32c8475fa)
+- chore: dependencies update [`b49a95d`](https://github.com/coreui/coreui-react/commit/b49a95d19584356ef69cc174c6ba01a2f9144ee2)
+- chore: CCol: add 'xxl' breakpoint, clean component #128 [`4dd4704`](https://github.com/coreui/coreui-react/commit/4dd4704433e8bb3ab875a9db52cc31f67c010d27)
+- chore: Changelog update [`f1c00e8`](https://github.com/coreui/coreui-react/commit/f1c00e822644f9ea75fad7e11d014d9d78558fc6)
+
+#### [3.0.5](https://github.com/coreui/coreui-react/compare/3.0.4...3.0.5)
+
+> 30 June 2020
+
+- chore: 3.0.5 version release: update [`422a4ce`](https://github.com/coreui/coreui-react/commit/422a4ce75b65760781daac9a0ec0971607cb74cb)
+- fix: CModal: fix animation when rendered through portal [`dd28a8d`](https://github.com/coreui/coreui-react/commit/dd28a8de426842684cbcd70e038b8dad7aa72bd1)
+
+#### [3.0.4](https://github.com/coreui/coreui-react/compare/3.0.3...3.0.4)
+
+> 22 June 2020
+
+- fix: CBreadcrumbRouter: fix assigning paths to items #118 [`7e2c87b`](https://github.com/coreui/coreui-react/commit/7e2c87bfeec6ee03661a5bb891bfe439fe26c0f4)
+- chore: 3.0.4 version release: update dependencies [`5eac06b`](https://github.com/coreui/coreui-react/commit/5eac06b6f6ee1cffaf02a7e2e3696b517f324e56)
+
+#### [3.0.3](https://github.com/coreui/coreui-react/compare/3.0.2...3.0.3)
+
+> 17 June 2020
+
+- chore: add auto-changelog [`dd56a22`](https://github.com/coreui/coreui-react/commit/dd56a22df2479371b33abc3802fb4f0406525fe1)
+- chore: 3.0.3 version release: update dependencies and changelog [`293c637`](https://github.com/coreui/coreui-react/commit/293c63726e1a477af657d6b13fa619cba3ecde2f)
+- fix: CModal: fix animations [`7740fce`](https://github.com/coreui/coreui-react/commit/7740fcee3583d0fd9324f23d1cd12f0c9914b19a)
+- fix: CBreadcrumbRouter: add route parameters support #118 [`6d8b59b`](https://github.com/coreui/coreui-react/commit/6d8b59b9cfa145a30f4e54832941ce28ef514e29)
+- feat: CDataTable: add footerSlot prop [`4d68dc8`](https://github.com/coreui/coreui-react/commit/4d68dc8f31ac724b79a003d2c6240b6f064e6cd4)
+
+#### [3.0.2](https://github.com/coreui/coreui-react/compare/3.0.1...3.0.2)
+
+> 8 June 2020
+
+- chore: 3.0.2 version release [`780509e`](https://github.com/coreui/coreui-react/commit/780509ec5dac4ae2f4ca8a6f58bb2a719c286fcb)
+- refactor: CPopover: delete style import [`c24553d`](https://github.com/coreui/coreui-react/commit/c24553d8fe907dc29a98f36fcae36f4b4e4f8612)
+
+#### [3.0.1](https://github.com/coreui/coreui-react/compare/3.0.0...3.0.1)
+
+> 3 June 2020
+
+- chore: fix typings [`09ca1a5`](https://github.com/coreui/coreui-react/commit/09ca1a5915c16ce37cf43cb63e04adb59065e52e)
+- chore: 3.0.1 version release [`5bea981`](https://github.com/coreui/coreui-react/commit/5bea9814e56224b7ac01dd0749b85a822e2fbafb)
+
+#### [3.0.0](https://github.com/coreui/coreui-react/compare/3.0.0-rc.2...3.0.0)
+
+> 1 June 2020
+
+- fix: delete excessive components - CListGroupItemHeading/Text [`3681ad2`](https://github.com/coreui/coreui-react/commit/3681ad24225078f338d2b3d646ca71bf70de4095)
+- chore: 3.0.0 release [`aec0f09`](https://github.com/coreui/coreui-react/commit/aec0f093e08d92d38a3e633623e61971d7e93d67)
+- fix: prevent breaking change in CListGroupItemHeading/Text [`8299524`](https://github.com/coreui/coreui-react/commit/829952493cbd84ebc607ec748617fb9d666354d2)
+- feat: CSidebarNavItem: add color prop [`12c2ba3`](https://github.com/coreui/coreui-react/commit/12c2ba3b26d8cdc3aa6e9937f9ad3333a13e7788)
+- fix: CFade: assign nodeRef to Transition to prevent warning [`907e59a`](https://github.com/coreui/coreui-react/commit/907e59a6297a2221567aab5cba8548ec28e204e5)
+
+#### [3.0.0-rc.2](https://github.com/coreui/coreui-react/compare/v2.5.8...3.0.0-rc.2)
+
+> 29 May 2020
+
+- Breadcrumb rewrite, BuuttonGroup & ButtonToolbar refactor [`#2`](https://github.com/coreui/coreui-react/pull/2)
+- fix: CAlert: component refactor [`#1`](https://github.com/coreui/coreui-react/pull/1)
+- CoreUI v3.0.0-alpha.0 for React - demo update WIP [`c8905a3`](https://github.com/coreui/coreui-react/commit/c8905a3d86731d2a494fba52abed062a400a0830)
+- chore: delete demo [`5ef9a37`](https://github.com/coreui/coreui-react/commit/5ef9a375a1ecdaf509c57a72fffe76054c1dd69f)
+- chore: update dependencies add package-lock.json to github [`d37cc9b`](https://github.com/coreui/coreui-react/commit/d37cc9bb61aa726b21bc645050bf78bf4bebb6fb)
+- CoreUI v3.0.0-alpha.0 for React - initial commit [`9113dbd`](https://github.com/coreui/coreui-react/commit/9113dbd668d66556ddbf2c2154763fab388832e9)
+- chore: 3.0.0-beta.3 release - update dependencies and clean docs [`7a71431`](https://github.com/coreui/coreui-react/commit/7a7143183efe0846fdaad5a49750f2fd5ac31968)
+- chore: 3.0.0-beta.4 release [`f8c1a8b`](https://github.com/coreui/coreui-react/commit/f8c1a8b712316882855b5411847b2886bc551fab)
+- chore: 3.0.0-beta.1 release [`99dd67f`](https://github.com/coreui/coreui-react/commit/99dd67f60ef5d46b150bb20bb4940f9c9ec9557a)
+- chore: delete legacy components [`ab3aa58`](https://github.com/coreui/coreui-react/commit/ab3aa58f3cccf2a62f6035bb0fdc6b0fda8f1b40)
+- feat: add typings [`54dc1c6`](https://github.com/coreui/coreui-react/commit/54dc1c6dc2f868b00e694f16c0a4245cc5bccf49)
+- fix: CDataTable: many fixes and API changes [`a6085ce`](https://github.com/coreui/coreui-react/commit/a6085cef91fb9989a883e2771e35ace582e3f269)
+- - update: merge with new tooltip/popover (based on tipy.js) [`11a09d1`](https://github.com/coreui/coreui-react/commit/11a09d1da26fb196fae3722b153af2be4717ed15)
+- refactor: remove cssModules functionality [`df8c4c0`](https://github.com/coreui/coreui-react/commit/df8c4c0592de7a57f1c5f6844266eeaf378be1de)
+- update: popper update try, error with ver. 2.1: [`ef92bac`](https://github.com/coreui/coreui-react/commit/ef92bac50a4fbf35319740b9eac9d69f539726f8)
+- fix: CCarousel: rewrite components [`4e8ac70`](https://github.com/coreui/coreui-react/commit/4e8ac7086f266fb86ae9aff89a75f9401bef91d1)
+- fix: form components refactor: [`a3b3ccc`](https://github.com/coreui/coreui-react/commit/a3b3ccc7e9ebd0f612bf57f9b834a82d56448ff7)
+- refactor: extract CIcons, CCharts, minor changes [`a4c5e8c`](https://github.com/coreui/coreui-react/commit/a4c5e8c1a0865b9f5328818ace0a194f61515dda)
+- chore: 3.0.0-beta.2 release [`f6160fc`](https://github.com/coreui/coreui-react/commit/f6160fcb82dd645e7e8b557987473dd923357dda)
+- fix: Sidebar components rewrite: make them similar to Vue version [`8706cf0`](https://github.com/coreui/coreui-react/commit/8706cf077ccf6ac89fb0010d538c3babcd18607d)
+- fix: leave one state of CCarousel definition [`db633c8`](https://github.com/coreui/coreui-react/commit/db633c8cbaa988ef1fa120e16a26fb957be0c6ea)
+- fix: CModal component rewrite - simplify component [`55ceeef`](https://github.com/coreui/coreui-react/commit/55ceeef186fbe3f487d750e0e347728aa717e330)
+- refactor: change project folder architecture [`dcb2fd8`](https://github.com/coreui/coreui-react/commit/dcb2fd88be9593b89930570753d5dc0faba73114)
+- chore: cleanup [`4bbe3d3`](https://github.com/coreui/coreui-react/commit/4bbe3d3ac426902dc345e63c629a30470953c0c6)
+- fix: CDropdown: component rewrite: [`14c2675`](https://github.com/coreui/coreui-react/commit/14c26757d0abf34675a5d1125cd8109c83f98888)
+- fix: components cleanup [`f25cf59`](https://github.com/coreui/coreui-react/commit/f25cf590c24452e620b2e51c94164ea92c0fa1f6)
+- fix: refactor CToast components: [`4741e67`](https://github.com/coreui/coreui-react/commit/4741e6707afd8f86d15e83f80f76e440b61898d6)
+- fix: Breadcrumb components rewrite [`6d0e7fa`](https://github.com/coreui/coreui-react/commit/6d0e7fa293392f80dfb8a600f5f6f75d37d35e0b)
+- fix: delete unneeded components [`99586ab`](https://github.com/coreui/coreui-react/commit/99586ab3e5fb409105ac6d4570605583ca53362d)
+- fix: rewrite Brand components - make Brands simple wrappers [`ce4fdeb`](https://github.com/coreui/coreui-react/commit/ce4fdeb2ebbf90d9b36c16535800367927769c44)
+- fix: CPagination: component rewrite according to Vue functionality [`097d359`](https://github.com/coreui/coreui-react/commit/097d359c4fd72480d211b83fc5188a82ca62133c)
+- fix: merge CCollapse components, delete 'custom' and 'toggle' props [`63ba549`](https://github.com/coreui/coreui-react/commit/63ba54920d972ddd778216409f4134d3dd9fdcf0)
+- - update: warnings removed [`aa50395`](https://github.com/coreui/coreui-react/commit/aa503958be9a290379f1561a042e1ece7c22062d)
+- chore: delete dead code [`f6d2210`](https://github.com/coreui/coreui-react/commit/f6d2210586593a935c27f37daf36d442ae3b4d1c)
+- docs: changelog cleanup [`c6c3b39`](https://github.com/coreui/coreui-react/commit/c6c3b39a6795169119c24e27ce1ef7216a04089d)
+- fix: fix typings [`4631662`](https://github.com/coreui/coreui-react/commit/4631662660531fa847ec8211779027f215081a4a)
+- fix: components cleanup [`7108882`](https://github.com/coreui/coreui-react/commit/71088829915be675fc66ea99345f47a44bfdb899)
+- fix: CProgress: rewrite component similar to Vue version [`0781c4a`](https://github.com/coreui/coreui-react/commit/0781c4a939c4bf1a18ae17dd556022eb92e132dd)
+- feat: improve Tab activation mechanism, fix bugs [`625c04b`](https://github.com/coreui/coreui-react/commit/625c04b256fccfa9428271b26bad4c57f2487c88)
+- fix: CSidebar wrapper components fixes [`d17c8ff`](https://github.com/coreui/coreui-react/commit/d17c8ff8c55b8d367b55cbdd99fd4fa408dcb86c)
+- refactor: clean components with fade functionality [`e23dd3f`](https://github.com/coreui/coreui-react/commit/e23dd3fc8b785ec7730ae072d21170a25af4bd4e)
+- - fix: CSidebar - merge with Krzysiek [`a47bca1`](https://github.com/coreui/coreui-react/commit/a47bca1ec0a4fad34342229a2a44fbd0fb0b1cce)
+- fix: CSwitch component fixes: [`4f7e74b`](https://github.com/coreui/coreui-react/commit/4f7e74b84ce2d5a37081ee3c8b1e6d15dda34669)
+- - fix: CDropdownMenu: component rewrite [`9ce0f00`](https://github.com/coreui/coreui-react/commit/9ce0f00d8a0c054f557a46dbaede4ab409dbe956)
+- fix: CDropdownToggle: component rewrite [`137965e`](https://github.com/coreui/coreui-react/commit/137965ed782b04e51d28e0803e98d96e78efacdf)
+- chore: CListGroupItemHeading, CListGroupItemText - clean components [`118fa2a`](https://github.com/coreui/coreui-react/commit/118fa2a1f7e2e8926c2635bcbd27bcedb4a41925)
+- fix: CEmbed refactor: [`ee82fa0`](https://github.com/coreui/coreui-react/commit/ee82fa0d63539eafa813876cf65d12e4a8a54bfe)
+- fix: CDropdownItem, CDropdownHeader, CDropdownDivider: [`d0d000e`](https://github.com/coreui/coreui-react/commit/d0d000ec5ee88416365ec094f288afa86365fddc)
+- fix: CMedia: reduce components to basic functionality [`d175ad5`](https://github.com/coreui/coreui-react/commit/d175ad590d84dfc627efbeb5270145357e148871)
+- fix: CCardBody, CCardHeader, CCardFooter: add misiing props [`4171551`](https://github.com/coreui/coreui-react/commit/41715510539bd596e5550c4335f7ed54c1d1f98b)
+- refactor: CCard: Reduce column, deck, group components to CCardGroup [`707b3f8`](https://github.com/coreui/coreui-react/commit/707b3f84c4909320ab19ad606b88778ce5f548c7)
+- fix:  turn CHeader sub-components to simple wrappers without props [`ddf287e`](https://github.com/coreui/coreui-react/commit/ddf287e3d86e7b34cdad5795dc8a15b4c4363858)
+- - update: custom is true by default [`4827eb9`](https://github.com/coreui/coreui-react/commit/4827eb9a5ea5d947fde443e8c6b9d8afdf85b43d)
+- fix: peerDependencies [`bd0903a`](https://github.com/coreui/coreui-react/commit/bd0903aa1e3939bda2863b015e140841b653a3b9)
+- - update: react-popper v 2.1 added [`d043f6c`](https://github.com/coreui/coreui-react/commit/d043f6c7f0fc6fc5175cce4e1e33d558730cbca0)
+- feat: add CElementCover component [`9a254db`](https://github.com/coreui/coreui-react/commit/9a254db32c82ec664db18394cdb10b0aa4a6573f)
+- chore: delete CCustomInput component [`54f6aef`](https://github.com/coreui/coreui-react/commit/54f6aefe653842ffabbf099b7015a48ef5b78ec6)
+- fix: CWidgetBrand: fix wrong texts diplay, clean the component [`3431017`](https://github.com/coreui/coreui-react/commit/343101714259843a8be8219f33b4bfed80c9ef45)
+- fix: CLink: component refactor [`61859ed`](https://github.com/coreui/coreui-react/commit/61859ed4a72b3989d2cf64b8d6760fea6a426d94)
+- fix: CWidgetIcon: component API fix [`ea43b6b`](https://github.com/coreui/coreui-react/commit/ea43b6ba002b90e4ab171f8d1508ef59baf3e375)
+- feat: added internal CScrollbar component allowing menu animation [`50f8661`](https://github.com/coreui/coreui-react/commit/50f8661c1698302e70c55b96d541e83427287c32)
+- fix: CButton: component refactor [`5770132`](https://github.com/coreui/coreui-react/commit/5770132be29a73f25b7fe36b9a0ae7ac920aceb6)
+- chore: change Shared folder name to utils [`7cd4900`](https://github.com/coreui/coreui-react/commit/7cd4900406a1cbbff0d7590147064cb84e9ed0b2)
+- chore: delete obsolete CPopoverBody and CPopoverHeader components [`775f0fa`](https://github.com/coreui/coreui-react/commit/775f0fa97ea36e992dafd45a11592decd8b154a7)
+- fix: CListGroup, CListGroupItem fixes: [`950fab5`](https://github.com/coreui/coreui-react/commit/950fab53f15d1dbf9af4e2d4c793964ca733cf83)
+- fix: rename CHeaderSubheader to CSubheader, clean component [`302dd82`](https://github.com/coreui/coreui-react/commit/302dd82dcda686a2bdba7ae5b546ded6c15f5983)
+- fix: CWidgetSimple: component API fix [`abfb1d1`](https://github.com/coreui/coreui-react/commit/abfb1d1d023889bcc9685f95df0dd3c6fdadeee2)
+- fix: CWidgetProgressIcon: component API fix [`2b17cd7`](https://github.com/coreui/coreui-react/commit/2b17cd7b5d6ea4bf49e7efa1dba8c6fea98fb2bc)
+- fix: remove possibility of inheriting advanced transition options [`97ea903`](https://github.com/coreui/coreui-react/commit/97ea903a309b6acc8e82a6b6d56a86cc3802490e)
+- fix: CWidgetProgress: component API fix [`a80ec4a`](https://github.com/coreui/coreui-react/commit/a80ec4a0d87bc2ac0b21943ff3107f4d7d6d8680)
+- fix: CCollapse: fix component [`1aa4b69`](https://github.com/coreui/coreui-react/commit/1aa4b69e900c60f6eb00f6384a92e6735cf08f6f)
+- chore: CPortal: disable using component until it is well tested [`98ad19d`](https://github.com/coreui/coreui-react/commit/98ad19d3f393a2d651dbd8516a7148c6610f362c)
+- fix: CCard: delete 'custom' and corelating props [`e0f9c06`](https://github.com/coreui/coreui-react/commit/e0f9c0687f4f85d0ada02ffbf09c4b5bb0fea292)
+- fix: CSidebarMinimizer: component refactor [`b933237`](https://github.com/coreui/coreui-react/commit/b9332372f8ab0e1dbb681f887e4c0dc4a7fe0e8e)
+- fix: CTable: simplify to simple wrapper [`549d954`](https://github.com/coreui/coreui-react/commit/549d954db092496b45fb8d4605485153143dce98)
+- fix: CModalHeader: simplify component: [`145fb7a`](https://github.com/coreui/coreui-react/commit/145fb7a8e7abb769ab28ad636ac367fd7a3308e9)
+- - fix: CDataTable component - now with Vue Scoped Slots prop equivalent [`abd9ff1`](https://github.com/coreui/coreui-react/commit/abd9ff104f215350045b69479f7b68d9d241330e)
+- fix: CWidgetDropdown: fix bugs: [`0aa4c8b`](https://github.com/coreui/coreui-react/commit/0aa4c8ba5f5bd746e9b52357bb55ba5ce66f1795)
+- fix: fix modal animation mechanism [`3165af9`](https://github.com/coreui/coreui-react/commit/3165af9228ffe4a50d6a34401530362be5a58c64)
+- fix: CToggler: delete 'custom' and 'type' props, clear component [`de0e368`](https://github.com/coreui/coreui-react/commit/de0e368cbe56cdcc539e93d579f99584831188dd)
+- - update: innerRef value set [`6a01afc`](https://github.com/coreui/coreui-react/commit/6a01afc05488573c8ab2100f0d8ed10790be688e)
+- fix: CSpinner: component refactor [`5066958`](https://github.com/coreui/coreui-react/commit/50669580ea8af68ed059790ba16bce00c1961783)
+- refactor: CTooltip: limit main props to essential [`3d36c5c`](https://github.com/coreui/coreui-react/commit/3d36c5cfeca9eb8a61027261aa8eb516b96b40ac)
+- fix: CNavItem: delete custom prop and correlated functionalities [`540e8c2`](https://github.com/coreui/coreui-react/commit/540e8c204c0c67139f3f54d8bd75048fc462dd5f)
+- - fix: CDataTable sorting [`80d6e20`](https://github.com/coreui/coreui-react/commit/80d6e20e333285d8945109bc041fafc126e8b176)
+- fix: CCardImg: Inherit CImg functionalities, change placemnt to variant [`fe1800e`](https://github.com/coreui/coreui-react/commit/fe1800e0850301cb01237487a8f4fbfbbccf0769)
+- chore: CImg: clean component [`032fc29`](https://github.com/coreui/coreui-react/commit/032fc29aaf1db4393a5c8dd3a34a967e86d5006a)
+- docs: README update [`18b1384`](https://github.com/coreui/coreui-react/commit/18b13848194550bd717eb5836f91ddd40829e7be)
+- fix: fix memory leaks in components using timeouts [`129bb59`](https://github.com/coreui/coreui-react/commit/129bb59afb52e9425dd19a77b0d00181534e6af4)
+- refactor: CNavLink: concise component [`a4634fb`](https://github.com/coreui/coreui-react/commit/a4634fbac11df253fe7af8c7a437592834057f72)
+- fix: CNav: delete 'horizontal' prop, clear component [`f5f4dd1`](https://github.com/coreui/coreui-react/commit/f5f4dd16bb86b3c35f5cd22b8a62afd465b0c7a5)
+- refactor: CCardLink: optimize definition [`8c65f88`](https://github.com/coreui/coreui-react/commit/8c65f882b54516b0441b99d160cc433f31618053)
+- fix: CButtonClose: component refactor [`a24f91c`](https://github.com/coreui/coreui-react/commit/a24f91c8ab021b6e1514f57cbf29e0c8d45ded77)
+- feat: add CModalTitle component [`c1c3033`](https://github.com/coreui/coreui-react/commit/c1c303319b2a47c60ddeef4a36824e5ff58360d2)
+- fix: CBadge: allow inheriting CLink functionality, smaller fixes [`35c3df6`](https://github.com/coreui/coreui-react/commit/35c3df6537b22425b48272a6cb1d23c13684ae5e)
+- fix: CNavbar: change sticky prop to bool, small fixes, clean code [`c6fbff2`](https://github.com/coreui/coreui-react/commit/c6fbff22474ad8a6336b13a131e5cd8c4f83b8cf)
+- fix: missing helper exports, minor fixes [`fb4d8e3`](https://github.com/coreui/coreui-react/commit/fb4d8e3c868a386fa34e04e83880facac31eb5e7)
+- fix: CButtonToolbar: component refactor: [`3bda5f7`](https://github.com/coreui/coreui-react/commit/3bda5f73ca43a1152fbce051243961eb6ad7a7b3)
+- fix: CButtonGroup: delete 'tag', add default role attribute [`688eb3b`](https://github.com/coreui/coreui-react/commit/688eb3b7041535402658ddd2e63c24455f6f8c4e)
+- fix: CLink: add 'disabled' prop: [`20db7d8`](https://github.com/coreui/coreui-react/commit/20db7d86c85e2f439aa6b61bd8bcdd8e10e3b318)
+- feat: add CSelect component [`57468e7`](https://github.com/coreui/coreui-react/commit/57468e74b12c98ce1ed6f1d60ec8e818f683efe4)
+- fix: move fade functionality from CTabs to CTabContent [`4f96e17`](https://github.com/coreui/coreui-react/commit/4f96e174bf8eb5706ec52fbdb20ad7fa5d7d8c7f)
+- fix: CInput rename elementSize/size to size/sizeHtml [`95e3f29`](https://github.com/coreui/coreui-react/commit/95e3f294394035957717e6967485f93654982e96)
+- feat: CCreateElement: add posibility of pasing component tag as string [`e294b4b`](https://github.com/coreui/coreui-react/commit/e294b4b6df619e75496676a41d3aeceb91e2cf42)
+- fix: CTabs: add fade prop inherited by CTabPane component [`33b78e7`](https://github.com/coreui/coreui-react/commit/33b78e7b8f2c1fa071bb40cb8b444cbef8a0b0bb)
+- fix: CCallout: delete tag prop, clean generating class [`5bacd2b`](https://github.com/coreui/coreui-react/commit/5bacd2b71c400f7c9af7d158ce77fbade1694d57)
+- fix: CFooter: set fixed to false by default, clean component [`8e4e30c`](https://github.com/coreui/coreui-react/commit/8e4e30cd03604b6856d279cb6b9ed5ea184c22b3)
+- fix: CSidebarNavDropdown: fix default closing mechanism [`c824fa7`](https://github.com/coreui/coreui-react/commit/c824fa799225494b811d85e833c379df2f7c9930)
+- fix: React.Fragment backward compatible [`9ee4493`](https://github.com/coreui/coreui-react/commit/9ee44938dfee86de9691d046897be15867b0ff54)
+- refactor: minor refactors [`fc2af86`](https://github.com/coreui/coreui-react/commit/fc2af866478b486379eafa4ec4c7b982af6ae94c)
+- chore: clean code (linter warnings) [`79f2325`](https://github.com/coreui/coreui-react/commit/79f2325c14c91b4f3592d868336825fe555eb649)
+- refactor: delete checked and onCheckedChange props [`be2f00b`](https://github.com/coreui/coreui-react/commit/be2f00b8ae5be74d5f9baf552e2fd6d3a5e59a72)
+- refactor: CAlert: delete transition prop [`96e98fe`](https://github.com/coreui/coreui-react/commit/96e98fe28e6c21153d831a45e6494fb6949e6be1)
+- refactor: change trigger props names to on{...}Change [`8f910c1`](https://github.com/coreui/coreui-react/commit/8f910c16554d7f805569543e24130e51c84b89c3)
+- feat: add CCreateElement component [`0cee7b0`](https://github.com/coreui/coreui-react/commit/0cee7b0b4d3e306813bd86bed4e1399eb50fa25c)
+- fix: CNavbarText: change default tag to 'div', clean component [`9977be0`](https://github.com/coreui/coreui-react/commit/9977be0c00ed546ac20e4a01f752981e3d3d9728)
+- feat: CLink: add default rel attribute when target="_blank" [`79dad26`](https://github.com/coreui/coreui-react/commit/79dad26e4b8940304be904bc94c1cb66e58348f2)
+- chore: clean components [`ef444f0`](https://github.com/coreui/coreui-react/commit/ef444f0166b395fe33217cc95eced48b5a28cb6b)
+- fix: CNavBarNav: delete wrong class 'nav', clean component [`9962cdd`](https://github.com/coreui/coreui-react/commit/9962cdd6547e9ab12338bc721c7e2adec4bf7b39)
+- fix: CSidebar, CSidebarNavDropdown: add default dropdown mode [`f677f5a`](https://github.com/coreui/coreui-react/commit/f677f5ae34026fb11696a90bb32900364b21d168)
+- fix: update CIcon imports [`16647ba`](https://github.com/coreui/coreui-react/commit/16647ba650c73a17e68423f9d07e69f157ff6e98)
+- - update: ... [`2132022`](https://github.com/coreui/coreui-react/commit/2132022438b18b31cdb844439a0c54d577925d0e)
+- fix: CImg: delete 'active' and 'alt' props, smaller refactors [`78255d4`](https://github.com/coreui/coreui-react/commit/78255d4e7b4e50c2a37d3298ddeffe26b6cd25e6)
+- Ship: 3.0.0-alpha.10 [`f77a972`](https://github.com/coreui/coreui-react/commit/f77a972af3b9cac1a5e19fb3056a660fba7c8c74)
+- fix: minor cleanup [`4cd82cb`](https://github.com/coreui/coreui-react/commit/4cd82cb6a0474718909521675783ae8a0dc7c159)
+- fix: CBreadcrumbRouter: generate path only if routes are passed [`79875db`](https://github.com/coreui/coreui-react/commit/79875dbd9595e36250255288d372d624031e0ad3)
+- fix: demo cleanup [`7bd82c8`](https://github.com/coreui/coreui-react/commit/7bd82c8587f96d1ca81a69835311dda7885e06db)
+- fix: CToast: correct behavior when fade is set to false [`1c73ce4`](https://github.com/coreui/coreui-react/commit/1c73ce48d2fadc8c851d7f32e3cab33532dc603d)
+- Ship: 3.0.0-alpha.12 [`c440f29`](https://github.com/coreui/coreui-react/commit/c440f29454aff171b7eef40c7c52d893da96e717)
+- chore: dependencies update [`09511b1`](https://github.com/coreui/coreui-react/commit/09511b156a83e2e60bed4de4d7e67825031cbe9b)
+- chore: 3.0.0-rc.1 release [`6b7819e`](https://github.com/coreui/coreui-react/commit/6b7819e4ec69f91ed24bef2dfdd56ab71d58f2a3)
+- - fix: default values for custom=true by default components set [`1c0a95e`](https://github.com/coreui/coreui-react/commit/1c0a95e2eeb4b28f9b681522d579c6d63dd5e67c)
+- - fix: CSlot render now null instead of '' (in some cases generate warnings) [`f00913e`](https://github.com/coreui/coreui-react/commit/f00913e6da18eb412a57c5a1be3621515996438d)
+- chore: change CIcon imports to CIconRaw imports [`0a18a61`](https://github.com/coreui/coreui-react/commit/0a18a61e9949b7e72e5749d9d0d0d22f6fab655c)
+- fix: CDataTable restore loading functionality: [`b8f2aaa`](https://github.com/coreui/coreui-react/commit/b8f2aaa3ba91e4c0e1c10cce633b097788e9c4fa)
+- refactor: CAlert: add CButtonClose component instead off html button [`91e7254`](https://github.com/coreui/coreui-react/commit/91e725437a42001ebda51addfdc570c2924f3599)
+- fix: Attempted import error: '@coreui/icons-react' does not contain a default export (imported as 'CIcon') [`f107c35`](https://github.com/coreui/coreui-react/commit/f107c3506cbc31e1fad031d6d3c414e8a90b568f)
+- fix: CDataTable: make recalculation mechanism 100% safe [`a6bc1df`](https://github.com/coreui/coreui-react/commit/a6bc1df75f1018e869150c59eb1106cd52178d94)
+- Ship: 3.0.0-alpha.1 [`c17a4be`](https://github.com/coreui/coreui-react/commit/c17a4be596669e351d2f501bd5abf84b642bdfb0)
+- chore: dependencies update and module fix [`86c4295`](https://github.com/coreui/coreui-react/commit/86c429579caeba2dbd3c9174d5fc260050e20551)
+- chore: 3.0.0-beta.6 release [`ef24ff2`](https://github.com/coreui/coreui-react/commit/ef24ff2e7840497852ef52c0532d18e490fcc254)
+- fix: CDataTable: fix bugs, protect against non-array 'items' prop [`c081868`](https://github.com/coreui/coreui-react/commit/c0818681f8766077f7fa6f445125d3856c258f1f)
+- fix: fix passing refs to components [`2752af4`](https://github.com/coreui/coreui-react/commit/2752af44a5cc56749fc60c686576e2aa4c8ee1e1)
+- fix: small fixes [`a00cc4f`](https://github.com/coreui/coreui-react/commit/a00cc4f7f3c597dfa3ad7a90ef34006c3b014967)
+- fix(CSwitch): A component is changing an uncontrolled input of type checkbox to be controlled [`955370e`](https://github.com/coreui/coreui-react/commit/955370e600fd19ec25bdffaea4ca37be9ad981a2)
+- - fix: link to Icon changed from dir to @ [`466c8f5`](https://github.com/coreui/coreui-react/commit/466c8f56439d082fdfe1a762b8e9d3d89d59d6f7)
+- refactor: replace CFormFeedback with CValidFeedback and CInvalidFeedback [`1e9f0b1`](https://github.com/coreui/coreui-react/commit/1e9f0b161fb985f4d52f1ba81819fad2c13d5c8a)
+- - link to navlink [`294d642`](https://github.com/coreui/coreui-react/commit/294d642a6aaa8a5b7af09c1ccfce775c6fa4c09c)
+- refactor: CBadge: clean component [`b33d2a3`](https://github.com/coreui/coreui-react/commit/b33d2a35f887c437ea9622868a8535fa380e1b35)
+- fix: CCreateElement: fix passing children [`51ad5f4`](https://github.com/coreui/coreui-react/commit/51ad5f41824f392710d523377271cfdedf0f8c0d)
+- chore: dependencies update [`b22e1ae`](https://github.com/coreui/coreui-react/commit/b22e1ae40cd54d758b893c400d2792de11157fc2)
+- fix: CSidebarNavItem: add innerRef prop [`dde7f1c`](https://github.com/coreui/coreui-react/commit/dde7f1c5b319edc554cdd3602e7603987295c818)
+- - fix: CCard default custom value set to true [`5c86a3a`](https://github.com/coreui/coreui-react/commit/5c86a3afca48ac606ed8abcd9615aa48c759dc21)
+- update: unused vars removed from CToastHeader [`2209f71`](https://github.com/coreui/coreui-react/commit/2209f71d2d9d139bf04e37201ce15aba8d5a7580)
+- chore: 3.0.0-beta.7 release [`5c3b022`](https://github.com/coreui/coreui-react/commit/5c3b022b92122504f9d77025606500430862299d)
+- fix: CSidebarNavDropdown: place useLocation hook in try/catch block [`2365228`](https://github.com/coreui/coreui-react/commit/236522882f5a60c189c4f380fa7ac2a12627412a)
+- fix: CSidebar: emit onShowChange only on close [`6be35c6`](https://github.com/coreui/coreui-react/commit/6be35c6918ef5465510fed0132b757c122224e2a)
+- fix: CSidebar: fix updating sidebar state [`7217997`](https://github.com/coreui/coreui-react/commit/7217997d3b67a669e054b149a76ebccda2d7c3b0)
+- chore: dependencies update [`0dec2d4`](https://github.com/coreui/coreui-react/commit/0dec2d48294d39795db98c1ef2c6af020e0f48d9)
+- fix: CMediaBody, CMediaFooter: minor fixes [`08b7460`](https://github.com/coreui/coreui-react/commit/08b74606fb6bf7eac834ca096e920f024979a2a3)
+- chore: dependencies update and cleanup [`ea1736d`](https://github.com/coreui/coreui-react/commit/ea1736d554933ad67ceab6628a8d2127cf99567a)
+- fix: CScrollbar: fix rtl mode [`fa66112`](https://github.com/coreui/coreui-react/commit/fa66112b0d81e0c9610f1e2d846970cc8b4f45e3)
+- Ship: 3.0.0-alpha.11 [`278d97b`](https://github.com/coreui/coreui-react/commit/278d97bd8f607fc191578a109abeb7b517d58f2c)
+- fix: restore footer slot to CWidgetIcon component [`5b18abd`](https://github.com/coreui/coreui-react/commit/5b18abd657639e7d29149d2475596f2021caaeb9)
+- fix: CBreadcrumb: fix cssModules [`eb1623f`](https://github.com/coreui/coreui-react/commit/eb1623f6a16c15c60277bdca5a211a1c5d08a77d)
+- chore: 3.0.0-rc.2 version release [`c30698c`](https://github.com/coreui/coreui-react/commit/c30698cfaed8282d045b2ee4d9dd51b72ea3b5fc)
+- fix: CSidebarNavDropdown: fix default mode for nested dropdowns [`c5922ca`](https://github.com/coreui/coreui-react/commit/c5922ca941b7393a02ff31770ea0d9b2ba42fceb)
+- chore: dependencies update [`080e634`](https://github.com/coreui/coreui-react/commit/080e6341afb00bae2e20d4db38cd0d5fd6d0f8d3)
+- refactor(CSidebarNavDroprdown): add console.warn on undefined pathname [`b127ecf`](https://github.com/coreui/coreui-react/commit/b127ecffb1d993b334e79e4cff57784522a2d081)
+- chore: 3.0.0-beta.5 release [`bcec1de`](https://github.com/coreui/coreui-react/commit/bcec1deb5dce3d5070a87e769c10cfeae8b0fd90)
+- fix: isObject typo [`97bf646`](https://github.com/coreui/coreui-react/commit/97bf64695d18dda40b3c5c4ed0d1ce16ccde733f)
+- fix: CSpinner: fix aria attributes [`7dd7aae`](https://github.com/coreui/coreui-react/commit/7dd7aaece47be51fa9c9d7cdd7759efc2a9ddd00)
+- fix: CPagination: add disabled prop to inactive links [`af9a1c2`](https://github.com/coreui/coreui-react/commit/af9a1c25ffa93173529686421f1e2c622a960a3e)
+- fix: CTabPane: fix tab assignment [`3d9f041`](https://github.com/coreui/coreui-react/commit/3d9f0415128ea8890ec97bddde109377fb1a6f3d)
+- fix: CDropdown: add specific arrow class [`9c937b5`](https://github.com/coreui/coreui-react/commit/9c937b51885a94e8f29d845bec850320b416b0b5)
+- Ship: 3.0.0-alpha.7 [`88f054c`](https://github.com/coreui/coreui-react/commit/88f054c84fcb23abffffe32909c5a33fda6c5e56)
+- fix: CBreadcrumbRouter:  add key to items [`bd0fbd4`](https://github.com/coreui/coreui-react/commit/bd0fbd4d60261e1fa5a9483d68c5839355d5adc4)
+- chore: add CSelect component to exports [`4c25748`](https://github.com/coreui/coreui-react/commit/4c2574800e0c88a19cc00aaec693aa4d334f90b6)
+- - fix: custom by default true for CNavItem [`29e24cf`](https://github.com/coreui/coreui-react/commit/29e24cf5b7288fde16fd8e6a93713b748f09b042)
+- fix: CDropdown: delete development console.log [`e64c1ef`](https://github.com/coreui/coreui-react/commit/e64c1ef025396cec530283ea431c13827754e0c9)
+- fix: CDropdown: add missing 'show' and 'dropdown' classes [`71e9122`](https://github.com/coreui/coreui-react/commit/71e91225854acdf35d56aaae3c95e413cd8c2a6c)
+- refactor: cleanup [`d88bcb3`](https://github.com/coreui/coreui-react/commit/d88bcb339f0e5564fb5439dd3c2d66eeb8fb1eec)
+- fix: fix modules in package.json [`c7ad9a5`](https://github.com/coreui/coreui-react/commit/c7ad9a546f1fb8797838842a828b2b8fd891ecfe)
+- fix: CLink: stop passing false to rel attribute [`7b7d9c6`](https://github.com/coreui/coreui-react/commit/7b7d9c6022acfa8c8505d55044b851ab2575f0c8)
+- fix: CProgressBar: fix striped state [`f1817f5`](https://github.com/coreui/coreui-react/commit/f1817f5d606fc1fdaf618b9974d700606be40a1e)
+- fix: CTabPane: fix error occuring when context is not passed [`ee952af`](https://github.com/coreui/coreui-react/commit/ee952af324f343bd923b90fb3f21e46d1841fdad)
+- fix: CDropdownToggle: allow caret in link toggle [`c7f6eba`](https://github.com/coreui/coreui-react/commit/c7f6ebabc82b9c542e78d75f376755ed19651df7)
+- Ship: 3.0.0-alpha.9 [`6d9a3f3`](https://github.com/coreui/coreui-react/commit/6d9a3f31abc2d4383711ee5caee796f4219944ee)
+- Ship: 3.0.0-alpha.8 [`c408665`](https://github.com/coreui/coreui-react/commit/c408665ba4c787872526de1f961708169232112e)
+- fix: change default 'fixed' value to true [`7c824c4`](https://github.com/coreui/coreui-react/commit/7c824c45e762eac6987688d50b2eb28514358ef6)
+- chore: enable library rapid development and installing from gh [`543dffd`](https://github.com/coreui/coreui-react/commit/543dffda4d492df82b42f6433b0734fb50ab5978)
+- Ship: 3.0.0-alpha.6 [`a64f06e`](https://github.com/coreui/coreui-react/commit/a64f06ec42e7f4dda9d9ccb21fba85f1cf57065b)
+- fix: es module [`5790081`](https://github.com/coreui/coreui-react/commit/5790081227b21ab79b85343a9eec1d6e2df7a4a3)
+- chore: import from source instead of module [`d09a4b8`](https://github.com/coreui/coreui-react/commit/d09a4b86ea7b595d3f28f3632b2145c69530ac26)
+- fix: CProgress: fix 'height' propType [`511c2a2`](https://github.com/coreui/coreui-react/commit/511c2a2fb351d9dea7afee34f1de93e26157c6bb)
+- - fix: CNavbar classes [`3e9994a`](https://github.com/coreui/coreui-react/commit/3e9994a4f2b214b7fd94b36770318717fea20c4d)
+- fix(CSidebarNavItem): Invalid argument supplied to to oneOfType [`d7f38e1`](https://github.com/coreui/coreui-react/commit/d7f38e1b81fc9617430a2cc38b7941e3997a5bf7)
+- - console.log removed [`5a0b08a`](https://github.com/coreui/coreui-react/commit/5a0b08a511e97012fd429bf0a8f1ac27e0448106)
+- fix: CSidebarNav: remove obsolete styles [`dbe7dc4`](https://github.com/coreui/coreui-react/commit/dbe7dc464941c5ff1b6e05c63d44dfc5a0ad12dc)
diff --git a/LICENSE b/LICENSE
index fbb053e0..010704f9 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 creativeLabs Łukasz Holeczek
+Copyright (c) 2020 creativeLabs Łukasz Holeczek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 467a62fb..ed84c282 100644
--- a/README.md
+++ b/README.md
@@ -1,230 +1,76 @@
-<p align="center">
-  <a href="https://coreui.io/">
-    <img
-      src="https://coreui.io/images/brand/coreui-signet.svg"
-      alt="CoreUI logo"
-      width="200"
-    />
-  </a>
-</p>
-
-<h3 align="center">CoreUI for React.js</h3>
-
-<p align="center">
-  React.js Components Library built on top of Bootstrap 5 and TypeScript.
-  <br>
-  <a href="https://coreui.io/react/docs/getting-started/introduction"><strong>Explore CoreUI for React.js docs »</strong></a>
-  <br>
-  <br>
-  <a href="https://github.com/coreui/coreui-react/issues/new?template=bug_report.md">Report bug</a>
-  ·
-  <a href="https://github.com/coreui/coreui-react/issues/new?template=feature_request.md">Request feature</a>
-  ·
-  <a href="https://coreui.io/blog/">Blog</a>
-</p>
-
-
-## Table of contents
-
-- [Quick start](#quick-start)
-- [Components](#components)
-- [Status](#status)
-- [Bugs and feature requests](#bugs-and-feature-requests)
-- [Documentation](#documentation)
-- [Frameworks](#frameworks)
-- [Templates](#templates)
-- [Contributing](#contributing)
-- [Community](#community)
-- [Versioning](#versioning)
-- [Creators](#creators)
-- [Support CoreUI Development](#support-coreui-development)
-- [Copyright and license](#copyright-and-license)
-
-## Quick start
-
-### Instalation
-
-Several quick start options are available:
-
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip)
-- Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
-- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
-- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
-
-Read the [Getting started page](https://coreui.io/react/docs/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
-
-### Stylesheets
-
-React components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception are custom CoreUI components, which don't exist in the Bootstrap ecosystem.
-
-#### CoreUI CSS files
-
-##### Installation
-
-```bash
-yarn add @coreui/coreui
-```
-
-or
-
-```bash
-npm install @coreui/coreui --save
-```
+# CoreUI React components library
 
-##### Basic usage
+[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Vue%20Admin%20Template%20&url=http://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)  
+[![npm_latest][npm-coreui-react-badge-latest]][npm-coreui-react]
+[![npm next][npm-coreui-react-badge-next]][npm-coreui-react]
+[![NPM downloads][npm-coreui-react-download]][npm-coreui-react]  
+[![Build](https://github.com/coreui/coreui-react/actions/workflows/project-check.yml/badge.svg)](https://github.com/coreui/coreui-react/actions/workflows/project-check.yml)
+[![Daily check](https://github.com/coreui/coreui-react/actions/workflows/daily-project-check.yml/badge.svg)](https://github.com/coreui/coreui-react/actions/workflows/daily-project-check.yml)  
+[![react](https://img.shields.io/badge/react-^17.0.1-lightgrey.svg?style=flat-square&logo=react)][coreui]
 
-```js
-import '@coreui/coreui/dist/css/coreui.min.css'
-```
+[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square
+[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react
+[npm-coreui-react-badge-latest]: https://img.shields.io/npm/v/@coreui/react/latest?style=flat-square
+[npm-coreui-react-badge-next]: https://img.shields.io/npm/v/@coreui/react/next?style=flat-square
+[coreui]: https://coreui.io/react
 
-#### Bootstrap CSS files
+##### @coreui/react v3 for [CoreUI 3 for React](https://coreui.io/react/)
 
-##### Installation
+###### Over 90 bootstrap based React components and directives
 
-```bash
-yarn add bootstrap
-```
+##### For library guide please visit our [Documentation site »](https://coreui.io/react/docs)
 
-or
+Check out demo of components usage: [CoreUI React Admin Template »](https://coreui.io/react/demo)
 
-```bash
-npm install bootstrap
-```
+![Template](https://coreui.io/images/github/vue-free-template-3.gif)
 
-##### Basic usage
+### Installation
 
-```js
-import "bootstrap/dist/css/bootstrap.min.css";
+Before installation you need to install [node and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) on your machine.
+```shell
+npm install @coreui/react
 ```
 
-## Components
-
-- [React Accordion](https://coreui.io/react/docs/components/accordion/)
-- [React Alert](https://coreui.io/react/docs/components/alert/)
-- [React Avatar](https://coreui.io/react/docs/components/avatar/)
-- [React Badge](https://coreui.io/react/docs/components/badge/)
-- [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/)
-- [React Button](https://coreui.io/react/docs/components/button/)
-- [React Button Group](https://coreui.io/react/docs/components/button-group/)
-- [React Callout](https://coreui.io/react/docs/components/callout/)
-- [React Card](https://coreui.io/react/docs/components/card/)
-- [React Carousel](https://coreui.io/react/docs/components/carousel/)
-- [React Checkbox](https://coreui.io/react/docs/forms/checkbox/)
-- [React Close Button](https://coreui.io/react/docs/components/close-button/)
-- [React Collapse](https://coreui.io/react/docs/components/collapse/)
-- [React Date Picker](https://coreui.io/react/docs/forms/date-picker/) **PRO**
-- [React Date Range Picker](https://coreui.io/react/docs/forms/date-range-picker/) **PRO**
-- [React Dropdown](https://coreui.io/react/docs/components/dropdown/)
-- [React Floating Labels](https://coreui.io/react/docs/forms/floating-labels/)
-- [React Footer](https://coreui.io/react/docs/components/footer/)
-- [React Header](https://coreui.io/react/docs/components/header/)
-- [React Image](https://coreui.io/react/docs/components/image/)
-- [React Input](https://coreui.io/react/docs/forms/input/)
-- [React Input Group](https://coreui.io/react/docs/forms/input-group/)
-- [React List Group](https://coreui.io/react/docs/components/list-group/)
-- [React Loading Button](https://coreui.io/react/docs/components/loading-button/) **PRO**
-- [React Modal](https://coreui.io/react/docs/components/modal/)
-- [React Multi Select](https://coreui.io/react/docs/forms/multi-select/) **PRO**
-- [React Navs & Tabs](https://coreui.io/react/docs/components/navs-tabs/)
-- [React Navbar](https://coreui.io/react/docs/components/navbar/)
-- [React Offcanvas](https://coreui.io/react/docs/components/offcanvas/)
-- [React Pagination](https://coreui.io/react/docs/components/pagination/)
-- [React Placeholder](https://coreui.io/react/docs/components/placeholder/)
-- [React Popover](https://coreui.io/react/docs/components/popover/)
-- [React Progress](https://coreui.io/react/docs/components/progress/)
-- [React Radio](https://coreui.io/react/docs/forms/radio/)
-- [React Range](https://coreui.io/react/docs/forms/range/)
-- [React Rating](https://coreui.io/react/docs/forms/rating/)
-- [React Select](https://coreui.io/react/docs/forms/select/)
-- [React Sidebar](https://coreui.io/react/docs/components/sidebar/)
-- [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO**
-- [React Smart Table](https://coreui.io/react/docs/components/smart-table/) **PRO**
-- [React Spinner](https://coreui.io/react/docs/components/spinner/)
-- [React Switch](https://coreui.io/react/docs/forms/switch/)
-- [React Table](https://coreui.io/react/docs/components/table/)
-- [React Textarea](https://coreui.io/react/docs/forms/textarea/)
-- [React Time Picker](https://coreui.io/react/docs/forms/time-picker/) **PRO**
-- [React Toast](https://coreui.io/react/docs/components/toast/)
-- [React Tooltip](https://coreui.io/react/docs/components/tooltip/)
-
-## Status
-
-[![npm version](https://img.shields.io/npm/v/@coreui/react)](https://www.npmjs.com/package/@coreui/react)
-
-## Bugs and feature requests
-
-Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui-react/issues/new).
-
-## Documentation
-
-The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI for React](https://coreui.io/react/docs/getting-started/introduction)
-
-### Running documentation locally
-
-1. Run `yarn install` or `npm install` to install the Node.js dependencies.
-2. Run `yarn bootstrap` or `npm run bootstrap` to link local packages together and install remaining package dependencies.
-3. From the root directory, run `yarn docs:dev` or `npm run docs:dev` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
-4. Open `http://localhost:8000/` in your browser, and voilà.
-
-## Frameworks
+#### Styling
 
-CoreUI supports most popular frameworks.
+Components are styled using @coreui/coreui CSS library, but you can use them also with bootstrap CSS library. That is possible because @coreui/coreui library is compatible with bootstrap, it just extends its functionalities. The only exception is custom CoreUI components, which don't exist in the Bootstrap ecosystem (template components, callout, switch).
 
-- [CoreUI for Angular](https://github.com/coreui/coreui-angular)
-- [CoreUI for Bootstrap (Vanilla JS)](https://github.com/coreui/coreui)
-- [CoreUI for React](https://github.com/coreui/coreui-react)
-- [CoreUI for Vue](https://github.com/coreui/coreui-vue)
+Styles have to be imported separately! Import [CoreUI](https://github.com/coreui/coreui) CSS library (recommended), or [Bootstrap](https://getbootstrap.com/) library
 
-## Templates
-
-Fully featured, out-of-the-box, templates for your application based on CoreUI.
-
-- [Angular Admin Template](https://coreui.io/angular)
-- [Bootstrap Admin Template](https://coreui.io/)
-- [React Admin Template](https://coreui.io/react)
-- [Vue Admin Template](https://coreui.io/vue)
-
-## Contributing
-
-Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
-
-Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
-
-## Community
-
-Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.
-
-- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/).
-
-You can also follow [@core_ui on Twitter](https://twitter.com/core_ui).
-
-## Versioning
-
-For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under [the Semantic Versioning guidelines](http://semver.org/).
-
-See [the Releases section of our project](https://github.com/coreui/coreui-react/releases) for changelogs for each release version.
-
-## Creators
+Installation:
+```shell
+npm install @coreui/coreui
+```
 
-**Łukasz Holeczek**
+Styles usage:
+```scss
+@import "~@coreui/coreui/scss/coreui";
+```
 
-* <https://twitter.com/lukaszholeczek>
-* <https://github.com/mrholek>
+### Changelog
+See the GitHub [release history](https://github.com/coreui/coreui-react/releases).
 
-**Andrzej Kopański**
+### Contributing
+See [CONTRIBUTING.md](https://github.com/coreui/coreui-react/blob/master/CONTRIBUTING.md).
 
-* <https://github.com/xidedix>
+### Credits
+Some design ideas and solutions in this library inspired by [reactstrap library](https://reactstrap.github.io/)
 
-**CoreUI Team**
 
-* <https://twitter.com/core_ui>
-* <https://github.com/coreui>
-* <https://github.com/orgs/coreui/people>
+---
+- bootstrapped with [nwb](https://github.com/insin/nwb) toolkit
 
-## Support CoreUI Development
+#### `npm run` scripts
 
-CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=react&src=github-coreui-react) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
+`package.json` is configured with `"scripts"` we can use with `npm run` while developing the project.
 
-## Copyright and license
+Command | Description |
+--- | ---
+`npm test` | run tests
+`npm run test:coverage` | run tests and produce a code coverage report in `coverage/`
+`npm run test:watch` | start a test server and re-run tests on every change
+`npm run build` | prepare for publishing to npm
+`npm run clean` | delete built resources
 
-Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
\ No newline at end of file
+#### see also:
+- [Developing React Components and Libraries with nwb](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb)
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..e1bf5250
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,48 @@
+module.exports = {
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "shippedProposals": true,
+        "modules": false,
+        "targets": {
+          "ie": 11
+        }
+      }
+    ],
+    "@babel/react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-export-default-from", 
+    "@babel/plugin-proposal-export-namespace-from", 
+    "@babel/plugin-transform-runtime", "@babel/plugin-proposal-object-rest-spread"
+  ],
+  "env": {
+    "esm-dir": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "loose": true,
+            "shippedProposals": true,
+            "modules": false,
+            "targets": {
+              "ie": 11
+            }
+          }
+        ],
+        "@babel/react"
+      ],
+      "plugins": [["@babel/plugin-transform-runtime", { "useESModules": true }]]
+    },
+    "test": {
+        "presets": [
+          "@babel/env", "@babel/preset-react"
+        ],
+        "plugins": [
+          "babel-plugin-dynamic-import-node",
+          // 'babel-plugin-transform-dynamic-import'
+        ]
+     }
+  }
+}
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
deleted file mode 100644
index 2498120d..00000000
--- a/eslint.config.mjs
+++ /dev/null
@@ -1,104 +0,0 @@
-import eslint from '@eslint/js'
-import tsParser from '@typescript-eslint/parser'
-import eslintPluginUnicorn from 'eslint-plugin-unicorn'
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
-import eslintPluginReact from 'eslint-plugin-react'
-import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
-import globals from 'globals'
-import typescriptEslint from 'typescript-eslint'
-
-export default typescriptEslint.config(
-  { ignores: ['**/*.d.ts', '**/coverage', '**/dist', 'eslint.config.mjs'] },
-  {
-    extends: [
-      eslint.configs.recommended,
-      ...typescriptEslint.configs.recommended,
-      eslintPluginUnicorn.configs['flat/recommended'],
-      eslintPluginReact.configs.flat.recommended,
-      eslintPluginReact.configs.flat['jsx-runtime'],
-    ],
-    plugins: {
-      'react-hooks': eslintPluginReactHooks,
-    },
-    files: ['packages/**/src/**/*.{js,ts,tsx}'],
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
-      parser: tsParser,
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-    },
-    settings: {
-      react: {
-        pragma: 'React',
-        version: 'detect',
-      },
-    },
-    rules: {
-      ...eslintPluginReactHooks.configs.recommended.rules,
-      'no-console': 'off',
-      'no-debugger': 'off',
-      'unicorn/filename-case': 'off',
-      'unicorn/no-array-for-each': 'off',
-      'unicorn/no-null': 'off',
-      'unicorn/prefer-dom-node-append': 'off',
-      'unicorn/prefer-export-from': 'off',
-      'unicorn/prefer-query-selector': 'off',
-      'unicorn/prevent-abbreviations': 'off',
-      'vue/require-default-prop': 'off',
-    },
-  },
-  {
-    files: ['**/*.mjs'],
-    languageOptions: {
-      globals: {
-        ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
-        ...globals.node,
-      },
-
-      ecmaVersion: 5,
-      sourceType: 'module',
-    },
-  },
-  {
-    files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
-    languageOptions: {
-      globals: {
-        ...globals.jest,
-      },
-    },
-  },
-  {
-    files: ['packages/docs/build/**'],
-    languageOptions: {
-      globals: {
-        ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
-        ...globals.node,
-      },
-
-      ecmaVersion: 5,
-      sourceType: 'commonjs',
-    },
-    rules: {
-      '@typescript-eslint/no-var-requires': 'off',
-      'no-console': 'off',
-      'unicorn/prefer-module': 'off',
-      'unicorn/prefer-top-level-await': 'off',
-    },
-  },
-  {
-    files: ['packages/docs/**'],
-    rules: {
-      '@typescript-eslint/no-var-requires': 'off',
-      'unicorn/prefer-module': 'off',
-    },
-  },
-  eslintPluginPrettierRecommended,
-)
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 00000000..13ec3945
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: path.resolve(__dirname, './'),
+  moduleFileExtensions: ['js', 'json', 'jsx'],
+  transform: {
+    '.*\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.jsx$': '<rootDir>/node_modules/babel-jest'
+  },
+  moduleNameMapper: {
+    "\\.(css|less)$": "<rootDir>/src/styleMock.js"
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(@coreui|tippy.js|perfect-scrollbar)/)"
+  ],
+  coverageDirectory: '<rootDir>/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx}',
+    '!src/index.umd.js',
+    '!**/node_modules/**'
+  ]
+};
\ No newline at end of file
diff --git a/lerna.json b/lerna.json
deleted file mode 100644
index e456a603..00000000
--- a/lerna.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "npmClient": "yarn",
-  "packages": ["packages/*"],
-  "version": "5.7.0",
-  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
-}
diff --git a/npm-postinstall.js b/npm-postinstall.js
new file mode 100644
index 00000000..f5dabcfa
--- /dev/null
+++ b/npm-postinstall.js
@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+const pkg = require(require('path').resolve('./package.json'))
+
+let packageJson = null
+try {
+ packageJson = require(require('path').resolve('../../../package.json'))
+} catch (e) {
+
+}
+
+const log = console.log
+
+const VERSIONS = {
+  '@coreui/coreui': {
+    url: 'https://coreui.io/pro/',
+    name: 'CoreUI CSS library'
+  },
+  '@coreui/angular': {
+    url: 'https://coreui.io/pro/angular/',
+    name: 'CoreUI Angular components library',
+    docs: 'https://coreui.io/angular/docs/'
+  },
+  '@coreui/react': {
+    url: 'https://coreui.io/pro/react/',
+    name: 'CoreUI React components library',
+    docs: 'https://coreui.io/react/docs/introduction'
+  },
+  '@coreui/vue': {
+    url: 'https://coreui.io/pro/vue/',
+    name: 'CoreUI Vue components library',
+    docs: 'https://coreui.io/vue/docs/introduction/'
+  },
+}
+
+log('\x1b[32m')
+log(`\x1b[1mThank you for using ${VERSIONS[pkg.name].name}! \x1b[22m`)
+log(`${VERSIONS[pkg.name].name} is an MIT licensed open source project and ` +
+`completely free to use. However, the amount of effort needed to maintain ` +
+`and develop new features for the project is not sustainable without proper ` +
+`financial backing. You can support development by buying Pro Version: ` +
+`\x1b[4m${VERSIONS[pkg.name].url}\x1b[24m]`)
+log('\x1b[39m')
+
+const isFramework = VERSIONS[pkg.name].name !== '@coreui/coreui'
+const haveStyles = packageJson && 
+  packageJson.dependencies && 
+    (
+      packageJson.dependencies['@coreui/coreui'] ||
+      packageJson.dependencies['@coreui/coreui-pro']
+    )
+
+if (isFramework && !haveStyles) {
+  log(`\x1b[1m\x1b[31mError: You don't have '@coreui/coreui' CSS library installed in ` +
+  `package.json dependencies section. You need to import it in order to style ` +
+  `CoreUI components. Installation docs: ${VERSIONS[pkg.name].docs} \n \x1b[0m`
+  )
+  // ` \x1b[33m`
+}
diff --git a/package.json b/package.json
index e51bf9e0..818dd43a 100644
--- a/package.json
+++ b/package.json
@@ -1,46 +1,125 @@
 {
-  "private": true,
-  "workspaces": [
-    "packages/*"
+  "name": "@coreui/react",
+  "version": "3.4.6",
+  "description": "CoreUI React 17 Bootstrap 4 components",
+  "license": "MIT",
+  "author": {
+    "name": "CoreUI",
+    "url": "https://coreui.io",
+    "github": "https://github.com/coreui",
+    "twitter": "https://twitter.com/core_ui"
+  },
+  "contributors": [
+    {
+      "name": "CoreUI Team",
+      "url": "https://github.com/orgs/coreui/people"
+    }
+  ],
+  "homepage": "https://coreui.io",
+  "main": "lib/index.js",
+  "types": "src/index.d.ts",
+  "module": "es/index.js",
+  "files": [
+    "css/",
+    "es/",
+    "lib/",
+    "src/",
+    "tests/",
+    "umd/",
+    "README.md",
+    "npm-postinstall.js"
   ],
   "scripts": {
-    "charts:build": "lerna run --scope \"@coreui/react-chartjs\" build --stream",
-    "charts:test": "lerna run --scope \"@coreui/react-chartjs\" test --stream",
-    "charts:test:update": "lerna run --scope \"@coreui/react-chartjs\" test:update --stream",
-    "docs:api": "lerna run --scope \"@coreui/react-docs\" api --stream",
-    "docs:dev": "lerna run --scope \"@coreui/react-docs\" develop --stream",
-    "docs:build": "lerna run --scope \"@coreui/react-docs\" build --stream",
-    "docs:clean": "lerna run --scope \"@coreui/react-docs\" clean",
-    "icons:build": "lerna run --scope \"@coreui/icons-react\" build --stream",
-    "icons:test": "lerna run --scope \"@coreui/icons-react\" test --stream",
-    "icons:test:update": "lerna run --scope \"@coreui/icons-react\" test:update --stream",
-    "lib:build": "lerna run --scope \"@coreui/react\" build --stream",
-    "lib:test": "lerna run --scope \"@coreui/react\" test --stream",
-    "lib:test:update": "lerna run --scope \"@coreui/react\" test:update --stream",
-    "lint": "eslint \"packages/**/src/**/*.{js,ts,tsx}\"",
-    "test": "npm-run-all charts:test icons:test lib:test",
-    "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
+    "clean": "nwb clean-module && nwb clean-demo",
+    "lint": "eslint src",
+    "changelog": "auto-changelog --starting-version 3.0.0-rc.2 --commit-limit false --hide-credit",
+    "build": "npm run build:lib && npm run build:esm",
+    "build:lib": "rollup --environment BUNDLE:false --c --sourcemap",
+    "build:esm": "cross-env BABEL_ENV=esm-dir babel src --out-dir es --copy-files && del-cli es/**/tests/**",
+    "postinstall": "node npm-postinstall",
+    "storybook": "start-storybook",
+    "jest:test": "cross-env BABEL_ENV=test jest",
+    "jest:coverage": "jest --coverage",
+    "jest:init": "jest init",
+    "jest:cache": "jest --clearCache"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@coreui/icons": "^2.0.0-rc.0",
+    "@coreui/icons-react": "^1.1.0",
+    "@coreui/utils": "~1.3.1",
+    "@popperjs/core": "^2.9.1",
+    "classnames": "~2.2.6",
+    "core-js": "^3.9.1",
+    "perfect-scrollbar": "~1.5.0",
+    "prop-types": "~15.7.2",
+    "react-transition-group": "~4.4.1",
+    "tippy.js": "^6.3.1"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^8.32.1",
-    "eslint": "^9.27.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.4.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-unicorn": "^59.0.1",
-    "globals": "^16.1.0",
-    "lerna": "^8.2.2",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.5.3",
-    "typescript-eslint": "^8.32.1"
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-export-default-from": "^7.12.13",
+    "@babel/plugin-proposal-export-namespace-from": "^7.12.13",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
+    "@coreui/coreui": "^3.4.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-replace": "^2.4.1",
+    "@storybook/addon-knobs": "^6.1.21",
+    "@storybook/addon-storysource": "^6.1.21",
+    "@storybook/react": "^6.1.21",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
+    "auto-changelog": "~2.2.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "del-cli": "^3.0.1",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.22.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-react": "^7.22.0",
+    "expect": "^26.6.2",
+    "jest": "^26.6.3",
+    "postcss": "^8.2.8",
+    "react": "^17.0.1",
+    "react-app-polyfill": "^2.0.0",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-test-renderer": "^17.0.1",
+    "rollup": "^2.41.2",
+    "rollup-plugin-peer-deps-external": "~2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
+    "sinon": "^9.2.4",
+    "webpack": "^4.46.0"
   },
-  "overrides": {
-    "gatsby-remark-external-links": {
-      "unist-util-find": "1.0.2"
-    }
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coreui/coreui-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/coreui/coreui-react/issues"
   },
-  "resolutions": {
-    "**/gatsby-remark-external-links/unist-util-find": "1.0.2"
-  }
+  "keywords": [
+    "coreui",
+    "react",
+    "bootstrap",
+    "framework",
+    "responsive",
+    "layout",
+    "component",
+    "components",
+    "library"
+  ]
 }
diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react
deleted file mode 160000
index aad2d31c..00000000
--- a/packages/coreui-icons-react
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit aad2d31c3cd8ca4d3ed7457ef02730f60038b6e8
diff --git a/packages/coreui-react-chartjs b/packages/coreui-react-chartjs
deleted file mode 160000
index c6077716..00000000
--- a/packages/coreui-react-chartjs
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit c6077716da130a1ba8f97346f2d98c60ea2cca3e
diff --git a/packages/coreui-react/LICENSE b/packages/coreui-react/LICENSE
deleted file mode 100644
index fbb053e0..00000000
--- a/packages/coreui-react/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 creativeLabs Łukasz Holeczek
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md
deleted file mode 100644
index c98015a2..00000000
--- a/packages/coreui-react/README.md
+++ /dev/null
@@ -1,262 +0,0 @@
-<p align="center">
-  <a href="https://coreui.io/">
-    <img
-      src="https://coreui.io/images/brand/coreui-signet.svg"
-      alt="CoreUI logo"
-      width="200"
-    />
-  </a>
-</p>
-
-<h3 align="center">CoreUI for React.js</h3>
-
-<p align="center">
-  React.js Components Library built on top of Bootstrap 5 and TypeScript.
-  <br>
-  <a href="https://coreui.io/react/docs/getting-started/introduction"><strong>Explore CoreUI for React.js docs »</strong></a>
-  <br>
-  <br>
-  <a href="https://github.com/coreui/coreui-react/issues/new?template=bug_report.md">Report bug</a>
-  ·
-  <a href="https://github.com/coreui/coreui-react/issues/new?template=feature_request.md">Request feature</a>
-  ·
-  <a href="https://coreui.io/blog/">Blog</a>
-</p>
-
-
-## Table of contents
-
-- [Quick start](#quick-start)
-- [Components](#components)
-- [Status](#status)
-- [Bugs and feature requests](#bugs-and-feature-requests)
-- [Documentation](#documentation)
-- [Frameworks](#frameworks)
-- [Templates](#templates)
-- [Contributing](#contributing)
-- [Community](#community)
-- [Versioning](#versioning)
-- [Creators](#creators)
-- [Support CoreUI Development](#support-coreui-development)
-- [Copyright and license](#copyright-and-license)
-
-## Quick start
-
-### Instalation
-
-Several quick start options are available:
-
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip)
-- Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
-- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
-- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
-
-Read the [Getting started page](https://coreui.io/react/docs/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
-
-### Stylesheets
-
-React components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception are custom CoreUI components, which don't exist in the Bootstrap ecosystem.
-
-#### CoreUI CSS files
-
-##### Installation
-
-```bash
-yarn add @coreui/coreui
-```
-
-or
-
-```bash
-npm install @coreui/coreui --save
-```
-
-##### Basic usage
-
-```js
-import '@coreui/coreui/dist/css/coreui.min.css'
-```
-
-#### Bootstrap CSS files
-
-##### Installation
-
-```bash
-yarn add bootstrap
-```
-
-or
-
-```bash
-npm install bootstrap
-```
-
-##### Basic usage
-
-```js
-import "bootstrap/dist/css/bootstrap.min.css";
-```
-
-## Components
-
-- [React Accordion](https://coreui.io/react/docs/components/accordion/)
-- [React Alert](https://coreui.io/react/docs/components/alert/)
-- [React Avatar](https://coreui.io/react/docs/components/avatar/)
-- [React Badge](https://coreui.io/react/docs/components/badge/)
-- [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/)
-- [React Button](https://coreui.io/react/docs/components/button/)
-- [React Button Group](https://coreui.io/react/docs/components/button-group/)
-- [React Callout](https://coreui.io/react/docs/components/callout/)
-- [React Card](https://coreui.io/react/docs/components/card/)
-- [React Carousel](https://coreui.io/react/docs/components/carousel/)
-- [React Checkbox](https://coreui.io/react/docs/forms/checkbox/)
-- [React Close Button](https://coreui.io/react/docs/components/close-button/)
-- [React Collapse](https://coreui.io/react/docs/components/collapse/)
-- [React Date Picker](https://coreui.io/react/docs/forms/date-picker/) **PRO**
-- [React Date Range Picker](https://coreui.io/react/docs/forms/date-range-picker/) **PRO**
-- [React Dropdown](https://coreui.io/react/docs/components/dropdown/)
-- [React Floating Labels](https://coreui.io/react/docs/forms/floating-labels/)
-- [React Footer](https://coreui.io/react/docs/components/footer/)
-- [React Header](https://coreui.io/react/docs/components/header/)
-- [React Image](https://coreui.io/react/docs/components/image/)
-- [React Input](https://coreui.io/react/docs/forms/input/)
-- [React Input Group](https://coreui.io/react/docs/forms/input-group/)
-- [React List Group](https://coreui.io/react/docs/components/list-group/)
-- [React Loading Button](https://coreui.io/react/docs/components/loading-button/) **PRO**
-- [React Modal](https://coreui.io/react/docs/components/modal/)
-- [React Multi Select](https://coreui.io/react/docs/forms/multi-select/) **PRO**
-- [React Navs & Tabs](https://coreui.io/react/docs/components/navs-tabs/)
-- [React Navbar](https://coreui.io/react/docs/components/navbar/)
-- [React Offcanvas](https://coreui.io/react/docs/components/offcanvas/)
-- [React Pagination](https://coreui.io/react/docs/components/pagination/)
-- [React Placeholder](https://coreui.io/react/docs/components/placeholder/)
-- [React Popover](https://coreui.io/react/docs/components/popover/)
-- [React Progress](https://coreui.io/react/docs/components/progress/)
-- [React Radio](https://coreui.io/react/docs/forms/radio/)
-- [React Range](https://coreui.io/react/docs/forms/range/)
-- [React Rating](https://coreui.io/react/docs/forms/rating/)
-- [React Select](https://coreui.io/react/docs/forms/select/)
-- [React Sidebar](https://coreui.io/react/docs/components/sidebar/)
-- [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO**
-- [React Smart Table](https://coreui.io/react/docs/components/smart-table/) **PRO**
-- [React Spinner](https://coreui.io/react/docs/components/spinner/)
-- [React Switch](https://coreui.io/react/docs/forms/switch/)
-- [React Table](https://coreui.io/react/docs/components/table/)
-- [React Textarea](https://coreui.io/react/docs/forms/textarea/)
-- [React Time Picker](https://coreui.io/react/docs/forms/time-picker/) **PRO**
-- [React Toast](https://coreui.io/react/docs/components/toast/)
-- [React Tooltip](https://coreui.io/react/docs/components/tooltip/)
-
-## Status
-
-[![npm version](https://img.shields.io/npm/v/@coreui/react)](https://www.npmjs.com/package/@coreui/react)
-
-## Bugs and feature requests
-
-Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui-react/issues/new).
-
-## Documentation
-
-The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI for React](https://coreui.io/react/docs/getting-started/introduction)
-
-### Running documentation locally
-
-1. Run `yarn install` or `npm install` to install the Node.js dependencies.
-2. Run `yarn bootstrap` or `npm run bootstrap` to link local packages together and install remaining package dependencies.
-3. From the root directory, run `yarn docs:dev` or `npm run docs:dev` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
-4. Open `http://localhost:8000/` in your browser, and voilà.
-
-## Frameworks
-
-CoreUI supports most popular frameworks.
-
-- [CoreUI for Angular](https://github.com/coreui/coreui-angular)
-- [CoreUI for Bootstrap (Vanilla JS)](https://github.com/coreui/coreui)
-- [CoreUI for React](https://github.com/coreui/coreui-react)
-- [CoreUI for Vue](https://github.com/coreui/coreui-vue)
-
-## Templates
-
-Fully featured, out-of-the-box, templates for your application based on CoreUI.
-
-- [Angular Admin Template](https://coreui.io/angular)
-- [Bootstrap Admin Template](https://coreui.io/)
-- [React Admin Template](https://coreui.io/react)
-- [Vue Admin Template](https://coreui.io/vue)
-
-## Contributing
-
-Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
-
-Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
-
-## Community
-
-Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.
-
-- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/).
-
-You can also follow [@core_ui on Twitter](https://twitter.com/core_ui).
-
-## Versioning
-
-For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under [the Semantic Versioning guidelines](http://semver.org/).
-
-See [the Releases section of our project](https://github.com/coreui/coreui-react/releases) for changelogs for each release version.
-
-## Creators
-
-**Łukasz Holeczek**
-
-- <https://twitter.com/lukaszholeczek>
-- <https://github.com/mrholek>
-
-**Andrzej Kopański**
-
-- <https://github.com/xidedix>
-
-**The CoreUI Team**
-
-- <https://github.com/orgs/coreui/people>
-
-## Support CoreUI Development
-
-CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
-
-<!--- StartOpenCollectiveBackers -->
-
-### Platinum Sponsors
-
-Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/platinum-sponsor-40959/checkout"><img src="https://opencollective.com/coreui/tiers/platinum-sponsor/0/avatar.svg?avatarHeight=100"></a>
-
-### Gold Sponsors
-
-Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/gold-sponsor-40960/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a> 
-
-### Silver Sponsors
-
-Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/silver-sponsor-40967/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a>
-
-### Bronze Sponsors
-
-Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile.
-
-<a href="https://opencollective.com/coreui/contribute/bronze-sponsor-40966/checkout"><img src="https://opencollective.com/coreui/tiers/bronze-sponsor/0/avatar.svg?avatarHeight=100"></a> 
-
-### Backers
-
-Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/).
-
-<a href="https://opencollective.com/coreui/contribute/backer-40965/checkout" target="_blank" rel="noopener"><img src="https://opencollective.com/coreui/backers.svg?width=890"></a>
-
-<!--- EndOpenCollectiveBackers -->
-
-## Copyright and license
-
-Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
diff --git a/packages/coreui-react/jest.config.js b/packages/coreui-react/jest.config.js
deleted file mode 100644
index f3aed54d..00000000
--- a/packages/coreui-react/jest.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict'
-
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['dist/'],
-}
diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
deleted file mode 100644
index 6952b2c9..00000000
--- a/packages/coreui-react/package.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
-  "name": "@coreui/react",
-  "version": "5.7.0",
-  "description": "UI Components Library for React.js",
-  "keywords": [
-    "react",
-    "react-component",
-    "react component",
-    "react bootstrap",
-    "bootstrap react",
-    "ui library",
-    "ui components",
-    "component library",
-    "components"
-  ],
-  "homepage": "https://coreui.io/react/",
-  "bugs": {
-    "url": "https://github.com/coreui/coreui-react/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/coreui/coreui-react.git"
-  },
-  "license": "MIT",
-  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "jsnext:main": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
-  "files": [
-    "dist/",
-    "src/"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "build": "npm-run-all clean build-*",
-    "build-cjs": "rollup --environment ESM:false --config",
-    "build-esm": "rollup --environment ESM:true --config",
-    "clean": "cross-env-shell \"rm -rf dist\"",
-    "test": "jest --coverage",
-    "test:update": "jest --coverage --updateSnapshot"
-  },
-  "dependencies": {
-    "@coreui/coreui": "^5.4.0",
-    "@popperjs/core": "^2.11.8",
-    "prop-types": "^15.8.1"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@types/jest": "^29.5.14",
-    "@types/prop-types": "15.7.14",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
-    "@types/react-transition-group": "^4.4.12",
-    "classnames": "^2.5.1",
-    "cross-env": "^7.0.3",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-transition-group": "^4.4.5",
-    "rollup": "^4.41.0",
-    "ts-jest": "^29.3.4",
-    "tslib": "^2.8.1",
-    "typescript": "^5.8.3"
-  },
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
-  }
-}
diff --git a/packages/coreui-react/rollup.config.mjs b/packages/coreui-react/rollup.config.mjs
deleted file mode 100644
index 1b55718e..00000000
--- a/packages/coreui-react/rollup.config.mjs
+++ /dev/null
@@ -1,49 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import typescript from '@rollup/plugin-typescript'
-import { readFileSync } from 'node:fs'
-import { dirname } from 'node:path'
-
-const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url)))
-
-const DIR_CJS = dirname(pkg.main)
-const DIR_ESM = dirname(pkg.module)
-const ESM = process.env.ESM === 'true'
-
-const plugins = [
-  resolve(),
-  typescript({
-    exclude: ['**/__tests__/**'],
-    tsconfig: './tsconfig.json',
-    compilerOptions: {
-      declarationDir: ESM ? DIR_ESM : DIR_CJS,
-      outDir: ESM ? DIR_ESM : DIR_CJS,
-    },
-  }),
-  commonjs({
-    include: ['../../node_modules/**'],
-  }),
-]
-
-const external = ['@popperjs/core', 'prop-types', 'react', 'react-dom']
-
-const rollupConfig = {
-  input: 'src/index.ts',
-  output: {
-    dir: ESM ? DIR_ESM : DIR_CJS,
-    format: ESM ? 'esm' : 'cjs',
-    exports: 'named',
-    preserveModules: true,
-    preserveModulesRoot: 'src',
-    sourcemap: true,
-    sourcemapPathTransform: (relativeSourcePath) => {
-      return relativeSourcePath
-        .replace('../../node_modules/', '../')
-        .replace('../src/', 'src/')
-    },
-  },
-  external,
-  plugins,
-}
-
-export default rollupConfig
diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx
deleted file mode 100644
index a3a275ae..00000000
--- a/packages/coreui-react/src/components/accordion/CAccordion.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CAccordionContext } from './CAccordionContext'
-
-export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * The active item key.
-   */
-  activeItemKey?: number | string
-  /**
-   * Make accordion items stay open when another item is opened
-   */
-  alwaysOpen?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * 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 CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
-  ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => {
-    const [_activeItemKey, setActiveKey] = useState(activeItemKey)
-
-    return (
-      <div
-        className={classNames('accordion', { 'accordion-flush': flush }, className)}
-        {...rest}
-        ref={ref}
-      >
-        <CAccordionContext.Provider value={{ _activeItemKey, alwaysOpen, setActiveKey }}>
-          {children}
-        </CAccordionContext.Provider>
-      </div>
-    )
-  },
-)
-
-CAccordion.propTypes = {
-  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  alwaysOpen: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  flush: PropTypes.bool,
-}
-
-CAccordion.displayName = 'CAccordion'
diff --git a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
deleted file mode 100644
index d98e8c43..00000000
--- a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CCollapse } from './../collapse/CCollapse'
-import { CAccordionItemContext } from './CAccordionItemContext'
-
-export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
-  ({ children, className, ...rest }, ref) => {
-    const { id, visible } = useContext(CAccordionItemContext)
-
-    return (
-      <CCollapse className="accordion-collapse" id={id} visible={visible}>
-        <div className={classNames('accordion-body', className)} {...rest} ref={ref}>
-          {children}
-        </div>
-      </CCollapse>
-    )
-  }
-)
-
-CAccordionBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CAccordionBody.displayName = 'CAccordionBody'
diff --git a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
deleted file mode 100644
index b5e9ca4c..00000000
--- a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CAccordionItemContext } from './CAccordionItemContext'
-
-export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
-  ({ children, className, ...rest }, ref) => {
-    const { id, visible, setVisible } = useContext(CAccordionItemContext)
-
-    return (
-      <button
-        type="button"
-        className={classNames('accordion-button', { collapsed: !visible }, className)}
-        aria-controls={id}
-        aria-expanded={visible}
-        onClick={() => setVisible(!visible)}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </button>
-    )
-  }
-)
-
-CAccordionButton.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CAccordionButton.displayName = 'CAccordionButton'
diff --git a/packages/coreui-react/src/components/accordion/CAccordionContext.ts b/packages/coreui-react/src/components/accordion/CAccordionContext.ts
deleted file mode 100644
index 4b5aa46f..00000000
--- a/packages/coreui-react/src/components/accordion/CAccordionContext.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createContext } from 'react'
-
-export interface CAccordionContextProps {
-  _activeItemKey?: number | string
-  alwaysOpen?: boolean
-  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
-}
-
-export const CAccordionContext = createContext({} as CAccordionContextProps)
diff --git a/packages/coreui-react/src/components/accordion/CAccordionHeader.tsx b/packages/coreui-react/src/components/accordion/CAccordionHeader.tsx
deleted file mode 100644
index b11650f4..00000000
--- a/packages/coreui-react/src/components/accordion/CAccordionHeader.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CAccordionButton } from './CAccordionButton'
-
-export interface CAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('accordion-header', className)} {...rest} ref={ref}>
-        <CAccordionButton>{children}</CAccordionButton>
-      </div>
-    )
-  },
-)
-
-CAccordionHeader.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CAccordionHeader.displayName = 'CAccordionHeader'
diff --git a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
deleted file mode 100644
index f69fe197..00000000
--- a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  useContext,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CAccordionContext } from './CAccordionContext'
-import { CAccordionItemContext } from './CAccordionItemContext'
-
-export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-   */
-  id?: string
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Item key.
-   */
-  itemKey?: number | string
-}
-
-export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
-  ({ children, className, id, itemKey, ...rest }, ref) => {
-    const uniqueId = useId()
-    const _id = id ?? uniqueId
-    const _itemKey = useRef(itemKey ?? _id)
-
-    const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
-    const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
-
-    useEffect(() => {
-      if (!alwaysOpen && visible) {
-        setActiveKey(_itemKey.current)
-      }
-    }, [visible])
-
-    useEffect(() => {
-      setVisible(Boolean(_activeItemKey === _itemKey.current))
-    }, [_activeItemKey])
-
-    return (
-      <div className={classNames('accordion-item', className)} {...rest} ref={ref}>
-        <CAccordionItemContext.Provider value={{ id: _id, setVisible, visible }}>
-          {children}
-        </CAccordionItemContext.Provider>
-      </div>
-    )
-  }
-)
-
-CAccordionItem.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-}
-
-CAccordionItem.displayName = 'CAccordionItem'
diff --git a/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts b/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts
deleted file mode 100644
index bbdeaf74..00000000
--- a/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createContext } from 'react'
-
-export interface CAccordionItemContextProps {
-  id: string
-  setVisible: (a: boolean) => void
-  visible?: boolean
-}
-
-export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx
deleted file mode 100644
index e1c8e342..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordion } from '../index'
-
-test('loads and displays CAccordion component', async () => {
-  const { container } = render(<CAccordion>Test</CAccordion>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordion customize', async () => {
-  const { container } = render(<CAccordion className="bazinga">Test</CAccordion>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordion use case test', async () => {
-  jest.useFakeTimers()
-  const { rerender } = render(<CAccordion flush={false}>Test</CAccordion>)
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
-  rerender(<CAccordion flush={true}>Test</CAccordion>)
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).toHaveClass('accordion-flush')
-  jest.runAllTimers()
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).toHaveClass('accordion-flush')
-  rerender(<CAccordion flush={false}>Test</CAccordion>)
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
-  jest.runAllTimers()
-  expect(screen.getByText('Test')).toHaveClass('accordion')
-  expect(screen.getByText('Test')).not.toHaveClass('accordion-flush')
-  jest.runAllTimers()
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx
deleted file mode 100644
index 795dc1d6..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordionBody } from '../index'
-
-test('loads and displays CAccordionBody component', async () => {
-  const { container } = render(<CAccordionBody>Test</CAccordionBody>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordionBody customize', async () => {
-  const { container } = render(<CAccordionBody>Test</CAccordionBody>)
-  expect(container.firstChild?.firstChild).toHaveClass('accordion-body')
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx
deleted file mode 100644
index 265e06bb..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordionButton } from '../index'
-
-test('loads and displays CAccordionButton component', async () => {
-  const { container } = render(<CAccordionButton>Test</CAccordionButton>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordionButton customize', async () => {
-  const { container } = render(<CAccordionButton className="bazinga">Test</CAccordionButton>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('accordion-button')
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx
deleted file mode 100644
index 44458eae..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordionHeader } from '../index'
-
-test('loads and displays CAccordionHeader component', async () => {
-  const { container } = render(<CAccordionHeader>Test</CAccordionHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordionHeader customize', async () => {
-  const { container } = render(<CAccordionHeader className="bazinga">Test</CAccordionHeader>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('accordion-header')
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx
deleted file mode 100644
index d32330c5..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAccordionItem } from '../index'
-
-test('loads and displays CAccordionItem component', async () => {
-  const { container } = render(<CAccordionItem>Test</CAccordionItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAccordionItem customize', async () => {
-  const { container } = render(<CAccordionItem className="bazinga">Test</CAccordionItem>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('accordion-item')
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap
deleted file mode 100644
index 237b2c04..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordion customize 1`] = `
-<div>
-  <div
-    class="accordion bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAccordion component 1`] = `
-<div>
-  <div
-    class="accordion"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap
deleted file mode 100644
index fa723f46..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap
+++ /dev/null
@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordionBody customize 1`] = `
-<div>
-  <div
-    class="accordion-collapse collapse"
-  >
-    <div
-      class="accordion-body"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAccordionBody component 1`] = `
-<div>
-  <div
-    class="accordion-collapse collapse"
-  >
-    <div
-      class="accordion-body"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap
deleted file mode 100644
index dae014eb..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordionButton customize 1`] = `
-<div>
-  <button
-    class="accordion-button collapsed bazinga"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CAccordionButton component 1`] = `
-<div>
-  <button
-    class="accordion-button collapsed"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
deleted file mode 100644
index 7491d9d3..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordionHeader customize 1`] = `
-<div>
-  <div
-    class="accordion-header bazinga"
-  >
-    <button
-      class="accordion-button collapsed"
-      type="button"
-    >
-      Test
-    </button>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAccordionHeader component 1`] = `
-<div>
-  <div
-    class="accordion-header"
-  >
-    <button
-      class="accordion-button collapsed"
-      type="button"
-    >
-      Test
-    </button>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap b/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap
deleted file mode 100644
index 721a013b..00000000
--- a/packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAccordionItem customize 1`] = `
-<div>
-  <div
-    class="accordion-item bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAccordionItem component 1`] = `
-<div>
-  <div
-    class="accordion-item"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/accordion/index.ts b/packages/coreui-react/src/components/accordion/index.ts
deleted file mode 100644
index e1cc95ee..00000000
--- a/packages/coreui-react/src/components/accordion/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { CAccordion } from './CAccordion'
-import { CAccordionBody } from './CAccordionBody'
-import { CAccordionButton } from './CAccordionButton'
-import { CAccordionHeader } from './CAccordionHeader'
-import { CAccordionItem } from './CAccordionItem'
-
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem }
diff --git a/packages/coreui-react/src/components/alert/CAlert.tsx b/packages/coreui-react/src/components/alert/CAlert.tsx
deleted file mode 100644
index 3efdb78f..00000000
--- a/packages/coreui-react/src/components/alert/CAlert.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
-
-import { CCloseButton } from '../close-button/CCloseButton'
-
-import { useForkedRef } from '../../hooks'
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color: Colors
-  /**
-   * Optionally add a close button to alert and allow it to self dismiss.
-   */
-  dismissible?: boolean
-  /**
-   * Callback fired when the component requests to be closed.
-   */
-  onClose?: () => void
-  /**
-   * Set the alert variant to a solid.
-   */
-  variant?: 'solid' | string
-  /**
-   * Toggle the visibility of component.
-   */
-  visible?: boolean
-}
-
-export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
-  (
-    {
-      children,
-      className,
-      color = 'primary',
-      dismissible,
-      variant,
-      visible = true,
-      onClose,
-      ...rest
-    },
-    ref,
-  ) => {
-    const alertRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, alertRef)
-    const [_visible, setVisible] = useState(visible)
-
-    useEffect(() => {
-      setVisible(visible)
-    }, [visible])
-
-    return (
-      <Transition
-        in={_visible}
-        mountOnEnter
-        nodeRef={alertRef}
-        onExit={onClose}
-        timeout={150}
-        unmountOnExit
-      >
-        {(state) => (
-          <div
-            className={classNames(
-              'alert',
-              variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
-              {
-                'alert-dismissible fade': dismissible,
-                show: state === 'entered',
-              },
-              className,
-            )}
-            role="alert"
-            {...rest}
-            ref={forkedRef}
-          >
-            {children}
-            {dismissible && <CCloseButton onClick={() => setVisible(false)} />}
-          </div>
-        )}
-      </Transition>
-    )
-  },
-)
-
-CAlert.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType.isRequired,
-  dismissible: PropTypes.bool,
-  onClose: PropTypes.func,
-  variant: PropTypes.string,
-  visible: PropTypes.bool,
-}
-
-CAlert.displayName = 'CAlert'
diff --git a/packages/coreui-react/src/components/alert/CAlertHeading.tsx b/packages/coreui-react/src/components/alert/CAlertHeading.tsx
deleted file mode 100644
index 9f47eb3a..00000000
--- a/packages/coreui-react/src/components/alert/CAlertHeading.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CAlertHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CAlertHeading: PolymorphicRefForwardingComponent<'h4', CAlertHeadingProps> =
-  forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
-    ({ children, as: Component = 'h4', className, ...rest }, ref) => {
-      return (
-        <Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
-          {children}
-        </Component>
-      )
-    },
-  )
-
-CAlertHeading.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CAlertHeading.displayName = 'CAlertHeading'
diff --git a/packages/coreui-react/src/components/alert/CAlertLink.tsx b/packages/coreui-react/src/components/alert/CAlertLink.tsx
deleted file mode 100644
index dacfa081..00000000
--- a/packages/coreui-react/src/components/alert/CAlertLink.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { AnchorHTMLAttributes, forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink } from '../link/CLink'
-
-export interface CAlertLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <CLink className={classNames('alert-link', className)} {...rest} ref={ref}>
-        {children}
-      </CLink>
-    )
-  },
-)
-
-CAlertLink.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CAlertLink.displayName = 'CAlertLink'
diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx
deleted file mode 100644
index 00e33441..00000000
--- a/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react'
-import { act, render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAlert } from '../index'
-
-test('loads and displays CAlert component', async () => {
-  let container: HTMLElement
-  await act(async () => {
-    const renderResult = render(<CAlert color="primary">Test</CAlert>)
-    container = renderResult.container
-  })
-  expect(container!).toMatchSnapshot()
-})
-
-test('CAlert customize', async () => {
-  let container: HTMLElement
-  await act(async () => {
-    const renderResult = render(
-      <CAlert
-        color="secondary"
-        className="bazinga"
-        dismissible={true}
-        variant="solid"
-        visible={true}
-      >
-        Test
-      </CAlert>
-    )
-    container = renderResult.container
-  })
-  expect(container!).toMatchSnapshot()
-  expect(container!.firstChild).toHaveClass('bazinga')
-  expect(container!.firstChild).toHaveClass('bg-secondary')
-  expect(container!.firstChild).toHaveClass('text-white')
-  expect(container!.firstChild).toHaveClass('alert-dismissible')
-})
-
-test('CAlert click close button', async () => {
-  jest.useFakeTimers()
-
-  const onClose = jest.fn()
-  render(
-    <CAlert color="primary" dismissible onClose={onClose}>
-      Test
-    </CAlert>
-  )
-
-  expect(onClose).toHaveBeenCalledTimes(0)
-
-  const btn = document.querySelector('.btn-close')
-
-  if (btn !== null) {
-    act(() => {
-      fireEvent.click(btn)
-      jest.runAllTimers()
-    })
-  }
-
-  expect(onClose).toHaveBeenCalledTimes(1)
-
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx
deleted file mode 100644
index cbe90bf8..00000000
--- a/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAlertHeading } from '../index'
-
-test('loads and displays CAlertHeading component', async () => {
-  const { container } = render(<CAlertHeading>Test</CAlertHeading>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAlertHeading customize', async () => {
-  const { container } = render(
-    <CAlertHeading as="h3" className="bazinga">
-      Test
-    </CAlertHeading>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('alert-heading')
-})
diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx
deleted file mode 100644
index 25c6bc04..00000000
--- a/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAlertLink } from '../index'
-
-test('loads and displays CAlertLink component', async () => {
-  const { container } = render(<CAlertLink>Test</CAlertLink>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAlertLink customize', async () => {
-  const { container } = render(
-    <CAlertLink className="bazinga" href="/bazinga">
-      Test
-    </CAlertLink>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('alert-link')
-})
diff --git a/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap
deleted file mode 100644
index 56496343..00000000
--- a/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAlert customize 1`] = `
-<div>
-  <div
-    class="alert bg-secondary text-white alert-dismissible fade show bazinga"
-    role="alert"
-  >
-    Test
-    <button
-      aria-label="Close"
-      class="btn btn-close"
-      type="button"
-    />
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAlert component 1`] = `
-<div>
-  <div
-    class="alert alert-primary show"
-    role="alert"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertHeading.spec.tsx.snap b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertHeading.spec.tsx.snap
deleted file mode 100644
index 02417c99..00000000
--- a/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertHeading.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAlertHeading customize 1`] = `
-<div>
-  <h3
-    class="alert-heading bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CAlertHeading component 1`] = `
-<div>
-  <h4
-    class="alert-heading"
-  >
-    Test
-  </h4>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.tsx.snap b/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.tsx.snap
deleted file mode 100644
index 33d4eac7..00000000
--- a/packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAlertLink customize 1`] = `
-<div>
-  <a
-    class="alert-link bazinga"
-    href="/bazinga"
-  >
-    Test
-  </a>
-</div>
-`;
-
-exports[`loads and displays CAlertLink component 1`] = `
-<div>
-  <a
-    class="alert-link"
-  >
-    Test
-  </a>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/alert/index.ts b/packages/coreui-react/src/components/alert/index.ts
deleted file mode 100644
index 7e182023..00000000
--- a/packages/coreui-react/src/components/alert/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CAlert } from './CAlert'
-import { CAlertHeading } from './CAlertHeading'
-import { CAlertLink } from './CAlertLink'
-
-export { CAlert, CAlertHeading, CAlertLink }
diff --git a/packages/coreui-react/src/components/avatar/CAvatar.tsx b/packages/coreui-react/src/components/avatar/CAvatar.tsx
deleted file mode 100644
index facdeec3..00000000
--- a/packages/coreui-react/src/components/avatar/CAvatar.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType, shapePropType, textColorsPropType } from '../../props'
-import type { Colors, Shapes, TextColors } from '../../types'
-
-export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Select the shape of the component.
-   *
-   * @type 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string
-   */
-  shape?: Shapes
-  /**
-   * Size the component small, large, or extra large.
-   */
-  size?: string
-  /**
-   * The src attribute for the img element.
-   */
-  src?: string
-  /**
-   * Sets the color context of the status indicator to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  status?: Colors
-  /**
-   * Sets the text color of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
-   */
-  textColor?: TextColors
-}
-
-export const CAvatar = forwardRef<HTMLDivElement, CAvatarProps>(
-  ({ children, className, color, shape, size, src, status, textColor, ...rest }, ref) => {
-    const statusClassName = status && classNames('avatar-status', `bg-${status}`)
-
-    return (
-      <div
-        className={classNames(
-          'avatar',
-          {
-            [`bg-${color}`]: color,
-            [`avatar-${size}`]: size,
-            [`text-${textColor}`]: textColor,
-          },
-          shape,
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {src ? <img src={src} className="avatar-img" /> : children}
-        {status && <span className={statusClassName}></span>}
-      </div>
-    )
-  },
-)
-
-CAvatar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  shape: shapePropType,
-  size: PropTypes.string,
-  src: PropTypes.string,
-  status: PropTypes.string,
-  textColor: textColorsPropType,
-}
-
-CAvatar.displayName = 'CAvatar'
diff --git a/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx b/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx
deleted file mode 100644
index 2cc0b298..00000000
--- a/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAvatar } from '../index'
-
-test('loads and displays CAvatar component', async () => {
-  const { container } = render(<CAvatar color="primary">Test</CAvatar>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAvatar customize', async () => {
-  let element
-  const { container } = render(
-    <CAvatar
-      className="bazinga"
-      color="secondary"
-      shape="rounded"
-      size="xl"
-      status="warning"
-      textColor="white"
-    >
-      Test
-    </CAvatar>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('avatar')
-  expect(container.firstChild).toHaveClass('bg-secondary')
-  expect(container.firstChild).toHaveClass('avatar-xl')
-  expect(container.firstChild).toHaveClass('text-white')
-  element = container.getElementsByClassName('avatar-status')
-  element = element[0]
-  expect(element).toHaveClass('bg-warning')
-})
-
-test('CAvatar customize image', async () => {
-  const { container } = render(
-    <CAvatar
-      className="bazinga"
-      color="secondary"
-      shape="rounded"
-      size="xl"
-      status="warning"
-      textColor="white"
-      src="/bazinga"
-    >
-      Test
-    </CAvatar>,
-  )
-  expect(container).toMatchSnapshot()
-
-  const element = container.getElementsByClassName('avatar-img')
-  expect(element.length).toBe(1)
-})
diff --git a/packages/coreui-react/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.tsx.snap b/packages/coreui-react/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.tsx.snap
deleted file mode 100644
index 52455e95..00000000
--- a/packages/coreui-react/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.tsx.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAvatar customize 1`] = `
-<div>
-  <div
-    class="avatar bg-secondary avatar-xl text-white rounded bazinga"
-  >
-    Test
-    <span
-      class="avatar-status bg-warning"
-    />
-  </div>
-</div>
-`;
-
-exports[`CAvatar customize image 1`] = `
-<div>
-  <div
-    class="avatar bg-secondary avatar-xl text-white rounded bazinga"
-  >
-    <img
-      class="avatar-img"
-      src="/bazinga"
-    />
-    <span
-      class="avatar-status bg-warning"
-    />
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAvatar component 1`] = `
-<div>
-  <div
-    class="avatar bg-primary"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/avatar/index.ts b/packages/coreui-react/src/components/avatar/index.ts
deleted file mode 100644
index 87a58f4b..00000000
--- a/packages/coreui-react/src/components/avatar/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CAvatar } from './CAvatar'
-
-export { CAvatar }
diff --git a/packages/coreui-react/src/components/backdrop/CBackdrop.tsx b/packages/coreui-react/src/components/backdrop/CBackdrop.tsx
deleted file mode 100644
index 42060744..00000000
--- a/packages/coreui-react/src/components/backdrop/CBackdrop.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
-
-import { useForkedRef } from '../../hooks'
-
-export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Toggle the visibility of modal component.
-   */
-  visible?: boolean
-}
-
-export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
-  ({ className = 'modal-backdrop', visible, ...rest }, ref) => {
-    const backdropRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, backdropRef)
-
-    return (
-      <Transition in={visible} mountOnEnter nodeRef={backdropRef} timeout={150} unmountOnExit>
-        {(state) => (
-          <div
-            className={classNames(className, 'fade', {
-              show: state === 'entered',
-            })}
-            {...rest}
-            ref={forkedRef}
-          />
-        )}
-      </Transition>
-    )
-  },
-)
-
-CBackdrop.propTypes = {
-  className: PropTypes.string,
-  visible: PropTypes.bool,
-}
-
-CBackdrop.displayName = 'CBackdrop'
diff --git a/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx b/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx
deleted file mode 100644
index 60cab767..00000000
--- a/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CBackdrop } from '../index'
-
-test('loads and displays CBackdrop component', async () => {
-  const { container } = render(<CBackdrop>Test</CBackdrop>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CBackdrop customize', async () => {
-  jest.useFakeTimers()
-  const { container } = render(<CBackdrop visible={true}>Test</CBackdrop>)
-  jest.runAllTimers()
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('modal-backdrop')
-  jest.useRealTimers()
-})
-
-test('CBackdrop customize 2', async () => {
-  jest.useFakeTimers()
-  const { container } = render(
-    <CBackdrop className="bazinga" visible={true}>
-      Test
-    </CBackdrop>,
-  )
-  jest.runAllTimers()
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap b/packages/coreui-react/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap
deleted file mode 100644
index 2144ce81..00000000
--- a/packages/coreui-react/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CBackdrop customize 1`] = `
-<div>
-  <div
-    class="modal-backdrop fade show"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CBackdrop customize 2 1`] = `
-<div>
-  <div
-    class="bazinga fade show"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CBackdrop component 1`] = `<div />`;
diff --git a/packages/coreui-react/src/components/backdrop/index.ts b/packages/coreui-react/src/components/backdrop/index.ts
deleted file mode 100644
index 7bca8a8a..00000000
--- a/packages/coreui-react/src/components/backdrop/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CBackdrop } from './CBackdrop'
-
-export { CBackdrop }
diff --git a/packages/coreui-react/src/components/badge/CBadge.tsx b/packages/coreui-react/src/components/badge/CBadge.tsx
deleted file mode 100644
index b96c3220..00000000
--- a/packages/coreui-react/src/components/badge/CBadge.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { colorPropType, shapePropType, textColorsPropType } from '../../props'
-import type { Colors, Shapes, TextColors } from '../../types'
-
-export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Position badge in one of the corners of a link or button.
-   */
-  position?: 'top-start' | 'top-end' | 'bottom-end' | 'bottom-start'
-  /**
-   * Select the shape of the component.
-   *
-   * @type 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string
-   */
-  shape?: Shapes
-  /**
-   * Size the component small.
-   */
-  size?: 'sm'
-  /**
-   * 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.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   * @since 5.0.0
-   */
-  textBgColor?: Colors
-  /**
-   * Sets the text color of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
-   */
-  textColor?: TextColors
-}
-export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = forwardRef<
-  HTMLDivElement | HTMLSpanElement,
-  CBadgeProps
->(
-  (
-    {
-      children,
-      as: Component = 'span',
-      className,
-      color,
-      position,
-      shape,
-      size,
-      textBgColor,
-      textColor,
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <Component
-        className={classNames(
-          'badge',
-          {
-            [`bg-${color}`]: color,
-            'position-absolute translate-middle': position,
-            'top-0': position?.includes('top'),
-            'top-100': position?.includes('bottom'),
-            'start-100': position?.includes('end'),
-            'start-0': position?.includes('start'),
-            [`badge-${size}`]: size,
-            [`text-${textColor}`]: textColor,
-            [`text-bg-${textBgColor}`]: textBgColor,
-          },
-          shape,
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
-
-CBadge.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
-  shape: shapePropType,
-  size: PropTypes.oneOf(['sm']),
-  textBgColor: colorPropType,
-  textColor: textColorsPropType,
-}
-
-CBadge.displayName = 'CBadge'
diff --git a/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx b/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx
deleted file mode 100644
index 1473d6f7..00000000
--- a/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CBadge } from '../index'
-
-test('loads and displays CBadge component', async () => {
-  const { container } = render(<CBadge color="primary">Test</CBadge>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CBadge customize', async () => {
-  const { container } = render(
-    <CBadge className="bazinga" color="warning" as="div" shape="rounded" textColor="white">
-      Test
-    </CBadge>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('badge')
-  expect(container.firstChild).toHaveClass('bg-warning')
-  expect(container.firstChild).toHaveClass('rounded')
-})
diff --git a/packages/coreui-react/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap b/packages/coreui-react/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap
deleted file mode 100644
index 909bd2b5..00000000
--- a/packages/coreui-react/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CBadge customize 1`] = `
-<div>
-  <div
-    class="badge bg-warning text-white rounded bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CBadge component 1`] = `
-<div>
-  <span
-    class="badge bg-primary"
-  >
-    Test
-  </span>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/badge/index.ts b/packages/coreui-react/src/components/badge/index.ts
deleted file mode 100644
index 689638b2..00000000
--- a/packages/coreui-react/src/components/badge/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CBadge } from './CBadge'
-
-export { CBadge }
diff --git a/packages/coreui-react/src/components/breadcrumb/CBreadcrumb.tsx b/packages/coreui-react/src/components/breadcrumb/CBreadcrumb.tsx
deleted file mode 100644
index 4802828c..00000000
--- a/packages/coreui-react/src/components/breadcrumb/CBreadcrumb.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CBreadcrumbProps extends HTMLAttributes<HTMLOListElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CBreadcrumb = forwardRef<HTMLOListElement, CBreadcrumbProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <nav aria-label="breadcrumb">
-        <ol className={classNames('breadcrumb', className)} {...rest} ref={ref}>
-          {children}
-        </ol>
-      </nav>
-    )
-  },
-)
-
-CBreadcrumb.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CBreadcrumb.displayName = 'CBreadcrumb'
diff --git a/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx b/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx
deleted file mode 100644
index fab4ec69..00000000
--- a/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink } from '../link/CLink'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CBreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   *
-   * @since 5.4.0
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * The `href` attribute for the inner `<CLink>` component.
-   */
-  href?: string
-}
-
-export const CBreadcrumbItem: PolymorphicRefForwardingComponent<'li', CBreadcrumbItemProps> =
-  forwardRef<HTMLLIElement, CBreadcrumbItemProps>(
-    ({ children, active, as, className, href, ...rest }, ref) => {
-      return (
-        <li
-          className={classNames(
-            'breadcrumb-item',
-            {
-              active: active,
-            },
-            className,
-          )}
-          {...(active && { 'aria-current': 'page' })}
-          {...rest}
-          ref={ref}
-        >
-          {href ? (
-            <CLink as={as} href={href}>
-              {children}
-            </CLink>
-          ) : (
-            children
-          )}
-        </li>
-      )
-    },
-  )
-
-CBreadcrumbItem.propTypes = {
-  active: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  href: PropTypes.string,
-}
-
-CBreadcrumbItem.displayName = 'CBreadcrumbItem'
diff --git a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx
deleted file mode 100644
index 9254313c..00000000
--- a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CBreadcrumb, CBreadcrumbItem } from '../index'
-
-test('loads and displays CBreadcrumb component', async () => {
-  const { container } = render(<CBreadcrumb></CBreadcrumb>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CBreadcrumb customize', async () => {
-  const { container } = render(
-    <CBreadcrumb className="bazinga">
-      <CBreadcrumbItem>Test A</CBreadcrumbItem>
-      <CBreadcrumbItem active={false}>Test B</CBreadcrumbItem>
-      <CBreadcrumbItem active={true}>Test C</CBreadcrumbItem>
-    </CBreadcrumb>,
-  )
-  const ol = container.querySelector('ol')
-  expect(container).toMatchSnapshot()
-  expect(ol).toHaveClass('bazinga')
-})
diff --git a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx
deleted file mode 100644
index fff97974..00000000
--- a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CBreadcrumbItem } from '../index'
-
-test('loads and displays CBreadcrumbItem component', async () => {
-  const { container } = render(<CBreadcrumbItem>Test</CBreadcrumbItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CBreadcrumbItem customize', async () => {
-  const { container } = render(
-    <CBreadcrumbItem active={true} className="bazinga">
-      Test
-    </CBreadcrumbItem>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('breadcrumb-item')
-  expect(container.firstChild).toHaveClass('active')
-})
diff --git a/packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap b/packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap
deleted file mode 100644
index 347521b1..00000000
--- a/packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CBreadcrumb customize 1`] = `
-<div>
-  <nav
-    aria-label="breadcrumb"
-  >
-    <ol
-      class="breadcrumb bazinga"
-    >
-      <li
-        class="breadcrumb-item"
-      >
-        Test A
-      </li>
-      <li
-        class="breadcrumb-item"
-      >
-        Test B
-      </li>
-      <li
-        aria-current="page"
-        class="breadcrumb-item active"
-      >
-        Test C
-      </li>
-    </ol>
-  </nav>
-</div>
-`;
-
-exports[`loads and displays CBreadcrumb component 1`] = `
-<div>
-  <nav
-    aria-label="breadcrumb"
-  >
-    <ol
-      class="breadcrumb"
-    />
-  </nav>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap b/packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap
deleted file mode 100644
index 9b5b54cb..00000000
--- a/packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CBreadcrumbItem customize 1`] = `
-<div>
-  <li
-    aria-current="page"
-    class="breadcrumb-item active bazinga"
-  >
-    Test
-  </li>
-</div>
-`;
-
-exports[`loads and displays CBreadcrumbItem component 1`] = `
-<div>
-  <li
-    class="breadcrumb-item"
-  >
-    Test
-  </li>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/breadcrumb/index.ts b/packages/coreui-react/src/components/breadcrumb/index.ts
deleted file mode 100644
index d402a910..00000000
--- a/packages/coreui-react/src/components/breadcrumb/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { CBreadcrumb } from './CBreadcrumb'
-import { CBreadcrumbItem } from './CBreadcrumbItem'
-
-export { CBreadcrumb, CBreadcrumbItem }
diff --git a/packages/coreui-react/src/components/button-group/CButtonGroup.tsx b/packages/coreui-react/src/components/button-group/CButtonGroup.tsx
deleted file mode 100644
index 108dcbcd..00000000
--- a/packages/coreui-react/src/components/button-group/CButtonGroup.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Size the component small or large.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
-   */
-  vertical?: boolean
-}
-
-export const CButtonGroup = forwardRef<HTMLDivElement, CButtonGroupProps>(
-  ({ children, className, size, vertical, ...rest }, ref) => {
-    return (
-      <div
-        className={classNames(
-          vertical ? 'btn-group-vertical' : 'btn-group',
-          { [`btn-group-${size}`]: size },
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-
-CButtonGroup.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'lg']),
-  vertical: PropTypes.bool,
-}
-
-CButtonGroup.displayName = 'CButtonGroup'
diff --git a/packages/coreui-react/src/components/button-group/CButtonToolbar.tsx b/packages/coreui-react/src/components/button-group/CButtonToolbar.tsx
deleted file mode 100644
index fe670b85..00000000
--- a/packages/coreui-react/src/components/button-group/CButtonToolbar.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CButtonToolbarProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CButtonToolbar = forwardRef<HTMLDivElement, CButtonToolbarProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('btn-toolbar', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CButtonToolbar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CButtonToolbar.displayName = 'CButtonToolbar'
diff --git a/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
deleted file mode 100644
index b7bd6195..00000000
--- a/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CButton } from '../../button/CButton'
-import { CButtonGroup } from '../index'
-
-test('loads and displays CButtonGroup component', async () => {
-  const { container } = render(<CButtonGroup></CButtonGroup>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CButtonGroup customize', async () => {
-  const { container } = render(
-    <CButtonGroup className="bazinga" size="lg" vertical={false}>
-      <CButton color="primary">Test A</CButton>
-      <CButton color="primary">Test B</CButton>
-      <CButton color="primary">Test C</CButton>
-    </CButtonGroup>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('btn-group')
-  expect(container.firstChild).toHaveClass('btn-group-lg')
-})
-
-test('CButtonGroup customize vertical', async () => {
-  const { container } = render(
-    <CButtonGroup className="bazinga" size="lg" vertical={true}>
-      <CButton color="primary">Test A</CButton>
-      <CButton color="primary">Test B</CButton>
-      <CButton color="primary">Test C</CButton>
-    </CButtonGroup>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('btn-group-vertical')
-  expect(container.firstChild).toHaveClass('btn-group-lg')
-})
diff --git a/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
deleted file mode 100644
index fd7706b8..00000000
--- a/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CButton } from '../../button/CButton'
-import { CButtonToolbar, CButtonGroup } from '../index'
-
-test('loads and displays CButtonToolbar component', async () => {
-  const { container } = render(<CButtonToolbar></CButtonToolbar>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CButtonToolbar customize', async () => {
-  const { container } = render(
-    <CButtonToolbar className="bazinga" role="group" aria-label="Bazinga">
-      <CButtonGroup role="group">
-        <CButton color="primary">1</CButton>
-        <CButton color="primary">2</CButton>
-        <CButton color="primary">3</CButton>
-      </CButtonGroup>
-      <CButtonGroup role="group">
-        <CButton color="primary">A</CButton>
-        <CButton color="primary">B</CButton>
-        <CButton color="primary">C</CButton>
-      </CButtonGroup>
-    </CButtonToolbar>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('btn-toolbar')
-})
diff --git a/packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonGroup.spec.tsx.snap b/packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonGroup.spec.tsx.snap
deleted file mode 100644
index e6404da6..00000000
--- a/packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonGroup.spec.tsx.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CButtonGroup customize 1`] = `
-<div>
-  <div
-    class="btn-group btn-group-lg bazinga"
-  >
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Test A
-    </button>
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Test B
-    </button>
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Test C
-    </button>
-  </div>
-</div>
-`;
-
-exports[`CButtonGroup customize vertical 1`] = `
-<div>
-  <div
-    class="btn-group-vertical btn-group-lg bazinga"
-  >
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Test A
-    </button>
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Test B
-    </button>
-    <button
-      class="btn btn-primary"
-      type="button"
-    >
-      Test C
-    </button>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CButtonGroup component 1`] = `
-<div>
-  <div
-    class="btn-group"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonToolbar.spec.tsx.snap b/packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonToolbar.spec.tsx.snap
deleted file mode 100644
index fb8de188..00000000
--- a/packages/coreui-react/src/components/button-group/__tests__/__snapshots__/CButtonToolbar.spec.tsx.snap
+++ /dev/null
@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CButtonToolbar customize 1`] = `
-<div>
-  <div
-    aria-label="Bazinga"
-    class="btn-toolbar bazinga"
-    role="group"
-  >
-    <div
-      class="btn-group"
-      role="group"
-    >
-      <button
-        class="btn btn-primary"
-        type="button"
-      >
-        1
-      </button>
-      <button
-        class="btn btn-primary"
-        type="button"
-      >
-        2
-      </button>
-      <button
-        class="btn btn-primary"
-        type="button"
-      >
-        3
-      </button>
-    </div>
-    <div
-      class="btn-group"
-      role="group"
-    >
-      <button
-        class="btn btn-primary"
-        type="button"
-      >
-        A
-      </button>
-      <button
-        class="btn btn-primary"
-        type="button"
-      >
-        B
-      </button>
-      <button
-        class="btn btn-primary"
-        type="button"
-      >
-        C
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CButtonToolbar component 1`] = `
-<div>
-  <div
-    class="btn-toolbar"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/button-group/index.ts b/packages/coreui-react/src/components/button-group/index.ts
deleted file mode 100644
index 2168c935..00000000
--- a/packages/coreui-react/src/components/button-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { CButtonToolbar } from './CButtonToolbar'
-import { CButtonGroup } from './CButtonGroup'
-
-export { CButtonToolbar, CButtonGroup }
diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx
deleted file mode 100644
index cbb003d7..00000000
--- a/packages/coreui-react/src/components/button/CButton.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { ElementType, forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink, CLinkProps } from '../link/CLink'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { colorPropType } from '../../props'
-import type { Colors, Shapes } from '../../types'
-
-export interface CButtonProps extends Omit<CLinkProps, 'size'> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * The href attribute specifies the URL of the page the link goes to.
-   */
-  href?: string
-  /**
-   * The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.
-   */
-  role?: string
-  /**
-   * Select the shape of the component.
-   *
-   * @type 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string
-   */
-  shape?: Shapes
-  /**
-   * Size the component small or large.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Specifies the type of button. Always specify the type attribute for the `<button>` element.
-   * Different browsers may use different default types for the `<button>` element.
-   */
-  type?: 'button' | 'submit' | 'reset'
-  /**
-   * Set the button variant to an outlined button or a ghost button.
-   */
-  variant?: 'outline' | 'ghost'
-}
-
-export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> = forwardRef<
-  HTMLButtonElement | HTMLAnchorElement,
-  CButtonProps
->(
-  (
-    { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest },
-    ref
-  ) => {
-    return (
-      <CLink
-        as={rest.href ? 'a' : as}
-        {...(!rest.href && { type: type })}
-        className={classNames(
-          'btn',
-          {
-            [`btn-${variant}-${color}`]: variant && color,
-            [`btn-${variant}`]: variant && !color,
-            [`btn-${color}`]: !variant && color,
-            [`btn-${size}`]: size,
-          },
-          shape,
-          className
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </CLink>
-    )
-  }
-)
-
-CButton.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  shape: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'lg']),
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  variant: PropTypes.oneOf(['outline', 'ghost']),
-}
-
-CButton.displayName = 'CButton'
diff --git a/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx b/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
deleted file mode 100644
index 2c8211c2..00000000
--- a/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CButton } from '../index'
-
-test('loads and displays CButton component', async () => {
-  const { container } = render(<CButton color="primary">Test</CButton>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CButton customize witch href', async () => {
-  const { container } = render(
-    <CButton color="primary" as="span" href="/bazinga">
-      Test
-    </CButton>,
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CButton customize', async () => {
-  const { container } = render(
-    <CButton
-      active={true}
-      className="bazinga"
-      color="warning"
-      as="span"
-      disabled={true}
-      role="bazinga"
-      shape="rounded"
-      size="lg"
-      type="submit"
-      variant="ghost"
-    >
-      Test
-    </CButton>,
-  )
-  expect(container).toMatchSnapshot()
-
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('btn')
-  expect(container.firstChild).toHaveClass('btn-ghost-warning')
-  expect(container.firstChild).toHaveClass('btn-lg')
-  expect(container.firstChild).toHaveClass('rounded')
-})
diff --git a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap
deleted file mode 100644
index 3c6dc128..00000000
--- a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CButton customize 1`] = `
-<div>
-  <span
-    aria-current="page"
-    class="btn btn-ghost-warning btn-lg rounded bazinga active disabled"
-    disabled=""
-    role="bazinga"
-    type="submit"
-  >
-    Test
-  </span>
-</div>
-`;
-
-exports[`CButton customize witch href 1`] = `
-<div>
-  <a
-    class="btn btn-primary"
-    href="/bazinga"
-  >
-    Test
-  </a>
-</div>
-`;
-
-exports[`loads and displays CButton component 1`] = `
-<div>
-  <button
-    class="btn btn-primary"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/button/index.ts b/packages/coreui-react/src/components/button/index.ts
deleted file mode 100644
index ad90d817..00000000
--- a/packages/coreui-react/src/components/button/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CButton } from './CButton'
-
-export { CButton }
diff --git a/packages/coreui-react/src/components/callout/CCallout.tsx b/packages/coreui-react/src/components/callout/CCallout.tsx
deleted file mode 100644
index d0f65224..00000000
--- a/packages/coreui-react/src/components/callout/CCallout.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CCalloutProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-}
-
-export const CCallout = forwardRef<HTMLDivElement, CCalloutProps>(
-  ({ children, className, color, ...rest }, ref) => {
-    return (
-      <div
-        className={classNames(
-          'callout',
-          {
-            [`callout-${color}`]: color,
-          },
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-
-CCallout.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-}
-
-CCallout.displayName = 'CCallout'
diff --git a/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
deleted file mode 100644
index 637727c7..00000000
--- a/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCallout } from '../index'
-
-test('loads and displays CCallout component', async () => {
-  const { container } = render(<CCallout>Test</CCallout>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCallout customize', async () => {
-  const { container } = render(
-    <CCallout className="bazinga" color="primary">
-      Test
-    </CCallout>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('callout')
-  expect(container.firstChild).toHaveClass('callout-primary')
-})
diff --git a/packages/coreui-react/src/components/callout/__tests__/__snapshots__/CCallout.spec.tsx.snap b/packages/coreui-react/src/components/callout/__tests__/__snapshots__/CCallout.spec.tsx.snap
deleted file mode 100644
index f11a87de..00000000
--- a/packages/coreui-react/src/components/callout/__tests__/__snapshots__/CCallout.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCallout customize 1`] = `
-<div>
-  <div
-    class="callout callout-primary bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCallout component 1`] = `
-<div>
-  <div
-    class="callout"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/callout/index.ts b/packages/coreui-react/src/components/callout/index.ts
deleted file mode 100644
index ebf0d06e..00000000
--- a/packages/coreui-react/src/components/callout/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CCallout } from './CCallout'
-
-export { CCallout }
diff --git a/packages/coreui-react/src/components/card/CCard.tsx b/packages/coreui-react/src/components/card/CCard.tsx
deleted file mode 100644
index 7b42223e..00000000
--- a/packages/coreui-react/src/components/card/CCard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Sets the text color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
-   */
-  textColor?: string
-  /**
-   * 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.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   * @since 5.0.0
-   */
-  textBgColor?: Colors
-}
-
-export const CCard = forwardRef<HTMLDivElement, CCardProps>(
-  ({ children, className, color, textBgColor, textColor, ...rest }, ref) => {
-    return (
-      <div
-        className={classNames(
-          'card',
-          {
-            [`bg-${color}`]: color,
-            [`text-${textColor}`]: textColor,
-            [`text-bg-${textBgColor}`]: textBgColor,
-          },
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-
-CCard.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  textBgColor: colorPropType,
-  textColor: PropTypes.string,
-}
-
-CCard.displayName = 'CCard'
diff --git a/packages/coreui-react/src/components/card/CCardBody.tsx b/packages/coreui-react/src/components/card/CCardBody.tsx
deleted file mode 100644
index f977e837..00000000
--- a/packages/coreui-react/src/components/card/CCardBody.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CCardBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CCardBody = forwardRef<HTMLDivElement, CCardBodyProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('card-body', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CCardBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardBody.displayName = 'CCardBody'
diff --git a/packages/coreui-react/src/components/card/CCardFooter.tsx b/packages/coreui-react/src/components/card/CCardFooter.tsx
deleted file mode 100644
index 054f2851..00000000
--- a/packages/coreui-react/src/components/card/CCardFooter.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-export interface CCardFooterProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CCardFooter = forwardRef<HTMLDivElement, CCardFooterProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('card-footer', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CCardFooter.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardFooter.displayName = 'CCardFooter'
diff --git a/packages/coreui-react/src/components/card/CCardGroup.tsx b/packages/coreui-react/src/components/card/CCardGroup.tsx
deleted file mode 100644
index 042e6ade..00000000
--- a/packages/coreui-react/src/components/card/CCardGroup.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CCardGroupProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CCardGroup = forwardRef<HTMLDivElement, CCardGroupProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('card-group', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CCardGroup.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardGroup.displayName = 'CCardGroup'
diff --git a/packages/coreui-react/src/components/card/CCardHeader.tsx b/packages/coreui-react/src/components/card/CCardHeader.tsx
deleted file mode 100644
index 70b1e114..00000000
--- a/packages/coreui-react/src/components/card/CCardHeader.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CCardHeader: PolymorphicRefForwardingComponent<'div', CCardHeaderProps> = forwardRef<
-  HTMLDivElement,
-  CCardHeaderProps
->(({ children, as: Component = 'div', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('card-header', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CCardHeader.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardHeader.displayName = 'CCardHeader'
diff --git a/packages/coreui-react/src/components/card/CCardImage.tsx b/packages/coreui-react/src/components/card/CCardImage.tsx
deleted file mode 100644
index 93462342..00000000
--- a/packages/coreui-react/src/components/card/CCardImage.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { ElementType, forwardRef, ImgHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CCardImageProps
-  extends ImgHTMLAttributes<HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Optionally orientate the image to the top, bottom, or make it overlaid across the card.
-   */
-  orientation?: 'top' | 'bottom'
-}
-
-export const CCardImage: PolymorphicRefForwardingComponent<'img', CCardImageProps> = forwardRef<
-  HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
-  CCardImageProps
->(({ children, as: Component = 'img', className, orientation, ...rest }, ref) => {
-  return (
-    <Component
-      className={classNames(orientation ? `card-img-${orientation}` : 'card-img', className)}
-      {...rest}
-      ref={ref}
-    >
-      {children}
-    </Component>
-  )
-})
-
-CCardImage.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  orientation: PropTypes.oneOf(['top', 'bottom']),
-}
-
-CCardImage.displayName = 'CCardImage'
diff --git a/packages/coreui-react/src/components/card/CCardImageOverlay.tsx b/packages/coreui-react/src/components/card/CCardImageOverlay.tsx
deleted file mode 100644
index 7f8ba71a..00000000
--- a/packages/coreui-react/src/components/card/CCardImageOverlay.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CCardImageOverlayProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CCardImageOverlay = forwardRef<HTMLDivElement, CCardImageOverlayProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('card-img-overlay', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CCardImageOverlay.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardImageOverlay.displayName = 'CCardImageOverlay'
diff --git a/packages/coreui-react/src/components/card/CCardLink.tsx b/packages/coreui-react/src/components/card/CCardLink.tsx
deleted file mode 100644
index 9bf10db0..00000000
--- a/packages/coreui-react/src/components/card/CCardLink.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { AnchorHTMLAttributes, forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink } from '../link/CLink'
-
-export interface CCardLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * The href attribute specifies the URL of the page the link goes to.
-   */
-  href?: string
-}
-
-export const CCardLink = forwardRef<HTMLAnchorElement, CCardLinkProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <CLink className={classNames('card-link', className)} {...rest} ref={ref}>
-        {children}
-      </CLink>
-    )
-  },
-)
-
-CCardLink.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardLink.displayName = 'CCardLink'
diff --git a/packages/coreui-react/src/components/card/CCardSubtitle.tsx b/packages/coreui-react/src/components/card/CCardSubtitle.tsx
deleted file mode 100644
index 0007ef27..00000000
--- a/packages/coreui-react/src/components/card/CCardSubtitle.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CCardSubtitleProps extends HTMLAttributes<HTMLHeadingElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CCardSubtitle: PolymorphicRefForwardingComponent<'h6', CCardSubtitleProps> =
-  forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
-    ({ children, as: Component = 'h6', className, ...rest }, ref) => {
-      return (
-        <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
-          {children}
-        </Component>
-      )
-    },
-  )
-
-CCardSubtitle.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardSubtitle.displayName = 'CCardSubtitle'
diff --git a/packages/coreui-react/src/components/card/CCardText.tsx b/packages/coreui-react/src/components/card/CCardText.tsx
deleted file mode 100644
index 6e8e03f4..00000000
--- a/packages/coreui-react/src/components/card/CCardText.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CCardTextProps extends HTMLAttributes<HTMLParagraphElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CCardText: PolymorphicRefForwardingComponent<'p', CCardTextProps> = forwardRef<
-  HTMLParagraphElement,
-  CCardTextProps
->(({ children, as: Component = 'p', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('card-text', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CCardText.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardText.displayName = 'CCardText'
diff --git a/packages/coreui-react/src/components/card/CCardTitle.tsx b/packages/coreui-react/src/components/card/CCardTitle.tsx
deleted file mode 100644
index 0b9e5ce1..00000000
--- a/packages/coreui-react/src/components/card/CCardTitle.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CCardTitle: PolymorphicRefForwardingComponent<'h5', CCardTitleProps> = forwardRef<
-  HTMLHeadingElement,
-  CCardTitleProps
->(({ children, as: Component = 'h5', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('card-title', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CCardTitle.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CCardTitle.displayName = 'CCardTitle'
diff --git a/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
deleted file mode 100644
index 6b4f9b11..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCard } from '../index'
-
-test('loads and displays CCard component', async () => {
-  const { container } = render(<CCard>Test</CCard>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCard customize', async () => {
-  const { container } = render(
-    <CCard className="bazinga" color="primary" textColor="warning">
-      Test
-    </CCard>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card')
-  expect(container.firstChild).toHaveClass('bg-primary')
-  expect(container.firstChild).toHaveClass('text-warning')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
deleted file mode 100644
index 0bf1ccd9..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardBody } from '../index'
-
-test('loads and displays CCardBody component', async () => {
-  const { container } = render(<CCardBody>Test</CCardBody>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardBody customize', async () => {
-  const { container } = render(<CCardBody className="bazinga">Test</CCardBody>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-body')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
deleted file mode 100644
index 991e3c7c..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardFooter } from '../index'
-
-test('loads and displays CCardFooter component', async () => {
-  const { container } = render(<CCardFooter>Test</CCardFooter>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardFooter customize', async () => {
-  const { container } = render(<CCardFooter className="bazinga">Test</CCardFooter>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-footer')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
deleted file mode 100644
index 239c1fd9..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import {
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardHeader,
-  CCardImage,
-  CCardLink,
-  CCardSubtitle,
-  CCardTitle,
-  CCardText,
-  CCardGroup,
-} from '../index'
-
-test('loads and displays CCardGroup component', async () => {
-  const { container } = render(<CCardGroup>Test</CCardGroup>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardGroup customize', async () => {
-  const { container } = render(<CCardGroup className="bazinga">Test</CCardGroup>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-group')
-})
-
-test('CCardGroup full example', async () => {
-  const { container } = render(
-    <CCardGroup className="bazinga">
-      <CCard>
-        <CCardImage as="svg">Image</CCardImage>
-        <CCardHeader>Header</CCardHeader>
-        <CCardBody>
-          <CCardTitle>Title</CCardTitle>
-          <CCardSubtitle>Subtitle</CCardSubtitle>
-          <CCardText>Text</CCardText>
-          <CCardLink>Link</CCardLink>
-        </CCardBody>
-        <CCardFooter>Footer</CCardFooter>
-      </CCard>
-      <CCard>
-        <CCardBody>
-          <CCardTitle>Card Title</CCardTitle>
-        </CCardBody>
-      </CCard>
-    </CCardGroup>,
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
deleted file mode 100644
index 0477b503..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardHeader } from '../index'
-
-test('loads and displays CCardHeader component', async () => {
-  const { container } = render(<CCardHeader>Test</CCardHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardHeader customize', async () => {
-  const { container } = render(
-    <CCardHeader className="bazinga" as="h3">
-      Test
-    </CCardHeader>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-header')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
deleted file mode 100644
index e1214093..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardImage } from '../index'
-
-test('loads and displays CCardImage component', async () => {
-  const { container } = render(<CCardImage />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardImage customize', async () => {
-  const { container } = render(<CCardImage className="bazinga" as="div" orientation="bottom" />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-img-bottom')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
deleted file mode 100644
index 6574856b..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardImageOverlay } from '../index'
-
-test('loads and displays CCardImageOverlay component', async () => {
-  const { container } = render(<CCardImageOverlay />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardImageOverlay customize', async () => {
-  const { container } = render(<CCardImageOverlay className="bazinga">Test</CCardImageOverlay>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('card-img-overlay')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
deleted file mode 100644
index 2373537f..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardLink } from '../index'
-
-test('loads and displays CCardLink component', async () => {
-  const { container } = render(<CCardLink>Test</CCardLink>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardLink customize', async () => {
-  const { container } = render(
-    <CCardLink className="bazinga" href="/bazinga">
-      Test
-    </CCardLink>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-link')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
deleted file mode 100644
index 8a23f9c8..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardSubtitle } from '../index'
-
-test('loads and displays CCardSubtitle component', async () => {
-  const { container } = render(<CCardSubtitle>Test</CCardSubtitle>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardSubtitle customize', async () => {
-  const { container } = render(
-    <CCardSubtitle className="bazinga" as="h3">
-      Test
-    </CCardSubtitle>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-subtitle')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
deleted file mode 100644
index 3cbb4ab2..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardText } from '../index'
-
-test('loads and displays CCardText component', async () => {
-  const { container } = render(<CCardText>Test</CCardText>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardText customize', async () => {
-  const { container } = render(
-    <CCardText className="bazinga" as="h3">
-      Test
-    </CCardText>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-text')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
deleted file mode 100644
index 9733a7f4..00000000
--- a/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCardTitle } from '../index'
-
-test('loads and displays CCardTitle component', async () => {
-  const { container } = render(<CCardTitle>Test</CCardTitle>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCardTitle customize', async () => {
-  const { container } = render(
-    <CCardTitle className="bazinga" as="h3">
-      Test
-    </CCardTitle>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card-title')
-})
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap
deleted file mode 100644
index 974a299e..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCard customize 1`] = `
-<div>
-  <div
-    class="card bg-primary text-warning bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCard component 1`] = `
-<div>
-  <div
-    class="card"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap
deleted file mode 100644
index 9944febc..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardBody customize 1`] = `
-<div>
-  <div
-    class="card-body bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCardBody component 1`] = `
-<div>
-  <div
-    class="card-body"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap
deleted file mode 100644
index 21370454..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardFooter customize 1`] = `
-<div>
-  <div
-    class="card-footer bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCardFooter component 1`] = `
-<div>
-  <div
-    class="card-footer"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardGroup.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardGroup.spec.tsx.snap
deleted file mode 100644
index ede6c3bb..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardGroup.spec.tsx.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardGroup customize 1`] = `
-<div>
-  <div
-    class="card-group bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CCardGroup full example 1`] = `
-<div>
-  <div
-    class="card-group bazinga"
-  >
-    <div
-      class="card"
-    >
-      <svg
-        class="card-img"
-      >
-        Image
-      </svg>
-      <div
-        class="card-header"
-      >
-        Header
-      </div>
-      <div
-        class="card-body"
-      >
-        <h5
-          class="card-title"
-        >
-          Title
-        </h5>
-        <h6
-          class="card-subtitle"
-        >
-          Subtitle
-        </h6>
-        <p
-          class="card-text"
-        >
-          Text
-        </p>
-        <a
-          class="card-link"
-        >
-          Link
-        </a>
-      </div>
-      <div
-        class="card-footer"
-      >
-        Footer
-      </div>
-    </div>
-    <div
-      class="card"
-    >
-      <div
-        class="card-body"
-      >
-        <h5
-          class="card-title"
-        >
-          Card Title
-        </h5>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCardGroup component 1`] = `
-<div>
-  <div
-    class="card-group"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap
deleted file mode 100644
index a2a1b231..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardHeader customize 1`] = `
-<div>
-  <h3
-    class="card-header bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CCardHeader component 1`] = `
-<div>
-  <div
-    class="card-header"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap
deleted file mode 100644
index 1d0e0b69..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardImage customize 1`] = `
-<div>
-  <div
-    class="card-img-bottom bazinga"
-  />
-</div>
-`;
-
-exports[`loads and displays CCardImage component 1`] = `
-<div>
-  <img
-    class="card-img"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap
deleted file mode 100644
index 5de8dbbc..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardImageOverlay customize 1`] = `
-<div>
-  <div
-    class="card-img-overlay bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCardImageOverlay component 1`] = `
-<div>
-  <div
-    class="card-img-overlay"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap
deleted file mode 100644
index 5e588fe2..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardLink customize 1`] = `
-<div>
-  <a
-    class="card-link bazinga"
-    href="/bazinga"
-  >
-    Test
-  </a>
-</div>
-`;
-
-exports[`loads and displays CCardLink component 1`] = `
-<div>
-  <a
-    class="card-link"
-  >
-    Test
-  </a>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap
deleted file mode 100644
index 67eddd18..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardSubtitle customize 1`] = `
-<div>
-  <h3
-    class="card-subtitle bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CCardSubtitle component 1`] = `
-<div>
-  <h6
-    class="card-subtitle"
-  >
-    Test
-  </h6>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap
deleted file mode 100644
index 11805df4..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardText customize 1`] = `
-<div>
-  <h3
-    class="card-text bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CCardText component 1`] = `
-<div>
-  <p
-    class="card-text"
-  >
-    Test
-  </p>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap b/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap
deleted file mode 100644
index e8ba2c9a..00000000
--- a/packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCardTitle customize 1`] = `
-<div>
-  <h3
-    class="card-title bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CCardTitle component 1`] = `
-<div>
-  <h5
-    class="card-title"
-  >
-    Test
-  </h5>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/card/index.ts b/packages/coreui-react/src/components/card/index.ts
deleted file mode 100644
index 21c35dd8..00000000
--- a/packages/coreui-react/src/components/card/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { CCard } from './CCard'
-import { CCardBody } from './CCardBody'
-import { CCardFooter } from './CCardFooter'
-import { CCardGroup } from './CCardGroup'
-import { CCardHeader } from './CCardHeader'
-import { CCardImage } from './CCardImage'
-import { CCardImageOverlay } from './CCardImageOverlay'
-import { CCardLink } from './CCardLink'
-import { CCardSubtitle } from './CCardSubtitle'
-import { CCardText } from './CCardText'
-import { CCardTitle } from './CCardTitle'
-
-export {
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardGroup,
-  CCardHeader,
-  CCardImage,
-  CCardImageOverlay,
-  CCardLink,
-  CCardSubtitle,
-  CCardText,
-  CCardTitle,
-}
diff --git a/packages/coreui-react/src/components/carousel/CCarousel.tsx b/packages/coreui-react/src/components/carousel/CCarousel.tsx
deleted file mode 100644
index 3d3186d3..00000000
--- a/packages/coreui-react/src/components/carousel/CCarousel.tsx
+++ /dev/null
@@ -1,304 +0,0 @@
-import React, {
-  Children,
-  forwardRef,
-  HTMLAttributes,
-  TouchEvent,
-  useState,
-  useEffect,
-  useRef,
-} from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { isInViewport } from '../../utils'
-import { useForkedRef } from '../../hooks'
-
-import { CCarouselContext } from './CCarouselContext'
-
-export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * index of the active item.
-   */
-  activeIndex?: number
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Adding in the previous and next controls.
-   */
-  controls?: boolean
-  /**
-   * Add darker controls, indicators, and captions.
-   */
-  dark?: boolean
-  /**
-   * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
-   */
-  interval?: boolean | number
-  /**
-   * Adding indicators at the bottom of the carousel for each item.
-   */
-  indicators?: boolean
-  /**
-   * Callback fired when a slide transition end.
-   */
-  onSlid?: (active: number, direction: string) => void
-  /**
-   * Callback fired when a slide transition starts.
-   */
-  onSlide?: (active: number, direction: string) => void
-  /**
-   * 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.
-   */
-  pause?: boolean | 'hover'
-  /**
-   * Set whether the carousel should support left/right swipe interactions on touchscreen devices.
-   *
-   * @since 4.5.0
-   */
-  touch?: boolean
-  /**
-   * Set type of the transition.
-   */
-  transition?: 'slide' | 'crossfade'
-  /**
-   * Set whether the carousel should cycle continuously or have hard stops.
-   */
-  wrap?: boolean
-}
-
-interface DataType {
-  timeout?: null | ReturnType<typeof setTimeout>
-}
-
-export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
-  (
-    {
-      children,
-      activeIndex = 0,
-      className,
-      controls,
-      dark,
-      indicators,
-      interval = 5000,
-      onSlid,
-      onSlide,
-      pause = 'hover',
-      touch = true,
-      transition,
-      wrap = true,
-      ...rest
-    },
-    ref
-  ) => {
-    const carouselRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, carouselRef)
-    const data = useRef<DataType>({}).current
-
-    const [active, setActive] = useState<number>(activeIndex)
-    const [animating, setAnimating] = useState<boolean>(false)
-    const [customInterval, setCustomInterval] = useState<boolean | number>()
-    const [direction, setDirection] = useState<string>('next')
-    const [itemsNumber, setItemsNumber] = useState<number>(0)
-    const [touchPosition, setTouchPosition] = useState<number | null>(null)
-    const [visible, setVisible] = useState<boolean>()
-
-    useEffect(() => {
-      setItemsNumber(Children.toArray(children).length)
-    })
-
-    useEffect(() => {
-      visible && cycle()
-    }, [visible])
-
-    useEffect(() => {
-      !animating && cycle()
-      !animating && onSlid && onSlid(active, direction)
-      animating && onSlide && onSlide(active, direction)
-    }, [animating])
-
-    useEffect(() => {
-      window.addEventListener('scroll', handleScroll)
-
-      return () => {
-        window.removeEventListener('scroll', handleScroll)
-      }
-    })
-
-    const cycle = () => {
-      _pause()
-      if (!wrap && active === itemsNumber - 1) {
-        return
-      }
-
-      if (typeof interval === 'number') {
-        data.timeout = setTimeout(
-          () => nextItemWhenVisible(),
-          typeof customInterval === 'number' ? customInterval : interval
-        )
-      }
-    }
-    const _pause = () => pause && data.timeout && clearTimeout(data.timeout)
-
-    const nextItemWhenVisible = () => {
-      // Don't call next when the page isn't visible
-      // or the carousel or its parent isn't visible
-      if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
-        if (animating) {
-          return
-        }
-        handleControlClick('next')
-      }
-    }
-
-    const handleControlClick = (direction: string) => {
-      if (animating) {
-        return
-      }
-      setDirection(direction)
-      if (direction === 'next') {
-        active === itemsNumber - 1 ? setActive(0) : setActive(active + 1)
-      } else {
-        active === 0 ? setActive(itemsNumber - 1) : setActive(active - 1)
-      }
-    }
-
-    const handleIndicatorClick = (index: number) => {
-      if (active === index) {
-        return
-      }
-
-      if (active < index) {
-        setDirection('next')
-        setActive(index)
-        return
-      }
-
-      if (active > index) {
-        setDirection('prev')
-        setActive(index)
-      }
-    }
-
-    const handleScroll = () => {
-      if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
-        setVisible(true)
-      } else {
-        setVisible(false)
-      }
-    }
-
-    const handleTouchMove = (e: TouchEvent) => {
-      const touchDown = touchPosition
-
-      if (touchDown === null) {
-        return
-      }
-
-      const currentTouch = e.touches[0].clientX
-      const diff = touchDown - currentTouch
-
-      if (diff > 5) {
-        handleControlClick('next')
-      }
-
-      if (diff < -5) {
-        handleControlClick('prev')
-      }
-
-      setTouchPosition(null)
-    }
-
-    const handleTouchStart = (e: TouchEvent) => {
-      const touchDown = e.touches[0].clientX
-      setTouchPosition(touchDown)
-    }
-
-    return (
-      <div
-        className={classNames(
-          'carousel slide',
-          {
-            'carousel-fade': transition === 'crossfade',
-          },
-          className
-        )}
-        {...(dark && { 'data-coreui-theme': 'dark' })}
-        onMouseEnter={_pause}
-        onMouseLeave={cycle}
-        {...(touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove })}
-        {...rest}
-        ref={forkedRef}
-      >
-        <CCarouselContext.Provider
-          value={{
-            setAnimating,
-            setCustomInterval,
-          }}
-        >
-          {indicators && (
-            <div className="carousel-indicators">
-              {Array.from({ length: itemsNumber }, (_, i) => i).map((index) => {
-                return (
-                  <button
-                    key={`indicator${index}`}
-                    onClick={() => {
-                      !animating && handleIndicatorClick(index)
-                    }}
-                    className={classNames({
-                      active: active === index,
-                    })}
-                    data-coreui-target=""
-                    {...(active === index && { 'aria-current': true })}
-                    aria-label={`Slide ${index + 1}`}
-                  />
-                )
-              })}
-            </div>
-          )}
-          <div className="carousel-inner">
-            {Children.map(children, (child, index) => {
-              if (React.isValidElement(child)) {
-                return React.cloneElement(child as React.ReactElement<any>, {
-                  active: active === index ? true : false,
-                  direction: direction,
-                  key: index,
-                })
-              }
-              return
-            })}
-          </div>
-          {controls && (
-            <>
-              <button className="carousel-control-prev" onClick={() => handleControlClick('prev')}>
-                <span className={`carousel-control-prev-icon`} aria-label="prev" />
-              </button>
-              <button className="carousel-control-next" onClick={() => handleControlClick('next')}>
-                <span className={`carousel-control-next-icon`} aria-label="next" />
-              </button>
-            </>
-          )}
-        </CCarouselContext.Provider>
-      </div>
-    )
-  }
-)
-
-CCarousel.propTypes = {
-  activeIndex: PropTypes.number,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  controls: PropTypes.bool,
-  dark: PropTypes.bool,
-  indicators: PropTypes.bool,
-  interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-  onSlid: PropTypes.func,
-  onSlide: PropTypes.func,
-  pause: PropTypes.oneOf([false, 'hover']),
-  touch: PropTypes.bool,
-  transition: PropTypes.oneOf(['slide', 'crossfade']),
-  wrap: PropTypes.bool,
-}
-
-CCarousel.displayName = 'CCarousel'
diff --git a/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx b/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx
deleted file mode 100644
index 353a6b1b..00000000
--- a/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CCarouselCaption = forwardRef<HTMLDivElement, CCarouselCaptionProps>(
-  ({ className, ...rest }, ref) => {
-    return <div className={classNames('carousel-caption', className)} {...rest} ref={ref} />
-  }
-)
-
-CCarouselCaption.propTypes = {
-  className: PropTypes.string,
-}
-
-CCarouselCaption.displayName = 'CCarouselCaption'
diff --git a/packages/coreui-react/src/components/carousel/CCarouselContext.ts b/packages/coreui-react/src/components/carousel/CCarouselContext.ts
deleted file mode 100644
index 6e21932b..00000000
--- a/packages/coreui-react/src/components/carousel/CCarouselContext.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createContext } from 'react'
-
-export interface CCarouselContextProps {
-  setAnimating: (a: boolean) => void
-  setCustomInterval: (a: boolean | number) => void
-}
-
-export const CCarouselContext = createContext({} as CCarouselContextProps)
\ No newline at end of file
diff --git a/packages/coreui-react/src/components/carousel/CCarouselItem.tsx b/packages/coreui-react/src/components/carousel/CCarouselItem.tsx
deleted file mode 100644
index 90f4f6ca..00000000
--- a/packages/coreui-react/src/components/carousel/CCarouselItem.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useContext, useEffect, useState, useRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { useForkedRef } from '../../hooks'
-
-import { CCarouselContext } from './CCarouselContext'
-
-export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * @ignore
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * @ignore
-   */
-  direction?: string
-  /**
-   * The amount of time to delay between automatically cycling an item.
-   */
-  interval?: boolean | number
-}
-
-export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
-  ({ children, className, active, direction, interval = false, ...rest }, ref) => {
-    const { setAnimating, setCustomInterval } = useContext(CCarouselContext)
-    const carouselItemRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, carouselItemRef)
-
-    const prevActive = useRef<boolean>(undefined)
-    const [directionClassName, setDirectionClassName] = useState<string>()
-    const [orderClassName, setOrderClassName] = useState<string>()
-    const [activeClassName, setActiveClassName] = useState(active && 'active')
-    const [count, setCount] = useState(0)
-
-    useEffect(() => {
-      if (active) {
-        setCustomInterval(interval)
-        if (count !== 0) setOrderClassName(`carousel-item-${direction}`)
-      }
-
-      if (prevActive.current && !active) {
-        setActiveClassName('active')
-      }
-
-      if (active || prevActive.current) {
-        setTimeout(() => {
-          if (count !== 0) {
-            // @ts-expect-error reflow is necessary to proper transition
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const reflow = carouselItemRef.current?.offsetHeight
-            setDirectionClassName(`carousel-item-${direction === 'next' ? 'start' : 'end'}`)
-          }
-        }, 0)
-      }
-
-      prevActive.current = active
-
-      if (count === 0) setCount(count + 1)
-    }, [active])
-
-    useEffect(() => {
-      carouselItemRef.current?.addEventListener('transitionstart', () => {
-        active && setAnimating(true)
-      })
-      carouselItemRef.current?.addEventListener('transitionend', () => {
-        active && setAnimating(false)
-        setDirectionClassName('')
-        setOrderClassName('')
-        if (active) {
-          setActiveClassName('active')
-        }
-        if (!active) {
-          setActiveClassName('')
-        }
-      })
-      return () => {
-        carouselItemRef.current?.removeEventListener('transitionstart', () => {
-          active && setAnimating(true)
-        })
-        carouselItemRef.current?.removeEventListener('transitionend', () => {
-          active && setAnimating(false)
-          setDirectionClassName('')
-          setOrderClassName('')
-          if (active) {
-            setActiveClassName('active')
-          }
-          if (!active) {
-            setActiveClassName('')
-          }
-        })
-      }
-    })
-
-    return (
-      <div
-        className={classNames(
-          'carousel-item',
-          activeClassName,
-          directionClassName,
-          orderClassName,
-          className
-        )}
-        ref={forkedRef}
-        {...rest}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-
-CCarouselItem.propTypes = {
-  active: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  direction: PropTypes.string,
-  interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-}
-
-CCarouselItem.displayName = 'CCarouselItem'
diff --git a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
deleted file mode 100644
index c681e5b7..00000000
--- a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React from 'react'
-import { render, fireEvent, getByText } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCarousel, CCarouselCaption, CCarouselItem } from '../index'
-
-test('loads and displays CCarousel component', async () => {
-  const { container } = render(
-    <CCarousel controls indicators>
-      <CCarouselItem>
-        Item-1
-        <CCarouselCaption>Caption-1</CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        Item-2
-        <CCarouselCaption>Caption-2</CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        Item-3
-        <CCarouselCaption>Caption-3</CCarouselCaption>
-      </CCarouselItem>
-    </CCarousel>,
-  )
-
-  const carousel = document.querySelector('.carousel')
-  expect(carousel).toHaveClass('slide')
-  if (carousel === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(carousel.children[0]).toHaveClass('carousel-indicators')
-    expect(carousel.children[1]).toHaveClass('carousel-inner')
-  }
-
-  let caption = getByText(container, 'Caption-1')
-  expect(caption).toHaveClass('carousel-caption')
-  caption = getByText(container, 'Caption-2')
-  expect(caption).toHaveClass('carousel-caption')
-  caption = getByText(container, 'Caption-3')
-  expect(caption).toHaveClass('carousel-caption')
-  let item = getByText(container, 'Item-1')
-  expect(item).toHaveClass('carousel-item')
-  item = getByText(container, 'Item-2')
-  expect(item).toHaveClass('carousel-item')
-  item = getByText(container, 'Item-3')
-  expect(item).toHaveClass('carousel-item')
-
-  let button = document.querySelector('.carousel-control-next')
-  if (button === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(button.firstChild).toHaveClass('carousel-control-next-icon')
-  }
-  button = document.querySelector('.carousel-control-prev')
-  if (button === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(button.firstChild).toHaveClass('carousel-control-prev-icon')
-  }
-
-  expect(container).toMatchSnapshot()
-})
-
-test('CCarousel click on indicator', async () => {
-  const { container } = render(
-    <CCarousel controls indicators>
-      <CCarouselItem>
-        Item-1
-        <CCarouselCaption>Caption-1</CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        Item-2
-        <CCarouselCaption>Caption-2</CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        Item-3
-        <CCarouselCaption>Caption-3</CCarouselCaption>
-      </CCarouselItem>
-    </CCarousel>,
-  )
-  const item1 = getByText(container, 'Item-1')
-  const item2 = getByText(container, 'Item-2')
-
-  expect(item1).toHaveClass('active')
-  expect(item1).toHaveClass('carousel-item')
-  expect(item2).not.toHaveClass('active')
-  expect(item2).toHaveClass('carousel-item')
-
-  // click
-  const ci = document.querySelector('.carousel-indicators')
-  ci && fireEvent.click(ci.children[1])
-  fireEvent.transitionEnd(item1)
-  fireEvent.transitionEnd(item2)
-
-  expect(item1).not.toHaveClass('active')
-  expect(item2).toHaveClass('active')
-
-  // goback-click
-  ci && fireEvent.click(ci.children[0])
-  fireEvent.transitionEnd(item1)
-  fireEvent.transitionEnd(item2)
-
-  expect(item1).toHaveClass('active')
-  expect(item2).not.toHaveClass('active')
-})
-
-test('CCarousel click on button', async () => {
-  jest.useFakeTimers()
-  const { container } = render(
-    <CCarousel controls indicators>
-      <CCarouselItem>
-        Item-1
-        <CCarouselCaption>Caption-1</CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        Item-2
-        <CCarouselCaption>Caption-2</CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        Item-3
-        <CCarouselCaption>Caption-3</CCarouselCaption>
-      </CCarouselItem>
-    </CCarousel>,
-  )
-  const item1 = getByText(container, 'Item-1')
-  const item2 = getByText(container, 'Item-2')
-
-  expect(item1).toHaveClass('active')
-  expect(item1).toHaveClass('carousel-item')
-  expect(item2).not.toHaveClass('active')
-  expect(item2).toHaveClass('carousel-item')
-
-  // click
-  const buttonNext = document.querySelector('.carousel-control-next')
-  buttonNext && fireEvent.click(buttonNext)
-  fireEvent.transitionEnd(item1)
-  fireEvent.transitionEnd(item2)
-
-  expect(item1).not.toHaveClass('active')
-  expect(item2).toHaveClass('active')
-
-  // goback-click
-  const buttonPrev = document.querySelector('.carousel-control-prev')
-  buttonPrev && fireEvent.click(buttonPrev)
-  fireEvent.transitionEnd(item1)
-  fireEvent.transitionEnd(item2)
-
-  expect(item1).toHaveClass('active')
-  expect(item2).not.toHaveClass('active')
-})
diff --git a/packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap b/packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap
deleted file mode 100644
index 5d9045b1..00000000
--- a/packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap
+++ /dev/null
@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CCarousel component 1`] = `
-<div>
-  <div
-    class="carousel slide"
-  >
-    <div
-      class="carousel-indicators"
-    >
-      <button
-        aria-current="true"
-        aria-label="Slide 1"
-        class="active"
-        data-coreui-target=""
-      />
-      <button
-        aria-label="Slide 2"
-        class=""
-        data-coreui-target=""
-      />
-      <button
-        aria-label="Slide 3"
-        class=""
-        data-coreui-target=""
-      />
-    </div>
-    <div
-      class="carousel-inner"
-    >
-      <div
-        class="carousel-item active"
-      >
-        Item-1
-        <div
-          class="carousel-caption"
-        >
-          Caption-1
-        </div>
-      </div>
-      <div
-        class="carousel-item"
-      >
-        Item-2
-        <div
-          class="carousel-caption"
-        >
-          Caption-2
-        </div>
-      </div>
-      <div
-        class="carousel-item"
-      >
-        Item-3
-        <div
-          class="carousel-caption"
-        >
-          Caption-3
-        </div>
-      </div>
-    </div>
-    <button
-      class="carousel-control-prev"
-    >
-      <span
-        aria-label="prev"
-        class="carousel-control-prev-icon"
-      />
-    </button>
-    <button
-      class="carousel-control-next"
-    >
-      <span
-        aria-label="next"
-        class="carousel-control-next-icon"
-      />
-    </button>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/carousel/index.ts b/packages/coreui-react/src/components/carousel/index.ts
deleted file mode 100644
index 7a5e23f5..00000000
--- a/packages/coreui-react/src/components/carousel/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CCarousel } from './CCarousel'
-import { CCarouselCaption } from './CCarouselCaption'
-import { CCarouselItem } from './CCarouselItem'
-
-export { CCarousel, CCarouselCaption, CCarouselItem }
diff --git a/packages/coreui-react/src/components/close-button/CCloseButton.tsx b/packages/coreui-react/src/components/close-button/CCloseButton.tsx
deleted file mode 100644
index 18c49fed..00000000
--- a/packages/coreui-react/src/components/close-button/CCloseButton.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Invert the default color.
-   */
-  dark?: boolean
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Change the default color to white.
-   *
-   * @deprecated 5.0.0
-   */
-  white?: boolean
-}
-
-export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
-  ({ className, dark, disabled, white, ...rest }, ref) => {
-    return (
-      <button
-        type="button"
-        className={classNames(
-          'btn',
-          'btn-close',
-          {
-            'btn-close-white': white,
-          },
-          disabled,
-          className,
-        )}
-        aria-label="Close"
-        disabled={disabled}
-        {...(dark && { 'data-coreui-theme': 'dark' })}
-        {...rest}
-        ref={ref}
-      />
-    )
-  },
-)
-
-CCloseButton.propTypes = {
-  className: PropTypes.string,
-  dark: PropTypes.bool,
-  disabled: PropTypes.bool,
-  white: PropTypes.bool,
-}
-
-CCloseButton.displayName = 'CCloseButton'
diff --git a/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx b/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx
deleted file mode 100644
index 3eb0dbc0..00000000
--- a/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCloseButton } from '../index'
-
-test('loads and displays CCloseButton component', async () => {
-  const { container } = render(<CCloseButton />)
-  const button = document.querySelector('button')
-  expect(button).toHaveClass('btn')
-  expect(button).toHaveClass('btn-close')
-  expect(button).toHaveAttribute('aria-label', 'Close')
-  expect(container).toMatchSnapshot()
-})
-
-test('CCloseButton customize', async () => {
-  const { container } = render(<CCloseButton white={true} disabled={true} className="bazinga" />)
-  const button = document.querySelector('button')
-  expect(button).toHaveClass('btn')
-  expect(button).toHaveClass('btn-close')
-  expect(button).toHaveClass('btn-close-white')
-  expect(button).toHaveClass('bazinga')
-  expect(button).toHaveAttribute('aria-label', 'Close')
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap b/packages/coreui-react/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap
deleted file mode 100644
index 6b584a17..00000000
--- a/packages/coreui-react/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCloseButton customize 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close btn-close-white bazinga"
-    disabled=""
-    type="button"
-  />
-</div>
-`;
-
-exports[`loads and displays CCloseButton component 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close"
-    type="button"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/close-button/index.ts b/packages/coreui-react/src/components/close-button/index.ts
deleted file mode 100644
index 27d5574c..00000000
--- a/packages/coreui-react/src/components/close-button/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CCloseButton } from './CCloseButton'
-
-export { CCloseButton }
diff --git a/packages/coreui-react/src/components/collapse/CCollapse.tsx b/packages/coreui-react/src/components/collapse/CCollapse.tsx
deleted file mode 100644
index 4cb2773c..00000000
--- a/packages/coreui-react/src/components/collapse/CCollapse.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { CSSTransition } from 'react-transition-group'
-
-import { useForkedRef } from '../../hooks'
-
-export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Set horizontal collapsing to transition the width instead of height.
-   */
-  horizontal?: boolean
-  /**
-   * Callback fired when the component requests to be hidden.
-   */
-  onHide?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * Toggle the visibility of component.
-   */
-  visible?: boolean
-}
-
-export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
-  ({ children, className, horizontal, onHide, onShow, visible, ...rest }, ref) => {
-    const collapseRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, collapseRef)
-
-    const [height, setHeight] = useState<number>()
-    const [width, setWidth] = useState<number>()
-
-    const onEntering = () => {
-      onShow && onShow()
-
-      if (horizontal) {
-        collapseRef.current && setWidth(collapseRef.current.scrollWidth)
-        return
-      }
-      collapseRef.current && setHeight(collapseRef.current.scrollHeight)
-    }
-
-    const onEntered = () => {
-      if (horizontal) {
-        setWidth(0)
-        return
-      }
-      setHeight(0)
-    }
-
-    const onExit = () => {
-      if (horizontal) {
-        collapseRef.current && setWidth(collapseRef.current.scrollWidth)
-        return
-      }
-      collapseRef.current && setHeight(collapseRef.current.scrollHeight)
-    }
-
-    const onExiting = () => {
-      onHide && onHide()
-      if (horizontal) {
-        setWidth(0)
-        return
-      }
-      setHeight(0)
-    }
-
-    const onExited = () => {
-      if (horizontal) {
-        setWidth(0)
-        return
-      }
-      setHeight(0)
-    }
-
-    return (
-      <CSSTransition
-        in={visible}
-        nodeRef={collapseRef}
-        onEntering={onEntering}
-        onEntered={onEntered}
-        onExit={onExit}
-        onExiting={onExiting}
-        onExited={onExited}
-        timeout={350}
-      >
-        {(state) => {
-          const currentHeight = height === 0 ? null : { height }
-          const currentWidth = width === 0 ? null : { width }
-          return (
-            <div
-              className={classNames(className, {
-                'collapse-horizontal': horizontal,
-                collapsing: state === 'entering' || state === 'exiting',
-                'collapse show': state === 'entered',
-                collapse: state === 'exited',
-              })}
-              style={{ ...currentHeight, ...currentWidth }}
-              {...rest}
-              ref={forkedRef}
-            >
-              {children}
-            </div>
-          )
-        }}
-      </CSSTransition>
-    )
-  },
-)
-
-CCollapse.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  horizontal: PropTypes.bool,
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
-  visible: PropTypes.bool,
-}
-
-CCollapse.displayName = 'CCollapse'
diff --git a/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx
deleted file mode 100644
index faee720d..00000000
--- a/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react'
-import { render, screen, act } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCollapse } from '../index'
-
-test('loads and displays CCollapse component', async () => {
-  const { container } = render(<CCollapse>Test</CCollapse>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCollapse customize', async () => {
-  const { container } = render(<CCollapse className="bazinga">Test</CCollapse>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container).toMatchSnapshot()
-})
-
-test('CCollapse use case test', async () => {
-  jest.useFakeTimers()
-
-  const { rerender } = render(<CCollapse visible={false}>Test</CCollapse>)
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  act(() => {
-    rerender(<CCollapse visible={true}>Test</CCollapse>)
-  })
-
-  expect(screen.getByText('Test')).not.toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('collapsing')
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  act(() => {
-    rerender(<CCollapse visible={false}>Test</CCollapse>)
-  })
-
-  expect(screen.getByText('Test')).not.toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('collapsing')
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap b/packages/coreui-react/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap
deleted file mode 100644
index b9a9df74..00000000
--- a/packages/coreui-react/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCollapse customize 1`] = `
-<div>
-  <div
-    class="bazinga collapse"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCollapse component 1`] = `
-<div>
-  <div
-    class="collapse"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/collapse/index.ts b/packages/coreui-react/src/components/collapse/index.ts
deleted file mode 100644
index f277ff21..00000000
--- a/packages/coreui-react/src/components/collapse/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CCollapse } from './CCollapse'
-
-export { CCollapse }
diff --git a/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx b/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx
deleted file mode 100644
index ca9bea8c..00000000
--- a/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { FC, ReactNode, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
-import PropTypes from 'prop-types'
-
-const getContainer = (
-  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null,
-) => {
-  if (container) {
-    return typeof container === 'function' ? container() : container
-  }
-
-  return document.body
-}
-
-export interface CConditionalPortalProps {
-  /**
-   * @ignore
-   */
-  children: ReactNode
-  /**
-   * An HTML element or function that returns a single element, with `document.body` as the default.
-   *
-   * @since 4.11.0
-   */
-  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
-  /**
-   * Render some children into a different part of the DOM
-   */
-  portal: boolean
-}
-
-export const CConditionalPortal: FC<CConditionalPortalProps> = ({
-  children,
-  container,
-  portal,
-}) => {
-  const [_container, setContainer] = useState<ReturnType<typeof getContainer>>(null)
-
-  useEffect(() => {
-    portal && setContainer(getContainer(container) || document.body)
-  }, [container, portal])
-
-  return typeof window !== 'undefined' && portal && _container ? (
-    createPortal(children, _container)
-  ) : (
-    <>{children}</>
-  )
-}
-
-CConditionalPortal.propTypes = {
-  children: PropTypes.node,
-  container: PropTypes.any, // HTMLElement
-  portal: PropTypes.bool.isRequired,
-}
-
-CConditionalPortal.displayName = 'CConditionalPortal'
diff --git a/packages/coreui-react/src/components/conditional-portal/index.ts b/packages/coreui-react/src/components/conditional-portal/index.ts
deleted file mode 100644
index ab6cc3bc..00000000
--- a/packages/coreui-react/src/components/conditional-portal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CConditionalPortal } from './CConditionalPortal'
-
-export { CConditionalPortal }
diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
deleted file mode 100644
index 5b5e35d4..00000000
--- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx
+++ /dev/null
@@ -1,384 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import type { Options } from '@popperjs/core'
-
-import { CDropdownContext } from './CDropdownContext'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { useForkedRef, usePopper } from '../../hooks'
-import { placementPropType } from '../../props'
-import type { Placements } from '../../types'
-import { getNextActiveElement, isRTL } from '../../utils'
-
-import type { Alignments, Directions } from './types'
-import { getPlacement } from './utils'
-
-export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
-  /**
-   * Specifies the alignment of the React Dropdown Menu within this React Dropdown.
-   *
-   * @example
-   * // Align dropdown menu to the end on large devices, otherwise start
-   * <CDropdown alignment={{ lg: 'end', xs: 'start' }}>
-   *   <CDropdownToggle>Toggle dropdown</CDropdownToggle>
-   *   <CDropdownMenu>
-   *     <CDropdownItem>Action</CDropdownItem>
-   *     <CDropdownItem>Another Action</CDropdownItem>
-   *   </CDropdownMenu>
-   * </CDropdown>
-   *
-   * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
-   */
-  alignment?: Alignments
-
-  /**
-   * Determines the root node component (native HTML element or a custom React component) for the React Dropdown.
-   */
-  as?: ElementType
-
-  /**
-   * Configures automatic closing behavior for the React Dropdown:
-   * - `true` - Close on clicks inside or outside of the React Dropdown Menu.
-   * - `false` - Disable auto-close; manually call `hide` or `toggle` (also not closed by `Escape`).
-   * - `'inside'` - Close only when clicking inside the React Dropdown Menu.
-   * - `'outside'` - Close only when clicking outside the React Dropdown Menu.
-   *
-   * @example
-   * // Close only when user clicks outside of the menu
-   * <CDropdown autoClose="outside" />
-   */
-  autoClose?: 'inside' | 'outside' | boolean
-
-  /**
-   * Adds custom classes to the React Dropdown root element.
-   */
-  className?: string
-
-  /**
-   * Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to `document.body`.
-   *
-   * @example
-   * // Append the menu to a custom container
-   * const myContainer = document.getElementById('my-container')
-   *
-   * <CDropdown container={myContainer} />
-   *
-   * @since 4.11.0
-   */
-  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
-
-  /**
-   * Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.
-   */
-  dark?: boolean
-
-  /**
-   * Specifies the direction of the React Dropdown.
-   */
-  direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
-
-  /**
-   * Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.
-   *
-   * @example
-   * // Offset the menu 10px in X and 5px in Y direction
-   * <CDropdown offset={[10, 5]}>
-   *   ...
-   * </CDropdown>
-   */
-  offset?: [number, number]
-
-  /**
-   * Callback fired right before the React Dropdown becomes hidden.
-   *
-   * @since 4.9.0
-   */
-  onHide?: () => void
-
-  /**
-   * Callback fired immediately after the React Dropdown is displayed.
-   */
-  onShow?: () => void
-
-  /**
-   * Determines the placement of the React Dropdown Menu after Popper.js modifiers.
-   *
-   * @type 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
-   */
-  placement?: Placements
-
-  /**
-   * Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.
-   */
-  popper?: boolean
-
-  /**
-   * Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options)
-   *
-   * @example
-   * // Providing a custom popper config
-   * <CDropdown
-   *   popperConfig={{
-   *     modifiers: [
-   *       {
-   *         name: 'flip',
-   *         options: { fallbackPlacements: ['bottom', 'top'] },
-   *       },
-   *     ],
-   *   }}
-   * >...</CDropdown>
-   *
-   * @since 5.5.0
-   */
-  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
-
-  /**
-   * Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.
-   *
-   * @since 4.8.0
-   */
-  portal?: boolean
-
-  /**
-   * Defines the visual variant of the React Dropdown
-   */
-  variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
-
-  /**
-   * Controls the visibility of the React Dropdown Menu:
-   * - `true` - Visible
-   * - `false` - Hidden
-   *
-   * @example
-   * // Programmatically manage the dropdown visibility
-   * const [visible, setVisible] = useState(false)
-   *
-   * <CDropdown visible={visible}>
-   *   ...
-   * </CDropdown>
-   *
-   */
-  visible?: boolean
-}
-
-export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> = forwardRef<
-  HTMLDivElement | HTMLLIElement,
-  CDropdownProps
->(
-  (
-    {
-      children,
-      alignment,
-      as = 'div',
-      autoClose = true,
-      className,
-      container,
-      dark,
-      direction,
-      offset = [0, 2],
-      onHide,
-      onShow,
-      placement = 'bottom-start',
-      popper = true,
-      popperConfig,
-      portal = false,
-      variant = 'btn-group',
-      visible = false,
-      ...rest
-    },
-    ref
-  ) => {
-    const dropdownRef = useRef<HTMLDivElement>(null)
-    const dropdownToggleRef = useRef<HTMLElement>(null)
-    const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
-    const forkedRef = useForkedRef(ref, dropdownRef)
-    const [_visible, setVisible] = useState(visible)
-    const { initPopper, destroyPopper } = usePopper()
-
-    const Component = variant === 'nav-item' ? 'li' : as
-
-    // Disable popper if responsive aligment is set.
-    if (typeof alignment === 'object') {
-      popper = false
-    }
-
-    const contextValues = {
-      alignment,
-      container,
-      dark,
-      dropdownToggleRef,
-      dropdownMenuRef,
-      popper,
-      portal,
-      variant,
-      visible: _visible,
-      setVisible,
-    }
-
-    const defaultPopperConfig = {
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
-          },
-        },
-      ],
-      placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
-    }
-
-    const computedPopperConfig: Partial<Options> = {
-      ...defaultPopperConfig,
-      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
-    }
-
-    useEffect(() => {
-      setVisible(visible)
-    }, [visible])
-
-    useEffect(() => {
-      const toggleElement = dropdownToggleRef.current
-      const menuElement = dropdownMenuRef.current
-
-      if (_visible && toggleElement && menuElement) {
-        if (popper) {
-          initPopper(toggleElement, menuElement, computedPopperConfig)
-        }
-
-        toggleElement.focus()
-        toggleElement.addEventListener('keydown', handleKeydown)
-        menuElement.addEventListener('keydown', handleKeydown)
-
-        window.addEventListener('mouseup', handleMouseUp)
-        window.addEventListener('keyup', handleKeyup)
-
-        onShow?.()
-      }
-
-      return () => {
-        if (popper) {
-          destroyPopper()
-        }
-
-        toggleElement?.removeEventListener('keydown', handleKeydown)
-        menuElement?.removeEventListener('keydown', handleKeydown)
-
-        window.removeEventListener('mouseup', handleMouseUp)
-        window.removeEventListener('keyup', handleKeyup)
-
-        onHide?.()
-      }
-    }, [
-      computedPopperConfig,
-      destroyPopper,
-      dropdownMenuRef,
-      dropdownToggleRef,
-      initPopper,
-      _visible,
-    ])
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (
-        _visible &&
-        dropdownMenuRef.current &&
-        (event.key === 'ArrowDown' || event.key === 'ArrowUp')
-      ) {
-        event.preventDefault()
-        const target = event.target as HTMLElement
-        const items: HTMLElement[] = Array.from(
-          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)')
-        )
-        getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
-      }
-    }
-
-    const handleKeyup = (event: KeyboardEvent) => {
-      if (autoClose === false) {
-        return
-      }
-
-      if (event.key === 'Escape') {
-        setVisible(false)
-      }
-    }
-
-    const handleMouseUp = (event: Event) => {
-      if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
-        return
-      }
-
-      if (dropdownToggleRef.current.contains(event.target as HTMLElement)) {
-        return
-      }
-
-      if (
-        autoClose === true ||
-        (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
-        (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
-      ) {
-        setTimeout(() => setVisible(false), 1)
-        return
-      }
-    }
-
-    return (
-      <CDropdownContext.Provider value={contextValues}>
-        {variant === 'input-group' ? (
-          <>{children}</>
-        ) : (
-          <Component
-            className={classNames(
-              variant === 'nav-item' ? 'nav-item dropdown' : variant,
-              {
-                'dropdown-center': direction === 'center',
-                'dropup dropup-center': direction === 'dropup-center',
-                [`${direction}`]:
-                  direction && direction !== 'center' && direction !== 'dropup-center',
-              },
-              className
-            )}
-            {...rest}
-            ref={forkedRef}
-          >
-            {children}
-          </Component>
-        )}
-      </CDropdownContext.Provider>
-    )
-  }
-)
-
-const alignmentDirection = PropTypes.oneOf<Directions>(['start', 'end'])
-
-CDropdown.propTypes = {
-  alignment: PropTypes.oneOfType([
-    alignmentDirection,
-    PropTypes.shape({ xs: alignmentDirection.isRequired }),
-    PropTypes.shape({ sm: alignmentDirection.isRequired }),
-    PropTypes.shape({ md: alignmentDirection.isRequired }),
-    PropTypes.shape({ lg: alignmentDirection.isRequired }),
-    PropTypes.shape({ xl: alignmentDirection.isRequired }),
-    PropTypes.shape({ xxl: alignmentDirection.isRequired }),
-  ]),
-  as: PropTypes.elementType,
-  autoClose: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
-  ]),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dark: PropTypes.bool,
-  direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
-  offset: PropTypes.any, // TODO: find good proptype
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
-  placement: placementPropType,
-  popper: PropTypes.bool,
-  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  portal: PropTypes.bool,
-  variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
-  visible: PropTypes.bool,
-}
-
-CDropdown.displayName = 'CDropdown'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
deleted file mode 100644
index 81af43aa..00000000
--- a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createContext, RefObject } from 'react'
-import { Alignments } from './types'
-
-export interface CDropdownContextProps {
-  alignment?: Alignments
-  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
-  dark?: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dropdownToggleRef: RefObject<any | null>
-  dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-  popper?: boolean
-  portal?: boolean
-  variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
-  visible?: boolean
-}
-
-export const CDropdownContext = createContext({} as CDropdownContextProps)
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx b/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
deleted file mode 100644
index 57b86e1e..00000000
--- a/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CDropdownDividerProps extends HTMLAttributes<HTMLHRElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CDropdownDivider = forwardRef<HTMLHRElement, CDropdownDividerProps>(
-  ({ className, ...rest }, ref) => {
-    return <hr className={classNames('dropdown-divider', className)} {...rest} ref={ref} />
-  }
-)
-
-CDropdownDivider.propTypes = {
-  className: PropTypes.string,
-}
-
-CDropdownDivider.displayName = 'CDropdownDivider'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx b/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx
deleted file mode 100644
index 89e53673..00000000
--- a/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CDropdownHeaderProps extends HTMLAttributes<HTMLHeadingElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CDropdownHeader: PolymorphicRefForwardingComponent<'h6', CDropdownHeaderProps> =
-  forwardRef<HTMLHeadingElement, CDropdownHeaderProps>(
-    ({ children, as: Component = 'h6', className, ...rest }, ref) => {
-      return (
-        <Component className={classNames('dropdown-header', className)} {...rest} ref={ref}>
-          {children}
-        </Component>
-      )
-    }
-  )
-
-CDropdownHeader.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CDropdownHeader.displayName = 'CDropdownHeader'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownItem.tsx b/packages/coreui-react/src/components/dropdown/CDropdownItem.tsx
deleted file mode 100644
index 4f58c00f..00000000
--- a/packages/coreui-react/src/components/dropdown/CDropdownItem.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink, CLinkProps } from '../link/CLink'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CDropdownItemProps extends CLinkProps {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CDropdownItem: PolymorphicRefForwardingComponent<'a', CDropdownItemProps> = forwardRef<
-  HTMLButtonElement | HTMLAnchorElement,
-  CDropdownItemProps
->(({ children, as = 'a', className, ...rest }, ref) => {
-  return (
-    <CLink className={classNames('dropdown-item', className)} as={as} {...rest} ref={ref}>
-      {children}
-    </CLink>
-  )
-})
-
-CDropdownItem.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CDropdownItem.displayName = 'CDropdownItem'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
deleted file mode 100644
index bc4ae0bb..00000000
--- a/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CDropdownItemPlain: PolymorphicRefForwardingComponent<
-  'span',
-  CDropdownItemPlainProps
-> = forwardRef<HTMLSpanElement, CDropdownItemPlainProps>(
-  ({ children, as: Component = 'span', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('dropdown-item-text', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  }
-)
-
-CDropdownItemPlain.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CDropdownItemPlain.displayName = 'CDropdownItemPlain'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
deleted file mode 100644
index 59442d63..00000000
--- a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CConditionalPortal } from '../conditional-portal'
-import { CDropdownContext } from './CDropdownContext'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { useForkedRef } from '../../hooks'
-
-import { getAlignmentClassNames } from './utils'
-
-export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMenuProps> =
-  forwardRef<HTMLDivElement | HTMLUListElement, CDropdownMenuProps>(
-    ({ children, as: Component = 'ul', className, ...rest }, ref) => {
-      const { alignment, container, dark, dropdownMenuRef, popper, portal, visible } =
-        useContext(CDropdownContext)
-
-      const forkedRef = useForkedRef(ref, dropdownMenuRef)
-
-      return (
-        <CConditionalPortal container={container} portal={portal ?? false}>
-          <Component
-            className={classNames(
-              'dropdown-menu',
-              {
-                show: visible,
-              },
-              alignment && getAlignmentClassNames(alignment),
-              className
-            )}
-            ref={forkedRef}
-            role="menu"
-            {...(!popper && { 'data-coreui-popper': 'static' })}
-            {...(dark && { 'data-coreui-theme': 'dark' })}
-            {...rest}
-          >
-            {Component === 'ul'
-              ? React.Children.map(children, (child, index) => {
-                  if (React.isValidElement(child)) {
-                    return <li key={index}>{React.cloneElement(child)}</li>
-                  }
-                  return
-                })
-              : children}
-          </Component>
-        </CConditionalPortal>
-      )
-    }
-  )
-
-CDropdownMenu.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CDropdownMenu.displayName = 'CDropdownMenu'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
deleted file mode 100644
index ee8dfe82..00000000
--- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { FC, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CButton, CButtonProps } from '../button/CButton'
-import { CDropdownContext } from './CDropdownContext'
-
-import { triggerPropType } from '../../props'
-import type { Triggers } from '../../types'
-
-export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
-  /**
-   * Enables pseudo element caret on toggler.
-   */
-  caret?: boolean
-  /**
-   * Create a custom toggler which accepts any content.
-   */
-  custom?: boolean
-  /**
-   * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
-   *
-   * @since 5.0.0
-   */
-  navLink?: boolean
-  /**
-   * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
-   */
-  split?: boolean
-  /**
-   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
-   *
-   * @type 'hover' | 'focus' | 'click'
-   */
-  trigger?: Triggers | Triggers[]
-}
-
-export const CDropdownToggle: FC<CDropdownToggleProps> = ({
-  children,
-  caret = true,
-  custom,
-  className,
-  navLink = true,
-  split,
-  trigger = 'click',
-  ...rest
-}) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
-
-  const triggers = {
-    ...((trigger === 'click' || trigger.includes('click')) && {
-      onClick: (event: React.MouseEvent<HTMLElement>) => {
-        event.preventDefault()
-        setVisible(!visible)
-      },
-    }),
-    ...((trigger === 'focus' || trigger.includes('focus')) && {
-      onFocus: () => setVisible(true),
-      onBlur: () => setVisible(false),
-    }),
-  }
-
-  const togglerProps = {
-    className: classNames(
-      {
-        'nav-link': variant === 'nav-item' && navLink,
-        'dropdown-toggle': caret,
-        'dropdown-toggle-split': split,
-        show: visible,
-      },
-      className
-    ),
-    'aria-expanded': visible,
-    ...(!rest.disabled && { ...triggers }),
-  }
-
-  const Toggler = () => {
-    if (custom && React.isValidElement(children)) {
-      return (
-        <>
-          {React.cloneElement(children as React.ReactElement<any>, {
-            'aria-expanded': visible,
-            ...(!rest.disabled && { ...triggers }),
-            ref: dropdownToggleRef,
-          })}
-        </>
-      )
-    }
-
-    if (variant === 'nav-item' && navLink) {
-      return (
-        <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
-          {children}
-        </a>
-      )
-    }
-
-    return (
-      <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
-        {children}
-        {split && <span className="visually-hidden">Toggle Dropdown</span>}
-      </CButton>
-    )
-  }
-
-  return <Toggler />
-}
-
-CDropdownToggle.propTypes = {
-  caret: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  custom: PropTypes.bool,
-  split: PropTypes.bool,
-  trigger: triggerPropType,
-}
-
-CDropdownToggle.displayName = 'CDropdownToggle'
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
deleted file mode 100644
index 12b6e3cd..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import {
-  CDropdown,
-  CDropdownToggle,
-  CDropdownMenu,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownHeader,
-  CDropdownDivider,
-} from '../index'
-
-test('loads and displays CDropdown component', async () => {
-  const { container } = render(<CDropdown>Test</CDropdown>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdown customize', async () => {
-  const { container } = render(
-    <CDropdown
-      alignment={{ lg: 'start' }}
-      className="bazinga"
-      as="h3"
-      dark={true}
-      direction="dropstart"
-      placement="right-end"
-      popper={true}
-      variant="nav-item"
-      visible={true}
-    >
-      Test
-    </CDropdown>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('nav-item')
-  expect(container.firstChild).toHaveClass('dropdown')
-  expect(container.firstChild).toHaveClass('dropstart')
-})
-
-// test('CDropdown change visible prop', async () => {
-//   jest.useFakeTimers()
-//   const { rerender } = render(<CDropdown visible={false}>Test</CDropdown>)
-//   expect(screen.getByText('Test')).not.toHaveClass('show')
-//   rerender(<CDropdown visible={true}>Test</CDropdown>)
-//   jest.runAllTimers()
-//   expect(screen.getByText('Test')).toHaveClass('show')
-//   rerender(<CDropdown visible={false}>Test</CDropdown>)
-//   expect(screen.getByText('Test')).not.toHaveClass('show')
-//   jest.runAllTimers()
-//   jest.useRealTimers()
-// })
-
-test('CDropdown opens on toggle click and closes on clicking outside', async () => {
-  render(
-    <div>
-      {/* External element to simulate clicking outside the dropdown */}
-      <div data-testid="external-area">External Area</div>
-
-      {/* The dropdown component */}
-      <CDropdown>
-        <CDropdownToggle>Test</CDropdownToggle>
-        <CDropdownMenu>
-          <CDropdownItem>A</CDropdownItem>
-          <CDropdownItem>B</CDropdownItem>
-        </CDropdownMenu>
-      </CDropdown>
-    </div>,
-  )
-
-  // Ensure the dropdown is initially closed
-  const toggleButton = screen.getByText('Test')
-  expect(toggleButton).toBeInTheDocument()
-
-  // Assuming the 'show' class is applied to the CDropdownMenu
-  const dropdownMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
-  expect(dropdownMenu).not.toHaveClass('show')
-
-  // Click on the toggle to open the dropdown
-  fireEvent.click(toggleButton)
-
-  // Wait for the dropdown menu to become visible
-  await waitFor(() => {
-    const openedMenu = screen.getByRole('menu') // Adjust role if different
-    expect(openedMenu).toBeVisible()
-    expect(openedMenu).toHaveClass('show')
-  })
-
-  // Click outside the dropdown to close it
-  const externalArea = screen.getByTestId('external-area')
-  fireEvent.mouseUp(externalArea)
-
-  // Wait for the dropdown menu to be hidden
-  await waitFor(() => {
-    const closedMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
-    expect(closedMenu).not.toHaveClass('show')
-  })
-})
-
-test('CDropdown example', async () => {
-  jest.useFakeTimers()
-  const { container } = render(
-    <CDropdown>
-      <CDropdownToggle>Test</CDropdownToggle>
-      <CDropdownMenu>
-        <CDropdownHeader>A</CDropdownHeader>
-        <CDropdownItem>B</CDropdownItem>
-        <CDropdownItemPlain>C</CDropdownItemPlain>
-        <CDropdownDivider />
-        <CDropdownItem>D</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>,
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx
deleted file mode 100644
index 98b9de48..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownDivider } from '../index'
-
-test('loads and displays CDropdownDivider component', async () => {
-  const { container } = render(<CDropdownDivider />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownDivider customize', async () => {
-  const { container } = render(<CDropdownDivider className="bazinga" />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('dropdown-divider')
-})
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx
deleted file mode 100644
index 602b8d26..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownHeader } from '../index'
-
-test('loads and displays CDropdownHeader component', async () => {
-  const { container } = render(<CDropdownHeader>Test</CDropdownHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownHeader customize', async () => {
-  const { container } = render(
-    <CDropdownHeader className="bazinga" as="h3">
-      Test
-    </CDropdownHeader>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('dropdown-header')
-})
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx
deleted file mode 100644
index f484cc2f..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownItem } from '../index'
-
-test('loads and displays CDropdownItem component', async () => {
-  const { container } = render(<CDropdownItem>Test</CDropdownItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownItem customize', async () => {
-  const { container } = render(
-    <CDropdownItem className="bazinga" as="div">
-      Test
-    </CDropdownItem>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('dropdown-item')
-})
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx
deleted file mode 100644
index b1aafd07..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownItemPlain } from '../index'
-
-test('loads and displays CDropdownItemPlain component', async () => {
-  const { container } = render(<CDropdownItemPlain>Test</CDropdownItemPlain>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownItemPlain customize', async () => {
-  const { container } = render(
-    <CDropdownItemPlain className="bazinga" as="div">
-      Test
-    </CDropdownItemPlain>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('dropdown-item-text')
-})
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx
deleted file mode 100644
index 8b630833..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdown, CDropdownMenu } from '../index'
-
-test('loads and displays CDropdownMenu component', async () => {
-  const { container } = render(<CDropdownMenu>Test</CDropdownMenu>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownMenu customize', async () => {
-  const { container } = render(
-    <CDropdown visible={true}>
-      <CDropdownMenu className="bazinga" as="div">
-        Test
-      </CDropdownMenu>
-    </CDropdown>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild?.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild).toHaveClass('dropdown-menu')
-  expect(container.firstChild?.firstChild).toHaveClass('show')
-})
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
deleted file mode 100644
index 341c1048..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownToggle } from '../index'
-
-test('loads and displays CDropdownToggle component', async () => {
-  const { container } = render(<CDropdownToggle>Test</CDropdownToggle>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownToggle customize', async () => {
-  const { container } = render(
-    <CDropdownToggle caret={true} color="primary" split={true} trigger="focus">
-      Test
-    </CDropdownToggle>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('dropdown-toggle')
-  expect(container.firstChild).toHaveClass('dropdown-toggle-split')
-})
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
deleted file mode 100644
index ed01b1d9..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdown customize 1`] = `
-<div>
-  <li
-    class="nav-item dropdown dropstart bazinga"
-  >
-    Test
-  </li>
-</div>
-`;
-
-exports[`CDropdown example 1`] = `
-<div>
-  <div
-    class="btn-group"
-  >
-    <button
-      aria-expanded="false"
-      class="btn dropdown-toggle"
-      tabindex="0"
-      type="button"
-    >
-      Test
-    </button>
-    <ul
-      class="dropdown-menu"
-      role="menu"
-    >
-      <li>
-        <h6
-          class="dropdown-header"
-        >
-          A
-        </h6>
-      </li>
-      <li>
-        <a
-          class="dropdown-item"
-        >
-          B
-        </a>
-      </li>
-      <li>
-        <span
-          class="dropdown-item-text"
-        >
-          C
-        </span>
-      </li>
-      <li>
-        <hr
-          class="dropdown-divider"
-        />
-      </li>
-      <li>
-        <a
-          class="dropdown-item"
-        >
-          D
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CDropdown component 1`] = `
-<div>
-  <div
-    class="btn-group"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap
deleted file mode 100644
index ed032fe0..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownDivider customize 1`] = `
-<div>
-  <hr
-    class="dropdown-divider bazinga"
-  />
-</div>
-`;
-
-exports[`loads and displays CDropdownDivider component 1`] = `
-<div>
-  <hr
-    class="dropdown-divider"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap
deleted file mode 100644
index c17e6a2b..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownHeader customize 1`] = `
-<div>
-  <h3
-    class="dropdown-header bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CDropdownHeader component 1`] = `
-<div>
-  <h6
-    class="dropdown-header"
-  >
-    Test
-  </h6>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap
deleted file mode 100644
index 09aa5375..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownItem customize 1`] = `
-<div>
-  <div
-    class="dropdown-item bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CDropdownItem component 1`] = `
-<div>
-  <a
-    class="dropdown-item"
-  >
-    Test
-  </a>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap
deleted file mode 100644
index 5ea47dd2..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownItemPlain customize 1`] = `
-<div>
-  <div
-    class="dropdown-item-text bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CDropdownItemPlain component 1`] = `
-<div>
-  <span
-    class="dropdown-item-text"
-  >
-    Test
-  </span>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
deleted file mode 100644
index 71044a09..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownMenu customize 1`] = `
-<div>
-  <div
-    class="btn-group"
-  >
-    <div
-      class="dropdown-menu show bazinga"
-      role="menu"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CDropdownMenu component 1`] = `
-<div>
-  <ul
-    class="dropdown-menu"
-    data-coreui-popper="static"
-    role="menu"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap
deleted file mode 100644
index 9486fa02..00000000
--- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownToggle customize 1`] = `
-<div>
-  <button
-    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
-    tabindex="0"
-    type="button"
-  >
-    Test
-    <span
-      class="visually-hidden"
-    >
-      Toggle Dropdown
-    </span>
-  </button>
-</div>
-`;
-
-exports[`loads and displays CDropdownToggle component 1`] = `
-<div>
-  <button
-    class="btn dropdown-toggle"
-    tabindex="0"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/dropdown/index.ts b/packages/coreui-react/src/components/dropdown/index.ts
deleted file mode 100644
index 0ffdaf0c..00000000
--- a/packages/coreui-react/src/components/dropdown/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CDropdown } from './CDropdown'
-import { CDropdownDivider } from './CDropdownDivider'
-import { CDropdownHeader } from './CDropdownHeader'
-import { CDropdownItem } from './CDropdownItem'
-import { CDropdownItemPlain } from './CDropdownItemPlain'
-import { CDropdownMenu } from './CDropdownMenu'
-import { CDropdownToggle } from './CDropdownToggle'
-
-export {
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-}
diff --git a/packages/coreui-react/src/components/dropdown/types.ts b/packages/coreui-react/src/components/dropdown/types.ts
deleted file mode 100644
index 3c68889a..00000000
--- a/packages/coreui-react/src/components/dropdown/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type Directions = 'start' | 'end'
-
-export type Breakpoints =
-  | { xs: Directions }
-  | { sm: Directions }
-  | { md: Directions }
-  | { lg: Directions }
-  | { xl: Directions }
-  | { xxl: Directions }
-
-export type Alignments = Directions | Breakpoints
diff --git a/packages/coreui-react/src/components/dropdown/utils.ts b/packages/coreui-react/src/components/dropdown/utils.ts
deleted file mode 100644
index c9659636..00000000
--- a/packages/coreui-react/src/components/dropdown/utils.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Placement } from '@popperjs/core'
-import type { Placements } from '../../types'
-import type { Alignments, Breakpoints } from './types'
-
-export const getAlignmentClassNames = (alignment: Alignments) => {
-  const classNames: string[] = []
-  if (typeof alignment === 'object') {
-    for (const key in alignment) {
-      classNames.push(
-        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`,
-      )
-    }
-  }
-
-  if (typeof alignment === 'string') {
-    classNames.push(`dropdown-menu-${alignment}`)
-  }
-
-  return classNames
-}
-
-export const getPlacement = (
-  placement: Placement,
-  direction: string | undefined,
-  alignment: Alignments | string | undefined,
-  isRTL: boolean,
-): Placements => {
-  let _placement = placement
-
-  if (direction === 'dropup') {
-    _placement = isRTL ? 'top-end' : 'top-start'
-  }
-
-  if (direction === 'dropup-center') {
-    _placement = 'top'
-  }
-
-  if (direction === 'dropend') {
-    _placement = isRTL ? 'left-start' : 'right-start'
-  }
-
-  if (direction === 'dropstart') {
-    _placement = isRTL ? 'right-start' : 'left-start'
-  }
-
-  if (alignment === 'end') {
-    _placement = isRTL ? 'bottom-start' : 'bottom-end'
-  }
-
-  return _placement
-}
diff --git a/packages/coreui-react/src/components/footer/CFooter.tsx b/packages/coreui-react/src/components/footer/CFooter.tsx
deleted file mode 100644
index 5a73788f..00000000
--- a/packages/coreui-react/src/components/footer/CFooter.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CFooterProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Place footer in non-static positions.
-   */
-  position?: 'fixed' | 'sticky'
-}
-
-export const CFooter = forwardRef<HTMLDivElement, CFooterProps>(
-  ({ children, className, position, ...rest }, ref) => {
-    return (
-      <div
-        className={classNames('footer', { [`footer-${position}`]: position }, className)}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-
-CFooter.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  position: PropTypes.oneOf(['fixed', 'sticky']),
-}
-
-CFooter.displayName = 'CFooter'
diff --git a/packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx b/packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx
deleted file mode 100644
index d9c114ea..00000000
--- a/packages/coreui-react/src/components/footer/__tests__/CFooter.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFooter } from '../index'
-
-test('loads and displays CFooter component', async () => {
-  const { container } = render(<CFooter>Test</CFooter>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFooter customize', async () => {
-  const { container } = render(
-    <CFooter className="bazinga" position="fixed">
-      Test
-    </CFooter>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('footer')
-  expect(container.firstChild).toHaveClass('footer-fixed')
-})
diff --git a/packages/coreui-react/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap b/packages/coreui-react/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap
deleted file mode 100644
index 95397d70..00000000
--- a/packages/coreui-react/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFooter customize 1`] = `
-<div>
-  <div
-    class="footer footer-fixed bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CFooter component 1`] = `
-<div>
-  <div
-    class="footer"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/footer/index.ts b/packages/coreui-react/src/components/footer/index.ts
deleted file mode 100644
index 4913ac71..00000000
--- a/packages/coreui-react/src/components/footer/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CFooter } from './CFooter'
-
-export { CFooter }
diff --git a/packages/coreui-react/src/components/form/CForm.tsx b/packages/coreui-react/src/components/form/CForm.tsx
deleted file mode 100644
index 5bcd7dac..00000000
--- a/packages/coreui-react/src/components/form/CForm.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { forwardRef, FormHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CFormProps extends FormHTMLAttributes<HTMLFormElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
-   */
-  validated?: boolean
-}
-
-export const CForm = forwardRef<HTMLFormElement, CFormProps>(
-  ({ children, className, validated, ...rest }, ref) => {
-    return (
-      <form
-        className={classNames({ 'was-validated': validated }, className) || undefined}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </form>
-    )
-  },
-)
-
-CForm.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  validated: PropTypes.bool,
-}
-
-CForm.displayName = 'CForm'
diff --git a/packages/coreui-react/src/components/form/CFormCheck.tsx b/packages/coreui-react/src/components/form/CFormCheck.tsx
deleted file mode 100644
index 7f770d4f..00000000
--- a/packages/coreui-react/src/components/form/CFormCheck.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
-import { CFormLabel } from './CFormLabel'
-
-import { useForkedRef } from '../../hooks'
-import type { Colors, Shapes } from '../../types'
-
-export type ButtonObject = {
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Select the shape of the component.
-   *
-   * @type 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string
-   */
-  shape?: Shapes
-  /**
-   * Size the component small or large.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Set the button variant to an outlined button or a ghost button.
-   */
-  variant?: 'outline' | 'ghost'
-}
-
-export interface CFormCheckProps
-  extends CFormControlValidationProps,
-    InputHTMLAttributes<HTMLInputElement> {
-  /**
-   * Create button-like checkboxes and radio buttons.
-   */
-  button?: ButtonObject
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets hit area to the full area of the component.
-   */
-  hitArea?: 'full'
-  /**
-   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-   */
-  id?: string
-  /**
-   * Input Checkbox indeterminate Property.
-   */
-  indeterminate?: boolean
-  /**
-   * Group checkboxes or radios on the same horizontal row.
-   */
-  inline?: boolean
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * The element represents a caption for a component.
-   */
-  label?: string | ReactNode
-  /**
-   * Put checkboxes or radios on the opposite side.
-   *
-   * @sinve 4.7.0
-   */
-  reverse?: boolean
-  /**
-   * Specifies the type of component.
-   */
-  type?: 'checkbox' | 'radio'
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-}
-
-export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
-  (
-    {
-      className,
-      button,
-      feedback,
-      feedbackInvalid,
-      feedbackValid,
-      floatingLabel,
-      tooltipFeedback,
-      hitArea,
-      id,
-      indeterminate,
-      inline,
-      invalid,
-      label,
-      reverse,
-      type = 'checkbox',
-      valid,
-      ...rest
-    },
-    ref,
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const forkedRef = useForkedRef(ref, inputRef)
-
-    useEffect(() => {
-      if (inputRef.current && indeterminate) {
-        inputRef.current.indeterminate = indeterminate
-      }
-    }, [indeterminate, inputRef.current])
-
-    const FormControl = () => (
-      <input
-        type={type}
-        className={classNames(button ? 'btn-check' : 'form-check-input', {
-          'is-invalid': invalid,
-          'is-valid': valid,
-          'me-2': hitArea,
-        })}
-        id={id}
-        {...rest}
-        ref={forkedRef}
-      />
-    )
-
-    const FormValidation = () => (
-      <CFormControlValidation
-        describedby={rest['aria-describedby']}
-        feedback={feedback}
-        feedbackInvalid={feedbackInvalid}
-        feedbackValid={feedbackValid}
-        floatingLabel={floatingLabel}
-        invalid={invalid}
-        tooltipFeedback={tooltipFeedback}
-        valid={valid}
-      />
-    )
-
-    const FormLabel = () => (
-      <CFormLabel
-        customClassName={classNames(
-          button
-            ? classNames(
-                'btn',
-                button.variant ? `btn-${button.variant}-${button.color}` : `btn-${button.color}`,
-                {
-                  [`btn-${button.size}`]: button.size,
-                },
-                `${button.shape}`,
-              )
-            : 'form-check-label',
-        )}
-        {...(id && { htmlFor: id })}
-      >
-        {label}
-      </CFormLabel>
-    )
-
-    const FormCheck = () => {
-      if (button) {
-        return (
-          <>
-            <FormControl />
-            {label && <FormLabel />}
-            <FormValidation />
-          </>
-        )
-      }
-
-      if (label) {
-        return hitArea ? (
-          <>
-            <FormControl />
-            <CFormLabel
-              customClassName={classNames('form-check-label stretched-link', className)}
-              {...(id && { htmlFor: id })}
-            >
-              {label}
-            </CFormLabel>
-            <FormValidation />
-          </>
-        ) : (
-          <div
-            className={classNames(
-              'form-check',
-              {
-                'form-check-inline': inline,
-                'form-check-reverse': reverse,
-                'is-invalid': invalid,
-                'is-valid': valid,
-              },
-              className,
-            )}
-          >
-            <FormControl />
-            <FormLabel />
-            <FormValidation />
-          </div>
-        )
-      }
-
-      return <FormControl />
-    }
-
-    return <FormCheck />
-  },
-)
-
-CFormCheck.propTypes = {
-  button: PropTypes.object,
-  className: PropTypes.string,
-  hitArea: PropTypes.oneOf(['full']),
-  id: PropTypes.string,
-  indeterminate: PropTypes.bool,
-  inline: PropTypes.bool,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  reverse: PropTypes.bool,
-  type: PropTypes.oneOf(['checkbox', 'radio']),
-  ...CFormControlValidation.propTypes,
-}
-
-CFormCheck.displayName = 'CFormCheck'
diff --git a/packages/coreui-react/src/components/form/CFormControlValidation.tsx b/packages/coreui-react/src/components/form/CFormControlValidation.tsx
deleted file mode 100644
index d280f9f3..00000000
--- a/packages/coreui-react/src/components/form/CFormControlValidation.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-
-import { CFormFeedback } from './CFormFeedback'
-
-export interface CFormControlValidationProps {
-  /**
-   * @ignore
-   */
-  describedby?: string
-  /**
-   * Provide valuable, actionable feedback.
-   *
-   * @since 4.2.0
-   */
-  feedback?: ReactNode | string
-  /**
-   * Provide valuable, actionable feedback.
-   *
-   * @since 4.2.0
-   */
-  feedbackInvalid?: ReactNode | string
-  /**
-   * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
-   *
-   * @since 4.2.0
-   */
-  feedbackValid?: ReactNode | string
-  /**
-   * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
-   *
-   * @since 4.2.0
-   */
-  floatingLabel?: ReactNode | string
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * Display validation feedback in a styled tooltip.
-   *
-   * @since 4.2.0
-   */
-  tooltipFeedback?: boolean
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-}
-
-export const CFormControlValidation: FC<CFormControlValidationProps> = ({
-  describedby,
-  feedback,
-  feedbackInvalid,
-  feedbackValid,
-  invalid,
-  tooltipFeedback,
-  valid,
-}) => {
-  return (
-    <>
-      {feedback && (valid || invalid) && (
-        <CFormFeedback
-          {...(invalid && { id: describedby })}
-          invalid={invalid}
-          tooltip={tooltipFeedback}
-          valid={valid}
-        >
-          {feedback}
-        </CFormFeedback>
-      )}
-      {feedbackInvalid && (
-        <CFormFeedback id={describedby} invalid tooltip={tooltipFeedback}>
-          {feedbackInvalid}
-        </CFormFeedback>
-      )}
-      {feedbackValid && (
-        <CFormFeedback valid tooltip={tooltipFeedback}>
-          {feedbackValid}
-        </CFormFeedback>
-      )}
-    </>
-  )
-}
-
-CFormControlValidation.propTypes = {
-  describedby: PropTypes.string,
-  feedback: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  feedbackValid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  feedbackInvalid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  invalid: PropTypes.bool,
-  tooltipFeedback: PropTypes.bool,
-  valid: PropTypes.bool,
-}
-
-CFormControlValidation.displayName = 'CFormControlValidation'
diff --git a/packages/coreui-react/src/components/form/CFormControlWrapper.tsx b/packages/coreui-react/src/components/form/CFormControlWrapper.tsx
deleted file mode 100644
index 01b32351..00000000
--- a/packages/coreui-react/src/components/form/CFormControlWrapper.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-
-import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
-import { CFormFloating } from './CFormFloating'
-import { CFormLabel } from './CFormLabel'
-import { CFormText } from './CFormText'
-
-export interface CFormControlWrapperProps extends CFormControlValidationProps {
-  /**
-   * @ignore
-   */
-  children?: ReactNode
-  /**
-   * A string of all className you want applied to the floating label wrapper.
-   *
-   * @since 4.5.0
-   */
-  floatingClassName?: string
-  /**
-   * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
-   *
-   * @since 4.2.0
-   */
-  floatingLabel?: ReactNode | string
-  /**
-   * @ignore
-   */
-  id?: string
-  /**
-   * Add a caption for a component.
-   *
-   * @since 4.2.0
-   */
-  label?: ReactNode | string
-  /**
-   * Add helper text to the component.
-   *
-   * @since 4.2.0
-   */
-  text?: ReactNode | string
-}
-
-export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
-  children,
-  describedby,
-  feedback,
-  feedbackInvalid,
-  feedbackValid,
-  floatingClassName,
-  floatingLabel,
-  id,
-  invalid,
-  label,
-  text,
-  tooltipFeedback,
-  valid,
-}) => {
-  const FormControlValidation = () => (
-    <CFormControlValidation
-      describedby={describedby}
-      feedback={feedback}
-      feedbackInvalid={feedbackInvalid}
-      feedbackValid={feedbackValid}
-      floatingLabel={floatingLabel}
-      invalid={invalid}
-      tooltipFeedback={tooltipFeedback}
-      valid={valid}
-    />
-  )
-  return floatingLabel ? (
-    <CFormFloating className={floatingClassName}>
-      {children}
-      <CFormLabel htmlFor={id}>{label || floatingLabel}</CFormLabel>
-      {text && <CFormText id={describedby}>{text}</CFormText>}
-      <FormControlValidation />
-    </CFormFloating>
-  ) : (
-    <>
-      {label && <CFormLabel htmlFor={id}>{label}</CFormLabel>}
-      {children}
-      {text && <CFormText id={describedby}>{text}</CFormText>}
-      <FormControlValidation />
-    </>
-  )
-}
-
-CFormControlWrapper.propTypes = {
-  children: PropTypes.node,
-  floatingClassName: PropTypes.string,
-  floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  ...CFormControlValidation.propTypes,
-}
-
-CFormControlWrapper.displayName = 'CFormControlWrapper'
diff --git a/packages/coreui-react/src/components/form/CFormFeedback.tsx b/packages/coreui-react/src/components/form/CFormFeedback.tsx
deleted file mode 100644
index ab7dc7a0..00000000
--- a/packages/coreui-react/src/components/form/CFormFeedback.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CFormFeedbackProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-
-  /**
-   * Method called immediately after the `value` prop changes.
-   */
-  invalid?: boolean
-  /**
-   * If your form layout allows it, you can display validation feedback in a styled tooltip.
-   */
-  tooltip?: boolean
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-}
-
-export const CFormFeedback: PolymorphicRefForwardingComponent<'div', CFormFeedbackProps> =
-  forwardRef<HTMLDivElement | HTMLSpanElement, CFormFeedbackProps>(
-    ({ children, as: Component = 'div', className, invalid, tooltip, valid, ...rest }, ref) => {
-      return (
-        <Component
-          className={classNames(
-            {
-              [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
-              [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
-            },
-            className,
-          )}
-          {...rest}
-          ref={ref}
-        >
-          {children}
-        </Component>
-      )
-    },
-  )
-
-CFormFeedback.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  invalid: PropTypes.bool,
-  tooltip: PropTypes.bool,
-  valid: PropTypes.bool,
-}
-
-CFormFeedback.displayName = 'CFormFeedback'
diff --git a/packages/coreui-react/src/components/form/CFormFloating.tsx b/packages/coreui-react/src/components/form/CFormFloating.tsx
deleted file mode 100644
index 5d2ec950..00000000
--- a/packages/coreui-react/src/components/form/CFormFloating.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CFormFloatingProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CFormFloating = forwardRef<HTMLDivElement, CFormFloatingProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('form-floating', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CFormFloating.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CFormFloating.displayName = 'CFormFloating'
diff --git a/packages/coreui-react/src/components/form/CFormInput.tsx b/packages/coreui-react/src/components/form/CFormInput.tsx
deleted file mode 100644
index 82bdc27e..00000000
--- a/packages/coreui-react/src/components/form/CFormInput.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, {
-  ChangeEventHandler,
-  forwardRef,
-  InputHTMLAttributes,
-  useEffect,
-  useState,
-} from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
-
-export interface CFormInputProps
-  extends CFormControlWrapperProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * 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.
-   */
-  delay?: boolean | number
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Method called immediately after the `value` prop changes.
-   */
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  /**
-   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-   */
-  plainText?: boolean
-  /**
-   * Toggle the readonly state for the component.
-   */
-  readOnly?: boolean
-  /**
-   * Size the component small or large.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Specifies the type of component.
-   */
-  type?: 'color' | 'file' | 'text' | string
-  /**
-   * The `value` attribute of component.
-   *
-   * @controllable onChange
-   * */
-  value?: string | string[] | number
-}
-
-export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
-  (
-    {
-      children,
-      className,
-      delay = false,
-      feedback,
-      feedbackInvalid,
-      feedbackValid,
-      floatingClassName,
-      floatingLabel,
-      id,
-      invalid,
-      label,
-      onChange,
-      plainText,
-      size,
-      text,
-      tooltipFeedback,
-      type = 'text',
-      valid,
-      ...rest
-    },
-    ref,
-  ) => {
-    const [value, setValue] = useState<React.ChangeEvent<HTMLInputElement>>()
-
-    useEffect(() => {
-      const timeOutId = setTimeout(
-        () => value && onChange && onChange(value),
-        typeof delay === 'number' ? delay : 500,
-      )
-
-      return () => clearTimeout(timeOutId)
-    }, [value])
-
-    return (
-      <CFormControlWrapper
-        describedby={rest['aria-describedby']}
-        feedback={feedback}
-        feedbackInvalid={feedbackInvalid}
-        feedbackValid={feedbackValid}
-        floatingClassName={floatingClassName}
-        floatingLabel={floatingLabel}
-        id={id}
-        invalid={invalid}
-        label={label}
-        text={text}
-        tooltipFeedback={tooltipFeedback}
-        valid={valid}
-      >
-        <input
-          className={classNames(
-            plainText ? 'form-control-plaintext' : 'form-control',
-            {
-              [`form-control-${size}`]: size,
-              'form-control-color': type === 'color',
-              'is-invalid': invalid,
-              'is-valid': valid,
-            },
-            className,
-          )}
-          id={id}
-          type={type}
-          onChange={(event) => (delay ? setValue(event) : onChange && onChange(event))}
-          {...rest}
-          ref={ref}
-        >
-          {children}
-        </input>
-      </CFormControlWrapper>
-    )
-  },
-)
-
-CFormInput.propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-  delay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-  plainText: PropTypes.bool,
-  size: PropTypes.oneOf(['sm', 'lg']),
-  type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]),
-  ...CFormControlWrapper.propTypes,
-}
-
-CFormInput.displayName = 'CFormInput'
diff --git a/packages/coreui-react/src/components/form/CFormLabel.tsx b/packages/coreui-react/src/components/form/CFormLabel.tsx
deleted file mode 100644
index 5e8e06f0..00000000
--- a/packages/coreui-react/src/components/form/CFormLabel.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { forwardRef, LabelHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CFormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * A string of all className you want to be applied to the component, and override standard className value.
-   */
-  customClassName?: string
-}
-
-export const CFormLabel = forwardRef<HTMLLabelElement, CFormLabelProps>(
-  ({ children, className, customClassName, ...rest }, ref) => {
-    return (
-      <label className={customClassName ?? classNames('form-label', className)} {...rest} ref={ref}>
-        {children}
-      </label>
-    )
-  },
-)
-
-CFormLabel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  customClassName: PropTypes.string,
-}
-
-CFormLabel.displayName = 'CFormLabel'
diff --git a/packages/coreui-react/src/components/form/CFormRange.tsx b/packages/coreui-react/src/components/form/CFormRange.tsx
deleted file mode 100644
index 583f5713..00000000
--- a/packages/coreui-react/src/components/form/CFormRange.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CFormLabel } from './CFormLabel'
-export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Add a caption for a component.
-   *
-   * @since 4.2.0
-   */
-  label?: ReactNode | string
-  /**
-   * Specifies the maximum value for the component.
-   */
-  max?: number
-  /**
-   * Specifies the minimum value for the component.
-   */
-  min?: number
-  /**
-   * Method called immediately after the `value` prop changes.
-   */
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  /**
-   * Toggle the readonly state for the component.
-   */
-  readOnly?: boolean
-  /**
-   * Specifies the interval between legal numbers in the component.
-   */
-  step?: number
-  /**
-   * The `value` attribute of component.
-   *
-   * @controllable onChange
-   * */
-  value?: string | string[] | number
-}
-
-export const CFormRange = forwardRef<HTMLInputElement, CFormRangeProps>(
-  ({ className, label, ...rest }, ref) => {
-    return (
-      <>
-        {label && <CFormLabel htmlFor={rest.id}>{label}</CFormLabel>}
-        <input type="range" className={classNames('form-range', className)} {...rest} ref={ref} />
-      </>
-    )
-  },
-)
-
-CFormRange.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-}
-
-CFormRange.displayName = 'CFormRange'
diff --git a/packages/coreui-react/src/components/form/CFormSelect.tsx b/packages/coreui-react/src/components/form/CFormSelect.tsx
deleted file mode 100644
index 42527495..00000000
--- a/packages/coreui-react/src/components/form/CFormSelect.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
-
-type Option = {
-  disabled?: boolean
-  label?: string
-  selected?: boolean
-  value?: string
-}
-
-export interface CFormSelectProps
-  extends CFormControlWrapperProps,
-    Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Specifies the number of visible options in a drop-down list.
-   */
-  htmlSize?: number
-  /**
-   * Method called immediately after the `value` prop changes.
-   */
-  onChange?: ChangeEventHandler<HTMLSelectElement>
-  /**
-   * Options list of the select component. Available keys: `label`, `value`, `disabled`.
-   * Examples:
-   * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
-   * - `options={['js', 'html']}`
-   */
-  options?: Option[] | string[]
-  /**
-   * Size the component small or large.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * The `value` attribute of component.
-   *
-   * @controllable onChange
-   */
-  value?: string | string[] | number
-}
-
-export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
-  (
-    {
-      children,
-      className,
-      feedback,
-      feedbackInvalid,
-      feedbackValid,
-      floatingClassName,
-      floatingLabel,
-      htmlSize,
-      id,
-      invalid,
-      label,
-      options,
-      size,
-      text,
-      tooltipFeedback,
-      valid,
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <CFormControlWrapper
-        describedby={rest['aria-describedby']}
-        feedback={feedback}
-        feedbackInvalid={feedbackInvalid}
-        feedbackValid={feedbackValid}
-        floatingClassName={floatingClassName}
-        floatingLabel={floatingLabel}
-        id={id}
-        invalid={invalid}
-        label={label}
-        text={text}
-        tooltipFeedback={tooltipFeedback}
-        valid={valid}
-      >
-        <select
-          id={id}
-          className={classNames(
-            'form-select',
-            {
-              [`form-select-${size}`]: size,
-              'is-invalid': invalid,
-              'is-valid': valid,
-            },
-            className,
-          )}
-          size={htmlSize}
-          {...rest}
-          ref={ref}
-        >
-          {options
-            ? options.map((option, index) => {
-                return (
-                  <option
-                    {...(typeof option === 'object' &&
-                      option.disabled && { disabled: option.disabled })}
-                    {...(typeof option === 'object' &&
-                      option.value !== undefined && { value: option.value })}
-                    key={index}
-                  >
-                    {typeof option === 'string' ? option : option.label}
-                  </option>
-                )
-              })
-            : children}
-        </select>
-      </CFormControlWrapper>
-    )
-  },
-)
-
-CFormSelect.propTypes = {
-  className: PropTypes.string,
-  htmlSize: PropTypes.number,
-  options: PropTypes.array,
-  ...CFormControlWrapper.propTypes,
-}
-
-CFormSelect.displayName = 'CFormSelect'
diff --git a/packages/coreui-react/src/components/form/CFormSwitch.tsx b/packages/coreui-react/src/components/form/CFormSwitch.tsx
deleted file mode 100644
index cbb0e9e4..00000000
--- a/packages/coreui-react/src/components/form/CFormSwitch.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CFormLabel } from './CFormLabel'
-
-export interface CFormSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-   */
-  id?: string
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * The element represents a caption for a component.
-   */
-  label?: string | ReactNode
-  /**
-   * Put switch on the opposite side.
-   *
-   * @sinve 4.7.0
-   */
-  reverse?: boolean
-  /**
-   * Size the component large or extra large. Works only with `switch`.
-   */
-  size?: 'lg' | 'xl'
-  /**
-   * Specifies the type of component.
-   */
-  type?: 'checkbox' | 'radio'
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-}
-
-export const CFormSwitch = forwardRef<HTMLInputElement, CFormSwitchProps>(
-  ({ className, id, invalid, label, reverse, size, type = 'checkbox', valid, ...rest }, ref) => {
-    return (
-      <div
-        className={classNames(
-          'form-check form-switch',
-          {
-            'form-check-reverse': reverse,
-            [`form-switch-${size}`]: size,
-            'is-invalid': invalid,
-            'is-valid': valid,
-          },
-          className,
-        )}
-      >
-        <input
-          type={type}
-          className={classNames('form-check-input', {
-            'is-invalid': invalid,
-            'is-valid': valid,
-          })}
-          id={id}
-          {...rest}
-          ref={ref}
-        />
-        {label && (
-          <CFormLabel customClassName="form-check-label" {...(id && { htmlFor: id })}>
-            {label}
-          </CFormLabel>
-        )}
-      </div>
-    )
-  },
-)
-
-CFormSwitch.propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-  invalid: PropTypes.bool,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  reverse: PropTypes.bool,
-  size: PropTypes.oneOf(['lg', 'xl']),
-  type: PropTypes.oneOf(['checkbox', 'radio']),
-  valid: PropTypes.bool,
-}
-
-CFormSwitch.displayName = 'CFormSwitch'
diff --git a/packages/coreui-react/src/components/form/CFormText.tsx b/packages/coreui-react/src/components/form/CFormText.tsx
deleted file mode 100644
index 720c3eab..00000000
--- a/packages/coreui-react/src/components/form/CFormText.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CFormTextProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CFormText: PolymorphicRefForwardingComponent<'div', CFormTextProps> = forwardRef<
-  HTMLDivElement | HTMLSpanElement,
-  CFormTextProps
->(({ children, as: Component = 'div', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('form-text', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CFormText.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CFormText.displayName = 'CFormText'
diff --git a/packages/coreui-react/src/components/form/CFormTextarea.tsx b/packages/coreui-react/src/components/form/CFormTextarea.tsx
deleted file mode 100644
index fa47f6e1..00000000
--- a/packages/coreui-react/src/components/form/CFormTextarea.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { ChangeEventHandler, forwardRef, TextareaHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
-
-export interface CFormTextareaProps
-  extends CFormControlWrapperProps,
-    TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Method called immediately after the `value` prop changes.
-   */
-  onChange?: ChangeEventHandler<HTMLTextAreaElement>
-  /**
-   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-   */
-  plainText?: boolean
-  /**
-   * Toggle the readonly state for the component.
-   */
-  readOnly?: boolean
-  /**
-   * The `value` attribute of component.
-   *
-   * @controllable onChange
-   * */
-  value?: string | string[] | number
-}
-
-export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>(
-  (
-    {
-      children,
-      className,
-      feedback,
-      feedbackInvalid,
-      feedbackValid,
-      floatingClassName,
-      floatingLabel,
-      id,
-      invalid,
-      label,
-      plainText,
-      text,
-      tooltipFeedback,
-      valid,
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <CFormControlWrapper
-        describedby={rest['aria-describedby']}
-        feedback={feedback}
-        feedbackInvalid={feedbackInvalid}
-        feedbackValid={feedbackValid}
-        floatingClassName={floatingClassName}
-        floatingLabel={floatingLabel}
-        id={id}
-        invalid={invalid}
-        label={label}
-        text={text}
-        tooltipFeedback={tooltipFeedback}
-        valid={valid}
-      >
-        <textarea
-          className={classNames(
-            plainText ? 'form-control-plaintext' : 'form-control',
-            {
-              'is-invalid': invalid,
-              'is-valid': valid,
-            },
-            className,
-          )}
-          id={id}
-          {...rest}
-          ref={ref}
-        >
-          {children}
-        </textarea>
-      </CFormControlWrapper>
-    )
-  },
-)
-
-CFormTextarea.propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-  plainText: PropTypes.bool,
-  ...CFormControlWrapper.propTypes,
-}
-
-CFormTextarea.displayName = 'CFormTextarea'
diff --git a/packages/coreui-react/src/components/form/CInputGroup.tsx b/packages/coreui-react/src/components/form/CInputGroup.tsx
deleted file mode 100644
index eedd5169..00000000
--- a/packages/coreui-react/src/components/form/CInputGroup.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CInputGroupProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Size the component small or large.
-   */
-  size?: 'sm' | 'lg'
-}
-
-export const CInputGroup = forwardRef<HTMLDivElement, CInputGroupProps>(
-  ({ children, className, size, ...rest }, ref) => {
-    return (
-      <div
-        className={classNames(
-          'input-group',
-          {
-            [`input-group-${size}`]: size,
-          },
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-
-CInputGroup.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'lg']),
-}
-
-CInputGroup.displayName = 'CInputGroup'
diff --git a/packages/coreui-react/src/components/form/CInputGroupText.tsx b/packages/coreui-react/src/components/form/CInputGroupText.tsx
deleted file mode 100644
index f56c1620..00000000
--- a/packages/coreui-react/src/components/form/CInputGroupText.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { ElementType, forwardRef, LabelHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CInputGroupTextProps
-  extends LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CInputGroupText: PolymorphicRefForwardingComponent<'span', CInputGroupTextProps> =
-  forwardRef<HTMLLabelElement | HTMLSpanElement, CInputGroupTextProps>(
-    ({ children, as: Component = 'span', className, ...rest }, ref) => {
-      return (
-        <Component className={classNames('input-group-text', className)} {...rest} ref={ref}>
-          {children}
-        </Component>
-      )
-    },
-  )
-
-CInputGroupText.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CInputGroupText.displayName = 'CInputGroupText'
diff --git a/packages/coreui-react/src/components/form/__tests__/CForm.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CForm.spec.tsx
deleted file mode 100644
index dd838fc8..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CForm.spec.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CButton } from '../../button'
-import { CForm, CFormLabel, CFormInput, CFormText, CFormCheck } from '../index'
-
-test('loads and displays CForm component', async () => {
-  const { container } = render(<CForm>Test</CForm>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CForm customize', async () => {
-  const { container } = render(
-    <CForm className="bazinga" validated={true}>
-      Test
-    </CForm>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('was-validated')
-})
-
-test('CForm example', async () => {
-  const { container } = render(
-    <CForm>
-      <CFormLabel>A</CFormLabel>
-      <CFormInput type="email" aria-describedby="B" />
-      <CFormText>C</CFormText>
-      <CFormCheck label="D" />
-      <CButton type="submit" color="primary">
-        E
-      </CButton>
-    </CForm>,
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormCheck.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormCheck.spec.tsx
deleted file mode 100644
index ac02b114..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormCheck.spec.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormCheck } from '../index'
-
-test('loads and displays CFormCheck component', async () => {
-  const { container } = render(<CFormCheck />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormCheck customize button=false', async () => {
-  const { container } = render(
-    <CFormCheck className="bazinga" id="id" inline={true} label="label" type="radio" />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-check')
-  expect(container.firstChild).toHaveClass('form-check-inline')
-})
-
-test('CFormCheck customize button=true', async () => {
-  const { container } = render(
-    <CFormCheck
-      button={{ color: 'primary', size: 'lg', shape: 'rounded', variant: 'ghost' }}
-      className="bazinga"
-      id="id"
-      inline={true}
-      label="label"
-      type="radio"
-    />,
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormControl.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormControl.spec.tsx
deleted file mode 100644
index 1279dc88..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormControl.spec.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormInput } from '../index'
-
-test('loads and displays CFormInput component', async () => {
-  const { container } = render(<CFormInput />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormInput customize', async () => {
-  const { container } = render(
-    <CFormInput
-      className="bazinga"
-      disabled={true}
-      plainText={true}
-      readOnly={true}
-      size="lg"
-      type="color"
-      value="value"
-    />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-control-plaintext')
-  expect(container.firstChild).toHaveClass('form-control-color')
-  expect(container.firstChild).toHaveClass('form-control-lg')
-})
-
-test('CFormInput change input', async () => {
-  jest.useFakeTimers()
-  const onChange = jest.fn()
-  render(<CFormInput onChange={onChange} />)
-  expect(onChange).toHaveBeenCalledTimes(0)
-  const input = document.querySelector('input')
-  if (input !== null) {
-    fireEvent.change(input, { target: { value: 'bazinga' } })
-  }
-  expect(onChange).toHaveBeenCalledTimes(1)
-  if (input !== null) {
-    fireEvent.change(input, { target: { value: '2' } })
-  }
-  expect(onChange).toHaveBeenCalledTimes(2)
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormFeedback.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormFeedback.spec.tsx
deleted file mode 100644
index 51a1e3c2..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormFeedback.spec.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormFeedback } from '../index'
-
-test('loads and displays CFormFeedback component', async () => {
-  const { container } = render(<CFormFeedback />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormFeedback customize one', async () => {
-  const { container } = render(
-    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={true} />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('invalid-tooltip')
-  expect(container.firstChild).toHaveClass('valid-tooltip')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
-
-test('CFormFeedback customize two', async () => {
-  const { container } = render(
-    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={false} />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('invalid-feedback')
-  expect(container.firstChild).toHaveClass('valid-feedback')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormFloating.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormFloating.spec.tsx
deleted file mode 100644
index e56e0c06..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormFloating.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormFloating } from '../index'
-
-test('loads and displays CFormFloating component', async () => {
-  const { container } = render(<CFormFloating />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormFloating customize', async () => {
-  const { container } = render(<CFormFloating className="bazinga">Test</CFormFloating>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-floating')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormInput.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormInput.spec.tsx
deleted file mode 100644
index 0f018b6b..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormInput.spec.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormInput } from '../index'
-
-test('loads and displays CFormInput component', async () => {
-  const { container } = render(<CFormInput />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormInput customize one', async () => {
-  const { container } = render(<CFormInput />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-control')
-})
-
-test('CFormInput customize two', async () => {
-  const { container } = render(
-    <CFormInput
-      className="bazinga"
-      disabled={true}
-      invalid={true}
-      plainText={true}
-      readOnly={true}
-      size="lg"
-      type="color"
-      valid={true}
-      value="#888888"
-    />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-control-lg')
-  expect(container.firstChild).toHaveClass('form-control-color')
-  expect(container.firstChild).toHaveClass('is-invalid')
-  expect(container.firstChild).toHaveClass('is-valid')
-  expect(container.firstChild).toHaveClass('form-control-plaintext')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveAttribute('value', '#888888')
-  expect(container.firstChild).toHaveAttribute('type', 'color')
-  expect(container.firstChild).toHaveAttribute('disabled', '')
-  expect(container.firstChild).toHaveAttribute('readonly', '')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx
deleted file mode 100644
index 14b518cf..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormLabel } from '../index'
-
-test('loads and displays CFormLabel component', async () => {
-  const { container } = render(<CFormLabel>Test</CFormLabel>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormLabel customize className', async () => {
-  const { container } = render(<CFormLabel className="bazinga">Test</CFormLabel>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-label')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
-
-test('CFormLabel customize htmlFor', async () => {
-  const { container } = render(<CFormLabel htmlFor="bazinga">Test</CFormLabel>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveAttribute('for', 'bazinga')
-  expect(container.firstChild).toHaveClass('form-label')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormRange.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormRange.spec.tsx
deleted file mode 100644
index dcb62bab..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormRange.spec.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormRange } from '../index'
-
-test('loads and displays CFormRange component', async () => {
-  const { container } = render(<CFormRange step={3} />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormRange customize', async () => {
-  const { container } = render(
-    <CFormRange
-      className="bazinga"
-      step={2}
-      disabled={true}
-      max={150}
-      min={20}
-      readOnly={true}
-      value={80}
-    />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-range')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveAttribute('disabled', '')
-  expect(container.firstChild).toHaveAttribute('max', '150')
-  expect(container.firstChild).toHaveAttribute('min', '20')
-  expect(container.firstChild).toHaveAttribute('readonly', '')
-  expect(container.firstChild).toHaveAttribute('step', '2')
-  expect(container.firstChild).toHaveAttribute('type', 'range')
-  expect(container.firstChild).toHaveAttribute('value', '80')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormSelect.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormSelect.spec.tsx
deleted file mode 100644
index 5b49e928..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormSelect.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormSelect } from '../index'
-
-test('loads and displays CFormSelect component', async () => {
-  const { container } = render(<CFormSelect></CFormSelect>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormSelect customize', async () => {
-  const { container } = render(
-    <CFormSelect className="bazinga" size="lg">
-      <option value="A">B</option>
-      <option>C</option>
-    </CFormSelect>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-select')
-  expect(container.firstChild).toHaveClass('form-select-lg')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormSwitch.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormSwitch.spec.tsx
deleted file mode 100644
index 77512cd7..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormSwitch.spec.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormSwitch } from '../index'
-
-test('loads and displays CFormSwitch component', async () => {
-  const { container } = render(<CFormSwitch />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormSwitch customize', async () => {
-  const { container } = render(
-    <CFormSwitch
-      className="bazinga"
-      id="2"
-      invalid={true}
-      label="Some label"
-      size="xl"
-      type="radio"
-      valid={true}
-    />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-check')
-  expect(container.firstChild).toHaveClass('form-switch')
-  expect(container.firstChild).toHaveClass('form-switch-xl')
-  expect(container.firstChild).toHaveClass('is-invalid')
-  expect(container.firstChild).toHaveClass('is-valid')
-  expect(container.firstChild).toHaveClass('bazinga')
-  if (container.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('form-check-input')
-    expect(container.firstChild.firstChild).toHaveClass('is-invalid')
-    expect(container.firstChild.firstChild).toHaveClass('is-valid')
-    expect(container.firstChild.firstChild).toHaveAttribute('id', '2')
-    expect(container.firstChild.firstChild).toHaveAttribute('type', 'radio')
-    expect(container.firstChild.lastChild).toHaveClass('form-check-label')
-    expect(container.firstChild.lastChild).toHaveTextContent('Some label')
-    expect(container.firstChild.lastChild).toHaveAttribute('for', '2')
-  }
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormText.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormText.spec.tsx
deleted file mode 100644
index 80fa5719..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormText.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormText } from '../index'
-
-test('loads and displays CFormText component', async () => {
-  const { container } = render(<CFormText>Test</CFormText>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormText customize', async () => {
-  const { container } = render(
-    <CFormText className="bazinga" as="h3">
-      Test
-    </CFormText>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-text')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormTextarea.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormTextarea.spec.tsx
deleted file mode 100644
index c864e7c5..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CFormTextarea.spec.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormTextarea } from '../index'
-
-test('loads and displays CFormTextarea component', async () => {
-  const { container } = render(<CFormTextarea defaultValue="Some value" />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-control')
-})
-
-test('CFormTextarea customize', async () => {
-  const { container } = render(
-    <CFormTextarea
-      className="bazinga"
-      disabled={true}
-      invalid={true}
-      plainText={true}
-      readOnly={true}
-      valid={true}
-      defaultValue="Some value"
-      rows={2}
-    />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-control-plaintext')
-  expect(container.firstChild).toHaveClass('is-invalid')
-  expect(container.firstChild).toHaveClass('is-valid')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Some value')
-  expect(container.firstChild).toHaveAttribute('disabled', '')
-  expect(container.firstChild).toHaveAttribute('readonly', '')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CInputGroup.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CInputGroup.spec.tsx
deleted file mode 100644
index e18ebe46..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CInputGroup.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CInputGroup } from '../index'
-
-test('loads and displays CInputGroup component', async () => {
-  const { container } = render(<CInputGroup>Test</CInputGroup>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CInputGroup customize', async () => {
-  const { container } = render(
-    <CInputGroup className="bazinga" size="lg">
-      Test
-    </CInputGroup>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('input-group')
-  expect(container.firstChild).toHaveClass('input-group-lg')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/CInputGroupText.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CInputGroupText.spec.tsx
deleted file mode 100644
index 5c006c26..00000000
--- a/packages/coreui-react/src/components/form/__tests__/CInputGroupText.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CInputGroupText } from '../index'
-
-test('loads and displays CInputGroupText component', async () => {
-  const { container } = render(<CInputGroupText>Test</CInputGroupText>)
-  expect(container).toMatchSnapshot()
-})
-
-test('renders CInputGroupText component as a label', async () => {
-  const { container } = render(
-    <CInputGroupText as="label" htmlFor="input">
-      Test
-    </CInputGroupText>,
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CInputGroupText customize', async () => {
-  const { container } = render(<CInputGroupText className="bazinga">Test</CInputGroupText>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('input-group-text')
-})
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap
deleted file mode 100644
index 518a05bf..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CForm customize 1`] = `
-<div>
-  <form
-    class="was-validated bazinga"
-  >
-    Test
-  </form>
-</div>
-`;
-
-exports[`CForm example 1`] = `
-<div>
-  <form>
-    <label
-      class="form-label"
-    >
-      A
-    </label>
-    <input
-      aria-describedby="B"
-      class="form-control"
-      type="email"
-    />
-    <div
-      class="form-text"
-    >
-      C
-    </div>
-    <div
-      class="form-check"
-    >
-      <input
-        class="form-check-input"
-        type="checkbox"
-      />
-      <label
-        class="form-check-label"
-      >
-        D
-      </label>
-    </div>
-    <button
-      class="btn btn-primary"
-      type="submit"
-    >
-      E
-    </button>
-  </form>
-</div>
-`;
-
-exports[`loads and displays CForm component 1`] = `
-<div>
-  <form>
-    Test
-  </form>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormCheck.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormCheck.spec.tsx.snap
deleted file mode 100644
index 42a5bac3..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormCheck.spec.tsx.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormCheck customize button=false 1`] = `
-<div>
-  <div
-    class="form-check form-check-inline bazinga"
-  >
-    <input
-      class="form-check-input"
-      id="id"
-      type="radio"
-    />
-    <label
-      class="form-check-label"
-      for="id"
-    >
-      label
-    </label>
-  </div>
-</div>
-`;
-
-exports[`CFormCheck customize button=true 1`] = `
-<div>
-  <input
-    class="btn-check"
-    id="id"
-    type="radio"
-  />
-  <label
-    class="btn btn-ghost-primary btn-lg rounded"
-    for="id"
-  >
-    label
-  </label>
-</div>
-`;
-
-exports[`loads and displays CFormCheck component 1`] = `
-<div>
-  <input
-    class="form-check-input"
-    type="checkbox"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormControl.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormControl.spec.tsx.snap
deleted file mode 100644
index af969a06..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormControl.spec.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormInput customize 1`] = `
-<div>
-  <input
-    class="form-control-plaintext form-control-lg form-control-color bazinga"
-    disabled=""
-    readonly=""
-    type="color"
-    value="value"
-  />
-</div>
-`;
-
-exports[`loads and displays CFormInput component 1`] = `
-<div>
-  <input
-    class="form-control"
-    type="text"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormFeedback.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormFeedback.spec.tsx.snap
deleted file mode 100644
index ec5c3b48..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormFeedback.spec.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormFeedback customize one 1`] = `
-<div>
-  <div
-    class="invalid-tooltip valid-tooltip bazinga"
-  />
-</div>
-`;
-
-exports[`CFormFeedback customize two 1`] = `
-<div>
-  <div
-    class="invalid-feedback valid-feedback bazinga"
-  />
-</div>
-`;
-
-exports[`loads and displays CFormFeedback component 1`] = `
-<div>
-  <div
-    class=""
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormFloating.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormFloating.spec.tsx.snap
deleted file mode 100644
index 69dc47eb..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormFloating.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormFloating customize 1`] = `
-<div>
-  <div
-    class="form-floating bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CFormFloating component 1`] = `
-<div>
-  <div
-    class="form-floating"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormInput.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormInput.spec.tsx.snap
deleted file mode 100644
index f73155fa..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormInput.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormInput customize one 1`] = `
-<div>
-  <input
-    class="form-control"
-    type="text"
-  />
-</div>
-`;
-
-exports[`CFormInput customize two 1`] = `
-<div>
-  <input
-    class="form-control-plaintext form-control-lg form-control-color is-invalid is-valid bazinga"
-    disabled=""
-    readonly=""
-    type="color"
-    value="#888888"
-  />
-</div>
-`;
-
-exports[`loads and displays CFormInput component 1`] = `
-<div>
-  <input
-    class="form-control"
-    type="text"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormLabel.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormLabel.spec.tsx.snap
deleted file mode 100644
index 6bc2378d..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormLabel.spec.tsx.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormLabel customize className 1`] = `
-<div>
-  <label
-    class="form-label bazinga"
-  >
-    Test
-  </label>
-</div>
-`;
-
-exports[`CFormLabel customize htmlFor 1`] = `
-<div>
-  <label
-    class="form-label"
-    for="bazinga"
-  >
-    Test
-  </label>
-</div>
-`;
-
-exports[`loads and displays CFormLabel component 1`] = `
-<div>
-  <label
-    class="form-label"
-  >
-    Test
-  </label>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormRange.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormRange.spec.tsx.snap
deleted file mode 100644
index 990ec53a..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormRange.spec.tsx.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormRange customize 1`] = `
-<div>
-  <input
-    class="form-range bazinga"
-    disabled=""
-    max="150"
-    min="20"
-    readonly=""
-    step="2"
-    type="range"
-    value="80"
-  />
-</div>
-`;
-
-exports[`loads and displays CFormRange component 1`] = `
-<div>
-  <input
-    class="form-range"
-    step="3"
-    type="range"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormSelect.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormSelect.spec.tsx.snap
deleted file mode 100644
index 3dd06df6..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormSelect.spec.tsx.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormSelect customize 1`] = `
-<div>
-  <select
-    class="form-select form-select-lg bazinga"
-  >
-    <option
-      value="A"
-    >
-      B
-    </option>
-    <option>
-      C
-    </option>
-  </select>
-</div>
-`;
-
-exports[`loads and displays CFormSelect component 1`] = `
-<div>
-  <select
-    class="form-select"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormSwitch.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormSwitch.spec.tsx.snap
deleted file mode 100644
index 8c6825d5..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormSwitch.spec.tsx.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormSwitch customize 1`] = `
-<div>
-  <div
-    class="form-check form-switch form-switch-xl is-invalid is-valid bazinga"
-  >
-    <input
-      class="form-check-input is-invalid is-valid"
-      id="2"
-      type="radio"
-    />
-    <label
-      class="form-check-label"
-      for="2"
-    >
-      Some label
-    </label>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CFormSwitch component 1`] = `
-<div>
-  <div
-    class="form-check form-switch"
-  >
-    <input
-      class="form-check-input"
-      type="checkbox"
-    />
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormText.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormText.spec.tsx.snap
deleted file mode 100644
index 8cdf34a3..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormText.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormText customize 1`] = `
-<div>
-  <h3
-    class="form-text bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CFormText component 1`] = `
-<div>
-  <div
-    class="form-text"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.tsx.snap
deleted file mode 100644
index d94413db..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.tsx.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormTextarea customize 1`] = `
-<div>
-  <textarea
-    class="form-control-plaintext is-invalid is-valid bazinga"
-    disabled=""
-    readonly=""
-    rows="2"
-  >
-    Some value
-  </textarea>
-</div>
-`;
-
-exports[`loads and displays CFormTextarea component 1`] = `
-<div>
-  <textarea
-    class="form-control"
-  >
-    Some value
-  </textarea>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CInputGroup.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CInputGroup.spec.tsx.snap
deleted file mode 100644
index 33b1b5e1..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CInputGroup.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CInputGroup customize 1`] = `
-<div>
-  <div
-    class="input-group input-group-lg bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CInputGroup component 1`] = `
-<div>
-  <div
-    class="input-group"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CInputGroupText.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CInputGroupText.spec.tsx.snap
deleted file mode 100644
index 00ae0e56..00000000
--- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CInputGroupText.spec.tsx.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CInputGroupText customize 1`] = `
-<div>
-  <span
-    class="input-group-text bazinga"
-  >
-    Test
-  </span>
-</div>
-`;
-
-exports[`loads and displays CInputGroupText component 1`] = `
-<div>
-  <span
-    class="input-group-text"
-  >
-    Test
-  </span>
-</div>
-`;
-
-exports[`renders CInputGroupText component as a label 1`] = `
-<div>
-  <label
-    class="input-group-text"
-    for="input"
-  >
-    Test
-  </label>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/form/index.ts b/packages/coreui-react/src/components/form/index.ts
deleted file mode 100644
index 7e609487..00000000
--- a/packages/coreui-react/src/components/form/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { CForm } from './CForm'
-import { CFormCheck } from './CFormCheck'
-import { CFormControlValidation } from './CFormControlValidation'
-import { CFormControlWrapper } from './CFormControlWrapper'
-import { CFormFeedback } from './CFormFeedback'
-import { CFormFloating } from './CFormFloating'
-import { CFormInput } from './CFormInput'
-import { CFormLabel } from './CFormLabel'
-import { CFormRange } from './CFormRange'
-import { CFormSelect } from './CFormSelect'
-import { CFormSwitch } from './CFormSwitch'
-import { CFormText } from './CFormText'
-import { CFormTextarea } from './CFormTextarea'
-import { CInputGroup } from './CInputGroup'
-import { CInputGroupText } from './CInputGroupText'
-
-export {
-  CForm,
-  CFormCheck,
-  CFormControlValidation,
-  CFormControlWrapper,
-  CFormFeedback,
-  CFormFloating,
-  CFormInput,
-  CFormLabel,
-  CFormRange,
-  CFormSelect,
-  CFormSwitch,
-  CFormText,
-  CFormTextarea,
-  CInputGroup,
-  CInputGroupText,
-}
diff --git a/packages/coreui-react/src/components/grid/CCol.tsx b/packages/coreui-react/src/components/grid/CCol.tsx
deleted file mode 100644
index 2aad123d..00000000
--- a/packages/coreui-react/src/components/grid/CCol.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-type Span = 'auto' | number | string | boolean | null
-
-type BPObject = {
-  span?: Span
-  offset?: number | string | null
-  order?: 'first' | 'last' | number | string | null
-}
-
-type Col = Span | BPObject
-
-export interface CColProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * The number of columns/offset/order on extra small devices (<576px).
-   *
-   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
-   */
-  xs?: Col
-  /**
-   * The number of columns/offset/order on small devices (<768px).
-   *
-   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
-   */
-  sm?: Col
-  /**
-   * The number of columns/offset/order on medium devices (<992px).
-   *
-   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
-   */
-  md?: Col
-  /**
-   * The number of columns/offset/order on large devices (<1200px).
-   *
-   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
-   */
-  lg?: Col
-  /**
-   * The number of columns/offset/order on X-Large devices (<1400px).
-   *
-   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
-   */
-  xl?: Col
-  /**
-   * The number of columns/offset/order on XX-Large devices (≥1400px).
-   *
-   * @type { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}
-   */
-  xxl?: Col
-}
-
-const BREAKPOINTS = [
-  'xxl' as const,
-  'xl' as const,
-  'lg' as const,
-  'md' as const,
-  'sm' as const,
-  'xs' as const,
-]
-
-export const CCol = forwardRef<HTMLDivElement, CColProps>(
-  ({ children, className, ...rest }, ref) => {
-    const repsonsiveClassNames: string[] = []
-
-    BREAKPOINTS.forEach((bp) => {
-      const breakpoint = rest[bp]
-      delete rest[bp]
-
-      const infix = bp === 'xs' ? '' : `-${bp}`
-
-      if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
-        repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
-      }
-
-      if (typeof breakpoint === 'boolean') {
-        repsonsiveClassNames.push(`col${infix}`)
-      }
-
-      if (breakpoint && typeof breakpoint === 'object') {
-        if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
-          repsonsiveClassNames.push(`col${infix}-${breakpoint.span}`)
-        }
-
-        if (typeof breakpoint.span === 'boolean') {
-          repsonsiveClassNames.push(`col${infix}`)
-        }
-
-        if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
-          repsonsiveClassNames.push(`order${infix}-${breakpoint.order}`)
-        }
-
-        if (typeof breakpoint.offset === 'number') {
-          repsonsiveClassNames.push(`offset${infix}-${breakpoint.offset}`)
-        }
-      }
-    })
-
-    return (
-      <div
-        className={classNames(
-          repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col',
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-
-const span = PropTypes.oneOfType([
-  PropTypes.bool,
-  PropTypes.number,
-  PropTypes.string,
-  PropTypes.oneOf(['auto']),
-])
-
-const col = PropTypes.oneOfType([
-  span,
-  PropTypes.shape({
-    span: span,
-    offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    order: PropTypes.oneOfType([
-      PropTypes.oneOf(['first', 'last']),
-      PropTypes.number,
-      PropTypes.string,
-    ]),
-  }),
-])
-
-CCol.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  xs: col,
-  sm: col,
-  md: col,
-  lg: col,
-  xl: col,
-  xxl: col,
-}
-
-CCol.displayName = 'CCol'
diff --git a/packages/coreui-react/src/components/grid/CContainer.tsx b/packages/coreui-react/src/components/grid/CContainer.tsx
deleted file mode 100644
index c665f727..00000000
--- a/packages/coreui-react/src/components/grid/CContainer.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CContainerProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Set container 100% wide until small breakpoint.
-   */
-  sm?: boolean
-  /**
-   * Set container 100% wide until medium breakpoint.
-   */
-  md?: boolean
-  /**
-   * Set container 100% wide until large breakpoint.
-   */
-  lg?: boolean
-  /**
-   * Set container 100% wide until X-large breakpoint.
-   */
-  xl?: boolean
-  /**
-   * Set container 100% wide until XX-large breakpoint.
-   */
-  xxl?: boolean
-  /**
-   * Set container 100% wide, spanning the entire width of the viewport.
-   */
-  fluid?: boolean
-}
-
-const BREAKPOINTS = [
-  'xxl' as const,
-  'xl' as const,
-  'lg' as const,
-  'md' as const,
-  'sm' as const,
-  'fluid' as const,
-]
-
-export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
-  ({ children, className, ...rest }, ref) => {
-    const repsonsiveClassNames: string[] = []
-
-    BREAKPOINTS.forEach((bp) => {
-      const breakpoint = rest[bp]
-      delete rest[bp]
-
-      breakpoint && repsonsiveClassNames.push(`container-${bp}`)
-    })
-
-    return (
-      <div
-        className={classNames(
-          repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container',
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-
-CContainer.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  sm: PropTypes.bool,
-  md: PropTypes.bool,
-  lg: PropTypes.bool,
-  xl: PropTypes.bool,
-  xxl: PropTypes.bool,
-  fluid: PropTypes.bool,
-}
-
-CContainer.displayName = 'CContainer'
diff --git a/packages/coreui-react/src/components/grid/CRow.tsx b/packages/coreui-react/src/components/grid/CRow.tsx
deleted file mode 100644
index 05a54711..00000000
--- a/packages/coreui-react/src/components/grid/CRow.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export type BPObject = {
-  cols?: 'auto' | number | string | null
-  gutter?: number | string | null
-  gutterX?: number | string | null
-  gutterY?: number | string | null
-}
-
-export interface CRowProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * The number of columns/offset/order on extra small devices (<576px).
-   *
-   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
-   */
-  xs?: BPObject
-  /**
-   * The number of columns/offset/order on small devices (<768px).
-   *
-   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
-   */
-  sm?: BPObject
-  /**
-   * The number of columns/offset/order on medium devices (<992px).
-   *
-   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
-   */
-  md?: BPObject
-  /**
-   * The number of columns/offset/order on large devices (<1200px).
-   *
-   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
-   */
-  lg?: BPObject
-  /**
-   * The number of columns/offset/order on X-Large devices (<1400px).
-   *
-   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
-   */
-  xl?: BPObject
-  /**
-   * The number of columns/offset/order on XX-Large devices (≥1400px).
-   *
-   * @type {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}
-   */
-  xxl?: BPObject
-}
-
-const BREAKPOINTS = [
-  'xxl' as const,
-  'xl' as const,
-  'lg' as const,
-  'md' as const,
-  'sm' as const,
-  'xs' as const,
-]
-
-export const CRow = forwardRef<HTMLDivElement, CRowProps>(
-  ({ children, className, ...rest }, ref) => {
-    const repsonsiveClassNames: string[] = []
-
-    BREAKPOINTS.forEach((bp) => {
-      const breakpoint = rest[bp]
-      delete rest[bp]
-
-      const infix = bp === 'xs' ? '' : `-${bp}`
-
-      if (typeof breakpoint === 'object') {
-        if (breakpoint.cols) {
-          repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`)
-        }
-
-        if (typeof breakpoint.gutter === 'number') {
-          repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`)
-        }
-
-        if (typeof breakpoint.gutterX === 'number') {
-          repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`)
-        }
-
-        if (typeof breakpoint.gutterY === 'number') {
-          repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`)
-        }
-      }
-    })
-
-    return (
-      <div className={classNames('row', repsonsiveClassNames, className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-const bp = PropTypes.shape({
-  cols: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.string]),
-  gutter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  gutterX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  gutterY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-})
-
-CRow.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  xs: bp,
-  sm: bp,
-  md: bp,
-  lg: bp,
-  xl: bp,
-  xxl: bp,
-}
-
-CRow.displayName = 'CRow'
diff --git a/packages/coreui-react/src/components/grid/__tests__/CCol.spec.tsx b/packages/coreui-react/src/components/grid/__tests__/CCol.spec.tsx
deleted file mode 100644
index 4136dc58..00000000
--- a/packages/coreui-react/src/components/grid/__tests__/CCol.spec.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCol } from '../index'
-
-test('CCol no-breakpoints', async () => {
-  const { container } = render(<CCol>Test</CCol>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('col')
-})
-
-test('CCol customize breakpoints are numbers', async () => {
-  const { container } = render(
-    <CCol className="bazinga" xs={1} sm={2} md={3} lg={4} xl={5} xxl={6}>
-      Test
-    </CCol>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('col-1')
-  expect(container.firstChild).toHaveClass('col-sm-2')
-  expect(container.firstChild).toHaveClass('col-md-3')
-  expect(container.firstChild).toHaveClass('col-lg-4')
-  expect(container.firstChild).toHaveClass('col-xl-5')
-  expect(container.firstChild).toHaveClass('col-xxl-6')
-})
-
-test('CCol customize breakpoints are boolean', async () => {
-  const { container } = render(
-    <CCol className="bazinga" xs={true} sm={true} md={true} lg={true} xl={true} xxl={true}>
-      Test
-    </CCol>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('col')
-  expect(container.firstChild).toHaveClass('col-sm')
-  expect(container.firstChild).toHaveClass('col-md')
-  expect(container.firstChild).toHaveClass('col-lg')
-  expect(container.firstChild).toHaveClass('col-xl')
-  expect(container.firstChild).toHaveClass('col-xxl')
-})
diff --git a/packages/coreui-react/src/components/grid/__tests__/CContainer.spec.tsx b/packages/coreui-react/src/components/grid/__tests__/CContainer.spec.tsx
deleted file mode 100644
index 0ed38797..00000000
--- a/packages/coreui-react/src/components/grid/__tests__/CContainer.spec.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CContainer } from '../index'
-
-test('loads and displays CContainer component', async () => {
-  const { container } = render(<CContainer>Test</CContainer>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CContainer customize fluid', async () => {
-  const { container } = render(
-    <CContainer className="bazinga" fluid>
-      Test
-    </CContainer>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('container-fluid')
-})
-
-test('CContainer customize', async () => {
-  const { container } = render(
-    <CContainer md className="bazinga">
-      Test
-    </CContainer>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('container-md')
-})
diff --git a/packages/coreui-react/src/components/grid/__tests__/CRow.spec.tsx b/packages/coreui-react/src/components/grid/__tests__/CRow.spec.tsx
deleted file mode 100644
index c4e8e798..00000000
--- a/packages/coreui-react/src/components/grid/__tests__/CRow.spec.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CRow } from '../index'
-
-test('CRow not-customize', async () => {
-  const { container } = render(<CRow>Test</CRow>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CRow customize cols', async () => {
-  const { container } = render(
-    <CRow
-      className="bazinga"
-      xs={{ cols: 1 }}
-      sm={{ cols: 2 }}
-      md={{ cols: 3 }}
-      lg={{ cols: 4 }}
-      xl={{ cols: 5 }}
-      xxl={{ cols: 6 }}
-    >
-      Test
-    </CRow>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('row-cols-1')
-  expect(container.firstChild).toHaveClass('row-cols-sm-2')
-  expect(container.firstChild).toHaveClass('row-cols-md-3')
-  expect(container.firstChild).toHaveClass('row-cols-lg-4')
-  expect(container.firstChild).toHaveClass('row-cols-xl-5')
-  expect(container.firstChild).toHaveClass('row-cols-xxl-6')
-})
-
-test('CRow customize gutter single gutter', async () => {
-  const { container } = render(
-    <CRow className="bazinga" xs={{ gutter: 7 }}>
-      Test
-    </CRow>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('g-7')
-})
-
-test('CRow customize gutter', async () => {
-  const { container } = render(
-    <CRow
-      className="bazinga"
-      xs={{ gutter: 1 }}
-      sm={{ gutter: 2 }}
-      md={{ gutter: 3 }}
-      lg={{ gutter: 4 }}
-      xl={{ gutter: 5 }}
-      xxl={{ gutter: 6 }}
-    >
-      Test
-    </CRow>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('g-1')
-  expect(container.firstChild).toHaveClass('g-sm-2')
-  expect(container.firstChild).toHaveClass('g-md-3')
-  expect(container.firstChild).toHaveClass('g-lg-4')
-  expect(container.firstChild).toHaveClass('g-xl-5')
-  expect(container.firstChild).toHaveClass('g-xxl-6')
-})
-
-test('CRow customize gutterX', async () => {
-  const { container } = render(
-    <CRow
-      className="bazinga"
-      xs={{ gutterX: 1 }}
-      sm={{ gutterX: 2 }}
-      md={{ gutterX: 3 }}
-      lg={{ gutterX: 4 }}
-      xl={{ gutterX: 5 }}
-      xxl={{ gutterX: 6 }}
-    >
-      Test
-    </CRow>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('gx-1')
-  expect(container.firstChild).toHaveClass('gx-sm-2')
-  expect(container.firstChild).toHaveClass('gx-md-3')
-  expect(container.firstChild).toHaveClass('gx-lg-4')
-  expect(container.firstChild).toHaveClass('gx-xl-5')
-  expect(container.firstChild).toHaveClass('gx-xxl-6')
-})
-
-test('CRow customize gutterY', async () => {
-  const { container } = render(
-    <CRow
-      className="bazinga"
-      xs={{ gutterY: 1 }}
-      sm={{ gutterY: 2 }}
-      md={{ gutterY: 3 }}
-      lg={{ gutterY: 4 }}
-      xl={{ gutterY: 5 }}
-      xxl={{ gutterY: 6 }}
-    >
-      Test
-    </CRow>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('gy-1')
-  expect(container.firstChild).toHaveClass('gy-sm-2')
-  expect(container.firstChild).toHaveClass('gy-md-3')
-  expect(container.firstChild).toHaveClass('gy-lg-4')
-  expect(container.firstChild).toHaveClass('gy-xl-5')
-  expect(container.firstChild).toHaveClass('gy-xxl-6')
-})
diff --git a/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CCol.spec.tsx.snap b/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CCol.spec.tsx.snap
deleted file mode 100644
index 6ecf10d3..00000000
--- a/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CCol.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCol customize breakpoints are boolean 1`] = `
-<div>
-  <div
-    class="col-xxl col-xl col-lg col-md col-sm col bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CCol customize breakpoints are numbers 1`] = `
-<div>
-  <div
-    class="col-xxl-6 col-xl-5 col-lg-4 col-md-3 col-sm-2 col-1 bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CCol no-breakpoints 1`] = `
-<div>
-  <div
-    class="col"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CContainer.spec.tsx.snap b/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CContainer.spec.tsx.snap
deleted file mode 100644
index f0de3fa5..00000000
--- a/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CContainer.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CContainer customize 1`] = `
-<div>
-  <div
-    class="container-md bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CContainer customize fluid 1`] = `
-<div>
-  <div
-    class="container-fluid bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CContainer component 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CRow.spec.tsx.snap b/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CRow.spec.tsx.snap
deleted file mode 100644
index 5df4af5e..00000000
--- a/packages/coreui-react/src/components/grid/__tests__/__snapshots__/CRow.spec.tsx.snap
+++ /dev/null
@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CRow customize cols 1`] = `
-<div>
-  <div
-    class="row row-cols-xxl-6 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CRow customize gutter 1`] = `
-<div>
-  <div
-    class="row g-xxl-6 g-xl-5 g-lg-4 g-md-3 g-sm-2 g-1 bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CRow customize gutter single gutter 1`] = `
-<div>
-  <div
-    class="row g-7 bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CRow customize gutterX 1`] = `
-<div>
-  <div
-    class="row gx-xxl-6 gx-xl-5 gx-lg-4 gx-md-3 gx-sm-2 gx-1 bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CRow customize gutterY 1`] = `
-<div>
-  <div
-    class="row gy-xxl-6 gy-xl-5 gy-lg-4 gy-md-3 gy-sm-2 gy-1 bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CRow not-customize 1`] = `
-<div>
-  <div
-    class="row"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/grid/index.ts b/packages/coreui-react/src/components/grid/index.ts
deleted file mode 100644
index c0ed3d8b..00000000
--- a/packages/coreui-react/src/components/grid/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CCol } from './CCol'
-import { CContainer } from './CContainer'
-import { CRow } from './CRow'
-
-export { CCol, CContainer, CRow }
diff --git a/packages/coreui-react/src/components/header/CHeader.tsx b/packages/coreui-react/src/components/header/CHeader.tsx
deleted file mode 100644
index eecd0393..00000000
--- a/packages/coreui-react/src/components/header/CHeader.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Defines optional container wrapping children elements.
-   */
-  container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'
-  /**
-   * Place header in non-static positions.
-   */
-  position?: 'fixed' | 'sticky'
-}
-
-export const CHeader = forwardRef<HTMLDivElement, CHeaderProps>(
-  ({ children, className, container, position, ...rest }, ref) => {
-    return (
-      <div
-        className={classNames('header', { [`header-${position}`]: position }, className)}
-        {...rest}
-        ref={ref}
-      >
-        {container ? (
-          <div className={typeof container === 'string' ? `container-${container}` : 'container'}>
-            {children}
-          </div>
-        ) : (
-          <>{children}</>
-        )}
-      </div>
-    )
-  },
-)
-
-CHeader.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  container: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'>([
-      'sm',
-      'md',
-      'lg',
-      'xl',
-      'xxl',
-      'fluid',
-    ]),
-  ]),
-  position: PropTypes.oneOf(['fixed', 'sticky']),
-}
-
-CHeader.displayName = 'CHeader'
diff --git a/packages/coreui-react/src/components/header/CHeaderBrand.tsx b/packages/coreui-react/src/components/header/CHeaderBrand.tsx
deleted file mode 100644
index cac55004..00000000
--- a/packages/coreui-react/src/components/header/CHeaderBrand.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { ElementType, forwardRef, AnchorHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CHeaderBrandProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CHeaderBrand: PolymorphicRefForwardingComponent<'a', CHeaderBrandProps> = forwardRef<
-  HTMLAnchorElement | HTMLSpanElement,
-  CHeaderBrandProps
->(({ children, as: Component = 'a', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('header-brand', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CHeaderBrand.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CHeaderBrand.displayName = 'CHeaderBrand'
diff --git a/packages/coreui-react/src/components/header/CHeaderDivider.tsx b/packages/coreui-react/src/components/header/CHeaderDivider.tsx
deleted file mode 100644
index bfea9d97..00000000
--- a/packages/coreui-react/src/components/header/CHeaderDivider.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CHeaderDividerProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CHeaderDivider = forwardRef<HTMLDivElement, CHeaderDividerProps>(
-  ({ className, ...rest }, ref) => {
-    return <div className={classNames('header-divider', className)} {...rest} ref={ref} />
-  },
-)
-
-CHeaderDivider.propTypes = {
-  className: PropTypes.string,
-}
-
-CHeaderDivider.displayName = 'CHeaderDivider'
diff --git a/packages/coreui-react/src/components/header/CHeaderNav.tsx b/packages/coreui-react/src/components/header/CHeaderNav.tsx
deleted file mode 100644
index 9b62c17e..00000000
--- a/packages/coreui-react/src/components/header/CHeaderNav.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CHeaderNavProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CHeaderNav: PolymorphicRefForwardingComponent<'ul', CHeaderNavProps> = forwardRef<
-  HTMLDivElement | HTMLUListElement,
-  CHeaderNavProps
->(({ children, as: Component = 'ul', className, ...rest }, ref) => {
-  return (
-    <Component
-      className={classNames('header-nav', className)}
-      role="navigation"
-      {...rest}
-      ref={ref}
-    >
-      {children}
-    </Component>
-  )
-})
-
-CHeaderNav.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CHeaderNav.displayName = 'CHeaderNav'
diff --git a/packages/coreui-react/src/components/header/CHeaderText.tsx b/packages/coreui-react/src/components/header/CHeaderText.tsx
deleted file mode 100644
index 7db38b16..00000000
--- a/packages/coreui-react/src/components/header/CHeaderText.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CHeaderTextProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CHeaderText = forwardRef<HTMLSpanElement, CHeaderTextProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <span className={classNames('header-text', className)} {...rest} ref={ref}>
-        {children}
-      </span>
-    )
-  },
-)
-
-CHeaderText.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CHeaderText.displayName = 'CHeaderText'
diff --git a/packages/coreui-react/src/components/header/CHeaderToggler.tsx b/packages/coreui-react/src/components/header/CHeaderToggler.tsx
deleted file mode 100644
index d4eec4e9..00000000
--- a/packages/coreui-react/src/components/header/CHeaderToggler.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CHeaderTogglerProps extends HTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CHeaderToggler = forwardRef<HTMLButtonElement, CHeaderTogglerProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <button type="button" className={classNames('header-toggler', className)} {...rest} ref={ref}>
-        {children ?? <span className="header-toggler-icon"></span>}
-      </button>
-    )
-  },
-)
-
-CHeaderToggler.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CHeaderToggler.displayName = 'CHeaderToggler'
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeader.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeader.spec.tsx
deleted file mode 100644
index f123f6f2..00000000
--- a/packages/coreui-react/src/components/header/__tests__/CHeader.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CHeader } from '../index'
-
-test('loads and displays CHeader component', async () => {
-  const { container } = render(<CHeader>Test</CHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CHeader customize', async () => {
-  const { container } = render(
-    <CHeader className="bazinga" container="lg" position="sticky">
-      Test
-    </CHeader>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('header')
-  expect(container.firstChild).toHaveClass('header-sticky')
-})
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderBrand.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderBrand.spec.tsx
deleted file mode 100644
index eeb6d99d..00000000
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderBrand.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CHeaderBrand } from '../index'
-
-test('loads and displays CHeaderBrand component', async () => {
-  const { container } = render(<CHeaderBrand>Test</CHeaderBrand>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CHeaderBrand customize', async () => {
-  const { container } = render(
-    <CHeaderBrand className="bazinga" as="h3">
-      Test
-    </CHeaderBrand>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('header-brand')
-})
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderDivider.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderDivider.spec.tsx
deleted file mode 100644
index 0491da0a..00000000
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderDivider.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CHeaderDivider } from '../index'
-
-test('loads and displays CHeaderDivider component', async () => {
-  const { container } = render(<CHeaderDivider>Test</CHeaderDivider>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CHeaderDivider customize', async () => {
-  const { container } = render(<CHeaderDivider className="bazinga">Test</CHeaderDivider>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('header-divider')
-})
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderNav.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderNav.spec.tsx
deleted file mode 100644
index 67ca01e7..00000000
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderNav.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CHeaderNav } from '../index'
-
-test('loads and displays CHeaderNav component', async () => {
-  const { container } = render(<CHeaderNav>Test</CHeaderNav>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CHeaderNav customize', async () => {
-  const { container } = render(
-    <CHeaderNav className="bazinga" as="h3">
-      Test
-    </CHeaderNav>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('header-nav')
-})
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderText.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderText.spec.tsx
deleted file mode 100644
index 14d6cd24..00000000
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderText.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CHeaderText } from '../index'
-
-test('loads and displays CHeaderText component', async () => {
-  const { container } = render(<CHeaderText>Test</CHeaderText>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CHeaderText customize', async () => {
-  const { container } = render(<CHeaderText className="bazinga">Test</CHeaderText>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('header-text')
-})
diff --git a/packages/coreui-react/src/components/header/__tests__/CHeaderToggler.spec.tsx b/packages/coreui-react/src/components/header/__tests__/CHeaderToggler.spec.tsx
deleted file mode 100644
index a48bdd6c..00000000
--- a/packages/coreui-react/src/components/header/__tests__/CHeaderToggler.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CHeaderToggler } from '../index'
-
-test('loads and displays CHeaderToggler component', async () => {
-  const { container } = render(<CHeaderToggler>Test</CHeaderToggler>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CHeaderToggler customize', async () => {
-  const { container } = render(<CHeaderToggler className="bazinga">Test</CHeaderToggler>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('header-toggler')
-})
diff --git a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeader.spec.tsx.snap b/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeader.spec.tsx.snap
deleted file mode 100644
index 206dfdc0..00000000
--- a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeader.spec.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CHeader customize 1`] = `
-<div>
-  <div
-    class="header header-sticky bazinga"
-  >
-    <div
-      class="container-lg"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CHeader component 1`] = `
-<div>
-  <div
-    class="header"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderBrand.spec.tsx.snap b/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderBrand.spec.tsx.snap
deleted file mode 100644
index b1ee3bf8..00000000
--- a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderBrand.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CHeaderBrand customize 1`] = `
-<div>
-  <h3
-    class="header-brand bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CHeaderBrand component 1`] = `
-<div>
-  <a
-    class="header-brand"
-  >
-    Test
-  </a>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderDivider.spec.tsx.snap b/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderDivider.spec.tsx.snap
deleted file mode 100644
index 7a19a2ce..00000000
--- a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderDivider.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CHeaderDivider customize 1`] = `
-<div>
-  <div
-    class="header-divider bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CHeaderDivider component 1`] = `
-<div>
-  <div
-    class="header-divider"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderNav.spec.tsx.snap b/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderNav.spec.tsx.snap
deleted file mode 100644
index e6cfd03c..00000000
--- a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderNav.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CHeaderNav customize 1`] = `
-<div>
-  <h3
-    class="header-nav bazinga"
-    role="navigation"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CHeaderNav component 1`] = `
-<div>
-  <ul
-    class="header-nav"
-    role="navigation"
-  >
-    Test
-  </ul>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderText.spec.tsx.snap b/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderText.spec.tsx.snap
deleted file mode 100644
index c28c7920..00000000
--- a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderText.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CHeaderText customize 1`] = `
-<div>
-  <span
-    class="header-text bazinga"
-  >
-    Test
-  </span>
-</div>
-`;
-
-exports[`loads and displays CHeaderText component 1`] = `
-<div>
-  <span
-    class="header-text"
-  >
-    Test
-  </span>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderToggler.spec.tsx.snap b/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderToggler.spec.tsx.snap
deleted file mode 100644
index 09acb6a2..00000000
--- a/packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderToggler.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CHeaderToggler customize 1`] = `
-<div>
-  <button
-    class="header-toggler bazinga"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CHeaderToggler component 1`] = `
-<div>
-  <button
-    class="header-toggler"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/header/index.ts b/packages/coreui-react/src/components/header/index.ts
deleted file mode 100644
index 26053518..00000000
--- a/packages/coreui-react/src/components/header/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { CHeader } from './CHeader'
-import { CHeaderBrand } from './CHeaderBrand'
-import { CHeaderDivider } from './CHeaderDivider'
-import { CHeaderNav } from './CHeaderNav'
-import { CHeaderText } from './CHeaderText'
-import { CHeaderToggler } from './CHeaderToggler'
-
-export { CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler }
diff --git a/packages/coreui-react/src/components/image/CImage.tsx b/packages/coreui-react/src/components/image/CImage.tsx
deleted file mode 100644
index ecce5bdf..00000000
--- a/packages/coreui-react/src/components/image/CImage.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { forwardRef, ImgHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CImageProps extends ImgHTMLAttributes<HTMLOrSVGImageElement> {
-  /**
-   * Set the horizontal aligment.
-   */
-  align?: 'start' | 'center' | 'end'
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Make image responsive.
-   */
-  fluid?: boolean
-  /**
-   * Make image rounded.
-   */
-  rounded?: boolean
-  /**
-   * Give an image a rounded 1px border appearance.
-   */
-  thumbnail?: boolean
-}
-
-export const CImage = forwardRef<HTMLImageElement, CImageProps>(
-  ({ align, className, fluid, rounded, thumbnail, ...rest }, ref) => {
-    return (
-      <img
-        className={
-          classNames(
-            {
-              [`float-${align}`]: align && (align === 'start' || align === 'end'),
-              'd-block mx-auto': align && align === 'center',
-              'img-fluid': fluid,
-              rounded: rounded,
-              'img-thumbnail': thumbnail,
-            },
-            className,
-          ) || undefined
-        }
-        {...rest}
-        ref={ref}
-      />
-    )
-  },
-)
-
-CImage.propTypes = {
-  align: PropTypes.oneOf(['start', 'center', 'end']),
-  className: PropTypes.string,
-  fluid: PropTypes.bool,
-  rounded: PropTypes.bool,
-  thumbnail: PropTypes.bool,
-}
-
-CImage.displayName = 'CImage'
diff --git a/packages/coreui-react/src/components/image/__tests__/CImage.spec.tsx b/packages/coreui-react/src/components/image/__tests__/CImage.spec.tsx
deleted file mode 100644
index 5844befb..00000000
--- a/packages/coreui-react/src/components/image/__tests__/CImage.spec.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CImage } from '../index'
-
-test('loads and displays CImage component', async () => {
-  const { container } = render(<CImage />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CImage customize one', async () => {
-  const { container } = render(<CImage align="end" />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('float-end')
-})
-
-test('CImage customize two', async () => {
-  const { container } = render(
-    <CImage className="bazinga" align="center" fluid={true} rounded={true} thumbnail={true} />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('d-block')
-  expect(container.firstChild).toHaveClass('mx-auto')
-  expect(container.firstChild).toHaveClass('img-fluid')
-  expect(container.firstChild).toHaveClass('rounded')
-  expect(container.firstChild).toHaveClass('img-thumbnail')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
diff --git a/packages/coreui-react/src/components/image/__tests__/__snapshots__/CImage.spec.tsx.snap b/packages/coreui-react/src/components/image/__tests__/__snapshots__/CImage.spec.tsx.snap
deleted file mode 100644
index 0f302c77..00000000
--- a/packages/coreui-react/src/components/image/__tests__/__snapshots__/CImage.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CImage customize one 1`] = `
-<div>
-  <img
-    class="float-end"
-  />
-</div>
-`;
-
-exports[`CImage customize two 1`] = `
-<div>
-  <img
-    class="d-block mx-auto img-fluid rounded img-thumbnail bazinga"
-  />
-</div>
-`;
-
-exports[`loads and displays CImage component 1`] = `
-<div>
-  <img />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/image/index.ts b/packages/coreui-react/src/components/image/index.ts
deleted file mode 100644
index a2bc30ae..00000000
--- a/packages/coreui-react/src/components/image/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CImage } from './CImage'
-
-export { CImage }
diff --git a/packages/coreui-react/src/components/index.ts b/packages/coreui-react/src/components/index.ts
deleted file mode 100644
index 0f233ef7..00000000
--- a/packages/coreui-react/src/components/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-export * from './accordion'
-export * from './alert'
-export * from './avatar'
-export * from './backdrop'
-export * from './badge'
-export * from './breadcrumb'
-export * from './button'
-export * from './button-group'
-export * from './callout'
-export * from './card'
-export * from './carousel'
-export * from './close-button'
-export * from './collapse'
-export * from './conditional-portal'
-export * from './dropdown'
-export * from './footer'
-export * from './form'
-export * from './grid'
-export * from './header'
-export * from './image'
-export * from './link'
-export * from './list-group'
-export * from './modal'
-export * from './nav'
-export * from './navbar'
-export * from './offcanvas'
-export * from './pagination'
-export * from './placeholder'
-export * from './progress'
-export * from './popover'
-export * from './sidebar'
-export * from './spinner'
-export * from './table'
-export * from './tabs'
-export * from './toast'
-export * from './tooltip'
-export * from './widgets'
diff --git a/packages/coreui-react/src/components/link/CLink.tsx b/packages/coreui-react/src/components/link/CLink.tsx
deleted file mode 100644
index 4f6778b9..00000000
--- a/packages/coreui-react/src/components/link/CLink.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { AllHTMLAttributes, ElementType, forwardRef, MouseEvent } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CLinkProps
-  extends Omit<AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, 'as'> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * The href attribute specifies the URL of the page the link goes to.
-   */
-  href?: string
-}
-
-export const CLink: PolymorphicRefForwardingComponent<'a', CLinkProps> = forwardRef<
-  HTMLButtonElement | HTMLAnchorElement,
-  CLinkProps
->(({ children, active, as: Component = 'a', className, disabled, ...rest }, ref) => {
-  return (
-    <Component
-      // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
-      className={classNames(className, { active, disabled })}
-      {...(active && { 'aria-current': 'page' })}
-      {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
-      {...((Component === 'a' || Component === 'button') && {
-        onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-          event.preventDefault
-          !disabled && rest.onClick && rest.onClick(event)
-        },
-      })}
-      disabled={disabled}
-      {...rest}
-      ref={ref}
-    >
-      {children}
-    </Component>
-  )
-})
-
-CLink.propTypes = {
-  active: PropTypes.bool,
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-}
-
-CLink.displayName = 'CLink'
diff --git a/packages/coreui-react/src/components/link/__tests__/CLink.spec.tsx b/packages/coreui-react/src/components/link/__tests__/CLink.spec.tsx
deleted file mode 100644
index 2c3a982d..00000000
--- a/packages/coreui-react/src/components/link/__tests__/CLink.spec.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CLink } from '../index'
-
-test('loads and displays CLink component', async () => {
-  const { container } = render(<CLink>Test</CLink>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CLink customize', async () => {
-  const { container } = render(
-    <CLink className="bazinga" active={true} as="button" disabled type="submit">
-      Test
-    </CLink>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('active')
-  expect(container.firstChild).toHaveAttribute('disabled')
-})
-
-test('CLink click on button', async () => {
-  const onClick = jest.fn()
-  render(
-    <CLink onClick={onClick} className="bazinga">
-      Test
-    </CLink>,
-  )
-  expect(onClick).toHaveBeenCalledTimes(0)
-  const link = document.querySelector('.bazinga')
-  if (link !== null) {
-    fireEvent.click(link)
-  }
-  expect(onClick).toHaveBeenCalledTimes(1)
-})
-
-test('CLink click on disabled button', async () => {
-  const click = jest.fn()
-  render(
-    <CLink onClick={click} className="bazinga" as="button" disabled>
-      Test
-    </CLink>,
-  )
-  expect(click).toHaveBeenCalledTimes(0)
-  const link = document.querySelector('.bazinga')
-  if (link !== null) {
-    fireEvent.click(link)
-  }
-  expect(click).toHaveBeenCalledTimes(0)
-})
diff --git a/packages/coreui-react/src/components/link/__tests__/__snapshots__/CLink.spec.tsx.snap b/packages/coreui-react/src/components/link/__tests__/__snapshots__/CLink.spec.tsx.snap
deleted file mode 100644
index 0ce3412c..00000000
--- a/packages/coreui-react/src/components/link/__tests__/__snapshots__/CLink.spec.tsx.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CLink customize 1`] = `
-<div>
-  <button
-    aria-current="page"
-    class="bazinga active disabled"
-    disabled=""
-    type="submit"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CLink component 1`] = `
-<div>
-  <a
-    class=""
-  >
-    Test
-  </a>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/link/index.ts b/packages/coreui-react/src/components/link/index.ts
deleted file mode 100644
index 3b5241b6..00000000
--- a/packages/coreui-react/src/components/link/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CLink } from './CLink'
-
-export { CLink }
diff --git a/packages/coreui-react/src/components/list-group/CListGroup.tsx b/packages/coreui-react/src/components/list-group/CListGroup.tsx
deleted file mode 100644
index 1dce9007..00000000
--- a/packages/coreui-react/src/components/list-group/CListGroup.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CListGroupProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`).
-   */
-  flush?: boolean
-  /**
-   * Specify a layout type.
-   */
-  layout?:
-    | 'horizontal'
-    | 'horizontal-sm'
-    | 'horizontal-md'
-    | 'horizontal-lg'
-    | 'horizontal-xl'
-    | 'horizontal-xxl'
-}
-
-export const CListGroup: PolymorphicRefForwardingComponent<'ul', CListGroupProps> = forwardRef<
-  HTMLDivElement | HTMLUListElement,
-  CListGroupProps
->(({ children, as: Component = 'ul', className, flush, layout, ...rest }, ref) => {
-  return (
-    <Component
-      className={classNames(
-        'list-group',
-        {
-          'list-group-flush': flush,
-          [`list-group-${layout}`]: layout,
-        },
-        className,
-      )}
-      {...rest}
-      ref={ref}
-    >
-      {children}
-    </Component>
-  )
-})
-
-CListGroup.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  flush: PropTypes.bool,
-  layout: PropTypes.oneOf([
-    'horizontal',
-    'horizontal-sm',
-    'horizontal-md',
-    'horizontal-lg',
-    'horizontal-xl',
-    'horizontal-xxl',
-  ]),
-}
-
-CListGroup.displayName = 'CListGroup'
diff --git a/packages/coreui-react/src/components/list-group/CListGroupItem.tsx b/packages/coreui-react/src/components/list-group/CListGroupItem.tsx
deleted file mode 100644
index 21f5dff2..00000000
--- a/packages/coreui-react/src/components/list-group/CListGroupItem.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink } from '../link/CLink'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CListGroupItemProps
-  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-}
-
-export const CListGroupItem: PolymorphicRefForwardingComponent<'li', CListGroupItemProps> =
-  forwardRef<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement, CListGroupItemProps>(
-    ({ children, active, as = 'li', className, disabled, color, ...rest }, ref) => {
-      const Component = as === 'a' || as === 'button' ? CLink : as
-
-      rest = {
-        ...((as === 'a' || as === 'button') && {
-          active,
-          disabled,
-          as,
-          ref: ref,
-        }),
-        ...(active && { 'aria-current': true }),
-        ...(disabled && { 'aria-disabled': true }),
-        ...rest,
-      }
-
-      return (
-        <Component
-          className={classNames(
-            'list-group-item',
-            {
-              [`list-group-item-${color}`]: color,
-              'list-group-item-action': as === 'a' || as === 'button',
-              active,
-              disabled,
-            },
-            className,
-          )}
-          {...rest}
-        >
-          {children}
-        </Component>
-      )
-    },
-  )
-
-CListGroupItem.propTypes = {
-  active: PropTypes.bool,
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  disabled: PropTypes.bool,
-}
-
-CListGroupItem.displayName = 'CListGroupItem'
diff --git a/packages/coreui-react/src/components/list-group/__tests__/CListGroup.spec.tsx b/packages/coreui-react/src/components/list-group/__tests__/CListGroup.spec.tsx
deleted file mode 100644
index ecbcd435..00000000
--- a/packages/coreui-react/src/components/list-group/__tests__/CListGroup.spec.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CListGroup, CListGroupItem } from '../index'
-
-test('loads and displays CListGroup component', async () => {
-  const { container } = render(<CListGroup>Test</CListGroup>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CListGroup customize', async () => {
-  const { container } = render(
-    <CListGroup className="bazinga" as="h3" flush={true} layout="horizontal-xl">
-      Test
-    </CListGroup>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('list-group')
-  expect(container.firstChild).toHaveClass('list-group-flush')
-  expect(container.firstChild).toHaveClass('list-group-horizontal-xl')
-})
-
-test('CListGroup example', async () => {
-  const { container } = render(
-    <CListGroup>
-      <CListGroupItem>A</CListGroupItem>
-      <CListGroupItem>B</CListGroupItem>
-      <CListGroupItem>C</CListGroupItem>
-    </CListGroup>,
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/list-group/__tests__/CListGroupItem.spec.tsx b/packages/coreui-react/src/components/list-group/__tests__/CListGroupItem.spec.tsx
deleted file mode 100644
index 67460193..00000000
--- a/packages/coreui-react/src/components/list-group/__tests__/CListGroupItem.spec.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CListGroupItem } from '../index'
-
-test('loads and displays CListGroupItem component', async () => {
-  const { container } = render(<CListGroupItem>Test</CListGroupItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CListGroupItem customize', async () => {
-  const { container } = render(
-    <CListGroupItem className="bazinga" active={true} color="warning" disabled={true} as="button">
-      Test
-    </CListGroupItem>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('list-group-item')
-  expect(container.firstChild).toHaveClass('list-group-item-action')
-  expect(container.firstChild).toHaveClass('active')
-  expect(container.firstChild).toHaveClass('disabled')
-})
diff --git a/packages/coreui-react/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.tsx.snap b/packages/coreui-react/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.tsx.snap
deleted file mode 100644
index 806b3c69..00000000
--- a/packages/coreui-react/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.tsx.snap
+++ /dev/null
@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CListGroup customize 1`] = `
-<div>
-  <h3
-    class="list-group list-group-flush list-group-horizontal-xl bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`CListGroup example 1`] = `
-<div>
-  <ul
-    class="list-group"
-  >
-    <li
-      class="list-group-item"
-    >
-      A
-    </li>
-    <li
-      class="list-group-item"
-    >
-      B
-    </li>
-    <li
-      class="list-group-item"
-    >
-      C
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`loads and displays CListGroup component 1`] = `
-<div>
-  <ul
-    class="list-group"
-  >
-    Test
-  </ul>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.tsx.snap b/packages/coreui-react/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.tsx.snap
deleted file mode 100644
index 511bdada..00000000
--- a/packages/coreui-react/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.tsx.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CListGroupItem customize 1`] = `
-<div>
-  <button
-    aria-current="true"
-    aria-disabled="true"
-    class="list-group-item list-group-item-warning list-group-item-action active disabled bazinga active disabled"
-    disabled=""
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CListGroupItem component 1`] = `
-<div>
-  <li
-    class="list-group-item"
-  >
-    Test
-  </li>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/list-group/index.ts b/packages/coreui-react/src/components/list-group/index.ts
deleted file mode 100644
index 802b3330..00000000
--- a/packages/coreui-react/src/components/list-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { CListGroup } from './CListGroup'
-import { CListGroupItem } from './CListGroupItem'
-
-export { CListGroup, CListGroupItem }
diff --git a/packages/coreui-react/src/components/modal/CModal.tsx b/packages/coreui-react/src/components/modal/CModal.tsx
deleted file mode 100644
index 1dca6d0a..00000000
--- a/packages/coreui-react/src/components/modal/CModal.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
-
-import { CBackdrop } from '../backdrop'
-import { CConditionalPortal } from '../conditional-portal'
-import { CModalContent } from './CModalContent'
-import { CModalContext } from './CModalContext'
-import { CModalDialog } from './CModalDialog'
-
-import { useForkedRef } from '../../hooks'
-
-export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Align the modal in the center or top of the screen.
-   */
-  alignment?: 'top' | 'center'
-  /**
-   * Apply a backdrop on body while modal is open.
-   */
-  backdrop?: boolean | 'static'
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
-   *
-   * @since 5.3.0
-   */
-  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
-  /**
-   * @ignore
-   */
-  duration?: number
-  /**
-   * Puts the focus on the modal when shown.
-   *
-   * @since 4.10.0
-   */
-  focus?: boolean
-  /**
-   * Set modal to covers the entire user viewport.
-   */
-  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-  /**
-   * Closes the modal when escape key is pressed.
-   */
-  keyboard?: boolean
-  /**
-   * Callback fired when the component requests to be closed.
-   */
-  onClose?: () => void
-  /**
-   * Callback fired when the component requests to be closed.
-   */
-  onClosePrevented?: () => void
-  /**
-   * 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.
-   */
-  onShow?: () => void
-  /**
-   * Generates modal using createPortal.
-   */
-  portal?: boolean
-  /**
-   * Create a scrollable modal that allows scrolling the modal body.
-   */
-  scrollable?: boolean
-  /**
-   * Size the component small, large, or extra large.
-   */
-  size?: 'sm' | 'lg' | 'xl'
-  /**
-   * Remove animation to create modal that simply appear rather than fade in to view.
-   */
-  transition?: boolean
-  /**
-   * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
-   */
-  unmountOnClose?: boolean
-  /**
-   * Toggle the visibility of modal component.
-   */
-  visible?: boolean
-}
-
-export const CModal = forwardRef<HTMLDivElement, CModalProps>(
-  (
-    {
-      children,
-      alignment,
-      backdrop = true,
-      className,
-      container,
-      duration = 150,
-      focus = true,
-      fullscreen,
-      keyboard = true,
-      onClose,
-      onClosePrevented,
-      onShow,
-      portal = true,
-      scrollable,
-      size,
-      transition = true,
-      unmountOnClose = true,
-      visible,
-      ...rest
-    },
-    ref
-  ) => {
-    const activeElementRef = useRef<HTMLElement | null>(null)
-    const modalRef = useRef<HTMLDivElement>(null)
-    const modalContentRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, modalRef)
-
-    const [_visible, setVisible] = useState(visible)
-    const [staticBackdrop, setStaticBackdrop] = useState(false)
-
-    const contextValues = {
-      visible: _visible,
-      setVisible,
-    }
-
-    useEffect(() => {
-      setVisible(visible)
-    }, [visible])
-
-    useEffect(() => {
-      if (_visible) {
-        activeElementRef.current = document.activeElement as HTMLElement | null
-        document.addEventListener('mouseup', handleClickOutside)
-        document.addEventListener('keydown', handleKeyDown)
-      } else {
-        activeElementRef.current?.focus()
-      }
-
-      return () => {
-        document.removeEventListener('mouseup', handleClickOutside)
-        document.removeEventListener('keydown', handleKeyDown)
-      }
-    }, [_visible])
-
-    const handleDismiss = () => {
-      if (backdrop === 'static') {
-        return setStaticBackdrop(true)
-      }
-
-      setVisible(false)
-    }
-
-    useLayoutEffect(() => {
-      onClosePrevented && onClosePrevented()
-      setTimeout(() => setStaticBackdrop(false), duration)
-    }, [staticBackdrop])
-
-    // Set focus to modal after open
-    useLayoutEffect(() => {
-      if (_visible) {
-        document.body.classList.add('modal-open')
-
-        if (backdrop) {
-          document.body.style.overflow = 'hidden'
-          document.body.style.paddingRight = '0px'
-        }
-
-        setTimeout(
-          () => {
-            focus && modalRef.current?.focus()
-          },
-          transition ? duration : 0
-        )
-      } else {
-        document.body.classList.remove('modal-open')
-
-        if (backdrop) {
-          document.body.style.removeProperty('overflow')
-          document.body.style.removeProperty('padding-right')
-        }
-      }
-
-      return () => {
-        document.body.classList.remove('modal-open')
-        if (backdrop) {
-          document.body.style.removeProperty('overflow')
-          document.body.style.removeProperty('padding-right')
-        }
-      }
-    }, [_visible])
-
-    const handleClickOutside = (event: Event) => {
-      if (modalRef.current && modalRef.current == event.target) {
-        handleDismiss()
-      }
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && keyboard) {
-        handleDismiss()
-      }
-    }
-
-    return (
-      <>
-        <Transition
-          in={_visible}
-          mountOnEnter
-          nodeRef={modalRef}
-          onEnter={onShow}
-          onExit={onClose}
-          unmountOnExit={unmountOnClose}
-          timeout={transition ? duration : 0}
-        >
-          {(state) => (
-            <CConditionalPortal container={container} portal={portal}>
-              <CModalContext.Provider value={contextValues}>
-                <div
-                  className={classNames(
-                    'modal',
-                    {
-                      'modal-static': staticBackdrop,
-                      fade: transition,
-                      show: state === 'entered',
-                    },
-                    className
-                  )}
-                  tabIndex={-1}
-                  {...(_visible
-                    ? { 'aria-modal': true, role: 'dialog' }
-                    : { 'aria-hidden': 'true' })}
-                  style={{
-                    ...(state !== 'exited' && { display: 'block' }),
-                  }}
-                  {...rest}
-                  ref={forkedRef}
-                >
-                  <CModalDialog
-                    alignment={alignment}
-                    fullscreen={fullscreen}
-                    scrollable={scrollable}
-                    size={size}
-                  >
-                    <CModalContent ref={modalContentRef}>{children}</CModalContent>
-                  </CModalDialog>
-                </div>
-              </CModalContext.Provider>
-            </CConditionalPortal>
-          )}
-        </Transition>
-        {backdrop && (
-          <CConditionalPortal container={container} portal={portal}>
-            <CBackdrop visible={_visible} />
-          </CConditionalPortal>
-        )}
-      </>
-    )
-  }
-)
-
-CModal.propTypes = {
-  alignment: PropTypes.oneOf(['top', 'center']),
-  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  container: PropTypes.any, // HTMLElement
-  duration: PropTypes.number,
-  focus: PropTypes.bool,
-  fullscreen: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
-  ]),
-  keyboard: PropTypes.bool,
-  onClose: PropTypes.func,
-  onClosePrevented: PropTypes.func,
-  onShow: PropTypes.func,
-  portal: PropTypes.bool,
-  scrollable: PropTypes.bool,
-  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
-  transition: PropTypes.bool,
-  unmountOnClose: PropTypes.bool,
-  visible: PropTypes.bool,
-}
-
-CModal.displayName = 'CModal'
diff --git a/packages/coreui-react/src/components/modal/CModalBody.tsx b/packages/coreui-react/src/components/modal/CModalBody.tsx
deleted file mode 100644
index 55de449f..00000000
--- a/packages/coreui-react/src/components/modal/CModalBody.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CModalBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CModalBody = forwardRef<HTMLDivElement, CModalBodyProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('modal-body', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CModalBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CModalBody.displayName = 'CModalBody'
diff --git a/packages/coreui-react/src/components/modal/CModalContent.tsx b/packages/coreui-react/src/components/modal/CModalContent.tsx
deleted file mode 100644
index 3c9e3db9..00000000
--- a/packages/coreui-react/src/components/modal/CModalContent.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CModalContentProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CModalContent = forwardRef<HTMLDivElement, CModalContentProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('modal-content', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CModalContent.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CModalContent.displayName = 'CModalContent'
diff --git a/packages/coreui-react/src/components/modal/CModalContext.ts b/packages/coreui-react/src/components/modal/CModalContext.ts
deleted file mode 100644
index 0a85cbc0..00000000
--- a/packages/coreui-react/src/components/modal/CModalContext.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createContext } from 'react'
-
-export interface CModalContextProps {
-  visible?: boolean
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const CModalContext = createContext({} as CModalContextProps)
diff --git a/packages/coreui-react/src/components/modal/CModalDialog.tsx b/packages/coreui-react/src/components/modal/CModalDialog.tsx
deleted file mode 100644
index d1c013c9..00000000
--- a/packages/coreui-react/src/components/modal/CModalDialog.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CModalDialogProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Align the modal in the center or top of the screen.
-   */
-  alignment?: 'top' | 'center'
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Set modal to covers the entire user viewport.
-   */
-  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-  /**
-   * Does the modal dialog itself scroll, or does the whole dialog scroll within the window.
-   */
-  scrollable?: boolean
-  /**
-   * Size the component small, large, or extra large.
-   */
-  size?: 'sm' | 'lg' | 'xl'
-}
-
-export const CModalDialog = forwardRef<HTMLDivElement, CModalDialogProps>(
-  ({ children, alignment, className, fullscreen, scrollable, size, ...rest }, ref) => {
-    return (
-      <div
-        className={classNames(
-          'modal-dialog',
-          {
-            'modal-dialog-centered': alignment === 'center',
-            [typeof fullscreen === 'boolean'
-              ? 'modal-fullscreen'
-              : `modal-fullscreen-${fullscreen}-down`]: fullscreen,
-            'modal-dialog-scrollable': scrollable,
-            [`modal-${size}`]: size,
-          },
-          className,
-        )}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-
-CModalDialog.propTypes = {
-  alignment: PropTypes.oneOf(['top', 'center']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  fullscreen: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
-  ]),
-  scrollable: PropTypes.bool,
-  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
-}
-
-CModalDialog.displayName = 'CModalDialog'
diff --git a/packages/coreui-react/src/components/modal/CModalFooter.tsx b/packages/coreui-react/src/components/modal/CModalFooter.tsx
deleted file mode 100644
index 8f925a07..00000000
--- a/packages/coreui-react/src/components/modal/CModalFooter.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CModalFooterProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CModalFooter = forwardRef<HTMLDivElement, CModalFooterProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('modal-footer', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CModalFooter.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CModalFooter.displayName = 'CModalFooter'
diff --git a/packages/coreui-react/src/components/modal/CModalHeader.tsx b/packages/coreui-react/src/components/modal/CModalHeader.tsx
deleted file mode 100644
index d4aca150..00000000
--- a/packages/coreui-react/src/components/modal/CModalHeader.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CCloseButton } from '../close-button/CCloseButton'
-import { CModalContext } from './CModalContext'
-
-export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Add a close button component to the header.
-   */
-  closeButton?: boolean
-}
-
-export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
-  ({ children, className, closeButton = true, ...rest }, ref) => {
-    const { setVisible } = useContext(CModalContext)
-
-    return (
-      <div className={classNames('modal-header', className)} {...rest} ref={ref}>
-        {children}
-        {closeButton && <CCloseButton onClick={() => setVisible(false)} />}
-      </div>
-    )
-  },
-)
-
-CModalHeader.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  closeButton: PropTypes.bool,
-}
-
-CModalHeader.displayName = 'CModalHeader'
diff --git a/packages/coreui-react/src/components/modal/CModalTitle.tsx b/packages/coreui-react/src/components/modal/CModalTitle.tsx
deleted file mode 100644
index ec99d09d..00000000
--- a/packages/coreui-react/src/components/modal/CModalTitle.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-}
-
-export const CModalTitle: PolymorphicRefForwardingComponent<'h5', CModalTitleProps> = forwardRef<
-  HTMLHeadElement,
-  CModalTitleProps
->(({ children, as: Component = 'h5', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('modal-title', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CModalTitle.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CModalTitle.displayName = 'CModalTitle'
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
deleted file mode 100644
index 2e0c0b8c..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react'
-import { render, fireEvent, screen, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CModal } from '../index'
-
-test('loads and displays CModal component', async () => {
-  const { container } = render(<CModal portal={false}>Test</CModal>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CModal customize', async () => {
-  const { container } = render(
-    <CModal
-      alignment="center"
-      className="bazinga"
-      duration={100}
-      fullscreen="xl"
-      scrollable={true}
-      size="xl"
-      visible={true}
-    >
-      Test
-    </CModal>,
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CModal dialog close on press ESC', async () => {
-  const onClose = jest.fn()
-  render(
-    <CModal onClose={onClose} portal={false} visible>
-      Test
-    </CModal>,
-  )
-  expect(onClose).toHaveBeenCalledTimes(0)
-
-  const modal = screen.getByText('Test').closest('.modal')
-  expect(modal).toBeInTheDocument()
-
-  if (modal !== null) {
-    fireEvent.keyDown(modal, {
-      key: 'Escape',
-    })
-
-    await waitFor(() => {
-      expect(onClose).toHaveBeenCalledTimes(1)
-    })
-  }
-})
-
-// test('CModal dialog closes when clicking outside the modal', async () => {
-//   const onClose = jest.fn()
-
-//   render(
-//     <CModal onClose={onClose} portal={false} visible>
-//       Test
-//     </CModal>,
-//   )
-
-//   // Ensure onClose hasn't been called yet
-//   expect(onClose).not.toHaveBeenCalled()
-
-//   // Optionally, verify that the modal is in the document
-//   const modal = screen.getByText('Test').closest('.modal')
-//   expect(modal).toBeInTheDocument()
-
-//   // Simulate a click on the external area (outside the modal)
-//   fireEvent.mouseDown(document.body)
-
-//   // Wait for onClose to be called once
-//   await waitFor(() => {
-//     expect(onClose).toHaveBeenCalledTimes(1)
-//   })
-// })
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalBody.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalBody.spec.tsx
deleted file mode 100644
index dbc9cf28..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/CModalBody.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CModalBody } from '../index'
-
-test('loads and displays CModalBody component', async () => {
-  const { container } = render(<CModalBody>Test</CModalBody>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CModalBody customize', async () => {
-  const { container } = render(<CModalBody className="bazinga">Test</CModalBody>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('modal-body')
-})
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalContent.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalContent.spec.tsx
deleted file mode 100644
index e17bb8ef..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/CModalContent.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CModalContent } from '../index'
-
-test('loads and displays CModalContent component', async () => {
-  const { container } = render(<CModalContent>Test</CModalContent>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CModalContent customize', async () => {
-  const { container } = render(<CModalContent className="bazinga">Test</CModalContent>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('modal-content')
-})
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalDialog.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalDialog.spec.tsx
deleted file mode 100644
index a3450d27..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/CModalDialog.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CModalDialog } from '../index'
-
-test('loads and displays CModalDialog component', async () => {
-  const { container } = render(<CModalDialog>Test</CModalDialog>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CModalDialog customize', async () => {
-  const { container } = render(
-    <CModalDialog
-      className="bazinga"
-      alignment="center"
-      fullscreen="lg"
-      scrollable={true}
-      size="xl"
-    >
-      Test
-    </CModalDialog>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('modal-dialog')
-  expect(container.firstChild).toHaveClass('modal-dialog-centered')
-  expect(container.firstChild).toHaveClass('modal-fullscreen-lg-down')
-  expect(container.firstChild).toHaveClass('modal-dialog-scrollable')
-  expect(container.firstChild).toHaveClass('modal-xl')
-})
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalFooter.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalFooter.spec.tsx
deleted file mode 100644
index cfba12ed..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/CModalFooter.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CModalFooter } from '../index'
-
-test('loads and displays CModalFooter component', async () => {
-  const { container } = render(<CModalFooter>Test</CModalFooter>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CModalFooter customize', async () => {
-  const { container } = render(<CModalFooter className="bazinga">Test</CModalFooter>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('modal-footer')
-})
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalHeader.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalHeader.spec.tsx
deleted file mode 100644
index 4e3177d7..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/CModalHeader.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CModalHeader } from '../index'
-
-test('loads and displays CModalHeader component', async () => {
-  const { container } = render(<CModalHeader>Test</CModalHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CModalHeader customize', async () => {
-  const { container } = render(<CModalHeader className="bazinga">Test</CModalHeader>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('modal-header')
-})
-
-test('CModalHeader has a close button', async () => {
-  const onDismiss = jest.fn()
-  render(<CModalHeader className="bazinga">Test</CModalHeader>)
-  expect(onDismiss).toHaveBeenCalledTimes(0)
-  const btn = document.querySelector('.btn-close')
-  expect(btn).toBeTruthy()
-})
diff --git a/packages/coreui-react/src/components/modal/__tests__/CModalTitle.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModalTitle.spec.tsx
deleted file mode 100644
index e5b0cae6..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/CModalTitle.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CModalTitle } from '../index'
-
-test('loads and displays CModalTitle component', async () => {
-  const { container } = render(<CModalTitle>Test</CModalTitle>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CModalTitle customize', async () => {
-  const { container } = render(
-    <CModalTitle className="bazinga" as="h3">
-      Test
-    </CModalTitle>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('modal-title')
-})
diff --git a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap b/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap
deleted file mode 100644
index 66995bec..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CModal customize 1`] = `<div />`;
-
-exports[`loads and displays CModal component 1`] = `<div />`;
diff --git a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalBody.spec.tsx.snap b/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalBody.spec.tsx.snap
deleted file mode 100644
index d1724ab2..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalBody.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CModalBody customize 1`] = `
-<div>
-  <div
-    class="modal-body bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CModalBody component 1`] = `
-<div>
-  <div
-    class="modal-body"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalContent.spec.tsx.snap b/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalContent.spec.tsx.snap
deleted file mode 100644
index a235c501..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalContent.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CModalContent customize 1`] = `
-<div>
-  <div
-    class="modal-content bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CModalContent component 1`] = `
-<div>
-  <div
-    class="modal-content"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalDialog.spec.tsx.snap b/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalDialog.spec.tsx.snap
deleted file mode 100644
index b73b263b..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalDialog.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CModalDialog customize 1`] = `
-<div>
-  <div
-    class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-xl bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CModalDialog component 1`] = `
-<div>
-  <div
-    class="modal-dialog"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.tsx.snap b/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.tsx.snap
deleted file mode 100644
index 2ea03aea..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CModalFooter customize 1`] = `
-<div>
-  <div
-    class="modal-footer bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CModalFooter component 1`] = `
-<div>
-  <div
-    class="modal-footer"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.tsx.snap b/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.tsx.snap
deleted file mode 100644
index 27af1fa6..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CModalHeader customize 1`] = `
-<div>
-  <div
-    class="modal-header bazinga"
-  >
-    Test
-    <button
-      aria-label="Close"
-      class="btn btn-close"
-      type="button"
-    />
-  </div>
-</div>
-`;
-
-exports[`loads and displays CModalHeader component 1`] = `
-<div>
-  <div
-    class="modal-header"
-  >
-    Test
-    <button
-      aria-label="Close"
-      class="btn btn-close"
-      type="button"
-    />
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.tsx.snap b/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.tsx.snap
deleted file mode 100644
index 7332ff34..00000000
--- a/packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CModalTitle customize 1`] = `
-<div>
-  <h3
-    class="modal-title bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CModalTitle component 1`] = `
-<div>
-  <h5
-    class="modal-title"
-  >
-    Test
-  </h5>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/modal/index.ts b/packages/coreui-react/src/components/modal/index.ts
deleted file mode 100644
index 182bc116..00000000
--- a/packages/coreui-react/src/components/modal/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { CModal } from './CModal'
-import { CModalBody } from './CModalBody'
-import { CModalContent } from './CModalContent'
-import { CModalDialog } from './CModalDialog'
-import { CModalFooter } from './CModalFooter'
-import { CModalHeader } from './CModalHeader'
-import { CModalTitle } from './CModalTitle'
-
-export { CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle }
diff --git a/packages/coreui-react/src/components/nav/CNav.tsx b/packages/coreui-react/src/components/nav/CNav.tsx
deleted file mode 100644
index f056fbf7..00000000
--- a/packages/coreui-react/src/components/nav/CNav.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CNavProps
-  extends HTMLAttributes<HTMLDivElement | HTMLUListElement | HTMLOListElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Specify a layout type for component.
-   */
-  layout?: 'fill' | 'justified'
-  /**
-   * Set the nav variant to tabs or pills.
-   */
-  variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border'
-}
-
-export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef<
-  HTMLDivElement | HTMLUListElement | HTMLOListElement,
-  CNavProps
->(({ children, as: Component = 'ul', className, layout, variant, ...rest }, ref) => {
-  return (
-    <Component
-      className={classNames(
-        'nav',
-        variant === 'enclosed-pills' && 'nav-enclosed', // Enclosed pills variant required for `.nav-enclosed` class
-        {
-          [`nav-${layout}`]: layout,
-          [`nav-${variant}`]: variant,
-        },
-        className
-      )}
-      role="navigation"
-      {...rest}
-      ref={ref}
-    >
-      {children}
-    </Component>
-  )
-})
-
-CNav.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf([
-    'enclosed',
-    'enclosed-pills',
-    'pills',
-    'tabs',
-    'underline',
-    'underline-border',
-  ]),
-}
-
-CNav.displayName = 'CNav'
diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx
deleted file mode 100644
index 4b680896..00000000
--- a/packages/coreui-react/src/components/nav/CNavGroup.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import React, {
-  CSSProperties,
-  ElementType,
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
-import type { TransitionStatus } from 'react-transition-group'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
-
-export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   *
-   * @since 5.0.0
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Make nav group more compact by cutting all `padding` in half.
-   */
-  compact?: boolean
-  /**
-   * Set group toggler label.
-   */
-  toggler?: string | ReactNode
-  /**
-   * Show nav group items.
-   */
-  visible?: boolean
-  /**
-   * @ignore
-   */
-  idx?: string
-}
-
-const isInVisibleGroup = (el1: string, el2: string) => {
-  const array1 = el1.toString().split('.')
-  const array2 = el2.toString().split('.')
-
-  return array2.every((item, index) => item === array1[index])
-}
-
-export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps> = forwardRef<
-  HTMLDivElement | HTMLLIElement,
-  CNavGroupProps
->(({ children, as: Component = 'li', className, compact, idx, toggler, visible, ...rest }, ref) => {
-  const [height, setHeight] = useState<number | string>(0)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const navItemsRef = useRef<any>(null)
-
-  const { visibleGroup, setVisibleGroup } = useContext(CSidebarNavContext)
-
-  const [_visible, setVisible] = useState(
-    Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),
-  )
-
-  useEffect(() => {
-    setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
-  }, [visibleGroup])
-
-  const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault()
-    setVisibleGroup(
-      _visible ? (idx?.toString().includes('.') ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx,
-    )
-    setVisible(!_visible)
-  }
-
-  const style: CSSProperties = {
-    height: 0,
-  }
-
-  const onEntering = () => {
-    navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)
-  }
-
-  const onEntered = () => {
-    setHeight('auto')
-  }
-
-  const onExit = () => {
-    navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)
-  }
-
-  const onExiting = () => {
-    // @ts-expect-error reflow is necessary to get correct height of the element
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const reflow = navItemsRef.current?.offsetHeight
-    setHeight(0)
-  }
-
-  const onExited = () => {
-    setHeight(0)
-  }
-
-  const transitionStyles = {
-    entering: { display: 'block', height: height },
-    entered: { display: 'block', height: height },
-    exiting: { display: 'block', height: height },
-    exited: { height: height },
-    unmounted: {},
-  }
-
-  const NavGroupItemsComponent = Component === 'li' ? 'ul' : 'div'
-
-  return (
-    <Component
-      className={classNames('nav-group', { show: _visible }, className)}
-      {...rest}
-      ref={ref}
-    >
-      {toggler && (
-        <a
-          className="nav-link nav-group-toggle"
-          href="#"
-          onClick={(event) => handleTogglerOnCLick(event)}
-        >
-          {toggler}
-        </a>
-      )}
-      <Transition
-        in={_visible}
-        nodeRef={navItemsRef}
-        onEntering={onEntering}
-        onEntered={onEntered}
-        onExit={onExit}
-        onExiting={onExiting}
-        onExited={onExited}
-        timeout={300}
-      >
-        {(state) => (
-          <NavGroupItemsComponent
-            className={classNames('nav-group-items', {
-              compact: compact,
-            })}
-            style={{
-              ...style,
-              ...transitionStyles[state as TransitionStatus],
-            }}
-            ref={navItemsRef}
-          >
-            {children}
-          </NavGroupItemsComponent>
-        )}
-      </Transition>
-    </Component>
-  )
-})
-
-CNavGroup.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  compact: PropTypes.bool,
-  idx: PropTypes.string,
-  toggler: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  visible: PropTypes.bool,
-}
-
-CNavGroup.displayName = 'CNavGroup'
diff --git a/packages/coreui-react/src/components/nav/CNavGroupItems.tsx b/packages/coreui-react/src/components/nav/CNavGroupItems.tsx
deleted file mode 100644
index 2465250a..00000000
--- a/packages/coreui-react/src/components/nav/CNavGroupItems.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CNavGroupItemsProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   *
-   * @since 5.0.0
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CNavGroupItems: PolymorphicRefForwardingComponent<'ul', CNavGroupItemsProps> =
-  forwardRef<HTMLDivElement | HTMLUListElement, CNavGroupItemsProps>(
-    ({ children, as: Component = 'ul', className, ...rest }, ref) => {
-      return (
-        <Component className={classNames('nav-group-items', className)} {...rest} ref={ref}>
-          {children}
-        </Component>
-      )
-    },
-  )
-
-CNavGroupItems.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CNavGroupItems.displayName = 'CNavGroupItems'
diff --git a/packages/coreui-react/src/components/nav/CNavItem.tsx b/packages/coreui-react/src/components/nav/CNavItem.tsx
deleted file mode 100644
index 14521d6f..00000000
--- a/packages/coreui-react/src/components/nav/CNavItem.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { ElementType, forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CNavLink, CNavLinkProps } from './CNavLink'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CNavItemProps extends Omit<CNavLinkProps, 'component'> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   *
-   * @since 5.0.0
-   */
-  as?: ElementType
-}
-
-export const CNavItem: PolymorphicRefForwardingComponent<'li', CNavItemProps> = forwardRef<
-  HTMLLIElement,
-  CNavItemProps
->(({ children, as: Component = 'li', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('nav-item', className)} ref={ref}>
-      {rest.href || rest.to ? (
-        <CNavLink className={className} {...rest}>
-          {children}
-        </CNavLink>
-      ) : (
-        children
-      )}
-    </Component>
-  )
-})
-
-CNavItem.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CNavItem.displayName = 'CNavItem'
diff --git a/packages/coreui-react/src/components/nav/CNavLink.tsx b/packages/coreui-react/src/components/nav/CNavLink.tsx
deleted file mode 100644
index 52f50b0f..00000000
--- a/packages/coreui-react/src/components/nav/CNavLink.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { forwardRef, useContext, useEffect, useRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLinkProps, CLink } from '../link/CLink'
-import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { useForkedRef } from '../../hooks'
-
-export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
-  /**
-   * @ignore
-   */
-  idx?: string
-  /**
-   * @ignore
-   */
-  to?: string
-}
-
-export const CNavLink: PolymorphicRefForwardingComponent<'a', CNavLinkProps> = forwardRef<
-  HTMLButtonElement | HTMLAnchorElement,
-  CNavLinkProps
->(({ children, className, idx, ...rest }, ref) => {
-  const navLinkRef = useRef<HTMLAnchorElement>(null)
-  const forkedRef = useForkedRef(ref, navLinkRef)
-
-  const { setVisibleGroup } = useContext(CSidebarNavContext)
-
-  useEffect(() => {
-    rest.active = navLinkRef.current?.classList.contains('active')
-    idx && rest.active && setVisibleGroup(idx)
-  }, [rest.active, className])
-
-  return (
-    <CLink className={classNames('nav-link', className)} {...rest} ref={forkedRef}>
-      {children}
-    </CLink>
-  )
-})
-
-CNavLink.propTypes = {
-  active: PropTypes.bool,
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  idx: PropTypes.string,
-}
-
-CNavLink.displayName = 'CNavLink'
diff --git a/packages/coreui-react/src/components/nav/CNavTitle.tsx b/packages/coreui-react/src/components/nav/CNavTitle.tsx
deleted file mode 100644
index 5aa3e689..00000000
--- a/packages/coreui-react/src/components/nav/CNavTitle.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CNavTitleProps extends HTMLAttributes<HTMLLIElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CNavTitle: PolymorphicRefForwardingComponent<'li', CNavTitleProps> = forwardRef<
-  HTMLLIElement,
-  CNavTitleProps
->(({ children, as: Component = 'li', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('nav-title', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CNavTitle.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CNavTitle.displayName = 'CNavTitle'
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNav.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNav.spec.tsx
deleted file mode 100644
index 1afc468b..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/CNav.spec.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '../../dropdown'
-import { CNav, CNavItem, CNavLink } from '../index'
-
-test('loads and displays CNav component', async () => {
-  const { container } = render(<CNav>Test</CNav>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNav customize', async () => {
-  const { container } = render(
-    <CNav className="bazinga" as="h3" layout="justified" variant="pills">
-      Test
-    </CNav>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav')
-  expect(container.firstChild).toHaveClass('nav-justified')
-  expect(container.firstChild).toHaveClass('nav-pills')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
-
-test('CNav example', async () => {
-  const { container } = render(
-    <CNav>
-      <CNavItem>
-        <CNavLink href="#" active>
-          Active
-        </CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CDropdown variant="nav-item">
-        <CDropdownToggle>A</CDropdownToggle>
-        <CDropdownMenu>
-          <CDropdownItem href="#">B</CDropdownItem>
-          <CDropdownItem href="#">C</CDropdownItem>
-          <CDropdownItem href="#">D</CDropdownItem>
-        </CDropdownMenu>
-      </CDropdown>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#" disabled>
-          Disabled
-        </CNavLink>
-      </CNavItem>
-    </CNav>
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavGroup.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavGroup.spec.tsx
deleted file mode 100644
index d55d2a3c..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/CNavGroup.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavGroup } from '../index'
-
-test('loads and displays CNavGroup component', async () => {
-  const { container } = render(<CNavGroup toggler="anchorText" />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavGroup customize', async () => {
-  const { container } = render(
-    <CNavGroup className="bazinga" toggler="anchorText" visible={true} idx="1" />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav-group')
-  expect(container.firstChild).toHaveClass('bazinga')
-  const arr = container.getElementsByClassName('nav-link')
-  if (arr.length > 0) {
-    //expect(arr[0].innerText).toHaveTextContent('anchorText')
-    expect(arr[0].innerHTML).toBe('anchorText')
-  } else {
-    expect(true).toBe(false)
-  }
-})
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavGroupItems.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavGroupItems.spec.tsx
deleted file mode 100644
index de24f9c2..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/CNavGroupItems.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavGroupItems } from '../index'
-
-test('loads and displays CNavGroupItems component', async () => {
-  const { container } = render(<CNavGroupItems>Test</CNavGroupItems>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavGroupItems customize', async () => {
-  const { container } = render(<CNavGroupItems className="bazinga">Test</CNavGroupItems>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav-group-items')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavItem.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavItem.spec.tsx
deleted file mode 100644
index 570e95c1..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/CNavItem.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavItem } from '../index'
-
-test('loads and displays CNavItem component', async () => {
-  const { container } = render(<CNavItem>Test</CNavItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavItem customize', async () => {
-  const { container } = render(
-    <CNavItem active={true} className="bazinga" as="h3" disabled={true} href="/bazinga">
-      Test
-    </CNavItem>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild?.firstChild).toHaveClass('nav-link')
-  expect(container.firstChild).toHaveClass('nav-item')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavLink.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavLink.spec.tsx
deleted file mode 100644
index 988716f5..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/CNavLink.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavLink } from '../index'
-
-test('loads and displays CNavLink component', async () => {
-  const { container } = render(<CNavLink>Test</CNavLink>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavLink customize', async () => {
-  const { container } = render(
-    <CNavLink active={true} className="bazinga" as="h3" disabled={true} href="/bazinga">
-      Test
-    </CNavLink>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav-link')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
-
-test('CNavLink witch "to" prop', async () => {
-  const { container } = render(<CNavLink to="/bazinga">Test</CNavLink>)
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/nav/__tests__/CNavTitle.spec.tsx b/packages/coreui-react/src/components/nav/__tests__/CNavTitle.spec.tsx
deleted file mode 100644
index 22979044..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/CNavTitle.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavTitle } from '../index'
-
-test('loads and displays CNavTitle component', async () => {
-  const { container } = render(<CNavTitle>Test</CNavTitle>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavTitle customize', async () => {
-  const { container } = render(<CNavTitle className="bazinga">Test</CNavTitle>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('nav-title')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap
deleted file mode 100644
index f54524cc..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap
+++ /dev/null
@@ -1,118 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNav customize 1`] = `
-<div>
-  <h3
-    class="nav nav-justified nav-pills bazinga"
-    role="navigation"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`CNav example 1`] = `
-<div>
-  <ul
-    class="nav"
-    role="navigation"
-  >
-    <li
-      class="nav-item"
-    >
-      <a
-        aria-current="page"
-        class="nav-link active"
-        href="#"
-      >
-        Active
-      </a>
-    </li>
-    <li
-      class="nav-item"
-    >
-      <a
-        class="nav-link"
-        href="#"
-      >
-        Link
-      </a>
-    </li>
-    <li
-      class="nav-item dropdown"
-    >
-      <a
-        aria-expanded="false"
-        class="nav-link dropdown-toggle"
-        href="#"
-        role="button"
-      >
-        A
-      </a>
-      <ul
-        class="dropdown-menu"
-        role="menu"
-      >
-        <li>
-          <a
-            class="dropdown-item"
-            href="#"
-          >
-            B
-          </a>
-        </li>
-        <li>
-          <a
-            class="dropdown-item"
-            href="#"
-          >
-            C
-          </a>
-        </li>
-        <li>
-          <a
-            class="dropdown-item"
-            href="#"
-          >
-            D
-          </a>
-        </li>
-      </ul>
-    </li>
-    <li
-      class="nav-item"
-    >
-      <a
-        class="nav-link"
-        href="#"
-      >
-        Link
-      </a>
-    </li>
-    <li
-      class="nav-item"
-    >
-      <a
-        aria-disabled="true"
-        class="nav-link disabled"
-        disabled=""
-        href="#"
-        tabindex="-1"
-      >
-        Disabled
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`loads and displays CNav component 1`] = `
-<div>
-  <ul
-    class="nav"
-    role="navigation"
-  >
-    Test
-  </ul>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap
deleted file mode 100644
index 93e75ffa..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavGroup customize 1`] = `
-<div>
-  <li
-    class="nav-group bazinga"
-  >
-    <a
-      class="nav-link nav-group-toggle"
-      href="#"
-    >
-      anchorText
-    </a>
-    <ul
-      class="nav-group-items"
-      style="height: 0px; display: block;"
-    />
-  </li>
-</div>
-`;
-
-exports[`loads and displays CNavGroup component 1`] = `
-<div>
-  <li
-    class="nav-group"
-  >
-    <a
-      class="nav-link nav-group-toggle"
-      href="#"
-    >
-      anchorText
-    </a>
-    <ul
-      class="nav-group-items"
-      style="height: 0px;"
-    />
-  </li>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.tsx.snap
deleted file mode 100644
index 0799b190..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavGroupItems customize 1`] = `
-<div>
-  <ul
-    class="nav-group-items bazinga"
-  >
-    Test
-  </ul>
-</div>
-`;
-
-exports[`loads and displays CNavGroupItems component 1`] = `
-<div>
-  <ul
-    class="nav-group-items"
-  >
-    Test
-  </ul>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap
deleted file mode 100644
index da8174ed..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap
+++ /dev/null
@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavItem customize 1`] = `
-<div>
-  <h3
-    class="nav-item bazinga"
-  >
-    <a
-      aria-current="page"
-      aria-disabled="true"
-      class="nav-link bazinga active disabled"
-      disabled=""
-      href="/bazinga"
-      tabindex="-1"
-    >
-      Test
-    </a>
-  </h3>
-</div>
-`;
-
-exports[`CNavItem customize 2`] = `
-<div>
-  <h3
-    class="nav-item bazinga"
-  >
-    <a
-      aria-current="page"
-      aria-disabled="true"
-      class="nav-link bazinga active disabled"
-      disabled=""
-      href="/bazinga"
-      tabindex="-1"
-    >
-      Test
-    </a>
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CNavItem component 1`] = `
-<div>
-  <li
-    class="nav-item"
-  >
-    Test
-  </li>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavLink.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavLink.spec.tsx.snap
deleted file mode 100644
index 23a2910a..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavLink.spec.tsx.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavLink customize 1`] = `
-<div>
-  <h3
-    aria-current="page"
-    class="nav-link bazinga active disabled"
-    disabled=""
-    href="/bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`CNavLink witch "to" prop 1`] = `
-<div>
-  <a
-    class="nav-link"
-    to="/bazinga"
-  >
-    Test
-  </a>
-</div>
-`;
-
-exports[`loads and displays CNavLink component 1`] = `
-<div>
-  <a
-    class="nav-link"
-  >
-    Test
-  </a>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.tsx.snap
deleted file mode 100644
index 887159fc..00000000
--- a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavTitle customize 1`] = `
-<div>
-  <li
-    class="nav-title bazinga"
-  >
-    Test
-  </li>
-</div>
-`;
-
-exports[`loads and displays CNavTitle component 1`] = `
-<div>
-  <li
-    class="nav-title"
-  >
-    Test
-  </li>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/nav/index.ts b/packages/coreui-react/src/components/nav/index.ts
deleted file mode 100644
index dc83561a..00000000
--- a/packages/coreui-react/src/components/nav/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { CNav } from './CNav'
-import { CNavGroupItems } from './CNavGroupItems'
-import { CNavGroup } from './CNavGroup'
-import { CNavItem } from './CNavItem'
-import { CNavLink } from './CNavLink'
-import { CNavTitle } from './CNavTitle'
-
-export { CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle }
diff --git a/packages/coreui-react/src/components/navbar/CNavbar.tsx b/packages/coreui-react/src/components/navbar/CNavbar.tsx
deleted file mode 100644
index 04446c77..00000000
--- a/packages/coreui-react/src/components/navbar/CNavbar.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Sets if the color of text should be colored for a light or dark background.
-   */
-  colorScheme?: 'dark' | 'light'
-  /**
-   * Defines optional container wrapping children elements.
-   */
-  container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'
-  /**
-   * Defines the responsive breakpoint to determine when content collapses.
-   */
-  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-  /**
-   * Place component in non-static positions.
-   */
-  placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top'
-}
-
-export const CNavbar: PolymorphicRefForwardingComponent<'nav', CNavbarProps> = forwardRef<
-  HTMLDivElement,
-  CNavbarProps
->(
-  (
-    {
-      children,
-      as: Component = 'nav',
-      className,
-      color,
-      colorScheme,
-      container,
-      expand,
-      placement,
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <Component
-        className={classNames(
-          'navbar',
-          {
-            [`bg-${color}`]: color,
-            [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
-          },
-          placement,
-          className,
-        )}
-        {...(colorScheme && { 'data-coreui-theme': colorScheme })}
-        {...rest}
-        ref={ref}
-      >
-        {container ? (
-          <div className={typeof container === 'string' ? `container-${container}` : 'container'}>
-            {children}
-          </div>
-        ) : (
-          <>{children}</>
-        )}
-      </Component>
-    )
-  },
-)
-
-CNavbar.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  colorScheme: PropTypes.oneOf(['dark', 'light']),
-  container: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'>([
-      'sm',
-      'md',
-      'lg',
-      'xl',
-      'xxl',
-      'fluid',
-    ]),
-  ]),
-  expand: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
-  ]),
-  placement: PropTypes.oneOf(['fixed-top', 'fixed-bottom', 'sticky-top']),
-}
-
-CNavbar.displayName = 'CNavbar'
diff --git a/packages/coreui-react/src/components/navbar/CNavbarBrand.tsx b/packages/coreui-react/src/components/navbar/CNavbarBrand.tsx
deleted file mode 100644
index 8a52c4e8..00000000
--- a/packages/coreui-react/src/components/navbar/CNavbarBrand.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CNavbarBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   *
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * The href attribute specifies the URL of the page the link goes to.
-   */
-  href?: string
-}
-
-export const CNavbarBrand: PolymorphicRefForwardingComponent<'a', CNavbarBrandProps> = forwardRef<
-  HTMLAnchorElement | HTMLSpanElement,
-  CNavbarBrandProps
->(({ children, as, className, ...rest }, ref) => {
-  const Component = as ?? (rest.href ? 'a' : 'span')
-
-  return (
-    <Component className={classNames('navbar-brand', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CNavbarBrand.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CNavbarBrand.displayName = 'CNavbarBrand'
diff --git a/packages/coreui-react/src/components/navbar/CNavbarNav.tsx b/packages/coreui-react/src/components/navbar/CNavbarNav.tsx
deleted file mode 100644
index 70ef319b..00000000
--- a/packages/coreui-react/src/components/navbar/CNavbarNav.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CNavbarNavProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CNavbarNav: PolymorphicRefForwardingComponent<'ul', CNavbarNavProps> = forwardRef<
-  HTMLDivElement | HTMLUListElement,
-  CNavbarNavProps
->(({ children, as: Component = 'ul', className, ...rest }, ref) => {
-  return (
-    <Component
-      className={classNames('navbar-nav', className)}
-      role="navigation"
-      ref={ref}
-      {...rest}
-    >
-      {children}
-    </Component>
-  )
-})
-
-CNavbarNav.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CNavbarNav.displayName = 'CNavbarNav'
diff --git a/packages/coreui-react/src/components/navbar/CNavbarText.tsx b/packages/coreui-react/src/components/navbar/CNavbarText.tsx
deleted file mode 100644
index 45752738..00000000
--- a/packages/coreui-react/src/components/navbar/CNavbarText.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CNavbarTextProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CNavbarText = forwardRef<HTMLSpanElement, CNavbarTextProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <span className={classNames('navbar-text', className)} {...rest} ref={ref}>
-        {children}
-      </span>
-    )
-  },
-)
-
-CNavbarText.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CNavbarText.displayName = 'CNavbarText'
diff --git a/packages/coreui-react/src/components/navbar/CNavbarToggler.tsx b/packages/coreui-react/src/components/navbar/CNavbarToggler.tsx
deleted file mode 100644
index 296740a3..00000000
--- a/packages/coreui-react/src/components/navbar/CNavbarToggler.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CNavbarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CNavbarToggler = forwardRef<HTMLButtonElement, CNavbarTogglerProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <button type="button" className={classNames('navbar-toggler', className)} {...rest} ref={ref}>
-        {children ?? <span className="navbar-toggler-icon"></span>}
-      </button>
-    )
-  },
-)
-
-CNavbarToggler.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CNavbarToggler.displayName = 'CNavbarToggler'
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbar.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbar.spec.tsx
deleted file mode 100644
index 3df2fb9d..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbar.spec.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavbar } from '../index'
-
-test('loads and displays CNavbar component', async () => {
-  const { container } = render(<CNavbar>Test</CNavbar>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavbar customize', async () => {
-  const { container } = render(
-    <CNavbar
-      className="bazinga"
-      color="warning"
-      colorScheme="dark"
-      as="h3"
-      container="xl"
-      expand="lg"
-      placement="fixed-bottom"
-    >
-      Test
-    </CNavbar>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('navbar')
-  expect(container.firstChild).toHaveClass('bg-warning')
-  expect(container.firstChild).toHaveClass('navbar-expand-lg')
-  expect(container.firstChild).toHaveClass('fixed-bottom')
-  expect(container.firstChild).toHaveAttribute('data-coreui-theme', 'dark')
-  const arrLength = container.getElementsByClassName('container-xl').length
-  expect(arrLength).toBe(1)
-})
-
-test('CNavbar customize - container and expand are boolean', async () => {
-  const { container } = render(
-    <CNavbar container={true} expand={true}>
-      Test
-    </CNavbar>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('navbar-expand')
-  const arrLength = container.getElementsByClassName('container').length
-  expect(arrLength).toBe(1)
-})
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbarBrand.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbarBrand.spec.tsx
deleted file mode 100644
index 25a6d391..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbarBrand.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavbarBrand } from '../index'
-
-test('loads and displays CNavbarBrand component', async () => {
-  const { container } = render(<CNavbarBrand>Test</CNavbarBrand>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavbarBrand witch href', async () => {
-  const { container } = render(<CNavbarBrand href="/bazinga">Test</CNavbarBrand>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavbarBrand customize', async () => {
-  const { container } = render(
-    <CNavbarBrand className="bazinga" as="h3" href="/bazinga">
-      Test
-    </CNavbarBrand>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('navbar-brand')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbarNav.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbarNav.spec.tsx
deleted file mode 100644
index 48b464ca..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbarNav.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavbarNav } from '../index'
-
-test('loads and displays CNavbarNav component', async () => {
-  const { container } = render(<CNavbarNav>Test</CNavbarNav>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavbarNav customize', async () => {
-  const { container } = render(
-    <CNavbarNav className="bazinga" as="h3">
-      Test
-    </CNavbarNav>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('navbar-nav')
-  expect(container.firstChild).toHaveAttribute('role', 'navigation')
-})
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbarText.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbarText.spec.tsx
deleted file mode 100644
index b6dd3a74..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbarText.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavbarText } from '../index'
-
-test('loads and displays CNavbarText component', async () => {
-  const { container } = render(<CNavbarText>Test</CNavbarText>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavbarText customize', async () => {
-  const { container } = render(<CNavbarText className="bazinga">Test</CNavbarText>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('navbar-text')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
diff --git a/packages/coreui-react/src/components/navbar/__tests__/CNavbarToggler.spec.tsx b/packages/coreui-react/src/components/navbar/__tests__/CNavbarToggler.spec.tsx
deleted file mode 100644
index eaeca9b2..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/CNavbarToggler.spec.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CNavbarToggler } from '../index'
-
-test('CNavbarToggler witch children', async () => {
-  const { container } = render(<CNavbarToggler>Test</CNavbarToggler>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CNavbarToggler witch no children', async () => {
-  const { container } = render(<CNavbarToggler />)
-  expect(container).toMatchSnapshot()
-  const arrLength = container.getElementsByClassName('navbar-toggler-icon').length
-  expect(arrLength).toBe(1)
-})
-
-test('CNavbarToggler customize', async () => {
-  const { container } = render(<CNavbarToggler className="bazinga" />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('navbar-toggler')
-})
diff --git a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.tsx.snap b/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.tsx.snap
deleted file mode 100644
index 8540d749..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.tsx.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavbar customize - container and expand are boolean 1`] = `
-<div>
-  <nav
-    class="navbar navbar-expand"
-  >
-    <div
-      class="container"
-    >
-      Test
-    </div>
-  </nav>
-</div>
-`;
-
-exports[`CNavbar customize 1`] = `
-<div>
-  <h3
-    class="navbar bg-warning navbar-expand-lg fixed-bottom bazinga"
-    data-coreui-theme="dark"
-  >
-    <div
-      class="container-xl"
-    >
-      Test
-    </div>
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CNavbar component 1`] = `
-<div>
-  <nav
-    class="navbar"
-  >
-    Test
-  </nav>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.tsx.snap b/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.tsx.snap
deleted file mode 100644
index 7dc5581f..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.tsx.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavbarBrand customize 1`] = `
-<div>
-  <h3
-    class="navbar-brand bazinga"
-    href="/bazinga"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`CNavbarBrand witch href 1`] = `
-<div>
-  <a
-    class="navbar-brand"
-    href="/bazinga"
-  >
-    Test
-  </a>
-</div>
-`;
-
-exports[`loads and displays CNavbarBrand component 1`] = `
-<div>
-  <span
-    class="navbar-brand"
-  >
-    Test
-  </span>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.tsx.snap b/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.tsx.snap
deleted file mode 100644
index a2c087da..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavbarNav customize 1`] = `
-<div>
-  <h3
-    class="navbar-nav bazinga"
-    role="navigation"
-  >
-    Test
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CNavbarNav component 1`] = `
-<div>
-  <ul
-    class="navbar-nav"
-    role="navigation"
-  >
-    Test
-  </ul>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.tsx.snap b/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.tsx.snap
deleted file mode 100644
index d30324c0..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavbarText customize 1`] = `
-<div>
-  <span
-    class="navbar-text bazinga"
-  >
-    Test
-  </span>
-</div>
-`;
-
-exports[`loads and displays CNavbarText component 1`] = `
-<div>
-  <span
-    class="navbar-text"
-  >
-    Test
-  </span>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarToggler.spec.tsx.snap b/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarToggler.spec.tsx.snap
deleted file mode 100644
index 145f8d7f..00000000
--- a/packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarToggler.spec.tsx.snap
+++ /dev/null
@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CNavbarToggler customize 1`] = `
-<div>
-  <button
-    class="navbar-toggler bazinga"
-    type="button"
-  >
-    <span
-      class="navbar-toggler-icon"
-    />
-  </button>
-</div>
-`;
-
-exports[`CNavbarToggler witch children 1`] = `
-<div>
-  <button
-    class="navbar-toggler"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`CNavbarToggler witch no children 1`] = `
-<div>
-  <button
-    class="navbar-toggler"
-    type="button"
-  >
-    <span
-      class="navbar-toggler-icon"
-    />
-  </button>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/navbar/index.ts b/packages/coreui-react/src/components/navbar/index.ts
deleted file mode 100644
index 690bc9cc..00000000
--- a/packages/coreui-react/src/components/navbar/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { CNavbar } from './CNavbar'
-import { CNavbarBrand } from './CNavbarBrand'
-import { CNavbarNav } from './CNavbarNav'
-import { CNavbarText } from './CNavbarText'
-import { CNavbarToggler } from './CNavbarToggler'
-
-export { CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler }
diff --git a/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx b/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx
deleted file mode 100644
index 702b27c6..00000000
--- a/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
-
-import { CBackdrop } from '../backdrop'
-import { CConditionalPortal } from '../conditional-portal'
-
-import { useForkedRef } from '../../hooks'
-
-export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Apply a backdrop on body while offcanvas is open.
-   */
-  backdrop?: boolean | 'static'
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets a darker color scheme.
-   */
-  dark?: boolean
-  /**
-   * Closes the offcanvas when escape key is pressed.
-   */
-  keyboard?: boolean
-  /**
-   * Callback fired when the component requests to be hidden.
-   */
-  onHide?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * Components placement, there’s no default placement.
-   */
-  placement: 'start' | 'end' | 'top' | 'bottom'
-  /**
-   * Generates modal using createPortal.
-   */
-  portal?: boolean
-  /**
-   * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
-   *
-   * @since 4.6.0
-   */
-  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-  /**
-   * Allow body scrolling while offcanvas is open
-   */
-  scroll?: boolean
-  /**
-   * Toggle the visibility of offcanvas component.
-   */
-  visible?: boolean
-}
-
-export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
-  (
-    {
-      children,
-      backdrop = true,
-      className,
-      dark,
-      keyboard = true,
-      onHide,
-      onShow,
-      placement,
-      portal = false,
-      responsive = true,
-      scroll = false,
-      visible = false,
-      ...rest
-    },
-    ref,
-  ) => {
-    const [_visible, setVisible] = useState<boolean>(visible)
-    const offcanvasRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, offcanvasRef)
-
-    useEffect(() => {
-      setVisible(visible)
-    }, [visible])
-
-    useEffect(() => {
-      if (_visible && !scroll) {
-        document.body.style.overflow = 'hidden'
-        document.body.style.paddingRight = '0px'
-        return
-      }
-
-      if (!scroll) {
-        document.body.style.removeProperty('overflow')
-        document.body.style.removeProperty('padding-right')
-      }
-    }, [_visible])
-
-    const handleDismiss = () => {
-      setVisible(false)
-    }
-
-    const handleBackdropDismiss = () => {
-      if (backdrop !== 'static') {
-        setVisible(false)
-      }
-    }
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'Escape' && keyboard) {
-        return handleDismiss()
-      }
-    }
-
-    return (
-      <>
-        <Transition
-          in={_visible}
-          nodeRef={offcanvasRef}
-          onEnter={onShow}
-          onEntered={() => offcanvasRef.current?.focus()}
-          onExit={onHide}
-          timeout={300}
-        >
-          {(state) => (
-            <CConditionalPortal portal={portal}>
-              <div
-                className={classNames(
-                  {
-                    [`offcanvas${typeof responsive === 'string' ? '-' + responsive : ''}`]:
-                      responsive,
-                    [`offcanvas-${placement}`]: placement,
-                    showing: state === 'entering',
-                    show: state === 'entered',
-                    'show hiding': state === 'exiting',
-                  },
-                  className,
-                )}
-                role="dialog"
-                tabIndex={-1}
-                onKeyDown={handleKeyDown}
-                {...(dark && { 'data-coreui-theme': 'dark' })}
-                {...rest}
-                ref={forkedRef}
-              >
-                {children}
-              </div>
-            </CConditionalPortal>
-          )}
-        </Transition>
-        {backdrop && (
-          <CConditionalPortal portal={portal}>
-            <CBackdrop
-              className="offcanvas-backdrop"
-              onClick={handleBackdropDismiss}
-              visible={_visible}
-            />
-          </CConditionalPortal>
-        )}
-      </>
-    )
-  },
-)
-
-COffcanvas.propTypes = {
-  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dark: PropTypes.bool,
-  keyboard: PropTypes.bool,
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
-  placement: PropTypes.oneOf<'start' | 'end' | 'top' | 'bottom'>(['start', 'end', 'top', 'bottom'])
-    .isRequired,
-  portal: PropTypes.bool,
-  responsive: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
-  ]),
-  scroll: PropTypes.bool,
-  visible: PropTypes.bool,
-}
-
-COffcanvas.displayName = 'COffcanvas'
diff --git a/packages/coreui-react/src/components/offcanvas/COffcanvasBody.tsx b/packages/coreui-react/src/components/offcanvas/COffcanvasBody.tsx
deleted file mode 100644
index 0b74fd99..00000000
--- a/packages/coreui-react/src/components/offcanvas/COffcanvasBody.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface COffcanvasBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const COffcanvasBody = forwardRef<HTMLDivElement, COffcanvasBodyProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('offcanvas-body', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-COffcanvasBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-COffcanvasBody.displayName = 'COffcanvasBody'
diff --git a/packages/coreui-react/src/components/offcanvas/COffcanvasHeader.tsx b/packages/coreui-react/src/components/offcanvas/COffcanvasHeader.tsx
deleted file mode 100644
index 6b9a649c..00000000
--- a/packages/coreui-react/src/components/offcanvas/COffcanvasHeader.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface COffcanvasHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const COffcanvasHeader = forwardRef<HTMLDivElement, COffcanvasHeaderProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('offcanvas-header', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-COffcanvasHeader.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-COffcanvasHeader.displayName = 'COffcanvasHeader'
diff --git a/packages/coreui-react/src/components/offcanvas/COffcanvasTitle.tsx b/packages/coreui-react/src/components/offcanvas/COffcanvasTitle.tsx
deleted file mode 100644
index f1c57b24..00000000
--- a/packages/coreui-react/src/components/offcanvas/COffcanvasTitle.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface COffcanvasTitleProps extends HTMLAttributes<HTMLHeadingElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const COffcanvasTitle: PolymorphicRefForwardingComponent<'h5', COffcanvasTitleProps> =
-  forwardRef<HTMLHeadingElement, COffcanvasTitleProps>(
-    ({ children, as: Component = 'h5', className, ...rest }, ref) => {
-      return (
-        <Component className={classNames('offcanvas-title', className)} {...rest} ref={ref}>
-          {children}
-        </Component>
-      )
-    },
-  )
-
-COffcanvasTitle.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-COffcanvasTitle.displayName = 'COffcanvasTitle'
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx
deleted file mode 100644
index a1d8590e..00000000
--- a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react'
-import { render, fireEvent, act } from '@testing-library/react'
-import '@testing-library/jest-dom'
-
-import { COffcanvas } from '../index'
-
-test('loads and displays COffcanvas component', async () => {
-  const { container } = render(<COffcanvas placement="top" />)
-  expect(container).toMatchSnapshot()
-})
-
-test('COffcanvas customize one', async () => {
-  const { container } = render(
-    <COffcanvas
-      className="bazinga"
-      backdrop={false}
-      keyboard={false}
-      placement="start"
-      portal={false}
-      visible={false}
-    >
-      Test
-    </COffcanvas>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('offcanvas')
-  expect(container.firstChild).toHaveClass('offcanvas-start')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
-
-test('COffcanvas customize and event on click backdrop', async () => {
-  jest.useFakeTimers()
-
-  const onHide = jest.fn()
-  const { container } = render(
-    <COffcanvas
-      className="bazinga"
-      backdrop={true}
-      keyboard={true}
-      placement="end"
-      portal={false}
-      visible={true}
-      onHide={onHide}
-    >
-      Test
-    </COffcanvas>
-  )
-
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('offcanvas')
-  expect(container.firstChild).toHaveClass('offcanvas-end')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('show')
-  expect(container.firstChild).toHaveTextContent('Test')
-  expect(onHide).toHaveBeenCalledTimes(0)
-
-  const backdrop = document.querySelector('.offcanvas-backdrop')
-
-  if (backdrop !== null) {
-    act(() => {
-      fireEvent.click(backdrop)
-      jest.runAllTimers()
-    })
-  }
-
-  expect(onHide).toHaveBeenCalledTimes(1)
-  expect(container.firstChild).toHaveClass('show')
-  expect(container.firstChild).toHaveClass('hiding')
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(container.firstChild).not.toHaveClass('show')
-
-  jest.useRealTimers()
-})
-
-test('COffcanvas customize and event on keypress', async () => {
-  jest.useFakeTimers()
-
-  const onHide = jest.fn()
-  const { container } = render(
-    <COffcanvas
-      className="bazinga"
-      backdrop={true}
-      keyboard={true}
-      placement="end"
-      portal={false}
-      visible={true}
-      onHide={onHide}
-    >
-      Test
-    </COffcanvas>
-  )
-
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('offcanvas')
-  expect(container.firstChild).toHaveClass('offcanvas-end')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('show')
-  expect(onHide).toHaveBeenCalledTimes(0)
-
-  const canvas = document.querySelector('.offcanvas')
-
-  if (canvas !== null) {
-    act(() => {
-      fireEvent.keyDown(canvas, {
-        key: 'Escape',
-        code: 'Escape',
-        keyCode: 27,
-        charCode: 27,
-      })
-      jest.runAllTimers()
-    })
-  }
-
-  expect(onHide).toHaveBeenCalledTimes(1)
-  expect(container.firstChild).toHaveClass('show')
-  expect(container.firstChild).toHaveClass('hiding')
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(container.firstChild).not.toHaveClass('show')
-
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx
deleted file mode 100644
index 5858af68..00000000
--- a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { COffcanvasBody } from '../index'
-
-test('loads and displays COffcanvasBody component', async () => {
-  const { container } = render(<COffcanvasBody />)
-  expect(container).toMatchSnapshot()
-})
-
-test('COffcanvasBody customize', async () => {
-  const { container } = render(<COffcanvasBody className="bazinga">Test</COffcanvasBody>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('offcanvas-body')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx
deleted file mode 100644
index 54d808c3..00000000
--- a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { COffcanvasHeader } from '../index'
-
-test('loads and displays COffcanvasHeader component', async () => {
-  const { container } = render(<COffcanvasHeader />)
-  expect(container).toMatchSnapshot()
-})
-
-test('COffcanvasHeader customize', async () => {
-  const { container } = render(<COffcanvasHeader className="bazinga">Test</COffcanvasHeader>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('offcanvas-header')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx b/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx
deleted file mode 100644
index 4bf14bf3..00000000
--- a/packages/coreui-react/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { COffcanvasTitle } from '../index'
-
-test('loads and displays COffcanvasTitle component', async () => {
-  const { container } = render(<COffcanvasTitle />)
-  expect(container).toMatchSnapshot()
-})
-
-test('COffcanvasTitle customize', async () => {
-  const { container } = render(
-    <COffcanvasTitle className="bazinga" as="div">
-      Test
-    </COffcanvasTitle>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('offcanvas-title')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.tsx.snap b/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.tsx.snap
deleted file mode 100644
index 796fb15f..00000000
--- a/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.tsx.snap
+++ /dev/null
@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`COffcanvas customize and event on click backdrop 1`] = `
-<div>
-  <div
-    class="offcanvas offcanvas-end show bazinga"
-    role="dialog"
-    tabindex="-1"
-  >
-    Test
-  </div>
-  <div
-    class="offcanvas-backdrop fade show"
-  />
-</div>
-`;
-
-exports[`COffcanvas customize and event on keypress 1`] = `
-<div>
-  <div
-    class="offcanvas offcanvas-end show bazinga"
-    role="dialog"
-    tabindex="-1"
-  >
-    Test
-  </div>
-  <div
-    class="offcanvas-backdrop fade show"
-  />
-</div>
-`;
-
-exports[`COffcanvas customize one 1`] = `
-<div>
-  <div
-    class="offcanvas offcanvas-start bazinga"
-    role="dialog"
-    tabindex="-1"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays COffcanvas component 1`] = `
-<div>
-  <div
-    class="offcanvas offcanvas-top"
-    role="dialog"
-    tabindex="-1"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.tsx.snap b/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.tsx.snap
deleted file mode 100644
index 4aab05e6..00000000
--- a/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`COffcanvasBody customize 1`] = `
-<div>
-  <div
-    class="offcanvas-body bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays COffcanvasBody component 1`] = `
-<div>
-  <div
-    class="offcanvas-body"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.tsx.snap b/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.tsx.snap
deleted file mode 100644
index cced2188..00000000
--- a/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`COffcanvasHeader customize 1`] = `
-<div>
-  <div
-    class="offcanvas-header bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays COffcanvasHeader component 1`] = `
-<div>
-  <div
-    class="offcanvas-header"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.tsx.snap b/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.tsx.snap
deleted file mode 100644
index a38e77a1..00000000
--- a/packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`COffcanvasTitle customize 1`] = `
-<div>
-  <div
-    class="offcanvas-title bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays COffcanvasTitle component 1`] = `
-<div>
-  <h5
-    class="offcanvas-title"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/offcanvas/index.ts b/packages/coreui-react/src/components/offcanvas/index.ts
deleted file mode 100644
index c3084cf9..00000000
--- a/packages/coreui-react/src/components/offcanvas/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { COffcanvas } from './COffcanvas'
-import { COffcanvasBody } from './COffcanvasBody'
-import { COffcanvasHeader } from './COffcanvasHeader'
-import { COffcanvasTitle } from './COffcanvasTitle'
-
-export { COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle }
diff --git a/packages/coreui-react/src/components/pagination/CPagination.tsx b/packages/coreui-react/src/components/pagination/CPagination.tsx
deleted file mode 100644
index 05e797b5..00000000
--- a/packages/coreui-react/src/components/pagination/CPagination.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CPaginationProps extends HTMLAttributes<HTMLUListElement> {
-  /**
-   * Set the alignment of pagination components.
-   */
-  align?: 'start' | 'center' | 'end'
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Size the component small or large.
-   */
-  size?: 'sm' | 'lg'
-}
-
-export const CPagination = forwardRef<HTMLUListElement, CPaginationProps>(
-  ({ children, align, className, size, ...rest }, ref) => {
-    return (
-      <nav ref={ref} {...rest}>
-        <ul
-          className={classNames(
-            'pagination',
-            {
-              [`justify-content-${align}`]: align,
-              [`pagination-${size}`]: size,
-            },
-            className,
-          )}
-        >
-          {children}
-        </ul>
-      </nav>
-    )
-  },
-)
-
-CPagination.propTypes = {
-  align: PropTypes.oneOf(['start', 'center', 'end']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'lg']),
-}
-
-CPagination.displayName = 'CPagination'
diff --git a/packages/coreui-react/src/components/pagination/CPaginationItem.tsx b/packages/coreui-react/src/components/pagination/CPaginationItem.tsx
deleted file mode 100644
index 87882af0..00000000
--- a/packages/coreui-react/src/components/pagination/CPaginationItem.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink } from '../link/CLink'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CPaginationItemProps extends HTMLAttributes<HTMLAnchorElement> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: string | ElementType
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-}
-
-export const CPaginationItem: PolymorphicRefForwardingComponent<'a', CPaginationItemProps> =
-  forwardRef<HTMLAnchorElement, CPaginationItemProps>(
-    ({ children, as, className, ...rest }, ref) => {
-      const Component = as ?? (rest.active ? 'span' : 'a')
-
-      return (
-        <li
-          className={classNames(
-            'page-item',
-            {
-              active: rest.active,
-              disabled: rest.disabled,
-            },
-            className,
-          )}
-          {...(rest.active && { 'aria-current': 'page' })}
-        >
-          {Component === 'a' ? (
-            <CLink className="page-link" as={Component} {...rest} ref={ref}>
-              {children}
-            </CLink>
-          ) : (
-            <Component className="page-link" ref={ref}>
-              {children}
-            </Component>
-          )}
-        </li>
-      )
-    },
-  )
-
-CPaginationItem.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CPaginationItem.displayName = 'CPaginationItem'
diff --git a/packages/coreui-react/src/components/pagination/__tests__/CPagination.spec.tsx b/packages/coreui-react/src/components/pagination/__tests__/CPagination.spec.tsx
deleted file mode 100644
index 03f5f572..00000000
--- a/packages/coreui-react/src/components/pagination/__tests__/CPagination.spec.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CPagination, CPaginationItem } from '../index'
-
-test('loads and displays CPagination component', async () => {
-  const { container } = render(<CPagination>Test</CPagination>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CPagination customize', async () => {
-  const { container } = render(
-    <CPagination className="bazinga" aria-label="ariaLabel" size="lg">
-      Test
-    </CPagination>,
-  )
-  expect(container).toMatchSnapshot()
-  let element = container.firstChild
-  if (element === null) {
-    expect(true).toBe(false)
-  } else {
-    element = element.firstChild
-    expect(element).toHaveClass('bazinga')
-    expect(element).toHaveClass('pagination')
-    expect(element).toHaveClass('pagination-lg')
-  }
-})
-
-test('CPagination example', async () => {
-  const { container } = render(
-    <CPagination>
-      <CPaginationItem>A</CPaginationItem>
-      <CPaginationItem>B</CPaginationItem>
-      <CPaginationItem>C</CPaginationItem>
-    </CPagination>,
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/pagination/__tests__/CPaginationItem.spec.tsx b/packages/coreui-react/src/components/pagination/__tests__/CPaginationItem.spec.tsx
deleted file mode 100644
index c93a568b..00000000
--- a/packages/coreui-react/src/components/pagination/__tests__/CPaginationItem.spec.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CPaginationItem } from '../index'
-
-test('loads and displays CPaginationItem component', async () => {
-  const { container } = render(<CPaginationItem>Test</CPaginationItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CPaginationItem customize', async () => {
-  const { container } = render(
-    <CPaginationItem className="bazinga" active={true} as="h3" disabled={true}>
-      Test
-    </CPaginationItem>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('page-item')
-  expect(container.firstChild).toHaveClass('active')
-  expect(container.firstChild).toHaveClass('disabled')
-  let element = container.firstChild
-  if (element === null) {
-    expect(true).toBe(false)
-  } else {
-    element = element.firstChild
-    expect(element).toHaveClass('page-link')
-  }
-})
diff --git a/packages/coreui-react/src/components/pagination/__tests__/__snapshots__/CPagination.spec.tsx.snap b/packages/coreui-react/src/components/pagination/__tests__/__snapshots__/CPagination.spec.tsx.snap
deleted file mode 100644
index 00d53c98..00000000
--- a/packages/coreui-react/src/components/pagination/__tests__/__snapshots__/CPagination.spec.tsx.snap
+++ /dev/null
@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CPagination customize 1`] = `
-<div>
-  <nav
-    aria-label="ariaLabel"
-  >
-    <ul
-      class="pagination pagination-lg bazinga"
-    >
-      Test
-    </ul>
-  </nav>
-</div>
-`;
-
-exports[`CPagination example 1`] = `
-<div>
-  <nav>
-    <ul
-      class="pagination"
-    >
-      <li
-        class="page-item"
-      >
-        <a
-          class="page-link"
-        >
-          A
-        </a>
-      </li>
-      <li
-        class="page-item"
-      >
-        <a
-          class="page-link"
-        >
-          B
-        </a>
-      </li>
-      <li
-        class="page-item"
-      >
-        <a
-          class="page-link"
-        >
-          C
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-`;
-
-exports[`loads and displays CPagination component 1`] = `
-<div>
-  <nav>
-    <ul
-      class="pagination"
-    >
-      Test
-    </ul>
-  </nav>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.tsx.snap b/packages/coreui-react/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.tsx.snap
deleted file mode 100644
index a3ba0f37..00000000
--- a/packages/coreui-react/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.tsx.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CPaginationItem customize 1`] = `
-<div>
-  <li
-    aria-current="page"
-    class="page-item active disabled bazinga"
-  >
-    <h3
-      class="page-link"
-    >
-      Test
-    </h3>
-  </li>
-</div>
-`;
-
-exports[`loads and displays CPaginationItem component 1`] = `
-<div>
-  <li
-    class="page-item"
-  >
-    <a
-      class="page-link"
-    >
-      Test
-    </a>
-  </li>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/pagination/index.ts b/packages/coreui-react/src/components/pagination/index.ts
deleted file mode 100644
index 5c09daf0..00000000
--- a/packages/coreui-react/src/components/pagination/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { CPagination } from './CPagination'
-import { CPaginationItem } from './CPaginationItem'
-
-export { CPagination, CPaginationItem }
diff --git a/packages/coreui-react/src/components/placeholder/CPlaceholder.tsx b/packages/coreui-react/src/components/placeholder/CPlaceholder.tsx
deleted file mode 100644
index c5d7ddc0..00000000
--- a/packages/coreui-react/src/components/placeholder/CPlaceholder.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * Set animation type to better convey the perception of something being actively loaded.
-   */
-  animation?: 'glow' | 'wave'
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Size the component extra small, small, or large.
-   */
-  size?: 'xs' | 'sm' | 'lg'
-  /**
-   * The number of columns on extra small devices (<576px).
-   */
-  xs?: number
-  /**
-   * The number of columns on small devices (<768px).
-   */
-  sm?: number
-  /**
-   * The number of columns on medium devices (<992px).
-   */
-  md?: number
-  /**
-   * The number of columns on large devices (<1200px).
-   */
-  lg?: number
-  /**
-   * The number of columns on X-Large devices (<1400px).
-   */
-  xl?: number
-  /**
-   * The number of columns on XX-Large devices (≥1400px).
-   */
-  xxl?: number
-}
-
-const BREAKPOINTS = [
-  'xxl' as const,
-  'xl' as const,
-  'lg' as const,
-  'md' as const,
-  'sm' as const,
-  'xs' as const,
-]
-
-export const CPlaceholder: PolymorphicRefForwardingComponent<'span', CPlaceholderProps> =
-  forwardRef<HTMLSpanElement, CPlaceholderProps>(
-    ({ children, animation, as: Component = 'span', className, color, size, ...rest }, ref) => {
-      const repsonsiveClassNames: string[] = []
-
-      BREAKPOINTS.forEach((bp) => {
-        const breakpoint = rest[bp]
-        delete rest[bp]
-
-        const infix = bp === 'xs' ? '' : `-${bp}`
-
-        if (typeof breakpoint === 'number') {
-          repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
-        }
-
-        if (typeof breakpoint === 'boolean') {
-          repsonsiveClassNames.push(`col${infix}`)
-        }
-      })
-
-      return (
-        <Component
-          className={classNames(
-            animation ? `placeholder-${animation}` : 'placeholder',
-            {
-              [`bg-${color}`]: color,
-              [`placeholder-${size}`]: size,
-            },
-            repsonsiveClassNames,
-            className,
-          )}
-          {...rest}
-          ref={ref}
-        >
-          {children}
-        </Component>
-      )
-    },
-  )
-
-CPlaceholder.propTypes = {
-  animation: PropTypes.oneOf(['glow', 'wave']),
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  size: PropTypes.oneOf(['xs', 'sm', 'lg']),
-}
-
-CPlaceholder.displayName = 'CPlaceholder'
diff --git a/packages/coreui-react/src/components/placeholder/__tests__/CPlaceholder.spec.tsx b/packages/coreui-react/src/components/placeholder/__tests__/CPlaceholder.spec.tsx
deleted file mode 100644
index 3bf5d73e..00000000
--- a/packages/coreui-react/src/components/placeholder/__tests__/CPlaceholder.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CPlaceholder } from '../index'
-
-test('loads and displays CPlaceholder component', async () => {
-  const { container } = render(<CPlaceholder color="primary" />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CPlaceholder customize', async () => {
-  const { container } = render(
-    <CPlaceholder animation="glow" className="bazinga" color="secondary" size="lg" sm={7} />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('bg-secondary')
-  expect(container.firstChild).toHaveClass('col-sm-7')
-  expect(container.firstChild).toHaveClass('placeholder-lg')
-  expect(container.firstChild).toHaveClass('placeholder-glow')
-})
diff --git a/packages/coreui-react/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.tsx.snap b/packages/coreui-react/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.tsx.snap
deleted file mode 100644
index 53def94c..00000000
--- a/packages/coreui-react/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CPlaceholder customize 1`] = `
-<div>
-  <span
-    class="placeholder-glow bg-secondary placeholder-lg col-sm-7 bazinga"
-  />
-</div>
-`;
-
-exports[`loads and displays CPlaceholder component 1`] = `
-<div>
-  <span
-    class="placeholder bg-primary"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/placeholder/index.ts b/packages/coreui-react/src/components/placeholder/index.ts
deleted file mode 100644
index 2d8d709f..00000000
--- a/packages/coreui-react/src/components/placeholder/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CPlaceholder } from './CPlaceholder'
-
-export { CPlaceholder }
diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx
deleted file mode 100644
index a6355ae3..00000000
--- a/packages/coreui-react/src/components/popover/CPopover.tsx
+++ /dev/null
@@ -1,319 +0,0 @@
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from 'react'
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import type { Options } from '@popperjs/core'
-
-import { CConditionalPortal } from '../conditional-portal'
-import { useForkedRef, usePopper } from '../../hooks'
-import { fallbackPlacementsPropType, triggerPropType } from '../../props'
-import type { Placements, Triggers } from '../../types'
-import { executeAfterTransition, getRTLPlacement } from '../../utils'
-
-export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
-  /**
-   * Adds a fade transition animation to the React Popover.
-   *
-   * @since 4.9.0
-   */
-  animation?: boolean
-
-  /**
-   * Custom class name(s) for additional styling.
-   */
-  className?: string
-
-  /**
-   * Defines the container element to which the React Popover is appended.
-   * Accepts:
-   * - A DOM element (`HTMLElement` or `DocumentFragment`)
-   * - A function that returns a single element
-   * - `null` (defaults to `document.body`)
-   *
-   * @example
-   * <CPopover container={document.getElementById('my-container')}>...</CPopover>
-   *
-   * @default document.body
-   * @since 4.11.0
-   */
-  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
-
-  /**
-   * Main content of the React Popover. It can be a string or any valid React node.
-   */
-  content: ReactNode | string
-
-  /**
-   * Delay (in milliseconds) before showing or hiding the React Popover.
-   * - If a number is provided, that delay applies to both "show" and "hide".
-   * - If an object is provided, use separate values for "show" and "hide".
-   *
-   * @example
-   * // Delays 300ms on both show and hide
-   * <CPopover delay={300}>...</CPopover>
-   *
-   * // Delays 500ms on show and 100ms on hide
-   * <CPopover delay={{ show: 500, hide: 100 }}>...</CPopover>
-   *
-   * @since 4.9.0
-   */
-  delay?: number | { show: number; hide: number }
-
-  /**
-   * Specifies the fallback placements when the preferred `placement` cannot be met.
-   *
-   * @type 'top', 'right', 'bottom', 'left' | ('top', 'right', 'bottom', 'left')[]
-   * @since 4.9.0
-   */
-  fallbackPlacements?: Placements | Placements[]
-
-  /**
-   * Offset of the React Popover relative to its toggle element, in the form `[x, y]`.
-   *
-   * @example
-   * // Offset the menu 0px in X and 10px in Y direction
-   * <CPopover offset={[0, 10]}>...</CPopover>
-   *
-   * // Offset the menu 5px in both X and Y direction
-   * <CPopover offset={[5, 5]}>...</CPopover>
-   */
-  offset?: [number, number]
-
-  /**
-   * Invoked when the React Popover is about to hide.
-   */
-  onHide?: () => void
-
-  /**
-   * Invoked when the React Popover is about to show.
-   */
-  onShow?: () => void
-
-  /**
-   * Placement of the React Popover. Popper.js may override this based on available space.
-   */
-  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
-
-  /**
-   * Allows customization of the Popper.js configuration for the React Popover.
-   * Can be an object or a function returning a modified configuration.
-   * [Learn more](https://popper.js.org/docs/v2/constructors/#options)
-   *
-   * @example
-   * <CPopover
-   *   popperConfig={(defaultConfig) => ({
-   *     ...defaultConfig,
-   *     strategy: 'fixed',
-   *     modifiers: [
-   *       ...defaultConfig.modifiers,
-   *       { name: 'computeStyles', options: { adaptive: false } },
-   *     ],
-   *   })}
-   * >...</CPopover>
-   *
-   * @since 5.5.0
-   */
-  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
-
-  /**
-   * Title for the React Popover header. Can be a string or any valid React node.
-   */
-  title?: ReactNode | string
-
-  /**
-   * Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.
-   *
-   * @example
-   * // Hover-only popover
-   * <CPopover trigger="hover">...</CPopover>
-   *
-   * // Hover + click combined
-   * <CPopover trigger={['hover', 'click']}>...</CPopover>
-   *
-   * @type 'hover' | 'focus' | 'click' | ('hover' | 'focus' | 'click')[]
-   */
-  trigger?: Triggers | Triggers[]
-
-  /**
-   * Controls the visibility of the React Popover.
-   * - `true` shows the popover.
-   * - `false` hides the popover.
-   */
-  visible?: boolean
-}
-
-export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
-  (
-    {
-      children,
-      animation = true,
-      className,
-      container,
-      content,
-      delay = 0,
-      fallbackPlacements = ['top', 'right', 'bottom', 'left'],
-      offset = [0, 8],
-      onHide,
-      onShow,
-      placement = 'top',
-      popperConfig,
-      title,
-      trigger = 'click',
-      visible,
-      ...rest
-    },
-    ref
-  ) => {
-    const popoverRef = useRef<HTMLDivElement>(null)
-    const togglerRef = useRef(null)
-    const forkedRef = useForkedRef(ref, popoverRef)
-
-    const id = `popover${useId()}`
-    const [mounted, setMounted] = useState(false)
-    const [_visible, setVisible] = useState(visible)
-
-    const { initPopper, destroyPopper } = usePopper()
-
-    const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
-
-    const defaultPopperConfig: Partial<Options> = {
-      modifiers: [
-        { name: 'arrow', options: { element: '.popover-arrow' } },
-        { name: 'flip', options: { fallbackPlacements } },
-        { name: 'offset', options: { offset } },
-      ],
-      placement: getRTLPlacement(placement, togglerRef.current),
-    }
-
-    const computedPopperConfig: Partial<Options> = {
-      ...defaultPopperConfig,
-      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
-    }
-
-    useEffect(() => {
-      if (visible) {
-        handleShow()
-        return
-      }
-
-      handleHide()
-    }, [visible])
-
-    useEffect(() => {
-      if (mounted && togglerRef.current && popoverRef.current) {
-        initPopper(togglerRef.current, popoverRef.current, computedPopperConfig)
-        setTimeout(() => {
-          setVisible(true)
-        }, _delay.show)
-
-        return
-      }
-
-      if (!mounted && togglerRef.current && popoverRef.current) {
-        destroyPopper()
-      }
-    }, [mounted])
-
-    useEffect(() => {
-      if (!_visible && togglerRef.current && popoverRef.current) {
-        executeAfterTransition(() => {
-          setMounted(false)
-        }, popoverRef.current)
-      }
-    }, [_visible])
-
-    const handleShow = () => {
-      setMounted(true)
-      if (onShow) {
-        onShow()
-      }
-    }
-
-    const handleHide = () => {
-      setTimeout(() => {
-        setVisible(false)
-        if (onHide) {
-          onHide()
-        }
-      }, _delay.hide)
-    }
-
-    return (
-      <>
-        {React.cloneElement(children as React.ReactElement<any>, {
-          ...(_visible && {
-            'aria-describedby': id,
-          }),
-          ref: togglerRef,
-          ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => (_visible ? handleHide() : handleShow()),
-          }),
-          ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => handleShow(),
-            onBlur: () => handleHide(),
-          }),
-          ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => handleShow(),
-            onMouseLeave: () => handleHide(),
-          }),
-        })}
-        <CConditionalPortal container={container} portal={true}>
-          {mounted && (
-            <div
-              className={classNames(
-                'popover',
-                'bs-popover-auto',
-                {
-                  fade: animation,
-                  show: _visible,
-                },
-                className
-              )}
-              id={id}
-              ref={forkedRef}
-              role="tooltip"
-              {...rest}
-            >
-              <div className="popover-arrow"></div>
-              <div className="popover-header">{title}</div>
-              <div className="popover-body">{content}</div>
-            </div>
-          )}
-        </CConditionalPortal>
-      </>
-    )
-  }
-)
-
-CPopover.propTypes = {
-  animation: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  container: PropTypes.any,
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  delay: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.shape({
-      show: PropTypes.number.isRequired,
-      hide: PropTypes.number.isRequired,
-    }),
-  ]),
-  fallbackPlacements: fallbackPlacementsPropType,
-  offset: PropTypes.any, // TODO: find good proptype
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
-  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
-  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  trigger: triggerPropType,
-  visible: PropTypes.bool,
-}
-
-CPopover.displayName = 'CPopover'
diff --git a/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx b/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
deleted file mode 100644
index 4adab9ce..00000000
--- a/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react'
-import { act, cleanup, render, fireEvent, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-
-import { CButton } from '../../button'
-import { CPopover } from '../index'
-
-let container: HTMLDivElement | null = null
-
-beforeEach(() => {
-  container = document.createElement('div')
-  document.body.appendChild(container)
-})
-
-afterEach(() => {
-  cleanup()
-})
-
-test('loads and displays CPopover component', async () => {
-  const { container } = render(
-    <CPopover content="A">
-      <CButton color="primary">Test</CButton>
-    </CPopover>
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CPopover customize', async () => {
-  jest.useFakeTimers()
-
-  render(
-    <CPopover content="content" title="title" trigger="click" placement="right">
-      <CButton color="primary">Test</CButton>
-    </CPopover>,
-    { container: container! }
-  )
-
-  const btn = screen.getByRole('button', { name: /test/i })
-
-  act(() => {
-    fireEvent.click(btn)
-    jest.runAllTimers()
-  })
-
-  expect(document.querySelector('.popover')).toBeInTheDocument()
-  expect(document.querySelector('.bs-popover-auto')).toBeInTheDocument()
-  expect(document.querySelector('.popover-arrow')).toBeInTheDocument()
-  expect(document.querySelector('.popover-header')).toBeInTheDocument()
-  expect(document.querySelector('.popover-body')).toBeInTheDocument()
-
-  expect(document.querySelector('.popover-header')?.innerHTML).toBe('title')
-  expect(document.querySelector('.popover-body')?.innerHTML).toBe('content')
-
-  jest.useRealTimers()
-})
-
-test('CPopover onShow and onHide', async () => {
-  jest.useFakeTimers()
-
-  render(
-    <CPopover content="content" title="title" trigger="click" placement="right" visible={true}>
-      <CButton color="primary">Test</CButton>
-    </CPopover>,
-    { container: container! }
-  )
-
-  const onShow = jest.fn()
-  const onHide = jest.fn()
-
-  const btn = screen.getByRole('button', { name: /test/i })
-
-  expect(onShow).toHaveBeenCalledTimes(0)
-  expect(onHide).toHaveBeenCalledTimes(0)
-
-  act(() => {
-    fireEvent.click(btn)
-    jest.runAllTimers()
-  })
-
-  expect(onShow).toHaveBeenCalledTimes(1)
-  expect(onHide).toHaveBeenCalledTimes(0)
-
-  act(() => {
-    fireEvent.click(btn)
-    jest.runAllTimers()
-  })
-
-  expect(onShow).toHaveBeenCalledTimes(1)
-  expect(onHide).toHaveBeenCalledTimes(1)
-
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap b/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
deleted file mode 100644
index 22dfe0d2..00000000
--- a/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CPopover component 1`] = `
-<div>
-  <button
-    class="btn btn-primary"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/popover/index.ts b/packages/coreui-react/src/components/popover/index.ts
deleted file mode 100644
index af7ef771..00000000
--- a/packages/coreui-react/src/components/popover/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CPopover } from './CPopover'
-
-export { CPopover }
diff --git a/packages/coreui-react/src/components/progress/CProgress.tsx b/packages/coreui-react/src/components/progress/CProgress.tsx
deleted file mode 100644
index 99ab990e..00000000
--- a/packages/coreui-react/src/components/progress/CProgress.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CProgressStackedContext } from './CProgressStackedContext'
-import { CProgressBar, CProgressBarProps } from './CProgressBar'
-
-export interface CProgressProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>,
-    CProgressBarProps {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
-   */
-  height?: number
-  /**
-   * A string of all className you want applied to the `<CProgressBar/>` component.
-   *
-   * @since 4.9.0
-   */
-  progressBarClassName?: string
-  /**
-   * Makes progress bar thinner.
-   */
-  thin?: boolean
-  /**
-   * The percent to progress the ProgressBar (out of 100).
-   */
-  value?: number
-  /**
-   * Change the default color to white.
-   */
-  white?: boolean
-}
-
-export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
-  ({ children, className, height, progressBarClassName, thin, value, white, ...rest }, ref) => {
-    const { stacked } = useContext(CProgressStackedContext)
-
-    return (
-      <div
-        className={classNames(
-          'progress',
-          {
-            'progress-thin': thin,
-            'progress-white': white,
-          },
-          className,
-        )}
-        {...(value !== undefined && {
-          role: 'progressbar',
-          'aria-valuenow': value,
-          'aria-valuemin': 0,
-          'aria-valuemax': 100,
-        })}
-        style={{
-          ...(height ? { height: `${height}px` } : {}),
-          ...(stacked ? { width: `${value}%` } : {}),
-        }}
-        ref={ref}
-      >
-        {React.Children.toArray(children).some(
-          // @ts-expect-error displayName is set in the CProgressBar component
-          (child) => child.type && child.type.displayName === 'CProgressBar',
-        ) ? (
-          React.Children.map(children, (child) => {
-            // @ts-expect-error displayName is set in the CProgressBar component
-            if (React.isValidElement(child) && child.type.displayName === 'CProgressBar') {
-              return React.cloneElement(child, {
-                ...(value && { value: value }),
-                ...rest,
-              })
-            }
-
-            return
-          })
-        ) : (
-          <CProgressBar
-            {...(progressBarClassName && { className: progressBarClassName })}
-            value={value}
-            {...rest}
-          >
-            {children}
-          </CProgressBar>
-        )}
-      </div>
-    )
-  },
-)
-
-CProgress.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  height: PropTypes.number,
-  progressBarClassName: PropTypes.string,
-  thin: PropTypes.bool,
-  value: PropTypes.number,
-  white: PropTypes.bool,
-}
-
-CProgress.displayName = 'CProgress'
diff --git a/packages/coreui-react/src/components/progress/CProgressBar.tsx b/packages/coreui-react/src/components/progress/CProgressBar.tsx
deleted file mode 100644
index 70cf5efa..00000000
--- a/packages/coreui-react/src/components/progress/CProgressBar.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-import { CProgressStackedContext } from './CProgressStackedContext'
-
-export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Use to animate the stripes right to left via CSS3 animations.
-   */
-  animated?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * The percent to progress the ProgressBar.
-   */
-  value?: number
-  /**
-   * Set the progress bar variant to optional striped.
-   */
-  variant?: 'striped'
-}
-
-export const CProgressBar = forwardRef<HTMLDivElement, CProgressBarProps>(
-  ({ children, animated, className, color, value = 0, variant, ...rest }, ref) => {
-    const { stacked } = useContext(CProgressStackedContext)
-
-    return (
-      <div
-        className={classNames(
-          'progress-bar',
-          {
-            [`bg-${color}`]: color,
-            [`progress-bar-${variant}`]: variant,
-            'progress-bar-animated': animated,
-          },
-          className,
-        )}
-        {...(!stacked && { style: { width: `${value}%` } })}
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </div>
-    )
-  },
-)
-CProgressBar.propTypes = {
-  animated: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  value: PropTypes.number,
-  variant: PropTypes.oneOf(['striped']),
-}
-
-CProgressBar.displayName = 'CProgressBar'
diff --git a/packages/coreui-react/src/components/progress/CProgressStacked.tsx b/packages/coreui-react/src/components/progress/CProgressStacked.tsx
deleted file mode 100644
index 7a7d917f..00000000
--- a/packages/coreui-react/src/components/progress/CProgressStacked.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CProgressStackedContext } from './CProgressStackedContext'
-
-export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('progress-stacked', className)} ref={ref} {...rest}>
-        <CProgressStackedContext.Provider
-          value={{
-            stacked: true,
-          }}
-        >
-          {children}
-        </CProgressStackedContext.Provider>
-      </div>
-    )
-  }
-)
-
-CProgressStacked.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CProgressStacked.displayName = 'CProgressStacked'
diff --git a/packages/coreui-react/src/components/progress/CProgressStackedContext.ts b/packages/coreui-react/src/components/progress/CProgressStackedContext.ts
deleted file mode 100644
index a0ec61e9..00000000
--- a/packages/coreui-react/src/components/progress/CProgressStackedContext.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createContext } from 'react'
-
-export interface CProgressStackedContextProps {
-  stacked?: boolean
-}
-
-export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)
diff --git a/packages/coreui-react/src/components/progress/__tests__/CProgress.spec.tsx b/packages/coreui-react/src/components/progress/__tests__/CProgress.spec.tsx
deleted file mode 100644
index ee66e32c..00000000
--- a/packages/coreui-react/src/components/progress/__tests__/CProgress.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CProgress } from '../index'
-
-test('loads and displays CProgress component', async () => {
-  const { container } = render(<CProgress color="warning">Test</CProgress>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CProgress customize', async () => {
-  const { container } = render(
-    <CProgress className="bazinga" height={100} color="warning" value={50}>
-      Test
-    </CProgress>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('progress')
-  expect(container.firstChild).toHaveStyle(`height: 100px`)
-})
diff --git a/packages/coreui-react/src/components/progress/__tests__/CProgressBar.spec.tsx b/packages/coreui-react/src/components/progress/__tests__/CProgressBar.spec.tsx
deleted file mode 100644
index 1e084a2c..00000000
--- a/packages/coreui-react/src/components/progress/__tests__/CProgressBar.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CProgressBar } from '../index'
-
-test('loads and displays CProgressBar component', async () => {
-  const { container } = render(<CProgressBar color="warning">Test</CProgressBar>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CProgressBar customize', async () => {
-  const { container } = render(
-    <CProgressBar color="warning" className="bazinga" animated={true} value={50} variant="striped">
-      Test
-    </CProgressBar>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('progress-bar')
-
-  expect(container.firstChild).toHaveClass('bg-warning')
-  expect(container.firstChild).toHaveClass('progress-bar-striped')
-  expect(container.firstChild).toHaveClass('progress-bar-animated')
-  expect(container.firstChild).toHaveStyle(`width: 50%`)
-})
diff --git a/packages/coreui-react/src/components/progress/__tests__/__snapshots__/CProgress.spec.tsx.snap b/packages/coreui-react/src/components/progress/__tests__/__snapshots__/CProgress.spec.tsx.snap
deleted file mode 100644
index 6d566948..00000000
--- a/packages/coreui-react/src/components/progress/__tests__/__snapshots__/CProgress.spec.tsx.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CProgress customize 1`] = `
-<div>
-  <div
-    aria-valuemax="100"
-    aria-valuemin="0"
-    aria-valuenow="50"
-    class="progress bazinga"
-    role="progressbar"
-    style="height: 100px;"
-  >
-    <div
-      class="progress-bar bg-warning"
-      style="width: 50%;"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CProgress component 1`] = `
-<div>
-  <div
-    class="progress"
-  >
-    <div
-      class="progress-bar bg-warning"
-      style="width: 0%;"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.tsx.snap b/packages/coreui-react/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.tsx.snap
deleted file mode 100644
index bd11157d..00000000
--- a/packages/coreui-react/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CProgressBar customize 1`] = `
-<div>
-  <div
-    class="progress-bar bg-warning progress-bar-striped progress-bar-animated bazinga"
-    style="width: 50%;"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CProgressBar component 1`] = `
-<div>
-  <div
-    class="progress-bar bg-warning"
-    style="width: 0%;"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/progress/index.ts b/packages/coreui-react/src/components/progress/index.ts
deleted file mode 100644
index 29b68ae2..00000000
--- a/packages/coreui-react/src/components/progress/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CProgress } from './CProgress'
-import { CProgressBar } from './CProgressBar'
-import { CProgressStacked } from './CProgressStacked'
-
-export { CProgress, CProgressBar, CProgressStacked }
diff --git a/packages/coreui-react/src/components/sidebar/CSidebar.tsx b/packages/coreui-react/src/components/sidebar/CSidebar.tsx
deleted file mode 100644
index 519bc097..00000000
--- a/packages/coreui-react/src/components/sidebar/CSidebar.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CBackdrop } from '../backdrop'
-
-import { isInViewport } from '../../utils'
-import { useForkedRef } from '../../hooks'
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets if the color of text should be colored for a light or dark dark background.
-   *
-   * @type 'dark' | 'light'
-   */
-  colorScheme?: 'dark' | 'light'
-  /**
-   * Make sidebar narrow.
-   */
-  narrow?: boolean
-  /**
-   * Callback fired when the component requests to be hidden.
-   */
-  onHide?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * Event emitted after visibility of component changed.
-   */
-  onVisibleChange?: (visible: boolean) => void
-  /**
-   * Set sidebar to overlaid variant.
-   */
-  overlaid?: boolean
-  /**
-   * Components placement, there’s no default placement.
-   * @type 'start' | 'end'
-   */
-  placement?: 'start' | 'end'
-  /**
-   * Place sidebar in non-static positions.
-   */
-  position?: 'fixed' | 'sticky'
-  /**
-   * Size the component small, large, or extra large.
-   */
-  size?: 'sm' | 'lg' | 'xl'
-  /**
-   * Expand narrowed sidebar on hover.
-   */
-  unfoldable?: boolean
-  /**
-   * Toggle the visibility of sidebar component.
-   */
-  visible?: boolean
-}
-
-const isOnMobile = (element: HTMLDivElement) =>
-  Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
-
-export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> = forwardRef<
-  HTMLDivElement,
-  CSidebarProps
->(
-  (
-    {
-      children,
-      as: Component = 'div',
-      className,
-      colorScheme,
-      narrow,
-      onHide,
-      onShow,
-      onVisibleChange,
-      overlaid,
-      placement,
-      position,
-      size,
-      unfoldable,
-      visible,
-      ...rest
-    },
-    ref,
-  ) => {
-    const sidebarRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, sidebarRef)
-
-    const [inViewport, setInViewport] = useState<boolean>()
-    const [mobile, setMobile] = useState(false)
-    const [visibleMobile, setVisibleMobile] = useState<boolean>(false)
-    const [visibleDesktop, setVisibleDesktop] = useState<boolean>(
-      visible !== undefined ? visible : overlaid ? false : true,
-    )
-
-    useEffect(() => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      visible !== undefined && handleVisibleChange(visible)
-    }, [visible])
-
-    useEffect(() => {
-      inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport)
-      !inViewport && onHide && onHide()
-      inViewport && onShow && onShow()
-    }, [inViewport])
-
-    useEffect(() => {
-      mobile && setVisibleMobile(false)
-    }, [mobile])
-
-    useEffect(() => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
-
-      window.addEventListener('resize', handleResize)
-      window.addEventListener('mouseup', handleClickOutside)
-      window.addEventListener('keyup', handleKeyup)
-
-      sidebarRef.current?.addEventListener('mouseup', handleOnClick)
-      sidebarRef.current?.addEventListener('transitionend', () => {
-        sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
-      })
-
-      return () => {
-        window.removeEventListener('resize', handleResize)
-        window.removeEventListener('mouseup', handleClickOutside)
-        window.removeEventListener('keyup', handleKeyup)
-
-        sidebarRef.current?.removeEventListener('mouseup', handleOnClick)
-        sidebarRef.current?.removeEventListener('transitionend', () => {
-          sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
-        })
-      }
-    })
-
-    const handleVisibleChange = (visible: boolean) => {
-      if (mobile) {
-        setVisibleMobile(visible)
-        return
-      }
-
-      setVisibleDesktop(visible)
-    }
-
-    const handleHide = () => {
-      handleVisibleChange(false)
-    }
-
-    const handleResize = () => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
-    }
-
-    const handleKeyup = (event: Event) => {
-      if (
-        mobile &&
-        sidebarRef.current &&
-        !sidebarRef.current.contains(event.target as HTMLElement)
-      ) {
-        handleHide()
-      }
-    }
-    const handleClickOutside = (event: Event) => {
-      if (
-        mobile &&
-        sidebarRef.current &&
-        !sidebarRef.current.contains(event.target as HTMLElement)
-      ) {
-        handleHide()
-      }
-    }
-
-    const handleOnClick = (event: Event) => {
-      const target = event.target as HTMLAnchorElement
-      target &&
-        target.classList.contains('nav-link') &&
-        !target.classList.contains('nav-group-toggle') &&
-        mobile &&
-        handleHide()
-    }
-
-    return (
-      <>
-        <Component
-          className={classNames(
-            'sidebar',
-            {
-              [`sidebar-${colorScheme}`]: colorScheme,
-              'sidebar-narrow': narrow,
-              'sidebar-overlaid': overlaid,
-              [`sidebar-${placement}`]: placement,
-              [`sidebar-${position}`]: position,
-              [`sidebar-${size}`]: size,
-              'sidebar-narrow-unfoldable': unfoldable,
-              show: (mobile && visibleMobile) || (overlaid && visibleDesktop),
-              hide: visibleDesktop === false && !mobile && !overlaid,
-            },
-            className,
-          )}
-          {...rest}
-          ref={forkedRef}
-        >
-          {children}
-        </Component>
-        {typeof window !== 'undefined' &&
-          mobile &&
-          createPortal(
-            <CBackdrop className="sidebar-backdrop" visible={mobile && visibleMobile} />,
-            document.body,
-          )}
-      </>
-    )
-  },
-)
-
-CSidebar.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  colorScheme: PropTypes.oneOf(['dark', 'light']),
-  narrow: PropTypes.bool,
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
-  onVisibleChange: PropTypes.func,
-  overlaid: PropTypes.bool,
-  placement: PropTypes.oneOf(['start', 'end']),
-  position: PropTypes.oneOf(['fixed', 'sticky']),
-  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
-  unfoldable: PropTypes.bool,
-  visible: PropTypes.bool,
-}
-
-CSidebar.displayName = 'CSidebar'
\ No newline at end of file
diff --git a/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx b/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx
deleted file mode 100644
index 597818cd..00000000
--- a/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CSidebarBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   *
-   * @since 5.0.0
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CSidebarBrand: PolymorphicRefForwardingComponent<'a', CSidebarBrandProps> = forwardRef<
-  HTMLAnchorElement | HTMLDivElement,
-  CSidebarBrandProps
->(({ children, as: Component = 'a', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('sidebar-brand', className)} ref={ref} {...rest}>
-      {children}
-    </Component>
-  )
-})
-
-CSidebarBrand.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CSidebarBrand.displayName = 'CSidebarBrand'
diff --git a/packages/coreui-react/src/components/sidebar/CSidebarFooter.tsx b/packages/coreui-react/src/components/sidebar/CSidebarFooter.tsx
deleted file mode 100644
index 34e2f15c..00000000
--- a/packages/coreui-react/src/components/sidebar/CSidebarFooter.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CSidebarFooterProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CSidebarFooter = forwardRef<HTMLDivElement, CSidebarFooterProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('sidebar-footer', className)} ref={ref} {...rest}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CSidebarFooter.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CSidebarFooter.displayName = 'CSidebarFooter'
diff --git a/packages/coreui-react/src/components/sidebar/CSidebarHeader.tsx b/packages/coreui-react/src/components/sidebar/CSidebarHeader.tsx
deleted file mode 100644
index a18bfff1..00000000
--- a/packages/coreui-react/src/components/sidebar/CSidebarHeader.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CSidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CSidebarHeader = forwardRef<HTMLDivElement, CSidebarHeaderProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('sidebar-header', className)} ref={ref} {...rest}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CSidebarHeader.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CSidebarHeader.displayName = 'CSidebarHeader'
diff --git a/packages/coreui-react/src/components/sidebar/CSidebarNav.tsx b/packages/coreui-react/src/components/sidebar/CSidebarNav.tsx
deleted file mode 100644
index 46d07447..00000000
--- a/packages/coreui-react/src/components/sidebar/CSidebarNav.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, {
-  ElementType,
-  forwardRef,
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
-  useState,
-} from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import type { CNavGroupProps } from '../nav/CNavGroup'
-import type { CNavLinkProps } from '../nav/CNavLink'
-import type { CNavItemProps } from '../nav/CNavItem'
-
-import { CSidebarNavContext } from './CSidebarNavContext'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   *
-   * @since 5.0.0
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-const isNavElement = (
-  child: ReactNode
-): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
-  if (!React.isValidElement(child)) return false
-  const type = child.type as { displayName?: string }
-  return (
-    type.displayName === 'CNavGroup' ||
-    type.displayName === 'CNavLink' ||
-    type.displayName === 'CNavItem'
-  )
-}
-
-const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
-  return React.Children.map(children, (child, index) => {
-    if (!isNavElement(child)) {
-      return child
-    }
-
-    const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
-
-    if (child.props.children) {
-      const type = child.type as { displayName?: string }
-      const shouldUpdateId = type.displayName !== 'CNavItem'
-
-      return React.cloneElement(child, {
-        idx: _id,
-        children: recursiveClone(child.props.children, _id, shouldUpdateId),
-      })
-    }
-
-    return React.cloneElement(child, {
-      idx: _id,
-    })
-  })
-}
-
-export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavProps> = forwardRef<
-  HTMLUListElement,
-  CSidebarNavProps
->(({ children, as: Component = 'ul', className, ...rest }, ref) => {
-  const [visibleGroup, setVisibleGroup] = useState('')
-  const CNavContextValues = {
-    visibleGroup,
-    setVisibleGroup,
-  }
-
-  return (
-    <CSidebarNavContext.Provider value={CNavContextValues}>
-      <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
-        {recursiveClone(children)}
-      </Component>
-    </CSidebarNavContext.Provider>
-  )
-})
-
-CSidebarNav.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CSidebarNav.displayName = 'CSidebarNav'
diff --git a/packages/coreui-react/src/components/sidebar/CSidebarNavContext.ts b/packages/coreui-react/src/components/sidebar/CSidebarNavContext.ts
deleted file mode 100644
index a880a648..00000000
--- a/packages/coreui-react/src/components/sidebar/CSidebarNavContext.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createContext } from 'react'
-
-export interface CSidebarNavContextProps {
-  visibleGroup: string
-  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
-}
-
-export const CSidebarNavContext = createContext({} as CSidebarNavContextProps)
diff --git a/packages/coreui-react/src/components/sidebar/CSidebarToggler.tsx b/packages/coreui-react/src/components/sidebar/CSidebarToggler.tsx
deleted file mode 100644
index 487275b8..00000000
--- a/packages/coreui-react/src/components/sidebar/CSidebarToggler.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CSidebarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CSidebarToggler = forwardRef<HTMLButtonElement, CSidebarTogglerProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <button className={classNames('sidebar-toggler', className)} ref={ref} {...rest}>
-        {children}
-      </button>
-    )
-  },
-)
-
-CSidebarToggler.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CSidebarToggler.displayName = 'CSidebarToggler'
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebar.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebar.spec.tsx
deleted file mode 100644
index 5eb802a6..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebar.spec.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import {
-  CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
-} from '../index'
-
-test('loads and displays CSidebar component', async () => {
-  const { container } = render(<CSidebar>Test</CSidebar>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSidebar customize show', async () => {
-  const { container } = render(
-    <CSidebar
-      className="bazinga"
-      narrow={true}
-      position="fixed"
-      visible={true}
-      unfoldable={true}
-      overlaid={true}
-    >
-      Test
-    </CSidebar>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('sidebar')
-  expect(container.firstChild).toHaveClass('sidebar-narrow')
-  expect(container.firstChild).toHaveClass('sidebar-overlaid')
-  expect(container.firstChild).toHaveClass('sidebar-fixed')
-  expect(container.firstChild).toHaveClass('sidebar-narrow-unfoldable')
-  // expect(container.firstChild).toHaveClass('show')
-})
-
-test('CSidebar customize hide', async () => {
-  const { container } = render(
-    <CSidebar className="bazinga" position="sticky" visible={false} overlaid={false}>
-      Test
-    </CSidebar>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('sidebar')
-  expect(container.firstChild).toHaveClass('sidebar-sticky')
-})
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx
deleted file mode 100644
index 5c16bd3e..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CSidebarBrand } from '../index'
-
-test('loads and displays CSidebarBrand component', async () => {
-  const { container } = render(<CSidebarBrand color="primary">Test</CSidebarBrand>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSidebarBrand customize', async () => {
-  const { container } = render(<CSidebarBrand className="bazinga">Test</CSidebarBrand>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('sidebar-brand')
-})
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx
deleted file mode 100644
index 765fa278..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CSidebarFooter } from '../index'
-
-test('loads and displays CSidebarFooter component', async () => {
-  const { container } = render(<CSidebarFooter>Test</CSidebarFooter>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSidebarFooter customize', async () => {
-  const { container } = render(<CSidebarFooter className="bazinga">Test</CSidebarFooter>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('sidebar-footer')
-})
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx
deleted file mode 100644
index c41fd9f5..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CSidebarHeader } from '../index'
-
-test('loads and displays CSidebarHeader component', async () => {
-  const { container } = render(<CSidebarHeader>Test</CSidebarHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSidebarHeader customize', async () => {
-  const { container } = render(<CSidebarHeader className="bazinga">Test</CSidebarHeader>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('sidebar-header')
-})
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarNav.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarNav.spec.tsx
deleted file mode 100644
index 086f0dff..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarNav.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CSidebarNav } from '../index'
-
-test('loads and displays CSidebarNav component', async () => {
-  const { container } = render(<CSidebarNav>Test</CSidebarNav>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSidebarNav customize', async () => {
-  const { container } = render(<CSidebarNav className="bazinga">Test</CSidebarNav>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('sidebar-nav')
-})
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx b/packages/coreui-react/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx
deleted file mode 100644
index d2b69c2a..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CSidebarToggler } from '../index'
-
-test('loads and displays CSidebarToggler component', async () => {
-  const { container } = render(<CSidebarToggler />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSidebarToggler customize', async () => {
-  const { container } = render(<CSidebarToggler className="bazinga">Test</CSidebarToggler>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('sidebar-toggler')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.tsx.snap b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.tsx.snap
deleted file mode 100644
index 045e4f95..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSidebar customize hide 1`] = `
-<div>
-  <div
-    class="sidebar sidebar-sticky hide bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CSidebar customize show 1`] = `
-<div>
-  <div
-    class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-narrow-unfoldable show bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CSidebar component 1`] = `
-<div>
-  <div
-    class="sidebar"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap
deleted file mode 100644
index a307004e..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSidebarBrand customize 1`] = `
-<div>
-  <a
-    class="sidebar-brand bazinga"
-  >
-    Test
-  </a>
-</div>
-`;
-
-exports[`loads and displays CSidebarBrand component 1`] = `
-<div>
-  <a
-    class="sidebar-brand"
-    color="primary"
-  >
-    Test
-  </a>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.tsx.snap b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.tsx.snap
deleted file mode 100644
index fa15ad34..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSidebarFooter customize 1`] = `
-<div>
-  <div
-    class="sidebar-footer bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CSidebarFooter component 1`] = `
-<div>
-  <div
-    class="sidebar-footer"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.tsx.snap b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.tsx.snap
deleted file mode 100644
index 09d19bfd..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSidebarHeader customize 1`] = `
-<div>
-  <div
-    class="sidebar-header bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CSidebarHeader component 1`] = `
-<div>
-  <div
-    class="sidebar-header"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap
deleted file mode 100644
index 4dd9cd96..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSidebarNav customize 1`] = `
-<div>
-  <ul
-    class="sidebar-nav bazinga"
-  >
-    Test
-  </ul>
-</div>
-`;
-
-exports[`loads and displays CSidebarNav component 1`] = `
-<div>
-  <ul
-    class="sidebar-nav"
-  >
-    Test
-  </ul>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.tsx.snap b/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.tsx.snap
deleted file mode 100644
index 269f7b73..00000000
--- a/packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSidebarToggler customize 1`] = `
-<div>
-  <button
-    class="sidebar-toggler bazinga"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CSidebarToggler component 1`] = `
-<div>
-  <button
-    class="sidebar-toggler"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/sidebar/index.ts b/packages/coreui-react/src/components/sidebar/index.ts
deleted file mode 100644
index 12a076d2..00000000
--- a/packages/coreui-react/src/components/sidebar/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { CSidebar } from './CSidebar'
-import { CSidebarBrand } from './CSidebarBrand'
-import { CSidebarFooter } from './CSidebarFooter'
-import { CSidebarToggler } from './CSidebarToggler'
-import { CSidebarHeader } from './CSidebarHeader'
-import { CSidebarNav } from './CSidebarNav'
-
-export { CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav }
diff --git a/packages/coreui-react/src/components/spinner/CSpinner.tsx b/packages/coreui-react/src/components/spinner/CSpinner.tsx
deleted file mode 100644
index c158f86f..00000000
--- a/packages/coreui-react/src/components/spinner/CSpinner.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CSpinnerProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Size the component small.
-   */
-  size?: 'sm'
-  /**
-   * Set the button variant to an outlined button or a ghost button.
-   */
-  variant?: 'border' | 'grow'
-  /**
-   * Set visually hidden label for accessibility purposes.
-   */
-  visuallyHiddenLabel?: string
-}
-
-export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> = forwardRef<
-  HTMLDivElement | HTMLSpanElement,
-  CSpinnerProps
->(
-  (
-    {
-      as: Component = 'div',
-      className,
-      color,
-      size,
-      variant = 'border',
-      visuallyHiddenLabel = 'Loading...',
-      ...rest
-    },
-    ref,
-  ) => {
-    return (
-      <Component
-        className={classNames(
-          `spinner-${variant}`,
-          {
-            [`spinner-${variant}-${size}`]: size,
-            [`text-${color}`]: color,
-          },
-          className,
-        )}
-        role="status"
-        {...rest}
-        ref={ref}
-      >
-        <span className="visually-hidden">{visuallyHiddenLabel}</span>
-      </Component>
-    )
-  },
-)
-
-CSpinner.propTypes = {
-  as: PropTypes.string,
-  className: PropTypes.string,
-  color: colorPropType,
-  size: PropTypes.oneOf(['sm']),
-  variant: PropTypes.oneOf(['border', 'grow']),
-  visuallyHiddenLabel: PropTypes.string,
-}
-
-CSpinner.displayName = 'CSpinner'
diff --git a/packages/coreui-react/src/components/spinner/__tests__/CSpinner.spec.tsx b/packages/coreui-react/src/components/spinner/__tests__/CSpinner.spec.tsx
deleted file mode 100644
index 27a8e65b..00000000
--- a/packages/coreui-react/src/components/spinner/__tests__/CSpinner.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CSpinner } from '../index'
-
-test('loads and displays CSpinner component', async () => {
-  const { container } = render(<CSpinner>Test</CSpinner>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSpinner customize', async () => {
-  const { container } = render(
-    <CSpinner className="bazinga" color="warning" as="h3" size="sm" variant="grow">
-      Test
-    </CSpinner>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('spinner-grow')
-  expect(container.firstChild).toHaveClass('text-warning')
-  expect(container.firstChild).toHaveClass('spinner-grow-sm')
-})
diff --git a/packages/coreui-react/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.tsx.snap b/packages/coreui-react/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.tsx.snap
deleted file mode 100644
index 44888fc5..00000000
--- a/packages/coreui-react/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSpinner customize 1`] = `
-<div>
-  <h3
-    class="spinner-grow spinner-grow-sm text-warning bazinga"
-    role="status"
-  >
-    <span
-      class="visually-hidden"
-    >
-      Loading...
-    </span>
-  </h3>
-</div>
-`;
-
-exports[`loads and displays CSpinner component 1`] = `
-<div>
-  <div
-    class="spinner-border"
-    role="status"
-  >
-    <span
-      class="visually-hidden"
-    >
-      Loading...
-    </span>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/spinner/index.ts b/packages/coreui-react/src/components/spinner/index.ts
deleted file mode 100644
index 2c23f866..00000000
--- a/packages/coreui-react/src/components/spinner/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CSpinner } from './CSpinner'
-
-export { CSpinner }
diff --git a/packages/coreui-react/src/components/table/CTable.tsx b/packages/coreui-react/src/components/table/CTable.tsx
deleted file mode 100644
index 580b9514..00000000
--- a/packages/coreui-react/src/components/table/CTable.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import React, { forwardRef, TableHTMLAttributes, useMemo } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CTableHead, CTableHeadProps } from './CTableHead'
-import { CTableHeaderCell } from './CTableHeaderCell'
-import { CTableBody } from './CTableBody'
-import { CTableDataCell } from './CTableDataCell'
-import { CTableRow } from './CTableRow'
-import { CTableFoot, CTableFootProps } from './CTableFoot'
-import { CTableCaption } from './CTableCaption'
-import { CTableResponsiveWrapper } from './CTableResponsiveWrapper'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-import { getColumnLabel, getColumnNames } from './utils'
-import type { Column, FooterItem, Item } from './types'
-
-export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'align'> {
-  /**
-   * Set the vertical aligment.
-   */
-  align?: 'bottom' | 'middle' | 'top' | string
-  /**
-   * Sets the border color of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  borderColor?: Colors
-  /**
-   * Add borders on all sides of the table and cells.
-   */
-  bordered?: boolean
-  /**
-   * Remove borders on all sides of the table and cells.
-   */
-  borderless?: boolean
-  /**
-   * Put the caption on the top if you set `caption="top"` of the table or set the text of the table caption.
-   */
-  caption?: 'top' | string
-  /**
-   * Set the text of the table caption and the caption on the top of the table.
-   *
-   * @since 4.3.0
-   */
-  captionTop?: string
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * 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')
-   *
-   * In columns prop each array item represents one column. Item might be specified in two ways:
-   * String: each item define column name equal to item value.
-   * Object: item is object with following keys available as column configuration:
-   * - key (required)(String) - define column name equal to item key.
-   * - 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.
-   * - _props (Object) - adds classes to all cels in column, ex. `_props: { scope: 'col', className: 'custom-class' }`,
-   * - _style (Object) - adds styles to the column header (useful for defining widths)
-   *
-   * @since 4.3.0
-   */
-  columns?: (string | Column)[]
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Array of objects or strings, where each element represents one cell in the table footer.
-   *
-   * Example items:
-   * `['FooterCell', 'FooterCell', 'FooterCell']`
-   * or
-   * `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`
-   *
-   * @since 4.3.0
-   */
-  footer?: (FooterItem | string)[]
-  /**
-   * Enable a hover state on table rows within a `<CTableBody>`.
-   */
-  hover?: boolean
-  /**
-   * 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'.
-   *
-   * Example item:
-   * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
-   *
-   * @since 4.3.0
-   */
-  items?: Item[]
-  /**
-   * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
-   */
-  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-  /**
-   * Make table more compact by cutting all cell `padding` in half.
-   */
-  small?: boolean
-  /**
-   * Add zebra-striping to any table row within the `<CTableBody>`.
-   */
-  striped?: boolean
-  /**
-   * Add zebra-striping to any table column.
-   *
-   * @since 4.3.0
-   */
-  stripedColumns?: boolean
-  /**
-   * Properties that will be passed to the table footer component.
-   *
-   * @link https://coreui.io/react/docs/components/table/#ctablefoot
-   * @since 4.3.0
-   */
-  tableFootProps?: CTableFootProps
-  /**
-   * Properties that will be passed to the table head component.
-   *
-   * @link https://coreui.io/react/docs/components/table/#ctablehead
-   * @since 4.3.0
-   */
-  tableHeadProps?: CTableHeadProps
-}
-
-export const CTable = forwardRef<HTMLTableElement, CTableProps>(
-  (
-    {
-      children,
-      align,
-      borderColor,
-      bordered,
-      borderless,
-      caption,
-      captionTop,
-      className,
-      color,
-      columns,
-      footer,
-      hover,
-      items,
-      responsive,
-      small,
-      striped,
-      stripedColumns,
-      tableFootProps,
-      tableHeadProps,
-      ...rest
-    },
-    ref,
-  ) => {
-    const columnNames = useMemo(() => getColumnNames(columns, items), [columns, items])
-
-    return (
-      <CTableResponsiveWrapper responsive={responsive}>
-        <table
-          className={classNames(
-            'table',
-            {
-              [`align-${align}`]: align,
-              [`border-${borderColor}`]: borderColor,
-              [`caption-top`]: captionTop || caption === 'top',
-              'table-bordered': bordered,
-              'table-borderless': borderless,
-              [`table-${color}`]: color,
-              'table-hover': hover,
-              'table-sm': small,
-              'table-striped': striped,
-              'table-striped-columns': stripedColumns,
-            },
-            className,
-          )}
-          {...rest}
-          ref={ref}
-        >
-          {((caption && caption !== 'top') || captionTop) && (
-            <CTableCaption>{caption || captionTop}</CTableCaption>
-          )}
-          {columns && (
-            <CTableHead {...tableHeadProps}>
-              <CTableRow>
-                {columns.map((column: Column, index: number) => (
-                  <CTableHeaderCell
-                    {...(column._props && { ...column._props })}
-                    {...(column._style && { style: { ...column._style } })}
-                    key={index}
-                  >
-                    {getColumnLabel(column)}
-                  </CTableHeaderCell>
-                ))}
-              </CTableRow>
-            </CTableHead>
-          )}
-          {items && (
-            <CTableBody>
-              {items.map((item: Item, index: number) => (
-                <CTableRow {...(item._props && { ...item._props })} key={index}>
-                  {columnNames &&
-                    columnNames.map((colName: string, index: number) => {
-                      // eslint-disable-next-line unicorn/no-negated-condition
-                      return item[colName] !== undefined ? (
-                        <CTableDataCell
-                          {...(item._cellProps && {
-                            ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-                            ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-                          })}
-                          key={index}
-                        >
-                          {item[colName]}
-                        </CTableDataCell>
-                      ) : null
-                    })}
-                </CTableRow>
-              ))}
-            </CTableBody>
-          )}
-          {children}
-          {footer && (
-            <CTableFoot {...tableFootProps}>
-              <CTableRow>
-                {footer.map((item: FooterItem | string, index: number) => (
-                  <CTableDataCell
-                    {...(typeof item === 'object' && item._props && { ...item._props })}
-                    key={index}
-                  >
-                    {typeof item === 'object' ? item.label : item}
-                  </CTableDataCell>
-                ))}
-              </CTableRow>
-            </CTableFoot>
-          )}
-        </table>
-      </CTableResponsiveWrapper>
-    )
-  },
-)
-
-CTable.propTypes = {
-  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
-  borderColor: PropTypes.string,
-  bordered: PropTypes.bool,
-  borderless: PropTypes.bool,
-  caption: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['top'])]),
-  captionTop: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  columns: PropTypes.array,
-  footer: PropTypes.array,
-  hover: PropTypes.bool,
-  items: PropTypes.array,
-  responsive: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
-  ]),
-  small: PropTypes.bool,
-  striped: PropTypes.bool,
-  stripedColumns: PropTypes.bool,
-  tableFootProps: PropTypes.shape({ ...CTableFoot.propTypes }),
-  tableHeadProps: PropTypes.shape({ ...CTableHead.propTypes }),
-}
-
-CTable.displayName = 'CTable'
diff --git a/packages/coreui-react/src/components/table/CTableBody.tsx b/packages/coreui-react/src/components/table/CTableBody.tsx
deleted file mode 100644
index 893cd5f1..00000000
--- a/packages/coreui-react/src/components/table/CTableBody.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-}
-
-export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
-  ({ children, className, color, ...rest }, ref) => {
-    return (
-      <tbody
-        className={
-          classNames(
-            {
-              [`table-${color}`]: color,
-            },
-            className,
-          ) || undefined
-        }
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </tbody>
-    )
-  },
-)
-
-CTableBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-}
-
-CTableBody.displayName = 'CTableBody'
diff --git a/packages/coreui-react/src/components/table/CTableCaption.tsx b/packages/coreui-react/src/components/table/CTableCaption.tsx
deleted file mode 100644
index 3d2401f4..00000000
--- a/packages/coreui-react/src/components/table/CTableCaption.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-
-export const CTableCaption = forwardRef<
-  HTMLTableCaptionElement,
-  HTMLAttributes<HTMLTableCaptionElement>
->(({ children, ...props }, ref) => {
-  return (
-    <caption {...props} ref={ref}>
-      {children}
-    </caption>
-  )
-})
-
-CTableCaption.propTypes = {
-  children: PropTypes.node,
-}
-
-CTableCaption.displayName = 'CTableCaption'
diff --git a/packages/coreui-react/src/components/table/CTableDataCell.tsx b/packages/coreui-react/src/components/table/CTableDataCell.tsx
deleted file mode 100644
index 02a040aa..00000000
--- a/packages/coreui-react/src/components/table/CTableDataCell.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { forwardRef, TdHTMLAttributes, ThHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CTableDataCellProps
-  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
-    Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
-  /**
-   * Highlight a table row or cell.
-   */
-  active?: boolean
-  /**
-   * Set the vertical aligment.
-   */
-  align?: 'bottom' | 'middle' | 'top' | string
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * @ignore
-   */
-  colSpan?: number
-}
-
-export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellProps>(
-  ({ children, active, align, className, color, ...rest }, ref) => {
-    const Component = rest.scope ? 'th' : 'td'
-
-    return (
-      <Component
-        className={
-          classNames(
-            {
-              [`align-${align}`]: align,
-              'table-active': active,
-              [`table-${color}`]: color,
-            },
-            className,
-          ) || undefined
-        }
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  },
-)
-
-CTableDataCell.propTypes = {
-  active: PropTypes.bool,
-  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-}
-
-CTableDataCell.displayName = 'CTableDataCell'
diff --git a/packages/coreui-react/src/components/table/CTableFoot.tsx b/packages/coreui-react/src/components/table/CTableFoot.tsx
deleted file mode 100644
index dbbf8b50..00000000
--- a/packages/coreui-react/src/components/table/CTableFoot.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CTableFootProps extends HTMLAttributes<HTMLTableSectionElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-}
-
-export const CTableFoot = forwardRef<HTMLTableSectionElement, CTableFootProps>(
-  ({ children, className, color, ...rest }, ref) => {
-    return (
-      <tfoot
-        className={
-          classNames(
-            {
-              [`table-${color}`]: color,
-            },
-            className,
-          ) || undefined
-        }
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </tfoot>
-    )
-  },
-)
-
-CTableFoot.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-}
-
-CTableFoot.displayName = 'CTableFoot'
diff --git a/packages/coreui-react/src/components/table/CTableHead.tsx b/packages/coreui-react/src/components/table/CTableHead.tsx
deleted file mode 100644
index a8cff525..00000000
--- a/packages/coreui-react/src/components/table/CTableHead.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-}
-
-export const CTableHead = forwardRef<HTMLTableSectionElement, CTableHeadProps>(
-  ({ children, className, color, ...rest }, ref) => {
-    return (
-      <thead
-        className={
-          classNames(
-            {
-              [`table-${color}`]: color,
-            },
-            className,
-          ) || undefined
-        }
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </thead>
-    )
-  },
-)
-
-CTableHead.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-}
-
-CTableHead.displayName = 'CTableHead'
diff --git a/packages/coreui-react/src/components/table/CTableHeaderCell.tsx b/packages/coreui-react/src/components/table/CTableHeaderCell.tsx
deleted file mode 100644
index cf13571c..00000000
--- a/packages/coreui-react/src/components/table/CTableHeaderCell.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { forwardRef, ThHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-}
-
-export const CTableHeaderCell = forwardRef<HTMLTableCellElement, CTableHeaderCellProps>(
-  ({ children, className, color, ...rest }, ref) => {
-    return (
-      <th
-        className={
-          classNames(
-            {
-              [`table-${color}`]: color,
-            },
-            className,
-          ) || undefined
-        }
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </th>
-    )
-  },
-)
-
-CTableHeaderCell.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-}
-
-CTableHeaderCell.displayName = 'CTableHeaderCell'
diff --git a/packages/coreui-react/src/components/table/CTableResponsiveWrapper.tsx b/packages/coreui-react/src/components/table/CTableResponsiveWrapper.tsx
deleted file mode 100644
index 321c5d2f..00000000
--- a/packages/coreui-react/src/components/table/CTableResponsiveWrapper.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { FC, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-
-export interface CTableResponsiveWrapperProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
-   */
-  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-}
-
-export const CTableResponsiveWrapper: FC<CTableResponsiveWrapperProps> = ({
-  children,
-  responsive,
-  ...rest
-}) => {
-  return responsive ? (
-    <div
-      className={
-        typeof responsive === 'boolean' ? 'table-responsive' : `table-responsive-${responsive}`
-      }
-      {...rest}
-    >
-      {children}
-    </div>
-  ) : (
-    <>{children}</>
-  )
-}
-
-CTableResponsiveWrapper.propTypes = {
-  children: PropTypes.node,
-  responsive: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
-  ]),
-}
-
-CTableResponsiveWrapper.displayName = 'CTableResponsiveWrapper'
diff --git a/packages/coreui-react/src/components/table/CTableRow.tsx b/packages/coreui-react/src/components/table/CTableRow.tsx
deleted file mode 100644
index 9130ee17..00000000
--- a/packages/coreui-react/src/components/table/CTableRow.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
-  /**
-   * Highlight a table row or cell..
-   */
-  active?: boolean
-  /**
-   * Set the vertical aligment.
-   */
-  align?: 'bottom' | 'middle' | 'top' | string
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-}
-
-export const CTableRow = forwardRef<HTMLTableRowElement, CTableRowProps>(
-  ({ children, active, align, className, color, ...rest }, ref) => {
-    return (
-      <tr
-        className={
-          classNames(
-            {
-              [`align-${align}`]: align,
-              'table-active': active,
-              [`table-${color}`]: color,
-            },
-            className,
-          ) || undefined
-        }
-        {...rest}
-        ref={ref}
-      >
-        {children}
-      </tr>
-    )
-  },
-)
-
-CTableRow.propTypes = {
-  active: PropTypes.bool,
-  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-}
-
-CTableRow.displayName = 'CTableRow'
diff --git a/packages/coreui-react/src/components/table/__tests__/CTable.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTable.spec.tsx
deleted file mode 100644
index 6427b3a0..00000000
--- a/packages/coreui-react/src/components/table/__tests__/CTable.spec.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import {
-  CTable,
-  CTableCaption,
-  CTableHead,
-  CTableRow,
-  CTableHeaderCell,
-  CTableBody,
-  CTableDataCell,
-  CTableFoot,
-} from '../index'
-
-test('loads and displays CTable component', async () => {
-  const { container } = render(<CTable />)
-  expect(container).toMatchSnapshot()
-})
-
-test('loads and displays CTable component - new way', async () => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    'class',
-    {
-      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 } },
-    },
-  ]
-  const { container } = render(<CTable columns={columns} items={items} />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CTable customize', async () => {
-  const { container } = render(
-    <CTable
-      className="bazinga"
-      align="middle"
-      borderColor="primary"
-      bordered={true}
-      borderless={true}
-      caption="top"
-      color="info"
-      hover={true}
-      responsive="xl"
-      small={true}
-      striped={true}
-    >
-      <CTableBody>
-        <CTableRow>
-          <CTableDataCell>Test</CTableDataCell>
-        </CTableRow>
-      </CTableBody>
-    </CTable>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('table-responsive-xl')
-  if (container.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('table')
-    expect(container.firstChild.firstChild).toHaveClass('align-middle')
-    expect(container.firstChild.firstChild).toHaveClass('caption-top')
-    expect(container.firstChild.firstChild).toHaveClass('border-primary')
-    expect(container.firstChild.firstChild).toHaveClass('table-bordered')
-    expect(container.firstChild.firstChild).toHaveClass('table-borderless')
-    expect(container.firstChild.firstChild).toHaveClass('table-info')
-    expect(container.firstChild.firstChild).toHaveClass('table-hover')
-    expect(container.firstChild.firstChild).toHaveClass('table-sm')
-    expect(container.firstChild.firstChild).toHaveClass('table-striped')
-    expect(container.firstChild.firstChild).toHaveClass('bazinga')
-    expect(container.firstChild.firstChild).toHaveTextContent('Test')
-  }
-})
-
-test('CTable full example test', async () => {
-  const { container } = render(
-    <CTable caption="top">
-      <CTableCaption>List of users</CTableCaption>
-      <CTableHead>
-        <CTableRow>
-          <CTableHeaderCell>#</CTableHeaderCell>
-          <CTableHeaderCell>Class</CTableHeaderCell>
-          <CTableHeaderCell>Heading</CTableHeaderCell>
-          <CTableHeaderCell>Heading</CTableHeaderCell>
-        </CTableRow>
-      </CTableHead>
-      <CTableBody>
-        <CTableRow>
-          <CTableHeaderCell>1</CTableHeaderCell>
-          <CTableDataCell>Mark</CTableDataCell>
-          <CTableDataCell>Otto</CTableDataCell>
-          <CTableDataCell>@mdo</CTableDataCell>
-        </CTableRow>
-        <CTableRow>
-          <CTableHeaderCell>2</CTableHeaderCell>
-          <CTableDataCell>Jacob</CTableDataCell>
-          <CTableDataCell>Thornton</CTableDataCell>
-          <CTableDataCell>@fat</CTableDataCell>
-        </CTableRow>
-        <CTableRow>
-          <CTableHeaderCell>3</CTableHeaderCell>
-          <CTableDataCell>Larry</CTableDataCell>
-          <CTableDataCell>the Bird</CTableDataCell>
-          <CTableDataCell>@twitter</CTableDataCell>
-        </CTableRow>
-      </CTableBody>
-      <CTableFoot>
-        <CTableRow>
-          <CTableHeaderCell>#</CTableHeaderCell>
-          <CTableHeaderCell>Class</CTableHeaderCell>
-          <CTableHeaderCell>Heading</CTableHeaderCell>
-          <CTableHeaderCell>Heading</CTableHeaderCell>
-        </CTableRow>
-      </CTableFoot>
-    </CTable>,
-  )
-  expect(container).toMatchSnapshot()
-})
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableBody.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableBody.spec.tsx
deleted file mode 100644
index 093e3e0b..00000000
--- a/packages/coreui-react/src/components/table/__tests__/CTableBody.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableBody, CTableDataCell, CTableRow } from '../index'
-
-test('loads and displays CTableBody component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableBody />, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableBody customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableBody className="bazinga" color="info">
-      <CTableRow>
-        <CTableDataCell> Test</CTableDataCell>
-      </CTableRow>
-    </CTableBody>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('table-info')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableCaption.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableCaption.spec.tsx
deleted file mode 100644
index 607244c0..00000000
--- a/packages/coreui-react/src/components/table/__tests__/CTableCaption.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableCaption } from '../index'
-
-test('loads and displays CTableCaption component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableCaption />, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableCaption customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableCaption>Test</CTableCaption>, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableDataCell.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableDataCell.spec.tsx
deleted file mode 100644
index 08f0057b..00000000
--- a/packages/coreui-react/src/components/table/__tests__/CTableDataCell.spec.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableDataCell } from '../index'
-import { CTableBody } from '../CTableBody'
-import { CTableRow } from '../CTableRow'
-
-test('loads and displays CTableDataCell component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableBody>
-      <CTableRow>
-        <CTableDataCell />
-      </CTableRow>
-    </CTableBody>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableDataCell customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableBody>
-      <CTableRow>
-        <CTableDataCell className="bazinga" active={true} align="middle" color="info">
-          Test
-        </CTableDataCell>
-      </CTableRow>
-    </CTableBody>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('align-middle')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-active')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-info')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableFoot.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableFoot.spec.tsx
deleted file mode 100644
index 741d44de..00000000
--- a/packages/coreui-react/src/components/table/__tests__/CTableFoot.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableFoot, CTableHeaderCell, CTableRow } from '../index'
-
-test('loads and displays CTableFoot component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableFoot />, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableFoot customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableFoot className="bazinga" color="info">
-      <CTableRow>
-        <CTableHeaderCell>Test</CTableHeaderCell>
-      </CTableRow>
-    </CTableFoot>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('table-info')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableHead.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableHead.spec.tsx
deleted file mode 100644
index e9c65340..00000000
--- a/packages/coreui-react/src/components/table/__tests__/CTableHead.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableHead, CTableHeaderCell, CTableRow } from '../index'
-
-test('loads and displays CTableHead component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableHead />, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableHead customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableHead className="bazinga" color="info">
-      <CTableRow>
-        <CTableHeaderCell>Test</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('table-info')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableHeaderCell.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableHeaderCell.spec.tsx
deleted file mode 100644
index 27f409cb..00000000
--- a/packages/coreui-react/src/components/table/__tests__/CTableHeaderCell.spec.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableHead, CTableHeaderCell, CTableRow } from '../index'
-
-test('loads and displays CTableHeaderCell component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell />
-      </CTableRow>
-    </CTableHead>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableHeaderCell customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell className="bazinga" color="info">
-          Test
-        </CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-info')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/table/__tests__/CTableRow.spec.tsx b/packages/coreui-react/src/components/table/__tests__/CTableRow.spec.tsx
deleted file mode 100644
index 5f462d12..00000000
--- a/packages/coreui-react/src/components/table/__tests__/CTableRow.spec.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableBody, CTableHeaderCell, CTableRow } from '../index'
-
-test('loads and displays CTableRow component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableBody>
-      <CTableRow />
-    </CTableBody>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableRow customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableBody>
-      <CTableRow className="bazinga" active={true} align="middle" color="info">
-        <CTableHeaderCell>Test</CTableHeaderCell>
-      </CTableRow>
-    </CTableBody>,
-    {
-      container: document.body.appendChild(table),
-    },
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild?.firstChild).toHaveClass('align-middle')
-  expect(container.firstChild?.firstChild).toHaveClass('table-active')
-  expect(container.firstChild?.firstChild).toHaveClass('table-info')
-  expect(container.firstChild?.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTable.spec.tsx.snap b/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTable.spec.tsx.snap
deleted file mode 100644
index 7ca926fe..00000000
--- a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTable.spec.tsx.snap
+++ /dev/null
@@ -1,197 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTable customize 1`] = `
-<div>
-  <div
-    class="table-responsive-xl"
-  >
-    <table
-      class="table align-middle border-primary caption-top table-bordered table-borderless table-info table-hover table-sm table-striped bazinga"
-    >
-      <tbody>
-        <tr>
-          <td>
-            Test
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`CTable full example test 1`] = `
-<div>
-  <table
-    class="table caption-top"
-  >
-    <caption>
-      List of users
-    </caption>
-    <thead>
-      <tr>
-        <th>
-          #
-        </th>
-        <th>
-          Class
-        </th>
-        <th>
-          Heading
-        </th>
-        <th>
-          Heading
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th>
-          1
-        </th>
-        <td>
-          Mark
-        </td>
-        <td>
-          Otto
-        </td>
-        <td>
-          @mdo
-        </td>
-      </tr>
-      <tr>
-        <th>
-          2
-        </th>
-        <td>
-          Jacob
-        </td>
-        <td>
-          Thornton
-        </td>
-        <td>
-          @fat
-        </td>
-      </tr>
-      <tr>
-        <th>
-          3
-        </th>
-        <td>
-          Larry
-        </td>
-        <td>
-          the Bird
-        </td>
-        <td>
-          @twitter
-        </td>
-      </tr>
-    </tbody>
-    <tfoot>
-      <tr>
-        <th>
-          #
-        </th>
-        <th>
-          Class
-        </th>
-        <th>
-          Heading
-        </th>
-        <th>
-          Heading
-        </th>
-      </tr>
-    </tfoot>
-  </table>
-</div>
-`;
-
-exports[`loads and displays CTable component - new way 1`] = `
-<div>
-  <table
-    class="table"
-  >
-    <thead>
-      <tr>
-        <th
-          scope="col"
-        >
-          #
-        </th>
-        <th>
-          Class
-        </th>
-        <th
-          scope="col"
-        >
-          Heading
-        </th>
-        <th
-          scope="col"
-        >
-          Heading
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th
-          scope="row"
-        >
-          1
-        </th>
-        <td>
-          Mark
-        </td>
-        <td>
-          Otto
-        </td>
-        <td>
-          @mdo
-        </td>
-      </tr>
-      <tr>
-        <th
-          scope="row"
-        >
-          2
-        </th>
-        <td>
-          Jacob
-        </td>
-        <td>
-          Thornton
-        </td>
-        <td>
-          @fat
-        </td>
-      </tr>
-      <tr>
-        <th
-          scope="row"
-        >
-          3
-        </th>
-        <td
-          colspan="2"
-        >
-          Larry the Bird
-        </td>
-        <td>
-          @twitter
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`loads and displays CTable component 1`] = `
-<div>
-  <table
-    class="table"
-  />
-</div>
-`;
diff --git a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableBody.spec.tsx.snap b/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableBody.spec.tsx.snap
deleted file mode 100644
index 78a587ba..00000000
--- a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableBody.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTableBody customize 1`] = `
-<table>
-  <tbody
-    class="table-info bazinga"
-  >
-    <tr>
-      <td>
-         Test
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`loads and displays CTableBody component 1`] = `
-<table>
-  <tbody />
-</table>
-`;
diff --git a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableCaption.spec.tsx.snap b/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableCaption.spec.tsx.snap
deleted file mode 100644
index f18f9542..00000000
--- a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableCaption.spec.tsx.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTableCaption customize 1`] = `
-<table>
-  <caption>
-    Test
-  </caption>
-</table>
-`;
-
-exports[`loads and displays CTableCaption component 1`] = `
-<table>
-  <caption />
-</table>
-`;
diff --git a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.tsx.snap b/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.tsx.snap
deleted file mode 100644
index 980aef89..00000000
--- a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTableDataCell customize 1`] = `
-<table>
-  <tbody>
-    <tr>
-      <td
-        class="align-middle table-active table-info bazinga"
-      >
-        Test
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`loads and displays CTableDataCell component 1`] = `
-<table>
-  <tbody>
-    <tr>
-      <td />
-    </tr>
-  </tbody>
-</table>
-`;
diff --git a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableFoot.spec.tsx.snap b/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableFoot.spec.tsx.snap
deleted file mode 100644
index 61e932a2..00000000
--- a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableFoot.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTableFoot customize 1`] = `
-<table>
-  <tfoot
-    class="table-info bazinga"
-  >
-    <tr>
-      <th>
-        Test
-      </th>
-    </tr>
-  </tfoot>
-</table>
-`;
-
-exports[`loads and displays CTableFoot component 1`] = `
-<table>
-  <tfoot />
-</table>
-`;
diff --git a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableHead.spec.tsx.snap b/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableHead.spec.tsx.snap
deleted file mode 100644
index 40222dad..00000000
--- a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableHead.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTableHead customize 1`] = `
-<table>
-  <thead
-    class="table-info bazinga"
-  >
-    <tr>
-      <th>
-        Test
-      </th>
-    </tr>
-  </thead>
-</table>
-`;
-
-exports[`loads and displays CTableHead component 1`] = `
-<table>
-  <thead />
-</table>
-`;
diff --git a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.tsx.snap b/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.tsx.snap
deleted file mode 100644
index 8db8ce9b..00000000
--- a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTableHeaderCell customize 1`] = `
-<table>
-  <thead>
-    <tr>
-      <th
-        class="table-info bazinga"
-      >
-        Test
-      </th>
-    </tr>
-  </thead>
-</table>
-`;
-
-exports[`loads and displays CTableHeaderCell component 1`] = `
-<table>
-  <thead>
-    <tr>
-      <th />
-    </tr>
-  </thead>
-</table>
-`;
diff --git a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableRow.spec.tsx.snap b/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableRow.spec.tsx.snap
deleted file mode 100644
index b787bec4..00000000
--- a/packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableRow.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTableRow customize 1`] = `
-<table>
-  <tbody>
-    <tr
-      class="align-middle table-active table-info bazinga"
-    >
-      <th>
-        Test
-      </th>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`loads and displays CTableRow component 1`] = `
-<table>
-  <tbody>
-    <tr />
-  </tbody>
-</table>
-`;
diff --git a/packages/coreui-react/src/components/table/index.ts b/packages/coreui-react/src/components/table/index.ts
deleted file mode 100644
index 8263b6b5..00000000
--- a/packages/coreui-react/src/components/table/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { CTable } from './CTable'
-import { CTableBody } from './CTableBody'
-import { CTableCaption } from './CTableCaption'
-import { CTableDataCell } from './CTableDataCell'
-import { CTableFoot } from './CTableFoot'
-import { CTableHead } from './CTableHead'
-import { CTableHeaderCell } from './CTableHeaderCell'
-import { CTableRow } from './CTableRow'
-
-export {
-  CTable,
-  CTableBody,
-  CTableCaption,
-  CTableDataCell,
-  CTableFoot,
-  CTableHead,
-  CTableHeaderCell,
-  CTableRow,
-}
diff --git a/packages/coreui-react/src/components/table/types.ts b/packages/coreui-react/src/components/table/types.ts
deleted file mode 100644
index c8262797..00000000
--- a/packages/coreui-react/src/components/table/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { CTableDataCellProps } from '../table/CTableDataCell'
-import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
-import { CTableRowProps } from '../table/CTableRow'
-
-export type Column = {
-  label?: string
-  key: string
-  _style?: any
-  _props?: CTableHeaderCellProps
-}
-
-export type FooterItem = {
-  label?: string
-  _props?: CTableDataCellProps
-}
-
-export type Item = {
-  [key: string]: number | string | any
-  _props?: CTableRowProps
-}
diff --git a/packages/coreui-react/src/components/table/utils.ts b/packages/coreui-react/src/components/table/utils.ts
deleted file mode 100644
index 9c55ade1..00000000
--- a/packages/coreui-react/src/components/table/utils.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Column, Item } from './types'
-
-export const pretifyName = (name: string) => {
-  return name
-    .replace(/[-_.]/g, ' ')
-    .replace(/ +/g, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .split(' ')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-}
-
-export const getColumnLabel = (column: Column | string) =>
-  typeof column === 'object' ? column.label ?? pretifyName(column.key) : pretifyName(column)
-
-export const getColumnNames = (columns: (string | Column)[] | undefined, items?: Item[]) =>
-  columns
-    ? columns.map((column: Column | string) => {
-        return typeof column === 'object' ? column.key : column
-      })
-    : items && getColumnNamesFromItems(items)
-
-export const getColumnNamesFromItems = (items: Item[]) =>
-  Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')
diff --git a/packages/coreui-react/src/components/tabs/CTab.tsx b/packages/coreui-react/src/components/tabs/CTab.tsx
deleted file mode 100644
index a84e2cc8..00000000
--- a/packages/coreui-react/src/components/tabs/CTab.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useContext } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CTabsContext } from './CTabsContext'
-
-export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Item key.
-   */
-  itemKey: number | string
-}
-
-export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
-  ({ children, className, itemKey, ...rest }, ref) => {
-    const { _activeItemKey, setActiveItemKey, id } = useContext(CTabsContext)
-
-    const isActive = () => itemKey === _activeItemKey
-
-    return (
-      <button
-        className={classNames(
-          'nav-link',
-          {
-            active: isActive(),
-          },
-          className,
-        )}
-        id={`${id}${itemKey}-tab`}
-        onClick={() => setActiveItemKey(itemKey)}
-        onFocus={() => setActiveItemKey(itemKey)}
-        role="tab"
-        tabIndex={isActive() ? 0 : -1}
-        type="button"
-        aria-controls={`${id}${itemKey}-tab-pane`}
-        aria-selected={isActive()}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </button>
-    )
-  },
-)
-
-CTab.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-}
-
-CTab.displayName = 'CTab'
diff --git a/packages/coreui-react/src/components/tabs/CTabContent.tsx b/packages/coreui-react/src/components/tabs/CTabContent.tsx
deleted file mode 100644
index 860ad22c..00000000
--- a/packages/coreui-react/src/components/tabs/CTabContent.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { HTMLAttributes, forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CTabContentProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CTabContent = forwardRef<HTMLDivElement, CTabContentProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('tab-content', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CTabContent.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CTabContent.displayName = 'CTabContent'
diff --git a/packages/coreui-react/src/components/tabs/CTabList.tsx b/packages/coreui-react/src/components/tabs/CTabList.tsx
deleted file mode 100644
index ee7b9fe5..00000000
--- a/packages/coreui-react/src/components/tabs/CTabList.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { forwardRef, HTMLAttributes, KeyboardEvent, useRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { useForkedRef } from '../../hooks'
-import { getNextActiveElement } from '../../utils'
-
-export interface CTabListProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Specify a layout type for component.
-   */
-  layout?: 'fill' | 'justified'
-  /**
-   * Set the nav variant to tabs or pills.
-   */
-  variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border'
-}
-
-export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
-  ({ children, className, layout, variant, ...rest }, ref) => {
-    const tabListRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, tabListRef)
-
-    const handleKeydown = (event: KeyboardEvent<HTMLDivElement>) => {
-      if (
-        tabListRef.current !== null &&
-        (event.key === 'ArrowDown' ||
-          event.key === 'ArrowUp' ||
-          event.key === 'ArrowLeft' ||
-          event.key === 'ArrowRight' ||
-          event.key === 'Home' ||
-          event.key === 'End')
-      ) {
-        event.preventDefault()
-        const target = event.target as HTMLElement
-        // eslint-disable-next-line unicorn/prefer-spread
-        const items: HTMLElement[] = Array.from(
-          tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)')
-        )
-
-        let nextActiveElement
-
-        if (event.key === 'Home' || event.key === 'End') {
-          nextActiveElement = event.key === 'End' ? items.at(-1) : items[0]
-        } else {
-          nextActiveElement = getNextActiveElement(
-            items,
-            target,
-            event.key === 'ArrowDown' || event.key === 'ArrowRight',
-            true
-          )
-        }
-
-        if (nextActiveElement) {
-          nextActiveElement.focus({ preventScroll: true })
-        }
-      }
-    }
-
-    return (
-      <div
-        className={classNames(
-          'nav',
-          variant === 'enclosed-pills' && 'nav-enclosed', // Enclosed pills variant required for `.nav-enclosed` class
-          {
-            [`nav-${layout}`]: layout,
-            [`nav-${variant}`]: variant,
-          },
-          className
-        )}
-        role="tablist"
-        onKeyDown={handleKeydown}
-        ref={forkedRef}
-        {...rest}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-
-CTabList.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf([
-    'enclosed',
-    'enclosed-pills',
-    'pills',
-    'tabs',
-    'underline',
-    'underline-border',
-  ]),
-}
-
-CTabList.displayName = 'CTabList'
diff --git a/packages/coreui-react/src/components/tabs/CTabPane.tsx b/packages/coreui-react/src/components/tabs/CTabPane.tsx
deleted file mode 100644
index 07e9ab42..00000000
--- a/packages/coreui-react/src/components/tabs/CTabPane.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { HTMLAttributes, forwardRef, useRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
-
-import { useForkedRef } from '../../hooks'
-
-export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Callback fired when the component requests to be hidden.
-   */
-  onHide?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * Enable fade in and fade out transition.
-   *
-   * @since 5.1.0
-   */
-  transition?: boolean
-  /**
-   * Toggle the visibility of component.
-   */
-  visible?: boolean
-}
-
-export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
-  ({ children, className, onHide, onShow, transition = true, visible, ...rest }, ref) => {
-    const tabPaneRef = useRef(null)
-    const forkedRef = useForkedRef(ref, tabPaneRef)
-
-    return (
-      <Transition in={visible} nodeRef={tabPaneRef} onEnter={onShow} onExit={onHide} timeout={150}>
-        {(state) => (
-          <div
-            className={classNames(
-              'tab-pane',
-              {
-                active: visible,
-                fade: transition,
-                show: state === 'entered',
-              },
-              className,
-            )}
-            {...rest}
-            ref={forkedRef}
-          >
-            {children}
-          </div>
-        )}
-      </Transition>
-    )
-  },
-)
-
-CTabPane.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
-  transition: PropTypes.bool,
-  visible: PropTypes.bool,
-}
-
-CTabPane.displayName = 'CTabPane'
diff --git a/packages/coreui-react/src/components/tabs/CTabPanel.tsx b/packages/coreui-react/src/components/tabs/CTabPanel.tsx
deleted file mode 100644
index fe770d6e..00000000
--- a/packages/coreui-react/src/components/tabs/CTabPanel.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { HTMLAttributes, forwardRef, useContext, useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
-
-import { CTabsContext } from './CTabsContext'
-import { useForkedRef } from '../../hooks'
-import { getTransitionDurationFromElement } from '../../utils'
-
-export interface CTabPanelProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Item key.
-   */
-  itemKey: number | string
-  /**
-   * Callback fired when the component requests to be hidden.
-   */
-  onHide?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * Enable fade in and fade out transition.
-   */
-  transition?: boolean
-  /**
-   * Toggle the visibility of component.
-   */
-  visible?: boolean
-}
-
-export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
-  ({ children, className, itemKey, onHide, onShow, transition = true, visible, ...rest }, ref) => {
-    const { _activeItemKey, id } = useContext(CTabsContext)
-
-    const tabPaneRef = useRef(null)
-    const forkedRef = useForkedRef(ref, tabPaneRef)
-
-    const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)
-
-    useEffect(() => {
-      visible !== undefined && setVisible(visible)
-    }, [visible])
-
-    useEffect(() => {
-      setVisible(_activeItemKey === itemKey)
-    }, [_activeItemKey])
-
-    return (
-      <Transition
-        in={_visible}
-        nodeRef={tabPaneRef}
-        onEnter={onShow}
-        onExit={onHide}
-        timeout={tabPaneRef.current ? getTransitionDurationFromElement(tabPaneRef.current) : 0}
-      >
-        {(state) => (
-          <div
-            className={classNames(
-              'tab-pane',
-              {
-                active: _visible,
-                fade: transition,
-                show: state === 'entered',
-              },
-              className,
-            )}
-            id={`${id}${itemKey}-tab-pane`}
-            role="tabpanel"
-            aria-labelledby={`${id}${itemKey}-tab`}
-            tabIndex={0}
-            ref={forkedRef}
-            {...rest}
-          >
-            {children}
-          </div>
-        )}
-      </Transition>
-    )
-  },
-)
-
-CTabPanel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
-  transition: PropTypes.bool,
-  visible: PropTypes.bool,
-}
-
-CTabPanel.displayName = 'CTabPanel'
diff --git a/packages/coreui-react/src/components/tabs/CTabs.tsx b/packages/coreui-react/src/components/tabs/CTabs.tsx
deleted file mode 100644
index bcfcb17e..00000000
--- a/packages/coreui-react/src/components/tabs/CTabs.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useId, useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CTabsContext } from './CTabsContext'
-
-export interface CTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  /**
-   * Controls the currently active tab.
-   *
-   * When provided, the component operates in a controlled mode.
-   * You must handle tab switching manually by updating this prop.
-   *
-   * @example
-   * const [activeTab, setActiveTab] = useState(0);
-   * <CTabs activeItemKey={activeTab} onChange={setActiveTab} />
-   */
-  activeItemKey?: number | string
-
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-
-  /**
-   * Sets the initially active tab when the component mounts.
-   *
-   * After initialization, the component manages active tab changes internally.
-   *
-   * Use `defaultActiveItemKey` for uncontrolled usage.
-   *
-   * @example
-   * <CTabs defaultActiveItemKey={1} />
-   */
-  defaultActiveItemKey?: number | string
-
-  /**
-   * Callback fired when the active tab changes.
-   *
-   * - In controlled mode (`activeItemKey` provided), you must update `activeItemKey` yourself based on the value received.
-   * - In uncontrolled mode, this callback is called after internal state updates.
-   *
-   * @param value - The newly selected tab key.
-   *
-   * @example
-   * <CTabs onChange={(key) => console.log('Tab changed to', key)} />
-   */
-  onChange?: (value: number | string) => void
-}
-
-export const CTabs = forwardRef<HTMLDivElement, CTabsProps>(
-  ({ children, activeItemKey, className, defaultActiveItemKey, onChange }, ref) => {
-    const id = useId()
-    const isControlled = activeItemKey !== undefined
-    const [internalActiveItemKey, setInternalActiveItemKey] = useState<number | string | undefined>(
-      () => (isControlled ? undefined : defaultActiveItemKey)
-    )
-
-    const currentActiveItemKey = isControlled ? activeItemKey : internalActiveItemKey
-
-    const setActiveItemKey = (value: number | string) => {
-      if (!isControlled) {
-        setInternalActiveItemKey(value)
-      }
-
-      onChange?.(value)
-    }
-
-    return (
-      <CTabsContext.Provider value={{ _activeItemKey: currentActiveItemKey, setActiveItemKey, id }}>
-        <div className={classNames('tabs', className)} ref={ref}>
-          {children}
-        </div>
-      </CTabsContext.Provider>
-    )
-  }
-)
-
-CTabs.propTypes = {
-  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  defaultActiveItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onChange: PropTypes.func,
-}
-
-CTabs.displayName = 'CTabs'
diff --git a/packages/coreui-react/src/components/tabs/CTabsContext.ts b/packages/coreui-react/src/components/tabs/CTabsContext.ts
deleted file mode 100644
index 87f0c215..00000000
--- a/packages/coreui-react/src/components/tabs/CTabsContext.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createContext } from 'react'
-
-export interface CTabsContextProps {
-  _activeItemKey?: number | string
-  setActiveItemKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
-  id?: string
-}
-
-export const CTabsContext = createContext({} as CTabsContextProps)
\ No newline at end of file
diff --git a/packages/coreui-react/src/components/tabs/__tests__/CTabContent.spec.tsx b/packages/coreui-react/src/components/tabs/__tests__/CTabContent.spec.tsx
deleted file mode 100644
index ea0ffcd1..00000000
--- a/packages/coreui-react/src/components/tabs/__tests__/CTabContent.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { act, render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-
-import { CTabContent } from '../index'
-
-test('loads and displays CTabContent component', async () => {
-  let container: HTMLElement
-  await act(async () => {
-    const renderResult = render(<CTabContent>Test</CTabContent>)
-    container = renderResult.container
-  })
-  expect(container!).toMatchSnapshot()
-})
-
-test('CTabContent customize', async () => {
-  let container: HTMLElement
-  await act(async () => {
-    const renderResult = render(<CTabContent className="bazinga">Test</CTabContent>)
-    container = renderResult.container
-  })
-  expect(container!).toMatchSnapshot()
-  expect(container!.firstChild).toHaveClass('bazinga')
-  expect(container!.firstChild).toHaveClass('tab-content')
-})
diff --git a/packages/coreui-react/src/components/tabs/__tests__/CTabPane.spec.tsx b/packages/coreui-react/src/components/tabs/__tests__/CTabPane.spec.tsx
deleted file mode 100644
index 4d602623..00000000
--- a/packages/coreui-react/src/components/tabs/__tests__/CTabPane.spec.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react'
-import { act, render, screen, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom'
-
-import { CTabPane, CTabContent } from '../index'
-
-test('loads and displays CTabPane component', async () => {
-  let container: HTMLElement
-  await act(async () => {
-    const renderResult = render(<CTabPane>Test</CTabPane>)
-    container = renderResult.container
-  })
-  expect(container!).toMatchSnapshot()
-})
-
-test('CTabPane customize', async () => {
-  let container: HTMLElement
-  await act(async () => {
-    const renderResult = render(
-      <CTabPane className="bazinga" visible={true}>
-        Test
-      </CTabPane>
-    )
-    container = renderResult.container
-  })
-  expect(container!).toMatchSnapshot()
-})
-
-test('CTabContent use case test', async () => {
-  jest.useFakeTimers()
-
-  const { rerender } = render(
-    <CTabContent>
-      <CTabPane visible={false}>Test</CTabPane>
-    </CTabContent>
-  )
-
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('active')
-
-  act(() => {
-    rerender(
-      <CTabContent>
-        <CTabPane visible={true}>Test</CTabPane>
-      </CTabContent>
-    )
-    jest.runAllTimers()
-  })
-
-  await waitFor(() => {
-    expect(screen.getByText('Test')).toHaveClass('active')
-    expect(screen.getByText('Test')).toHaveClass('show')
-  })
-
-  act(() => {
-    rerender(
-      <CTabContent>
-        <CTabPane visible={false}>Test</CTabPane>
-      </CTabContent>
-    )
-    jest.runAllTimers()
-  })
-
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('active')
-
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.tsx.snap b/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.tsx.snap
deleted file mode 100644
index b756cf73..00000000
--- a/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTabContent customize 1`] = `
-<div>
-  <div
-    class="tab-content bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CTabContent component 1`] = `
-<div>
-  <div
-    class="tab-content"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap b/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap
deleted file mode 100644
index 7f453cdb..00000000
--- a/packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTabPane customize 1`] = `
-<div>
-  <div
-    class="tab-pane active fade show bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CTabPane component 1`] = `
-<div>
-  <div
-    class="tab-pane fade"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/tabs/index.ts b/packages/coreui-react/src/components/tabs/index.ts
deleted file mode 100644
index 0d2c6e06..00000000
--- a/packages/coreui-react/src/components/tabs/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { CTab } from './CTab'
-import { CTabContent } from './CTabContent'
-import { CTabPane } from './CTabPane'
-import { CTabPanel } from './CTabPanel'
-import { CTabList } from './CTabList'
-import { CTabs } from './CTabs'
-
-export { CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs }
diff --git a/packages/coreui-react/src/components/toast/CToast.tsx b/packages/coreui-react/src/components/toast/CToast.tsx
deleted file mode 100644
index 0b7fa28a..00000000
--- a/packages/coreui-react/src/components/toast/CToast.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
-
-import { CToastContext } from './CToastContext'
-
-import { useForkedRef } from '../../hooks'
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * Apply a CSS fade transition to the toast.
-   */
-  animation?: boolean
-  /**
-   * Auto hide the toast.
-   */
-  autohide?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Delay hiding the toast (ms).
-   */
-  delay?: number
-  /**
-   * @ignore
-   */
-  index?: number
-  /**
-   * @ignore
-   */
-  innerKey?: number | string
-  /**
-   * Callback fired when the component requests to be closed.
-   */
-  onClose?: (index: number | null) => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: (index: number | null) => void
-  /**
-   * Toggle the visibility of component.
-   */
-  visible?: boolean
-}
-
-export const CToast = forwardRef<HTMLDivElement, CToastProps>(
-  (
-    {
-      children,
-      animation = true,
-      autohide = true,
-      className,
-      color,
-      delay = 5000,
-      index,
-      innerKey,
-      visible = false,
-      onClose,
-      onShow,
-      ...rest
-    },
-    ref
-  ) => {
-    const toastRef = useRef(null)
-    const forkedRef = useForkedRef(ref, toastRef)
-    const [_visible, setVisible] = useState(false)
-    const timeout = useRef<number>(undefined)
-
-    useEffect(() => {
-      setVisible(visible)
-    }, [visible])
-
-    const contextValues = {
-      visible: _visible,
-      setVisible,
-    }
-
-    // triggered on mount and destroy
-    useEffect(() => () => clearTimeout(timeout.current), [])
-
-    useEffect(() => {
-      _autohide()
-    }, [_visible])
-
-    const _autohide = () => {
-      if (autohide) {
-        clearTimeout(timeout.current)
-        timeout.current = window.setTimeout(() => {
-          setVisible(false)
-        }, delay)
-      }
-    }
-
-    return (
-      <Transition
-        in={_visible}
-        nodeRef={toastRef}
-        onEnter={() => onShow && onShow(index ?? null)}
-        onExited={() => onClose && onClose(index ?? null)}
-        timeout={250}
-        unmountOnExit
-      >
-        {(state) => (
-          <CToastContext.Provider value={contextValues}>
-            <div
-              className={classNames(
-                'toast',
-                {
-                  fade: animation,
-                  [`bg-${color}`]: color,
-                  'border-0': color,
-                  'show showing': state === 'entering' || state === 'exiting',
-                  show: state === 'entered',
-                },
-                className
-              )}
-              aria-live="assertive"
-              aria-atomic="true"
-              role="alert"
-              onMouseEnter={() => clearTimeout(timeout.current)}
-              onMouseLeave={() => _autohide()}
-              {...rest}
-              key={innerKey}
-              ref={forkedRef}
-            >
-              {children}
-            </div>
-          </CToastContext.Provider>
-        )}
-      </Transition>
-    )
-  }
-)
-
-CToast.propTypes = {
-  animation: PropTypes.bool,
-  autohide: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  delay: PropTypes.number,
-  index: PropTypes.number,
-  innerKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onClose: PropTypes.func,
-  onShow: PropTypes.func,
-  visible: PropTypes.bool,
-}
-
-CToast.displayName = 'CToast'
diff --git a/packages/coreui-react/src/components/toast/CToastBody.tsx b/packages/coreui-react/src/components/toast/CToastBody.tsx
deleted file mode 100644
index 7bd332e7..00000000
--- a/packages/coreui-react/src/components/toast/CToastBody.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-export interface CToastBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const CToastBody = forwardRef<HTMLDivElement, CToastBodyProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('toast-body', className)} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  },
-)
-
-CToastBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CToastBody.displayName = 'CToastBody'
diff --git a/packages/coreui-react/src/components/toast/CToastClose.tsx b/packages/coreui-react/src/components/toast/CToastClose.tsx
deleted file mode 100644
index a7f421ee..00000000
--- a/packages/coreui-react/src/components/toast/CToastClose.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { ElementType, forwardRef, useContext } from 'react'
-import PropTypes from 'prop-types'
-
-import { CButtonProps } from '../button/CButton'
-import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
-import { CToastContext } from './CToastContext'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-type CombineButtonProps = CCloseButtonProps & CButtonProps
-
-export interface CToastCloseProps extends Omit<CombineButtonProps, 'as'> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: string | ElementType
-}
-
-export const CToastClose: PolymorphicRefForwardingComponent<'button', CToastCloseProps> =
-  forwardRef<HTMLButtonElement, CToastCloseProps>(({ children, as: Component, ...rest }, ref) => {
-    const { setVisible } = useContext(CToastContext)
-    return Component ? (
-      <Component onClick={() => setVisible(false)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    ) : (
-      <CCloseButton onClick={() => setVisible(false)} {...rest} ref={ref} />
-    )
-  })
-
-CToastClose.propTypes = {
-  ...CCloseButton.propTypes,
-  as: PropTypes.elementType,
-}
-
-CToastClose.displayName = 'CToastClose'
diff --git a/packages/coreui-react/src/components/toast/CToastContext.ts b/packages/coreui-react/src/components/toast/CToastContext.ts
deleted file mode 100644
index 3c0144dd..00000000
--- a/packages/coreui-react/src/components/toast/CToastContext.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createContext } from 'react'
-
-export interface CToastContextProps {
-  visible?: boolean
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const CToastContext = createContext({} as CToastContextProps)
diff --git a/packages/coreui-react/src/components/toast/CToastHeader.tsx b/packages/coreui-react/src/components/toast/CToastHeader.tsx
deleted file mode 100644
index 01cb8e84..00000000
--- a/packages/coreui-react/src/components/toast/CToastHeader.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CToastClose } from './CToastClose'
-
-export interface CToastHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Automatically add a close button to the header.
-   */
-  closeButton?: boolean
-}
-
-export const CToastHeader = forwardRef<HTMLDivElement, CToastHeaderProps>(
-  ({ children, className, closeButton, ...rest }, ref) => {
-    return (
-      <div className={classNames('toast-header', className)} {...rest} ref={ref}>
-        {children}
-        {closeButton && <CToastClose />}
-      </div>
-    )
-  },
-)
-
-CToastHeader.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  closeButton: PropTypes.bool,
-}
-
-CToastHeader.displayName = 'CToastHeader'
diff --git a/packages/coreui-react/src/components/toast/CToaster.tsx b/packages/coreui-react/src/components/toast/CToaster.tsx
deleted file mode 100644
index c10d93c1..00000000
--- a/packages/coreui-react/src/components/toast/CToaster.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef, ReactElement } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { CConditionalPortal } from '../conditional-portal'
-
-import type { CToastProps } from './CToast'
-
-export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Describes the placement of your component.
-   *
-   * @type 'top-start' | 'top' | 'top-end' | 'middle-start' | 'middle' | 'middle-end' | 'bottom-start' | 'bottom' | 'bottom-end' | string
-   */
-  placement?:
-    | 'top-start'
-    | 'top-center'
-    | 'top-end'
-    | 'middle-start'
-    | 'middle-center'
-    | 'middle-end'
-    | 'bottom-start'
-    | 'bottom-center'
-    | 'bottom-end'
-    | string
-  /**
-   * Adds new `CToast` to `CToaster`.
-   */
-  push?: ReactElement<CToastProps>
-}
-
-export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
-  ({ children, className, placement, push, ...rest }, ref) => {
-    const [toasts, setToasts] = useState<ReactElement<CToastProps>[]>([])
-    const index = useRef<number>(0)
-
-    useEffect(() => {
-      index.current++
-      if (push) {
-        addToast(push)
-      }
-    }, [push])
-
-    const addToast = (push: ReactElement<CToastProps>) => {
-      setToasts((state) => [
-        ...state,
-        React.cloneElement(push, {
-          index: index.current,
-          innerKey: index.current,
-          onClose: (index: number) =>
-            setToasts((state) => state.filter((i) => i.props.index !== index)),
-        }),
-      ])
-    }
-
-    return (
-      <CConditionalPortal portal={typeof placement === 'string'}>
-        {toasts.length > 0 || children ? (
-          <div
-            className={classNames(
-              'toaster toast-container',
-              {
-                'position-fixed': placement,
-                'top-0': placement && placement.includes('top'),
-                'top-50 translate-middle-y': placement && placement.includes('middle'),
-                'bottom-0': placement && placement.includes('bottom'),
-                'start-0': placement && placement.includes('start'),
-                'start-50 translate-middle-x': placement && placement.includes('center'),
-                'end-0': placement && placement.includes('end'),
-              },
-              className
-            )}
-            {...rest}
-            ref={ref}
-          >
-            {children}
-            {toasts.map((toast, index) => React.cloneElement(toast, { visible: true, key: index }))}
-          </div>
-        ) : null}
-      </CConditionalPortal>
-    )
-  }
-)
-
-CToaster.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  placement: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.oneOf([
-      'top-start',
-      'top-center',
-      'top-end',
-      'middle-start',
-      'middle-center',
-      'middle-end',
-      'bottom-start',
-      'bottom-center',
-      'bottom-end',
-    ]),
-  ]),
-  push: PropTypes.any,
-}
-
-CToaster.displayName = 'CToaster'
diff --git a/packages/coreui-react/src/components/toast/__tests__/CToast.spec.tsx b/packages/coreui-react/src/components/toast/__tests__/CToast.spec.tsx
deleted file mode 100644
index 97b3ebfb..00000000
--- a/packages/coreui-react/src/components/toast/__tests__/CToast.spec.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react'
-import { render, fireEvent, waitFor, act } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CToast, CToastBody, CToastHeader } from '../index'
-
-test('loads and displays CToast component', async () => {
-  const { container } = render(<CToast>Test</CToast>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CToast customize', async () => {
-  const { container } = render(
-    <CToast className="bazinga" autohide={false} color="warning" delay={100} visible={true}>
-      Test
-    </CToast>
-  )
-  await waitFor(() => {
-    expect(container).toMatchSnapshot()
-    expect(container.firstChild).toHaveClass('bazinga')
-    expect(container.firstChild).toHaveClass('toast')
-    expect(container.firstChild).toHaveClass('fade')
-    expect(container.firstChild).toHaveClass('bg-warning')
-    expect(container.firstChild).toHaveClass('show')
-  })
-})
-
-test('CToast click on dismiss button', async () => {
-  jest.useFakeTimers()
-
-  const onClose = jest.fn()
-  const { container } = render(
-    <CToast
-      className="bazinga"
-      autohide={false}
-      color="warning"
-      delay={100}
-      visible={true}
-      onClose={onClose}
-    >
-      <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>
-        <strong className="me-auto">CoreUI for React.js</strong>
-        <small>7 min ago</small>
-      </CToastHeader>
-      <CToastBody>Hello, world! This is a toast message.</CToastBody>
-    </CToast>
-  )
-
-  await waitFor(() => {
-    expect(container.firstChild).toHaveClass('show')
-  })
-
-  expect(onClose).toHaveBeenCalledTimes(0)
-
-  const btn = document.querySelector('.btn-close')
-
-  if (btn !== null) {
-    act(() => {
-      fireEvent.click(btn)
-      jest.runAllTimers()
-    })
-  }
-
-  await waitFor(() => {
-    expect(onClose).toHaveBeenCalledTimes(1)
-    expect(container.firstChild).toBeNull()
-  })
-
-  jest.useRealTimers()
-})
-
-test('CToast test autohide', async () => {
-  jest.useFakeTimers()
-
-  const { container } = render(
-    <CToast autohide={true} delay={1000} visible={true}>
-      Test
-    </CToast>
-  )
-
-  await waitFor(() => {
-    expect(container.firstChild).toHaveClass('show')
-  })
-
-  act(() => {
-    jest.advanceTimersByTime(1000)
-  })
-
-  await waitFor(() => {
-    expect(container.firstChild).toBeNull()
-  })
-
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/toast/__tests__/CToastBody.spec.tsx b/packages/coreui-react/src/components/toast/__tests__/CToastBody.spec.tsx
deleted file mode 100644
index 3b0db757..00000000
--- a/packages/coreui-react/src/components/toast/__tests__/CToastBody.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CToastBody } from '../index'
-
-test('loads and displays CToastBody component', async () => {
-  const { container } = render(<CToastBody>Test</CToastBody>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CToastBody customize', async () => {
-  const { container } = render(<CToastBody className="bazinga">Test</CToastBody>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('toast-body')
-})
diff --git a/packages/coreui-react/src/components/toast/__tests__/CToastHeader.spec.tsx b/packages/coreui-react/src/components/toast/__tests__/CToastHeader.spec.tsx
deleted file mode 100644
index 4ba19ff9..00000000
--- a/packages/coreui-react/src/components/toast/__tests__/CToastHeader.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CToastHeader } from '../index'
-
-test('loads and displays CToastHeader component', async () => {
-  const { container } = render(<CToastHeader>Test</CToastHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CToastHeader customize', async () => {
-  const { container } = render(<CToastHeader className="bazinga">Test</CToastHeader>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('toast-header')
-})
diff --git a/packages/coreui-react/src/components/toast/__tests__/CToaster.spec.tsx b/packages/coreui-react/src/components/toast/__tests__/CToaster.spec.tsx
deleted file mode 100644
index fb18c583..00000000
--- a/packages/coreui-react/src/components/toast/__tests__/CToaster.spec.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react' //  useState,
-import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CButton } from '../../button'
-import { CToast, CToaster, CToastBody, CToastHeader } from '../index'
-
-test('loads and displays CToaster component', async () => {
-  const { container } = render(<CToaster>Test</CToaster>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CToaster customize', async () => {
-  jest.useFakeTimers()
-  let toast = <></>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const addToast = function (t: any) {
-    toast = t
-  }
-  const { container } = render(
-    <>
-      <CToaster push={toast} className="bazinga" />
-      <CButton
-        onClick={() =>
-          addToast(
-            <>
-              <CToast autohide={false}>
-                <CToastHeader closeButton>Lorem ipsum</CToastHeader>
-                <CToastBody>Hello, world! This is a toast message.</CToastBody>
-              </CToast>
-            </>,
-          )
-        }
-      >
-        Send a toast
-      </CButton>
-    </>,
-  )
-  expect(container).toMatchSnapshot()
-  const btn = document.querySelector('.btn')
-  if (btn !== null) {
-    fireEvent.click(btn)
-  }
-  jest.runAllTimers()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('toaster')
-  expect(container.firstChild).toHaveClass('toast-container')
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToast.spec.tsx.snap b/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToast.spec.tsx.snap
deleted file mode 100644
index 77934504..00000000
--- a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToast.spec.tsx.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CToast customize 1`] = `
-<div>
-  <div
-    aria-atomic="true"
-    aria-live="assertive"
-    class="toast fade bg-warning border-0 show showing bazinga"
-    role="alert"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CToast component 1`] = `<div />`;
diff --git a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToastBody.spec.tsx.snap b/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToastBody.spec.tsx.snap
deleted file mode 100644
index 17be4222..00000000
--- a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToastBody.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CToastBody customize 1`] = `
-<div>
-  <div
-    class="toast-body bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CToastBody component 1`] = `
-<div>
-  <div
-    class="toast-body"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.tsx.snap b/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.tsx.snap
deleted file mode 100644
index d6346d24..00000000
--- a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CToastHeader customize 1`] = `
-<div>
-  <div
-    class="toast-header bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CToastHeader component 1`] = `
-<div>
-  <div
-    class="toast-header"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap b/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap
deleted file mode 100644
index 2a2f88f5..00000000
--- a/packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CToaster customize 1`] = `
-<div>
-  <div
-    class="toaster toast-container bazinga"
-  />
-  <button
-    class="btn"
-    type="button"
-  >
-    Send a toast
-  </button>
-</div>
-`;
-
-exports[`loads and displays CToaster component 1`] = `
-<div>
-  <div
-    class="toaster toast-container"
-  >
-    Test
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/toast/index.ts b/packages/coreui-react/src/components/toast/index.ts
deleted file mode 100644
index 8a28699a..00000000
--- a/packages/coreui-react/src/components/toast/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { CToast } from './CToast'
-import { CToastBody } from './CToastBody'
-import { CToastClose } from './CToastClose'
-import { CToastHeader } from './CToastHeader'
-import { CToaster } from './CToaster'
-
-export { CToast, CToastBody, CToastClose, CToastHeader, CToaster }
diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx
deleted file mode 100644
index 4e2aad16..00000000
--- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx
+++ /dev/null
@@ -1,311 +0,0 @@
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from 'react'
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import type { Options } from '@popperjs/core'
-
-import { CConditionalPortal } from '../conditional-portal'
-import { useForkedRef, usePopper } from '../../hooks'
-import { fallbackPlacementsPropType, triggerPropType } from '../../props'
-import type { Placements, Triggers } from '../../types'
-import { executeAfterTransition, getRTLPlacement } from '../../utils'
-
-export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
-  /**
-   * Enables or disables the CSS fade transition for the React Tooltip.
-   *
-   * @since 4.9.0
-   */
-  animation?: boolean
-
-  /**
-   * Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices.
-   */
-  className?: string
-
-  /**
-   * Appends the React Tooltip to a specific element instead of the default `document.body`. You may pass:
-   * - A DOM element (`HTMLElement` or `DocumentFragment`)
-   * - A function that returns a single element
-   * - `null`
-   *
-   * @example
-   * <CTooltip container={document.getElementById('my-container')}>...</CTooltip>
-   *
-   * @default document.body
-   * @since 4.11.0
-   */
-  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
-
-  /**
-   * Content to be displayed within the React Tooltip. Can be a string or any valid React node.
-   */
-  content: ReactNode | string
-
-  /**
-   * The delay (in milliseconds) before showing or hiding the React Tooltip.
-   * - If provided as a number, the delay is applied to both "show" and "hide".
-   * - If provided as an object, it should have distinct "show" and "hide" values.
-   *
-   * @example
-   * // Delays 300ms on both show and hide
-   * <CTooltip delay={300}>...</CTooltip>
-   *
-   * // Delays 500ms on show and 100ms on hide
-   * <CTooltip delay={{ show: 500, hide: 100 }}>...</CTooltip>
-   *
-   * @since 4.9.0
-   */
-  delay?: number | { show: number; hide: number }
-
-  /**
-   * Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order.
-   *
-   * @type 'top', 'right', 'bottom', 'left' | ('top', 'right', 'bottom', 'left')[]
-   * @since 4.9.0
-   */
-  fallbackPlacements?: Placements | Placements[]
-
-  /**
-   * Adjusts the offset of the React Tooltip relative to its target. Expects a tuple `[x-axis, y-axis]`.
-   *
-   * @example
-   * // Offset the menu 0px in X and 10px in Y direction
-   * <CTooltip offset={[0, 10]}>...</CTooltip>
-   *
-   * // Offset the menu 5px in both X and Y direction
-   * <CTooltip offset={[5, 5]}>...</CTooltip>
-   */
-  offset?: [number, number]
-
-  /**
-   * Callback fired immediately after the React Tooltip is hidden.
-   */
-  onHide?: () => void
-
-  /**
-   * Callback fired immediately after the React Tooltip is shown.
-   */
-  onShow?: () => void
-
-  /**
-   * Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position.
-   */
-  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
-
-  /**
-   * Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. [Learn more](https://popper.js.org/docs/v2/constructors/#options)
-   *
-   * @example
-   * <CTooltip
-   *   popperConfig={(defaultConfig) => ({
-   *     ...defaultConfig,
-   *     strategy: 'fixed',
-   *     modifiers: [
-   *       ...defaultConfig.modifiers,
-   *       { name: 'computeStyles', options: { adaptive: false } },
-   *     ],
-   *   })}
-   * >...</CTooltip>
-   *
-   * @since 5.5.0
-   */
-  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
-
-  /**
-   * Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers.
-   *
-   * @example
-   * // Hover-only tooltip
-   * <CTooltip trigger="hover">...</CTooltip>
-   *
-   * // Hover + click combined
-   * <CTooltip trigger={['hover', 'click']}>...</CTooltip>
-   *
-   * @type 'hover' | 'focus' | 'click' | ('hover' | 'focus' | 'click')[]
-   */
-  trigger?: Triggers | Triggers[]
-
-  /**
-   * Controls the visibility of the React Tooltip.
-   * - `true` to show the tooltip.
-   * - `false` to hide the tooltip.
-   */
-  visible?: boolean
-}
-
-export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
-  (
-    {
-      children,
-      animation = true,
-      className,
-      container,
-      content,
-      delay = 0,
-      fallbackPlacements = ['top', 'right', 'bottom', 'left'],
-      offset = [0, 6],
-      onHide,
-      onShow,
-      placement = 'top',
-      popperConfig,
-      trigger = ['hover', 'focus'],
-      visible,
-      ...rest
-    },
-    ref
-  ) => {
-    const tooltipRef = useRef<HTMLDivElement>(null)
-    const togglerRef = useRef(null)
-    const forkedRef = useForkedRef(ref, tooltipRef)
-
-    const id = `tooltip${useId()}`
-    const [mounted, setMounted] = useState(false)
-    const [_visible, setVisible] = useState(visible)
-
-    const { initPopper, destroyPopper, updatePopper } = usePopper()
-
-    const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
-
-    const defaultPopperConfig: Partial<Options> = {
-      modifiers: [
-        { name: 'arrow', options: { element: '.tooltip-arrow' } },
-        { name: 'flip', options: { fallbackPlacements } },
-        { name: 'offset', options: { offset } },
-      ],
-      placement: getRTLPlacement(placement, togglerRef.current),
-    }
-
-    const computedPopperConfig: Partial<Options> = {
-      ...defaultPopperConfig,
-      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
-    }
-
-    useEffect(() => {
-      if (visible) {
-        handleShow()
-        return
-      }
-
-      handleHide()
-    }, [visible])
-
-    useEffect(() => {
-      if (mounted && togglerRef.current && tooltipRef.current) {
-        initPopper(togglerRef.current, tooltipRef.current, computedPopperConfig)
-        setTimeout(() => {
-          setVisible(true)
-        }, _delay.show)
-
-        return
-      }
-
-      if (!mounted && togglerRef.current && tooltipRef.current) {
-        destroyPopper()
-      }
-    }, [mounted])
-
-    useEffect(() => {
-      if (!_visible && togglerRef.current && tooltipRef.current) {
-        executeAfterTransition(() => {
-          setMounted(false)
-        }, tooltipRef.current)
-      }
-    }, [_visible])
-
-    const handleShow = () => {
-      setMounted(true)
-      if (onShow) {
-        onShow()
-      }
-    }
-
-    const handleHide = () => {
-      setTimeout(() => {
-        setVisible(false)
-        if (onHide) {
-          onHide()
-        }
-      }, _delay.hide)
-    }
-
-    useEffect(() => {
-      updatePopper()
-    }, [content])
-
-    return (
-      <>
-        {React.cloneElement(children as React.ReactElement<any>, {
-          ...(_visible && {
-            'aria-describedby': id,
-          }),
-          ref: togglerRef,
-          ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => (_visible ? handleHide() : handleShow()),
-          }),
-          ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => handleShow(),
-            onBlur: () => handleHide(),
-          }),
-          ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => handleShow(),
-            onMouseLeave: () => handleHide(),
-          }),
-        })}
-        <CConditionalPortal container={container} portal={true}>
-          {mounted && (
-            <div
-              className={classNames(
-                'tooltip',
-                'bs-tooltip-auto',
-                {
-                  fade: animation,
-                  show: _visible,
-                },
-                className
-              )}
-              id={id}
-              ref={forkedRef}
-              role="tooltip"
-              {...rest}
-            >
-              <div className="tooltip-arrow"></div>
-              <div className="tooltip-inner">{content}</div>
-            </div>
-          )}
-        </CConditionalPortal>
-      </>
-    )
-  }
-)
-
-CTooltip.propTypes = {
-  animation: PropTypes.bool,
-  children: PropTypes.node,
-  container: PropTypes.any,
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  delay: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.shape({
-      show: PropTypes.number.isRequired,
-      hide: PropTypes.number.isRequired,
-    }),
-  ]),
-  fallbackPlacements: fallbackPlacementsPropType,
-  offset: PropTypes.any, // TODO: find good proptype
-  onHide: PropTypes.func,
-  onShow: PropTypes.func,
-  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
-  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  trigger: triggerPropType,
-  visible: PropTypes.bool,
-}
-
-CTooltip.displayName = 'CTooltip'
diff --git a/packages/coreui-react/src/components/tooltip/__tests__/CTooltip.spec.tsx b/packages/coreui-react/src/components/tooltip/__tests__/CTooltip.spec.tsx
deleted file mode 100644
index 31a194b9..00000000
--- a/packages/coreui-react/src/components/tooltip/__tests__/CTooltip.spec.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react'
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CLink } from '../../link'
-import { CTooltip } from '../index'
-import { CButton } from '../../button'
-
-let container: HTMLDivElement | null
-
-beforeEach(() => {
-  container = document.createElement('div')
-  document.body.appendChild(container)
-})
-
-afterEach(() => {
-  container && container.remove()
-  container = null
-})
-
-test('loads and displays CTooltip component', async () => {
-  const { container } = render(
-    <CTooltip content="content">
-      <CLink>Test</CLink>
-    </CTooltip>
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CTooltip customize', async () => {
-  jest.useFakeTimers()
-
-  render(
-    <CTooltip trigger="hover" placement="right" content="content">
-      <CLink href="#">Test</CLink>
-    </CTooltip>
-  )
-
-  const link = screen.getByText('Test')
-
-  act(() => {
-    fireEvent.mouseOver(link)
-    jest.runAllTimers()
-  })
-
-  expect(document.querySelector('.tooltip')).toBeInTheDocument()
-
-  jest.useRealTimers()
-})
-
-test('CTooltip onShow and onHide', async () => {
-  jest.useFakeTimers()
-
-  const onShow = jest.fn()
-  const onHide = jest.fn()
-
-  render(
-    <CTooltip trigger="click" placement="right" content="content" onShow={onShow} onHide={onHide}>
-      <CButton>Test</CButton>
-    </CTooltip>
-  )
-
-  const btn = screen.getByRole('button', { name: /test/i })
-
-  expect(onShow).toHaveBeenCalledTimes(0)
-  expect(onHide).toHaveBeenCalledTimes(0)
-
-  act(() => {
-    fireEvent.click(btn)
-    jest.runAllTimers()
-  })
-
-  expect(onShow).toHaveBeenCalledTimes(1)
-  expect(onHide).toHaveBeenCalledTimes(0)
-
-  act(() => {
-    fireEvent.click(btn)
-    jest.runAllTimers()
-  })
-
-  expect(onShow).toHaveBeenCalledTimes(1)
-  expect(onHide).toHaveBeenCalledTimes(1)
-
-  jest.useRealTimers()
-})
diff --git a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap b/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
deleted file mode 100644
index ee2b49cb..00000000
--- a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CTooltip component 1`] = `
-<div>
-  <a
-    class=""
-  >
-    Test
-  </a>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/tooltip/index.ts b/packages/coreui-react/src/components/tooltip/index.ts
deleted file mode 100644
index b3af8166..00000000
--- a/packages/coreui-react/src/components/tooltip/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CTooltip } from './CTooltip'
-
-export { CTooltip }
diff --git a/packages/coreui-react/src/components/widgets/CWidgetStatsA.tsx b/packages/coreui-react/src/components/widgets/CWidgetStatsA.tsx
deleted file mode 100644
index c19a5023..00000000
--- a/packages/coreui-react/src/components/widgets/CWidgetStatsA.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CCard, CCardBody } from '../card'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CWidgetStatsAProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * Action node for your component.
-   */
-  action?: ReactNode
-  /**
-   * Chart node for your component.
-   */
-  chart?: string | ReactNode
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Title node for your component.
-   */
-  title?: string | ReactNode
-  /**
-   * Value node for your component.
-   */
-  value?: string | number | ReactNode
-}
-
-export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
-  ({ action, chart, className, color, title, value, ...rest }, ref) => {
-    return (
-      <CCard
-        className={classNames({ [`bg-${color}`]: color, 'text-white': color }, className)}
-        {...rest}
-        ref={ref}
-      >
-        <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
-          <div>
-            {value && <div className="fs-4 fw-semibold">{value}</div>}
-            {title && <div>{title}</div>}
-          </div>
-          {action}
-        </CCardBody>
-        {chart}
-      </CCard>
-    )
-  },
-)
-
-CWidgetStatsA.propTypes = {
-  action: PropTypes.node,
-  chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  className: PropTypes.string,
-  color: colorPropType,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
-}
-
-CWidgetStatsA.displayName = 'CWidgetStatsA'
diff --git a/packages/coreui-react/src/components/widgets/CWidgetStatsB.tsx b/packages/coreui-react/src/components/widgets/CWidgetStatsB.tsx
deleted file mode 100644
index 0308c901..00000000
--- a/packages/coreui-react/src/components/widgets/CWidgetStatsB.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-
-import { CCard, CCardBody } from '../card'
-import { CProgress, CProgressProps } from '../progress/CProgress'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CWidgetStatsBProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Colors have been inverted from their default dark shade.
-   */
-  inverse?: boolean
-  /**
-   * Sets the color context of the progress bar to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  progress?: CProgressProps
-  /**
-   * Title node for your component.
-   */
-  title?: string | ReactNode
-  /**
-   * Helper text for your component.
-   */
-  text?: string
-  /**
-   * Value node for your component.
-   */
-  value?: string | number | ReactNode
-}
-
-export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
-  ({ className, color, inverse, progress, text, title, value, ...rest }, ref) => {
-    return (
-      <CCard
-        className={className}
-        color={color}
-        {...(inverse && { textColor: 'white' })}
-        {...rest}
-        ref={ref}
-      >
-        <CCardBody>
-          {value && <div className="fs-4 fw-semibold">{value}</div>}
-          {title && <div>{title}</div>}
-          <CProgress className="my-2" height={4} {...(inverse && { white: true })} {...progress} />
-          {text && (
-            <small className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>
-              {text}
-            </small>
-          )}
-        </CCardBody>
-      </CCard>
-    )
-  },
-)
-
-CWidgetStatsB.propTypes = {
-  className: PropTypes.string,
-  color: colorPropType,
-  inverse: PropTypes.bool,
-  progress: PropTypes.object,
-  text: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
-}
-
-CWidgetStatsB.displayName = 'CWidgetCWidgetStatsB'
diff --git a/packages/coreui-react/src/components/widgets/CWidgetStatsC.tsx b/packages/coreui-react/src/components/widgets/CWidgetStatsC.tsx
deleted file mode 100644
index f8cca9a7..00000000
--- a/packages/coreui-react/src/components/widgets/CWidgetStatsC.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-
-import { CCard, CCardBody } from '../card'
-import { CProgress, CProgressProps } from '../progress/CProgress'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-import classNames from 'classnames'
-
-export interface CWidgetStatsCProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Icon node for your component.
-   */
-  icon?: string | ReactNode
-  /**
-   * Colors have been inverted from their default dark shade.
-   */
-  inverse?: boolean
-  /**
-   * Sets the color context of the progress bar to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  progress?: CProgressProps
-  /**
-   * Title node for your component.
-   */
-  title?: string | ReactNode
-  /**
-   * Value node for your component.
-   */
-  value?: string | number | ReactNode
-}
-
-export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
-  ({ className, color, icon, inverse, progress, title, value, ...rest }, ref) => {
-    return (
-      <CCard
-        className={className}
-        color={color}
-        {...(inverse && { textColor: 'white' })}
-        {...rest}
-        ref={ref}
-      >
-        <CCardBody>
-          {icon && (
-            <div
-              className={classNames(
-                'text-end mb-4',
-                inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
-              )}
-            >
-              {icon}
-            </div>
-          )}
-          {value && <div className="fs-4 fw-semibold">{value}</div>}
-          {title && (
-            <div className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>
-              {title}
-            </div>
-          )}
-          <CProgress
-            className="mt-3 mb-0"
-            height={4}
-            {...(inverse && { white: true })}
-            {...progress}
-          />
-        </CCardBody>
-      </CCard>
-    )
-  },
-)
-
-CWidgetStatsC.propTypes = {
-  className: PropTypes.string,
-  color: colorPropType,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  inverse: PropTypes.bool,
-  progress: PropTypes.object,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
-}
-
-CWidgetStatsC.displayName = 'CWidgetStatsCWidgetStatsC'
diff --git a/packages/coreui-react/src/components/widgets/CWidgetStatsD.tsx b/packages/coreui-react/src/components/widgets/CWidgetStatsD.tsx
deleted file mode 100644
index 44e089a7..00000000
--- a/packages/coreui-react/src/components/widgets/CWidgetStatsD.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CCard, CCardBody, CCardHeader } from '../card'
-import { CCol } from '../grid/CCol'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-type Value = {
-  title?: string | ReactNode
-  value?: number | string | ReactNode
-}
-
-export interface CWidgetStatsDProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Chart node for your component.
-   */
-  chart?: string | ReactNode
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Icon node for your component.
-   */
-  icon?: string | ReactNode
-  /**
-   * Values and titles for your component.
-   */
-  values?: Value[]
-}
-
-export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
-  ({ className, chart, color, icon, values, ...rest }, ref) => {
-    return (
-      <CCard className={className} {...rest} ref={ref}>
-        <CCardHeader
-          className={classNames(
-            'position-relative d-flex justify-content-center align-items-center',
-            {
-              [`bg-${color}`]: color,
-            },
-          )}
-        >
-          {icon}
-          {chart}
-        </CCardHeader>
-        <CCardBody className="row text-center">
-          {values &&
-            values.map((value: Value, index: number) => {
-              return (
-                <React.Fragment key={index}>
-                  {index % 2 !== 0 && <div className="vr"></div>}
-                  <CCol>
-                    <div className="fs-5 fw-semibold">{value.value}</div>
-                    <div className="text-uppercase text-body-secondary small">{value.title}</div>
-                  </CCol>
-                </React.Fragment>
-              )
-            })}
-        </CCardBody>
-      </CCard>
-    )
-  },
-)
-
-CWidgetStatsD.propTypes = {
-  chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  className: PropTypes.string,
-  color: colorPropType,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  values: PropTypes.arrayOf(PropTypes.any),
-}
-
-CWidgetStatsD.displayName = 'CWidgetStatsD'
diff --git a/packages/coreui-react/src/components/widgets/CWidgetStatsE.tsx b/packages/coreui-react/src/components/widgets/CWidgetStatsE.tsx
deleted file mode 100644
index 7e04e0c3..00000000
--- a/packages/coreui-react/src/components/widgets/CWidgetStatsE.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CCard, CCardBody } from '../card'
-
-export interface CWidgetStatsEProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Chart node for your component.
-   */
-  chart?: string | ReactNode
-  /**
-   * Title node for your component.
-   */
-  title?: string | ReactNode
-  /**
-   * Value node for your component.
-   */
-  value?: string | number | ReactNode
-}
-
-export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
-  ({ chart, className, title, value, ...rest }, ref) => {
-    return (
-      <CCard className={classNames(className)} {...rest} ref={ref}>
-        <CCardBody className="text-center">
-          {title && (
-            <div className="text-body-secondary small text-uppercase fw-semibold">{title}</div>
-          )}
-          {value && <div className="fs-6 fw-semibold py-3">{value}</div>}
-          {chart}
-        </CCardBody>
-      </CCard>
-    )
-  },
-)
-
-CWidgetStatsE.propTypes = {
-  children: PropTypes.node,
-  chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  className: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
-}
-
-CWidgetStatsE.displayName = 'CWidgetStatsE'
diff --git a/packages/coreui-react/src/components/widgets/CWidgetStatsF.tsx b/packages/coreui-react/src/components/widgets/CWidgetStatsF.tsx
deleted file mode 100644
index 6684b286..00000000
--- a/packages/coreui-react/src/components/widgets/CWidgetStatsF.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import PropTypes from 'prop-types'
-
-import { CCard, CCardBody, CCardFooter } from '../card'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CWidgetStatsFProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Footer node for your component.
-   */
-  footer?: string | ReactNode
-  /**
-   * Icon node for your component.
-   */
-  icon?: string | ReactNode
-  /**
-   * Set padding of your component.
-   */
-  padding?: boolean
-  /**
-   * Title node for your component.
-   */
-  title?: string | ReactNode
-  /**
-   * Value node for your component.
-   */
-  value?: string | number | ReactNode
-}
-
-export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
-  ({ className, color, footer, icon, padding = true, title, value, ...rest }, ref) => {
-    return (
-      <CCard className={className} {...rest} ref={ref}>
-        <CCardBody className={`d-flex align-items-center ${padding === false && 'p-0'}`}>
-          <div className={`me-3 text-white bg-${color} ${padding ? 'p-3' : 'p-4'}`}>{icon}</div>
-          <div>
-            <div className={`fs-6 fw-semibold text-${color}`}>{value}</div>
-            <div className="text-body-secondary text-uppercase fw-semibold small">{title}</div>
-          </div>
-        </CCardBody>
-        {footer && <CCardFooter>{footer}</CCardFooter>}
-      </CCard>
-    )
-  },
-)
-
-CWidgetStatsF.propTypes = {
-  className: PropTypes.string,
-  color: colorPropType,
-  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  padding: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
-}
-
-CWidgetStatsF.displayName = 'CWidgetStatsF'
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx
deleted file mode 100644
index 22b080e8..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CWidgetStatsA } from '../index'
-
-test('loads and displays CWidgetStatsA component', async () => {
-  const { container } = render(<CWidgetStatsA />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CWidgetStatsA customize', async () => {
-  const { container } = render(
-    <CWidgetStatsA
-      className="bazinga"
-      action="action"
-      chart="chart"
-      color="info"
-      title="title"
-      value="value"
-    >
-      Test
-    </CWidgetStatsA>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bg-info')
-  expect(container.firstChild).toHaveClass('text-white')
-  expect(container.firstChild).toHaveClass('bazinga')
-  if (container.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('pb-0')
-    expect(container.firstChild.firstChild).toHaveClass('d-flex')
-    expect(container.firstChild.firstChild).toHaveClass('justify-content-between')
-    expect(container.firstChild.firstChild).toHaveClass('align-items-start')
-    if (
-      container.firstChild.firstChild === null ||
-      container.firstChild.firstChild.firstChild === null
-    ) {
-      expect(true).toBe(false)
-    } else {
-      expect(container.firstChild.firstChild.firstChild.firstChild).toHaveClass('fs-4')
-      expect(container.firstChild.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')
-    }
-  }
-
-  //expect(container.firstChild).toHaveTextContent('Test')
-})
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx
deleted file mode 100644
index fb87296d..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CWidgetStatsB } from '../index'
-
-test('loads and displays CWidgetStatsB component', async () => {
-  const { container } = render(<CWidgetStatsB />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CWidgetStatsB customize', async () => {
-  const { container } = render(
-    <CWidgetStatsB
-      className="bazinga"
-      color="info"
-      inverse
-      progress={{ color: 'warning', value: 75, white: true }}
-      text="text"
-      title="title"
-      value="value"
-    >
-      Test
-    </CWidgetStatsB>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card')
-  if (container.firstChild === null || container.firstChild.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('fs-4')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')
-    expect(container.firstChild.firstChild.firstChild).toHaveTextContent('value')
-    expect(container.firstChild.firstChild.lastChild).toHaveClass('text-white')
-    expect(container.firstChild.firstChild.lastChild).toHaveTextContent('text')
-  }
-})
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx
deleted file mode 100644
index 390dae43..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CWidgetStatsC } from '../index'
-
-test('loads and displays CWidgetStatsC component', async () => {
-  const { container } = render(<CWidgetStatsC />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CWidgetStatsC customize', async () => {
-  const { container } = render(
-    <CWidgetStatsC
-      className="bazinga"
-      color="info"
-      icon="icon"
-      inverse
-      progress={{ color: 'warning', value: 75, white: true }}
-      title="title"
-      value="value"
-    >
-      Test
-    </CWidgetStatsC>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card')
-  expect(container.firstChild).toHaveClass('text-white')
-  if (container.firstChild === null || container.firstChild.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-end')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('mb-4')
-    expect(container.firstChild.firstChild.firstChild).toHaveTextContent('icon')
-    expect(container.firstChild.firstChild.lastChild).toHaveClass('mt-3')
-    expect(container.firstChild.firstChild.lastChild).toHaveClass('mb-0')
-  }
-})
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx
deleted file mode 100644
index 1cbd6f95..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CWidgetStatsD } from '../index'
-
-test('loads and displays CWidgetStatsD component', async () => {
-  const { container } = render(<CWidgetStatsD />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CWidgetStatsD customize', async () => {
-  const { container } = render(
-    <CWidgetStatsD
-      className="bazinga"
-      color="info"
-      values={[
-        { title: 'friends', value: '89K' },
-        { title: 'feeds', value: '459' },
-      ]}
-    />,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  if (container.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('position-relative')
-    expect(container.firstChild.firstChild).toHaveClass('d-flex')
-    expect(container.firstChild.firstChild).toHaveClass('justify-content-center')
-    expect(container.firstChild.firstChild).toHaveClass('align-items-center')
-    expect(container.firstChild.firstChild).toHaveClass('bg-info')
-    expect(container.firstChild.lastChild).toHaveClass('row')
-    expect(container.firstChild.lastChild).toHaveClass('text-center')
-    if (
-      container.firstChild.lastChild === null ||
-      container.firstChild.lastChild.firstChild === null
-    ) {
-      expect(true).toBe(false)
-    } else {
-      expect(container.firstChild.lastChild.firstChild.firstChild).toHaveClass('fs-5')
-      expect(container.firstChild.lastChild.firstChild.firstChild).toHaveClass('fw-semibold')
-      expect(container.firstChild.lastChild.firstChild.firstChild).toHaveTextContent('89K')
-      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-uppercase')
-      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-body-secondary')
-      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('small')
-      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveTextContent('friends')
-    }
-  }
-})
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx
deleted file mode 100644
index f2a7a196..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CWidgetStatsE } from '../index'
-
-test('loads and displays CWidgetStatsE component', async () => {
-  const { container } = render(<CWidgetStatsE />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CWidgetStatsE customize', async () => {
-  const { container } = render(
-    <CWidgetStatsE className="bazinga" title="title" value="value">
-      Test
-    </CWidgetStatsE>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card')
-  if (container.firstChild === null || container.firstChild.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-body-secondary')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('small')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-uppercase')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')
-    expect(container.firstChild.firstChild.firstChild).toHaveTextContent('title')
-  }
-})
diff --git a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx b/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx
deleted file mode 100644
index d9a00098..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CWidgetStatsF } from '../index'
-
-test('loads and displays CWidgetStatsF component', async () => {
-  const { container } = render(<CWidgetStatsF />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CWidgetStatsF customize', async () => {
-  const { container } = render(
-    <CWidgetStatsF
-      className="bazinga"
-      color="info"
-      footer="footer"
-      icon="icon"
-      padding={true}
-      title="title"
-      value="value"
-    >
-      Test
-    </CWidgetStatsF>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('card')
-  if (container.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild).toHaveClass('d-flex')
-    expect(container.firstChild.firstChild).toHaveClass('align-items-center')
-    if (container.firstChild.firstChild === null) {
-      expect(true).toBe(false)
-    } else {
-      expect(container.firstChild.firstChild.firstChild).toHaveClass('me-3')
-      expect(container.firstChild.firstChild.firstChild).toHaveClass('text-white')
-      expect(container.firstChild.firstChild.firstChild).toHaveClass('bg-info')
-      expect(container.firstChild.firstChild.firstChild).toHaveClass('p-3')
-      expect(container.firstChild.firstChild.firstChild).toHaveTextContent('icon')
-      if (container.firstChild.firstChild.lastChild === null) {
-        expect(true).toBe(false)
-      } else {
-        expect(container.firstChild.firstChild.lastChild.firstChild).toHaveClass('fs-6')
-        expect(container.firstChild.firstChild.lastChild.firstChild).toHaveClass('fw-semibold')
-        expect(container.firstChild.firstChild.lastChild.firstChild).toHaveClass('text-info')
-        expect(container.firstChild.firstChild.lastChild.firstChild).toHaveTextContent('value')
-        expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass(
-          'text-body-secondary',
-        )
-        expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('text-uppercase')
-        expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('fw-semibold ')
-        expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('small')
-        expect(container.firstChild.firstChild.lastChild.lastChild).toHaveTextContent('title')
-      }
-    }
-  }
-})
diff --git a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.tsx.snap b/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.tsx.snap
deleted file mode 100644
index 3fab5bf1..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.tsx.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CWidgetStatsA customize 1`] = `
-<div>
-  <div
-    class="card bg-info text-white bazinga"
-  >
-    <div
-      class="card-body pb-0 d-flex justify-content-between align-items-start"
-    >
-      <div>
-        <div
-          class="fs-4 fw-semibold"
-        >
-          value
-        </div>
-        <div>
-          title
-        </div>
-      </div>
-      action
-    </div>
-    chart
-  </div>
-</div>
-`;
-
-exports[`loads and displays CWidgetStatsA component 1`] = `
-<div>
-  <div
-    class="card"
-  >
-    <div
-      class="card-body pb-0 d-flex justify-content-between align-items-start"
-    >
-      <div />
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.tsx.snap b/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.tsx.snap
deleted file mode 100644
index 3caaf042..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.tsx.snap
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CWidgetStatsB customize 1`] = `
-<div>
-  <div
-    class="card bg-info text-white bazinga"
-  >
-    <div
-      class="card-body"
-    >
-      <div
-        class="fs-4 fw-semibold"
-      >
-        value
-      </div>
-      <div>
-        title
-      </div>
-      <div
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="75"
-        class="progress progress-white my-2"
-        role="progressbar"
-        style="height: 4px;"
-      >
-        <div
-          class="progress-bar bg-warning"
-          style="width: 75%;"
-        />
-      </div>
-      <small
-        class="text-white text-opacity-75"
-      >
-        text
-      </small>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CWidgetStatsB component 1`] = `
-<div>
-  <div
-    class="card"
-  >
-    <div
-      class="card-body"
-    >
-      <div
-        class="progress my-2"
-        style="height: 4px;"
-      >
-        <div
-          class="progress-bar"
-          style="width: 0%;"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap b/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap
deleted file mode 100644
index fb4f4455..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CWidgetStatsC customize 1`] = `
-<div>
-  <div
-    class="card bg-info text-white bazinga"
-  >
-    <div
-      class="card-body"
-    >
-      <div
-        class="text-end mb-4 text-white text-opacity-75"
-      >
-        icon
-      </div>
-      <div
-        class="fs-4 fw-semibold"
-      >
-        value
-      </div>
-      <div
-        class="text-white text-opacity-75"
-      >
-        title
-      </div>
-      <div
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="75"
-        class="progress progress-white mt-3 mb-0"
-        role="progressbar"
-        style="height: 4px;"
-      >
-        <div
-          class="progress-bar bg-warning"
-          style="width: 75%;"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CWidgetStatsC component 1`] = `
-<div>
-  <div
-    class="card"
-  >
-    <div
-      class="card-body"
-    >
-      <div
-        class="progress mt-3 mb-0"
-        style="height: 4px;"
-      >
-        <div
-          class="progress-bar"
-          style="width: 0%;"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.tsx.snap b/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.tsx.snap
deleted file mode 100644
index e0abfd9c..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.tsx.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CWidgetStatsD customize 1`] = `
-<div>
-  <div
-    class="card bazinga"
-  >
-    <div
-      class="card-header position-relative d-flex justify-content-center align-items-center bg-info"
-    />
-    <div
-      class="card-body row text-center"
-    >
-      <div
-        class="col"
-      >
-        <div
-          class="fs-5 fw-semibold"
-        >
-          89K
-        </div>
-        <div
-          class="text-uppercase text-body-secondary small"
-        >
-          friends
-        </div>
-      </div>
-      <div
-        class="vr"
-      />
-      <div
-        class="col"
-      >
-        <div
-          class="fs-5 fw-semibold"
-        >
-          459
-        </div>
-        <div
-          class="text-uppercase text-body-secondary small"
-        >
-          feeds
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CWidgetStatsD component 1`] = `
-<div>
-  <div
-    class="card"
-  >
-    <div
-      class="card-header position-relative d-flex justify-content-center align-items-center"
-    />
-    <div
-      class="card-body row text-center"
-    />
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.tsx.snap b/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.tsx.snap
deleted file mode 100644
index 56ad3540..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.tsx.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CWidgetStatsE customize 1`] = `
-<div>
-  <div
-    class="card bazinga"
-  >
-    <div
-      class="card-body text-center"
-    >
-      <div
-        class="text-body-secondary small text-uppercase fw-semibold"
-      >
-        title
-      </div>
-      <div
-        class="fs-6 fw-semibold py-3"
-      >
-        value
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CWidgetStatsE component 1`] = `
-<div>
-  <div
-    class="card"
-  >
-    <div
-      class="card-body text-center"
-    />
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.tsx.snap b/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.tsx.snap
deleted file mode 100644
index 8dab9d52..00000000
--- a/packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.tsx.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CWidgetStatsF customize 1`] = `
-<div>
-  <div
-    class="card bazinga"
-  >
-    <div
-      class="card-body d-flex align-items-center false"
-    >
-      <div
-        class="me-3 text-white bg-info p-3"
-      >
-        icon
-      </div>
-      <div>
-        <div
-          class="fs-6 fw-semibold text-info"
-        >
-          value
-        </div>
-        <div
-          class="text-body-secondary text-uppercase fw-semibold small"
-        >
-          title
-        </div>
-      </div>
-    </div>
-    <div
-      class="card-footer"
-    >
-      footer
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CWidgetStatsF component 1`] = `
-<div>
-  <div
-    class="card"
-  >
-    <div
-      class="card-body d-flex align-items-center false"
-    >
-      <div
-        class="me-3 text-white bg-undefined p-3"
-      />
-      <div>
-        <div
-          class="fs-6 fw-semibold text-undefined"
-        />
-        <div
-          class="text-body-secondary text-uppercase fw-semibold small"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/coreui-react/src/components/widgets/index.ts b/packages/coreui-react/src/components/widgets/index.ts
deleted file mode 100644
index 03c85346..00000000
--- a/packages/coreui-react/src/components/widgets/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { CWidgetStatsA } from './CWidgetStatsA'
-import { CWidgetStatsB } from './CWidgetStatsB'
-import { CWidgetStatsC } from './CWidgetStatsC'
-import { CWidgetStatsD } from './CWidgetStatsD'
-import { CWidgetStatsE } from './CWidgetStatsE'
-import { CWidgetStatsF } from './CWidgetStatsF'
-
-export { CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF }
diff --git a/packages/coreui-react/src/helpers/index.ts b/packages/coreui-react/src/helpers/index.ts
deleted file mode 100644
index 13ec6191..00000000
--- a/packages/coreui-react/src/helpers/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PolymorphicRefForwardingComponent } from './polymorphicComponent'
-
-export { PolymorphicRefForwardingComponent }
diff --git a/packages/coreui-react/src/helpers/polymorphicComponent.ts b/packages/coreui-react/src/helpers/polymorphicComponent.ts
deleted file mode 100644
index ba82c64c..00000000
--- a/packages/coreui-react/src/helpers/polymorphicComponent.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentPropsWithRef, ElementType, PropsWithChildren, ReactNode } from 'react'
-
-export type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>
-
-export type ReplaceProps<Inner extends ElementType, P> = Omit<ComponentPropsWithRef<Inner>, P> & P
-
-export interface AsProp<As extends ElementType = ElementType> {
-  as?: As
-}
-
-export interface Props<As extends ElementType = ElementType> extends AsProp<As> {}
-
-export interface PolymorphicRefForwardingComponent<TInitial extends ElementType, P = unknown> {
-  <As extends ElementType = TInitial>(
-    props: PropsWithChildren<ReplaceProps<As, Props<As> & P>>,
-    context?: any, // eslint-disable-line @typescript-eslint/no-explicit-any
-  ): ReactNode | null
-  propTypes?: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  defaultProps?: Partial<P>
-  displayName?: string
-}
diff --git a/packages/coreui-react/src/hooks/index.ts b/packages/coreui-react/src/hooks/index.ts
deleted file mode 100644
index 701225e6..00000000
--- a/packages/coreui-react/src/hooks/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useClipboard } from './useClipboard'
-import { useColorModes } from './useColorModes'
-import { useForkedRef } from './useForkedRef'
-import { usePopper } from './usePopper'
-
-export { useClipboard, useColorModes, useForkedRef, usePopper }
diff --git a/packages/coreui-react/src/hooks/useClipboard.ts b/packages/coreui-react/src/hooks/useClipboard.ts
deleted file mode 100644
index 0b6ad7a2..00000000
--- a/packages/coreui-react/src/hooks/useClipboard.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useState, useCallback } from 'react'
-
-/**
- * useClipboard Hook
- *
- * Provides functionality to copy text to the clipboard and track the copy status.
- *
- * @returns An object containing the copy function, copy status, and any error encountered.
- */
-export const useClipboard = () => {
-  const [isCopied, setIsCopied] = useState<boolean>(false)
-  const [error, setError] = useState<Error | null>(null)
-
-  /**
-   * Copies the provided text to the clipboard.
-   *
-   * @param text - The text to be copied to the clipboard.
-   */
-  const copy = useCallback(async (text: string) => {
-    if (!navigator?.clipboard) {
-      setError(new Error('Clipboard API is not available'))
-      return
-    }
-
-    try {
-      await navigator.clipboard.writeText(text)
-      setIsCopied(true)
-      setError(null)
-      // Reset the isCopied state after 2 seconds
-      setTimeout(() => setIsCopied(false), 2000)
-    } catch (_error) {
-      setError(_error as Error)
-      setIsCopied(false)
-    }
-  }, [])
-
-  return { copy, isCopied, error }
-}
diff --git a/packages/coreui-react/src/hooks/useColorModes.ts b/packages/coreui-react/src/hooks/useColorModes.ts
deleted file mode 100644
index b6c63a80..00000000
--- a/packages/coreui-react/src/hooks/useColorModes.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
-
-interface UseColorModesOutput {
-  colorMode: string | undefined
-  isColorModeSet: () => boolean
-  setColorMode: Dispatch<SetStateAction<string>>
-}
-
-const getStoredTheme = (localStorageItemName: string) =>
-  typeof window !== 'undefined' && localStorage.getItem(localStorageItemName)
-
-const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
-  localStorage.setItem(localStorageItemName, colorMode)
-
-const getPreferredColorScheme = (localStorageItemName: string) => {
-  if (typeof window === 'undefined') {
-    return 'light'
-  }
-
-  const storedTheme = getStoredTheme(localStorageItemName)
-
-  if (storedTheme) {
-    return storedTheme
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-const setTheme = (colorMode: string) => {
-  document.documentElement.dataset.coreuiTheme =
-    colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : colorMode
-
-  const event = new Event('ColorSchemeChange')
-  document.documentElement.dispatchEvent(event)
-}
-
-export const useColorModes = (
-  localStorageItemName = 'coreui-react-color-scheme',
-): UseColorModesOutput => {
-  const [colorMode, setColorMode] = useState<string | undefined>(
-    getPreferredColorScheme(localStorageItemName),
-  )
-
-  useEffect(() => {
-    if (colorMode) {
-      setStoredTheme(localStorageItemName, colorMode)
-      setTheme(colorMode)
-    }
-  }, [colorMode])
-
-  useEffect(() => {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-      const storedTheme = getStoredTheme(localStorageItemName)
-      if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
-        setTheme(colorMode)
-      }
-    })
-  })
-
-  return {
-    colorMode,
-    isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
-    setColorMode,
-  }
-}
diff --git a/packages/coreui-react/src/hooks/useForkedRef.ts b/packages/coreui-react/src/hooks/useForkedRef.ts
deleted file mode 100644
index 0eb7b77a..00000000
--- a/packages/coreui-react/src/hooks/useForkedRef.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// code borrowed from https://github.com/reach/reach-ui
-// problem described https://github.com/facebook/react/issues/13029
-
-import { useMemo } from 'react'
-
-export type AssignableRef<ValueType> =
-  | {
-      bivarianceHack(instance: ValueType | null): void
-    }['bivarianceHack']
-  | React.MutableRefObject<ValueType | null>
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useForkedRef<RefValueType = any>(
-  ...refs: (AssignableRef<RefValueType> | null | undefined)[]
-) {
-  return useMemo(() => {
-    if (refs.every((ref) => ref == null)) {
-      return null
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (node: any) => {
-      refs.forEach((ref) => {
-        assignRef(ref, node)
-      })
-    }
-  }, refs)
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function assignRef<RefValueType = any>(
-  ref: AssignableRef<RefValueType> | null | undefined,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any,
-) {
-  if (ref == null) return
-  if (isFunction(ref)) {
-    ref(value)
-  } else {
-    try {
-      ref.current = value
-    } catch {
-      throw new Error(`Cannot assign value "${value}" to ref "${ref}"`)
-    }
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-export function isFunction(value: any): value is Function {
-  return !!(value && {}.toString.call(value) == '[object Function]')
-}
diff --git a/packages/coreui-react/src/hooks/usePopper.ts b/packages/coreui-react/src/hooks/usePopper.ts
deleted file mode 100644
index 69830552..00000000
--- a/packages/coreui-react/src/hooks/usePopper.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useRef } from 'react'
-import { createPopper } from '@popperjs/core'
-import type { Instance, Options } from '@popperjs/core'
-
-interface UsePopperOutput {
-  popper: Instance | undefined
-  initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => void
-  destroyPopper: () => void
-  updatePopper: (options?: Partial<Options>) => void
-}
-
-export const usePopper = (): UsePopperOutput => {
-  const _popper = useRef<Instance>(undefined)
-  const el = useRef<HTMLElement>(null)
-
-  const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
-    _popper.current = createPopper(reference, popper, options)
-    el.current = popper
-  }
-
-  const destroyPopper = () => {
-    const popperInstance = _popper.current
-
-    if (popperInstance && el.current) {
-      popperInstance.destroy()
-    }
-
-    _popper.current = undefined
-  }
-
-  const updatePopper = (options?: Partial<Options>) => {
-    const popperInstance = _popper.current
-
-    if (popperInstance && options) {
-      popperInstance.setOptions(options)
-    }
-
-    if (popperInstance) {
-      popperInstance.update()
-    }
-  }
-
-  return {
-    popper: _popper.current,
-    initPopper,
-    destroyPopper,
-    updatePopper,
-  }
-}
diff --git a/packages/coreui-react/src/index.ts b/packages/coreui-react/src/index.ts
deleted file mode 100644
index 9c5450c8..00000000
--- a/packages/coreui-react/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './components/'
-export * from './hooks/'
diff --git a/packages/coreui-react/src/props.ts b/packages/coreui-react/src/props.ts
deleted file mode 100644
index ccce445a..00000000
--- a/packages/coreui-react/src/props.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types'
-
-import type { Placements, Triggers } from './types'
-
-export const colorPropType = PropTypes.oneOfType([
-  PropTypes.oneOf([
-    'primary',
-    'secondary',
-    'success',
-    'danger',
-    'warning',
-    'info',
-    'dark',
-    'light',
-  ]),
-  PropTypes.string,
-])
-
-export const fallbackPlacementsPropType = PropTypes.oneOfType([
-  PropTypes.arrayOf(PropTypes.oneOf<Placements>(['top', 'bottom', 'right', 'left']).isRequired),
-  PropTypes.oneOf<Placements>(['top', 'bottom', 'right', 'left']),
-])
-
-export const placementPropType = PropTypes.oneOf<Placements>([
-  'auto',
-  'auto-start',
-  'auto-end',
-  'top-end',
-  'top',
-  'top-start',
-  'bottom-end',
-  'bottom',
-  'bottom-start',
-  'right-start',
-  'right',
-  'right-end',
-  'left-start',
-  'left',
-  'left-end',
-])
-
-export const shapePropType = PropTypes.oneOfType([
-  PropTypes.oneOf([
-    'rounded',
-    'rounded-top',
-    'rounded-end',
-    'rounded-bottom',
-    'rounded-start',
-    'rounded-circle',
-    'rounded-pill',
-    'rounded-0',
-    'rounded-1',
-    'rounded-2',
-    'rounded-3',
-  ]),
-  PropTypes.string,
-])
-
-export const textColorsPropType = PropTypes.oneOfType([
-  colorPropType,
-  PropTypes.oneOf(['white', 'muted']),
-  PropTypes.string,
-])
-
-export const triggerPropType = PropTypes.oneOfType([
-  PropTypes.arrayOf(PropTypes.oneOf<Triggers>(['hover', 'focus', 'click']).isRequired),
-  PropTypes.oneOf<Triggers>(['hover', 'focus', 'click']),
-])
diff --git a/packages/coreui-react/src/types.ts b/packages/coreui-react/src/types.ts
deleted file mode 100644
index 860fa90c..00000000
--- a/packages/coreui-react/src/types.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-
-export type Colors =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'dark'
-  | 'light'
-  | string
-
-export type Placements =
-  | 'auto'
-  | 'auto-start'
-  | 'auto-end'
-  | 'top-end'
-  | 'top'
-  | 'top-start'
-  | 'bottom-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'right-start'
-  | 'right'
-  | 'right-end'
-  | 'left-start'
-  | 'left'
-  | 'left-end'
-  | undefined
-
-export type Shapes =
-  | 'rounded'
-  | 'rounded-top'
-  | 'rounded-end'
-  | 'rounded-bottom'
-  | 'rounded-start'
-  | 'rounded-circle'
-  | 'rounded-pill'
-  | 'rounded-0'
-  | 'rounded-1'
-  | 'rounded-2'
-  | 'rounded-3'
-  | string
-
-export type TextColors =
-  | Colors
-  | 'primary-emphasis'
-  | 'secondary-emphasis'
-  | 'success-emphasis'
-  | 'danger-emphasis'
-  | 'warning-emphasis'
-  | 'info-emphasis'
-  | 'light-emphasis'
-  | 'body'
-  | 'body-emphasis'
-  | 'body-secondary'
-  | 'body-tertiary'
-  | 'black'
-  | 'black-50'
-  | 'white'
-  | 'white-50'
-  | string
-
-export type Triggers = 'hover' | 'focus' | 'click'
diff --git a/packages/coreui-react/src/utils/executeAfterTransition.ts b/packages/coreui-react/src/utils/executeAfterTransition.ts
deleted file mode 100644
index 7b0bed80..00000000
--- a/packages/coreui-react/src/utils/executeAfterTransition.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import getTransitionDurationFromElement from './getTransitionDurationFromElement'
-
-const execute = (callback: () => void) => {
-  if (typeof callback === 'function') {
-    callback()
-  }
-}
-
-const triggerTransitionEnd = (element: HTMLElement) => {
-  element.dispatchEvent(new Event('transitionend'))
-}
-
-const executeAfterTransition = (
-  callback: () => void,
-  transitionElement: HTMLElement,
-  waitForTransition = true,
-) => {
-  if (!waitForTransition) {
-    execute(callback)
-    return
-  }
-
-  const durationPadding = 5
-  const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding
-
-  let called = false
-
-  const handler = ({ target }: { target: any }) => {
-    if (target !== transitionElement) {
-      return
-    }
-
-    called = true
-    transitionElement.removeEventListener('transitionend', handler)
-    execute(callback)
-  }
-
-  transitionElement.addEventListener('transitionend', handler)
-  setTimeout(() => {
-    if (!called) {
-      triggerTransitionEnd(transitionElement)
-    }
-  }, emulatedDuration)
-}
-
-export default executeAfterTransition
diff --git a/packages/coreui-react/src/utils/getNextActiveElement.ts b/packages/coreui-react/src/utils/getNextActiveElement.ts
deleted file mode 100644
index a80293ca..00000000
--- a/packages/coreui-react/src/utils/getNextActiveElement.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-const getNextActiveElement = (
-  list: HTMLElement[],
-  activeElement: HTMLElement,
-  shouldGetNext: boolean,
-  isCycleAllowed: boolean,
-) => {
-  const listLength = list.length
-  let index = list.indexOf(activeElement)
-
-  if (index === -1) {
-    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
-  }
-
-  index += shouldGetNext ? 1 : -1
-
-  if (isCycleAllowed) {
-    index = (index + listLength) % listLength
-  }
-
-  return list[Math.max(0, Math.min(index, listLength - 1))]
-}
-
-export default getNextActiveElement
diff --git a/packages/coreui-react/src/utils/getRTLPlacement.ts b/packages/coreui-react/src/utils/getRTLPlacement.ts
deleted file mode 100644
index 87c38517..00000000
--- a/packages/coreui-react/src/utils/getRTLPlacement.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Placement } from '@popperjs/core'
-import isRTL from './isRTL'
-
-const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  switch (placement) {
-    case 'right': {
-      return isRTL(element) ? 'left' : 'right'
-    }
-    case 'left': {
-      return isRTL(element) ? 'right' : 'left'
-    }
-    default: {
-      return placement as Placement
-    }
-  }
-}
-
-export default getRTLPlacement
diff --git a/packages/coreui-react/src/utils/getTransitionDurationFromElement.ts b/packages/coreui-react/src/utils/getTransitionDurationFromElement.ts
deleted file mode 100644
index a62b32fb..00000000
--- a/packages/coreui-react/src/utils/getTransitionDurationFromElement.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-const getTransitionDurationFromElement = (element: HTMLElement) => {
-  if (!element) {
-    return 0
-  }
-
-  // Get transition-duration of the element
-  let { transitionDuration, transitionDelay } = window.getComputedStyle(element)
-
-  const floatTransitionDuration = Number.parseFloat(transitionDuration)
-  const floatTransitionDelay = Number.parseFloat(transitionDelay)
-
-  // Return 0 if element or transition duration is not found
-  if (!floatTransitionDuration && !floatTransitionDelay) {
-    return 0
-  }
-
-  // If multiple durations are defined, take the first
-  transitionDuration = transitionDuration.split(',')[0]
-  transitionDelay = transitionDelay.split(',')[0]
-
-  return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000
-}
-
-export default getTransitionDurationFromElement
diff --git a/packages/coreui-react/src/utils/index.ts b/packages/coreui-react/src/utils/index.ts
deleted file mode 100644
index 9d965598..00000000
--- a/packages/coreui-react/src/utils/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import executeAfterTransition from './executeAfterTransition'
-import getNextActiveElement from './getNextActiveElement'
-import getRTLPlacement from './getRTLPlacement'
-import getTransitionDurationFromElement from './getTransitionDurationFromElement'
-import isInViewport from './isInViewport'
-import isRTL from './isRTL'
-import mergeClassNames from './mergeClassNames'
-
-export {
-  executeAfterTransition,
-  getNextActiveElement,
-  getRTLPlacement,
-  getTransitionDurationFromElement,
-  isInViewport,
-  isRTL,
-  mergeClassNames,
-}
diff --git a/packages/coreui-react/src/utils/isInViewport.ts b/packages/coreui-react/src/utils/isInViewport.ts
deleted file mode 100644
index 7aae5391..00000000
--- a/packages/coreui-react/src/utils/isInViewport.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-const isInViewport = (element: HTMLElement) => {
-  const rect = element.getBoundingClientRect()
-  return (
-    Math.floor(rect.top) >= 0 &&
-    Math.floor(rect.left) >= 0 &&
-    Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
-    Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
-
-export default isInViewport
diff --git a/packages/coreui-react/src/utils/isRTL.ts b/packages/coreui-react/src/utils/isRTL.ts
deleted file mode 100644
index 17180d80..00000000
--- a/packages/coreui-react/src/utils/isRTL.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-const isRTL = (element?: HTMLElement | HTMLDivElement | null) => {
-  if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
-    return true
-  }
-
-  if (element) {
-    return element.closest('[dir="rtl"]') !== null
-  }
-
-  return false
-}
-
-export default isRTL
diff --git a/packages/coreui-react/src/utils/mergeClassNames.ts b/packages/coreui-react/src/utils/mergeClassNames.ts
deleted file mode 100644
index e2013440..00000000
--- a/packages/coreui-react/src/utils/mergeClassNames.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-const mergeClassNames = <T extends object>(
-  defaultClassNames: T,
-  customClassNames?: Partial<T>,
-): T => {
-  if (customClassNames === undefined || typeof customClassNames !== 'object') {
-    return defaultClassNames
-  }
-
-  const classNames: T = { ...defaultClassNames }
-
-  for (const key in customClassNames) {
-    if (customClassNames.hasOwnProperty(key)) {
-      const typedKey = key as keyof T
-      const customClassName = customClassNames[typedKey]?.toString()
-
-      classNames[typedKey] = customClassName?.startsWith('!')
-        ? (customClassName.slice(1).trim() as T[keyof T])
-        : (`${classNames[typedKey]} ${customClassName}`.trim() as T[keyof T])
-    }
-  }
-
-  return classNames
-}
-
-export default mergeClassNames
diff --git a/packages/coreui-react/tsconfig.json b/packages/coreui-react/tsconfig.json
deleted file mode 100644
index d8b90788..00000000
--- a/packages/coreui-react/tsconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig",
-  "include": ["src/**/*"]
-}
\ No newline at end of file
diff --git a/packages/docs/build/api.mjs b/packages/docs/build/api.mjs
deleted file mode 100644
index 5ce20f3c..00000000
--- a/packages/docs/build/api.mjs
+++ /dev/null
@@ -1,366 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-import { globby } from 'globby'
-import { writeFile, mkdir } from 'node:fs/promises'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { parse } from 'react-docgen-typescript'
-import showdown from 'showdown'
-
-/**
- * Derive __dirname in ESM
- */
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-const converter = new showdown.Converter({ simpleLineBreaks: true })
-
-/**
- * Glob patterns to locate .tsx files for documentation.
- */
-const GLOB_PATTERNS = [
-  '**/src/**/*.tsx',
-  '../node_modules/@coreui/icons-react/src/**/*.tsx',
-  '../node_modules/@coreui/react-chartjs/src/**/*.tsx',
-]
-
-/**
- * Options for globby to control file matching behavior.
- */
-const GLOBBY_OPTIONS = {
-  absolute: true,
-  cwd: path.join(__dirname, '..', '..'),
-  gitignore: false,
-  ignore: ['**/docs/**', '**/__tests__/**'],
-}
-
-/**
- * Excluded files list (currently unused).
- */
-const EXCLUDED_FILES = [] // Currently unused, but can be utilized if needed
-
-/**
- * Options for react-docgen-typescript parser.
- */
-const DOCGEN_OPTIONS = {
-  shouldIncludePropTagMap: true,
-}
-
-/**
- * List of pro components that require special handling.
- */
-const PRO_COMPONENTS = [
-  'CCalendar',
-  'CDatePicker',
-  'CDateRangePicker',
-  'CFormMask',
-  'CLoadingButton',
-  'CMultiSelect',
-  'CRating',
-  'CRangeSlider',
-  'CRating',
-  'CSmartPagination',
-  'CSmartTable',
-  'CTimePicker',
-  'CVirtualScroller',
-]
-
-/**
- * Text replacements for certain components.
- */
-const TEXT_REPLACEMENTS = {
-  CDatePicker: {
-    description: [{ 'React Calendar': 'React Date Picker' }],
-    example: [{ CCalendar: 'CDatePicker' }],
-  },
-  CDateRangePicker: {
-    description: [{ 'React Calendar': 'React Date Range Picker' }],
-    example: [{ CCalendar: 'CDateRangePicker' }],
-  },
-  CFormInput: {
-    example: [{ CFormControlValidation: 'CFormInput' }, { CFormControlWrapper: 'CFormInput' }],
-  },
-  CFormTextarea: {
-    example: [
-      { CFormControlValidation: 'CFormTextarea' },
-      { CFormControlWrapper: 'CFormTextarea' },
-    ],
-  },
-}
-
-/**
- * Escapes special characters in text to prevent Markdown rendering issues.
- *
- * @param {string} text - The text to escape.
- * @returns {string} - The escaped text.
- */
-const escapeMarkdown = (text) => {
-  if (typeof text !== 'string') return text
-  return text
-    .replaceAll(/(<)/g, String.raw`\$1`)
-    .replaceAll('\n', '<br/>')
-    .replaceAll(/`([^`]+)`/g, '<code>{`$1`}</code>')
-}
-
-/**
- * Generates the relative filename based on the file path.
- *
- * @param {string} file - The absolute file path.
- * @returns {string} - The relative filename.
- */
-const getRelativeFilename = (file) => {
-  let relativePath = file.includes('node_modules')
-    ? file.split('node_modules/@coreui/')[1]
-    : path.relative(GLOBBY_OPTIONS.cwd, file).replace('coreui-', '')
-
-  // Remove '-pro' from the filename if not a pro component
-  const isPro = PRO_COMPONENTS.some((component) => file.includes(component))
-  if (!isPro) {
-    relativePath = relativePath.replace('-pro', '')
-  }
-
-  return relativePath
-}
-
-/**
- * Splits the input string by the '|' character, but only when the '|' is outside of any curly braces {} and parentheses ().
- *
- * @param {string} input - The string to be split.
- * @returns {string[]} An array of split parts, trimmed of whitespace.
- * @throws {Error} Throws an error if there are unmatched braces or parentheses in the input.
- */
-const splitOutsideBracesAndParentheses = (input) => {
-  if (input.endsWith('...')) {
-    return [input]
-  }
-
-  const parts = []
-  let currentPart = ''
-  let braceDepth = 0
-  let parenthesisDepth = 0
-
-  for (const char of input) {
-    switch (char) {
-      case '{': {
-        braceDepth++
-        break
-      }
-      case '}': {
-        braceDepth--
-        if (braceDepth < 0) {
-          throw new Error('Unmatched closing curly brace detected.')
-        }
-        break
-      }
-      case '(': {
-        parenthesisDepth++
-        break
-      }
-      case ')': {
-        parenthesisDepth--
-        if (parenthesisDepth < 0) {
-          throw new Error('Unmatched closing parenthesis detected.')
-        }
-        break
-      }
-      case '|': {
-        // Split only if not inside any braces or parentheses
-        if (braceDepth === 0 && parenthesisDepth === 0 && currentPart.trim()) {
-          parts.push(currentPart.trim())
-          currentPart = ''
-          continue
-        }
-        break
-      }
-      default: {
-        break
-      }
-    }
-    currentPart += char
-  }
-
-  if (braceDepth !== 0) {
-    throw new Error('Unmatched opening curly brace detected.')
-  }
-  if (parenthesisDepth !== 0) {
-    throw new Error('Unmatched opening parenthesis detected.')
-  }
-
-  if (currentPart.trim()) {
-    parts.push(currentPart.trim())
-  }
-
-  return parts
-}
-
-/**
- * Replaces specified text within component documentation.
- *
- * @param {string} componenName - The name of the component.
- * @param {string} keyName - The key of the text replacement (e.g., 'description', 'example').
- * @param {string} text - The text to be replaced.
- * @returns {string} The replaced text.
- */
-const replaceText = (componenName, keyName, text) => {
-  const keyNames = Object.keys(TEXT_REPLACEMENTS)
-
-  if (keyNames.includes(componenName) && TEXT_REPLACEMENTS[componenName][keyName]) {
-    const replacements = TEXT_REPLACEMENTS[componenName][keyName]
-    for (const replacement of replacements) {
-      for (const [key, value] of Object.entries(replacement)) {
-        if (text && key && value) {
-          return text.replaceAll(key, value)
-        }
-      }
-    }
-  } else {
-    return text
-  }
-}
-
-/**
- * Creates an MDX file with the component's API documentation.
- *
- * @param {string} file - The absolute path to the component file.
- * @param {object} component - The component info extracted by react-docgen-typescript.
- */
-const createMdx = async (file, component) => {
-  if (!component) return
-
-  const filename = path.basename(file, '.tsx')
-  const relativeFilename = getRelativeFilename(file)
-
-  let content = `\n\`\`\`jsx\n`
-  const importPathParts = relativeFilename.split('/')
-  if (importPathParts.length > 1) {
-    content += `import { ${component.displayName} } from '@coreui/${importPathParts[0]}'\n`
-  }
-  content += `// or\n`
-  content += `import ${component.displayName} from '@coreui/${relativeFilename.replace('.tsx', '')}'\n`
-  content += `\`\`\`\n\n`
-
-  const filteredProps = Object.entries(component.props)
-    .filter(([_, value]) => {
-      if (!value.parent?.fileName) return true
-      return (
-        !value.parent.fileName.includes('@types/react/index.d.ts') &&
-        !value.parent.fileName.includes('@types/react/ts5.0/index.d.ts')
-      )
-    })
-    .sort(([a], [b]) => a.localeCompare(b))
-
-  for (const [index, [propName, propInfo]] of filteredProps.entries()) {
-    if (index === 0) {
-      content += `<div className="table-responsive table-api border rounded mb-3">\n`
-      content += `  <table className="table">\n`
-      content += `    <thead>\n`
-      content += `      <tr>\n`
-      content += `        <th>Property</th>\n`
-      content += `        <th>Default</th>\n`
-      content += `        <th>Type</th>\n`
-      content += `      </tr>\n`
-      content += `    </thead>\n`
-      content += `    <tbody>\n`
-    }
-
-    // Skip props marked to be ignored
-    if (propInfo.tags?.ignore === '') {
-      continue
-    }
-
-    const displayName = propInfo.name || ''
-    const since = propInfo.tags?.since
-      ? `<span className="badge bg-success">${propInfo.tags.since}+</span>`
-      : ''
-    const deprecated = propInfo.tags?.deprecated
-      ? `<span className="badge bg-danger">Deprecated ${propInfo.tags.deprecated}</span>`
-      : ''
-    const description = propInfo.description
-      ? replaceText(component.displayName, 'description', propInfo.description)
-      : '-'
-    const type = propInfo.type
-      ? propInfo.type.name.includes('ReactElement')
-        ? 'ReactElement'
-        : propInfo.type.name
-      : ''
-    const defaultValue = propInfo.defaultValue ? `\`${propInfo.defaultValue.value}\`` : '-'
-    const example = propInfo.tags?.example
-      ? replaceText(component.displayName, 'example', propInfo.tags.example)
-      : false
-
-    // Format types as inline code
-    const types = splitOutsideBracesAndParentheses(type)
-      .map((_type) => `\`${_type.trim().replaceAll('"', "'")}\``)
-      .join(', ')
-
-    const id = `${component.displayName.toLowerCase()}-${propName.replaceAll(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`
-    const anchor = `<a href="#${id}" aria-label="${component.displayName} ${displayName} permalink" className="anchor-link after">#</a>`
-
-    content += `      <tr id="${id}">\n`
-    content += `        <td className="text-primary fw-semibold">${displayName}${anchor}${since}${deprecated}</td>\n`
-    content += `        <td>${escapeMarkdown(defaultValue)}</td>\n`
-    content += `        <td>${escapeMarkdown(types)}</td>\n`
-    content += `      </tr>\n`
-    content += `      <tr>\n`
-    content += `        <td colSpan="3">\n`
-    content += `          ${converter
-      .makeHtml(description)
-      .replaceAll(/<code>(.*?)<\/code>/g, '<code>{`$1`}</code>')
-      .replaceAll(/<code>{`&lt;(.*?)&gt;`}<\/code>/g, '<code>{`<$1>`}</code>')}\n`
-
-    if (example) {
-      content += `        <JSXDocs code={\`${example.trim()}\`} />\n`
-    }
-
-    content += `        </td>\n`
-    content += `      </tr>\n`
-  }
-
-  content += `    </tbody>\n`
-  content += `  </table>\n`
-  content += `</div>\n`
-
-  const outputDir = path.join('content', 'api')
-  const outputPath = path.join(outputDir, `${filename}.api.mdx`)
-
-  try {
-    await mkdir(outputDir, { recursive: true })
-    await writeFile(outputPath, content, { encoding: 'utf8' })
-    console.log(`File created: ${filename}.api.mdx`)
-  } catch (error) {
-    console.error(`Failed to write file ${outputPath}:`, error)
-  }
-}
-
-/**
- * Main execution function.
- */
-const main = async () => {
-  try {
-    const files = await globby(GLOB_PATTERNS, GLOBBY_OPTIONS)
-
-    for (const file of files) {
-      console.log(`Processing file: ${file}`)
-      let components
-      try {
-        components = parse(file, DOCGEN_OPTIONS)
-      } catch (parseError) {
-        console.error(`Failed to parse ${file}:`, parseError)
-        continue // Skip to the next file
-      }
-
-      if (components && components.length > 0) {
-        for (const component of components) {
-          await createMdx(file, component) // Sequentially create MDX files
-        }
-      }
-    }
-  } catch (error) {
-    console.error('An error occurred:', error)
-    process.exit(1)
-  }
-}
-
-// Execute the main function
-main()
diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx
deleted file mode 100644
index 296cb12a..00000000
--- a/packages/docs/content/api/CAccordion.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CAccordion } from '@coreui/react'
-// or
-import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="caccordion-active-item-key">
-        <td className="text-primary fw-semibold">activeItemKey<a href="#caccordion-active-item-key" aria-label="CAccordion activeItemKey permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The active item key.</p>
-        </td>
-      </tr>
-      <tr id="caccordion-always-open">
-        <td className="text-primary fw-semibold">alwaysOpen<a href="#caccordion-always-open" aria-label="CAccordion alwaysOpen permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Make accordion items stay open when another item is opened</p>
-        </td>
-      </tr>
-      <tr id="caccordion-class-name">
-        <td className="text-primary fw-semibold">className<a href="#caccordion-class-name" aria-label="CAccordion className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="caccordion-flush">
-        <td className="text-primary fw-semibold">flush<a href="#caccordion-flush" aria-label="CAccordion flush permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx
deleted file mode 100644
index fa507a2f..00000000
--- a/packages/docs/content/api/CAccordionBody.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CAccordionBody } from '@coreui/react'
-// or
-import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBody'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="caccordionbody-class-name">
-        <td className="text-primary fw-semibold">className<a href="#caccordionbody-class-name" aria-label="CAccordionBody className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx
deleted file mode 100644
index 67fb1438..00000000
--- a/packages/docs/content/api/CAccordionButton.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CAccordionButton } from '@coreui/react'
-// or
-import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionButton'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="caccordionbutton-class-name">
-        <td className="text-primary fw-semibold">className<a href="#caccordionbutton-class-name" aria-label="CAccordionButton className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx
deleted file mode 100644
index e3ea183f..00000000
--- a/packages/docs/content/api/CAccordionHeader.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CAccordionHeader } from '@coreui/react'
-// or
-import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionHeader'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="caccordionheader-class-name">
-        <td className="text-primary fw-semibold">className<a href="#caccordionheader-class-name" aria-label="CAccordionHeader className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx
deleted file mode 100644
index 8691cb6b..00000000
--- a/packages/docs/content/api/CAccordionItem.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CAccordionItem } from '@coreui/react'
-// or
-import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionItem'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="caccordionitem-class-name">
-        <td className="text-primary fw-semibold">className<a href="#caccordionitem-class-name" aria-label="CAccordionItem className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="caccordionitem-id">
-        <td className="text-primary fw-semibold">id<a href="#caccordionitem-id" aria-label="CAccordionItem id permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The id global attribute defines an identifier (ID) that must be unique in the whole document.</p>
-        </td>
-      </tr>
-      <tr id="caccordionitem-item-key">
-        <td className="text-primary fw-semibold">itemKey<a href="#caccordionitem-item-key" aria-label="CAccordionItem itemKey permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Item key.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx
deleted file mode 100644
index 3fc61b0f..00000000
--- a/packages/docs/content/api/CAlert.api.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-
-```jsx
-import { CAlert } from '@coreui/react'
-// or
-import CAlert from '@coreui/react/src/components/alert/CAlert'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="calert-class-name">
-        <td className="text-primary fw-semibold">className<a href="#calert-class-name" aria-label="CAlert className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="calert-color">
-        <td className="text-primary fw-semibold">color<a href="#calert-color" aria-label="CAlert color permalink" className="anchor-link after">#</a></td>
-        <td><code>{`primary`}</code></td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="calert-dismissible">
-        <td className="text-primary fw-semibold">dismissible<a href="#calert-dismissible" aria-label="CAlert dismissible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Optionally add a close button to alert and allow it to self dismiss.</p>
-        </td>
-      </tr>
-      <tr id="calert-on-close">
-        <td className="text-primary fw-semibold">onClose<a href="#calert-on-close" aria-label="CAlert onClose permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be closed.</p>
-        </td>
-      </tr>
-      <tr id="calert-variant">
-        <td className="text-primary fw-semibold">variant<a href="#calert-variant" aria-label="CAlert variant permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the alert variant to a solid.</p>
-        </td>
-      </tr>
-      <tr id="calert-visible">
-        <td className="text-primary fw-semibold">visible<a href="#calert-visible" aria-label="CAlert visible permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx
deleted file mode 100644
index c0a7e697..00000000
--- a/packages/docs/content/api/CAlertHeading.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CAlertHeading } from '@coreui/react'
-// or
-import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="calertheading-as">
-        <td className="text-primary fw-semibold">as<a href="#calertheading-as" aria-label="CAlertHeading as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h4')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="calertheading-class-name">
-        <td className="text-primary fw-semibold">className<a href="#calertheading-class-name" aria-label="CAlertHeading className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx
deleted file mode 100644
index 8130ef08..00000000
--- a/packages/docs/content/api/CAlertLink.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CAlertLink } from '@coreui/react'
-// or
-import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="calertlink-class-name">
-        <td className="text-primary fw-semibold">className<a href="#calertlink-class-name" aria-label="CAlertLink className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx
deleted file mode 100644
index 3b2746fb..00000000
--- a/packages/docs/content/api/CAvatar.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CAvatar } from '@coreui/react'
-// or
-import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cavatar-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cavatar-class-name" aria-label="CAvatar className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cavatar-color">
-        <td className="text-primary fw-semibold">color<a href="#cavatar-color" aria-label="CAvatar color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cavatar-shape">
-        <td className="text-primary fw-semibold">shape<a href="#cavatar-shape" aria-label="CAvatar shape permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Select the shape of the component.</p>
-        </td>
-      </tr>
-      <tr id="cavatar-size">
-        <td className="text-primary fw-semibold">size<a href="#cavatar-size" aria-label="CAvatar size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small, large, or extra large.</p>
-        </td>
-      </tr>
-      <tr id="cavatar-src">
-        <td className="text-primary fw-semibold">src<a href="#cavatar-src" aria-label="CAvatar src permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The src attribute for the img element.</p>
-        </td>
-      </tr>
-      <tr id="cavatar-status">
-        <td className="text-primary fw-semibold">status<a href="#cavatar-status" aria-label="CAvatar status permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the status indicator to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cavatar-text-color">
-        <td className="text-primary fw-semibold">textColor<a href="#cavatar-text-color" aria-label="CAvatar textColor permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the text color of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx
deleted file mode 100644
index 570bae5a..00000000
--- a/packages/docs/content/api/CBackdrop.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CBackdrop } from '@coreui/react'
-// or
-import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cbackdrop-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cbackdrop-class-name" aria-label="CBackdrop className permalink" className="anchor-link after">#</a></td>
-        <td><code>{`modal-backdrop`}</code></td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cbackdrop-visible">
-        <td className="text-primary fw-semibold">visible<a href="#cbackdrop-visible" aria-label="CBackdrop visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of modal component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx
deleted file mode 100644
index 3db91f39..00000000
--- a/packages/docs/content/api/CBadge.api.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
-
-```jsx
-import { CBadge } from '@coreui/react'
-// or
-import CBadge from '@coreui/react/src/components/badge/CBadge'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cbadge-as">
-        <td className="text-primary fw-semibold">as<a href="#cbadge-as" aria-label="CBadge as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'span')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cbadge-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cbadge-class-name" aria-label="CBadge className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cbadge-color">
-        <td className="text-primary fw-semibold">color<a href="#cbadge-color" aria-label="CBadge color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cbadge-position">
-        <td className="text-primary fw-semibold">position<a href="#cbadge-position" aria-label="CBadge position permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'top-start'`}</code>, <code>{`'top-end'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`'bottom-start'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Position badge in one of the corners of a link or button.</p>
-        </td>
-      </tr>
-      <tr id="cbadge-shape">
-        <td className="text-primary fw-semibold">shape<a href="#cbadge-shape" aria-label="CBadge shape permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Select the shape of the component.</p>
-        </td>
-      </tr>
-      <tr id="cbadge-size">
-        <td className="text-primary fw-semibold">size<a href="#cbadge-size" aria-label="CBadge size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small.</p>
-        </td>
-      </tr>
-      <tr id="cbadge-text-bg-color">
-        <td className="text-primary fw-semibold">textBgColor<a href="#cbadge-text-bg-color" aria-label="CBadge textBgColor permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</p>
-        </td>
-      </tr>
-      <tr id="cbadge-text-color">
-        <td className="text-primary fw-semibold">textColor<a href="#cbadge-text-color" aria-label="CBadge textColor permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the text color of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx
deleted file mode 100644
index e423b7c4..00000000
--- a/packages/docs/content/api/CBreadcrumb.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CBreadcrumb } from '@coreui/react'
-// or
-import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cbreadcrumb-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cbreadcrumb-class-name" aria-label="CBreadcrumb className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx
deleted file mode 100644
index 1a6c186f..00000000
--- a/packages/docs/content/api/CBreadcrumbItem.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CBreadcrumbItem } from '@coreui/react'
-// or
-import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumbItem'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cbreadcrumbitem-active">
-        <td className="text-primary fw-semibold">active<a href="#cbreadcrumbitem-active" aria-label="CBreadcrumbItem active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cbreadcrumbitem-as">
-        <td className="text-primary fw-semibold">as<a href="#cbreadcrumbitem-as" aria-label="CBreadcrumbItem as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.4.0+</span></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cbreadcrumbitem-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cbreadcrumbitem-class-name" aria-label="CBreadcrumbItem className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cbreadcrumbitem-href">
-        <td className="text-primary fw-semibold">href<a href="#cbreadcrumbitem-href" aria-label="CBreadcrumbItem href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The <code>{`href`}</code> attribute for the inner <code>{`<CLink>`}</code> component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx
deleted file mode 100644
index 47140b1a..00000000
--- a/packages/docs/content/api/CButton.api.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
-
-```jsx
-import { CButton } from '@coreui/react'
-// or
-import CButton from '@coreui/react/src/components/button/CButton'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cbutton-active">
-        <td className="text-primary fw-semibold">active<a href="#cbutton-active" aria-label="CButton active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-as">
-        <td className="text-primary fw-semibold">as<a href="#cbutton-as" aria-label="CButton as permalink" className="anchor-link after">#</a></td>
-        <td><code>{`button`}</code></td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'button')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cbutton-class-name" aria-label="CButton className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-color">
-        <td className="text-primary fw-semibold">color<a href="#cbutton-color" aria-label="CButton color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cbutton-disabled" aria-label="CButton disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-href">
-        <td className="text-primary fw-semibold">href<a href="#cbutton-href" aria-label="CButton href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-role">
-        <td className="text-primary fw-semibold">role<a href="#cbutton-role" aria-label="CButton role permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-shape">
-        <td className="text-primary fw-semibold">shape<a href="#cbutton-shape" aria-label="CButton shape permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Select the shape of the component.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-size">
-        <td className="text-primary fw-semibold">size<a href="#cbutton-size" aria-label="CButton size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small or large.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-type">
-        <td className="text-primary fw-semibold">type<a href="#cbutton-type" aria-label="CButton type permalink" className="anchor-link after">#</a></td>
-        <td><code>{`button`}</code></td>
-        <td><code>{`'button'`}</code>, <code>{`'submit'`}</code>, <code>{`'reset'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the type of button. Always specify the type attribute for the <code>{`<button>`}</code> element.<br />
-Different browsers may use different default types for the <code>{`<button>`}</code> element.</p>
-        </td>
-      </tr>
-      <tr id="cbutton-variant">
-        <td className="text-primary fw-semibold">variant<a href="#cbutton-variant" aria-label="CButton variant permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'outline'`}</code>, <code>{`'ghost'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the button variant to an outlined button or a ghost button.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CButtonGroup.api.mdx b/packages/docs/content/api/CButtonGroup.api.mdx
deleted file mode 100644
index fa96bcc3..00000000
--- a/packages/docs/content/api/CButtonGroup.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CButtonGroup } from '@coreui/react'
-// or
-import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cbuttongroup-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cbuttongroup-class-name" aria-label="CButtonGroup className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cbuttongroup-size">
-        <td className="text-primary fw-semibold">size<a href="#cbuttongroup-size" aria-label="CButtonGroup size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small or large.</p>
-        </td>
-      </tr>
-      <tr id="cbuttongroup-vertical">
-        <td className="text-primary fw-semibold">vertical<a href="#cbuttongroup-vertical" aria-label="CButtonGroup vertical permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CButtonToolbar.api.mdx b/packages/docs/content/api/CButtonToolbar.api.mdx
deleted file mode 100644
index 2bfb6c0d..00000000
--- a/packages/docs/content/api/CButtonToolbar.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CButtonToolbar } from '@coreui/react'
-// or
-import CButtonToolbar from '@coreui/react/src/components/button-group/CButtonToolbar'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cbuttontoolbar-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cbuttontoolbar-class-name" aria-label="CButtonToolbar className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCallout.api.mdx b/packages/docs/content/api/CCallout.api.mdx
deleted file mode 100644
index 63e8222e..00000000
--- a/packages/docs/content/api/CCallout.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CCallout } from '@coreui/react'
-// or
-import CCallout from '@coreui/react/src/components/callout/CCallout'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccallout-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccallout-class-name" aria-label="CCallout className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccallout-color">
-        <td className="text-primary fw-semibold">color<a href="#ccallout-color" aria-label="CCallout color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCard.api.mdx b/packages/docs/content/api/CCard.api.mdx
deleted file mode 100644
index 3f342cc4..00000000
--- a/packages/docs/content/api/CCard.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CCard } from '@coreui/react'
-// or
-import CCard from '@coreui/react/src/components/card/CCard'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccard-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccard-class-name" aria-label="CCard className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccard-color">
-        <td className="text-primary fw-semibold">color<a href="#ccard-color" aria-label="CCard color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="ccard-text-bg-color">
-        <td className="text-primary fw-semibold">textBgColor<a href="#ccard-text-bg-color" aria-label="CCard textBgColor permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.</p>
-        </td>
-      </tr>
-      <tr id="ccard-text-color">
-        <td className="text-primary fw-semibold">textColor<a href="#ccard-text-color" aria-label="CCard textColor permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the text color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardBody.api.mdx b/packages/docs/content/api/CCardBody.api.mdx
deleted file mode 100644
index c5c0ee2d..00000000
--- a/packages/docs/content/api/CCardBody.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CCardBody } from '@coreui/react'
-// or
-import CCardBody from '@coreui/react/src/components/card/CCardBody'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardbody-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardbody-class-name" aria-label="CCardBody className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardFooter.api.mdx b/packages/docs/content/api/CCardFooter.api.mdx
deleted file mode 100644
index 8a1b7124..00000000
--- a/packages/docs/content/api/CCardFooter.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CCardFooter } from '@coreui/react'
-// or
-import CCardFooter from '@coreui/react/src/components/card/CCardFooter'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardfooter-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardfooter-class-name" aria-label="CCardFooter className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardGroup.api.mdx b/packages/docs/content/api/CCardGroup.api.mdx
deleted file mode 100644
index 9c71e8cb..00000000
--- a/packages/docs/content/api/CCardGroup.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CCardGroup } from '@coreui/react'
-// or
-import CCardGroup from '@coreui/react/src/components/card/CCardGroup'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardgroup-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardgroup-class-name" aria-label="CCardGroup className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardHeader.api.mdx b/packages/docs/content/api/CCardHeader.api.mdx
deleted file mode 100644
index 4941a94d..00000000
--- a/packages/docs/content/api/CCardHeader.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CCardHeader } from '@coreui/react'
-// or
-import CCardHeader from '@coreui/react/src/components/card/CCardHeader'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardheader-as">
-        <td className="text-primary fw-semibold">as<a href="#ccardheader-as" aria-label="CCardHeader as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="ccardheader-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardheader-class-name" aria-label="CCardHeader className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardImage.api.mdx b/packages/docs/content/api/CCardImage.api.mdx
deleted file mode 100644
index 5694d515..00000000
--- a/packages/docs/content/api/CCardImage.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CCardImage } from '@coreui/react'
-// or
-import CCardImage from '@coreui/react/src/components/card/CCardImage'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardimage-as">
-        <td className="text-primary fw-semibold">as<a href="#ccardimage-as" aria-label="CCardImage as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'img')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="ccardimage-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardimage-class-name" aria-label="CCardImage className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccardimage-orientation">
-        <td className="text-primary fw-semibold">orientation<a href="#ccardimage-orientation" aria-label="CCardImage orientation permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'top'`}</code>, <code>{`'bottom'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Optionally orientate the image to the top, bottom, or make it overlaid across the card.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardImageOverlay.api.mdx b/packages/docs/content/api/CCardImageOverlay.api.mdx
deleted file mode 100644
index 779ea0b9..00000000
--- a/packages/docs/content/api/CCardImageOverlay.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CCardImageOverlay } from '@coreui/react'
-// or
-import CCardImageOverlay from '@coreui/react/src/components/card/CCardImageOverlay'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardimageoverlay-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardimageoverlay-class-name" aria-label="CCardImageOverlay className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardLink.api.mdx b/packages/docs/content/api/CCardLink.api.mdx
deleted file mode 100644
index 38164730..00000000
--- a/packages/docs/content/api/CCardLink.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CCardLink } from '@coreui/react'
-// or
-import CCardLink from '@coreui/react/src/components/card/CCardLink'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardlink-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardlink-class-name" aria-label="CCardLink className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccardlink-href">
-        <td className="text-primary fw-semibold">href<a href="#ccardlink-href" aria-label="CCardLink href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardSubtitle.api.mdx b/packages/docs/content/api/CCardSubtitle.api.mdx
deleted file mode 100644
index 9c49fea5..00000000
--- a/packages/docs/content/api/CCardSubtitle.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CCardSubtitle } from '@coreui/react'
-// or
-import CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardsubtitle-as">
-        <td className="text-primary fw-semibold">as<a href="#ccardsubtitle-as" aria-label="CCardSubtitle as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h6')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="ccardsubtitle-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardsubtitle-class-name" aria-label="CCardSubtitle className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardText.api.mdx b/packages/docs/content/api/CCardText.api.mdx
deleted file mode 100644
index ff4ff0d6..00000000
--- a/packages/docs/content/api/CCardText.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CCardText } from '@coreui/react'
-// or
-import CCardText from '@coreui/react/src/components/card/CCardText'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardtext-as">
-        <td className="text-primary fw-semibold">as<a href="#ccardtext-as" aria-label="CCardText as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'p')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="ccardtext-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardtext-class-name" aria-label="CCardText className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCardTitle.api.mdx b/packages/docs/content/api/CCardTitle.api.mdx
deleted file mode 100644
index a05940f4..00000000
--- a/packages/docs/content/api/CCardTitle.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CCardTitle } from '@coreui/react'
-// or
-import CCardTitle from '@coreui/react/src/components/card/CCardTitle'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccardtitle-as">
-        <td className="text-primary fw-semibold">as<a href="#ccardtitle-as" aria-label="CCardTitle as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h5')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="ccardtitle-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccardtitle-class-name" aria-label="CCardTitle className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCarousel.api.mdx b/packages/docs/content/api/CCarousel.api.mdx
deleted file mode 100644
index 067f171a..00000000
--- a/packages/docs/content/api/CCarousel.api.mdx
+++ /dev/null
@@ -1,140 +0,0 @@
-
-```jsx
-import { CCarousel } from '@coreui/react'
-// or
-import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccarousel-active-index">
-        <td className="text-primary fw-semibold">activeIndex<a href="#ccarousel-active-index" aria-label="CCarousel activeIndex permalink" className="anchor-link after">#</a></td>
-        <td><code>{`0`}</code></td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>index of the active item.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccarousel-class-name" aria-label="CCarousel className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-controls">
-        <td className="text-primary fw-semibold">controls<a href="#ccarousel-controls" aria-label="CCarousel controls permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Adding in the previous and next controls.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-dark">
-        <td className="text-primary fw-semibold">dark<a href="#ccarousel-dark" aria-label="CCarousel dark permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add darker controls, indicators, and captions.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-indicators">
-        <td className="text-primary fw-semibold">indicators<a href="#ccarousel-indicators" aria-label="CCarousel indicators permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Adding indicators at the bottom of the carousel for each item.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-interval">
-        <td className="text-primary fw-semibold">interval<a href="#ccarousel-interval" aria-label="CCarousel interval permalink" className="anchor-link after">#</a></td>
-        <td><code>{`5000`}</code></td>
-        <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-on-slid">
-        <td className="text-primary fw-semibold">onSlid<a href="#ccarousel-on-slid" aria-label="CCarousel onSlid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(active: number, direction: string) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when a slide transition end.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-on-slide">
-        <td className="text-primary fw-semibold">onSlide<a href="#ccarousel-on-slide" aria-label="CCarousel onSlide permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(active: number, direction: string) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when a slide transition starts.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-pause">
-        <td className="text-primary fw-semibold">pause<a href="#ccarousel-pause" aria-label="CCarousel pause permalink" className="anchor-link after">#</a></td>
-        <td><code>{`hover`}</code></td>
-        <td><code>{`boolean`}</code>, <code>{`'hover'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-touch">
-        <td className="text-primary fw-semibold">touch<a href="#ccarousel-touch" aria-label="CCarousel touch permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set whether the carousel should support left/right swipe interactions on touchscreen devices.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-transition">
-        <td className="text-primary fw-semibold">transition<a href="#ccarousel-transition" aria-label="CCarousel transition permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'slide'`}</code>, <code>{`'crossfade'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set type of the transition.</p>
-        </td>
-      </tr>
-      <tr id="ccarousel-wrap">
-        <td className="text-primary fw-semibold">wrap<a href="#ccarousel-wrap" aria-label="CCarousel wrap permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set whether the carousel should cycle continuously or have hard stops.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCarouselCaption.api.mdx b/packages/docs/content/api/CCarouselCaption.api.mdx
deleted file mode 100644
index 155f973a..00000000
--- a/packages/docs/content/api/CCarouselCaption.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CCarouselCaption } from '@coreui/react'
-// or
-import CCarouselCaption from '@coreui/react/src/components/carousel/CCarouselCaption'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccarouselcaption-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccarouselcaption-class-name" aria-label="CCarouselCaption className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCarouselItem.api.mdx b/packages/docs/content/api/CCarouselItem.api.mdx
deleted file mode 100644
index eedb86a1..00000000
--- a/packages/docs/content/api/CCarouselItem.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CCarouselItem } from '@coreui/react'
-// or
-import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccarouselitem-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccarouselitem-class-name" aria-label="CCarouselItem className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccarouselitem-interval">
-        <td className="text-primary fw-semibold">interval<a href="#ccarouselitem-interval" aria-label="CCarouselItem interval permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The amount of time to delay between automatically cycling an item.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CChart.api.mdx b/packages/docs/content/api/CChart.api.mdx
deleted file mode 100644
index 14787f9f..00000000
--- a/packages/docs/content/api/CChart.api.mdx
+++ /dev/null
@@ -1,170 +0,0 @@
-
-```jsx
-import { CChart } from '@coreui/react-chartjs'
-// or
-import CChart from '@coreui/react-chartjs/src/CChart'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cchart-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cchart-class-name" aria-label="CChart className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cchart-custom-tooltips">
-        <td className="text-primary fw-semibold">customTooltips<a href="#cchart-custom-tooltips" aria-label="CChart customTooltips permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Enables custom html based tooltips instead of standard tooltips.</p>
-        </td>
-      </tr>
-      <tr id="cchart-data">
-        <td className="text-primary fw-semibold">data<a href="#cchart-data" aria-label="CChart data permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ChartData\<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The data object that is passed into the Chart.js chart (more info).</p>
-        </td>
-      </tr>
-      <tr id="cchart-fallback-content">
-        <td className="text-primary fw-semibold">fallbackContent<a href="#cchart-fallback-content" aria-label="CChart fallbackContent permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`React.ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p>
-        </td>
-      </tr>
-      <tr id="cchart-get-dataset-at-event">
-        <td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchart-get-dataset-at-event" aria-label="CChart getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(dataset: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
-        </td>
-      </tr>
-      <tr id="cchart-get-element-at-event">
-        <td className="text-primary fw-semibold">getElementAtEvent<a href="#cchart-get-element-at-event" aria-label="CChart getElementAtEvent permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(element: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
-        </td>
-      </tr>
-      <tr id="cchart-get-elements-at-event">
-        <td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchart-get-elements-at-event" aria-label="CChart getElementsAtEvent permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(elements: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p>
-        </td>
-      </tr>
-      <tr id="cchart-height">
-        <td className="text-primary fw-semibold">height<a href="#cchart-height" aria-label="CChart height permalink" className="anchor-link after">#</a></td>
-        <td><code>{`150`}</code></td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Height attribute applied to the rendered canvas.</p>
-        </td>
-      </tr>
-      <tr id="cchart-id">
-        <td className="text-primary fw-semibold">id<a href="#cchart-id" aria-label="CChart id permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>ID attribute applied to the rendered canvas.</p>
-        </td>
-      </tr>
-      <tr id="cchart-options">
-        <td className="text-primary fw-semibold">options<a href="#cchart-options" aria-label="CChart options permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`_DeepPartialObject\<CoreChartOptions\<keyof ChartTypeRegistry> & ElementChartOptions\<keyof ChartTypeRegistry> & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The options object that is passed into the Chart.js chart.</p>
-        </td>
-      </tr>
-      <tr id="cchart-plugins">
-        <td className="text-primary fw-semibold">plugins<a href="#cchart-plugins" aria-label="CChart plugins permalink" className="anchor-link after">#</a></td>
-        <td><code>{`[]`}</code></td>
-        <td><code>{`Plugin\<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The plugins array that is passed into the Chart.js chart (more info)</p>
-        </td>
-      </tr>
-      <tr id="cchart-redraw">
-        <td className="text-primary fw-semibold">redraw<a href="#cchart-redraw" aria-label="CChart redraw permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>If true, will tear down and redraw chart on all updates.</p>
-        </td>
-      </tr>
-      <tr id="cchart-type">
-        <td className="text-primary fw-semibold">type<a href="#cchart-type" aria-label="CChart type permalink" className="anchor-link after">#</a></td>
-        <td><code>{`bar`}</code></td>
-        <td><code>{`{'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Chart.js chart type.</p>
-        </td>
-      </tr>
-      <tr id="cchart-width">
-        <td className="text-primary fw-semibold">width<a href="#cchart-width" aria-label="CChart width permalink" className="anchor-link after">#</a></td>
-        <td><code>{`300`}</code></td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Width attribute applied to the rendered canvas.</p>
-        </td>
-      </tr>
-      <tr id="cchart-wrapper">
-        <td className="text-primary fw-semibold">wrapper<a href="#cchart-wrapper" aria-label="CChart wrapper permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Put the chart into the wrapper div element.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx
deleted file mode 100644
index 79ff901e..00000000
--- a/packages/docs/content/api/CCharts.api.mdx
+++ /dev/null
@@ -1,160 +0,0 @@
-
-```jsx
-import { CChartBar } from '@coreui/react-chartjs'
-// or
-import CChartBar from '@coreui/react-chartjs/src/CCharts'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cchartbar-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cchartbar-class-name" aria-label="CChartBar className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-custom-tooltips">
-        <td className="text-primary fw-semibold">customTooltips<a href="#cchartbar-custom-tooltips" aria-label="CChartBar customTooltips permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Enables custom html based tooltips instead of standard tooltips.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-data">
-        <td className="text-primary fw-semibold">data<a href="#cchartbar-data" aria-label="CChartBar data permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ChartData\<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The data object that is passed into the Chart.js chart (more info).</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-fallback-content">
-        <td className="text-primary fw-semibold">fallbackContent<a href="#cchartbar-fallback-content" aria-label="CChartBar fallbackContent permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`React.ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-get-dataset-at-event">
-        <td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchartbar-get-dataset-at-event" aria-label="CChartBar getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(dataset: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-get-element-at-event">
-        <td className="text-primary fw-semibold">getElementAtEvent<a href="#cchartbar-get-element-at-event" aria-label="CChartBar getElementAtEvent permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(element: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-get-elements-at-event">
-        <td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchartbar-get-elements-at-event" aria-label="CChartBar getElementsAtEvent permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(elements: InteractionItem[], event: React.MouseEvent\<HTMLCanvasElement>) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-height">
-        <td className="text-primary fw-semibold">height<a href="#cchartbar-height" aria-label="CChartBar height permalink" className="anchor-link after">#</a></td>
-        <td><code>{`150`}</code></td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Height attribute applied to the rendered canvas.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-id">
-        <td className="text-primary fw-semibold">id<a href="#cchartbar-id" aria-label="CChartBar id permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>ID attribute applied to the rendered canvas.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-options">
-        <td className="text-primary fw-semibold">options<a href="#cchartbar-options" aria-label="CChartBar options permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`_DeepPartialObject\<CoreChartOptions\<keyof ChartTypeRegistry> & ElementChartOptions\<keyof ChartTypeRegistry> & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The options object that is passed into the Chart.js chart.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-plugins">
-        <td className="text-primary fw-semibold">plugins<a href="#cchartbar-plugins" aria-label="CChartBar plugins permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`Plugin\<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The plugins array that is passed into the Chart.js chart (more info)</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-redraw">
-        <td className="text-primary fw-semibold">redraw<a href="#cchartbar-redraw" aria-label="CChartBar redraw permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>If true, will tear down and redraw chart on all updates.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-width">
-        <td className="text-primary fw-semibold">width<a href="#cchartbar-width" aria-label="CChartBar width permalink" className="anchor-link after">#</a></td>
-        <td><code>{`300`}</code></td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Width attribute applied to the rendered canvas.</p>
-        </td>
-      </tr>
-      <tr id="cchartbar-wrapper">
-        <td className="text-primary fw-semibold">wrapper<a href="#cchartbar-wrapper" aria-label="CChartBar wrapper permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Put the chart into the wrapper div element.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx
deleted file mode 100644
index 5e87320d..00000000
--- a/packages/docs/content/api/CCloseButton.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CCloseButton } from '@coreui/react'
-// or
-import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cclosebutton-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cclosebutton-class-name" aria-label="CCloseButton className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cclosebutton-dark">
-        <td className="text-primary fw-semibold">dark<a href="#cclosebutton-dark" aria-label="CCloseButton dark permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Invert the default color.</p>
-        </td>
-      </tr>
-      <tr id="cclosebutton-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cclosebutton-disabled" aria-label="CCloseButton disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cclosebutton-white">
-        <td className="text-primary fw-semibold">white<a href="#cclosebutton-white" aria-label="CCloseButton white permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 5.0.0</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Change the default color to white.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx
deleted file mode 100644
index a4158913..00000000
--- a/packages/docs/content/api/CCol.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CCol } from '@coreui/react'
-// or
-import CCol from '@coreui/react/src/components/grid/CCol'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccol-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccol-class-name" aria-label="CCol className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccol-lg">
-        <td className="text-primary fw-semibold">lg<a href="#ccol-lg" aria-label="CCol lg permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on large devices (&lt;1200px).</p>
-        </td>
-      </tr>
-      <tr id="ccol-md">
-        <td className="text-primary fw-semibold">md<a href="#ccol-md" aria-label="CCol md permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on medium devices (&lt;992px).</p>
-        </td>
-      </tr>
-      <tr id="ccol-sm">
-        <td className="text-primary fw-semibold">sm<a href="#ccol-sm" aria-label="CCol sm permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on small devices (&lt;768px).</p>
-        </td>
-      </tr>
-      <tr id="ccol-xl">
-        <td className="text-primary fw-semibold">xl<a href="#ccol-xl" aria-label="CCol xl permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on X-Large devices (&lt;1400px).</p>
-        </td>
-      </tr>
-      <tr id="ccol-xs">
-        <td className="text-primary fw-semibold">xs<a href="#ccol-xs" aria-label="CCol xs permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on extra small devices (&lt;576px).</p>
-        </td>
-      </tr>
-      <tr id="ccol-xxl">
-        <td className="text-primary fw-semibold">xxl<a href="#ccol-xxl" aria-label="CCol xxl permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx
deleted file mode 100644
index c2943464..00000000
--- a/packages/docs/content/api/CCollapse.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CCollapse } from '@coreui/react'
-// or
-import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccollapse-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccollapse-class-name" aria-label="CCollapse className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccollapse-horizontal">
-        <td className="text-primary fw-semibold">horizontal<a href="#ccollapse-horizontal" aria-label="CCollapse horizontal permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set horizontal collapsing to transition the width instead of height.</p>
-        </td>
-      </tr>
-      <tr id="ccollapse-on-hide">
-        <td className="text-primary fw-semibold">onHide<a href="#ccollapse-on-hide" aria-label="CCollapse onHide permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be hidden.</p>
-        </td>
-      </tr>
-      <tr id="ccollapse-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#ccollapse-on-show" aria-label="CCollapse onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be shown.</p>
-        </td>
-      </tr>
-      <tr id="ccollapse-visible">
-        <td className="text-primary fw-semibold">visible<a href="#ccollapse-visible" aria-label="CCollapse visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx
deleted file mode 100644
index 9afb8ca0..00000000
--- a/packages/docs/content/api/CConditionalPortal.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CConditionalPortal } from '@coreui/react'
-// or
-import CConditionalPortal from '@coreui/react/src/components/conditional-portal/CConditionalPortal'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cconditionalportal-container">
-        <td className="text-primary fw-semibold">container<a href="#cconditionalportal-container" aria-label="CConditionalPortal container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
-        <td>-</td>
-        <td><code>{`DocumentFragment`}</code>, <code>{`Element`}</code>, <code>{`(() => DocumentFragment | Element)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>An HTML element or function that returns a single element, with <code>{`document.body`}</code> as the default.</p>
-        </td>
-      </tr>
-      <tr id="cconditionalportal-portal">
-        <td className="text-primary fw-semibold">portal<a href="#cconditionalportal-portal" aria-label="CConditionalPortal portal permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Render some children into a different part of the DOM</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx
deleted file mode 100644
index 86ab71f8..00000000
--- a/packages/docs/content/api/CContainer.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CContainer } from '@coreui/react'
-// or
-import CContainer from '@coreui/react/src/components/grid/CContainer'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ccontainer-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ccontainer-class-name" aria-label="CContainer className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ccontainer-fluid">
-        <td className="text-primary fw-semibold">fluid<a href="#ccontainer-fluid" aria-label="CContainer fluid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set container 100% wide, spanning the entire width of the viewport.</p>
-        </td>
-      </tr>
-      <tr id="ccontainer-lg">
-        <td className="text-primary fw-semibold">lg<a href="#ccontainer-lg" aria-label="CContainer lg permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set container 100% wide until large breakpoint.</p>
-        </td>
-      </tr>
-      <tr id="ccontainer-md">
-        <td className="text-primary fw-semibold">md<a href="#ccontainer-md" aria-label="CContainer md permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set container 100% wide until medium breakpoint.</p>
-        </td>
-      </tr>
-      <tr id="ccontainer-sm">
-        <td className="text-primary fw-semibold">sm<a href="#ccontainer-sm" aria-label="CContainer sm permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set container 100% wide until small breakpoint.</p>
-        </td>
-      </tr>
-      <tr id="ccontainer-xl">
-        <td className="text-primary fw-semibold">xl<a href="#ccontainer-xl" aria-label="CContainer xl permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set container 100% wide until X-large breakpoint.</p>
-        </td>
-      </tr>
-      <tr id="ccontainer-xxl">
-        <td className="text-primary fw-semibold">xxl<a href="#ccontainer-xxl" aria-label="CContainer xxl permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set container 100% wide until XX-large breakpoint.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx
deleted file mode 100644
index 765fbd96..00000000
--- a/packages/docs/content/api/CDropdown.api.mdx
+++ /dev/null
@@ -1,225 +0,0 @@
-
-```jsx
-import { CDropdown } from '@coreui/react'
-// or
-import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cdropdown-alignment">
-        <td className="text-primary fw-semibold">alignment<a href="#cdropdown-alignment" aria-label="CDropdown alignment permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'start'`}</code>, <code>{`'end'`}</code>, <code>{`{ xs: 'start' | 'end' }`}</code>, <code>{`{ sm: 'start' | 'end' }`}</code>, <code>{`{ md: 'start' | 'end' }`}</code>, <code>{`{ lg: 'start' | 'end' }`}</code>, <code>{`{ xl: 'start' | 'end'}`}</code>, <code>{`{ xxl: 'start' | 'end'}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the alignment of the React Dropdown Menu within this React Dropdown.</p>
-        <JSXDocs code={`// Align dropdown menu to the end on large devices, otherwise start
-<CDropdown alignment={{ lg: 'end', xs: 'start' }}>
-  <CDropdownToggle>Toggle dropdown</CDropdownToggle>
-  <CDropdownMenu>
-    <CDropdownItem>Action</CDropdownItem>
-    <CDropdownItem>Another Action</CDropdownItem>
-  </CDropdownMenu>
-</CDropdown>`} />
-        </td>
-      </tr>
-      <tr id="cdropdown-as">
-        <td className="text-primary fw-semibold">as<a href="#cdropdown-as" aria-label="CDropdown as permalink" className="anchor-link after">#</a></td>
-        <td><code>{`div`}</code></td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Determines the root node component (native HTML element or a custom React component) for the React Dropdown.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-auto-close">
-        <td className="text-primary fw-semibold">autoClose<a href="#cdropdown-auto-close" aria-label="CDropdown autoClose permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code>, <code>{`'inside'`}</code>, <code>{`'outside'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Configures automatic closing behavior for the React Dropdown:</p>
-<ul>
-<li><code>{`true`}</code> - Close on clicks inside or outside of the React Dropdown Menu.</li>
-<li><code>{`false`}</code> - Disable auto-close; manually call <code>{`hide`}</code> or <code>{`toggle`}</code> (also not closed by <code>{`Escape`}</code>).</li>
-<li><code>{`'inside'`}</code> - Close only when clicking inside the React Dropdown Menu.</li>
-<li><code>{`'outside'`}</code> - Close only when clicking outside the React Dropdown Menu.</li>
-</ul>
-        <JSXDocs code={`// Close only when user clicks outside of the menu
-<CDropdown autoClose="outside" />`} />
-        </td>
-      </tr>
-      <tr id="cdropdown-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cdropdown-class-name" aria-label="CDropdown className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Adds custom classes to the React Dropdown root element.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-container">
-        <td className="text-primary fw-semibold">container<a href="#cdropdown-container" aria-label="CDropdown container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
-        <td>-</td>
-        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to <code>{`document.body`}</code>.</p>
-        <JSXDocs code={`// Append the menu to a custom container
-const myContainer = document.getElementById('my-container')
-
-<CDropdown container={myContainer} />`} />
-        </td>
-      </tr>
-      <tr id="cdropdown-dark">
-        <td className="text-primary fw-semibold">dark<a href="#cdropdown-dark" aria-label="CDropdown dark permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-direction">
-        <td className="text-primary fw-semibold">direction<a href="#cdropdown-direction" aria-label="CDropdown direction permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'center'`}</code>, <code>{`'dropup'`}</code>, <code>{`'dropup-center'`}</code>, <code>{`'dropend'`}</code>, <code>{`'dropstart'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the direction of the React Dropdown.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-offset">
-        <td className="text-primary fw-semibold">offset<a href="#cdropdown-offset" aria-label="CDropdown offset permalink" className="anchor-link after">#</a></td>
-        <td><code>{`[0, 2]`}</code></td>
-        <td><code>{`[number, number]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.</p>
-        <JSXDocs code={`// Offset the menu 10px in X and 5px in Y direction
-<CDropdown offset={[10, 5]}>
-  ...
-</CDropdown>`} />
-        </td>
-      </tr>
-      <tr id="cdropdown-on-hide">
-        <td className="text-primary fw-semibold">onHide<a href="#cdropdown-on-hide" aria-label="CDropdown onHide permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired right before the React Dropdown becomes hidden.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#cdropdown-on-show" aria-label="CDropdown onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired immediately after the React Dropdown is displayed.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-placement">
-        <td className="text-primary fw-semibold">placement<a href="#cdropdown-placement" aria-label="CDropdown placement permalink" className="anchor-link after">#</a></td>
-        <td><code>{`bottom-start`}</code></td>
-        <td><code>{`'auto'`}</code>, <code>{`'auto-start'`}</code>, <code>{`'auto-end'`}</code>, <code>{`'top-end'`}</code>, <code>{`'top'`}</code>, <code>{`'top-start'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`'bottom'`}</code>, <code>{`'bottom-start'`}</code>, <code>{`'right-start'`}</code>, <code>{`'right'`}</code>, <code>{`'right-end'`}</code>, <code>{`'left-start'`}</code>, <code>{`'left'`}</code>, <code>{`'left-end'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Determines the placement of the React Dropdown Menu after Popper.js modifiers.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-popper">
-        <td className="text-primary fw-semibold">popper<a href="#cdropdown-popper" aria-label="CDropdown popper permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-popper-config">
-        <td className="text-primary fw-semibold">popperConfig<a href="#cdropdown-popper-config" aria-label="CDropdown popperConfig permalink" className="anchor-link after">#</a><span className="badge bg-success">5.5.0+</span></td>
-        <td>-</td>
-        <td><code>{`Partial\<Options>`}</code>, <code>{`((defaultPopperConfig: Partial\<Options>) => Partial\<Options>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. <a href="https://popper.js.org/docs/v2/constructors/#options">Read more</a></p>
-        <JSXDocs code={`// Providing a custom popper config
-<CDropdown
-  popperConfig={{
-    modifiers: [
-      {
-        name: 'flip',
-        options: { fallbackPlacements: ['bottom', 'top'] },
-      },
-    ],
-  }}
->...</CDropdown>`} />
-        </td>
-      </tr>
-      <tr id="cdropdown-portal">
-        <td className="text-primary fw-semibold">portal<a href="#cdropdown-portal" aria-label="CDropdown portal permalink" className="anchor-link after">#</a><span className="badge bg-success">4.8.0+</span></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-variant">
-        <td className="text-primary fw-semibold">variant<a href="#cdropdown-variant" aria-label="CDropdown variant permalink" className="anchor-link after">#</a></td>
-        <td><code>{`btn-group`}</code></td>
-        <td><code>{`'btn-group'`}</code>, <code>{`'dropdown'`}</code>, <code>{`'input-group'`}</code>, <code>{`'nav-item'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Defines the visual variant of the React Dropdown</p>
-        </td>
-      </tr>
-      <tr id="cdropdown-visible">
-        <td className="text-primary fw-semibold">visible<a href="#cdropdown-visible" aria-label="CDropdown visible permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Controls the visibility of the React Dropdown Menu:</p>
-<ul>
-<li><code>{`true`}</code> - Visible</li>
-<li><code>{`false`}</code> - Hidden</li>
-</ul>
-        <JSXDocs code={`// Programmatically manage the dropdown visibility
-const [visible, setVisible] = useState(false)
-
-<CDropdown visible={visible}>
-  ...
-</CDropdown>`} />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx
deleted file mode 100644
index 35021a7c..00000000
--- a/packages/docs/content/api/CDropdownDivider.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CDropdownDivider } from '@coreui/react'
-// or
-import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDivider'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cdropdowndivider-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cdropdowndivider-class-name" aria-label="CDropdownDivider className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx
deleted file mode 100644
index 60f8423c..00000000
--- a/packages/docs/content/api/CDropdownHeader.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CDropdownHeader } from '@coreui/react'
-// or
-import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHeader'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cdropdownheader-as">
-        <td className="text-primary fw-semibold">as<a href="#cdropdownheader-as" aria-label="CDropdownHeader as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h6')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdownheader-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cdropdownheader-class-name" aria-label="CDropdownHeader className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx
deleted file mode 100644
index 4bcb66a0..00000000
--- a/packages/docs/content/api/CDropdownItem.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CDropdownItem } from '@coreui/react'
-// or
-import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cdropdownitem-active">
-        <td className="text-primary fw-semibold">active<a href="#cdropdownitem-active" aria-label="CDropdownItem active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdownitem-as">
-        <td className="text-primary fw-semibold">as<a href="#cdropdownitem-as" aria-label="CDropdownItem as permalink" className="anchor-link after">#</a></td>
-        <td><code>{`a`}</code></td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdownitem-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cdropdownitem-class-name" aria-label="CDropdownItem className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdownitem-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cdropdownitem-disabled" aria-label="CDropdownItem disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdownitem-href">
-        <td className="text-primary fw-semibold">href<a href="#cdropdownitem-href" aria-label="CDropdownItem href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx
deleted file mode 100644
index b4a8456d..00000000
--- a/packages/docs/content/api/CDropdownItemPlain.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CDropdownItemPlain } from '@coreui/react'
-// or
-import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownItemPlain'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cdropdownitemplain-as">
-        <td className="text-primary fw-semibold">as<a href="#cdropdownitemplain-as" aria-label="CDropdownItemPlain as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'span')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdownitemplain-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cdropdownitemplain-class-name" aria-label="CDropdownItemPlain className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx
deleted file mode 100644
index 8aa5c1ef..00000000
--- a/packages/docs/content/api/CDropdownMenu.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CDropdownMenu } from '@coreui/react'
-// or
-import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cdropdownmenu-as">
-        <td className="text-primary fw-semibold">as<a href="#cdropdownmenu-as" aria-label="CDropdownMenu as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdownmenu-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cdropdownmenu-class-name" aria-label="CDropdownMenu className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx
deleted file mode 100644
index 7ec36a8e..00000000
--- a/packages/docs/content/api/CDropdownToggle.api.mdx
+++ /dev/null
@@ -1,170 +0,0 @@
-
-```jsx
-import { CDropdownToggle } from '@coreui/react'
-// or
-import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownToggle'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cdropdowntoggle-active">
-        <td className="text-primary fw-semibold">active<a href="#cdropdowntoggle-active" aria-label="CDropdownToggle active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-as">
-        <td className="text-primary fw-semibold">as<a href="#cdropdowntoggle-as" aria-label="CDropdownToggle as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ElementType`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-caret">
-        <td className="text-primary fw-semibold">caret<a href="#cdropdowntoggle-caret" aria-label="CDropdownToggle caret permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Enables pseudo element caret on toggler.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cdropdowntoggle-class-name" aria-label="CDropdownToggle className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-color">
-        <td className="text-primary fw-semibold">color<a href="#cdropdowntoggle-color" aria-label="CDropdownToggle color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-custom">
-        <td className="text-primary fw-semibold">custom<a href="#cdropdowntoggle-custom" aria-label="CDropdownToggle custom permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Create a custom toggler which accepts any content.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cdropdowntoggle-disabled" aria-label="CDropdownToggle disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-href">
-        <td className="text-primary fw-semibold">href<a href="#cdropdowntoggle-href" aria-label="CDropdownToggle href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-nav-link">
-        <td className="text-primary fw-semibold">navLink<a href="#cdropdowntoggle-nav-link" aria-label="CDropdownToggle navLink permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>If a dropdown <code>{`variant`}</code> is set to <code>{`nav-item`}</code> then render the toggler as a link instead of a button.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-role">
-        <td className="text-primary fw-semibold">role<a href="#cdropdowntoggle-role" aria-label="CDropdownToggle role permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-shape">
-        <td className="text-primary fw-semibold">shape<a href="#cdropdowntoggle-shape" aria-label="CDropdownToggle shape permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Select the shape of the component.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-size">
-        <td className="text-primary fw-semibold">size<a href="#cdropdowntoggle-size" aria-label="CDropdownToggle size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small or large.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-split">
-        <td className="text-primary fw-semibold">split<a href="#cdropdowntoggle-split" aria-label="CDropdownToggle split permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>{`.dropdown-toggle-split`}</code> className for proper spacing around the dropdown caret.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-trigger">
-        <td className="text-primary fw-semibold">trigger<a href="#cdropdowntoggle-trigger" aria-label="CDropdownToggle trigger permalink" className="anchor-link after">#</a></td>
-        <td><code>{`click`}</code></td>
-        <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</p>
-        </td>
-      </tr>
-      <tr id="cdropdowntoggle-variant">
-        <td className="text-primary fw-semibold">variant<a href="#cdropdowntoggle-variant" aria-label="CDropdownToggle variant permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'outline'`}</code>, <code>{`'ghost'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the button variant to an outlined button or a ghost button.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx
deleted file mode 100644
index a163a037..00000000
--- a/packages/docs/content/api/CFooter.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CFooter } from '@coreui/react'
-// or
-import CFooter from '@coreui/react/src/components/footer/CFooter'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cfooter-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cfooter-class-name" aria-label="CFooter className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cfooter-position">
-        <td className="text-primary fw-semibold">position<a href="#cfooter-position" aria-label="CFooter position permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'fixed'`}</code>, <code>{`'sticky'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Place footer in non-static positions.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx
deleted file mode 100644
index f5ad1ef4..00000000
--- a/packages/docs/content/api/CForm.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CForm } from '@coreui/react'
-// or
-import CForm from '@coreui/react/src/components/form/CForm'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cform-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cform-class-name" aria-label="CForm className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cform-validated">
-        <td className="text-primary fw-semibold">validated<a href="#cform-validated" aria-label="CForm validated permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Mark a form as validated. If you set it <code>{`true`}</code>, all validation styles will be applied to the forms component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx
deleted file mode 100644
index 04c01d5b..00000000
--- a/packages/docs/content/api/CFormCheck.api.mdx
+++ /dev/null
@@ -1,180 +0,0 @@
-
-```jsx
-import { CFormCheck } from '@coreui/react'
-// or
-import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformcheck-button">
-        <td className="text-primary fw-semibold">button<a href="#cformcheck-button" aria-label="CFormCheck button permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ButtonObject`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Create button-like checkboxes and radio buttons.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformcheck-class-name" aria-label="CFormCheck className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-feedback">
-        <td className="text-primary fw-semibold">feedback<a href="#cformcheck-feedback" aria-label="CFormCheck feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-feedback-invalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcheck-feedback-invalid" aria-label="CFormCheck feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-feedback-valid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcheck-feedback-valid" aria-label="CFormCheck feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-floating-label">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcheck-floating-label" aria-label="CFormCheck floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-hit-area">
-        <td className="text-primary fw-semibold">hitArea<a href="#cformcheck-hit-area" aria-label="CFormCheck hitArea permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'full'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets hit area to the full area of the component.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-id">
-        <td className="text-primary fw-semibold">id<a href="#cformcheck-id" aria-label="CFormCheck id permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The id global attribute defines an identifier (ID) that must be unique in the whole document.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-indeterminate">
-        <td className="text-primary fw-semibold">indeterminate<a href="#cformcheck-indeterminate" aria-label="CFormCheck indeterminate permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Input Checkbox indeterminate Property.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-inline">
-        <td className="text-primary fw-semibold">inline<a href="#cformcheck-inline" aria-label="CFormCheck inline permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Group checkboxes or radios on the same horizontal row.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-invalid">
-        <td className="text-primary fw-semibold">invalid<a href="#cformcheck-invalid" aria-label="CFormCheck invalid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to invalid.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-label">
-        <td className="text-primary fw-semibold">label<a href="#cformcheck-label" aria-label="CFormCheck label permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The element represents a caption for a component.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-reverse">
-        <td className="text-primary fw-semibold">reverse<a href="#cformcheck-reverse" aria-label="CFormCheck reverse permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Put checkboxes or radios on the opposite side.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-tooltip-feedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcheck-tooltip-feedback" aria-label="CFormCheck tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Display validation feedback in a styled tooltip.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-type">
-        <td className="text-primary fw-semibold">type<a href="#cformcheck-type" aria-label="CFormCheck type permalink" className="anchor-link after">#</a></td>
-        <td><code>{`checkbox`}</code></td>
-        <td><code>{`'checkbox'`}</code>, <code>{`'radio'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the type of component.</p>
-        </td>
-      </tr>
-      <tr id="cformcheck-valid">
-        <td className="text-primary fw-semibold">valid<a href="#cformcheck-valid" aria-label="CFormCheck valid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to valid.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx
deleted file mode 100644
index a664895d..00000000
--- a/packages/docs/content/api/CFormControlValidation.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CFormControlValidation } from '@coreui/react'
-// or
-import CFormControlValidation from '@coreui/react/src/components/form/CFormControlValidation'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformcontrolvalidation-feedback">
-        <td className="text-primary fw-semibold">feedback<a href="#cformcontrolvalidation-feedback" aria-label="CFormControlValidation feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolvalidation-feedback-invalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcontrolvalidation-feedback-invalid" aria-label="CFormControlValidation feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolvalidation-feedback-valid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcontrolvalidation-feedback-valid" aria-label="CFormControlValidation feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolvalidation-floating-label">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcontrolvalidation-floating-label" aria-label="CFormControlValidation floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolvalidation-invalid">
-        <td className="text-primary fw-semibold">invalid<a href="#cformcontrolvalidation-invalid" aria-label="CFormControlValidation invalid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to invalid.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolvalidation-tooltip-feedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcontrolvalidation-tooltip-feedback" aria-label="CFormControlValidation tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Display validation feedback in a styled tooltip.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolvalidation-valid">
-        <td className="text-primary fw-semibold">valid<a href="#cformcontrolvalidation-valid" aria-label="CFormControlValidation valid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to valid.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx
deleted file mode 100644
index 6169bf48..00000000
--- a/packages/docs/content/api/CFormControlWrapper.api.mdx
+++ /dev/null
@@ -1,120 +0,0 @@
-
-```jsx
-import { CFormControlWrapper } from '@coreui/react'
-// or
-import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlWrapper'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformcontrolwrapper-feedback">
-        <td className="text-primary fw-semibold">feedback<a href="#cformcontrolwrapper-feedback" aria-label="CFormControlWrapper feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-feedback-invalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformcontrolwrapper-feedback-invalid" aria-label="CFormControlWrapper feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-feedback-valid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformcontrolwrapper-feedback-valid" aria-label="CFormControlWrapper feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-floating-class-name">
-        <td className="text-primary fw-semibold">floatingClassName<a href="#cformcontrolwrapper-floating-class-name" aria-label="CFormControlWrapper floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the floating label wrapper.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-floating-label">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformcontrolwrapper-floating-label" aria-label="CFormControlWrapper floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-invalid">
-        <td className="text-primary fw-semibold">invalid<a href="#cformcontrolwrapper-invalid" aria-label="CFormControlWrapper invalid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to invalid.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-label">
-        <td className="text-primary fw-semibold">label<a href="#cformcontrolwrapper-label" aria-label="CFormControlWrapper label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add a caption for a component.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-text">
-        <td className="text-primary fw-semibold">text<a href="#cformcontrolwrapper-text" aria-label="CFormControlWrapper text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add helper text to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-tooltip-feedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformcontrolwrapper-tooltip-feedback" aria-label="CFormControlWrapper tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Display validation feedback in a styled tooltip.</p>
-        </td>
-      </tr>
-      <tr id="cformcontrolwrapper-valid">
-        <td className="text-primary fw-semibold">valid<a href="#cformcontrolwrapper-valid" aria-label="CFormControlWrapper valid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to valid.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx
deleted file mode 100644
index 19a38f2d..00000000
--- a/packages/docs/content/api/CFormFeedback.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CFormFeedback } from '@coreui/react'
-// or
-import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformfeedback-as">
-        <td className="text-primary fw-semibold">as<a href="#cformfeedback-as" aria-label="CFormFeedback as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cformfeedback-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformfeedback-class-name" aria-label="CFormFeedback className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformfeedback-invalid">
-        <td className="text-primary fw-semibold">invalid<a href="#cformfeedback-invalid" aria-label="CFormFeedback invalid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
-        </td>
-      </tr>
-      <tr id="cformfeedback-tooltip">
-        <td className="text-primary fw-semibold">tooltip<a href="#cformfeedback-tooltip" aria-label="CFormFeedback tooltip permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>If your form layout allows it, you can display validation feedback in a styled tooltip.</p>
-        </td>
-      </tr>
-      <tr id="cformfeedback-valid">
-        <td className="text-primary fw-semibold">valid<a href="#cformfeedback-valid" aria-label="CFormFeedback valid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to valid.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx
deleted file mode 100644
index 4fb9bbc1..00000000
--- a/packages/docs/content/api/CFormFloating.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CFormFloating } from '@coreui/react'
-// or
-import CFormFloating from '@coreui/react/src/components/form/CFormFloating'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformfloating-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformfloating-class-name" aria-label="CFormFloating className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx
deleted file mode 100644
index a5dbbbd9..00000000
--- a/packages/docs/content/api/CFormInput.api.mdx
+++ /dev/null
@@ -1,210 +0,0 @@
-
-```jsx
-import { CFormInput } from '@coreui/react'
-// or
-import CFormInput from '@coreui/react/src/components/form/CFormInput'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cforminput-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cforminput-class-name" aria-label="CFormInput className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-delay">
-        <td className="text-primary fw-semibold">delay<a href="#cforminput-delay" aria-label="CFormInput delay permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`number`}</code>, <code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cforminput-disabled" aria-label="CFormInput disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-feedback">
-        <td className="text-primary fw-semibold">feedback<a href="#cforminput-feedback" aria-label="CFormInput feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-feedback-invalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cforminput-feedback-invalid" aria-label="CFormInput feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-feedback-valid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cforminput-feedback-valid" aria-label="CFormInput feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-floating-class-name">
-        <td className="text-primary fw-semibold">floatingClassName<a href="#cforminput-floating-class-name" aria-label="CFormInput floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the floating label wrapper.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-floating-label">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cforminput-floating-label" aria-label="CFormInput floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-invalid">
-        <td className="text-primary fw-semibold">invalid<a href="#cforminput-invalid" aria-label="CFormInput invalid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to invalid.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-label">
-        <td className="text-primary fw-semibold">label<a href="#cforminput-label" aria-label="CFormInput label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add a caption for a component.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-on-change">
-        <td className="text-primary fw-semibold">onChange<a href="#cforminput-on-change" aria-label="CFormInput onChange permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-plain-text">
-        <td className="text-primary fw-semibold">plainText<a href="#cforminput-plain-text" aria-label="CFormInput plainText permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>{`readonly`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-read-only">
-        <td className="text-primary fw-semibold">readOnly<a href="#cforminput-read-only" aria-label="CFormInput readOnly permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the readonly state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-size">
-        <td className="text-primary fw-semibold">size<a href="#cforminput-size" aria-label="CFormInput size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small or large.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-text">
-        <td className="text-primary fw-semibold">text<a href="#cforminput-text" aria-label="CFormInput text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add helper text to the component.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-tooltip-feedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cforminput-tooltip-feedback" aria-label="CFormInput tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Display validation feedback in a styled tooltip.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-type">
-        <td className="text-primary fw-semibold">type<a href="#cforminput-type" aria-label="CFormInput type permalink" className="anchor-link after">#</a></td>
-        <td><code>{`text`}</code></td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the type of component.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-valid">
-        <td className="text-primary fw-semibold">valid<a href="#cforminput-valid" aria-label="CFormInput valid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to valid.</p>
-        </td>
-      </tr>
-      <tr id="cforminput-value">
-        <td className="text-primary fw-semibold">value<a href="#cforminput-value" aria-label="CFormInput value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The <code>{`value`}</code> attribute of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx
deleted file mode 100644
index ab70a347..00000000
--- a/packages/docs/content/api/CFormLabel.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CFormLabel } from '@coreui/react'
-// or
-import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformlabel-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformlabel-class-name" aria-label="CFormLabel className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformlabel-custom-class-name">
-        <td className="text-primary fw-semibold">customClassName<a href="#cformlabel-custom-class-name" aria-label="CFormLabel customClassName permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want to be applied to the component, and override standard className value.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx
deleted file mode 100644
index f60faa87..00000000
--- a/packages/docs/content/api/CFormRange.api.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
-
-```jsx
-import { CFormRange } from '@coreui/react'
-// or
-import CFormRange from '@coreui/react/src/components/form/CFormRange'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformrange-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformrange-class-name" aria-label="CFormRange className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformrange-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cformrange-disabled" aria-label="CFormRange disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cformrange-label">
-        <td className="text-primary fw-semibold">label<a href="#cformrange-label" aria-label="CFormRange label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add a caption for a component.</p>
-        </td>
-      </tr>
-      <tr id="cformrange-max">
-        <td className="text-primary fw-semibold">max<a href="#cformrange-max" aria-label="CFormRange max permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the maximum value for the component.</p>
-        </td>
-      </tr>
-      <tr id="cformrange-min">
-        <td className="text-primary fw-semibold">min<a href="#cformrange-min" aria-label="CFormRange min permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the minimum value for the component.</p>
-        </td>
-      </tr>
-      <tr id="cformrange-on-change">
-        <td className="text-primary fw-semibold">onChange<a href="#cformrange-on-change" aria-label="CFormRange onChange permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ChangeEventHandler\<HTMLInputElement>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
-        </td>
-      </tr>
-      <tr id="cformrange-read-only">
-        <td className="text-primary fw-semibold">readOnly<a href="#cformrange-read-only" aria-label="CFormRange readOnly permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the readonly state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cformrange-step">
-        <td className="text-primary fw-semibold">step<a href="#cformrange-step" aria-label="CFormRange step permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the interval between legal numbers in the component.</p>
-        </td>
-      </tr>
-      <tr id="cformrange-value">
-        <td className="text-primary fw-semibold">value<a href="#cformrange-value" aria-label="CFormRange value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The <code>{`value`}</code> attribute of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx
deleted file mode 100644
index 9b3db1a5..00000000
--- a/packages/docs/content/api/CFormSelect.api.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
-
-```jsx
-import { CFormSelect } from '@coreui/react'
-// or
-import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformselect-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformselect-class-name" aria-label="CFormSelect className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-feedback">
-        <td className="text-primary fw-semibold">feedback<a href="#cformselect-feedback" aria-label="CFormSelect feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-feedback-invalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformselect-feedback-invalid" aria-label="CFormSelect feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-feedback-valid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformselect-feedback-valid" aria-label="CFormSelect feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-floating-class-name">
-        <td className="text-primary fw-semibold">floatingClassName<a href="#cformselect-floating-class-name" aria-label="CFormSelect floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the floating label wrapper.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-floating-label">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformselect-floating-label" aria-label="CFormSelect floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-html-size">
-        <td className="text-primary fw-semibold">htmlSize<a href="#cformselect-html-size" aria-label="CFormSelect htmlSize permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the number of visible options in a drop-down list.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-invalid">
-        <td className="text-primary fw-semibold">invalid<a href="#cformselect-invalid" aria-label="CFormSelect invalid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to invalid.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-label">
-        <td className="text-primary fw-semibold">label<a href="#cformselect-label" aria-label="CFormSelect label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add a caption for a component.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-on-change">
-        <td className="text-primary fw-semibold">onChange<a href="#cformselect-on-change" aria-label="CFormSelect onChange permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ChangeEventHandler\<HTMLSelectElement>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-options">
-        <td className="text-primary fw-semibold">options<a href="#cformselect-options" aria-label="CFormSelect options permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`Option[]`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Options list of the select component. Available keys: <code>{`label`}</code>, <code>{`value`}</code>, <code>{`disabled`}</code>.<br />
-Examples:</p>
-<ul>
-<li><code>{`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}</code></li>
-<li><code>{`options={['js', 'html']}`}</code></li>
-</ul>
-        </td>
-      </tr>
-      <tr id="cformselect-size">
-        <td className="text-primary fw-semibold">size<a href="#cformselect-size" aria-label="CFormSelect size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small or large.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-text">
-        <td className="text-primary fw-semibold">text<a href="#cformselect-text" aria-label="CFormSelect text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add helper text to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-tooltip-feedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformselect-tooltip-feedback" aria-label="CFormSelect tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Display validation feedback in a styled tooltip.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-valid">
-        <td className="text-primary fw-semibold">valid<a href="#cformselect-valid" aria-label="CFormSelect valid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to valid.</p>
-        </td>
-      </tr>
-      <tr id="cformselect-value">
-        <td className="text-primary fw-semibold">value<a href="#cformselect-value" aria-label="CFormSelect value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The <code>{`value`}</code> attribute of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx
deleted file mode 100644
index a53296f0..00000000
--- a/packages/docs/content/api/CFormSwitch.api.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
-
-```jsx
-import { CFormSwitch } from '@coreui/react'
-// or
-import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformswitch-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformswitch-class-name" aria-label="CFormSwitch className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformswitch-id">
-        <td className="text-primary fw-semibold">id<a href="#cformswitch-id" aria-label="CFormSwitch id permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The id global attribute defines an identifier (ID) that must be unique in the whole document.</p>
-        </td>
-      </tr>
-      <tr id="cformswitch-invalid">
-        <td className="text-primary fw-semibold">invalid<a href="#cformswitch-invalid" aria-label="CFormSwitch invalid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to invalid.</p>
-        </td>
-      </tr>
-      <tr id="cformswitch-label">
-        <td className="text-primary fw-semibold">label<a href="#cformswitch-label" aria-label="CFormSwitch label permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The element represents a caption for a component.</p>
-        </td>
-      </tr>
-      <tr id="cformswitch-reverse">
-        <td className="text-primary fw-semibold">reverse<a href="#cformswitch-reverse" aria-label="CFormSwitch reverse permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Put switch on the opposite side.</p>
-        </td>
-      </tr>
-      <tr id="cformswitch-size">
-        <td className="text-primary fw-semibold">size<a href="#cformswitch-size" aria-label="CFormSwitch size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component large or extra large. Works only with <code>{`switch`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformswitch-type">
-        <td className="text-primary fw-semibold">type<a href="#cformswitch-type" aria-label="CFormSwitch type permalink" className="anchor-link after">#</a></td>
-        <td><code>{`checkbox`}</code></td>
-        <td><code>{`'checkbox'`}</code>, <code>{`'radio'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the type of component.</p>
-        </td>
-      </tr>
-      <tr id="cformswitch-valid">
-        <td className="text-primary fw-semibold">valid<a href="#cformswitch-valid" aria-label="CFormSwitch valid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to valid.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx
deleted file mode 100644
index 913a03b8..00000000
--- a/packages/docs/content/api/CFormText.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CFormText } from '@coreui/react'
-// or
-import CFormText from '@coreui/react/src/components/form/CFormText'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformtext-as">
-        <td className="text-primary fw-semibold">as<a href="#cformtext-as" aria-label="CFormText as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cformtext-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformtext-class-name" aria-label="CFormText className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx
deleted file mode 100644
index c1f9db42..00000000
--- a/packages/docs/content/api/CFormTextarea.api.mdx
+++ /dev/null
@@ -1,180 +0,0 @@
-
-```jsx
-import { CFormTextarea } from '@coreui/react'
-// or
-import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cformtextarea-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cformtextarea-class-name" aria-label="CFormTextarea className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cformtextarea-disabled" aria-label="CFormTextarea disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-feedback">
-        <td className="text-primary fw-semibold">feedback<a href="#cformtextarea-feedback" aria-label="CFormTextarea feedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-feedback-invalid">
-        <td className="text-primary fw-semibold">feedbackInvalid<a href="#cformtextarea-feedback-invalid" aria-label="CFormTextarea feedbackInvalid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable feedback.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-feedback-valid">
-        <td className="text-primary fw-semibold">feedbackValid<a href="#cformtextarea-feedback-valid" aria-label="CFormTextarea feedbackValid permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-floating-class-name">
-        <td className="text-primary fw-semibold">floatingClassName<a href="#cformtextarea-floating-class-name" aria-label="CFormTextarea floatingClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.5.0+</span></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the floating label wrapper.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-floating-label">
-        <td className="text-primary fw-semibold">floatingLabel<a href="#cformtextarea-floating-label" aria-label="CFormTextarea floatingLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, <code>{`:invalid`}</code> and <code>{`:valid`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-invalid">
-        <td className="text-primary fw-semibold">invalid<a href="#cformtextarea-invalid" aria-label="CFormTextarea invalid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to invalid.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-label">
-        <td className="text-primary fw-semibold">label<a href="#cformtextarea-label" aria-label="CFormTextarea label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add a caption for a component.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-on-change">
-        <td className="text-primary fw-semibold">onChange<a href="#cformtextarea-on-change" aria-label="CFormTextarea onChange permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ChangeEventHandler\<HTMLTextAreaElement>`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-plain-text">
-        <td className="text-primary fw-semibold">plainText<a href="#cformtextarea-plain-text" aria-label="CFormTextarea plainText permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side <code>{`readonly`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-read-only">
-        <td className="text-primary fw-semibold">readOnly<a href="#cformtextarea-read-only" aria-label="CFormTextarea readOnly permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the readonly state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-text">
-        <td className="text-primary fw-semibold">text<a href="#cformtextarea-text" aria-label="CFormTextarea text permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add helper text to the component.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-tooltip-feedback">
-        <td className="text-primary fw-semibold">tooltipFeedback<a href="#cformtextarea-tooltip-feedback" aria-label="CFormTextarea tooltipFeedback permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Display validation feedback in a styled tooltip.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-valid">
-        <td className="text-primary fw-semibold">valid<a href="#cformtextarea-valid" aria-label="CFormTextarea valid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set component validation state to valid.</p>
-        </td>
-      </tr>
-      <tr id="cformtextarea-value">
-        <td className="text-primary fw-semibold">value<a href="#cformtextarea-value" aria-label="CFormTextarea value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The <code>{`value`}</code> attribute of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx
deleted file mode 100644
index 44632878..00000000
--- a/packages/docs/content/api/CHeader.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CHeader } from '@coreui/react'
-// or
-import CHeader from '@coreui/react/src/components/header/CHeader'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cheader-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cheader-class-name" aria-label="CHeader className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cheader-container">
-        <td className="text-primary fw-semibold">container<a href="#cheader-container" aria-label="CHeader container permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'fluid'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Defines optional container wrapping children elements.</p>
-        </td>
-      </tr>
-      <tr id="cheader-position">
-        <td className="text-primary fw-semibold">position<a href="#cheader-position" aria-label="CHeader position permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'fixed'`}</code>, <code>{`'sticky'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Place header in non-static positions.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx
deleted file mode 100644
index 77a0ecc2..00000000
--- a/packages/docs/content/api/CHeaderBrand.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CHeaderBrand } from '@coreui/react'
-// or
-import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cheaderbrand-as">
-        <td className="text-primary fw-semibold">as<a href="#cheaderbrand-as" aria-label="CHeaderBrand as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cheaderbrand-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cheaderbrand-class-name" aria-label="CHeaderBrand className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx
deleted file mode 100644
index 1af7b1d8..00000000
--- a/packages/docs/content/api/CHeaderDivider.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CHeaderDivider } from '@coreui/react'
-// or
-import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cheaderdivider-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cheaderdivider-class-name" aria-label="CHeaderDivider className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx
deleted file mode 100644
index 79bb4e92..00000000
--- a/packages/docs/content/api/CHeaderNav.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CHeaderNav } from '@coreui/react'
-// or
-import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cheadernav-as">
-        <td className="text-primary fw-semibold">as<a href="#cheadernav-as" aria-label="CHeaderNav as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cheadernav-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cheadernav-class-name" aria-label="CHeaderNav className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx
deleted file mode 100644
index dab08603..00000000
--- a/packages/docs/content/api/CHeaderText.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CHeaderText } from '@coreui/react'
-// or
-import CHeaderText from '@coreui/react/src/components/header/CHeaderText'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cheadertext-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cheadertext-class-name" aria-label="CHeaderText className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx
deleted file mode 100644
index 0f15f26b..00000000
--- a/packages/docs/content/api/CHeaderToggler.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CHeaderToggler } from '@coreui/react'
-// or
-import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cheadertoggler-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cheadertoggler-class-name" aria-label="CHeaderToggler className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx
deleted file mode 100644
index 0e5e3056..00000000
--- a/packages/docs/content/api/CIcon.api.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
-
-```jsx
-import { CIcon } from '@coreui/icons-react'
-// or
-import CIcon from '@coreui/icons-react/src/CIcon'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cicon-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cicon-class-name" aria-label="CIcon className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cicon-content">
-        <td className="text-primary fw-semibold">content<a href="#cicon-content" aria-label="CIcon content permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 3.0</span></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Use <code>{`icon={...}`}</code> instead of</p>
-        </td>
-      </tr>
-      <tr id="cicon-custom-class-name">
-        <td className="text-primary fw-semibold">customClassName<a href="#cicon-custom-class-name" aria-label="CIcon customClassName permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</p>
-        </td>
-      </tr>
-      <tr id="cicon-height">
-        <td className="text-primary fw-semibold">height<a href="#cicon-height" aria-label="CIcon height permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The height attribute defines the vertical length of an icon.</p>
-        </td>
-      </tr>
-      <tr id="cicon-icon">
-        <td className="text-primary fw-semibold">icon<a href="#cicon-icon" aria-label="CIcon icon permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Name of the icon placed in React object or SVG content.</p>
-        </td>
-      </tr>
-      <tr id="cicon-name">
-        <td className="text-primary fw-semibold">name<a href="#cicon-name" aria-label="CIcon name permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 3.0</span></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Use <code>{`icon="..."`}</code> instead of</p>
-        </td>
-      </tr>
-      <tr id="cicon-size">
-        <td className="text-primary fw-semibold">size<a href="#cicon-size" aria-label="CIcon size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'custom'`}</code>, <code>{`'custom-size'`}</code>, <code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'3xl'`}</code>, <code>{`'4xl'`}</code>, <code>{`'5xl'`}</code>, <code>{`'6xl'`}</code>, <code>{`'7xl'`}</code>, <code>{`'8xl'`}</code>, <code>{`'9xl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.</p>
-        </td>
-      </tr>
-      <tr id="cicon-title">
-        <td className="text-primary fw-semibold">title<a href="#cicon-title" aria-label="CIcon title permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Title tag content.</p>
-        </td>
-      </tr>
-      <tr id="cicon-use">
-        <td className="text-primary fw-semibold">use<a href="#cicon-use" aria-label="CIcon use permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>If defined component will be rendered using 'use' tag.</p>
-        </td>
-      </tr>
-      <tr id="cicon-view-box">
-        <td className="text-primary fw-semibold">viewBox<a href="#cicon-view-box" aria-label="CIcon viewBox permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The viewBox attribute defines the position and dimension of an SVG viewport.</p>
-        </td>
-      </tr>
-      <tr id="cicon-width">
-        <td className="text-primary fw-semibold">width<a href="#cicon-width" aria-label="CIcon width permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The width attribute defines the horizontal length of an icon.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx
deleted file mode 100644
index 808446ad..00000000
--- a/packages/docs/content/api/CIconSvg.api.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-
-```jsx
-import { CIconSvg } from '@coreui/icons-react'
-// or
-import CIconSvg from '@coreui/icons-react/src/CIconSvg'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ciconsvg-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ciconsvg-class-name" aria-label="CIconSvg className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="ciconsvg-custom-class-name">
-        <td className="text-primary fw-semibold">customClassName<a href="#ciconsvg-custom-class-name" aria-label="CIconSvg customClassName permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</p>
-        </td>
-      </tr>
-      <tr id="ciconsvg-height">
-        <td className="text-primary fw-semibold">height<a href="#ciconsvg-height" aria-label="CIconSvg height permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The height attribute defines the vertical length of an icon.</p>
-        </td>
-      </tr>
-      <tr id="ciconsvg-size">
-        <td className="text-primary fw-semibold">size<a href="#ciconsvg-size" aria-label="CIconSvg size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'custom'`}</code>, <code>{`'custom-size'`}</code>, <code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'3xl'`}</code>, <code>{`'4xl'`}</code>, <code>{`'5xl'`}</code>, <code>{`'6xl'`}</code>, <code>{`'7xl'`}</code>, <code>{`'8xl'`}</code>, <code>{`'9xl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.</p>
-        </td>
-      </tr>
-      <tr id="ciconsvg-title">
-        <td className="text-primary fw-semibold">title<a href="#ciconsvg-title" aria-label="CIconSvg title permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Title tag content.</p>
-        </td>
-      </tr>
-      <tr id="ciconsvg-width">
-        <td className="text-primary fw-semibold">width<a href="#ciconsvg-width" aria-label="CIconSvg width permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The width attribute defines the horizontal length of an icon.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx
deleted file mode 100644
index de5157c7..00000000
--- a/packages/docs/content/api/CImage.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CImage } from '@coreui/react'
-// or
-import CImage from '@coreui/react/src/components/image/CImage'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cimage-align">
-        <td className="text-primary fw-semibold">align<a href="#cimage-align" aria-label="CImage align permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'start'`}</code>, <code>{`'center'`}</code>, <code>{`'end'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the horizontal aligment.</p>
-        </td>
-      </tr>
-      <tr id="cimage-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cimage-class-name" aria-label="CImage className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cimage-fluid">
-        <td className="text-primary fw-semibold">fluid<a href="#cimage-fluid" aria-label="CImage fluid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Make image responsive.</p>
-        </td>
-      </tr>
-      <tr id="cimage-rounded">
-        <td className="text-primary fw-semibold">rounded<a href="#cimage-rounded" aria-label="CImage rounded permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Make image rounded.</p>
-        </td>
-      </tr>
-      <tr id="cimage-thumbnail">
-        <td className="text-primary fw-semibold">thumbnail<a href="#cimage-thumbnail" aria-label="CImage thumbnail permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Give an image a rounded 1px border appearance.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx
deleted file mode 100644
index ed37df4f..00000000
--- a/packages/docs/content/api/CInputGroup.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CInputGroup } from '@coreui/react'
-// or
-import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cinputgroup-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cinputgroup-class-name" aria-label="CInputGroup className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cinputgroup-size">
-        <td className="text-primary fw-semibold">size<a href="#cinputgroup-size" aria-label="CInputGroup size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small or large.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx
deleted file mode 100644
index b067a1e9..00000000
--- a/packages/docs/content/api/CInputGroupText.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CInputGroupText } from '@coreui/react'
-// or
-import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cinputgrouptext-as">
-        <td className="text-primary fw-semibold">as<a href="#cinputgrouptext-as" aria-label="CInputGroupText as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'span')`}</code>, <code>{`(ElementType & 'form')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cinputgrouptext-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cinputgrouptext-class-name" aria-label="CInputGroupText className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx
deleted file mode 100644
index 714ce42e..00000000
--- a/packages/docs/content/api/CLink.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CLink } from '@coreui/react'
-// or
-import CLink from '@coreui/react/src/components/link/CLink'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="clink-active">
-        <td className="text-primary fw-semibold">active<a href="#clink-active" aria-label="CLink active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="clink-as">
-        <td className="text-primary fw-semibold">as<a href="#clink-as" aria-label="CLink as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="clink-class-name">
-        <td className="text-primary fw-semibold">className<a href="#clink-class-name" aria-label="CLink className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="clink-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#clink-disabled" aria-label="CLink disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="clink-href">
-        <td className="text-primary fw-semibold">href<a href="#clink-href" aria-label="CLink href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx
deleted file mode 100644
index 5846f702..00000000
--- a/packages/docs/content/api/CListGroup.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CListGroup } from '@coreui/react'
-// or
-import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="clistgroup-as">
-        <td className="text-primary fw-semibold">as<a href="#clistgroup-as" aria-label="CListGroup as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="clistgroup-class-name">
-        <td className="text-primary fw-semibold">className<a href="#clistgroup-class-name" aria-label="CListGroup className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="clistgroup-flush">
-        <td className="text-primary fw-semibold">flush<a href="#clistgroup-flush" aria-label="CListGroup flush permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., <code>{`<CCard>`}</code>).</p>
-        </td>
-      </tr>
-      <tr id="clistgroup-layout">
-        <td className="text-primary fw-semibold">layout<a href="#clistgroup-layout" aria-label="CListGroup layout permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'horizontal'`}</code>, <code>{`'horizontal-sm'`}</code>, <code>{`'horizontal-md'`}</code>, <code>{`'horizontal-lg'`}</code>, <code>{`'horizontal-xl'`}</code>, <code>{`'horizontal-xxl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specify a layout type.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx
deleted file mode 100644
index b2effb43..00000000
--- a/packages/docs/content/api/CListGroupItem.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CListGroupItem } from '@coreui/react'
-// or
-import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupItem'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="clistgroupitem-active">
-        <td className="text-primary fw-semibold">active<a href="#clistgroupitem-active" aria-label="CListGroupItem active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="clistgroupitem-as">
-        <td className="text-primary fw-semibold">as<a href="#clistgroupitem-as" aria-label="CListGroupItem as permalink" className="anchor-link after">#</a></td>
-        <td><code>{`li`}</code></td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="clistgroupitem-class-name">
-        <td className="text-primary fw-semibold">className<a href="#clistgroupitem-class-name" aria-label="CListGroupItem className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="clistgroupitem-color">
-        <td className="text-primary fw-semibold">color<a href="#clistgroupitem-color" aria-label="CListGroupItem color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="clistgroupitem-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#clistgroupitem-disabled" aria-label="CListGroupItem disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx
deleted file mode 100644
index a8e467cd..00000000
--- a/packages/docs/content/api/CModal.api.mdx
+++ /dev/null
@@ -1,180 +0,0 @@
-
-```jsx
-import { CModal } from '@coreui/react'
-// or
-import CModal from '@coreui/react/src/components/modal/CModal'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cmodal-alignment">
-        <td className="text-primary fw-semibold">alignment<a href="#cmodal-alignment" aria-label="CModal alignment permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'top'`}</code>, <code>{`'center'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Align the modal in the center or top of the screen.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-backdrop">
-        <td className="text-primary fw-semibold">backdrop<a href="#cmodal-backdrop" aria-label="CModal backdrop permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code>, <code>{`'static'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Apply a backdrop on body while modal is open.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cmodal-class-name" aria-label="CModal className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-container">
-        <td className="text-primary fw-semibold">container<a href="#cmodal-container" aria-label="CModal container permalink" className="anchor-link after">#</a><span className="badge bg-success">5.3.0+</span></td>
-        <td>-</td>
-        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-focus">
-        <td className="text-primary fw-semibold">focus<a href="#cmodal-focus" aria-label="CModal focus permalink" className="anchor-link after">#</a><span className="badge bg-success">4.10.0+</span></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Puts the focus on the modal when shown.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-fullscreen">
-        <td className="text-primary fw-semibold">fullscreen<a href="#cmodal-fullscreen" aria-label="CModal fullscreen permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set modal to covers the entire user viewport.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-keyboard">
-        <td className="text-primary fw-semibold">keyboard<a href="#cmodal-keyboard" aria-label="CModal keyboard permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Closes the modal when escape key is pressed.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-on-close">
-        <td className="text-primary fw-semibold">onClose<a href="#cmodal-on-close" aria-label="CModal onClose permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be closed.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-on-close-prevented">
-        <td className="text-primary fw-semibold">onClosePrevented<a href="#cmodal-on-close-prevented" aria-label="CModal onClosePrevented permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be closed.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#cmodal-on-show" aria-label="CModal onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-portal">
-        <td className="text-primary fw-semibold">portal<a href="#cmodal-portal" aria-label="CModal portal permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Generates modal using createPortal.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-scrollable">
-        <td className="text-primary fw-semibold">scrollable<a href="#cmodal-scrollable" aria-label="CModal scrollable permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Create a scrollable modal that allows scrolling the modal body.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-size">
-        <td className="text-primary fw-semibold">size<a href="#cmodal-size" aria-label="CModal size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small, large, or extra large.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-transition">
-        <td className="text-primary fw-semibold">transition<a href="#cmodal-transition" aria-label="CModal transition permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Remove animation to create modal that simply appear rather than fade in to view.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-unmount-on-close">
-        <td className="text-primary fw-semibold">unmountOnClose<a href="#cmodal-unmount-on-close" aria-label="CModal unmountOnClose permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</p>
-        </td>
-      </tr>
-      <tr id="cmodal-visible">
-        <td className="text-primary fw-semibold">visible<a href="#cmodal-visible" aria-label="CModal visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of modal component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx
deleted file mode 100644
index 6f12c3d7..00000000
--- a/packages/docs/content/api/CModalBody.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CModalBody } from '@coreui/react'
-// or
-import CModalBody from '@coreui/react/src/components/modal/CModalBody'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cmodalbody-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cmodalbody-class-name" aria-label="CModalBody className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx
deleted file mode 100644
index 0d4c4280..00000000
--- a/packages/docs/content/api/CModalContent.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CModalContent } from '@coreui/react'
-// or
-import CModalContent from '@coreui/react/src/components/modal/CModalContent'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cmodalcontent-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cmodalcontent-class-name" aria-label="CModalContent className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx
deleted file mode 100644
index a4d58792..00000000
--- a/packages/docs/content/api/CModalDialog.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CModalDialog } from '@coreui/react'
-// or
-import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cmodaldialog-alignment">
-        <td className="text-primary fw-semibold">alignment<a href="#cmodaldialog-alignment" aria-label="CModalDialog alignment permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'top'`}</code>, <code>{`'center'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Align the modal in the center or top of the screen.</p>
-        </td>
-      </tr>
-      <tr id="cmodaldialog-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cmodaldialog-class-name" aria-label="CModalDialog className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cmodaldialog-fullscreen">
-        <td className="text-primary fw-semibold">fullscreen<a href="#cmodaldialog-fullscreen" aria-label="CModalDialog fullscreen permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set modal to covers the entire user viewport.</p>
-        </td>
-      </tr>
-      <tr id="cmodaldialog-scrollable">
-        <td className="text-primary fw-semibold">scrollable<a href="#cmodaldialog-scrollable" aria-label="CModalDialog scrollable permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Does the modal dialog itself scroll, or does the whole dialog scroll within the window.</p>
-        </td>
-      </tr>
-      <tr id="cmodaldialog-size">
-        <td className="text-primary fw-semibold">size<a href="#cmodaldialog-size" aria-label="CModalDialog size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small, large, or extra large.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx
deleted file mode 100644
index 2ac39de7..00000000
--- a/packages/docs/content/api/CModalFooter.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CModalFooter } from '@coreui/react'
-// or
-import CModalFooter from '@coreui/react/src/components/modal/CModalFooter'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cmodalfooter-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cmodalfooter-class-name" aria-label="CModalFooter className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx
deleted file mode 100644
index 42f592c5..00000000
--- a/packages/docs/content/api/CModalHeader.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CModalHeader } from '@coreui/react'
-// or
-import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cmodalheader-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cmodalheader-class-name" aria-label="CModalHeader className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cmodalheader-close-button">
-        <td className="text-primary fw-semibold">closeButton<a href="#cmodalheader-close-button" aria-label="CModalHeader closeButton permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add a close button component to the header.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx
deleted file mode 100644
index 8bc445c1..00000000
--- a/packages/docs/content/api/CModalTitle.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CModalTitle } from '@coreui/react'
-// or
-import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cmodaltitle-as">
-        <td className="text-primary fw-semibold">as<a href="#cmodaltitle-as" aria-label="CModalTitle as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h5')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cmodaltitle-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cmodaltitle-class-name" aria-label="CModalTitle className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx
deleted file mode 100644
index bb8b1ddd..00000000
--- a/packages/docs/content/api/CNav.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CNav } from '@coreui/react'
-// or
-import CNav from '@coreui/react/src/components/nav/CNav'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnav-as">
-        <td className="text-primary fw-semibold">as<a href="#cnav-as" aria-label="CNav as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnav-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnav-class-name" aria-label="CNav className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cnav-layout">
-        <td className="text-primary fw-semibold">layout<a href="#cnav-layout" aria-label="CNav layout permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'fill'`}</code>, <code>{`'justified'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specify a layout type for component.</p>
-        </td>
-      </tr>
-      <tr id="cnav-variant">
-        <td className="text-primary fw-semibold">variant<a href="#cnav-variant" aria-label="CNav variant permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'pills'`}</code>, <code>{`'tabs'`}</code>, <code>{`'underline'`}</code>, <code>{`'underline-border'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the nav variant to tabs or pills.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx
deleted file mode 100644
index 590fdd74..00000000
--- a/packages/docs/content/api/CNavGroup.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CNavGroup } from '@coreui/react'
-// or
-import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavgroup-as">
-        <td className="text-primary fw-semibold">as<a href="#cnavgroup-as" aria-label="CNavGroup as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnavgroup-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavgroup-class-name" aria-label="CNavGroup className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavgroup-compact">
-        <td className="text-primary fw-semibold">compact<a href="#cnavgroup-compact" aria-label="CNavGroup compact permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Make nav group more compact by cutting all <code>{`padding`}</code> in half.</p>
-        </td>
-      </tr>
-      <tr id="cnavgroup-toggler">
-        <td className="text-primary fw-semibold">toggler<a href="#cnavgroup-toggler" aria-label="CNavGroup toggler permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set group toggler label.</p>
-        </td>
-      </tr>
-      <tr id="cnavgroup-visible">
-        <td className="text-primary fw-semibold">visible<a href="#cnavgroup-visible" aria-label="CNavGroup visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Show nav group items.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx
deleted file mode 100644
index b3cd73c9..00000000
--- a/packages/docs/content/api/CNavGroupItems.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CNavGroupItems } from '@coreui/react'
-// or
-import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavgroupitems-as">
-        <td className="text-primary fw-semibold">as<a href="#cnavgroupitems-as" aria-label="CNavGroupItems as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnavgroupitems-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavgroupitems-class-name" aria-label="CNavGroupItems className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx
deleted file mode 100644
index 9705e93b..00000000
--- a/packages/docs/content/api/CNavItem.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CNavItem } from '@coreui/react'
-// or
-import CNavItem from '@coreui/react/src/components/nav/CNavItem'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavitem-active">
-        <td className="text-primary fw-semibold">active<a href="#cnavitem-active" aria-label="CNavItem active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavitem-as">
-        <td className="text-primary fw-semibold">as<a href="#cnavitem-as" aria-label="CNavItem as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnavitem-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavitem-class-name" aria-label="CNavItem className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavitem-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cnavitem-disabled" aria-label="CNavItem disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavitem-href">
-        <td className="text-primary fw-semibold">href<a href="#cnavitem-href" aria-label="CNavItem href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx
deleted file mode 100644
index d99db6a8..00000000
--- a/packages/docs/content/api/CNavLink.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CNavLink } from '@coreui/react'
-// or
-import CNavLink from '@coreui/react/src/components/nav/CNavLink'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavlink-active">
-        <td className="text-primary fw-semibold">active<a href="#cnavlink-active" aria-label="CNavLink active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavlink-as">
-        <td className="text-primary fw-semibold">as<a href="#cnavlink-as" aria-label="CNavLink as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'cite')`}</code>, <code>{`(ElementType & 'data')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnavlink-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavlink-class-name" aria-label="CNavLink className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavlink-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cnavlink-disabled" aria-label="CNavLink disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavlink-href">
-        <td className="text-primary fw-semibold">href<a href="#cnavlink-href" aria-label="CNavLink href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx
deleted file mode 100644
index b393d3d7..00000000
--- a/packages/docs/content/api/CNavTitle.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CNavTitle } from '@coreui/react'
-// or
-import CNavTitle from '@coreui/react/src/components/nav/CNavTitle'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavtitle-as">
-        <td className="text-primary fw-semibold">as<a href="#cnavtitle-as" aria-label="CNavTitle as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'li')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnavtitle-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavtitle-class-name" aria-label="CNavTitle className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx
deleted file mode 100644
index f26f79ea..00000000
--- a/packages/docs/content/api/CNavbar.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CNavbar } from '@coreui/react'
-// or
-import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavbar-as">
-        <td className="text-primary fw-semibold">as<a href="#cnavbar-as" aria-label="CNavbar as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'nav')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnavbar-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavbar-class-name" aria-label="CNavbar className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavbar-color">
-        <td className="text-primary fw-semibold">color<a href="#cnavbar-color" aria-label="CNavbar color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cnavbar-color-scheme">
-        <td className="text-primary fw-semibold">colorScheme<a href="#cnavbar-color-scheme" aria-label="CNavbar colorScheme permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'dark'`}</code>, <code>{`'light'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets if the color of text should be colored for a light or dark background.</p>
-        </td>
-      </tr>
-      <tr id="cnavbar-container">
-        <td className="text-primary fw-semibold">container<a href="#cnavbar-container" aria-label="CNavbar container permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'fluid'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Defines optional container wrapping children elements.</p>
-        </td>
-      </tr>
-      <tr id="cnavbar-expand">
-        <td className="text-primary fw-semibold">expand<a href="#cnavbar-expand" aria-label="CNavbar expand permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Defines the responsive breakpoint to determine when content collapses.</p>
-        </td>
-      </tr>
-      <tr id="cnavbar-placement">
-        <td className="text-primary fw-semibold">placement<a href="#cnavbar-placement" aria-label="CNavbar placement permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'fixed-top'`}</code>, <code>{`'fixed-bottom'`}</code>, <code>{`'sticky-top'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Place component in non-static positions.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx
deleted file mode 100644
index c05b546e..00000000
--- a/packages/docs/content/api/CNavbarBrand.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CNavbarBrand } from '@coreui/react'
-// or
-import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavbarbrand-as">
-        <td className="text-primary fw-semibold">as<a href="#cnavbarbrand-as" aria-label="CNavbarBrand as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnavbarbrand-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavbarbrand-class-name" aria-label="CNavbarBrand className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cnavbarbrand-href">
-        <td className="text-primary fw-semibold">href<a href="#cnavbarbrand-href" aria-label="CNavbarBrand href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx
deleted file mode 100644
index 14d1c0e7..00000000
--- a/packages/docs/content/api/CNavbarNav.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CNavbarNav } from '@coreui/react'
-// or
-import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavbarnav-as">
-        <td className="text-primary fw-semibold">as<a href="#cnavbarnav-as" aria-label="CNavbarNav as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cnavbarnav-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavbarnav-class-name" aria-label="CNavbarNav className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx
deleted file mode 100644
index 716bc9a8..00000000
--- a/packages/docs/content/api/CNavbarText.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CNavbarText } from '@coreui/react'
-// or
-import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavbartext-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavbartext-class-name" aria-label="CNavbarText className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx
deleted file mode 100644
index 94849ee1..00000000
--- a/packages/docs/content/api/CNavbarToggler.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CNavbarToggler } from '@coreui/react'
-// or
-import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cnavbartoggler-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cnavbartoggler-class-name" aria-label="CNavbarToggler className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx
deleted file mode 100644
index 57ddbfb8..00000000
--- a/packages/docs/content/api/COffcanvas.api.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
-
-```jsx
-import { COffcanvas } from '@coreui/react'
-// or
-import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="coffcanvas-backdrop">
-        <td className="text-primary fw-semibold">backdrop<a href="#coffcanvas-backdrop" aria-label="COffcanvas backdrop permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code>, <code>{`'static'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Apply a backdrop on body while offcanvas is open.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-class-name">
-        <td className="text-primary fw-semibold">className<a href="#coffcanvas-class-name" aria-label="COffcanvas className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-dark">
-        <td className="text-primary fw-semibold">dark<a href="#coffcanvas-dark" aria-label="COffcanvas dark permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets a darker color scheme.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-keyboard">
-        <td className="text-primary fw-semibold">keyboard<a href="#coffcanvas-keyboard" aria-label="COffcanvas keyboard permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Closes the offcanvas when escape key is pressed.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-on-hide">
-        <td className="text-primary fw-semibold">onHide<a href="#coffcanvas-on-hide" aria-label="COffcanvas onHide permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be hidden.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#coffcanvas-on-show" aria-label="COffcanvas onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be shown.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-placement">
-        <td className="text-primary fw-semibold">placement<a href="#coffcanvas-placement" aria-label="COffcanvas placement permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'start'`}</code>, <code>{`'end'`}</code>, <code>{`'top'`}</code>, <code>{`'bottom'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Components placement, there’s no default placement.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-portal">
-        <td className="text-primary fw-semibold">portal<a href="#coffcanvas-portal" aria-label="COffcanvas portal permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Generates modal using createPortal.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-responsive">
-        <td className="text-primary fw-semibold">responsive<a href="#coffcanvas-responsive" aria-label="COffcanvas responsive permalink" className="anchor-link after">#</a><span className="badge bg-success">4.6.0+</span></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-scroll">
-        <td className="text-primary fw-semibold">scroll<a href="#coffcanvas-scroll" aria-label="COffcanvas scroll permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Allow body scrolling while offcanvas is open</p>
-        </td>
-      </tr>
-      <tr id="coffcanvas-visible">
-        <td className="text-primary fw-semibold">visible<a href="#coffcanvas-visible" aria-label="COffcanvas visible permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of offcanvas component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx
deleted file mode 100644
index 7baef6ab..00000000
--- a/packages/docs/content/api/COffcanvasBody.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { COffcanvasBody } from '@coreui/react'
-// or
-import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBody'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="coffcanvasbody-class-name">
-        <td className="text-primary fw-semibold">className<a href="#coffcanvasbody-class-name" aria-label="COffcanvasBody className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx
deleted file mode 100644
index 02b1c5a1..00000000
--- a/packages/docs/content/api/COffcanvasHeader.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { COffcanvasHeader } from '@coreui/react'
-// or
-import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasHeader'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="coffcanvasheader-class-name">
-        <td className="text-primary fw-semibold">className<a href="#coffcanvasheader-class-name" aria-label="COffcanvasHeader className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx
deleted file mode 100644
index 05b4767e..00000000
--- a/packages/docs/content/api/COffcanvasTitle.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { COffcanvasTitle } from '@coreui/react'
-// or
-import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="coffcanvastitle-as">
-        <td className="text-primary fw-semibold">as<a href="#coffcanvastitle-as" aria-label="COffcanvasTitle as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'h5')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="coffcanvastitle-class-name">
-        <td className="text-primary fw-semibold">className<a href="#coffcanvastitle-class-name" aria-label="COffcanvasTitle className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx
deleted file mode 100644
index 22d8773a..00000000
--- a/packages/docs/content/api/CPagination.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CPagination } from '@coreui/react'
-// or
-import CPagination from '@coreui/react/src/components/pagination/CPagination'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cpagination-align">
-        <td className="text-primary fw-semibold">align<a href="#cpagination-align" aria-label="CPagination align permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'start'`}</code>, <code>{`'center'`}</code>, <code>{`'end'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the alignment of pagination components.</p>
-        </td>
-      </tr>
-      <tr id="cpagination-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cpagination-class-name" aria-label="CPagination className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cpagination-size">
-        <td className="text-primary fw-semibold">size<a href="#cpagination-size" aria-label="CPagination size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small or large.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx
deleted file mode 100644
index 3587dabe..00000000
--- a/packages/docs/content/api/CPaginationItem.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CPaginationItem } from '@coreui/react'
-// or
-import CPaginationItem from '@coreui/react/src/components/pagination/CPaginationItem'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cpaginationitem-active">
-        <td className="text-primary fw-semibold">active<a href="#cpaginationitem-active" aria-label="CPaginationItem active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="cpaginationitem-as">
-        <td className="text-primary fw-semibold">as<a href="#cpaginationitem-as" aria-label="CPaginationItem as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass\<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent\<any>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cpaginationitem-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#cpaginationitem-disabled" aria-label="CPaginationItem disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx
deleted file mode 100644
index ad81da9e..00000000
--- a/packages/docs/content/api/CPlaceholder.api.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
-
-```jsx
-import { CPlaceholder } from '@coreui/react'
-// or
-import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cplaceholder-animation">
-        <td className="text-primary fw-semibold">animation<a href="#cplaceholder-animation" aria-label="CPlaceholder animation permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'glow'`}</code>, <code>{`'wave'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set animation type to better convey the perception of something being actively loaded.</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-as">
-        <td className="text-primary fw-semibold">as<a href="#cplaceholder-as" aria-label="CPlaceholder as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'span')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cplaceholder-class-name" aria-label="CPlaceholder className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-color">
-        <td className="text-primary fw-semibold">color<a href="#cplaceholder-color" aria-label="CPlaceholder color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-lg">
-        <td className="text-primary fw-semibold">lg<a href="#cplaceholder-lg" aria-label="CPlaceholder lg permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns on large devices (&lt;1200px).</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-md">
-        <td className="text-primary fw-semibold">md<a href="#cplaceholder-md" aria-label="CPlaceholder md permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns on medium devices (&lt;992px).</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-size">
-        <td className="text-primary fw-semibold">size<a href="#cplaceholder-size" aria-label="CPlaceholder size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'xs'`}</code>, <code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component extra small, small, or large.</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-sm">
-        <td className="text-primary fw-semibold">sm<a href="#cplaceholder-sm" aria-label="CPlaceholder sm permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns on small devices (&lt;768px).</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-xl">
-        <td className="text-primary fw-semibold">xl<a href="#cplaceholder-xl" aria-label="CPlaceholder xl permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns on X-Large devices (&lt;1400px).</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-xs">
-        <td className="text-primary fw-semibold">xs<a href="#cplaceholder-xs" aria-label="CPlaceholder xs permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns on extra small devices (&lt;576px).</p>
-        </td>
-      </tr>
-      <tr id="cplaceholder-xxl">
-        <td className="text-primary fw-semibold">xxl<a href="#cplaceholder-xxl" aria-label="CPlaceholder xxl permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns on XX-Large devices (≥1400px).</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx
deleted file mode 100644
index 1f381f44..00000000
--- a/packages/docs/content/api/CPopover.api.mdx
+++ /dev/null
@@ -1,202 +0,0 @@
-
-```jsx
-import { CPopover } from '@coreui/react'
-// or
-import CPopover from '@coreui/react/src/components/popover/CPopover'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cpopover-animation">
-        <td className="text-primary fw-semibold">animation<a href="#cpopover-animation" aria-label="CPopover animation permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Adds a fade transition animation to the React Popover.</p>
-        </td>
-      </tr>
-      <tr id="cpopover-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cpopover-class-name" aria-label="CPopover className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Custom class name(s) for additional styling.</p>
-        </td>
-      </tr>
-      <tr id="cpopover-container">
-        <td className="text-primary fw-semibold">container<a href="#cpopover-container" aria-label="CPopover container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
-        <td><code>{`document.body`}</code></td>
-        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Defines the container element to which the React Popover is appended.<br />
-Accepts:</p>
-<ul>
-<li>A DOM element (<code>{`HTMLElement`}</code> or <code>{`DocumentFragment`}</code>)</li>
-<li>A function that returns a single element</li>
-<li><code>{`null`}</code> (defaults to <code>{`document.body`}</code>)</li>
-</ul>
-        <JSXDocs code={`<CPopover container={document.getElementById('my-container')}>...</CPopover>`} />
-        </td>
-      </tr>
-      <tr id="cpopover-content">
-        <td className="text-primary fw-semibold">content<a href="#cpopover-content" aria-label="CPopover content permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Main content of the React Popover. It can be a string or any valid React node.</p>
-        </td>
-      </tr>
-      <tr id="cpopover-delay">
-        <td className="text-primary fw-semibold">delay<a href="#cpopover-delay" aria-label="CPopover delay permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
-        <td><code>{`0`}</code></td>
-        <td><code>{`number`}</code>, <code>{`{ show: number; hide: number; }`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Delay (in milliseconds) before showing or hiding the React Popover.</p>
-<ul>
-<li>If a number is provided, that delay applies to both "show" and "hide".</li>
-<li>If an object is provided, use separate values for "show" and "hide".</li>
-</ul>
-        <JSXDocs code={`// Delays 300ms on both show and hide
-<CPopover delay={300}>...</CPopover>
-
-// Delays 500ms on show and 100ms on hide
-<CPopover delay={{ show: 500, hide: 100 }}>...</CPopover>`} />
-        </td>
-      </tr>
-      <tr id="cpopover-fallback-placements">
-        <td className="text-primary fw-semibold">fallbackPlacements<a href="#cpopover-fallback-placements" aria-label="CPopover fallbackPlacements permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
-        <td><code>{`['top', 'right', 'bottom', 'left']`}</code></td>
-        <td><code>{`'top', 'right', 'bottom', 'left'`}</code>, <code>{`('top', 'right', 'bottom', 'left')[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the fallback placements when the preferred <code>{`placement`}</code> cannot be met.</p>
-        </td>
-      </tr>
-      <tr id="cpopover-offset">
-        <td className="text-primary fw-semibold">offset<a href="#cpopover-offset" aria-label="CPopover offset permalink" className="anchor-link after">#</a></td>
-        <td><code>{`[0, 8]`}</code></td>
-        <td><code>{`[number, number]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Offset of the React Popover relative to its toggle element, in the form <code>{`[x, y]`}</code>.</p>
-        <JSXDocs code={`// Offset the menu 0px in X and 10px in Y direction
-<CPopover offset={[0, 10]}>...</CPopover>
-
-// Offset the menu 5px in both X and Y direction
-<CPopover offset={[5, 5]}>...</CPopover>`} />
-        </td>
-      </tr>
-      <tr id="cpopover-on-hide">
-        <td className="text-primary fw-semibold">onHide<a href="#cpopover-on-hide" aria-label="CPopover onHide permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Invoked when the React Popover is about to hide.</p>
-        </td>
-      </tr>
-      <tr id="cpopover-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#cpopover-on-show" aria-label="CPopover onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Invoked when the React Popover is about to show.</p>
-        </td>
-      </tr>
-      <tr id="cpopover-placement">
-        <td className="text-primary fw-semibold">placement<a href="#cpopover-placement" aria-label="CPopover placement permalink" className="anchor-link after">#</a></td>
-        <td><code>{`top`}</code></td>
-        <td><code>{`'auto'`}</code>, <code>{`'top'`}</code>, <code>{`'bottom'`}</code>, <code>{`'right'`}</code>, <code>{`'left'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Placement of the React Popover. Popper.js may override this based on available space.</p>
-        </td>
-      </tr>
-      <tr id="cpopover-popper-config">
-        <td className="text-primary fw-semibold">popperConfig<a href="#cpopover-popper-config" aria-label="CPopover popperConfig permalink" className="anchor-link after">#</a><span className="badge bg-success">5.5.0+</span></td>
-        <td>-</td>
-        <td><code>{`Partial\<Options>`}</code>, <code>{`((defaultPopperConfig: Partial\<Options>) => Partial\<Options>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Allows customization of the Popper.js configuration for the React Popover.<br />
-Can be an object or a function returning a modified configuration.<br />
-<a href="https://popper.js.org/docs/v2/constructors/#options">Learn more</a></p>
-        <JSXDocs code={`<CPopover
-  popperConfig={(defaultConfig) => ({
-    ...defaultConfig,
-    strategy: 'fixed',
-    modifiers: [
-      ...defaultConfig.modifiers,
-      { name: 'computeStyles', options: { adaptive: false } },
-    ],
-  })}
->...</CPopover>`} />
-        </td>
-      </tr>
-      <tr id="cpopover-title">
-        <td className="text-primary fw-semibold">title<a href="#cpopover-title" aria-label="CPopover title permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Title for the React Popover header. Can be a string or any valid React node.</p>
-        </td>
-      </tr>
-      <tr id="cpopover-trigger">
-        <td className="text-primary fw-semibold">trigger<a href="#cpopover-trigger" aria-label="CPopover trigger permalink" className="anchor-link after">#</a></td>
-        <td><code>{`click`}</code></td>
-        <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code>, <code>{`('hover' | 'focus' | 'click')[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.</p>
-        <JSXDocs code={`// Hover-only popover
-<CPopover trigger="hover">...</CPopover>
-
-// Hover + click combined
-<CPopover trigger={['hover', 'click']}>...</CPopover>`} />
-        </td>
-      </tr>
-      <tr id="cpopover-visible">
-        <td className="text-primary fw-semibold">visible<a href="#cpopover-visible" aria-label="CPopover visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Controls the visibility of the React Popover.</p>
-<ul>
-<li><code>{`true`}</code> shows the popover.</li>
-<li><code>{`false`}</code> hides the popover.</li>
-</ul>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx
deleted file mode 100644
index be1efeea..00000000
--- a/packages/docs/content/api/CProgress.api.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
-
-```jsx
-import { CProgress } from '@coreui/react'
-// or
-import CProgress from '@coreui/react/src/components/progress/CProgress'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cprogress-animated">
-        <td className="text-primary fw-semibold">animated<a href="#cprogress-animated" aria-label="CProgress animated permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Use to animate the stripes right to left via CSS3 animations.</p>
-        </td>
-      </tr>
-      <tr id="cprogress-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cprogress-class-name" aria-label="CProgress className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cprogress-color">
-        <td className="text-primary fw-semibold">color<a href="#cprogress-color" aria-label="CProgress color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cprogress-height">
-        <td className="text-primary fw-semibold">height<a href="#cprogress-height" aria-label="CProgress height permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the height of the component. If you set that value the inner <code>{`<CProgressBar>`}</code> will automatically resize accordingly.</p>
-        </td>
-      </tr>
-      <tr id="cprogress-progress-bar-class-name">
-        <td className="text-primary fw-semibold">progressBarClassName<a href="#cprogress-progress-bar-class-name" aria-label="CProgress progressBarClassName permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the <code>{`<CProgressBar/>`}</code> component.</p>
-        </td>
-      </tr>
-      <tr id="cprogress-thin">
-        <td className="text-primary fw-semibold">thin<a href="#cprogress-thin" aria-label="CProgress thin permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Makes progress bar thinner.</p>
-        </td>
-      </tr>
-      <tr id="cprogress-value">
-        <td className="text-primary fw-semibold">value<a href="#cprogress-value" aria-label="CProgress value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The percent to progress the ProgressBar (out of 100).</p>
-        </td>
-      </tr>
-      <tr id="cprogress-variant">
-        <td className="text-primary fw-semibold">variant<a href="#cprogress-variant" aria-label="CProgress variant permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'striped'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the progress bar variant to optional striped.</p>
-        </td>
-      </tr>
-      <tr id="cprogress-white">
-        <td className="text-primary fw-semibold">white<a href="#cprogress-white" aria-label="CProgress white permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Change the default color to white.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx
deleted file mode 100644
index 481b40ba..00000000
--- a/packages/docs/content/api/CProgressBar.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CProgressBar } from '@coreui/react'
-// or
-import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cprogressbar-animated">
-        <td className="text-primary fw-semibold">animated<a href="#cprogressbar-animated" aria-label="CProgressBar animated permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Use to animate the stripes right to left via CSS3 animations.</p>
-        </td>
-      </tr>
-      <tr id="cprogressbar-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cprogressbar-class-name" aria-label="CProgressBar className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cprogressbar-color">
-        <td className="text-primary fw-semibold">color<a href="#cprogressbar-color" aria-label="CProgressBar color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cprogressbar-value">
-        <td className="text-primary fw-semibold">value<a href="#cprogressbar-value" aria-label="CProgressBar value permalink" className="anchor-link after">#</a></td>
-        <td><code>{`0`}</code></td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The percent to progress the ProgressBar.</p>
-        </td>
-      </tr>
-      <tr id="cprogressbar-variant">
-        <td className="text-primary fw-semibold">variant<a href="#cprogressbar-variant" aria-label="CProgressBar variant permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'striped'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the progress bar variant to optional striped.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx
deleted file mode 100644
index 0aa39597..00000000
--- a/packages/docs/content/api/CProgressStacked.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CProgressStacked } from '@coreui/react'
-// or
-import CProgressStacked from '@coreui/react/src/components/progress/CProgressStacked'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cprogressstacked-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cprogressstacked-class-name" aria-label="CProgressStacked className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx
deleted file mode 100644
index 578a2184..00000000
--- a/packages/docs/content/api/CRow.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CRow } from '@coreui/react'
-// or
-import CRow from '@coreui/react/src/components/grid/CRow'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="crow-class-name">
-        <td className="text-primary fw-semibold">className<a href="#crow-class-name" aria-label="CRow className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="crow-lg">
-        <td className="text-primary fw-semibold">lg<a href="#crow-lg" aria-label="CRow lg permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on large devices (&lt;1200px).</p>
-        </td>
-      </tr>
-      <tr id="crow-md">
-        <td className="text-primary fw-semibold">md<a href="#crow-md" aria-label="CRow md permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on medium devices (&lt;992px).</p>
-        </td>
-      </tr>
-      <tr id="crow-sm">
-        <td className="text-primary fw-semibold">sm<a href="#crow-sm" aria-label="CRow sm permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on small devices (&lt;768px).</p>
-        </td>
-      </tr>
-      <tr id="crow-xl">
-        <td className="text-primary fw-semibold">xl<a href="#crow-xl" aria-label="CRow xl permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on X-Large devices (&lt;1400px).</p>
-        </td>
-      </tr>
-      <tr id="crow-xs">
-        <td className="text-primary fw-semibold">xs<a href="#crow-xs" aria-label="CRow xs permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on extra small devices (&lt;576px).</p>
-        </td>
-      </tr>
-      <tr id="crow-xxl">
-        <td className="text-primary fw-semibold">xxl<a href="#crow-xxl" aria-label="CRow xxl permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The number of columns/offset/order on XX-Large devices (≥1400px).</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx
deleted file mode 100644
index f6ff8f25..00000000
--- a/packages/docs/content/api/CSidebar.api.mdx
+++ /dev/null
@@ -1,150 +0,0 @@
-
-```jsx
-import { CSidebar } from '@coreui/react'
-// or
-import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="csidebar-as">
-        <td className="text-primary fw-semibold">as<a href="#csidebar-as" aria-label="CSidebar as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-class-name">
-        <td className="text-primary fw-semibold">className<a href="#csidebar-class-name" aria-label="CSidebar className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-color-scheme">
-        <td className="text-primary fw-semibold">colorScheme<a href="#csidebar-color-scheme" aria-label="CSidebar colorScheme permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'dark'`}</code>, <code>{`'light'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets if the color of text should be colored for a light or dark dark background.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-narrow">
-        <td className="text-primary fw-semibold">narrow<a href="#csidebar-narrow" aria-label="CSidebar narrow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Make sidebar narrow.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-on-hide">
-        <td className="text-primary fw-semibold">onHide<a href="#csidebar-on-hide" aria-label="CSidebar onHide permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be hidden.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#csidebar-on-show" aria-label="CSidebar onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be shown.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-on-visible-change">
-        <td className="text-primary fw-semibold">onVisibleChange<a href="#csidebar-on-visible-change" aria-label="CSidebar onVisibleChange permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(visible: boolean) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Event emitted after visibility of component changed.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-overlaid">
-        <td className="text-primary fw-semibold">overlaid<a href="#csidebar-overlaid" aria-label="CSidebar overlaid permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set sidebar to overlaid variant.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-placement">
-        <td className="text-primary fw-semibold">placement<a href="#csidebar-placement" aria-label="CSidebar placement permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'start'`}</code>, <code>{`'end'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Components placement, there’s no default placement.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-position">
-        <td className="text-primary fw-semibold">position<a href="#csidebar-position" aria-label="CSidebar position permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'fixed'`}</code>, <code>{`'sticky'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Place sidebar in non-static positions.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-size">
-        <td className="text-primary fw-semibold">size<a href="#csidebar-size" aria-label="CSidebar size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small, large, or extra large.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-unfoldable">
-        <td className="text-primary fw-semibold">unfoldable<a href="#csidebar-unfoldable" aria-label="CSidebar unfoldable permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Expand narrowed sidebar on hover.</p>
-        </td>
-      </tr>
-      <tr id="csidebar-visible">
-        <td className="text-primary fw-semibold">visible<a href="#csidebar-visible" aria-label="CSidebar visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of sidebar component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx
deleted file mode 100644
index ef80faed..00000000
--- a/packages/docs/content/api/CSidebarBrand.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CSidebarBrand } from '@coreui/react'
-// or
-import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="csidebarbrand-as">
-        <td className="text-primary fw-semibold">as<a href="#csidebarbrand-as" aria-label="CSidebarBrand as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'a')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="csidebarbrand-class-name">
-        <td className="text-primary fw-semibold">className<a href="#csidebarbrand-class-name" aria-label="CSidebarBrand className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx
deleted file mode 100644
index b381e326..00000000
--- a/packages/docs/content/api/CSidebarFooter.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CSidebarFooter } from '@coreui/react'
-// or
-import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="csidebarfooter-class-name">
-        <td className="text-primary fw-semibold">className<a href="#csidebarfooter-class-name" aria-label="CSidebarFooter className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx
deleted file mode 100644
index 0b4d9468..00000000
--- a/packages/docs/content/api/CSidebarHeader.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CSidebarHeader } from '@coreui/react'
-// or
-import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="csidebarheader-class-name">
-        <td className="text-primary fw-semibold">className<a href="#csidebarheader-class-name" aria-label="CSidebarHeader className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx
deleted file mode 100644
index 635ec4d8..00000000
--- a/packages/docs/content/api/CSidebarNav.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CSidebarNav } from '@coreui/react'
-// or
-import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="csidebarnav-as">
-        <td className="text-primary fw-semibold">as<a href="#csidebarnav-as" aria-label="CSidebarNav as permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'ul')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="csidebarnav-class-name">
-        <td className="text-primary fw-semibold">className<a href="#csidebarnav-class-name" aria-label="CSidebarNav className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx
deleted file mode 100644
index 89f62377..00000000
--- a/packages/docs/content/api/CSidebarToggler.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CSidebarToggler } from '@coreui/react'
-// or
-import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="csidebartoggler-class-name">
-        <td className="text-primary fw-semibold">className<a href="#csidebartoggler-class-name" aria-label="CSidebarToggler className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx
deleted file mode 100644
index 85bef5fe..00000000
--- a/packages/docs/content/api/CSpinner.api.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-
-```jsx
-import { CSpinner } from '@coreui/react'
-// or
-import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cspinner-as">
-        <td className="text-primary fw-semibold">as<a href="#cspinner-as" aria-label="CSpinner as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="cspinner-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cspinner-class-name" aria-label="CSpinner className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="cspinner-color">
-        <td className="text-primary fw-semibold">color<a href="#cspinner-color" aria-label="CSpinner color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cspinner-size">
-        <td className="text-primary fw-semibold">size<a href="#cspinner-size" aria-label="CSpinner size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small.</p>
-        </td>
-      </tr>
-      <tr id="cspinner-variant">
-        <td className="text-primary fw-semibold">variant<a href="#cspinner-variant" aria-label="CSpinner variant permalink" className="anchor-link after">#</a></td>
-        <td><code>{`border`}</code></td>
-        <td><code>{`'border'`}</code>, <code>{`'grow'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the button variant to an outlined button or a ghost button.</p>
-        </td>
-      </tr>
-      <tr id="cspinner-visually-hidden-label">
-        <td className="text-primary fw-semibold">visuallyHiddenLabel<a href="#cspinner-visually-hidden-label" aria-label="CSpinner visuallyHiddenLabel permalink" className="anchor-link after">#</a></td>
-        <td><code>{`Loading...`}</code></td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set visually hidden label for accessibility purposes.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx
deleted file mode 100644
index 96b8adf7..00000000
--- a/packages/docs/content/api/CTab.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CTab } from '@coreui/react'
-// or
-import CTab from '@coreui/react/src/components/tabs/CTab'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctab-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctab-class-name" aria-label="CTab className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctab-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#ctab-disabled" aria-label="CTab disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="ctab-item-key">
-        <td className="text-primary fw-semibold">itemKey<a href="#ctab-item-key" aria-label="CTab itemKey permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Item key.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx
deleted file mode 100644
index 1ed42368..00000000
--- a/packages/docs/content/api/CTabContent.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CTabContent } from '@coreui/react'
-// or
-import CTabContent from '@coreui/react/src/components/tabs/CTabContent'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctabcontent-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctabcontent-class-name" aria-label="CTabContent className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx
deleted file mode 100644
index 3d4a2202..00000000
--- a/packages/docs/content/api/CTabList.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CTabList } from '@coreui/react'
-// or
-import CTabList from '@coreui/react/src/components/tabs/CTabList'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctablist-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctablist-class-name" aria-label="CTabList className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctablist-layout">
-        <td className="text-primary fw-semibold">layout<a href="#ctablist-layout" aria-label="CTabList layout permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'fill'`}</code>, <code>{`'justified'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specify a layout type for component.</p>
-        </td>
-      </tr>
-      <tr id="ctablist-variant">
-        <td className="text-primary fw-semibold">variant<a href="#ctablist-variant" aria-label="CTabList variant permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'pills'`}</code>, <code>{`'tabs'`}</code>, <code>{`'underline'`}</code>, <code>{`'underline-border'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the nav variant to tabs or pills.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx
deleted file mode 100644
index caf5c27b..00000000
--- a/packages/docs/content/api/CTabPane.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CTabPane } from '@coreui/react'
-// or
-import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctabpane-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctabpane-class-name" aria-label="CTabPane className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctabpane-on-hide">
-        <td className="text-primary fw-semibold">onHide<a href="#ctabpane-on-hide" aria-label="CTabPane onHide permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be hidden.</p>
-        </td>
-      </tr>
-      <tr id="ctabpane-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#ctabpane-on-show" aria-label="CTabPane onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be shown.</p>
-        </td>
-      </tr>
-      <tr id="ctabpane-transition">
-        <td className="text-primary fw-semibold">transition<a href="#ctabpane-transition" aria-label="CTabPane transition permalink" className="anchor-link after">#</a><span className="badge bg-success">5.1.0+</span></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Enable fade in and fade out transition.</p>
-        </td>
-      </tr>
-      <tr id="ctabpane-visible">
-        <td className="text-primary fw-semibold">visible<a href="#ctabpane-visible" aria-label="CTabPane visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx
deleted file mode 100644
index 704ae2af..00000000
--- a/packages/docs/content/api/CTabPanel.api.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-
-```jsx
-import { CTabPanel } from '@coreui/react'
-// or
-import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctabpanel-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctabpanel-class-name" aria-label="CTabPanel className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctabpanel-item-key">
-        <td className="text-primary fw-semibold">itemKey<a href="#ctabpanel-item-key" aria-label="CTabPanel itemKey permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Item key.</p>
-        </td>
-      </tr>
-      <tr id="ctabpanel-on-hide">
-        <td className="text-primary fw-semibold">onHide<a href="#ctabpanel-on-hide" aria-label="CTabPanel onHide permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be hidden.</p>
-        </td>
-      </tr>
-      <tr id="ctabpanel-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#ctabpanel-on-show" aria-label="CTabPanel onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be shown.</p>
-        </td>
-      </tr>
-      <tr id="ctabpanel-transition">
-        <td className="text-primary fw-semibold">transition<a href="#ctabpanel-transition" aria-label="CTabPanel transition permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Enable fade in and fade out transition.</p>
-        </td>
-      </tr>
-      <tr id="ctabpanel-visible">
-        <td className="text-primary fw-semibold">visible<a href="#ctabpanel-visible" aria-label="CTabPanel visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx
deleted file mode 100644
index 26743c37..00000000
--- a/packages/docs/content/api/CTable.api.mdx
+++ /dev/null
@@ -1,215 +0,0 @@
-
-```jsx
-import { CTable } from '@coreui/react'
-// or
-import CTable from '@coreui/react/src/components/table/CTable'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctable-align">
-        <td className="text-primary fw-semibold">align<a href="#ctable-align" aria-label="CTable align permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the vertical aligment.</p>
-        </td>
-      </tr>
-      <tr id="ctable-border-color">
-        <td className="text-primary fw-semibold">borderColor<a href="#ctable-border-color" aria-label="CTable borderColor permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the border color of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="ctable-bordered">
-        <td className="text-primary fw-semibold">bordered<a href="#ctable-bordered" aria-label="CTable bordered permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add borders on all sides of the table and cells.</p>
-        </td>
-      </tr>
-      <tr id="ctable-borderless">
-        <td className="text-primary fw-semibold">borderless<a href="#ctable-borderless" aria-label="CTable borderless permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Remove borders on all sides of the table and cells.</p>
-        </td>
-      </tr>
-      <tr id="ctable-caption">
-        <td className="text-primary fw-semibold">caption<a href="#ctable-caption" aria-label="CTable caption permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Put the caption on the top if you set <code>{`caption="top"`}</code> of the table or set the text of the table caption.</p>
-        </td>
-      </tr>
-      <tr id="ctable-caption-top">
-        <td className="text-primary fw-semibold">captionTop<a href="#ctable-caption-top" aria-label="CTable captionTop permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the text of the table caption and the caption on the top of the table.</p>
-        </td>
-      </tr>
-      <tr id="ctable-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctable-class-name" aria-label="CTable className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="ctable-color">
-        <td className="text-primary fw-semibold">color<a href="#ctable-color" aria-label="CTable color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="ctable-columns">
-        <td className="text-primary fw-semibold">columns<a href="#ctable-columns" aria-label="CTable columns permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
-        <td>-</td>
-        <td><code>{`(string | Column)[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')</p>
-<p>In columns prop each array item represents one column. Item might be specified in two ways:<br />
-String: each item define column name equal to item value.<br />
-Object: item is object with following keys available as column configuration:</p>
-<ul>
-<li>key (required)(String) - define column name equal to item key.</li>
-<li>label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.</li>
-<li>_props (Object) - adds classes to all cels in column, ex. <code>{`_props: { scope: 'col', className: 'custom-class' }`}</code>,</li>
-<li>_style (Object) - adds styles to the column header (useful for defining widths)</li>
-</ul>
-        </td>
-      </tr>
-      <tr id="ctable-footer">
-        <td className="text-primary fw-semibold">footer<a href="#ctable-footer" aria-label="CTable footer permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
-        <td>-</td>
-        <td><code>{`(string | FooterItem)[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Array of objects or strings, where each element represents one cell in the table footer.</p>
-<p>Example items:<br />
-<code>{`['FooterCell', 'FooterCell', 'FooterCell']`}</code><br />
-or<br />
-<code>{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}</code></p>
-        </td>
-      </tr>
-      <tr id="ctable-hover">
-        <td className="text-primary fw-semibold">hover<a href="#ctable-hover" aria-label="CTable hover permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Enable a hover state on table rows within a <code>{`<CTableBody>`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="ctable-items">
-        <td className="text-primary fw-semibold">items<a href="#ctable-items" aria-label="CTable items permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
-        <td>-</td>
-        <td><code>{`Item[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '<em>props' key and to single cell by '</em>cellProps'.</p>
-<p>Example item:<br />
-<code>{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}</code></p>
-        </td>
-      </tr>
-      <tr id="ctable-responsive">
-        <td className="text-primary fw-semibold">responsive<a href="#ctable-responsive" aria-label="CTable responsive permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</p>
-        </td>
-      </tr>
-      <tr id="ctable-small">
-        <td className="text-primary fw-semibold">small<a href="#ctable-small" aria-label="CTable small permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Make table more compact by cutting all cell <code>{`padding`}</code> in half.</p>
-        </td>
-      </tr>
-      <tr id="ctable-striped">
-        <td className="text-primary fw-semibold">striped<a href="#ctable-striped" aria-label="CTable striped permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add zebra-striping to any table row within the <code>{`<CTableBody>`}</code>.</p>
-        </td>
-      </tr>
-      <tr id="ctable-striped-columns">
-        <td className="text-primary fw-semibold">stripedColumns<a href="#ctable-striped-columns" aria-label="CTable stripedColumns permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Add zebra-striping to any table column.</p>
-        </td>
-      </tr>
-      <tr id="ctable-table-foot-props">
-        <td className="text-primary fw-semibold">tableFootProps<a href="#ctable-table-foot-props" aria-label="CTable tableFootProps permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
-        <td>-</td>
-        <td><code>{`CTableFootProps`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Properties that will be passed to the table footer component.</p>
-        </td>
-      </tr>
-      <tr id="ctable-table-head-props">
-        <td className="text-primary fw-semibold">tableHeadProps<a href="#ctable-table-head-props" aria-label="CTable tableHeadProps permalink" className="anchor-link after">#</a><span className="badge bg-success">4.3.0+</span></td>
-        <td>-</td>
-        <td><code>{`CTableHeadProps`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Properties that will be passed to the table head component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx
deleted file mode 100644
index f97cb4dc..00000000
--- a/packages/docs/content/api/CTableBody.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CTableBody } from '@coreui/react'
-// or
-import CTableBody from '@coreui/react/src/components/table/CTableBody'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctablebody-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctablebody-class-name" aria-label="CTableBody className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="ctablebody-color">
-        <td className="text-primary fw-semibold">color<a href="#ctablebody-color" aria-label="CTableBody color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx
deleted file mode 100644
index 73372f90..00000000
--- a/packages/docs/content/api/CTableCaption.api.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-```jsx
-import { CTableCaption } from '@coreui/react'
-// or
-import CTableCaption from '@coreui/react/src/components/table/CTableCaption'
-```
-
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx
deleted file mode 100644
index bd076614..00000000
--- a/packages/docs/content/api/CTableDataCell.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CTableDataCell } from '@coreui/react'
-// or
-import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctabledatacell-active">
-        <td className="text-primary fw-semibold">active<a href="#ctabledatacell-active" aria-label="CTableDataCell active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Highlight a table row or cell.</p>
-        </td>
-      </tr>
-      <tr id="ctabledatacell-align">
-        <td className="text-primary fw-semibold">align<a href="#ctabledatacell-align" aria-label="CTableDataCell align permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the vertical aligment.</p>
-        </td>
-      </tr>
-      <tr id="ctabledatacell-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctabledatacell-class-name" aria-label="CTableDataCell className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="ctabledatacell-color">
-        <td className="text-primary fw-semibold">color<a href="#ctabledatacell-color" aria-label="CTableDataCell color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx
deleted file mode 100644
index 532b8d60..00000000
--- a/packages/docs/content/api/CTableFoot.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CTableFoot } from '@coreui/react'
-// or
-import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctablefoot-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctablefoot-class-name" aria-label="CTableFoot className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="ctablefoot-color">
-        <td className="text-primary fw-semibold">color<a href="#ctablefoot-color" aria-label="CTableFoot color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx
deleted file mode 100644
index 3c7b6463..00000000
--- a/packages/docs/content/api/CTableHead.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CTableHead } from '@coreui/react'
-// or
-import CTableHead from '@coreui/react/src/components/table/CTableHead'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctablehead-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctablehead-class-name" aria-label="CTableHead className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="ctablehead-color">
-        <td className="text-primary fw-semibold">color<a href="#ctablehead-color" aria-label="CTableHead color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx
deleted file mode 100644
index 504b445d..00000000
--- a/packages/docs/content/api/CTableHeaderCell.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CTableHeaderCell } from '@coreui/react'
-// or
-import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCell'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctableheadercell-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctableheadercell-class-name" aria-label="CTableHeaderCell className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="ctableheadercell-color">
-        <td className="text-primary fw-semibold">color<a href="#ctableheadercell-color" aria-label="CTableHeaderCell color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
deleted file mode 100644
index 31079177..00000000
--- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CTableResponsiveWrapper } from '@coreui/react'
-// or
-import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableResponsiveWrapper'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctableresponsivewrapper-responsive">
-        <td className="text-primary fw-semibold">responsive<a href="#ctableresponsivewrapper-responsive" aria-label="CTableResponsiveWrapper responsive permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx
deleted file mode 100644
index e38e513a..00000000
--- a/packages/docs/content/api/CTableRow.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CTableRow } from '@coreui/react'
-// or
-import CTableRow from '@coreui/react/src/components/table/CTableRow'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctablerow-active">
-        <td className="text-primary fw-semibold">active<a href="#ctablerow-active" aria-label="CTableRow active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Highlight a table row or cell..</p>
-        </td>
-      </tr>
-      <tr id="ctablerow-align">
-        <td className="text-primary fw-semibold">align<a href="#ctablerow-align" aria-label="CTableRow align permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the vertical aligment.</p>
-        </td>
-      </tr>
-      <tr id="ctablerow-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctablerow-class-name" aria-label="CTableRow className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the component.</p>
-        </td>
-      </tr>
-      <tr id="ctablerow-color">
-        <td className="text-primary fw-semibold">color<a href="#ctablerow-color" aria-label="CTableRow color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx
deleted file mode 100644
index 18290159..00000000
--- a/packages/docs/content/api/CTabs.api.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-
-```jsx
-import { CTabs } from '@coreui/react'
-// or
-import CTabs from '@coreui/react/src/components/tabs/CTabs'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctabs-active-item-key">
-        <td className="text-primary fw-semibold">activeItemKey<a href="#ctabs-active-item-key" aria-label="CTabs activeItemKey permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Controls the currently active tab.</p>
-<p>When provided, the component operates in a controlled mode.<br />
-You must handle tab switching manually by updating this prop.</p>
-        <JSXDocs code={`const [activeTab, setActiveTab] = useState(0);
-<CTabs activeItemKey={activeTab} onChange={setActiveTab} />`} />
-        </td>
-      </tr>
-      <tr id="ctabs-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctabs-class-name" aria-label="CTabs className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctabs-default-active-item-key">
-        <td className="text-primary fw-semibold">defaultActiveItemKey<a href="#ctabs-default-active-item-key" aria-label="CTabs defaultActiveItemKey permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code>, <code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the initially active tab when the component mounts.</p>
-<p>After initialization, the component manages active tab changes internally.</p>
-<p>Use <code>{`defaultActiveItemKey`}</code> for uncontrolled usage.</p>
-        <JSXDocs code={`<CTabs defaultActiveItemKey={1} />`} />
-        </td>
-      </tr>
-      <tr id="ctabs-on-change">
-        <td className="text-primary fw-semibold">onChange<a href="#ctabs-on-change" aria-label="CTabs onChange permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(value: string | number) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the active tab changes.</p>
-<ul>
-<li>In controlled mode (<code>{`activeItemKey`}</code> provided), you must update <code>{`activeItemKey`}</code> yourself based on the value received.</li>
-<li>In uncontrolled mode, this callback is called after internal state updates.</li>
-</ul>
-        <JSXDocs code={`<CTabs onChange={(key) => console.log('Tab changed to', key)} />`} />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx
deleted file mode 100644
index 67c568fa..00000000
--- a/packages/docs/content/api/CToast.api.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
-
-```jsx
-import { CToast } from '@coreui/react'
-// or
-import CToast from '@coreui/react/src/components/toast/CToast'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctoast-animation">
-        <td className="text-primary fw-semibold">animation<a href="#ctoast-animation" aria-label="CToast animation permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Apply a CSS fade transition to the toast.</p>
-        </td>
-      </tr>
-      <tr id="ctoast-autohide">
-        <td className="text-primary fw-semibold">autohide<a href="#ctoast-autohide" aria-label="CToast autohide permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Auto hide the toast.</p>
-        </td>
-      </tr>
-      <tr id="ctoast-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctoast-class-name" aria-label="CToast className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctoast-color">
-        <td className="text-primary fw-semibold">color<a href="#ctoast-color" aria-label="CToast color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="ctoast-delay">
-        <td className="text-primary fw-semibold">delay<a href="#ctoast-delay" aria-label="CToast delay permalink" className="anchor-link after">#</a></td>
-        <td><code>{`5000`}</code></td>
-        <td><code>{`number`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Delay hiding the toast (ms).</p>
-        </td>
-      </tr>
-      <tr id="ctoast-on-close">
-        <td className="text-primary fw-semibold">onClose<a href="#ctoast-on-close" aria-label="CToast onClose permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(index: number) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be closed.</p>
-        </td>
-      </tr>
-      <tr id="ctoast-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#ctoast-on-show" aria-label="CToast onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(index: number) => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired when the component requests to be shown.</p>
-        </td>
-      </tr>
-      <tr id="ctoast-visible">
-        <td className="text-primary fw-semibold">visible<a href="#ctoast-visible" aria-label="CToast visible permalink" className="anchor-link after">#</a></td>
-        <td><code>{`false`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the visibility of component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx
deleted file mode 100644
index 7227bece..00000000
--- a/packages/docs/content/api/CToastBody.api.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-
-```jsx
-import { CToastBody } from '@coreui/react'
-// or
-import CToastBody from '@coreui/react/src/components/toast/CToastBody'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctoastbody-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctoastbody-class-name" aria-label="CToastBody className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx
deleted file mode 100644
index f96a63a0..00000000
--- a/packages/docs/content/api/CToastClose.api.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
-
-```jsx
-import { CToastClose } from '@coreui/react'
-// or
-import CToastClose from '@coreui/react/src/components/toast/CToastClose'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctoastclose-active">
-        <td className="text-primary fw-semibold">active<a href="#ctoastclose-active" aria-label="CToastClose active permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the active state for the component.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-as">
-        <td className="text-primary fw-semibold">as<a href="#ctoastclose-as" aria-label="CToastClose as permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass\<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent\<any>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctoastclose-class-name" aria-label="CToastClose className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-dark">
-        <td className="text-primary fw-semibold">dark<a href="#ctoastclose-dark" aria-label="CToastClose dark permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Invert the default color.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-disabled">
-        <td className="text-primary fw-semibold">disabled<a href="#ctoastclose-disabled" aria-label="CToastClose disabled permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Toggle the disabled state for the component.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-href">
-        <td className="text-primary fw-semibold">href<a href="#ctoastclose-href" aria-label="CToastClose href permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The href attribute specifies the URL of the page the link goes to.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-shape">
-        <td className="text-primary fw-semibold">shape<a href="#ctoastclose-shape" aria-label="CToastClose shape permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Select the shape of the component.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-size">
-        <td className="text-primary fw-semibold">size<a href="#ctoastclose-size" aria-label="CToastClose size permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Size the component small or large.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-type">
-        <td className="text-primary fw-semibold">type<a href="#ctoastclose-type" aria-label="CToastClose type permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'button'`}</code>, <code>{`'submit'`}</code>, <code>{`'reset'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Specifies the type of button. Always specify the type attribute for the <code>{`<button>`}</code> element.<br />
-Different browsers may use different default types for the <code>{`<button>`}</code> element.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-variant">
-        <td className="text-primary fw-semibold">variant<a href="#ctoastclose-variant" aria-label="CToastClose variant permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'outline'`}</code>, <code>{`'ghost'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set the button variant to an outlined button or a ghost button.</p>
-        </td>
-      </tr>
-      <tr id="ctoastclose-white">
-        <td className="text-primary fw-semibold">white<a href="#ctoastclose-white" aria-label="CToastClose white permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 5.0.0</span></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Change the default color to white.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CToastHeader.api.mdx b/packages/docs/content/api/CToastHeader.api.mdx
deleted file mode 100644
index b3412e05..00000000
--- a/packages/docs/content/api/CToastHeader.api.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-
-```jsx
-import { CToastHeader } from '@coreui/react'
-// or
-import CToastHeader from '@coreui/react/src/components/toast/CToastHeader'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctoastheader-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctoastheader-class-name" aria-label="CToastHeader className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctoastheader-close-button">
-        <td className="text-primary fw-semibold">closeButton<a href="#ctoastheader-close-button" aria-label="CToastHeader closeButton permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Automatically add a close button to the header.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CToaster.api.mdx b/packages/docs/content/api/CToaster.api.mdx
deleted file mode 100644
index a0738d3f..00000000
--- a/packages/docs/content/api/CToaster.api.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-
-```jsx
-import { CToaster } from '@coreui/react'
-// or
-import CToaster from '@coreui/react/src/components/toast/CToaster'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctoaster-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctoaster-class-name" aria-label="CToaster className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="ctoaster-placement">
-        <td className="text-primary fw-semibold">placement<a href="#ctoaster-placement" aria-label="CToaster placement permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'top-start'`}</code>, <code>{`'top'`}</code>, <code>{`'top-end'`}</code>, <code>{`'middle-start'`}</code>, <code>{`'middle'`}</code>, <code>{`'middle-end'`}</code>, <code>{`'bottom-start'`}</code>, <code>{`'bottom'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Describes the placement of your component.</p>
-        </td>
-      </tr>
-      <tr id="ctoaster-push">
-        <td className="text-primary fw-semibold">push<a href="#ctoaster-push" aria-label="CToaster push permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactElement`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Adds new <code>{`CToast`}</code> to <code>{`CToaster`}</code>.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx
deleted file mode 100644
index 74a7e295..00000000
--- a/packages/docs/content/api/CTooltip.api.mdx
+++ /dev/null
@@ -1,189 +0,0 @@
-
-```jsx
-import { CTooltip } from '@coreui/react'
-// or
-import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="ctooltip-animation">
-        <td className="text-primary fw-semibold">animation<a href="#ctooltip-animation" aria-label="CTooltip animation permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Enables or disables the CSS fade transition for the React Tooltip.</p>
-        </td>
-      </tr>
-      <tr id="ctooltip-class-name">
-        <td className="text-primary fw-semibold">className<a href="#ctooltip-class-name" aria-label="CTooltip className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices.</p>
-        </td>
-      </tr>
-      <tr id="ctooltip-container">
-        <td className="text-primary fw-semibold">container<a href="#ctooltip-container" aria-label="CTooltip container permalink" className="anchor-link after">#</a><span className="badge bg-success">4.11.0+</span></td>
-        <td><code>{`document.body`}</code></td>
-        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Appends the React Tooltip to a specific element instead of the default <code>{`document.body`}</code>. You may pass:</p>
-<ul>
-<li>A DOM element (<code>{`HTMLElement`}</code> or <code>{`DocumentFragment`}</code>)</li>
-<li>A function that returns a single element</li>
-<li><code>{`null`}</code></li>
-</ul>
-        <JSXDocs code={`<CTooltip container={document.getElementById('my-container')}>...</CTooltip>`} />
-        </td>
-      </tr>
-      <tr id="ctooltip-content">
-        <td className="text-primary fw-semibold">content<a href="#ctooltip-content" aria-label="CTooltip content permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Content to be displayed within the React Tooltip. Can be a string or any valid React node.</p>
-        </td>
-      </tr>
-      <tr id="ctooltip-delay">
-        <td className="text-primary fw-semibold">delay<a href="#ctooltip-delay" aria-label="CTooltip delay permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
-        <td><code>{`0`}</code></td>
-        <td><code>{`number`}</code>, <code>{`{ show: number; hide: number; }`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>The delay (in milliseconds) before showing or hiding the React Tooltip.</p>
-<ul>
-<li>If provided as a number, the delay is applied to both "show" and "hide".</li>
-<li>If provided as an object, it should have distinct "show" and "hide" values.</li>
-</ul>
-        <JSXDocs code={`// Delays 300ms on both show and hide
-<CTooltip delay={300}>...</CTooltip>
-
-// Delays 500ms on show and 100ms on hide
-<CTooltip delay={{ show: 500, hide: 100 }}>...</CTooltip>`} />
-        </td>
-      </tr>
-      <tr id="ctooltip-fallback-placements">
-        <td className="text-primary fw-semibold">fallbackPlacements<a href="#ctooltip-fallback-placements" aria-label="CTooltip fallbackPlacements permalink" className="anchor-link after">#</a><span className="badge bg-success">4.9.0+</span></td>
-        <td><code>{`['top', 'right', 'bottom', 'left']`}</code></td>
-        <td><code>{`'top', 'right', 'bottom', 'left'`}</code>, <code>{`('top', 'right', 'bottom', 'left')[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order.</p>
-        </td>
-      </tr>
-      <tr id="ctooltip-offset">
-        <td className="text-primary fw-semibold">offset<a href="#ctooltip-offset" aria-label="CTooltip offset permalink" className="anchor-link after">#</a></td>
-        <td><code>{`[0, 6]`}</code></td>
-        <td><code>{`[number, number]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Adjusts the offset of the React Tooltip relative to its target. Expects a tuple <code>{`[x-axis, y-axis]`}</code>.</p>
-        <JSXDocs code={`// Offset the menu 0px in X and 10px in Y direction
-<CTooltip offset={[0, 10]}>...</CTooltip>
-
-// Offset the menu 5px in both X and Y direction
-<CTooltip offset={[5, 5]}>...</CTooltip>`} />
-        </td>
-      </tr>
-      <tr id="ctooltip-on-hide">
-        <td className="text-primary fw-semibold">onHide<a href="#ctooltip-on-hide" aria-label="CTooltip onHide permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired immediately after the React Tooltip is hidden.</p>
-        </td>
-      </tr>
-      <tr id="ctooltip-on-show">
-        <td className="text-primary fw-semibold">onShow<a href="#ctooltip-on-show" aria-label="CTooltip onShow permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`() => void`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Callback fired immediately after the React Tooltip is shown.</p>
-        </td>
-      </tr>
-      <tr id="ctooltip-placement">
-        <td className="text-primary fw-semibold">placement<a href="#ctooltip-placement" aria-label="CTooltip placement permalink" className="anchor-link after">#</a></td>
-        <td><code>{`top`}</code></td>
-        <td><code>{`'auto'`}</code>, <code>{`'top'`}</code>, <code>{`'bottom'`}</code>, <code>{`'right'`}</code>, <code>{`'left'`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position.</p>
-        </td>
-      </tr>
-      <tr id="ctooltip-popper-config">
-        <td className="text-primary fw-semibold">popperConfig<a href="#ctooltip-popper-config" aria-label="CTooltip popperConfig permalink" className="anchor-link after">#</a><span className="badge bg-success">5.5.0+</span></td>
-        <td>-</td>
-        <td><code>{`Partial\<Options>`}</code>, <code>{`((defaultPopperConfig: Partial\<Options>) => Partial\<Options>)`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. <a href="https://popper.js.org/docs/v2/constructors/#options">Learn more</a></p>
-        <JSXDocs code={`<CTooltip
-  popperConfig={(defaultConfig) => ({
-    ...defaultConfig,
-    strategy: 'fixed',
-    modifiers: [
-      ...defaultConfig.modifiers,
-      { name: 'computeStyles', options: { adaptive: false } },
-    ],
-  })}
->...</CTooltip>`} />
-        </td>
-      </tr>
-      <tr id="ctooltip-trigger">
-        <td className="text-primary fw-semibold">trigger<a href="#ctooltip-trigger" aria-label="CTooltip trigger permalink" className="anchor-link after">#</a></td>
-        <td><code>{`['hover', 'focus']`}</code></td>
-        <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code>, <code>{`('hover' | 'focus' | 'click')[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers.</p>
-        <JSXDocs code={`// Hover-only tooltip
-<CTooltip trigger="hover">...</CTooltip>
-
-// Hover + click combined
-<CTooltip trigger={['hover', 'click']}>...</CTooltip>`} />
-        </td>
-      </tr>
-      <tr id="ctooltip-visible">
-        <td className="text-primary fw-semibold">visible<a href="#ctooltip-visible" aria-label="CTooltip visible permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Controls the visibility of the React Tooltip.</p>
-<ul>
-<li><code>{`true`}</code> to show the tooltip.</li>
-<li><code>{`false`}</code> to hide the tooltip.</li>
-</ul>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CWidgetStatsA.api.mdx b/packages/docs/content/api/CWidgetStatsA.api.mdx
deleted file mode 100644
index c67a83f0..00000000
--- a/packages/docs/content/api/CWidgetStatsA.api.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
-
-```jsx
-import { CWidgetStatsA } from '@coreui/react'
-// or
-import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cwidgetstatsa-action">
-        <td className="text-primary fw-semibold">action<a href="#cwidgetstatsa-action" aria-label="CWidgetStatsA action permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Action node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsa-chart">
-        <td className="text-primary fw-semibold">chart<a href="#cwidgetstatsa-chart" aria-label="CWidgetStatsA chart permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Chart node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsa-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsa-class-name" aria-label="CWidgetStatsA className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsa-color">
-        <td className="text-primary fw-semibold">color<a href="#cwidgetstatsa-color" aria-label="CWidgetStatsA color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsa-title">
-        <td className="text-primary fw-semibold">title<a href="#cwidgetstatsa-title" aria-label="CWidgetStatsA title permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Title node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsa-value">
-        <td className="text-primary fw-semibold">value<a href="#cwidgetstatsa-value" aria-label="CWidgetStatsA value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Value node for your component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CWidgetStatsB.api.mdx b/packages/docs/content/api/CWidgetStatsB.api.mdx
deleted file mode 100644
index 87136d52..00000000
--- a/packages/docs/content/api/CWidgetStatsB.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CWidgetCWidgetStatsB } from '@coreui/react'
-// or
-import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetStatsB'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cwidgetcwidgetstatsb-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetcwidgetstatsb-class-name" aria-label="CWidgetCWidgetStatsB className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetcwidgetstatsb-color">
-        <td className="text-primary fw-semibold">color<a href="#cwidgetcwidgetstatsb-color" aria-label="CWidgetCWidgetStatsB color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetcwidgetstatsb-inverse">
-        <td className="text-primary fw-semibold">inverse<a href="#cwidgetcwidgetstatsb-inverse" aria-label="CWidgetCWidgetStatsB inverse permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Colors have been inverted from their default dark shade.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetcwidgetstatsb-progress">
-        <td className="text-primary fw-semibold">progress<a href="#cwidgetcwidgetstatsb-progress" aria-label="CWidgetCWidgetStatsB progress permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the progress bar to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetcwidgetstatsb-text">
-        <td className="text-primary fw-semibold">text<a href="#cwidgetcwidgetstatsb-text" aria-label="CWidgetCWidgetStatsB text permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Helper text for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetcwidgetstatsb-title">
-        <td className="text-primary fw-semibold">title<a href="#cwidgetcwidgetstatsb-title" aria-label="CWidgetCWidgetStatsB title permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Title node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetcwidgetstatsb-value">
-        <td className="text-primary fw-semibold">value<a href="#cwidgetcwidgetstatsb-value" aria-label="CWidgetCWidgetStatsB value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Value node for your component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CWidgetStatsC.api.mdx b/packages/docs/content/api/CWidgetStatsC.api.mdx
deleted file mode 100644
index d0e62bc7..00000000
--- a/packages/docs/content/api/CWidgetStatsC.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CWidgetStatsCWidgetStatsC } from '@coreui/react'
-// or
-import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWidgetStatsC'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cwidgetstatscwidgetstatsc-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatscwidgetstatsc-class-name" aria-label="CWidgetStatsCWidgetStatsC className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatscwidgetstatsc-color">
-        <td className="text-primary fw-semibold">color<a href="#cwidgetstatscwidgetstatsc-color" aria-label="CWidgetStatsCWidgetStatsC color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatscwidgetstatsc-icon">
-        <td className="text-primary fw-semibold">icon<a href="#cwidgetstatscwidgetstatsc-icon" aria-label="CWidgetStatsCWidgetStatsC icon permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Icon node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatscwidgetstatsc-inverse">
-        <td className="text-primary fw-semibold">inverse<a href="#cwidgetstatscwidgetstatsc-inverse" aria-label="CWidgetStatsCWidgetStatsC inverse permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Colors have been inverted from their default dark shade.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatscwidgetstatsc-progress">
-        <td className="text-primary fw-semibold">progress<a href="#cwidgetstatscwidgetstatsc-progress" aria-label="CWidgetStatsCWidgetStatsC progress permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the progress bar to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatscwidgetstatsc-title">
-        <td className="text-primary fw-semibold">title<a href="#cwidgetstatscwidgetstatsc-title" aria-label="CWidgetStatsCWidgetStatsC title permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Title node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatscwidgetstatsc-value">
-        <td className="text-primary fw-semibold">value<a href="#cwidgetstatscwidgetstatsc-value" aria-label="CWidgetStatsCWidgetStatsC value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Value node for your component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CWidgetStatsD.api.mdx b/packages/docs/content/api/CWidgetStatsD.api.mdx
deleted file mode 100644
index dc00f1c8..00000000
--- a/packages/docs/content/api/CWidgetStatsD.api.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-
-```jsx
-import { CWidgetStatsD } from '@coreui/react'
-// or
-import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cwidgetstatsd-chart">
-        <td className="text-primary fw-semibold">chart<a href="#cwidgetstatsd-chart" aria-label="CWidgetStatsD chart permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Chart node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsd-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsd-class-name" aria-label="CWidgetStatsD className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsd-color">
-        <td className="text-primary fw-semibold">color<a href="#cwidgetstatsd-color" aria-label="CWidgetStatsD color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsd-icon">
-        <td className="text-primary fw-semibold">icon<a href="#cwidgetstatsd-icon" aria-label="CWidgetStatsD icon permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Icon node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsd-values">
-        <td className="text-primary fw-semibold">values<a href="#cwidgetstatsd-values" aria-label="CWidgetStatsD values permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`Value[]`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Values and titles for your component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CWidgetStatsE.api.mdx b/packages/docs/content/api/CWidgetStatsE.api.mdx
deleted file mode 100644
index 01db0735..00000000
--- a/packages/docs/content/api/CWidgetStatsE.api.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-
-```jsx
-import { CWidgetStatsE } from '@coreui/react'
-// or
-import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cwidgetstatse-chart">
-        <td className="text-primary fw-semibold">chart<a href="#cwidgetstatse-chart" aria-label="CWidgetStatsE chart permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Chart node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatse-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatse-class-name" aria-label="CWidgetStatsE className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatse-title">
-        <td className="text-primary fw-semibold">title<a href="#cwidgetstatse-title" aria-label="CWidgetStatsE title permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Title node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatse-value">
-        <td className="text-primary fw-semibold">value<a href="#cwidgetstatse-value" aria-label="CWidgetStatsE value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Value node for your component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/api/CWidgetStatsF.api.mdx b/packages/docs/content/api/CWidgetStatsF.api.mdx
deleted file mode 100644
index e9caf466..00000000
--- a/packages/docs/content/api/CWidgetStatsF.api.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-
-```jsx
-import { CWidgetStatsF } from '@coreui/react'
-// or
-import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF'
-```
-
-<div className="table-responsive table-api border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Property</th>
-        <th>Default</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr id="cwidgetstatsf-class-name">
-        <td className="text-primary fw-semibold">className<a href="#cwidgetstatsf-class-name" aria-label="CWidgetStatsF className permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>A string of all className you want applied to the base component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsf-color">
-        <td className="text-primary fw-semibold">color<a href="#cwidgetstatsf-color" aria-label="CWidgetStatsF color permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsf-footer">
-        <td className="text-primary fw-semibold">footer<a href="#cwidgetstatsf-footer" aria-label="CWidgetStatsF footer permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Footer node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsf-icon">
-        <td className="text-primary fw-semibold">icon<a href="#cwidgetstatsf-icon" aria-label="CWidgetStatsF icon permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Icon node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsf-padding">
-        <td className="text-primary fw-semibold">padding<a href="#cwidgetstatsf-padding" aria-label="CWidgetStatsF padding permalink" className="anchor-link after">#</a></td>
-        <td><code>{`true`}</code></td>
-        <td><code>{`boolean`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Set padding of your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsf-title">
-        <td className="text-primary fw-semibold">title<a href="#cwidgetstatsf-title" aria-label="CWidgetStatsF title permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Title node for your component.</p>
-        </td>
-      </tr>
-      <tr id="cwidgetstatsf-value">
-        <td className="text-primary fw-semibold">value<a href="#cwidgetstatsf-value" aria-label="CWidgetStatsF value permalink" className="anchor-link after">#</a></td>
-        <td>-</td>
-        <td><code>{`ReactNode`}</code></td>
-      </tr>
-      <tr>
-        <td colSpan="3">
-          <p>Value node for your component.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/components/accordion/accessibility.mdx b/packages/docs/content/components/accordion/accessibility.mdx
deleted file mode 100644
index 8dd1f95b..00000000
--- a/packages/docs/content/components/accordion/accessibility.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: React Accordion Component Accesibility
-name: Accordion Accesibility
-description: Detailed overview of the accessibility features implemented in CoreUI React Accordion, ensuring compliance with WAI-ARIA guidelines.
-route: /components/accordion/
----
-
-## Accessible React Accordion
-
-Accordions are a common UI pattern used to toggle the visibility of content. Ensuring that accordions are accessible is crucial for users who rely on assistive technologies. This guide demonstrates how to create an accessible accordion using CoreUI React components, adhering to the [WAI-ARIA Accordion Design Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
-
-### Semantic Structure
-
-- **Button Headers**: Each accordion header is rendered as a native `<button>` element. This ensures that headers are inherently focusable and operable via keyboard without additional scripting.
-  
-- **Proper HTML Elements**: Utilizes appropriate HTML elements (`<button>`, `<div>`, etc.) to convey the correct semantic meaning, enhancing compatibility with screen readers and other assistive technologies.
-
-### ARIA Attributes
-
-CoreUI React Accordion incorporates essential ARIA attributes to communicate the state and relationships of accordion items to assistive technologies:
-
-- **`aria-expanded`**: Reflects the current state of the accordion item (`true` when expanded, `false` when collapsed).
-  
-- **`aria-controls`**: Associates each header with its corresponding content panel by referencing the panel's `id`.
-  
-- **`id`**: Unique identifiers for both headers and panels establish clear relationships, ensuring that screen readers can accurately describe the accordion structure.
-
-### Focus Management
-
-- **Automatic Focus Handling**: When an accordion panel is expanded or collapsed, focus is managed to ensure a seamless user experience. This prevents focus from being lost or trapped within the accordion, maintaining accessibility standards.
-
-### Visual Indicators
-
-- **Focus Styles**: Clear visual indicators are provided for focused elements, aiding users who navigate via keyboard.
-  
-- **Active States**: Distinct styling for active (expanded) accordion items helps users identify the current state of each section.
-
-
-### Keyboard Support
-
-The Accordion component supports comprehensive keyboard navigation out of the box:
-
-<div className="table-api table-responsive border rounded mb-3">
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Key</th>
-        <th>Function</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><kbd>Tab</kbd></td>
-        <td>Moves focus to the next focusable element.</td>
-      </tr>
-      <tr>
-        <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
-        <td>Moves focus to the previous focusable element.</td>
-      </tr>
-      <tr>
-        <td><kbd>Space</kbd> or <kbd>Enter</kbd></td>
-        <td>Toggle the expansion of the focused accordion header.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
diff --git a/packages/docs/content/components/accordion/api.mdx b/packages/docs/content/components/accordion/api.mdx
deleted file mode 100644
index e2257eb1..00000000
--- a/packages/docs/content/components/accordion/api.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: React Accordion Component API
-name: Accordion API
-description: Explore the API reference for the React Accordion component and discover how to effectively utilize its props for customization.
-route: /components/accordion/
----
-
-import CAccordionAPI from '../../api/CAccordion.api.mdx'
-import CAccordionBodyAPI from '../../api/CAccordionBody.api.mdx'
-import CAccordionHeaderAPI from '../../api/CAccordionHeader.api.mdx'
-import CAccordionItemAPI from '../../api/CAccordionItem.api.mdx'
-
-## CAccordion
-
-<CAccordionAPI />
-
-## CAccordionBody
-
-<CAccordionBodyAPI />
-
-## CAccordionHeader
-
-<CAccordionHeaderAPI />
-
-## CAccordionItem
-
-<CAccordionItemAPI />
diff --git a/packages/docs/content/components/accordion/bootstrap.mdx b/packages/docs/content/components/accordion/bootstrap.mdx
deleted file mode 100644
index 59c789e9..00000000
--- a/packages/docs/content/components/accordion/bootstrap.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: React Bootstrap Accordion Component
-name: Accordion with Bootstrap Styling
-description: Learn how to create vertically collapsing Bootstrap-style accordions using CoreUI’s React components.
-route: /components/accordion/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Accordion component
-
-Use CoreUI's React components styled with Bootstrap to build interactive and collapsible accordion sections.
-
-<ExampleSnippet className="theme-bootstrap" component="AccordionExample" componentName="React Bootstrap Accordion" />
-
-### Flush style
-
-Add the `flush` prop to remove default borders, background colors, and border radius — making the accordion items align flush with their container, following Bootstrap’s visual style.
-
-<ExampleSnippet className="theme-bootstrap" component="AccordionFlushExample" componentName="React Bootstrap Accordion" />
-
-### Always open behavior
-
-Use the `alwaysOpen` property to keep multiple accordion items expanded at the same time, mimicking Bootstrap’s multiple-item open functionality.
-
-<ExampleSnippet className="theme-bootstrap" component="AccordionAlwaysOpenExample" componentName="React Bootstrap Accordion" />
-
-## API reference
-
-Refer to the API documentation for detailed descriptions of all the available props and components used to create Bootstrap-styled accordions in React.
-
-- [&lt;CAccordion /&gt;](../api/#caccordion)
-- [&lt;CAccordionBody /&gt;](../api/#caccordionbody)
-- [&lt;CAccordionHeader /&gt;](../api/#caccordionheader)
-- [&lt;CAccordionItem /&gt;](../api/#caccordionitem)
\ No newline at end of file
diff --git a/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx b/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx
deleted file mode 100644
index 04091e0f..00000000
--- a/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
-
-export const AccordionAlwaysOpenExample = () => {
-  return (
-    <CAccordion alwaysOpen activeItemKey={2}>
-      <CAccordionItem itemKey={1}>
-        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-      <CAccordionItem itemKey={2}>
-        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-      <CAccordionItem itemKey={3}>
-        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-    </CAccordion>
-  )
-}
diff --git a/packages/docs/content/components/accordion/examples/AccordionExample.tsx b/packages/docs/content/components/accordion/examples/AccordionExample.tsx
deleted file mode 100644
index e46f34ef..00000000
--- a/packages/docs/content/components/accordion/examples/AccordionExample.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
-
-export const AccordionExample = () => {
-  return (
-    <CAccordion activeItemKey={2}>
-      <CAccordionItem itemKey={1}>
-        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-      <CAccordionItem itemKey={2}>
-        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-      <CAccordionItem itemKey={3}>
-        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-    </CAccordion>
-  )
-}
diff --git a/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx b/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx
deleted file mode 100644
index 0b9e1ed4..00000000
--- a/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
-
-export const AccordionFlushExample = () => {
-  return (
-    <CAccordion flush>
-      <CAccordionItem itemKey={1}>
-        <CAccordionHeader>Accordion Item #1</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-      <CAccordionItem itemKey={2}>
-        <CAccordionHeader>Accordion Item #2</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-      <CAccordionItem itemKey={3}>
-        <CAccordionHeader>Accordion Item #3</CAccordionHeader>
-        <CAccordionBody>
-          <strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
-          until the collapse plugin adds the appropriate classes that we use to style each element.
-          These classes control the overall appearance, as well as the showing and hiding via CSS
-          transitions. You can modify any of this with custom CSS or overriding our default
-          variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
-          <code>.accordion-body</code>, though the transition does limit overflow.
-        </CAccordionBody>
-      </CAccordionItem>
-    </CAccordion>
-  )
-}
diff --git a/packages/docs/content/components/accordion/index.mdx b/packages/docs/content/components/accordion/index.mdx
deleted file mode 100644
index 6bacb217..00000000
--- a/packages/docs/content/components/accordion/index.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: React Accordion Component
-name: Accordion
-description: Build vertically collapsing accordions in combination with our React Accordion component.
-route: /components/accordion/
-other_frameworks: accordion
----
-
-## How to use React Accordion component.
-
-Click the accordions below to expand/collapse the accordion content.
-
-<ExampleSnippet component="AccordionExample" componentName="React Accordion" />
-
-### Flush
-
-Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
-
-<ExampleSnippet component="AccordionFlushExample" componentName="React Accordion" />
-
-### Always open
-
-Add `alwaysOpen` property to make react accordion items stay open when another item is opened.
-
-<ExampleSnippet component="AccordionAlwaysOpenExample" componentName="React Accordion" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CAccordion /&gt;](./api/#caccordion)
-- [&lt;CAccordionBody /&gt;](./api/#caccordionbody)
-- [&lt;CAccordionHeader /&gt;](./api/#caccordionheader)
-- [&lt;CAccordionItem /&gt;](./api/#caccordionitem)
-
diff --git a/packages/docs/content/components/accordion/styling.mdx b/packages/docs/content/components/accordion/styling.mdx
deleted file mode 100644
index 17dadcea..00000000
--- a/packages/docs/content/components/accordion/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: React Accordion Component Styling
-name: Accordion Styling
-description: Learn how to customize the React Accordion component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
-route: /components/accordion/
----
-
-### CSS variables
-
-React Accordion supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
-
-<ScssDocs file="_accordion.scss" capture="accordion-css-vars" />
-
-#### How to use CSS variables
-
-```jsx
-const customVars = {
-  '--cui-accordion-color': '#333',
-  '--cui-accordion-bg': '#f8f9fa',
-}
-
-return <CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="accordion-variables" />
diff --git a/packages/docs/content/components/alert/api.mdx b/packages/docs/content/components/alert/api.mdx
deleted file mode 100644
index 287df6f8..00000000
--- a/packages/docs/content/components/alert/api.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: React Alert Component API
-name: Alert API
-description: Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization.
-route: /components/alert/
----
-
-import CAlertAPI from '../../api/CAlert.api.mdx'
-import CAlertHeadingAPI from '../../api/CAlertHeading.api.mdx'
-import CAlertLinkAPI from '../../api/CAlertLink.api.mdx'
-
-## CAlert
-
-<CAlertAPI />
-
-## CAlertHeading
-
-<CAlertHeadingAPI />
-
-## CAlertLink
-
-<CAlertLinkAPI />
diff --git a/packages/docs/content/components/alert/bootstrap.mdx b/packages/docs/content/components/alert/bootstrap.mdx
deleted file mode 100644
index 225a0735..00000000
--- a/packages/docs/content/components/alert/bootstrap.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: React Bootstrap Alert Component
-name: Alert with Bootstrap Styling
-description: Learn how to use CoreUI’s React Alert component styled with Bootstrap for contextual feedback messages and dismissible UI alerts.
-menu: Components
-route: /components/alert/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Alert component
-
-CoreUI’s React Bootstrap Alerts provide contextual feedback messages for typical user interactions. Each alert supports Bootstrap-based colors and can include additional content and dismiss functionality.
-
-<ExampleSnippet className="theme-bootstrap" component="AlertExample" componentName="React Bootstrap Alert" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-### Live example
-
-Click the button below to display an alert (initially hidden), then dismiss it using the built-in close button — styled the Bootstrap way.
-
-<ExampleSnippet className="theme-bootstrap" component="AlertLiveExample" componentName="React Bootstrap Alert" />
-
-### Link color
-
-To include links inside your alert, use the `<CAlertLink>` component — it automatically adopts the contextual Bootstrap color of the parent alert.
-
-<ExampleSnippet className="theme-bootstrap" component="AlertLinkColorExample" componentName="React Bootstrap Alert" />
-
-### Additional content
-
-React Bootstrap Alerts can include extra structured content such as headings, paragraphs, and horizontal rules for enhanced readability.
-
-<ExampleSnippet className="theme-bootstrap" component="AlertAdditionalContentExample" componentName="React Bootstrap Alert" />
-
-### Icons
-
-Use CoreUI Icons and flexbox utilities to add icons to your alerts. Combine them with spacing utilities for precise layout control.
-
-<ExampleSnippet className="theme-bootstrap" component="AlertIcons1Example" componentName="React Bootstrap Alert" />
-
-Need more than one icon in your alert? CoreUI Icons can be stacked or arranged using flex utilities.
-
-<ExampleSnippet className="theme-bootstrap" component="AlertIcons2Example" componentName="React Bootstrap Alert" />
-
-### Solid style
-
-Add `variant="solid"` to give the alert a solid background color, in line with Bootstrap’s solid alert variants.
-
-<ExampleSnippet className="theme-bootstrap" component="AlertSolidExample" componentName="React Bootstrap Alert" />
-
-### Dismissing
-
-Use the `dismissible` prop to allow users to close the alert. This will completely remove it from the DOM.
-
-<ExampleSnippet className="theme-bootstrap" component="AlertDismissingExample" componentName="React Bootstrap Alert" />
-
-<Callout color="warning">
-  When an alert is dismissed, the element is completely removed from the page structure. If a
-  keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
-  depending on the browser, reset to the start of the page/document.
-</Callout>
-
-## API reference
-
-Review the API documentation for detailed information about the props available in the Bootstrap-styled React Alert component.
-
-- [&lt;CAlert /&gt;](../api/#calert)
-- [&lt;CAlertHeading /&gt;](../api/#calertheading)
-- [&lt;CAlertLink /&gt;](../api/#calertlink)
diff --git a/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx b/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx
deleted file mode 100644
index d51a8ea1..00000000
--- a/packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 0e3825ab..00000000
--- a/packages/docs/content/components/alert/examples/AlertDismissingExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index b9454ba7..00000000
--- a/packages/docs/content/components/alert/examples/AlertExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 7c47cc48..00000000
--- a/packages/docs/content/components/alert/examples/AlertIcons1Example.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index 64be2cc8..00000000
--- a/packages/docs/content/components/alert/examples/AlertIcons2Example.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index aa5e47ce..00000000
--- a/packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index 68584534..00000000
--- a/packages/docs/content/components/alert/examples/AlertLiveExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 98917b57..00000000
--- a/packages/docs/content/components/alert/examples/AlertSolidExample.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index d6e4064a..00000000
--- a/packages/docs/content/components/alert/index.mdx
+++ /dev/null
@@ -1,70 +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
----
-
-## How to use React Alert Component.
-
-React Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the **required** contextual `color` props (e.g., `primary`). For inline dismissal, use the [dismissing prop](#dismissing).
-
-<ExampleSnippet component="AlertExample" componentName="React Alert" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-### Live example
-
-Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
-
-<ExampleSnippet component="AlertLiveExample" componentName="React Alert" />
-
-### Link color
-
-Use the `<CAlertLink>` component to immediately give matching colored links inside any react alert component.
-
-<ExampleSnippet component="AlertLinkColorExample" componentName="React Alert" />
-
-### Additional content
-
-React Alert can also incorporate supplementary components &amp; elements like heading, paragraph, and divider.
-
-<ExampleSnippet component="AlertAdditionalContentExample" componentName="React Alert" />
-
-### Icons
-
-Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://coreui.io/icons/) to create react alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
-
-<ExampleSnippet component="AlertIcons1Example" componentName="React Alert" />
-
-Need more than one icon for your react alerts? Consider using [CoreUI Icons](https://coreui.io/icons/).
-
-<ExampleSnippet component="AlertIcons2Example" componentName="React Alert" />
-
-### Solid
-
-Use `variant="solid"` to change contextual colors to solid.
-
-<ExampleSnippet component="AlertSolidExample" componentName="React Alert" />
-
-### Dismissing
-
-React Alert component can also be easily dismissed. Just add the `dismissible` prop.
-
-<ExampleSnippet component="AlertDismissingExample" componentName="React Alert" />
-
-<Callout color="warning">
-  When an alert is dismissed, the element is completely removed from the page structure. If a
-  keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
-  depending on the browser, reset to the start of the page/document.
-</Callout>
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CAlert /&gt;](./api/#calert)
-- [&lt;CAlertHeading /&gt;](./api/#calertheading)
-- [&lt;CAlertLink /&gt;](./api/#calertlink)
diff --git a/packages/docs/content/components/alert/styling.mdx b/packages/docs/content/components/alert/styling.mdx
deleted file mode 100644
index 07d572f3..00000000
--- a/packages/docs/content/components/alert/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/avatar/api.mdx
deleted file mode 100644
index 43f01720..00000000
--- a/packages/docs/content/components/avatar/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Avatar Component API
-name: Avatar API
-description: Explore the API reference for the React Avatar component and discover how to effectively utilize its props for customization.
-route: /components/avatar/
----
-
-import CAvatarAPI from '../../api/CAvatar.api.mdx'
-
-## CAvatar
-
-<CAvatarAPI />
diff --git a/packages/docs/content/components/avatar/bootstrap.mdx b/packages/docs/content/components/avatar/bootstrap.mdx
deleted file mode 100644
index 4dfa9db8..00000000
--- a/packages/docs/content/components/avatar/bootstrap.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: React Bootstrap Avatar Component
-name: Avatar with Bootstrap Styling
-description: Learn how to use CoreUI’s React Avatar component styled with Bootstrap to display profile images, icons, initials, and status indicators in a consistent and responsive design.
-route: /components/avatar/
-bootstrap_component: true
----
-
-## Image avatars
-
-Use Bootstrap-styled React avatars to display user profile images in a circular format — ideal for representing user accounts and contacts.
-
-<ExampleSnippet className="theme-bootstrap" component="AvatarImage" componentName="React Bootstrap Avatar" />
-
-## Letter avatars
-
-Display user initials using letter-based avatars. A perfect fallback when images aren’t available, and still visually consistent with Bootstrap styling.
-
-<ExampleSnippet className="theme-bootstrap" component="AvatarLetter" componentName="React Bootstrap Avatar" />
-
-## Icon avatars
-
-Insert icons into avatars for representing roles, objects, or placeholder users. Supports vector icons with Bootstrap-friendly layout.
-
-<ExampleSnippet className="theme-bootstrap" component="AvatarIcon" componentName="React Bootstrap Avatar" />
-
-## Rounded avatars
-
-Use the `shape="rounded"` prop to apply Bootstrap’s rounded corners to the avatar, giving it a subtle square-rounded appearance.
-
-<ExampleSnippet className="theme-bootstrap" component="AvatarRounded" componentName="React Bootstrap Avatar" />
-
-## Square avatars
-
-To make avatars fully square with no border radius, apply `shape="rounded-0"`, matching Bootstrap’s `rounded-0` utility style.
-
-<ExampleSnippet className="theme-bootstrap" component="AvatarSquare" componentName="React Bootstrap Avatar" />
-
-## Sizes
-
-Customize avatar size using the `size` prop. Available options include `xl`, `lg`, `md`, and `sm`, aligning with Bootstrap’s scalable design system.
-
-<ExampleSnippet className="theme-bootstrap" component="AvatarSizes" componentName="React Bootstrap Avatar" />
-
-## Avatars with status
-
-Add a small status indicator (e.g. online, offline) to avatars using the `status` prop — useful for chat interfaces or user dashboards.
-
-<ExampleSnippet className="theme-bootstrap" component="AvatarWithStatus" componentName="React Bootstrap Avatar" />
-
-## API reference
-
-Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component.
-
-- [&lt;CAvatar /&gt;](../api/#cavatar)
diff --git a/packages/docs/content/components/avatar/examples/AvatarIcon.tsx b/packages/docs/content/components/avatar/examples/AvatarIcon.tsx
deleted file mode 100644
index 80a56932..00000000
--- a/packages/docs/content/components/avatar/examples/AvatarIcon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index 266a306e..00000000
--- a/packages/docs/content/components/avatar/examples/AvatarImage.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CAvatar } from '@coreui/react'
-
-export const AvatarImage = () => {
-  return (
-    <>
-      <CAvatar src={withPrefix('/images/avatars/1.jpg')} />
-      <CAvatar src={withPrefix('/images/avatars/2.jpg')} />
-      <CAvatar src={withPrefix('/images/avatars/3.jpg')} />
-    </>
-  )
-}
diff --git a/packages/docs/content/components/avatar/examples/AvatarLetter.tsx b/packages/docs/content/components/avatar/examples/AvatarLetter.tsx
deleted file mode 100644
index a67c7406..00000000
--- a/packages/docs/content/components/avatar/examples/AvatarLetter.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index b2d69418..00000000
--- a/packages/docs/content/components/avatar/examples/AvatarRounded.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 7cf52140..00000000
--- a/packages/docs/content/components/avatar/examples/AvatarSizes.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 1a35ac8f..00000000
--- a/packages/docs/content/components/avatar/examples/AvatarSquare.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index ce8141fa..00000000
--- a/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CAvatar } from '@coreui/react'
-
-export const AvatarWithStatus = () => {
-  return (
-    <>
-      <CAvatar src={withPrefix('/images/avatars/1.jpg')} status="success" />
-      <CAvatar color="secondary" status="danger">
-        CUI
-      </CAvatar>
-    </>
-  )
-}
diff --git a/packages/docs/content/components/avatar/index.mdx b/packages/docs/content/components/avatar/index.mdx
deleted file mode 100644
index 2789b003..00000000
--- a/packages/docs/content/components/avatar/index.mdx
+++ /dev/null
@@ -1,56 +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.
-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
deleted file mode 100644
index eaefe78d..00000000
--- a/packages/docs/content/components/avatar/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/badge/api.mdx
deleted file mode 100644
index 0cf7ef43..00000000
--- a/packages/docs/content/components/badge/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Badge Component API
-name: Badge API
-description: Explore the API reference for the React Badge component and discover how to effectively utilize its props for customization.
-route: /components/badge/
----
-
-import CBadgeAPI from '../../api/CBadge.api.mdx'
-
-## CBadge
-
-<CBadgeAPI />
diff --git a/packages/docs/content/components/badge/bootstrap.mdx b/packages/docs/content/components/badge/bootstrap.mdx
deleted file mode 100644
index 26481218..00000000
--- a/packages/docs/content/components/badge/bootstrap.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: React Bootstrap Badge Component
-name: Badge with Bootstrap Styling
-description: Learn how to use CoreUI’s React Badge component with Bootstrap styles to display counters, labels, and indicators within buttons, links, and UI elements.
-route: /components/badge/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Badge component
-
-React Bootstrap Badges scale based on their parent using `em` units, making them easy to embed inside headings, buttons, or navigation items.
-
-<ExampleSnippet className="theme-bootstrap" component="BadgeExample" componentName="React Bootstrap Badge" />
-
-You can also use badges inside buttons and links to display counters or notifications.
-
-<ExampleSnippet className="theme-bootstrap" component="Badge2Example" componentName="React Bootstrap Badge" />
-
-Keep in mind that depending on usage, badges might be challenging for screen reader users. Add visually hidden helper text when needed to improve accessibility.
-
-<ExampleSnippet className="theme-bootstrap" component="Badge3Example" componentName="React Bootstrap Badge" />
-
-### Positioned badges
-
-Use the `position` prop to place the badge in the corner of a button or link, mimicking the Bootstrap positioning helpers.
-
-<ExampleSnippet className="theme-bootstrap" component="BadgePositionedExample" componentName="React Bootstrap Badge" />
-
-You can also create generic status indicators without a number by combining badges with utility classes.
-
-<ExampleSnippet className="theme-bootstrap" component="BadgePositioned2Example" componentName="React Bootstrap Badge" />
-
-## Contextual variations
-
-Apply `color` props like `primary`, `danger`, or `success` to control the background color of the badge in a Bootstrap-consistent way.
-
-<ExampleSnippet className="theme-bootstrap" component="BadgeContextualVariations" componentName="React Bootstrap Badge" />
-
-Use `textBgColor` to automatically set contrasting text and background colors according to WCAG accessibility standards.
-
-<ExampleSnippet className="theme-bootstrap" component="BadgeContextual2Variations" componentName="React Bootstrap Badge" />
-
-## Pill badges
-
-To make badges more rounded, use the `shape="rounded-pill"` prop. This mirrors Bootstrap’s pill-style badge appearance.
-
-<ExampleSnippet className="theme-bootstrap" component="BadgePillExample" componentName="React Bootstrap Badge" />
-
-## API reference
-
-See below for the full API reference for all available props for the Bootstrap-styled React Badge component.
-
-- [&lt;CBadge /&gt;](../api/#cbadge)
diff --git a/packages/docs/content/components/badge/examples/Badge2Example.tsx b/packages/docs/content/components/badge/examples/Badge2Example.tsx
deleted file mode 100644
index c5af3862..00000000
--- a/packages/docs/content/components/badge/examples/Badge2Example.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index ee8f2ef9..00000000
--- a/packages/docs/content/components/badge/examples/Badge3Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 363ec2aa..00000000
--- a/packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 7f601c5f..00000000
--- a/packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 83812e06..00000000
--- a/packages/docs/content/components/badge/examples/BadgeExample.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index fad582a6..00000000
--- a/packages/docs/content/components/badge/examples/BadgePillExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 53a01aef..00000000
--- a/packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index b12cf61a..00000000
--- a/packages/docs/content/components/badge/examples/BadgePositionedExample.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index a0cda7bd..00000000
--- a/packages/docs/content/components/badge/index.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-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
deleted file mode 100644
index 4dcbb45c..00000000
--- a/packages/docs/content/components/badge/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/breadcrumb/api.mdx
deleted file mode 100644
index a2f37b3f..00000000
--- a/packages/docs/content/components/breadcrumb/api.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: React Breadcrumb Component API
-name: Breadcrumb API
-description: Explore the API reference for the React Breadcrumb component and discover how to effectively utilize its props for customization.
-route: /components/breadcrumb/
----
-
-import CBreadcrumbAPI from '../../api/CBreadcrumb.api.mdx'
-import CBreadcrumbItemAPI from '../../api/CBreadcrumbItem.api.mdx'
-
-## CBreadcrumb
-
-<CBreadcrumbAPI />
-
-## CBreadcrumbItem
-
-<CBreadcrumbItemAPI />
diff --git a/packages/docs/content/components/breadcrumb/bootstrap.mdx b/packages/docs/content/components/breadcrumb/bootstrap.mdx
deleted file mode 100644
index 56b1f06d..00000000
--- a/packages/docs/content/components/breadcrumb/bootstrap.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: React Bootstrap Breadcrumb Component
-name: Breadcrumb with Bootstrap Styling
-description: Learn how to use CoreUI’s React Breadcrumb component styled with Bootstrap to indicate navigation hierarchy and enhance user orientation within your app or website.
-route: /components/breadcrumb/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Breadcrumb component
-
-The React Bootstrap Breadcrumb navigation component shows users where they are in the application hierarchy. It automatically inserts visual separators via CSS, so you don’t have to manually include them.
-
-<ExampleSnippet className="theme-bootstrap" component="BreadcrumbExample" componentName="React Bootstrap Breadcrumb" />
-
-## Custom dividers
-
-Separators between breadcrumb items are automatically inserted using CSS via [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and the [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property.
-
-You can customize the divider using the CSS variable `--cui-breadcrumb-divider` or the Sass variable `$breadcrumb-divider`. For RTL support, there’s also `$breadcrumb-divider-flipped`.
-
-<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividersExample" componentName="React Bootstrap Breadcrumb" />
-
-To change the divider in Sass, use the `quote` function. For example, to use a `>` character:
-
-```scss
-$breadcrumb-divider: quote('>');
-```
-
-It’s also possible to use an **embedded SVG icon** as a divider by assigning it to the custom property or Sass variable:
-
-<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividers2Example" componentName="React Bootstrap Breadcrumb" />
-
-```scss
-$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
-width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
-```
-
-To remove dividers entirely, set the CSS custom property to an empty string or the Sass variable to `none`.
-
-<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividers3Example" componentName="React Bootstrap Breadcrumb" />
-
-```scss
-$breadcrumb-divider: none;
-```
-
-## Accessibility
-
-React Bootstrap Breadcrumbs are accessible by default. CoreUI adds `aria-label="breadcrumb"` to the navigation container and `aria-current="page"` to the active item to ensure proper screen reader behavior.
-
-For best practices, refer to the [WAI-ARIA Authoring Practices: Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
-
-## API reference
-
-Check the API reference below for full details on all available props for the Bootstrap-styled React Breadcrumb component.
-
-- [&lt;CBreadcrumb /&gt;](../api/#cbreadcrumb)
-- [&lt;CBreadcrumbItem /&gt;](../api/#cbreadcrumbitem)
diff --git a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx b/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx
deleted file mode 100644
index da355c51..00000000
--- a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 04a943a2..00000000
--- a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 9b814696..00000000
--- a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index bd002005..00000000
--- a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index d9006e97..00000000
--- a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 2ab4116e..00000000
--- a/packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index a50c180a..00000000
--- a/packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 8a20ae03..00000000
--- a/packages/docs/content/components/breadcrumb/index.mdx
+++ /dev/null
@@ -1,55 +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.
-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
deleted file mode 100644
index 874d3736..00000000
--- a/packages/docs/content/components/breadcrumb/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/button-group/api.mdx
deleted file mode 100644
index dcf5b538..00000000
--- a/packages/docs/content/components/button-group/api.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: React Button Group Component API
-name: Button Group API
-description: Explore the API reference for the React Button Group component and discover how to effectively utilize its props for customization.
-route: /components/button-group/
----
-
-import CButtonGroupAPI from '../../api/CButtonGroup.api.mdx'
-import CButtonToolbarAPI from '../../api/CButtonToolbar.api.mdx'
-
-## CButtonGroup
-
-<CButtonGroupAPI />
-
-## CButtonToolbar
-
-<CButtonToolbarAPI />
diff --git a/packages/docs/content/components/button-group/bootstrap.mdx b/packages/docs/content/components/button-group/bootstrap.mdx
deleted file mode 100644
index 71728df0..00000000
--- a/packages/docs/content/components/button-group/bootstrap.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: React Bootstrap Button Group Component
-name: Button Group with Bootstrap Styling
-description: Learn how to group buttons using the React Bootstrap Button Group component from CoreUI. Create accessible, styled toolbars and button sets with ease.
-route: /components/button-group/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Button Group component
-
-The React Bootstrap Button Group component allows you to group multiple buttons together into a single toolbar-like unit. Wrap a series of `<CButton>` components in a `<CButtonGroup>` to get started.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroupExample" componentName="React Bootstrap Button Group" />
-
-<Callout color="info" title={<>Ensure the correct <code>role</code> and provide a label</>}>
-  For assistive technologies (e.g. screen readers) to identify a set of buttons as grouped, use `role="group"` for button groups and `role="toolbar"` for toolbars.
-
-  Always include an accessible label using `aria-label` or `aria-labelledby` to clarify the purpose of the group.
-</Callout>
-
-React Bootstrap Button Groups can also be applied to a group of links instead of using the [`CNav`](./../navs-tabs/#base-nav) component.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroup2Example" componentName="React Bootstrap Button Group" />
-
-## Mixed styles in React Bootstrap Button Groups
-
-Combine buttons with different styles within a single group for more flexible UI designs.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroupMixedStylesExample" componentName="React Bootstrap Button Group" />
-
-## Outlined button styles
-
-Use `variant="outline"` on grouped buttons to apply Bootstrap's outline button style across the group.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroupOutlinedStylesExample" componentName="React Bootstrap Button Group" />
-
-## Checkbox and radio button groups
-
-Create interactive grouped controls by combining button-style checkboxes and radio buttons inside a React Bootstrap Button Group.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroupCheckboxAndRadioExample" componentName="React Bootstrap Button Group" />
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroupCheckboxAndRadio2Example" componentName="React Bootstrap Button Group" />
-
-## React Bootstrap Button Toolbar
-
-Group multiple button groups together into a toolbar using `<CButtonToolbar>`. Combine with layout utilities to control spacing and alignment.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonToolbarExample" componentName="React Bootstrap Button Group" />
-
-You can also combine input groups with button groups to create interactive toolbars.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonToolbar2Example" componentName="React Bootstrap Button Group" />
-
-## Sizing React Bootstrap Button Groups
-
-Instead of setting size on individual buttons, apply the `size` prop to the `<CButtonGroup>` to make all buttons within it uniformly sized.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroupSizingExample" componentName="React Bootstrap Button Group" />
-
-## Nesting button groups
-
-Nest a `<CButtonGroup>` inside another to combine dropdowns with standard buttons, as supported in React Bootstrap Button Group usage.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroupNestingExample" componentName="React Bootstrap Button Group" />
-
-## Vertical React Bootstrap Button Groups
-
-Stack buttons vertically using the vertical variation of React Bootstrap Button Group. Note: split dropdowns are not supported in vertical mode.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGroupVerticalExample" componentName="React Bootstrap Button Group" />
-
-## API reference
-
-Explore the API documentation for available props and configuration for the React Bootstrap Button Group component and toolbars.
-
-- [&lt;CButtonGroup /&gt;](../api/#cbuttongroup)
-- [&lt;CButtonToolbar /&gt;]()
diff --git a/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx b/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx
deleted file mode 100644
index f4e129cf..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index e18dc93b..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index 8246f88f..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index 3f6fd246..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index aaaf76c0..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 6e2a4ef6..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 338151bb..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index e1b943ac..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index dda517d3..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-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
deleted file mode 100644
index db237544..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-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
deleted file mode 100644
index a974353c..00000000
--- a/packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 78b875ad..00000000
--- a/packages/docs/content/components/button-group/index.mdx
+++ /dev/null
@@ -1,74 +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.
-route: /components/button-group/
-other_frameworks: button-group
----
-
-## How to use React Button Group Component.
-
-Wrap a series of `<CButton>` components in `<CButtonGroup>`.
-
-<ExampleSnippet component="ButtonGroupExample" componentName="React Button Group" />
-
-<Callout color="info" title={<>Ensure the correct <code>role</code> and provide a label</>}>
-  For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`.
-  
-  Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used.
-</Callout>
-
-These classes can also be added to groups of links, as an alternative to the [`CNav`](./../navs-tabs/#base-nav) components.
-
-<ExampleSnippet component="ButtonGroup2Example" componentName="React Button Group" />
-
-## Mixed styles
-
-<ExampleSnippet component="ButtonGroupMixedStylesExample" componentName="React Button Group" />
-
-## Outlined styles
-
-<ExampleSnippet component="ButtonGroupOutlinedStylesExample" componentName="React Button Group" />
-
-## Checkbox and radio button groups
-
-Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
-
-<ExampleSnippet component="ButtonGroupCheckboxAndRadioExample" componentName="React Button Group" />
-
-<ExampleSnippet component="ButtonGroupCheckboxAndRadio2Example" componentName="React Button Group" />
-
-## Button toolbar
-
-Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.
-
-<ExampleSnippet component="ButtonToolbarExample" componentName="React Button Group" />
-
-Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
-
-<ExampleSnippet component="ButtonToolbar2Example" componentName="React Button Group" />
-
-## Sizing
-
-Alternatively, of implementing button sizing classes to each button in a group, set `size` property to all `<CButtonGroup>`'s, including each one when nesting multiple groups.
-
-<ExampleSnippet component="ButtonGroupSizingExample" componentName="React Button Group" />
-
-## Nesting
-
-Put a `<CButtonGroup>` inside another `<CButtonGroup>` when you need dropdown menus combined with a series of buttons.
-
-<ExampleSnippet component="ButtonGroupNestingExample" componentName="React Button Group" />
-
-## Vertical variation
-
-Create a set of buttons that appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
-
-<ExampleSnippet component="ButtonGroupVerticalExample" componentName="React Button Group" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CButtonGroup /&gt;](./api/#cbuttongroup)
-- [&lt;CButtonToolbar /&gt;](./api/#cbuttontoolbar)
diff --git a/packages/docs/content/components/button/api.mdx b/packages/docs/content/components/button/api.mdx
deleted file mode 100644
index 532898de..00000000
--- a/packages/docs/content/components/button/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Button Component API
-name: Button API
-description: Explore the API reference for the React Button component and discover how to effectively utilize its props for customization.
-route: /components/button/
----
-
-import CButtonAPI from '../../api/CButton.api.mdx'
-
-## CButton
-
-<CButtonAPI />
diff --git a/packages/docs/content/components/button/bootstrap.mdx b/packages/docs/content/components/button/bootstrap.mdx
deleted file mode 100644
index 12bb09e1..00000000
--- a/packages/docs/content/components/button/bootstrap.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: React Bootstrap Button Component
-name: Buttons with Bootstrap Styling
-description: Learn how to use CoreUI’s React Button component with Bootstrap styling to build interactive, accessible, and responsive buttons for forms, tables, modals, and more.
-route: /components/button/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Button component
-
-CoreUI provides a set of prebuilt React Button components styled with Bootstrap. Buttons signal actions to users and can initiate events both in the UI and behind the scenes.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonExample" componentName="React Bootstrap Button" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-## Disable text wrapping
-
-To prevent text wrapping inside a button, apply the `.text-nowrap` class to the `<CButton>`. Alternatively, set `$btn-white-space: nowrap` in Sass to apply it globally.
-
-## Button components
-
-The `<CButton>` component can render as a `<button>`, `<a>`, or `<input>` element. When using it as an anchor for functionality (like toggles), add `role="button"` for accessibility.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonComponentsExample" componentName="React Bootstrap Button" />
-
-## Outline buttons
-
-Use `variant="outline"` to create buttons with a transparent background and colored border — a more subtle alternative to standard buttons.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonOutlineExample" componentName="React Bootstrap Button" />
-
-## Ghost buttons
-
-For minimal buttons with no background or border, use `variant="ghost"`. These are great for secondary actions.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonGhostExample" componentName="React Bootstrap Button" />
-
-<Callout color="info">
-  Some button styles use light text colors and should be placed on dark backgrounds to maintain contrast.
-</Callout>
-
-## Sizes
-
-Create large or small buttons with the `size="lg"` or `size="sm"` props.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonSizesExample" componentName="React Bootstrap Button" />
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonSizes2Example" componentName="React Bootstrap Button" />
-
-You can also use CSS variables for fully custom sizes.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonSizes3Example" componentName="React Bootstrap Button" />
-
-## Shapes
-
-### Pill buttons
-
-Use pill-shaped buttons for a soft, rounded appearance.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonShapePillExample" componentName="React Bootstrap Button" />
-
-### Square buttons
-
-Use square-shaped buttons for compact, uniform interactions.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonShapeSquareExample" componentName="React Bootstrap Button" />
-
-## Disabled state
-
-Disable any `<CButton>` by passing the `disabled` prop. This applies `pointer-events: none` and dims the button.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonDisabledExample" componentName="React Bootstrap Button" />
-
-Disabling anchor elements (`<a>`) requires additional steps: CoreUI applies the `.disabled` class, adds `aria-disabled="true"`, and sets `tabindex="-1"`.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonDisabled2Example" componentName="React Bootstrap Button" />
-
-These steps prevent users from interacting with disabled links via keyboard or mouse.
-
-## Block buttons
-
-To make buttons span the full width of their container, use Bootstrap's layout utilities like `.d-grid`, `.w-100`, and `.col-*`.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonBlockExample" componentName="React Bootstrap Button" />
-
-Responsive layout: vertically stacked until the `md` breakpoint, where `.d-md-block` reverts to inline.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonBlock2Example" componentName="React Bootstrap Button" />
-
-You can also create column-based buttons using `.col-6` and center them with `.mx-auto`.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonBlock3Example" componentName="React Bootstrap Button" />
-
-Use flex utilities and margin helpers to align buttons horizontally when they're no longer stacked.
-
-<ExampleSnippet className="theme-bootstrap" component="ButtonBlock4Example" componentName="React Bootstrap Button" />
-
-## API reference
-
-See the full API reference for all available props in the Bootstrap-styled React Button component.
-
-- [&lt;CButton /&gt;](../api/#cbutton)
diff --git a/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx b/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx
deleted file mode 100644
index 83bf2b92..00000000
--- a/packages/docs/content/components/button/examples/ButtonBlock2Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 585c7e6f..00000000
--- a/packages/docs/content/components/button/examples/ButtonBlock3Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 4ed267b0..00000000
--- a/packages/docs/content/components/button/examples/ButtonBlock4Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 6a3f1c67..00000000
--- a/packages/docs/content/components/button/examples/ButtonBlockExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 92871d4f..00000000
--- a/packages/docs/content/components/button/examples/ButtonComponentsExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index bd4c611f..00000000
--- a/packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index fce450db..00000000
--- a/packages/docs/content/components/button/examples/ButtonDisabledExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index fcf44a76..00000000
--- a/packages/docs/content/components/button/examples/ButtonExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { CButton } from '@coreui/react'
-
-export const ButtonExample = () => {
-  return (
-    <>
-      <CButton color="primary">Primary</CButton>
-      <CButton color="secondary">Secondary</CButton>
-      <CButton color="success">Success</CButton>
-      <CButton color="danger">Danger</CButton>
-      <CButton color="warning">Warning</CButton>
-      <CButton color="info">Info</CButton>
-      <CButton color="light">Light</CButton>
-      <CButton color="dark">Dark</CButton>
-      <CButton color="link">Link</CButton>
-    </>
-  )
-}
diff --git a/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx
deleted file mode 100644
index d99be5d5..00000000
--- a/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { CButton } from '@coreui/react'
-
-export const ButtonGhostBaseClassExample = () => {
-  return (
-    <>
-      <CButton variant="ghost">Base ghost button</CButton>
-      <CButton variant="ghost" active>Active state</CButton>
-      <CButton variant="ghost" disabled>Disabled state</CButton>
-    </>
-  )
-}
diff --git a/packages/docs/content/components/button/examples/ButtonGhostExample.tsx b/packages/docs/content/components/button/examples/ButtonGhostExample.tsx
deleted file mode 100644
index 6e595f10..00000000
--- a/packages/docs/content/components/button/examples/ButtonGhostExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { CButton } from '@coreui/react'
-
-export const ButtonGhostExample = () => {
-  return (
-    <>
-      <CButton color="primary" variant="ghost">Primary</CButton>
-      <CButton color="secondary" variant="ghost">Secondary</CButton>
-      <CButton color="success" variant="ghost">Success</CButton>
-      <CButton color="danger" variant="ghost">Danger</CButton>
-      <CButton color="warning" variant="ghost">Warning</CButton>
-      <CButton color="info" variant="ghost">Info</CButton>
-      <CButton color="light" variant="ghost">Light</CButton>
-      <CButton color="dark" variant="ghost">Dark</CButton>
-    </>
-  )
-}
diff --git a/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx
deleted file mode 100644
index 2c5de0e3..00000000
--- a/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { CButton } from '@coreui/react'
-
-export const ButtonOutlineBaseClassExample = () => {
-  return (
-    <>
-      <CButton variant="outline">Base outline button</CButton>
-      <CButton variant="outline" active>Active state</CButton>
-      <CButton variant="outline" disabled>Disabled state</CButton>
-    </>
-  )
-}
diff --git a/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx b/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx
deleted file mode 100644
index 56a41b5c..00000000
--- a/packages/docs/content/components/button/examples/ButtonOutlineExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 73a918b3..00000000
--- a/packages/docs/content/components/button/examples/ButtonShapePillExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 4b307ee8..00000000
--- a/packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index f7f4db15..00000000
--- a/packages/docs/content/components/button/examples/ButtonSizes2Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 91c8c4ac..00000000
--- a/packages/docs/content/components/button/examples/ButtonSizes3Example.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 10eceae6..00000000
--- a/packages/docs/content/components/button/examples/ButtonSizes3Example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 30ee215f..00000000
--- a/packages/docs/content/components/button/examples/ButtonSizesExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 87cb6205..00000000
--- a/packages/docs/content/components/button/index.mdx
+++ /dev/null
@@ -1,124 +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.
-route: /components/button/
-other_frameworks: button
----
-
-## How to use React Button Component.
-
-CoreUI includes a bunch of predefined buttons components, each serving its own semantic purpose. React buttons show what action will happen when the user clicks or touches it. CoreUI buttons are used to initialize operations, both in the background or foreground of an experience.
-
-<ExampleSnippet component="ButtonExample" componentName="React Button" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-## Disable text wrapping
-
-If you don't want the react button text to wrap, you can add the `.text-nowrap` className to the `<CButton>`. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
-
-## Button components
-
-The `<CButton>` component are designed for `<button>` , `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
-
-If you're using `<CButton>` component as `<a>` elements that are used to trigger functionality ex. collapsing content, these links should be given a `role="button"` to adequately communicate their meaning to assistive technologies such as screen readers.
-
-<ExampleSnippet component="ButtonComponentsExample" componentName="React Button" />
-
-## Outline buttons
-
-### Base outline style
-
-The `variant="outline` property provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis.
-
-<ExampleSnippet component="ButtonOutlineBaseClassExample" componentName="React Button" />
-
-These React buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions.
-
-### Themed outline variants
-
-If you need a button, but without the strong background colors, set `color` and `variant=" outline"` props to remove all background colors.
-
-<ExampleSnippet component="ButtonOutlineExample" componentName="React Button" />
-
-These outline variants of our React.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually.
-
-<Callout color="info">
-  Some of the button styles use a relatively light foreground color, and should only be used on a
-  dark background in order to have sufficient contrast.
-</Callout>
-
-## Ghost buttons
-
-### Base ghost style
-
-Use the `variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These React buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state.
-
-They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars.
-
-<ExampleSnippet component="ButtonGhostBaseClassExample" componentName="React Button" />
-
-To apply theme colors to React ghost buttons, use the `color` and `variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color.
-
-<ExampleSnippet component="ButtonGhostExample" componentName="React Button" />
-
-## Sizes
-
-Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes.
-
-<ExampleSnippet component="ButtonSizesExample" componentName="React Button" />
-
-<ExampleSnippet component="ButtonSizes2Example" componentName="React Button" />
-
-You can even roll your own custom sizing with CSS variables:
-
-<ExampleSnippet component="ButtonSizes3Example" componentName="React Button" />
-
-## Shapes
-
-### Pill buttons
-
-<ExampleSnippet component="ButtonShapePillExample" componentName="React Button" />
-
-### Square buttons
-
-<ExampleSnippet component="ButtonShapeSquareExample" componentName="React Button" />
-
-## Disabled state
-
-Add the `disabled` boolean prop to any `<CButton>` component to make buttons look inactive. Disabled button has `pointer-events: none` applied to, disabling hover and active states from triggering.
-
-<ExampleSnippet component="ButtonDisabledExample" componentName="React Button" />
-
-Disabled buttons using the `<a>` component act a little different:
-
-`<a>`s don't support the `disabled` attribute, so CoreUI has to add `.disabled` className to make buttons look inactive. CoreUI also has to add to the disabled button component `aria-disabled="true"` attribute to show the state of the component to assistive technologies.
-
-<ExampleSnippet component="ButtonDisabled2Example" componentName="React Button" />
-
-The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
-
-## Block buttons
-
-Create buttons that span the full width of a parent—by using utilities.
-
-<ExampleSnippet component="ButtonBlockExample" componentName="React Button" />
-
-Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
-
-<ExampleSnippet component="ButtonBlock2Example" componentName="React Button" />
-
-You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.
-
-<ExampleSnippet component="ButtonBlock3Example" componentName="React Button" />
-
-Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
-
-<ExampleSnippet component="ButtonBlock4Example" componentName="React Button" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CButton /&gt;](./api/#cbutton)
diff --git a/packages/docs/content/components/button/styling.mdx b/packages/docs/content/components/button/styling.mdx
deleted file mode 100644
index 57042f41..00000000
--- a/packages/docs/content/components/button/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/callout/api.mdx
deleted file mode 100644
index 8281d7b6..00000000
--- a/packages/docs/content/components/callout/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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
deleted file mode 100644
index 0a89f428..00000000
--- a/packages/docs/content/components/callout/examples/CalloutExample.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index 9463a3c5..00000000
--- a/packages/docs/content/components/callout/index.mdx
+++ /dev/null
@@ -1,21 +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.
-route: /components/callout/
-other_frameworks: callout
----
-
-## Examples
-
-Callout component is prepared for any length of text, as well as an optional elements like icons, headings, etc. For a styling, use one of the **required** contextual props (e.g., `color="success"`).
-
-<ExampleSnippet component="CalloutExample" componentName="React Callout" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CCallout /&gt;](./api/#ccallout)
diff --git a/packages/docs/content/components/callout/styling.mdx b/packages/docs/content/components/callout/styling.mdx
deleted file mode 100644
index 457387b6..00000000
--- a/packages/docs/content/components/callout/styling.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/card/api.mdx
deleted file mode 100644
index 19d54e93..00000000
--- a/packages/docs/content/components/card/api.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: React Card Component API
-name: Card API
-description: Explore the API reference for the React Card component and discover how to effectively utilize its props for customization.
-route: /components/card/
----
-
-import CCardAPI from '../../api/CCard.api.mdx'
-import CCardBodyAPI from '../../api/CCardBody.api.mdx'
-import CCardFooterAPI from '../../api/CCardFooter.api.mdx'
-import CCardGroupAPI from '../../api/CCardGroup.api.mdx'
-import CCardHeaderAPI from '../../api/CCardHeader.api.mdx'
-import CCardImageAPI from '../../api/CCardImage.api.mdx'
-import CCardImageOverlayAPI from '../../api/CCardImageOverlay.api.mdx'
-import CCardLinkAPI from '../../api/CCardLink.api.mdx'
-import CCardSubtitleAPI from '../../api/CCardSubtitle.api.mdx'
-import CCardTextAPI from '../../api/CCardText.api.mdx'
-import CCardTitleAPI from '../../api/CCardTitle.api.mdx'
-
-## CCard
-
-<CCardAPI />
-
-## CCardBody
-
-<CCardBodyAPI />
-
-## CCardFooter
-
-<CCardFooterAPI />
-
-## CCardGroup
-
-<CCardGroupAPI />
-
-## CCardHeader
-
-<CCardHeaderAPI />
-
-## CCardImage
-
-<CCardImageAPI />
-
-## CCardImageOverlay
-
-<CCardImageOverlayAPI />
-
-## CCardLink
-
-<CCardLinkAPI />
-
-## CCardSubtitle
-
-<CCardSubtitleAPI />
-
-## CCardText
-
-<CCardTextAPI />
-
-## CCardTitle
-
-<CCardTitleAPI />
diff --git a/packages/docs/content/components/card/bootstrap.mdx b/packages/docs/content/components/card/bootstrap.mdx
deleted file mode 100644
index 9233bcfe..00000000
--- a/packages/docs/content/components/card/bootstrap.mdx
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: React Bootstrap Card Component
-name: Card with Bootstrap Styling
-description: Learn how to use CoreUI’s React Bootstrap Card component to build flexible content containers with headers, footers, images, list groups, and responsive layouts.
-route: /components/card/
-bootstrap_component: true
----
-
-## About React Bootstrap Card Component
-
-The React Bootstrap Card component is a versatile container used to display content in a structured and responsive way. It supports images, headers, footers, background styles, and more—styled to match Bootstrap's visual language.
-
-## Example usage
-
-React Bootstrap Cards require minimal markup and offer maximum flexibility. They use flexbox for layout, have no default margins, and fill their parent container by default.
-
-<ExampleSnippet className="theme-bootstrap" component="CardExample" componentName="React Bootstrap Card" />
-
-## Content types supported by React Bootstrap Card
-
-### Card body
-
-The main block of the card is wrapped in `<CCardBody>` for consistent padding.
-
-<ExampleSnippet className="theme-bootstrap" component="CardBodyExample" componentName="React Bootstrap Card" />
-
-### Titles, text, and links
-
-Use `<CCardTitle>`, `<CCardSubtitle>`, and `<CCardLink>` to structure text and links inside cards.
-
-<ExampleSnippet className="theme-bootstrap" component="CardTitleExample" componentName="React Bootstrap Card" />
-
-### Images
-
-Use `orientation="top"` to position an image at the top of the card. Use `<CCardText>` to add and style text content.
-
-<ExampleSnippet className="theme-bootstrap" component="CardImagesExample" componentName="React Bootstrap Card" />
-
-### List groups
-
-Display structured lists inside cards using flush list groups.
-
-<ExampleSnippet className="theme-bootstrap" component="CardListGroupsExample" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardListGroups2Example" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardListGroups3Example" componentName="React Bootstrap Card" />
-
-### Kitchen sink
-
-Combine multiple content elements (e.g. image, text, list group) to create a comprehensive card layout.
-
-<ExampleSnippet className="theme-bootstrap" component="CardKitchenSinkExample" componentName="React Bootstrap Card" />
-
-### Header and footer
-
-Use `<CCardHeader>` and `<CCardFooter>` to add headers and footers. You can style headers with `as="h5"` or similar props.
-
-<ExampleSnippet className="theme-bootstrap" component="CardHeaderExample" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardHeader2Example" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardHeader3Example" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardHeaderAndFooterExample" componentName="React Bootstrap Card" />
-
-## Sizing React Bootstrap Cards
-
-Cards are full-width by default. Control width using layout grids, utilities, or custom CSS.
-
-### Grid layout
-
-<ExampleSnippet className="theme-bootstrap" component="CardSizingExample" componentName="React Bootstrap Card" />
-
-### Utility classes
-
-<ExampleSnippet className="theme-bootstrap" component="CardSizing2Example" componentName="React Bootstrap Card" />
-
-### Custom CSS
-
-<ExampleSnippet className="theme-bootstrap" component="CardSizing3Example" componentName="React Bootstrap Card" />
-
-## Text alignment
-
-Use Bootstrap's text alignment utilities to position card content.
-
-<ExampleSnippet className="theme-bootstrap" component="CardTextAlignmentExample" componentName="React Bootstrap Card" />
-
-## Navigation
-
-Add navigational elements using `<CNav>` inside a card header.
-
-<ExampleSnippet className="theme-bootstrap" component="CardNavigationExample" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardNavigation2Example" componentName="React Bootstrap Card" />
-
-## Image placement in React Bootstrap Cards
-
-### Image caps (top or bottom)
-
-<ExampleSnippet className="theme-bootstrap" component="CardImageCapsExample" componentName="React Bootstrap Card" />
-
-### Image overlays
-
-Overlay content on top of background images using Bootstrap utility classes.
-
-<ExampleSnippet className="theme-bootstrap" component="CardImageOverlaysExample" componentName="React Bootstrap Card" />
-
-## Horizontal layout
-
-Use `.g-0` and grid column classes to create responsive horizontal cards.
-
-<ExampleSnippet className="theme-bootstrap" component="CardImageHorizontalExample" componentName="React Bootstrap Card" />
-
-## Styling options
-
-### Background and text color
-
-Use the `color` prop to control card background and text color.
-
-<ExampleSnippet className="theme-bootstrap" component="CardStylesBackgroundAndColorExample" componentName="React Bootstrap Card" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-### Border customization
-
-Apply Bootstrap border utilities or the `textColor` prop to customize card borders.
-
-<ExampleSnippet className="theme-bootstrap" component="CardStylesBorderExample" componentName="React Bootstrap Card" />
-
-### Top border only
-
-<ExampleSnippet className="theme-bootstrap" component="CardStylesTopBorderExample" componentName="React Bootstrap Card" />
-
-## Layout variations
-
-### Card groups
-
-Group cards to render them with equal width and height.
-
-<ExampleSnippet className="theme-bootstrap" component="CardGroupsExample" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardGroups2Example" componentName="React Bootstrap Card" />
-
-### Grid-based cards
-
-Use `<CRow>` and grid props to control the layout of multiple cards in a responsive grid.
-
-<ExampleSnippet className="theme-bootstrap" component="CardGridExample" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardGrid2Example" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardGrid3Example" componentName="React Bootstrap Card" />
-
-<ExampleSnippet className="theme-bootstrap" component="CardGrid4Example" componentName="React Bootstrap Card" />
-
-## API reference
-
-- [&lt;CCard /&gt;](../api/#ccard)
-- [&lt;CCardBody /&gt;](../api/#ccardbody)
-- [&lt;CCardFooter /&gt;](../api/#ccardfooter)
-- [&lt;CCardGroup /&gt;](../api/#ccardgroup)
-- [&lt;CCardHeader /&gt;](../api/#ccardheader)
-- [&lt;CCardImage /&gt;](../api/#ccardimage)
-- [&lt;CCardImageOverlay /&gt;](../api/#ccardimageoverlay)
-- [&lt;CCardLink /&gt;](../api/#ccardlink)
-- [&lt;CCardSubtitle /&gt;](../api/#ccardsubtitle)
-- [&lt;CCardText /&gt;](../api/#ccardtext)
-- [&lt;CCardTitle /&gt;](../api/#ccardtitle)
diff --git a/packages/docs/content/components/card/examples/CardBodyExample.tsx b/packages/docs/content/components/card/examples/CardBodyExample.tsx
deleted file mode 100644
index 6cdc49d6..00000000
--- a/packages/docs/content/components/card/examples/CardBodyExample.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index 251ecfc7..00000000
--- a/packages/docs/content/components/card/examples/CardExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
-
-export const CardExample = () => {
-  return (
-    <CCard style={{ width: '18rem' }}>
-      <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </CCardText>
-        <CButton color="primary" href="#">
-          Go somewhere
-        </CButton>
-      </CCardBody>
-    </CCard>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardGrid2Example.tsx b/packages/docs/content/components/card/examples/CardGrid2Example.tsx
deleted file mode 100644
index d933064b..00000000
--- a/packages/docs/content/components/card/examples/CardGrid2Example.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import {
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardImage,
-  CCardText,
-  CCardTitle,
-  CCol,
-  CRow,
-} from '@coreui/react'
-
-export const CardGrid2Example = () => {
-  return (
-    <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
-      <CCol xs>
-        <CCard>
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard>
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard>
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard>
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-    </CRow>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardGrid3Example.tsx b/packages/docs/content/components/card/examples/CardGrid3Example.tsx
deleted file mode 100644
index 9c870870..00000000
--- a/packages/docs/content/components/card/examples/CardGrid3Example.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
-
-export const CardGrid3Example = () => {
-  return (
-    <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
-      <CCol xs>
-        <CCard className="h-100">
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard className="h-100">
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This card has supporting text below as a natural lead-in to additional content.
-            </CCardText>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard className="h-100">
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This card has even longer content than the first to show that equal height
-              action.
-            </CCardText>
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard className="h-100">
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardGrid4Example.tsx b/packages/docs/content/components/card/examples/CardGrid4Example.tsx
deleted file mode 100644
index 82b2d95a..00000000
--- a/packages/docs/content/components/card/examples/CardGrid4Example.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import {
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardImage,
-  CCardText,
-  CCardTitle,
-  CCol,
-  CRow,
-} from '@coreui/react'
-
-export const CardGrid4Example = () => {
-  return (
-    <CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
-      <CCol xs>
-        <CCard className="h-100">
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard className="h-100">
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This card has supporting text below as a natural lead-in to additional content.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard className="h-100">
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This card has even longer content than the first to show that equal height
-              action.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-    </CRow>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardGridExample.tsx b/packages/docs/content/components/card/examples/CardGridExample.tsx
deleted file mode 100644
index 2da390d9..00000000
--- a/packages/docs/content/components/card/examples/CardGridExample.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import {
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardImage,
-  CCardText,
-  CCardTitle,
-  CCol,
-  CRow,
-} from '@coreui/react'
-
-export const CardGridExample = () => {
-  return (
-    <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
-      <CCol xs>
-        <CCard>
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard>
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard>
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-      <CCol xs>
-        <CCard>
-          <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-          </CCardBody>
-          <CCardFooter>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardFooter>
-        </CCard>
-      </CCol>
-    </CRow>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardGroups2Example.tsx b/packages/docs/content/components/card/examples/CardGroups2Example.tsx
deleted file mode 100644
index 86030f1f..00000000
--- a/packages/docs/content/components/card/examples/CardGroups2Example.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import {
-  CCard,
-  CCardBody,
-  CCardFooter,
-  CCardGroup,
-  CCardImage,
-  CCardText,
-  CCardTitle,
-} from '@coreui/react'
-
-export const CardGroups2Example = () => {
-  return (
-    <CCardGroup>
-      <CCard>
-        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            This is a wider card with supporting text below as a natural lead-in to additional
-            content. This content is a little bit longer.
-          </CCardText>
-        </CCardBody>
-        <CCardFooter>
-          <small className="text-body-secondary">Last updated 3 mins ago</small>
-        </CCardFooter>
-      </CCard>
-      <CCard>
-        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            This card has supporting text below as a natural lead-in to additional content.
-          </CCardText>
-        </CCardBody>
-        <CCardFooter>
-          <small className="text-body-secondary">Last updated 3 mins ago</small>
-        </CCardFooter>
-      </CCard>
-      <CCard>
-        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            This is a wider card with supporting text below as a natural lead-in to additional
-            content. This card has even longer content than the first to show that equal height
-            action.
-          </CCardText>
-        </CCardBody>
-        <CCardFooter>
-          <small className="text-body-secondary">Last updated 3 mins ago</small>
-        </CCardFooter>
-      </CCard>
-    </CCardGroup>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardGroupsExample.tsx b/packages/docs/content/components/card/examples/CardGroupsExample.tsx
deleted file mode 100644
index ff4ab1cb..00000000
--- a/packages/docs/content/components/card/examples/CardGroupsExample.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react'
-
-export const CardGroupsExample = () => {
-  return (
-    <CCardGroup>
-      <CCard>
-        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            This is a wider card with supporting text below as a natural lead-in to additional
-            content. This content is a little bit longer.
-          </CCardText>
-          <CCardText>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardText>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            This card has supporting text below as a natural lead-in to additional content.
-          </CCardText>
-          <CCardText>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardText>
-        </CCardBody>
-      </CCard>
-      <CCard>
-        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            This is a wider card with supporting text below as a natural lead-in to additional
-            content. This card has even longer content than the first to show that equal height
-            action.
-          </CCardText>
-          <CCardText>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardText>
-        </CCardBody>
-      </CCard>
-    </CCardGroup>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardHeader2Example.tsx b/packages/docs/content/components/card/examples/CardHeader2Example.tsx
deleted file mode 100644
index 56d8a1e7..00000000
--- a/packages/docs/content/components/card/examples/CardHeader2Example.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index aff6f3c0..00000000
--- a/packages/docs/content/components/card/examples/CardHeader3Example.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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
deleted file mode 100644
index 190a1731..00000000
--- a/packages/docs/content/components/card/examples/CardHeaderAndFooterExample.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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
deleted file mode 100644
index c80926ed..00000000
--- a/packages/docs/content/components/card/examples/CardHeaderExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 1cdd37d4..00000000
--- a/packages/docs/content/components/card/examples/CardImageCapsExample.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
-
-export const CardImageCapsExample = () => {
-  return (
-    <>
-      <CCard className="mb-3">
-        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            This is a wider card with supporting text below as a natural lead-in to additional
-            content. This content is a little bit longer.
-          </CCardText>
-          <CCardText>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardText>
-        </CCardBody>
-      </CCard>
-      <CCard className="mb-3">
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            This is a wider card with supporting text below as a natural lead-in to additional
-            content. This content is a little bit longer.
-          </CCardText>
-          <CCardText>
-            <small className="text-body-secondary">Last updated 3 mins ago</small>
-          </CCardText>
-        </CCardBody>
-        <CCardImage orientation="bottom" src={withPrefix('/images/react.jpg')} />
-      </CCard>
-    </>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx
deleted file mode 100644
index e7f7b5c5..00000000
--- a/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
-
-export const CardImageHorizontalExample = () => {
-  return (
-    <CCard className="mb-3" style={{ maxWidth: '540px' }}>
-      <CRow className="g-0">
-        <CCol md={4}>
-          <CCardImage src={withPrefix('/images/react400.jpg')} />
-        </CCol>
-        <CCol md={8}>
-          <CCardBody>
-            <CCardTitle>Card title</CCardTitle>
-            <CCardText>
-              This is a wider card with supporting text below as a natural lead-in to additional
-              content. This content is a little bit longer.
-            </CCardText>
-            <CCardText>
-              <small className="text-body-secondary">Last updated 3 mins ago</small>
-            </CCardText>
-          </CCardBody>
-        </CCol>
-      </CRow>
-    </CCard>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx
deleted file mode 100644
index b6c08a89..00000000
--- a/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react'
-
-export const CardImageOverlaysExample = () => {
-  return (
-    <CCard className="mb-3 bg-dark text-white">
-      <CCardImage src={withPrefix('/images/react.jpg')} />
-      <CCardImageOverlay className="d-flex flex-column align-items-center justify-content-center">
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          This is a wider card with supporting text below as a natural lead-in to additional
-          content. This content is a little bit longer.
-        </CCardText>
-        <CCardText>Last updated 3 mins ago</CCardText>
-      </CCardImageOverlay>
-    </CCard>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardImagesExample.tsx b/packages/docs/content/components/card/examples/CardImagesExample.tsx
deleted file mode 100644
index e83a37be..00000000
--- a/packages/docs/content/components/card/examples/CardImagesExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react'
-
-export const CardImagesExample = () => {
-  return (
-    <CCard style={{ width: '18rem' }}>
-      <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-      <CCardBody>
-        <CCardText>
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </CCardText>
-      </CCardBody>
-    </CCard>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx
deleted file mode 100644
index fcdadebe..00000000
--- a/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import {
-  CCard,
-  CCardBody,
-  CCardImage,
-  CCardLink,
-  CCardText,
-  CCardTitle,
-  CListGroup,
-  CListGroupItem,
-} from '@coreui/react'
-
-export const CardKitchenSinkExample = () => {
-  return (
-    <CCard style={{ width: '18rem' }}>
-      <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-      <CCardBody>
-        <CCardTitle>Card title</CCardTitle>
-        <CCardText>
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </CCardText>
-      </CCardBody>
-      <CListGroup flush>
-        <CListGroupItem>Cras justo odio</CListGroupItem>
-        <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-        <CListGroupItem>Vestibulum at eros</CListGroupItem>
-      </CListGroup>
-      <CCardBody>
-        <CCardLink href="#">Card link</CCardLink>
-        <CCardLink href="#">Another link</CCardLink>
-      </CCardBody>
-    </CCard>
-  )
-}
diff --git a/packages/docs/content/components/card/examples/CardListGroups2Example.tsx b/packages/docs/content/components/card/examples/CardListGroups2Example.tsx
deleted file mode 100644
index e57730b7..00000000
--- a/packages/docs/content/components/card/examples/CardListGroups2Example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index eacf3f75..00000000
--- a/packages/docs/content/components/card/examples/CardListGroups3Example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 843294fa..00000000
--- a/packages/docs/content/components/card/examples/CardListGroupsExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 6469f59d..00000000
--- a/packages/docs/content/components/card/examples/CardNavigation2Example.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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
deleted file mode 100644
index a4d41714..00000000
--- a/packages/docs/content/components/card/examples/CardNavigationExample.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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
deleted file mode 100644
index 6abe386a..00000000
--- a/packages/docs/content/components/card/examples/CardSizing2Example.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 4a98d744..00000000
--- a/packages/docs/content/components/card/examples/CardSizing3Example.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index cabb8cc5..00000000
--- a/packages/docs/content/components/card/examples/CardSizingExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index a2f67bca..00000000
--- a/packages/docs/content/components/card/examples/CardStylesBackgroundAndColorExample.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 192c1151..00000000
--- a/packages/docs/content/components/card/examples/CardStylesBorderExample.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index 5567efa0..00000000
--- a/packages/docs/content/components/card/examples/CardStylesTopBorderExample.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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
deleted file mode 100644
index 181c290c..00000000
--- a/packages/docs/content/components/card/examples/CardTextAlignmentExample.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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
deleted file mode 100644
index 7d134b86..00000000
--- a/packages/docs/content/components/card/examples/CardTitleExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 93f1b34e..00000000
--- a/packages/docs/content/components/card/index.mdx
+++ /dev/null
@@ -1,201 +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.
-route: /components/card/
-other_frameworks: card
----
-
-## About
-
-A react card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.
-
-## Example
-
-Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other CoreUI components. Cards have no top, left, and right margins by default, so use [spacing utilities](https://coreui.io/bootstrap/docs/utilities/spacing) as needed. They have no fixed width to start, so they'll fill the full width of its parent.
-
-Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
-
-<ExampleSnippet component="CardExample" componentName="React Card" />
-
-## Content types
-
-CoreUI card supports a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.
-
-### Body
-
-The main block of a card is the `<CCardBody>`. Use it whenever you need a padded section within a card.
-
-<ExampleSnippet component="CardBodyExample" componentName="React Card" />
-
-### Titles, text, and links
-
-Card titles are managed by `<CCardTitle>` component. Identically, links are attached and collected next to each other by `<CCardLink>` component.
-
-Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also, the `<CCardSubtitle>` items are stored in a `<CCardBody>` item, the card title, and subtitle are arranged rightly.
-
-<ExampleSnippet component="CardTitleExample" componentName="React Card" />
-
-### Images
-
-`orientation="top"` places a picture to the top of the card. With `<CCardText>`, text can be added to the card. Text within `<CCardText>` can additionally be styled with the regular HTML tags.
-
-<ExampleSnippet component="CardImagesExample" componentName="React Card" />
-
-### List groups
-
-Create lists of content in a card with a flush list group.
-
-<ExampleSnippet component="CardListGroupsExample" componentName="React Card" />
-
-<ExampleSnippet component="CardListGroups2Example" componentName="React Card" />
-
-<ExampleSnippet component="CardListGroups3Example" componentName="React Card" />
-
-### Kitchen sink
-
-Combine and match many content types to build the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
-
-<ExampleSnippet component="CardKitchenSinkExample" componentName="React Card" />
-
-### Header and footer
-
-Add an optional header and/or footer within a card.
-
-<ExampleSnippet component="CardHeaderExample" componentName="React Card" />
-
-Card headers can be styled by adding ex. `as="h5"`.
-
-<ExampleSnippet component="CardHeader2Example" componentName="React Card" />
-
-<ExampleSnippet component="CardHeader3Example" componentName="React Card" />
-
-<ExampleSnippet component="CardHeaderAndFooterExample" componentName="React Card" />
-
-## Sizing
-
-Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.
-
-### Using grid markup
-
-Using the grid, wrap cards in columns and rows as needed.
-
-<ExampleSnippet component="CardSizingExample" componentName="React Card" />
-
-### Using utilities
-
-Use some of [available sizing utilities](https://coreui.io/bootstrap/docs/utilities/sizing/) to rapidly set a card's width.
-
-<ExampleSnippet component="CardSizing2Example" componentName="React Card" />
-
-### Using custom CSS
-
-Use custom CSS in your stylesheets or as inline styles to set a width.
-
-<ExampleSnippet component="CardSizing3Example" componentName="React Card" />
-
-## Text alignment
-
-You can instantly change the text arrangement of any card—in its whole or specific parts—with [text align classes](https://coreui.io/bootstrap/docs/utilities/text/#text-alignment).
-
-<ExampleSnippet component="CardTextAlignmentExample" componentName="React Card" />
-
-## Navigation
-
-Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
-
-<ExampleSnippet component="CardNavigationExample" componentName="React Card" />
-
-<ExampleSnippet component="CardNavigation2Example" componentName="React Card" />
-
-## Images
-
-Cards introduce several options for acting with images. Pick from appending "image caps" at either end of a card, overlaying images with content, or just inserting the image in a card.
-
-### Image caps
-
-Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
-
-<ExampleSnippet component="CardImageCapsExample" componentName="React Card" />
-
-### Image overlays
-
-Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.
-
-<ExampleSnippet component="CardImageOverlaysExample" componentName="React Card" />
-
-## Horizontal
-
-Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
-
-<ExampleSnippet component="CardImageHorizontalExample" componentName="React Card" />
-
-## Card styles
-
-Cards include various options for customizing their backgrounds, borders, and color.
-
-### Background and color
-
-Use `color` property to change the appearance of a card.
-
-<ExampleSnippet component="CardStylesBackgroundAndColorExample" componentName="React Card" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-### Border
-
-Use [border utilities](https://coreui.io/bootstrap/docs/utilities/borders/) to change just the `border-color` of a card. Note that you can set `textColor` property on the `<CCard>` or a subset of the card's contents as shown below.
-
-<ExampleSnippet component="CardStylesBorderExample" componentName="React Card" />
-
-### Top border
-
-<ExampleSnippet component="CardStylesTopBorderExample" componentName="React Card" />
-
-## Card layout
-
-In addition to styling the content within cards, CoreUI includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
-
-### Card groups
-
-Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.
-
-<ExampleSnippet component="CardGroupsExample" componentName="React Card" />
-
-When using card groups with footers, their content will automatically line up.
-
-<ExampleSnippet component="CardGroups2Example" componentName="React Card" />
-
-### Grid cards
-
-Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `xs={{cols: 1}}` laying out the cards on one column, and `md={{cols: 1}}` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
-
-<ExampleSnippet component="CardGridExample" componentName="React Card" />
-
-Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
-
-<ExampleSnippet component="CardGrid2Example" componentName="React Card" />
-
-When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
-
-<ExampleSnippet component="CardGrid3Example" componentName="React Card" />
-
-Just like with card groups, card footers will automatically line up.
-
-<ExampleSnippet component="CardGrid4Example" componentName="React Card" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CCard /&gt;](./api/#ccard)
-- [&lt;CCardBody /&gt;](./api/#ccardbody)
-- [&lt;CCardFooter /&gt;](./api/#ccardfooter)
-- [&lt;CCardGroup /&gt;](./api/#ccardgroup)
-- [&lt;CCardHeader /&gt;](./api/#ccardheader)
-- [&lt;CCardImage /&gt;](./api/#ccardimage)
-- [&lt;CCardImageOverlay /&gt;](./api/#ccardimageoverlay)
-- [&lt;CCardLink /&gt;](./api/#ccardlink)
-- [&lt;CCardSubtitle /&gt;](./api/#ccardsubtitle)
-- [&lt;CCardText /&gt;](./api/#ccardtext)
-- [&lt;CCardTitle /&gt;](./api/#ccardtitle)
diff --git a/packages/docs/content/components/card/styling.mdx b/packages/docs/content/components/card/styling.mdx
deleted file mode 100644
index e7cae266..00000000
--- a/packages/docs/content/components/card/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/carousel/api.mdx
deleted file mode 100644
index b1d8ffb5..00000000
--- a/packages/docs/content/components/carousel/api.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: React Carousel Component API
-name: Carousel API
-description: Explore the API reference for the React Carousel component and discover how to effectively utilize its props for customization.
-route: /components/carousel/
----
-
-import CCarouselAPI from '../../api/CCarousel.api.mdx'
-import CCarouselCaptionAPI from '../../api/CCarouselCaption.api.mdx'
-import CCarouselItemAPI from '../../api/CCarouselItem.api.mdx'
-
-## CCarousel
-
-<CCarouselAPI />
-
-## CCarouselCaption
-
-<CCarouselCaptionAPI />
-
-## CCarouselItem
-
-<CCarouselItemAPI />
diff --git a/packages/docs/content/components/carousel/bootstrap.mdx b/packages/docs/content/components/carousel/bootstrap.mdx
deleted file mode 100644
index f3e5167c..00000000
--- a/packages/docs/content/components/carousel/bootstrap.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: React Bootstrap Carousel Component
-name: Carousel with Bootstrap Styling
-description: Discover how to use the React Bootstrap Carousel component from CoreUI to build responsive, customizable image and content sliders with indicators, captions, and transitions.
-route: /components/carousel/
-bootstrap_component: true
----
-
-## How the React Bootstrap Carousel component works
-
-The React Bootstrap Carousel component is a responsive slideshow for cycling through a set of images, text, or custom HTML content. It supports controls, indicators, captions, transitions, and responsive behavior out of the box.
-
-The component also supports the [Page Visibility API](https://www.w3.org/TR/page-visibility/), ensuring slides don’t transition when the browser tab is inactive.
-
-## React Bootstrap Carousel examples
-
-### Slides only
-
-Basic React Bootstrap Carousel with no controls or indicators.
-
-<ExampleSnippet className="theme-bootstrap" component="CarouselSlidesOnlyExample" componentName="React Bootstrap Carousel" />
-
-### With controls
-
-Add `controls` prop to include previous/next navigation arrows.
-
-<ExampleSnippet className="theme-bootstrap" component="CarouselWithControlsExample" componentName="React Bootstrap Carousel" />
-
-### With indicators
-
-Include slide indicators alongside the navigation arrows for better user interaction.
-
-<ExampleSnippet className="theme-bootstrap" component="CarouselWithIndicatorsExample" componentName="React Bootstrap Carousel" />
-
-### With captions
-
-Enhance each carousel slide with a caption using the `<CCarouselCaption>` component. Use responsive utility classes like `.d-none` and `.d-md-block` to control visibility across devices.
-
-<ExampleSnippet className="theme-bootstrap" component="CarouselWithCaptionsExample" componentName="React Bootstrap Carousel" />
-
-### Crossfade transition
-
-Apply `transition="crossfade"` to enable a fade animation instead of the default sliding effect.
-
-<ExampleSnippet className="theme-bootstrap" component="CarouselCrossfadeExample" componentName="React Bootstrap Carousel" />
-
-## Dark variant of React Bootstrap Carousel
-
-Use the `dark` prop on `<CCarousel>` to enable dark-themed controls, indicators, and captions. This uses CSS filters and Sass variables to invert styles and maintain readability on dark backgrounds.
-
-<ExampleSnippet className="theme-bootstrap" component="CarouselDarkVariantExample" componentName="React Bootstrap Carousel" />
-
-## API reference
-
-Refer to the API documentation below for all supported props of the React Bootstrap Carousel component:
-
-- [&lt;CCarousel /&gt;](../api/#ccarousel)
-- [&lt;CCarouselCaption /&gt;](../api/#ccarouselcaption)
-- [&lt;CCarouselItem /&gt;](../api/#ccarouselitem)
diff --git a/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx
deleted file mode 100644
index 0aea6c9f..00000000
--- a/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
-
-export const CarouselCrossfadeExample = () => {
-  return (
-    <CCarousel controls transition="crossfade">
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
-      </CCarouselItem>
-    </CCarousel>
-  )
-}
diff --git a/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx
deleted file mode 100644
index 9740419a..00000000
--- a/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'
-
-export const CarouselDarkVariantExample = () => {
-  return (
-    <CCarousel controls indicators dark>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
-        <CCarouselCaption className="d-none d-md-block">
-          <h5>First slide label</h5>
-          <p>Some representative placeholder content for the first slide.</p>
-        </CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
-        <CCarouselCaption className="d-none d-md-block">
-          <h5>Second slide label</h5>
-          <p>Some representative placeholder content for the first slide.</p>
-        </CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
-        <CCarouselCaption className="d-none d-md-block">
-          <h5>Third slide label</h5>
-          <p>Some representative placeholder content for the first slide.</p>
-        </CCarouselCaption>
-      </CCarouselItem>
-    </CCarousel>
-  )
-}
diff --git a/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx
deleted file mode 100644
index 08c7d60c..00000000
--- a/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
-
-export const CarouselSlidesOnlyExample = () => {
-  return (
-    <CCarousel>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
-      </CCarouselItem>
-    </CCarousel>
-  )
-}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx
deleted file mode 100644
index 0f3cf051..00000000
--- a/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react'
-
-export const CarouselWithCaptionsExample = () => {
-  return (
-    <CCarousel controls indicators>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
-        <CCarouselCaption className="d-none d-md-block">
-          <h5>First slide label</h5>
-          <p>Some representative placeholder content for the first slide.</p>
-        </CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
-        <CCarouselCaption className="d-none d-md-block">
-          <h5>Second slide label</h5>
-          <p>Some representative placeholder content for the first slide.</p>
-        </CCarouselCaption>
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
-        <CCarouselCaption className="d-none d-md-block">
-          <h5>Third slide label</h5>
-          <p>Some representative placeholder content for the first slide.</p>
-        </CCarouselCaption>
-      </CCarouselItem>
-    </CCarousel>
-  )
-}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx
deleted file mode 100644
index 1448b578..00000000
--- a/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
-
-export const CarouselWithControlsExample = () => {
-  return (
-    <CCarousel controls>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
-      </CCarouselItem>
-    </CCarousel>
-  )
-}
diff --git a/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx
deleted file mode 100644
index 5c3e0ee4..00000000
--- a/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CCarousel, CCarouselItem, CImage } from '@coreui/react'
-
-export const CarouselWithIndicatorsExample = () => {
-  return (
-    <CCarousel controls indicators>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/react.jpg')} alt="slide 1" />
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/vue.jpg')} alt="slide 2" />
-      </CCarouselItem>
-      <CCarouselItem>
-        <CImage className="d-block w-100" src={withPrefix('/images/angular.jpg')} alt="slide 3" />
-      </CCarouselItem>
-    </CCarousel>
-  )
-}
diff --git a/packages/docs/content/components/carousel/index.mdx b/packages/docs/content/components/carousel/index.mdx
deleted file mode 100644
index 5335f259..00000000
--- a/packages/docs/content/components/carousel/index.mdx
+++ /dev/null
@@ -1,59 +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.
-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
deleted file mode 100644
index 4b03faa1..00000000
--- a/packages/docs/content/components/carousel/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/chart/api.mdx
deleted file mode 100644
index ad211b14..00000000
--- a/packages/docs/content/components/chart/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-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
deleted file mode 100644
index 89417d6a..00000000
--- a/packages/docs/content/components/chart/examples/ChartBarExample.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-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
deleted file mode 100644
index 9443d6f3..00000000
--- a/packages/docs/content/components/chart/examples/ChartBarExample.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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
deleted file mode 100644
index 105a11b4..00000000
--- a/packages/docs/content/components/chart/examples/ChartBubbleExample.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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
deleted file mode 100644
index d0931e8b..00000000
--- a/packages/docs/content/components/chart/examples/ChartBubbleExample.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-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
deleted file mode 100644
index 9a5344de..00000000
--- a/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-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
deleted file mode 100644
index 70bcea01..00000000
--- a/packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-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
deleted file mode 100644
index 0a369af0..00000000
--- a/packages/docs/content/components/chart/examples/ChartLineExample.jsx
+++ /dev/null
@@ -1,102 +0,0 @@
-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
deleted file mode 100644
index d5784722..00000000
--- a/packages/docs/content/components/chart/examples/ChartLineExample.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-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
deleted file mode 100644
index 6c6b4f7b..00000000
--- a/packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-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
deleted file mode 100644
index eb3fc974..00000000
--- a/packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-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
deleted file mode 100644
index e1049440..00000000
--- a/packages/docs/content/components/chart/examples/ChartRadarExample.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-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
deleted file mode 100644
index 5a143a21..00000000
--- a/packages/docs/content/components/chart/examples/ChartRadarExample.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-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
deleted file mode 100644
index a03f7c9a..00000000
--- a/packages/docs/content/components/chart/examples/ChartScatterExample.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-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
deleted file mode 100644
index 3e2b20a5..00000000
--- a/packages/docs/content/components/chart/examples/ChartScatterExample.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-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
deleted file mode 100644
index 989a30d4..00000000
--- a/packages/docs/content/components/chart/index.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-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
deleted file mode 100644
index 550b5888..00000000
--- a/packages/docs/content/components/close-button/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Close Button Component API
-name: Close Button API
-description: Explore the API reference for the React Close Button component and discover how to effectively utilize its props for customization.
-route: /components/close-button/
----
-
-import CCloseButtonAPI from '../../api/CCloseButton.api.mdx'
-
-## CCloseButton
-
-<CCloseButtonAPI />
diff --git a/packages/docs/content/components/close-button/bootstrap.mdx b/packages/docs/content/components/close-button/bootstrap.mdx
deleted file mode 100644
index d2cfa23f..00000000
--- a/packages/docs/content/components/close-button/bootstrap.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: React Bootstrap Close Button Component
-name: Close Button with Bootstrap Styling
-description: Learn how to use the React Bootstrap Close Button component from CoreUI to add dismiss functionality to modals, alerts, and other UI elements with accessible and customizable styles.
-route: /components/close-button/
-bootstrap_component: true
----
-
-## Using the React Bootstrap Close Button component
-
-The React Bootstrap Close Button component provides a simple and accessible way to dismiss modals, alerts, or other interface elements. It's fully customizable and built with Bootstrap-compatible styles.
-
-<ExampleSnippet className="theme-bootstrap" component="CloseButtonExample" componentName="React Bootstrap Close Button" />
-
-## Disabled state
-
-React Bootstrap Close Button can be disabled using the `disabled` prop. This changes its `opacity` and applies `pointer-events: none` and `user-select: none` to prevent interactions.
-
-<ExampleSnippet className="theme-bootstrap" component="CloseButtonDisabledExample" componentName="React Bootstrap Close Button" />
-
-## Dark variant
-
-Use the `dark` prop to apply a dark version of the close button. This inverts the icon using the `filter` CSS property for better visibility on dark backgrounds.
-
-<ExampleSnippet className="theme-bootstrap bg-dark" component="CloseButtonDarkExample" componentName="React Bootstrap Close Button" />
-
-## API reference
-
-Check the API documentation below for the full list of props available in the React Bootstrap Close Button component:
-
-- [&lt;CCloseButton /&gt;](../api/#cclosebutton)
diff --git a/packages/docs/content/components/close-button/examples/CloseButtonDarkExample.tsx b/packages/docs/content/components/close-button/examples/CloseButtonDarkExample.tsx
deleted file mode 100644
index 98cdac72..00000000
--- a/packages/docs/content/components/close-button/examples/CloseButtonDarkExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 25e647d2..00000000
--- a/packages/docs/content/components/close-button/examples/CloseButtonDisabledExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index a36940f0..00000000
--- a/packages/docs/content/components/close-button/examples/CloseButtonExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { CCloseButton } from '@coreui/react'
-
-export const CloseButtonExample = () => {
-  return <CCloseButton />
-}
diff --git a/packages/docs/content/components/close-button/index.mdx b/packages/docs/content/components/close-button/index.mdx
deleted file mode 100644
index 7e2ea6bb..00000000
--- a/packages/docs/content/components/close-button/index.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: React Close Button Component
-name: Close Button
-description: A generic close button component for dismissing content like modals and alerts.
-route: /components/close-button/
-other_frameworks: close-button
----
-
-## Example
-
-Provide an option to dismiss or close a component with `<CCloseButton>`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`.
-
-<ExampleSnippet component="CloseButtonExample" componentName="React Close Button" />
-
-## Disabled state
-
-Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
-
-<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.
-
-<ExampleSnippet className="bg-dark" component="CloseButtonDarkExample" componentName="React Close Button" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CCloseButton /&gt;](./api/#cclosebutton)
diff --git a/packages/docs/content/components/collapse/api.mdx b/packages/docs/content/components/collapse/api.mdx
deleted file mode 100644
index 385857f8..00000000
--- a/packages/docs/content/components/collapse/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Collapse Component API
-name: Collapse API
-description: Explore the API reference for the React Collapse component and discover how to effectively utilize its props for customization.
-route: /components/collapse/
----
-
-import CCollapseAPI from '../../api/CCollapse.api.mdx'
-
-## CCollapse
-
-<CCollapseAPI />
diff --git a/packages/docs/content/components/collapse/bootstrap.mdx b/packages/docs/content/components/collapse/bootstrap.mdx
deleted file mode 100644
index 4857187e..00000000
--- a/packages/docs/content/components/collapse/bootstrap.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: React Bootstrap Collapse Component
-name: Collapse with Bootstrap Styling
-description: Learn how to use the React Bootstrap Collapse component from CoreUI to toggle visibility of content panels using animations and Bootstrap-compatible transitions.
-route: /components/collapse/
-bootstrap_component: true
----
-
-## How the React Bootstrap Collapse component works
-
-The React Bootstrap Collapse component allows you to toggle the visibility of content using animated height or width transitions. It’s perfect for creating expandable sections, FAQs, and collapsible panels with clean and accessible markup.
-
-Triggers such as buttons or anchor elements are connected to collapsible targets. The collapse animation modifies the `height` or `width` property, so padding should not be applied directly to the `.collapse` element.
-
-## React Bootstrap Collapse example
-
-You can trigger collapsible content using a button or a link. Below is a simple example using CoreUI components styled with Bootstrap.
-
-<ExampleSnippet className="theme-bootstrap" component="CollapseExample" componentName="React Bootstrap Collapse" />
-
-## Horizontal React Bootstrap Collapse
-
-Use the `horizontal` prop on the React Bootstrap Collapse component to transition the `width` instead of `height`. Don’t forget to apply a specific width to the immediate child of the collapse element.
-
-<ExampleSnippet className="theme-bootstrap" component="CollapseHorizontalExample" componentName="React Bootstrap Collapse" />
-
-## Multiple collapse targets
-
-React Bootstrap Collapse supports multiple targets toggled by a single trigger. Use a `<CButton>` to show or hide more than one collapsible element at the same time.
-
-<ExampleSnippet className="theme-bootstrap" component="CollapseMultipleTargetsExample" componentName="React Bootstrap Collapse" />
-
-## API reference
-
-Check the API documentation below to explore all available props for the React Bootstrap Collapse component:
-
-- [&lt;CCollapse /&gt;](../api/#ccollapse)
diff --git a/packages/docs/content/components/collapse/examples/CollapseExample.tsx b/packages/docs/content/components/collapse/examples/CollapseExample.tsx
deleted file mode 100644
index ac5d5989..00000000
--- a/packages/docs/content/components/collapse/examples/CollapseExample.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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
deleted file mode 100644
index 5e101f0c..00000000
--- a/packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 63836659..00000000
--- a/packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-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
deleted file mode 100644
index abbeab6e..00000000
--- a/packages/docs/content/components/collapse/index.mdx
+++ /dev/null
@@ -1,35 +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.
-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/api.mdx b/packages/docs/content/components/dropdown/api.mdx
deleted file mode 100644
index bb7cec60..00000000
--- a/packages/docs/content/components/dropdown/api.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: React Dropdown Component API
-name: Dropdown API
-description: Explore the API reference for the React Dropdown component and discover how to effectively utilize its props for customization.
-route: /components/dropdown/
----
-
-import CDropdownAPI from '../../api/CDropdown.api.mdx'
-import CDropdownDividerAPI from '../../api/CDropdownDivider.api.mdx'
-import CDropdownHeaderAPI from '../../api/CDropdownHeader.api.mdx'
-import CDropdownItemAPI from '../../api/CDropdownItem.api.mdx'
-import CDropdownItemPlainAPI from '../../api/CDropdownItemPlain.api.mdx'
-import CDropdownMenuAPI from '../../api/CDropdownMenu.api.mdx'
-import CDropdownToggleAPI from '../../api/CDropdownToggle.api.mdx'
-
-## CDropdown
-
-<CDropdownAPI />
-
-## CDropdownDivider
-
-<CDropdownDividerAPI />
-
-## CDropdownHeader
-
-<CDropdownHeaderAPI />
-
-## CDropdownItem
-
-<CDropdownItemAPI />
-
-## CDropdownItemPlain
-
-<CDropdownItemPlainAPI />
-
-## CDropdownMenu
-
-<CDropdownMenuAPI />
-
-## CDropdownToggle
-
-<CDropdownToggleAPI />
diff --git a/packages/docs/content/components/dropdown/bootstrap.mdx b/packages/docs/content/components/dropdown/bootstrap.mdx
deleted file mode 100644
index e4714bca..00000000
--- a/packages/docs/content/components/dropdown/bootstrap.mdx
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: React Bootstrap Dropdown Component
-name: Dropdown with Bootstrap Styling
-description: Learn how to use the React Bootstrap Dropdown component from CoreUI to create toggleable, contextual overlays with links, buttons, forms, and more, styled the Bootstrap way.
-route: /components/dropdown/
-bootstrap_component: true
----
-
-## Overview of React Bootstrap Dropdown component
-
-The React Bootstrap Dropdown component provides toggleable, contextual overlays for displaying lists, links, forms, and more. It’s powered by [Popper.js](https://popper.js.org/) for positioning, although navbar dropdowns don’t require dynamic placement.
-
-## React Bootstrap Dropdown examples
-
-### Single button dropdowns
-
-You can trigger dropdowns using `<button>` elements:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownSingleButtonExample" componentName="React Bootstrap Dropdown" />
-
-Or with `<a>` elements:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownSingleButton2Example" componentName="React Bootstrap Dropdown" />
-
-It works with all button variants:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownSingleButton3Example" componentName="React Bootstrap Dropdown" />
-
-### Split button dropdowns
-
-Use the `split` prop to create a split button dropdown. This adds a dropdown toggle next to the main button.
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownSplitButtonExample" componentName="React Bootstrap Dropdown" />
-
-## Sizing
-
-React Bootstrap Dropdowns support all button sizes:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownSizingLargeExample" componentName="React Bootstrap Dropdown" />
-<ExampleSnippet className="theme-bootstrap" component="DropdownSizingSmallExample" componentName="React Bootstrap Dropdown" />
-
-## Dark variant
-
-Use the `dark` prop to style the dropdown with a dark theme.
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownDarkExample" componentName="React Bootstrap Dropdown" />
-<ExampleSnippet className="theme-bootstrap" component="DropdownDark2Example" componentName="React Bootstrap Dropdown" />
-
-## Directions
-
-<Callout color="info" title="RTL">
-  Directions are mirrored in RTL layouts. For example, `.dropstart` appears on the right.
-</Callout>
-
-### Centered dropdown
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownCenteredExample" componentName="React Bootstrap Dropdown" />
-
-### Dropup
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownDropupExample" componentName="React Bootstrap Dropdown" />
-
-### Dropup centered
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownDropupCenteredExample" componentName="React Bootstrap Dropdown" />
-
-### Dropend
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownDropendExample" componentName="React Bootstrap Dropdown" />
-
-### Dropstart
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownDropstartExample" componentName="React Bootstrap Dropdown" />
-
-## Dropdown menu items
-
-React Bootstrap Dropdowns can include `<a>` or `<button>` elements:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuItemsExample" componentName="React Bootstrap Dropdown" />
-
-Use `<CDropdownItemPlain>` for non-interactive items:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuItems2Example" componentName="React Bootstrap Dropdown" />
-
-### Active and disabled items
-
-To mark an item as active:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuItemsActiveExample" componentName="React Bootstrap Dropdown" />
-
-To mark an item as disabled:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuItemsDisabledExample" componentName="React Bootstrap Dropdown" />
-
-## Menu alignment
-
-Right-align the dropdown using the `alignment="end"` prop:
-
-<Callout color="info">
-  <strong>Heads up!</strong> Dropdowns use Popper.js for positioning.
-</Callout>
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuAlignmentExample" componentName="React Bootstrap Dropdown" />
-
-### Responsive alignment
-
-Right-align from a specific breakpoint with `alignment="sm:end"` and similar values:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownResponsiveAlignmentExample" componentName="React Bootstrap Dropdown" />
-
-Left-align from a breakpoint with `alignment="md:start"`:
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownResponsiveAlignment2Example" componentName="React Bootstrap Dropdown" />
-
-## Dropdown menu content
-
-### Headers
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuContentHeadersExample" componentName="React Bootstrap Dropdown" />
-
-### Dividers
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuContentDividersExample" componentName="React Bootstrap Dropdown" />
-
-### Text
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuContentTextExample" componentName="React Bootstrap Dropdown" />
-
-### Forms
-
-<ExampleSnippet className="theme-bootstrap" component="DropdownMenuContentFormsExample" componentName="React Bootstrap Dropdown" />
-
-## API reference
-
-Refer to the API below for full details on available components and props in the React Bootstrap Dropdown:
-
-- [&lt;CDropdown /&gt;](../api/#cdropdown)
-- [&lt;CDropdownDivider /&gt;](../api/#cdropdowndivider)
-- [&lt;CDropdownHeader /&gt;](../api/#cdropdownheader)
-- [&lt;CDropdownItem /&gt;](../api/#cdropdownitem)
-- [&lt;CDropdownItemPlain /&gt;](../api/#cdropdownitemplain)
-- [&lt;CDropdownMenu /&gt;](../api/#cdropdownmenu)
-- [&lt;CDropdownToggle /&gt;](../api/#cdropdowntoggle)
diff --git a/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx b/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx
deleted file mode 100644
index ef6e69b2..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 74a79de5..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownDark2Example.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-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
deleted file mode 100644
index 35cbf127..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownDarkExample.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index e9d0656e..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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
deleted file mode 100644
index 276b5cff..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index e4c5dd3e..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownDropupCenteredExample.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 67b41be0..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownDropupExample.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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
deleted file mode 100644
index c4581ffd..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuAlignmentExample.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index abd44799..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 9fa78e87..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuContentFormsExample.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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
deleted file mode 100644
index 8a44f316..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 120d3660..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 661a8d41..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 2011b23d..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index cb5e10d2..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 437435e1..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownMenuItemsExample.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index b0296401..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index 298835a3..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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
deleted file mode 100644
index 4ecd2ebe..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index c8f456b7..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownSingleButton3Example.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index af4382fc..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 523afc52..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownSizingLargeExample.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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
deleted file mode 100644
index 487ed5f2..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownSizingSmallExample.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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
deleted file mode 100644
index cd47ca89..00000000
--- a/packages/docs/content/components/dropdown/examples/DropdownSplitButtonExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index c5890f31..00000000
--- a/packages/docs/content/components/dropdown/index.mdx
+++ /dev/null
@@ -1,186 +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.
-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
deleted file mode 100644
index e71380c5..00000000
--- a/packages/docs/content/components/dropdown/styling.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: React Dropdown Component Styling
-name: Dropdown Styling
-description: Learn how to customize the React Dropdown component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
-route: /components/dropdown/
----
-
-### CSS variables
-
-React Button supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.
-
-<ScssDocs file="_dropdown.scss" capture="dropdown-css-vars"/>
-
-Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
-
-<ScssDocs file="_dropdown.scss" capture="dropdown-dark-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const customVars = {
-  '--cui-dropdown-color': '#777',
-  '--cui-dropdown-bg': '#efefef',
-}
-
-return <CDropdown style={customVars}>{/* Dropdown content */}</CDropdown>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="dropdown-variables"/>
-
-Variables for the dark dropdown:
-
-<ScssDocs file="_variables.scss" capture="dropdown-dark-variables"/>
-
-Variables for the CSS-based carets that indicate a dropdown's interactivity:
-
-<ScssDocs file="_variables.scss" capture="caret-variables"/>
-
diff --git a/packages/docs/content/components/footer.mdx b/packages/docs/content/components/footer.mdx
deleted file mode 100644
index 5d36a1e6..00000000
--- a/packages/docs/content/components/footer.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: React Footer Component
-name: Footer
-description: React footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
-menu: Components
-route: /components/footer
-other_frameworks: footer
----
-
-import { CFooter, CLink } from '@coreui/react'
-
-## Example
-
-```jsx preview demo
-<CFooter>
-  <div>
-    <CLink href="https://coreui.io">CoreUI</CLink>
-    <span>&copy; 2025 creativeLabs.</span>
-  </div>
-  <div>
-    <span>Powered by</span>
-    <CLink href="https://coreui.io">CoreUI</CLink>
-  </div>
-</CFooter>
-```
-
-## Customizing
-
-### CSS variables
-
-React footers use local CSS variables on `.footer` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_footer.scss" capture="footer-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CFooter style={vars}>...</CFooter>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="footer-variables"/>
-
-## API
-
-### CFooter
-
-`markdown:CFooter.api.mdx`
diff --git a/packages/docs/content/components/header.mdx b/packages/docs/content/components/header.mdx
deleted file mode 100644
index b234df13..00000000
--- a/packages/docs/content/components/header.mdx
+++ /dev/null
@@ -1,193 +0,0 @@
----
-title: React Header Component
-name: Header
-description: Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.
-menu: Components
-route: /components/header
-other_frameworks: header
----
-
-import { useState } from 'react'
-
-import {
-  CButton,
-  CContainer,
-  CCollapse,
-  CDropdown,
-  CDropdownDivider,
-  CDropdownHeader,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownMenu,
-  CDropdownToggle,
-  CForm,
-  CFormInput,
-  CNav,
-  CNavItem,
-  CNavLink,
-  CHeader,
-  CHeaderBrand,
-  CHeaderDivider,
-  CHeaderNav,
-  CHeaderText,
-  CHeaderToggler,
-} from '@coreui/react'
-
-## Supported content
-
-Headers come with built-in support for a handful of sub-components. Choose from the following as needed:
-
-- `<CHeaderBrand>` for your company, product, or project name.
-- `<CHeaderNav>` for a full-height and lightweight navigation (including support for dropdowns).
-- `<CHeaderToggler>` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
-- Flex and spacing utilities for any form controls and actions.
-- `<CHeaderText>` for adding vertically centered strings of text.
-- `<CCollapse className="header-collapse">` for grouping and hiding header contents by a parent breakpoint.
-
-Here's an example of all the sub-components included in a responsive light-themed header that automatically collapses at the `lg` (large) breakpoint.
-
-## Basic usage
-
-export const BasicUsageExample = () => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <>
-      <CHeader>
-        <CContainer fluid>
-          <CHeaderBrand href="#">Header</CHeaderBrand>
-          <CHeaderToggler onClick={() => setVisible(!visible)} />
-          <CCollapse className="header-collapse" visible={visible}>
-            <CHeaderNav>
-              <CNavItem>
-                <CNavLink href="#" active>
-                  Home
-                </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item">
-                <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>
-            </CHeaderNav>
-            <CForm className="d-flex">
-              <CFormInput className="me-2" type="search" placeholder="Search" />
-              <CButton type="submit" color="success" variant="outline">
-                Search
-              </CButton>
-            </CForm>
-          </CCollapse>
-        </CContainer>
-      </CHeader>
-    </>
-  )
-}
-
-<Example>
-  <BasicUsageExample />
-</Example>
-
-```jsx
-const [visible, setVisible] = useState(false)
-return (
-  <>
-    <CHeader>
-      <CContainer fluid>
-        <CHeaderBrand href="#">Header</CHeaderBrand>
-        <CHeaderToggler onClick={() => setVisible(!visible)} />
-        <CCollapse className="header-collapse" visible={visible}>
-          <CHeaderNav>
-            <CNavItem>
-              <CNavLink href="#" active>
-                Home
-              </CNavLink>
-            </CNavItem>
-            <CNavItem>
-              <CNavLink href="#">Link</CNavLink>
-            </CNavItem>
-            <CDropdown variant="nav-item">
-              <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>
-          </CHeaderNav>
-          <CForm className="d-flex">
-            <CFormInput className="me-2" type="search" placeholder="Search" />
-            <CButton type="submit" color="success" variant="outline">
-              Search
-            </CButton>
-          </CForm>
-        </CCollapse>
-      </CContainer>
-    </CHeader>
-  </>
-)
-```
-
-## Customizing
-
-### CSS variables
-
-React headers use local CSS variables on `.header` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_header.scss" capture="header-css-vars"/>
-
-#### How to use CSS variables
-
-```jsx
-const vars = { 
-  '--my-css-var': 10,
-  '--my-another-css-var': "red" 
-}
-return <CHeader style={vars}>...</CHeader>
-```
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="header-variables"/>
-
-## API
-
-### CHeader
-
-`markdown:CHeader.api.mdx`
-
-### CHeaderBrand
-
-`markdown:CHeaderBrand.api.mdx`
-
-### CHeaderDivider
-
-`markdown:CHeaderDivider.api.mdx`
-
-### CHeaderNav
-
-`markdown:CHeaderNav.api.mdx`
-
-### CHeaderText
-
-`markdown:CHeaderText.api.mdx`
-
-### CHeaderToggler
-
-`markdown:CHeaderToggler.api.mdx`
diff --git a/packages/docs/content/components/icon.mdx b/packages/docs/content/components/icon.mdx
deleted file mode 100644
index e8839cc0..00000000
--- a/packages/docs/content/components/icon.mdx
+++ /dev/null
@@ -1,379 +0,0 @@
----
-title: React Icons Component
-name: Icon
-description: React icons library is a great resource for React developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work.
-menu: Components
-route: /components/icon
----
-
-import { useState } from 'react'
-import { 
-  CCol,
-  CNav,
-  CNavItem,
-  CNavLink,
-  CRow,
-  CTabContent,
-  CTabPane } from '@coreui/react'
-import {CIcon, CIconSvg} from '@coreui/icons-react/src/index'
-import { cilList, cilShieldAlt } from '@coreui/icons'
-import * as icon from '@coreui/icons';
-
-## Installation
-
-To start using CoreUI React Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice:
-
-### Npm
-
-```bash
-npm install @coreui/icons @coreui/icons-react 
-```
-
-### Yarn
-
-```bash
-yarn add @coreui/icons @coreui/icons-react 
-```
-
-## Usage
-
-Import react icons using one of these two options:
-
-### Single react icon
-
-To use a single react icon, import the `<CIcon>` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `<CIcon>` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop.
-
-<Example>
-  <CIcon icon={cilList} size="xl" />
-  <CIcon icon={cilShieldAlt} size="xl" />
-</Example>
-
-```jsx
-import { CIcon } from '@coreui/icons-react';
-import { cilList, cilShieldAlt } from '@coreui/icons';
-
-...
-<CIcon icon={cilList} size="xl"/>
-<CIcon icon={cilShieldAlt} size="xl"/>
-...
-```
-
-### All react icons
-
-To use all icons available in the CoreUI React Icons package, import the CIcon component and the entire `@coreui/icons` library using the `* as` syntax. Then, reference the desired icon within the `icon` prop.
-
-```jsx
-import CIcon from '@coreui/icons-react';
-import * as icon from '@coreui/icons';
-
-...
-render() {
-  return (
-    <CIcon icon={icon.cilList} size="xxl"/>
-  )
-}
-...
-```
-
-### Color
-
-The CoreUI React Icon component offers versatile color customization options, empowering you to personalize the icons in multiple ways. You can effortlessly modify the colors by utilizing either class names or CSS variables, providing flexibility and ease in creating visually stunning and cohesive icon designs.
-
-#### Utility classes
-
-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" />
-<CIcon icon={cilList} className="text-primary" size="xl" />
-<CIcon icon={cilList} className="text-secondary" size="xl" />
-<CIcon icon={cilList} className="text-success" size="xl" />
-<CIcon icon={cilList} className="text-danger" size="xl" />
-<CIcon icon={cilList} className="text-warning" size="xl" />
-<CIcon icon={cilList} className="text-info" size="xl" />
-```
-
-#### CSS Variables
-
-CoreUI React Icons leverage local CSS variables, such as `--ci-primary-color` and `--ci-secondary-color` (for Duotone icons), to facilitate real-time customization. This allows developers to easily customize the icons by providing their own custom CSS variables.
-
-```jsx preview
-<CIcon icon={cilList} size="xl" style={{'--ci-primary-color': 'red'}} />
-<CIcon icon={cilList} size="xl" style={{'--ci-primary-color': 'green'}} />
-```
-
-### Sizing
-
-Set heights of react icons using size property like size="lg" and size="sm".
-
-```jsx preview
-<CIcon icon={cilList} size="sm" />
-<CIcon icon={cilList} />
-<CIcon icon={cilList} size="lg" />
-<CIcon icon={cilList} size="xl" />
-<CIcon icon={cilList} size="xxl" />
-<CIcon icon={cilList} size="3xl" />
-```
-
-### Custom SVG Icons
-
-The `<CIconSvg`> component allows you to add custom SVG icons to your application. In case you want to use custom SVG icons, this component provides the flexibility to include bespoke SVG graphics that align with your design requirements.
-
-<Example>
-  <CIconSvg size="4xl">
-    <svg
-      viewBox="0 0 102 116"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-    >
-      <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
-        <g fill="#3C4B64" fillRule="nonzero">
-          <path
-            d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z"
-            id="Shape"
-          />
-          <path
-            d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z"
-            id="Path"
-          />
-        </g>
-      </g>
-    </svg>
-  </CIconSvg>
-</Example>
-
-```jsx
-import { CIconSvg } from '@coreui/icons-react';
-
-...
-<CIconSvg size="4xl">
-  <svg
-    viewBox="0 0 102 116"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-  >
-    <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
-      <g fill="#3C4B64" fillRule="nonzero">
-        <path
-          d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z"
-          id="Shape"
-        />
-        <path
-          d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z"
-          id="Path"
-        />
-      </g>
-    </g>
-  </svg>
-</CIconSvg>
-...
-```
-
-## Accessibility
-
-It's crucial for react icons to be seen by as many people as possible because they have the power to communicate a variety of meaningful information.
-
-People who are blind, have low vision, or have other visual impairments make up approximately 10% of the world's population, and more than 5% of people worldwide have hearing loss that makes them unable to function normally.
-
-Therefore, it's crucial to make sure that the assistive equipment for people with disabilities, such as screen readers, either ignores or better understands the react icons you use online.
-
-Icons are used in one of two ways on websites, apps, and other digital spaces.
-
-#### Decorative Icons
-
-It is not necessary to declare an icon to visitors when they are using your website or app if you are utilizing it to offer extra decoration or branding.
-
-Additionally, if you use an icon to visually emphasize or add flair to content that is already present in your HTML, an assistive technology user does not need to see it again.
-
-In certain circumstances, the details of the icon ought to be concealed from the screenreader so as not to obstruct the intended message.
-
-#### Semantic Icons
-
-You need to make sure that consumers understand the meaning an icon is intended to represent by giving them text-based alternatives.
-
-This applies to both the content you're using icons to represent (such as the status of your shopping cart or the number of unread messages), as well react icons as interactive controls (such as buttons, form elements, toggles, etc.).
-
-### CoreUI React Icons and Accessibility
-
-Our React Icon component automatically takes care of accessibility concerns by adding appropriate elements.
-
-#### Decorative icons
-
-If your icons are only for decorative purposes, the CoreUI React Icon Component will ensure that assistive technology ignores the icon. In addition to referencing an icon as normal, the `aria-hidden=true` attribute has been introduced, so there is nothing else you need to do.
-
-If your markup looks like this:
-
-```jsx
-<CButton>
-  <CIcon icon={cilCloudDownload} />
-</CButton>
-```
-
-By including the `aria-hidden` attribute, CoreUI React Icon Component will afterwards automatically hide it from screenreaders.
-
-```html
-<button class="btn btn-primary" type="button">
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon" role="img" aria-hidden="true">
-    <polygon fill="var(--ci-primary-color, currentColor)" points="272 434.744 272 209.176 240 209.176 240 434.744 188.118 382.862 165.49 405.489 256 496 346.51 405.489 323.882 382.862 272 434.744" class="ci-primary"></polygon><path fill="var(--ci-primary-color, currentColor)" d="M400,161.176c0-79.4-64.6-144-144-144s-144,64.6-144,144a96,96,0,0,0,0,192h80v-32H112a64,64,0,0,1,0-128h32v-32a112,112,0,0,1,224,0v32h32a64,64,0,0,1,0,128H320v32h80a96,96,0,0,0,0-192Z" class="ci-primary"></path>
-  </svg>
-</button>
-```
-
-#### Semantic icons
-
-The description that you must set using the title property will be used by CoreUI React Icon Component to generate alternative text for the semantic icon.
-
-Thus, if your markup appears as follows:
-
-```jsx
-<CButton>
-  <CIcon icon={cilCloudDownload} title="Download file" />
-</CButton>
-```
-
-CoreUI React Icon Component will make the necessary adjustments so that only screenreaders can "see" the supporting elements that convey the message.
-
-```html
-<button class="btn btn-primary" type="button">
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon" role="img" aria-hidden="true">
-    <polygon fill="var(--ci-primary-color, currentColor)" points="272 434.744 272 209.176 240 209.176 240 434.744 188.118 382.862 165.49 405.489 256 496 346.51 405.489 323.882 382.862 272 434.744" class="ci-primary"></polygon><path fill="var(--ci-primary-color, currentColor)" d="M400,161.176c0-79.4-64.6-144-144-144s-144,64.6-144,144a96,96,0,0,0,0,192h80v-32H112a64,64,0,0,1,0-128h32v-32a112,112,0,0,1,224,0v32h32a64,64,0,0,1,0,128H320v32h80a96,96,0,0,0,0-192Z" class="ci-primary"></path>
-  </svg>
-  <span class="visually-hidden">Download file</span>
-</button>
-```
-
-## Available react icons
-
-The CoreUI React Icons package includes a comprehensive library of more than 1500 icons, available in various formats such as SVG, PNG, and Webfonts. These popular icons are meticulously crafted symbols representing common actions and items. You can utilize them in your digital products, whether they are web or mobile applications, to enhance their visual appeal and user experience.
-
-By leveraging the capabilities of the React Icons component from CoreUI, you can easily incorporate visually appealing icons into their React applications, allowing for more engaging and intuitive user interfaces.
-
-export const LinearExample = () => {
-  const icons = ['cilAccountLogout', 'cilActionRedo', 'cilActionUndo', 'cilAddressBook', 'cilAirplaneModeOff', 'cilAirplaneMode', 'cilAirplay', 'cilAlarm', 'cilAlbum', 'cilAlignCenter', 'cilAlignLeft', 'cilAlignRight', 'cilAmericanFootball', 'cilAnimal', 'cilAperture', 'cilApple', 'cilApplicationsSettings', 'cilApplications', 'cilAppsSettings', 'cilApps', 'cilArrowBottom', 'cilArrowCircleBottom', 'cilArrowCircleLeft', 'cilArrowCircleRight', 'cilArrowCircleTop', 'cilArrowLeft', 'cilArrowRight', 'cilArrowThickBottom', 'cilArrowThickFromBottom', 'cilArrowThickFromLeft', 'cilArrowThickFromRight', 'cilArrowThickFromTop', 'cilArrowThickLeft', 'cilArrowThickRight', 'cilArrowThickToBottom', 'cilArrowThickToLeft', 'cilArrowThickToRight', 'cilArrowThickToTop', 'cilArrowThickTop', 'cilArrowTop', 'cilAssistiveListeningSystem', 'cilAsteriskCircle', 'cilAsterisk', 'cilAt', 'cilAudioDescription', 'cilAudioSpectrum', 'cilAudio', 'cilAvTimer', 'cilBabyCarriage', 'cilBaby', 'cilBackspace', 'cilBadge', 'cilBalanceScale', 'cilBan', 'cilBank', 'cilBarChart', 'cilBarcode', 'cilBaseball', 'cilBasket', 'cilBasketball', 'cilBath', 'cilBathroom', 'cilBattery0', 'cilBattery3', 'cilBattery5', 'cilBatteryAlert', 'cilBatteryEmpty', 'cilBatteryFull', 'cilBatterySlash', 'cilBeachAccess', 'cilBeaker', 'cilBed', 'cilBellExclamation', 'cilBell', 'cilBike', 'cilBirthdayCake', 'cilBlind', 'cilBluetooth', 'cilBlurCircular', 'cilBlurLinear', 'cilBlur', 'cilBoatAlt', 'cilBold', 'cilBoltCircle', 'cilBolt', 'cilBook', 'cilBookmark', 'cilBorderAll', 'cilBorderBottom', 'cilBorderClear', 'cilBorderHorizontal', 'cilBorderInner', 'cilBorderLeft', 'cilBorderOuter', 'cilBorderRight', 'cilBorderStyle', 'cilBorderTop', 'cilBorderVertical', 'cilBowling', 'cilBraille', 'cilBriefcase', 'cilBrightness', 'cilBritishPound', 'cilBrowser', 'cilBrushAlt', 'cilBrush', 'cilBug', 'cilBuilding', 'cilBullhorn', 'cilBurger', 'cilBurn', 'cilBusAlt', 'cilCalculator', 'cilCalendarCheck', 'cilCalendar', 'cilCameraControl', 'cilCameraRoll', 'cilCamera', 'cilCarAlt', 'cilCaretBottom', 'cilCaretLeft', 'cilCaretRight', 'cilCaretTop', 'cilCart', 'cilCash', 'cilCasino', 'cilCast', 'cilCat', 'cilCc', 'cilCenterFocus', 'cilChartLine', 'cilChartPie', 'cilChart', 'cilChatBubble', 'cilCheckAlt', 'cilCheckCircle', 'cilCheck', 'cilChevronBottom', 'cilChevronCircleDownAlt', 'cilChevronCircleLeftAlt', 'cilChevronCircleRightAlt', 'cilChevronCircleUpAlt', 'cilChevronDoubleDown', 'cilChevronDoubleLeft', 'cilChevronDoubleRight', 'cilChevronDoubleUp', 'cilChevronLeft', 'cilChevronRight', 'cilChevronTop', 'cilChildFriendly', 'cilChild', 'cilCircle', 'cilClearAll', 'cilClipboard', 'cilClock', 'cilClone', 'cilClosedCaptioning', 'cilCloudDownload', 'cilCloudUpload', 'cilCloud', 'cilCloudy', 'cilCode', 'cilCoffee', 'cilCog', 'cilColorBorder', 'cilColorFill', 'cilColorPalette', 'cilColumns', 'cilCommand', 'cilCommentBubble', 'cilCommentSquare', 'cilCompass', 'cilCompress', 'cilContact', 'cilContrast', 'cilControl', 'cilCopy', 'cilCouch', 'cilCreditCard', 'cilCropRotate', 'cilCrop', 'cilCursorMove', 'cilCursor', 'cilCut', 'cilDataTransferDown', 'cilDataTransferUp', 'cilDeaf', 'cilDelete', 'cilDescription', 'cilDevices', 'cilDialpad', 'cilDiamond', 'cilDinner', 'cilDisabled', 'cilDog', 'cilDollar', 'cilDoor', 'cilDoubleQuoteSansLeft', 'cilDoubleQuoteSansRight', 'cilDrinkAlcohol', 'cilDrink', 'cilDrop', 'cilEco', 'cilEducation', 'cilElevator', 'cilEnvelopeClosed', 'cilEnvelopeLetter', 'cilEnvelopeOpen', 'cilEqualizer', 'cilEthernet', 'cilEuro', 'cilExcerpt', 'cilExitToApp', 'cilExpandDown', 'cilExpandLeft', 'cilExpandRight', 'cilExpandUp', 'cilExposure', 'cilExternalLink', 'cilEyedropper', 'cilFaceDead', 'cilFace', 'cilFactorySlash', 'cilFactory', 'cilFastfood', 'cilFax', 'cilFeaturedPlaylist', 'cilFile', 'cilFilterFrames', 'cilFilterPhoto', 'cilFilterSquare', 'cilFilterX', 'cilFilter', 'cilFindInPage', 'cilFingerprint', 'cilFire', 'cilFlagAlt', 'cilFlightTakeoff', 'cilFlipToBack', 'cilFlipToFront', 'cilFlip', 'cilFlower', 'cilFolderOpen', 'cilFolder', 'cilFont', 'cilFootball', 'cilFork', 'cilFridge', 'cilFrown', 'cilFullscreenExit', 'cilFullscreen', 'cilFunctionsAlt', 'cilFunctions', 'cilGamepad', 'cilGarage', 'cilGem', 'cilGif', 'cilGift', 'cilGlobeAlt', 'cilGolfAlt', 'cilGolf', 'cilGradient', 'cilGrain', 'cilGraph', 'cilGridSlash', 'cilGrid', 'cilGroup', 'cilHamburgerMenu', 'cilHandPointDown', 'cilHandPointLeft', 'cilHandPointRight', 'cilHandPointUp', 'cilHappy', 'cilHd', 'cilHdr', 'cilHeader', 'cilHeadphones', 'cilHealing', 'cilHeart', 'cilHighlighter', 'cilHighligt', 'cilHistory', 'cilHome', 'cilHospital', 'cilHotTub', 'cilHouse', 'cilHttps', 'cilImageBroken', 'cilImagePlus', 'cilImage', 'cilInbox', 'cilIndentDecrease', 'cilIndentIncrease', 'cilIndustrySlash', 'cilIndustry', 'cilInfinity', 'cilInfo', 'cilInputHdmi', 'cilInputPower', 'cilInput', 'cilInstitution', 'cilItalic', 'cilJustifyCenter', 'cilJustifyLeft', 'cilJustifyRight', 'cilKeyboard', 'cilLan', 'cilLanguage', 'cilLaptop', 'cilLayers', 'cilLeaf', 'cilLemon', 'cilLevelDown', 'cilLevelUp', 'cilLibraryAdd', 'cilLibraryBuilding', 'cilLibrary', 'cilLifeRing', 'cilLightbulb', 'cilLineSpacing', 'cilLineStyle', 'cilLineWeight', 'cilLinkAlt', 'cilLinkBroken', 'cilLink', 'cilListFilter', 'cilListHighPriority', 'cilListLowPriority', 'cilListNumberedRtl', 'cilListNumbered', 'cilListRich', 'cilList', 'cilLocationPin', 'cilLockLocked', 'cilLockUnlocked', 'cilLocomotive', 'cilLoop1', 'cilLoopCircular', 'cilLoop', 'cilLowVision', 'cilMagnifyingGlass', 'cilMap', 'cilMediaEject', 'cilMediaPause', 'cilMediaPlay', 'cilMediaRecord', 'cilMediaSkipBackward', 'cilMediaSkipForward', 'cilMediaStepBackward', 'cilMediaStepForward', 'cilMediaStop', 'cilMedicalCross', 'cilMeh', 'cilMemory', 'cilMenu', 'cilMic', 'cilMicrophone', 'cilMinus', 'cilMobileLandscape', 'cilMobile', 'cilMoney', 'cilMonitor', 'cilMoodBad', 'cilMoodGood', 'cilMoodVeryBad', 'cilMoodVeryGood', 'cilMoon', 'cilMouse', 'cilMouthSlash', 'cilMove', 'cilMovie', 'cilMugTea', 'cilMug', 'cilMusicNote', 'cilNewspaper', 'cilNoteAdd', 'cilNotes', 'cilObjectGroup', 'cilObjectUngroup', 'cilOpacity', 'cilOpentype', 'cilOptions', 'cilPaintBucket', 'cilPaint', 'cilPaperPlane', 'cilPaperclip', 'cilParagraph', 'cilPaw', 'cilPenAlt', 'cilPenNib', 'cilPen', 'cilPencil', 'cilPeople', 'cilPhone', 'cilPin', 'cilPizza', 'cilPlant', 'cilPlaylistAdd', 'cilPlus', 'cilPool', 'cilPowerStandby', 'cilPregnant', 'cilPrint', 'cilPushchair', 'cilPuzzle', 'cilQrCode', 'cilRain', 'cilRectangle', 'cilRecycle', 'cilReload', 'cilReportSlash', 'cilResizeBoth', 'cilResizeHeight', 'cilResizeWidth', 'cilRestaurant', 'cilRoom', 'cilRouter', 'cilRowing', 'cilRss', 'cilRuble', 'cilRunning', 'cilSad', 'cilSatelite', 'cilSave', 'cilSchool', 'cilScreenDesktop', 'cilScreenSmartphone', 'cilScrubber', 'cilSearch', 'cilSend', 'cilSettings', 'cilShareAll', 'cilShareAlt', 'cilShareBoxed', 'cilShare', 'cilShieldAlt', 'cilShortText', 'cilShower', 'cilSignLanguage', 'cilSignalCellular0', 'cilSignalCellular3', 'cilSignalCellular4', 'cilSim', 'cilSitemap', 'cilSmilePlus', 'cilSmile', 'cilSmokeFree', 'cilSmokeSlash', 'cilSmoke', 'cilSmokingRoom', 'cilSnowflake', 'cilSoccer', 'cilSofa', 'cilSortAlphaDown', 'cilSortAlphaUp', 'cilSortAscending', 'cilSortDescending', 'cilSortNumericDown', 'cilSortNumericUp', 'cilSpa', 'cilSpaceBar', 'cilSpeak', 'cilSpeaker', 'cilSpeech', 'cilSpeedometer', 'cilSpreadsheet', 'cilSquare', 'cilStarHalf', 'cilStar', 'cilStorage', 'cilStream', 'cilStrikethrough', 'cilSun', 'cilSwapHorizontal', 'cilSwapVertical', 'cilSwimming', 'cilSync', 'cilTablet', 'cilTag', 'cilTags', 'cilTask', 'cilTaxi', 'cilTennisBall', 'cilTennis', 'cilTerminal', 'cilTerrain', 'cilTextShapes', 'cilTextSize', 'cilTextSquare', 'cilTextStrike', 'cilText', 'cilThumbDown', 'cilThumbUp', 'cilToggleOff', 'cilToggleOn', 'cilToilet', 'cilTouchApp', 'cilTransfer', 'cilTranslate', 'cilTrash', 'cilTriangle', 'cilTruck', 'cilTv', 'cilUnderline', 'cilUsb', 'cilUserFemale', 'cilUserFollow', 'cilUserPlus', 'cilUserUnfollow', 'cilUserX', 'cilUser', 'cilVector', 'cilVerticalAlignBottom', 'cilVerticalAlignCenter', 'cilVerticalAlignTop', 'cilVideo', 'cilVideogame', 'cilViewColumn', 'cilViewModule', 'cilViewQuilt', 'cilViewStream', 'cilVoiceOverRecord', 'cilVoice', 'cilVolumeHigh', 'cilVolumeLow', 'cilVolumeOff', 'cilWalk', 'cilWallet', 'cilWallpaper', 'cilWarning', 'cilWatch', 'cilWc', 'cilWeightlifitng', 'cilWheelchair', 'cilWifiSignal0', 'cilWifiSignal1', 'cilWifiSignal2', 'cilWifiSignal3', 'cilWifiSignal4', 'cilWifiSignalOff', 'cilWindowMaximize', 'cilWindowMinimize', 'cilWindowRestore', 'cilWindow', 'cilWrapText', 'cilXCircle', 'cilX', 'cilYen', 'cilZoomIn', 'cilZoomOut', 'cilZoom']
-  return (
-    <CRow xs={{ cols: 3 }} sm={{ cols: 4 }} lg={{ cols: 5 }}>
-      {icons.map((i, idx) => {
-        return (
-          <CCol className="mb-4" key={idx}>
-            <div className="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
-              <CIcon icon={icon[i]} size="xxl"/>
-            </div>
-            <div className="text-body-secondary text-center pt-1 small">{i}</div>
-          </CCol>)
-      })}
-    </CRow>
-  )
-}
-
-export const BrandExample = () => {
-  const icons = ['cib500px5', 'cib500px', 'cibAboutMe', 'cibAbstract', 'cibAcm', 'cibAddthis', 'cibAdguard', 'cibAdobeAcrobatReader', 'cibAdobeAfterEffects', 'cibAdobeAudition', 'cibAdobeCreativeCloud', 'cibAdobeDreamweaver', 'cibAdobeIllustrator', 'cibAdobeIndesign', 'cibAdobeLightroomClassic', 'cibAdobeLightroom', 'cibAdobePhotoshop', 'cibAdobePremiere', 'cibAdobeTypekit', 'cibAdobeXd', 'cibAdobe', 'cibAirbnb', 'cibAlgolia', 'cibAlipay', 'cibAllocine', 'cibAmazonAws', 'cibAmazonPay', 'cibAmazon', 'cibAmd', 'cibAmericanExpress', 'cibAnaconda', 'cibAnalogue', 'cibAndroidAlt', 'cibAndroid', 'cibAngellist', 'cibAngularUniversal', 'cibAngular', 'cibAnsible', 'cibApacheAirflow', 'cibApacheFlink', 'cibApacheSpark', 'cibApache', 'cibAppStoreIos', 'cibAppStore', 'cibAppleMusic', 'cibApplePay', 'cibApplePodcasts', 'cibApple', 'cibAppveyor', 'cibAral', 'cibArchLinux', 'cibArchiveOfOurOwn', 'cibArduino', 'cibArtstation', 'cibArxiv', 'cibAsana', 'cibAtAndT', 'cibAtlassian', 'cibAtom', 'cibAudible', 'cibAurelia', 'cibAuth0', 'cibAutomatic', 'cibAutotask', 'cibAventrix', 'cibAzureArtifacts', 'cibAzureDevops', 'cibAzurePipelines', 'cibBabel', 'cibBaidu', 'cibBamboo', 'cibBancontact', 'cibBandcamp', 'cibBasecamp', 'cibBathasu', 'cibBehance', 'cibBigCartel', 'cibBing', 'cibBit', 'cibBitbucket', 'cibBitcoin', 'cibBitdefender', 'cibBitly', 'cibBlackberry', 'cibBlender', 'cibBloggerB', 'cibBlogger', 'cibBluetoothB', 'cibBluetooth', 'cibBoeing', 'cibBoost', 'cibBootstrap', 'cibBower', 'cibBrandAi', 'cibBrave', 'cibBtc', 'cibBuddy', 'cibBuffer', 'cibBuyMeACoffee', 'cibBuysellads', 'cibBuzzfeed', 'cibC', 'cibCakephp', 'cibCampaignMonitor', 'cibCanva', 'cibCashapp', 'cibCassandra', 'cibCastro', 'cibCcAmazonPay', 'cibCcAmex', 'cibCcApplePay', 'cibCcDinersClub', 'cibCcDiscover', 'cibCcJcb', 'cibCcMastercard', 'cibCcPaypal', 'cibCcStripe', 'cibCcVisa', 'cibCentos', 'cibCevo', 'cibChase', 'cibChef', 'cibChromecast', 'cibCircle', 'cibCircleci', 'cibCirrusci', 'cibCisco', 'cibCivicrm', 'cibClockify', 'cibClojure', 'cibCloudbees', 'cibCloudflare', 'cibCmake', 'cibCoOp', 'cibCodacy', 'cibCodeClimate', 'cibCodecademy', 'cibCodecov', 'cibCodeigniter', 'cibCodepen', 'cibCoderwall', 'cibCodesandbox', 'cibCodeship', 'cibCodewars', 'cibCodio', 'cibCoffeescript', 'cibCommonWorkflowLanguage', 'cibComposer', 'cibCondaForge', 'cibConekta', 'cibConfluence', 'cibCoreuiC', 'cibCoreui', 'cibCoursera', 'cibCoveralls', 'cibCpanel', 'cibCplusplus', 'cibCreativeCommonsBy', 'cibCreativeCommonsNcEu', 'cibCreativeCommonsNcJp', 'cibCreativeCommonsNc', 'cibCreativeCommonsNd', 'cibCreativeCommonsPdAlt', 'cibCreativeCommonsPd', 'cibCreativeCommonsRemix', 'cibCreativeCommonsSa', 'cibCreativeCommonsSamplingPlus', 'cibCreativeCommonsSampling', 'cibCreativeCommonsShare', 'cibCreativeCommonsZero', 'cibCreativeCommons', 'cibCrunchbase', 'cibCrunchyroll', 'cibCss3Shiled', 'cibCss3', 'cibCsswizardry', 'cibD3Js', 'cibDailymotion', 'cibDashlane', 'cibDazn', 'cibDblp', 'cibDebian', 'cibDeepin', 'cibDeezer', 'cibDelicious', 'cibDell', 'cibDeno', 'cibDependabot', 'cibDesignerNews', 'cibDevTo', 'cibDeviantart', 'cibDevrant', 'cibDiaspora', 'cibDigg', 'cibDigitalOcean', 'cibDiscord', 'cibDiscourse', 'cibDiscover', 'cibDisqus', 'cibDisroot', 'cibDjango', 'cibDocker', 'cibDocusign', 'cibDotNet', 'cibDraugiemLv', 'cibDribbble', 'cibDrone', 'cibDropbox', 'cibDrupal', 'cibDtube', 'cibDuckduckgo', 'cibDynatrace', 'cibEbay', 'cibEclipseide', 'cibElasticCloud', 'cibElasticSearch', 'cibElasticStack', 'cibElastic', 'cibElectron', 'cibElementary', 'cibEleventy', 'cibEllo', 'cibElsevier', 'cibEmlakjet', 'cibEmpirekred', 'cibEnvato', 'cibEpicGames', 'cibEpson', 'cibEsea', 'cibEslint', 'cibEthereum', 'cibEtsy', 'cibEventStore', 'cibEventbrite', 'cibEvernote', 'cibEverplaces', 'cibEvry', 'cibExercism', 'cibExpertsExchange', 'cibExpo', 'cibEyeem', 'cibFSecure', 'cibFacebookF', 'cibFacebook', 'cibFaceit', 'cibFandango', 'cibFavro', 'cibFeathub', 'cibFedex', 'cibFedora', 'cibFeedly', 'cibFidoAlliance', 'cibFigma', 'cibFilezilla', 'cibFirebase', 'cibFitbit', 'cibFlask', 'cibFlattr', 'cibFlickr', 'cibFlipboard', 'cibFlutter', 'cibFnac', 'cibFoursquare', 'cibFramer', 'cibFreebsd', 'cibFreecodecamp', 'cibFurAffinity', 'cibFurryNetwork', 'cibGarmin', 'cibGatsby', 'cibGauges', 'cibGenius', 'cibGentoo', 'cibGeocaching', 'cibGerrit', 'cibGg', 'cibGhost', 'cibGimp', 'cibGit', 'cibGitea', 'cibGithub', 'cibGitkraken', 'cibGitlab', 'cibGitpod', 'cibGitter', 'cibGlassdoor', 'cibGlitch', 'cibGmail', 'cibGnuPrivacyGuard', 'cibGnuSocial', 'cibGnu', 'cibGo', 'cibGodotEngine', 'cibGogCom', 'cibGoldenline', 'cibGoodreads', 'cibGoogleAds', 'cibGoogleAllo', 'cibGoogleAnalytics', 'cibGoogleChrome', 'cibGoogleCloud', 'cibGoogleKeep', 'cibGooglePay', 'cibGooglePlay', 'cibGooglePodcasts', 'cibGoogle', 'cibGooglesCholar', 'cibGovUk', 'cibGradle', 'cibGrafana', 'cibGraphcool', 'cibGraphql', 'cibGrav', 'cibGravatar', 'cibGreenkeeper', 'cibGreensock', 'cibGroovy', 'cibGroupon', 'cibGrunt', 'cibGulp', 'cibGumroad', 'cibGumtree', 'cibHabr', 'cibHackaday', 'cibHackerearth', 'cibHackerone', 'cibHackerrank', 'cibHackhands', 'cibHackster', 'cibHappycow', 'cibHashnode', 'cibHaskell', 'cibHatenaBookmark', 'cibHaxe', 'cibHelm', 'cibHere', 'cibHeroku', 'cibHexo', 'cibHighly', 'cibHipchat', 'cibHitachi', 'cibHockeyapp', 'cibHomify', 'cibHootsuite', 'cibHotjar', 'cibHouzz', 'cibHp', 'cibHtml5Shield', 'cibHtml5', 'cibHtmlacademy', 'cibHuawei', 'cibHubspot', 'cibHulu', 'cibHumbleBundle', 'cibIata', 'cibIbm', 'cibIcloud', 'cibIconjar', 'cibIcq', 'cibIdeal', 'cibIfixit', 'cibImdb', 'cibIndeed', 'cibInkscape', 'cibInstacart', 'cibInstagram', 'cibInstapaper', 'cibIntel', 'cibIntellijidea', 'cibIntercom', 'cibInternetExplorer', 'cibInvision', 'cibIonic', 'cibIssuu', 'cibItchIo', 'cibJabber', 'cibJava', 'cibJavascript', 'cibJekyll', 'cibJenkins', 'cibJest', 'cibJet', 'cibJetbrains', 'cibJira', 'cibJoomla', 'cibJquery', 'cibJs', 'cibJsdelivr', 'cibJsfiddle', 'cibJson', 'cibJupyter', 'cibJustgiving', 'cibKaggle', 'cibKaios', 'cibKaspersky', 'cibKentico', 'cibKeras', 'cibKeybase', 'cibKeycdn', 'cibKhanAcademy', 'cibKibana', 'cibKickstarter', 'cibKik', 'cibKirby', 'cibKlout', 'cibKnown', 'cibKoFi', 'cibKodi', 'cibKoding', 'cibKotlin', 'cibKrita', 'cibKubernetes', 'cibLanyrd', 'cibLaravelHorizon', 'cibLaravelNova', 'cibLaravel', 'cibLastFm', 'cibLatex', 'cibLaunchpad', 'cibLeetcode', 'cibLenovo', 'cibLess', 'cibLetsEncrypt', 'cibLetterboxd', 'cibLgtm', 'cibLiberapay', 'cibLibrarything', 'cibLibreoffice', 'cibLine', 'cibLinkedinIn', 'cibLinkedin', 'cibLinuxFoundation', 'cibLinuxMint', 'cibLinux', 'cibLivejournal', 'cibLivestream', 'cibLogstash', 'cibLua', 'cibLumen', 'cibLyft', 'cibMacys', 'cibMagento', 'cibMagisk', 'cibMailRu', 'cibMailchimp', 'cibMakerbot', 'cibManjaro', 'cibMarkdown', 'cibMarketo', 'cibMastercard', 'cibMastodon', 'cibMaterialDesign', 'cibMathworks', 'cibMatrix', 'cibMattermost', 'cibMatternet', 'cibMaxcdn', 'cibMcafee', 'cibMediaTemple', 'cibMediafire', 'cibMediumM', 'cibMedium', 'cibMeetup', 'cibMega', 'cibMendeley', 'cibMessenger', 'cibMeteor', 'cibMicroBlog', 'cibMicrogenetics', 'cibMicrosoftEdge', 'cibMicrosoft', 'cibMinetest', 'cibMinutemailer', 'cibMix', 'cibMixcloud', 'cibMixer', 'cibMojang', 'cibMonero', 'cibMongodb', 'cibMonkeytie', 'cibMonogram', 'cibMonzo', 'cibMoo', 'cibMozillaFirefox', 'cibMozilla', 'cibMusescore', 'cibMxlinux', 'cibMyspace', 'cibMysql', 'cibNativescript', 'cibNec', 'cibNeo4J', 'cibNetflix', 'cibNetlify', 'cibNextJs', 'cibNextcloud', 'cibNextdoor', 'cibNginx', 'cibNim', 'cibNintendo3Ds', 'cibNintendoGamecube', 'cibNintendoSwitch', 'cibNintendo', 'cibNodeJs', 'cibNodeRed', 'cibNodemon', 'cibNokia', 'cibNotion', 'cibNpm', 'cibNucleo', 'cibNuget', 'cibNuxtJs', 'cibNvidia', 'cibOcaml', 'cibOctave', 'cibOctopusDeploy', 'cibOculus', 'cibOdnoklassniki', 'cibOpenAccess', 'cibOpenCollective', 'cibOpenId', 'cibOpenSourceInitiative', 'cibOpenstreetmap', 'cibOpensuse', 'cibOpenvpn', 'cibOpera', 'cibOpsgenie', 'cibOracle', 'cibOrcid', 'cibOrigin', 'cibOsi', 'cibOsmc', 'cibOvercast', 'cibOverleaf', 'cibOvh', 'cibPagekit', 'cibPalantir', 'cibPandora', 'cibPantheon', 'cibPatreon', 'cibPaypal', 'cibPeriscope', 'cibPhp', 'cibPicartoTv', 'cibPinboard', 'cibPingdom', 'cibPingup', 'cibPinterestP', 'cibPinterest', 'cibPivotaltracker', 'cibPlangrid', 'cibPlayerMe', 'cibPlayerfm', 'cibPlaystation', 'cibPlaystation3', 'cibPlaystation4', 'cibPlesk', 'cibPlex', 'cibPluralsight', 'cibPlurk', 'cibPocket', 'cibPostgresql', 'cibPostman', 'cibPostwoman', 'cibPowershell', 'cibPrettier', 'cibPrismic', 'cibProbot', 'cibProcesswire', 'cibProductHunt', 'cibProtoIo', 'cibProtonmail', 'cibProxmox', 'cibPypi', 'cibPython', 'cibPytorch', 'cibQgis', 'cibQiita', 'cibQq', 'cibQualcomm', 'cibQuantcast', 'cibQuantopian', 'cibQuarkus', 'cibQuora', 'cibQwiklabs', 'cibQzone', 'cibR', 'cibRadiopublic', 'cibRails', 'cibRaspberryPi', 'cibReact', 'cibReadTheDocs', 'cibReadme', 'cibRealm', 'cibReason', 'cibRedbubble', 'cibRedditAlt', 'cibReddit', 'cibRedhat', 'cibRedis', 'cibRedux', 'cibRenren', 'cibReverbnation', 'cibRiot', 'cibRipple', 'cibRiseup', 'cibRollupJs', 'cibRoots', 'cibRoundcube', 'cibRss', 'cibRstudio', 'cibRuby', 'cibRubygems', 'cibRunkeeper', 'cibRust', 'cibSafari', 'cibSahibinden', 'cibSalesforce', 'cibSaltstack', 'cibSamsungPay', 'cibSamsung', 'cibSap', 'cibSassAlt', 'cibSass', 'cibSaucelabs', 'cibScala', 'cibScaleway', 'cibScribd', 'cibScrutinizerci', 'cibSeagate', 'cibSega', 'cibSellfy', 'cibSemaphoreci', 'cibSensu', 'cibSentry', 'cibServerFault', 'cibShazam', 'cibShell', 'cibShopify', 'cibShowpad', 'cibSiemens', 'cibSignal', 'cibSinaWeibo', 'cibSitepoint', 'cibSketch', 'cibSkillshare', 'cibSkyliner', 'cibSkype', 'cibSlack', 'cibSlashdot', 'cibSlickpic', 'cibSlides', 'cibSlideshare', 'cibSmashingmagazine', 'cibSnapchat', 'cibSnapcraft', 'cibSnyk', 'cibSociety6', 'cibSocketIo', 'cibSogou', 'cibSolus', 'cibSongkick', 'cibSonos', 'cibSoundcloud', 'cibSourceforge', 'cibSourcegraph', 'cibSpacemacs', 'cibSpacex', 'cibSparkfun', 'cibSparkpost', 'cibSpdx', 'cibSpeakerDeck', 'cibSpectrum', 'cibSpotify', 'cibSpotlight', 'cibSpreaker', 'cibSpring', 'cibSprint', 'cibSquarespace', 'cibStackbit', 'cibStackexchange', 'cibStackoverflow', 'cibStackpath', 'cibStackshare', 'cibStadia', 'cibStatamic', 'cibStaticman', 'cibStatuspage', 'cibSteam', 'cibSteem', 'cibSteemit', 'cibStitcher', 'cibStorify', 'cibStorybook', 'cibStrapi', 'cibStrava', 'cibStripeS', 'cibStripe', 'cibStubhub', 'cibStumbleupon', 'cibStyleshare', 'cibStylus', 'cibSublimeText', 'cibSubversion', 'cibSuperuser', 'cibSvelte', 'cibSvg', 'cibSwagger', 'cibSwarm', 'cibSwift', 'cibSymantec', 'cibSymfony', 'cibSynology', 'cibTMobile', 'cibTableau', 'cibTails', 'cibTapas', 'cibTeamviewer', 'cibTed', 'cibTeespring', 'cibTelegramPlane', 'cibTelegram', 'cibTencentQq', 'cibTencentWeibo', 'cibTensorflow', 'cibTerraform', 'cibTesla', 'cibTheMighty', 'cibTheMovieDatabase', 'cibTidal', 'cibTiktok', 'cibTinder', 'cibTodoist', 'cibToggl', 'cibTopcoder', 'cibToptal', 'cibTor', 'cibToshiba', 'cibTrainerroad', 'cibTrakt', 'cibTravisci', 'cibTreehouse', 'cibTrello', 'cibTripadvisor', 'cibTrulia', 'cibTumblr', 'cibTwilio', 'cibTwitch', 'cibTwitter', 'cibTwoo', 'cibTypescript', 'cibTypo3', 'cibUber', 'cibUbisoft', 'cibUblockOrigin', 'cibUbuntu', 'cibUdacity', 'cibUdemy', 'cibUikit', 'cibUmbraco', 'cibUnity', 'cibUnrealEngine', 'cibUnsplash', 'cibUntappd', 'cibUpwork', 'cibUsb', 'cibV8', 'cibVagrant', 'cibVenmo', 'cibVerizon', 'cibViadeo', 'cibViber', 'cibVim', 'cibVimeoV', 'cibVimeo', 'cibVine', 'cibVirb', 'cibVisa', 'cibVisualStudioCode', 'cibVisualStudio', 'cibVk', 'cibVlc', 'cibVsco', 'cibVueJs', 'cibWattpad', 'cibWeasyl', 'cibWebcomponentsOrg', 'cibWebpack', 'cibWebstorm', 'cibWechat', 'cibWhatsapp', 'cibWhenIWork', 'cibWii', 'cibWiiu', 'cibWikipedia', 'cibWindows', 'cibWire', 'cibWireguard', 'cibWix', 'cibWolframLanguage', 'cibWolframMathematica', 'cibWolfram', 'cibWordpress', 'cibWpengine', 'cibXPack', 'cibXbox', 'cibXcode', 'cibXero', 'cibXiaomi', 'cibXing', 'cibXrp', 'cibXsplit', 'cibYCombinator', 'cibYahoo', 'cibYammer', 'cibYandex', 'cibYarn', 'cibYelp', 'cibYoutube', 'cibZalando', 'cibZapier', 'cibZeit', 'cibZendesk', 'cibZerply', 'cibZillow', 'cibZingat', 'cibZoom', 'cibZorin', 'cibZulip']
-  return (
-    <CRow xs={{ cols: 3 }} sm={{ cols: 4 }} lg={{ cols: 5 }}>
-      {icons.map((i, idx) => {
-        return (
-          <CCol className="mb-4" key={idx}>
-            <div className="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
-              <CIcon icon={icon[i]} size="xxl"/>
-            </div>
-            <div className="text-body-secondary text-center pt-1 small">{i}</div>
-          </CCol>)
-      })}
-    </CRow>
-  )
-}
-
-export const FlagsExample = () => {
-  const icons = ['cifAd', 'cifAe', 'cifAf', 'cifAg', 'cifAl', 'cifAm', 'cifAo', 'cifAr', 'cifAt', 'cifAu', 'cifAz', 'cifBa', 'cifBb', 'cifBd', 'cifBe', 'cifBf', 'cifBg', 'cifBh', 'cifBi', 'cifBj', 'cifBn', 'cifBo', 'cifBr', 'cifBs', 'cifBt', 'cifBw', 'cifBy', 'cifBz', 'cifCa', 'cifCd', 'cifCf', 'cifCg', 'cifCh', 'cifCi', 'cifCl', 'cifCm', 'cifCn', 'cifCo', 'cifCr', 'cifCu', 'cifCv', 'cifCy', 'cifCz', 'cifDe', 'cifDj', 'cifDk', 'cifDm', 'cifDo', 'cifDz', 'cifEc', 'cifEe', 'cifEg', 'cifEr', 'cifEs', 'cifEt', 'cifFi', 'cifFj', 'cifFm', 'cifFr', 'cifGa', 'cifGb', 'cifGd', 'cifGe', 'cifGh', 'cifGm', 'cifGn', 'cifGq', 'cifGr', 'cifGt', 'cifGw', 'cifGy', 'cifHk', 'cifHn', 'cifHr', 'cifHt', 'cifHu', 'cifId', 'cifIe', 'cifIl', 'cifIn', 'cifIq', 'cifIr', 'cifIs', 'cifIt', 'cifJm', 'cifJo', 'cifJp', 'cifKe', 'cifKg', 'cifKh', 'cifKi', 'cifKm', 'cifKn', 'cifKp', 'cifKr', 'cifKw', 'cifKz', 'cifLa', 'cifLb', 'cifLc', 'cifLi', 'cifLk', 'cifLr', 'cifLs', 'cifLt', 'cifLu', 'cifLv', 'cifLy', 'cifMa', 'cifMc', 'cifMd', 'cifMe', 'cifMg', 'cifMh', 'cifMk', 'cifMl', 'cifMm', 'cifMn', 'cifMr', 'cifMt', 'cifMu', 'cifMv', 'cifMw', 'cifMx', 'cifMy', 'cifMz', 'cifNa', 'cifNe', 'cifNg', 'cifNi', 'cifNl', 'cifNo', 'cifNp', 'cifNr', 'cifNu', 'cifNz', 'cifOm', 'cifPa', 'cifPe', 'cifPg', 'cifPh', 'cifPk', 'cifPl', 'cifPt', 'cifPw', 'cifPy', 'cifQa', 'cifRo', 'cifRs', 'cifRu', 'cifRw', 'cifSa', 'cifSb', 'cifSc', 'cifSd', 'cifSe', 'cifSg', 'cifSi', 'cifSk', 'cifSl', 'cifSm', 'cifSn', 'cifSo', 'cifSr', 'cifSs', 'cifSt', 'cifSv', 'cifSy', 'cifSz', 'cifTd', 'cifTg', 'cifTh', 'cifTj', 'cifTl', 'cifTm', 'cifTn', 'cifTo', 'cifTr', 'cifTt', 'cifTv', 'cifTw', 'cifTz', 'cifUa', 'cifUg', 'cifUs', 'cifUy', 'cifUz', 'cifVa', 'cifVc', 'cifVe', 'cifVn', 'cifWs', 'cifXk', 'cifYe', 'cifZa', 'cifZm', 'cifZw']
-  return (
-    <CRow xs={{ cols: 3 }} sm={{ cols: 4 }} lg={{ cols: 5 }}>
-      {icons.map((i, idx) => {
-        return (
-          <CCol className="mb-4" key={idx}>
-            <div className="p-3 py-4 mb-2 bg-body-tertiary text-center rounded">
-              <CIcon icon={icon[i]} size="xxl"/>
-            </div>
-            <div className="text-body-secondary text-center pt-1 small">{i}</div>
-          </CCol>)
-      })}
-    </CRow>
-  )
-}
-
-export const TabPanesExample = () => {
-  const [activeKey, setActiveKey] = useState(1)
-  return (
-    <>
-      <CNav variant="tabs" role="tablist">
-        <CNavItem>
-          <CNavLink
-            href="#"
-            active={activeKey === 1}
-            onClick={(e) => {
-              e.preventDefault()
-              setActiveKey(1)
-            }}
-          >
-            Linear
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink
-            href="#"
-            active={activeKey === 2}
-            onClick={(e) => {
-              e.preventDefault()
-              setActiveKey(2)
-            }}
-          >
-            Brand
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink
-            href="#"
-            active={activeKey === 3}
-            onClick={(e) => {
-              e.preventDefault()
-              setActiveKey(3)
-            }}
-          >
-            Flags
-          </CNavLink>
-        </CNavItem>
-      </CNav>
-      <CTabContent className="pt-4" style={{"--cui-light": "#f0f4f7"}}>
-        <CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
-          {activeKey === 1 && <LinearExample />}
-        </CTabPane>
-        <CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
-          {activeKey === 2 && <BrandExample />}
-        </CTabPane>
-        <CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
-          {activeKey === 3 && <FlagsExample />}
-        </CTabPane>
-      </CTabContent>
-    </>
-  )
-}
-
-<TabPanesExample />
-
-React Icons also provides a variety of customization options, such as the ability to change the size, color, and style of the icons, as well as the ability to add additional CSS classes to the icons. You can find more information on these customization options in the documentation.
-
-## Premium icons
-
-If you find yourself in need of a greater selection of icons, we've got you covered with our [premium icon pack](https://coreui.io/icons/all/). This incredible package boasts an extensive collection of over 4,000 meticulously crafted icons, ensuring that you'll find the perfect representation for any concept or idea. Explore the vast range of options and unlock a world of visual possibilities. 
-
-So if you need more icons our PRO package will be a great choice for you.
-
-## API
-
-### CIcon
-
-`markdown:CIcon.api.mdx`
-
-### CIconSvg
-
-`markdown:CIconSvg.api.mdx`
\ No newline at end of file
diff --git a/packages/docs/content/components/image/api.mdx b/packages/docs/content/components/image/api.mdx
deleted file mode 100644
index 816292ef..00000000
--- a/packages/docs/content/components/image/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Image Component API
-name: Image API
-description: Explore the API reference for the React Image component and discover how to effectively utilize its props for customization.
-route: /components/image/
----
-
-import CImageAPI from '../../api/CImage.api.mdx'
-
-## CImage
-
-<CImageAPI />
diff --git a/packages/docs/content/components/image/bootstrap.mdx b/packages/docs/content/components/image/bootstrap.mdx
deleted file mode 100644
index e9d09fec..00000000
--- a/packages/docs/content/components/image/bootstrap.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: React Bootstrap Image Component
-name: Image with Bootstrap Styling
-description: Learn how to use the React Bootstrap Image component from CoreUI to create responsive, aligned, and styled images using Bootstrap-friendly utilities and props.
-route: /components/image/
-bootstrap_component: true
----
-
-## Responsive React Bootstrap Images
-
-The React Bootstrap Image component supports responsive behavior using the `fluid` prop. This applies `max-width: 100%` and `height: auto` to ensure images scale with their parent container.
-
-<ExampleSnippet className="theme-bootstrap" component="ImageResponsiveExample" componentName="React Bootstrap Image" />
-
-## React Bootstrap Image thumbnails
-
-Use the `thumbnail` prop to give an image a subtle border and padding, resulting in a thumbnail-style appearance. You can combine it with [border-radius utilities](https://coreui.io/bootstrap/docs/utilities/borders) for rounded corners.
-
-<ExampleSnippet className="theme-bootstrap" component="ImageThumbnailExample" componentName="React Bootstrap Image" />
-
-## Aligning React Bootstrap Images
-
-Use the `align` prop to control image alignment within the container. This allows you to float images left, right, or center them using Bootstrap-aligned values.
-
-<ExampleSnippet className="theme-bootstrap" component="ImageAligningExample" componentName="React Bootstrap Image" />
-
-<ExampleSnippet className="theme-bootstrap" component="ImageAligning2Example" componentName="React Bootstrap Image" />
-
-<ExampleSnippet className="theme-bootstrap" component="ImageAligning3Example" componentName="React Bootstrap Image" />
-
-## API reference
-
-Explore all available props and customization options for the React Bootstrap Image component below:
-
-- [&lt;CImage /&gt;](../api/#cimage)
diff --git a/packages/docs/content/components/image/examples/ImageAligning2Example.tsx b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx
deleted file mode 100644
index 7ba739a7..00000000
--- a/packages/docs/content/components/image/examples/ImageAligning2Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CImage } from '@coreui/react'
-
-export const ImageAligning2Example = () => {
-  return (
-    <div className="clearfix">
-      <CImage align="center" rounded src={withPrefix('/images/react400.jpg')} width={200} height={200} />
-    </div>
-  )
-}
diff --git a/packages/docs/content/components/image/examples/ImageAligning3Example.tsx b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx
deleted file mode 100644
index 200fc959..00000000
--- a/packages/docs/content/components/image/examples/ImageAligning3Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CImage } from '@coreui/react'
-
-export const ImageAligning3Example = () => {
-  return (
-    <div className="text-center">
-      <CImage rounded src={withPrefix('/images/react400.jpg')} width={200} height={200} />
-    </div>
-  )
-}
diff --git a/packages/docs/content/components/image/examples/ImageAligningExample.tsx b/packages/docs/content/components/image/examples/ImageAligningExample.tsx
deleted file mode 100644
index 3e0ce6bd..00000000
--- a/packages/docs/content/components/image/examples/ImageAligningExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CImage } from '@coreui/react'
-
-export const ImageAligningExample = () => {
-  return (
-    <div className="clearfix">
-      <CImage align="start" rounded src={withPrefix('/images/react400.jpg')} width={200} height={200} />
-      <CImage align="end" rounded src={withPrefix('/images/react400.jpg')} width={200} height={200} />
-    </div>
-  )
-}
diff --git a/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx
deleted file mode 100644
index 1d8cb4b5..00000000
--- a/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CImage } from '@coreui/react'
-
-export const ImageResponsiveExample = () => {
-  return <CImage fluid src={withPrefix('/images/react.jpg')} />
-}
diff --git a/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx
deleted file mode 100644
index 1e40391b..00000000
--- a/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CImage } from '@coreui/react'
-
-export const ImageThumbnailExample = () => {
-  return <CImage rounded thumbnail src={withPrefix('/images/react400.jpg')} width={200} height={200} />
-}
diff --git a/packages/docs/content/components/image/index.mdx b/packages/docs/content/components/image/index.mdx
deleted file mode 100644
index 4a8b5d25..00000000
--- a/packages/docs/content/components/image/index.mdx
+++ /dev/null
@@ -1,35 +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.
-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/api.mdx b/packages/docs/content/components/list-group/api.mdx
deleted file mode 100644
index ba8b36e6..00000000
--- a/packages/docs/content/components/list-group/api.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: React List Group Component API
-name: List Group API
-description: Explore the API reference for the React List Group component and discover how to effectively utilize its props for customization.
-route: /components/list-group/
----
-
-import CListGroupAPI from '../../api/CListGroup.api.mdx'
-import CListGroupItemAPI from '../../api/CListGroupItem.api.mdx'
-
-## CListGroup
-
-<CListGroupAPI />
-
-## CListGroupItem
-
-<CListGroupItemAPI />
diff --git a/packages/docs/content/components/list-group/bootstrap.mdx b/packages/docs/content/components/list-group/bootstrap.mdx
deleted file mode 100644
index 7632d5be..00000000
--- a/packages/docs/content/components/list-group/bootstrap.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: React Bootstrap List Group Component
-name: List Group with Bootstrap Styling
-description: Learn how to use the React Bootstrap List Group component from CoreUI to display flexible and interactive lists with badges, buttons, contextual styles, and more.
-route: /components/list-group/
-bootstrap_component: true
----
-
-## Basic usage of React Bootstrap List Group
-
-The React Bootstrap List Group component allows you to display a list of content using Bootstrap-styled list items. The default setup uses an unordered list with proper classes.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupExample" componentName="React Bootstrap List Group" />
-
-## Active items
-
-Add the `active` prop to a `<CListGroupItem>` to visually mark it as the selected item.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupActiveItemsExample" componentName="React Bootstrap List Group" />
-
-## Disabled items
-
-Use the `disabled` prop to disable interaction with a list item.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupDisabledItemsExample" componentName="React Bootstrap List Group" />
-
-## List group as links or buttons
-
-You can use `<a>` or `<button>` elements for actionable React Bootstrap List Group items. Add the `as="a"` or `as="button"` prop as needed.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupLinksAndButtonsExample" componentName="React Bootstrap List Group" />
-<ExampleSnippet className="theme-bootstrap" component="ListGroupLinksAndButtons2Example" componentName="React Bootstrap List Group" />
-
-## Flush list group
-
-Remove borders and padding using the `flush` prop. This is especially useful inside Bootstrap-styled cards.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupFlushExample" componentName="React Bootstrap List Group" />
-
-## Horizontal list group
-
-Add `layout="horizontal"` to display the list items horizontally. For responsive behavior, use values like `horizontal-md`, `horizontal-lg`, etc.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupHorizontalExample" componentName="React Bootstrap List Group" />
-
-> ⚠️ Horizontal list groups cannot be used in combination with `flush`.
-
-## Contextual styling for list items
-
-Use Bootstrap contextual classes such as `color="primary"`, `color="success"`, etc. to style list items based on intent or state.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupContextualClassesExample" componentName="React Bootstrap List Group" />
-<ExampleSnippet className="theme-bootstrap" component="ListGroupContextualClasses2Example" componentName="React Bootstrap List Group" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-## List group with badges
-
-Combine list items with badges to indicate notifications, counts, or statuses.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupWithBadgesExample" componentName="React Bootstrap List Group" />
-
-## Custom content inside list group
-
-React Bootstrap List Groups support custom content such as headings, paragraphs, or even full layouts using [Flex utilities](https://coreui.io/bootstrap/docs/utilities/flex/).
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupCustomContentExample" componentName="React Bootstrap List Group" />
-
-## List group with checkboxes and radios
-
-Embed checkboxes or radio buttons inside list items for interactive list selection.
-
-<ExampleSnippet className="theme-bootstrap" component="ListGroupCheckboxesAndRadiosExample" componentName="React Bootstrap List Group" />
-<ExampleSnippet className="theme-bootstrap" component="ListGroupCheckboxesAndRadios2Example" componentName="React Bootstrap List Group" />
-<ExampleSnippet className="theme-bootstrap" component="ListGroupCheckboxesAndRadios3Example" componentName="React Bootstrap List Group" />
-
-## API reference
-
-Explore the full API for the React Bootstrap List Group components:
-
-- [&lt;CListGroup /&gt;](../api/#clistgroup)
-- [&lt;CListGroupItem /&gt;](../api/#clistgroupitem)
diff --git a/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx b/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx
deleted file mode 100644
index 75ec1e42..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 065f4d85..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios2Example.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 6fde28ae..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios3Example.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 6e047381..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadiosExample.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index 724b3f81..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupContextualClasses2Example.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index d84f860e..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index cfd1e7c7..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupCustomContentExample.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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
deleted file mode 100644
index 7b1ecfef..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 3ee97cb9..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index dbb5a280..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 552e1aab..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index f28516ed..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index 2c56beb6..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtons2Example.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 7875801e..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupLinksAndButtonsExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 16362bb8..00000000
--- a/packages/docs/content/components/list-group/examples/ListGroupWithBadgesExample.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index f1f61ffb..00000000
--- a/packages/docs/content/components/list-group/index.mdx
+++ /dev/null
@@ -1,88 +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.
-route: /components/list-group/
-other_frameworks: list-group
----
-
-## Basic example
-
-The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
-
-<ExampleSnippet component="ListGroupExample" componentName="React List Group" />
-
-## Active items
-
-Add `active` boolean property to a `<CListGroupItem>` to show the current active selection.
-
-<ExampleSnippet component="ListGroupActiveItemsExample" componentName="React List Group" />
-
-## Disabled items
-
-Add `disabled` boolean property to a `<CListGroupItem>` to make it appear disabled.
-
-<ExampleSnippet component="ListGroupDisabledItemsExample" componentName="React List Group" />
-
-## Links and buttons
-
-Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `as="a|button"`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance.
-
-<ExampleSnippet component="ListGroupLinksAndButtonsExample" componentName="React List Group" />
-
-<ExampleSnippet component="ListGroupLinksAndButtons2Example" componentName="React List Group" />
-
-## Flush
-
-Add `flush` boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
-
-<ExampleSnippet component="ListGroupFlushExample" componentName="React List Group" />
-
-## Horizontal
-
-Add `layout="horizontal"` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.layout="horizontal-{sm|md|lg|xl|xxl}"` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
-
-<ExampleSnippet component="ListGroupHorizontalExample" componentName="React List Group" />
-
-## Contextual classes
-
-Use contextual classes to style list items with a stateful background and color.
-
-<ExampleSnippet component="ListGroupContextualClassesExample" componentName="React List Group" />
-
-Contextual classes also work with `<a>`s or `<button>`s. Note the addition of the hover styles here not present in the previous example. Also supported is the `active` state; apply it to indicate an active selection on a contextual list group item.
-
-<ExampleSnippet component="ListGroupContextualClasses2Example" componentName="React List Group" />
-
-<Callout color="warning" type="colorAssistiveTechnologies" />
-
-## With badges
-
-Add badges to any list group item to show unread counts, activity, and more.
-
-<ExampleSnippet component="ListGroupWithBadgesExample" componentName="React List Group" />
-
-## Custom content
-
-Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/).
-
-<ExampleSnippet component="ListGroupCustomContentExample" componentName="React List Group" />
-
-## Checkboxes and radios
-
-Place CoreUI's checkboxes and radios within list group items and customize as needed.
-
-<ExampleSnippet component="ListGroupCheckboxesAndRadiosExample" componentName="React List Group" />
-
-<ExampleSnippet component="ListGroupCheckboxesAndRadios2Example" componentName="React List Group" />
-
-And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
-
-<ExampleSnippet component="ListGroupCheckboxesAndRadios3Example" componentName="React List Group" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CListGroup /&gt;](./api/#clistgroup)
-- [&lt;CListGroupItem /&gt;](./api/#clistgroupitem)
diff --git a/packages/docs/content/components/list-group/styling.mdx b/packages/docs/content/components/list-group/styling.mdx
deleted file mode 100644
index c72e691d..00000000
--- a/packages/docs/content/components/list-group/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/modal/api.mdx
deleted file mode 100644
index 294226af..00000000
--- a/packages/docs/content/components/modal/api.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: React Modal Component API
-name: Modal API
-description: Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization.
-route: /components/modal/
----
-
-import CModalAPI from '../../api/CModal.api.mdx'
-import CModalBodyAPI from '../../api/CModalBody.api.mdx'
-import CModalFooterAPI from '../../api/CModalFooter.api.mdx'
-import CModalHeaderAPI from '../../api/CModalHeader.api.mdx'
-import CModalTitleAPI from '../../api/CModalTitle.api.mdx'
-
-## CModal
-
-<CModalAPI />
-
-## CModalBody
-
-<CModalBodyAPI />
-
-## CModalFooter
-
-<CModalFooterAPI />
-
-## CModalHeader
-
-<CModalHeaderAPI />
-
-## CModalTitle
-
-<CModalTitleAPI />
diff --git a/packages/docs/content/components/modal/bootstrap.mdx b/packages/docs/content/components/modal/bootstrap.mdx
deleted file mode 100644
index b3a122c4..00000000
--- a/packages/docs/content/components/modal/bootstrap.mdx
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: React Bootstrap Modal Component
-name: Modal with Bootstrap Styling
-description: Learn how to use the React Bootstrap Modal component from CoreUI to create accessible, responsive dialogs, confirmations, and popups using Bootstrap-styled modals.
-route: /components/modal/
-bootstrap_component: true
----
-
-## How to use the React Bootstrap Modal component
-
-The React Bootstrap Modal component offers a lightweight, flexible popup for dialogs, alerts, and forms. It's fully customizable and accessible, with support for animations, scrollable content, multiple sizes, and more.
-
-### Static React Bootstrap Modal example
-
-This static modal example shows the structure of a modal with header, body, and footer content.
-
-<Example>
-  <div className="modal position-static d-block" tabIndex="-1">
-    <div className="modal-dialog">
-      <div className="modal-content">
-        <div className="modal-header">
-          <h5 className="modal-title">React Modal title</h5>
-          <button type="button" className="btn-close" aria-label="Close"></button>
-        </div>
-        <div className="modal-body">
-          <p>React Modal body text goes here.</p>
-        </div>
-        <div className="modal-footer">
-          <button type="button" className="btn btn-secondary">Close</button>
-          <button type="button" className="btn btn-primary">Save changes</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</Example>
-
-```jsx
-<CModal>
-  <CModalHeader>
-    <CModalTitle>React Modal title</CModalTitle>
-  </CModalHeader>
-  <CModalBody>
-    <p>React Modal body text goes here.</p>
-  </CModalBody>
-  <CModalFooter>
-    <CButton color="secondary">Close</CButton>
-    <CButton color="primary">Save changes</CButton>
-  </CModalFooter>
-</CModal>
-```
-
-### Live demo
-
-<ExampleSnippet className="theme-bootstrap" component="ModalLiveDemoExample" componentName="React Bootstrap Modal" />
-
-### Static backdrop
-
-<ExampleSnippet className="theme-bootstrap" component="ModalStaticBackdropExample" componentName="React Bootstrap Modal" />
-
-### Scrolling long content
-
-<ExampleSnippet className="theme-bootstrap" component="ModalScrollingLongContentExample" componentName="React Bootstrap Modal" />
-
-<ExampleSnippet className="theme-bootstrap" component="ModalScrollingLongContent2Example" componentName="React Bootstrap Modal" />
-
-### Vertically centered modals
-
-<ExampleSnippet className="theme-bootstrap" component="ModalVerticallyCenteredExample" componentName="React Bootstrap Modal" />
-<ExampleSnippet className="theme-bootstrap" component="ModalVerticallyCenteredScrollableExample" componentName="React Bootstrap Modal" />
-
-### Tooltips and popovers in modals
-
-<ExampleSnippet className="theme-bootstrap" component="ModalTooltipsAndPopoversExample" componentName="React Bootstrap Modal" />
-
-### Toggle between modals
-
-<ExampleSnippet className="theme-bootstrap" component="ModalToggleBetweenModalsExample" componentName="React Bootstrap Modal" />
-
-### Change modal animation
-
-Use Sass variables like `$modal-fade-transform` and `$modal-show-transform` to customize animation. For example:
-
-```scss
-$modal-fade-transform: scale(0.8);
-```
-
-### Remove modal animation
-
-Disable animation with:
-
-```jsx
-<CModal transition={false}>...</CModal>
-```
-
-### Accessibility tips
-
-Use `aria-labelledby` and `aria-describedby` on `<CModal>` for improved screen reader support. CoreUI adds required roles and aria attributes automatically.
-
-## React Bootstrap Modal sizes
-
-Modals come in predefined sizes via the `size` prop.
-
-| Size        | Prop     | Max width |
-|-------------|----------|-----------|
-| Small       | `'sm'`   | 300px     |
-| Default     | —        | 500px     |
-| Large       | `'lg'`   | 800px     |
-| Extra large | `'xl'`   | 1140px    |
-
-<ExampleSnippet className="theme-bootstrap" component="ModalOptionalSizesExample" componentName="React Bootstrap Modal" />
-
-## Fullscreen React Bootstrap Modals
-
-Use the `fullscreen` prop to make modals expand to full viewport width/height. You can apply it conditionally based on breakpoints.
-
-| Fullscreen prop | Breakpoint         |
-|------------------|--------------------|
-| `true`           | Always             |
-| `'sm'`           | Below 576px        |
-| `'md'`           | Below 768px        |
-| `'lg'`           | Below 992px        |
-| `'xl'`           | Below 1200px       |
-| `'xxl'`          | Below 1400px       |
-
-<ExampleSnippet className="theme-bootstrap" component="ModalFullscreenExample" componentName="React Bootstrap Modal" />
-
-## API reference
-
-Explore the API for the React Bootstrap Modal component and its related parts:
-
-- [&lt;CModal /&gt;](../api/#cmodal)
-- [&lt;CModalBody /&gt;](../api/#cmodalbody)
-- [&lt;CModalFooter /&gt;](../api/#cmodalfooter)
-- [&lt;CModalHeader /&gt;](../api/#cmodalheader)
-- [&lt;CModalTitle /&gt;](../api/#cmodaltitle)
\ No newline at end of file
diff --git a/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx b/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx
deleted file mode 100644
index 267c0797..00000000
--- a/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-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
deleted file mode 100644
index 3bd28d2f..00000000
--- a/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index a082c37a..00000000
--- a/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-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
deleted file mode 100644
index 0e4d9a95..00000000
--- a/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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
deleted file mode 100644
index 33ab2119..00000000
--- a/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-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
deleted file mode 100644
index 859b1d89..00000000
--- a/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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
deleted file mode 100644
index ba6af0ff..00000000
--- a/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-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
deleted file mode 100644
index 46d73846..00000000
--- a/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-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
deleted file mode 100644
index f2f43f4e..00000000
--- a/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index 0cc92aea..00000000
--- a/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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
deleted file mode 100644
index 3ff5a3b0..00000000
--- a/packages/docs/content/components/modal/index.mdx
+++ /dev/null
@@ -1,146 +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.
-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
deleted file mode 100644
index 41200c16..00000000
--- a/packages/docs/content/components/modal/styling.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/navbar/api.mdx
deleted file mode 100644
index 5170c089..00000000
--- a/packages/docs/content/components/navbar/api.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: React Navbar Component API
-name: Navbar API
-description: Explore the API reference for the React Navbar component and discover how to effectively utilize its props for customization.
-route: /components/navbar/
----
-
-import CNavbarAPI from '../../api/CNavbar.api.mdx'
-import CNavbarBrandAPI from '../../api/CNavbarBrand.api.mdx'
-import CNavbarNavAPI from '../../api/CNavbarNav.api.mdx'
-import CNavbarTextAPI from '../../api/CNavbarText.api.mdx'
-import CNavbarTogglerAPI from '../../api/CNavbarToggler.api.mdx'
-
-## CNavbar
-
-<CNavbarAPI />
-
-## CNavbarBrand
-
-<CNavbarBrandAPI />
-
-## CNavbarNav
-
-<CNavbarNavAPI />
-
-## CNavbarText
-
-<CNavbarTextAPI />
-
-## CNavbarToggler
-
-<CNavbarTogglerAPI />
diff --git a/packages/docs/content/components/navbar/bootstrap.mdx b/packages/docs/content/components/navbar/bootstrap.mdx
deleted file mode 100644
index 7d383817..00000000
--- a/packages/docs/content/components/navbar/bootstrap.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: React Bootstrap Navbar Component
-name: Navbar with Bootstrap Styling
-description: Learn how to use the React Bootstrap Navbar component from CoreUI to create responsive navigation headers with branding, dropdowns, collapsible content, and placement options.
-route: /components/navbar/
-bootstrap_component: true
----
-
-## Supported subcomponents in React Bootstrap Navbar
-
-The React Bootstrap Navbar component includes flexible subcomponents for building responsive headers:
-
-- `<CNavbarBrand>` – branding/logo.
-- `<CNavbarNav>` – navigation links and dropdowns.
-- `<CNavbarToggler>` – toggles content collapse.
-- `<CNavbarText>` – inline text.
-- `<CCollapse>` – groups and hides navbar content.
-
-## Basic usage of React Bootstrap Navbar
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarExample" componentName="React Bootstrap Navbar" />
-
-### Branding
-
-Use `<CNavbarBrand>` to display your brand name or logo.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarBrandExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarBrand2Example" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarBrand3Example" componentName="React Bootstrap Navbar" />
-
-### Navigation links and dropdowns
-
-Navigation inside the React Bootstrap Navbar uses `<CNavbarNav>`.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarNavExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarNav2Example" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarNav3Example" componentName="React Bootstrap Navbar" />
-
-### Forms in navbars
-
-Include inputs, buttons, or entire forms in your navbar layout.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarFormsExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarForms2Example" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarForms3Example" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarForms4Example" componentName="React Bootstrap Navbar" />
-
-### Text in navbars
-
-Use `<CNavbarText>` for inline text blocks.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarText" componentName="React Bootstrap Navbar" />
-
-## React Bootstrap Navbar color schemes
-
-Use `colorScheme="light"` or `colorScheme="dark"` combined with `.bg-*` utilities for full control of background and text colors.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarColorSchemesExample" componentName="React Bootstrap Navbar" />
-
-## Containers
-
-Wrap your navbar in a `<CContainer>` to center its content or apply spacing.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarContainersExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarContainers2Example" componentName="React Bootstrap Navbar" />
-
-## Navbar placement
-
-Use the `placement` prop to fix navbars to the top or bottom or make them sticky.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarPlacementExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap p-4 overflow-hidden" component="NavbarPlacementFixedTopExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap p-4" component="NavbarPlacementFixedBottomExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap p-4 overflow-hidden" component="NavbarPlacementStickyTopExample" componentName="React Bootstrap Navbar" />
-
-## Responsive behaviors in React Bootstrap Navbar
-
-Use `expand` prop to control when the navbar collapses:
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveTogglerExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveToggler2Example" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveToggler3Example" componentName="React Bootstrap Navbar" />
-
-### External content
-
-You can toggle external containers using collapse plugins.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveExternalContentExample" componentName="React Bootstrap Navbar" />
-
-### Offcanvas navbars
-
-Turn the responsive navbar into an offcanvas drawer with `expand="*"` or `expand="xxl"`.
-
-<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveOffcanvasExample" componentName="React Bootstrap Navbar" />
-<ExampleSnippet className="theme-bootstrap" component="NavbarResponsiveOffcanvas2Example" componentName="React Bootstrap Navbar" />
-
-## API reference
-
-Explore the full API for React Bootstrap Navbar components:
-
-- [&lt;CNavbar /&gt;](../api/#cnavbar)
-- [&lt;CNavbarBrand /&gt;](../api/#cnavbarbrand)
-- [&lt;CNavbarNav /&gt;](../api/#cnavbarnav)
-- [&lt;CNavbarText /&gt;](../api/#cnavbartext)
-- [&lt;CNavbarToggler /&gt;](../api/#cnavbartoggler)
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx
deleted file mode 100644
index 9ebf13c2..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
-
-export const NavbarBrand2Example = () => {
-  return (
-    <CNavbar className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarBrand href="#">
-          <img
-            src={withPrefix('/images/brand/coreui-signet.svg')}
-            alt="CoreUI Signet"
-            width="22"
-            height="24"
-          />
-        </CNavbarBrand>
-      </CContainer>
-    </CNavbar>
-  )
-}
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx
deleted file mode 100644
index f8668e9d..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react'
-
-export const NavbarBrand3Example = () => {
-  return (
-    <CNavbar className="bg-body-tertiary">
-      <CContainer fluid>
-        <CNavbarBrand href="#">
-          <img
-            src={withPrefix('/images/brand/coreui-signet.svg')}
-            alt="CoreUI Signet"
-            width="22"
-            height="24"
-          />{' '}
-          CoreUI
-        </CNavbarBrand>
-      </CContainer>
-    </CNavbar>
-  )
-}
diff --git a/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx b/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx
deleted file mode 100644
index a351cf18..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 6c53aca8..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-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
deleted file mode 100644
index ed6e3978..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index dbe22b98..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 2376135f..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarExample.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-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
deleted file mode 100644
index 727ff2af..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 55bbf35f..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index cf58e561..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 2b1e28c6..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 55711a87..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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
deleted file mode 100644
index 680917b9..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-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
deleted file mode 100644
index 2fecb2ae..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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
deleted file mode 100644
index 7c40977e..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index a7d302f1..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 38ad1b61..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 470ac1a2..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 98e6b7eb..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index 89300d73..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-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
deleted file mode 100644
index 5017ef5b..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-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
deleted file mode 100644
index 21d7c752..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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
deleted file mode 100644
index df353538..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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
deleted file mode 100644
index 21abfd2a..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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
deleted file mode 100644
index b015c47a..00000000
--- a/packages/docs/content/components/navbar/examples/NavbarText.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 6356d37c..00000000
--- a/packages/docs/content/components/navbar/index.mdx
+++ /dev/null
@@ -1,154 +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.
-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
deleted file mode 100644
index f3f41df9..00000000
--- a/packages/docs/content/components/navbar/styling.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/navs-tabs/api.mdx
deleted file mode 100644
index 4c78c048..00000000
--- a/packages/docs/content/components/navs-tabs/api.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: React Navs & Tabs Components API
-name: Navs & Tabs API
-description: Explore the API reference for the React Navs & Tabs components and discover how to effectively utilize its props for customization.
-route: /components/navs-tabs/
----
-
-import CNavAPI from '../../api/CNav.api.mdx'
-import CNavItemAPI from '../../api/CNavItem.api.mdx'
-import CNavLinkAPI from '../../api/CNavLink.api.mdx'
-import CTabContentAPI from '../../api/CTabContent.api.mdx'
-import CTabPaneAPI from '../../api/CTabPane.api.mdx'
-
-## CNav
-
-<CNavAPI />
-
-## CNavItem
-
-<CNavItemAPI />
-
-## CNavLink
-
-<CNavLinkAPI />
-
-## CTabContent
-
-<CTabContentAPI />
-
-## CTabPane
-
-<CTabPaneAPI />
diff --git a/packages/docs/content/components/navs-tabs/bootstrap.mdx b/packages/docs/content/components/navs-tabs/bootstrap.mdx
deleted file mode 100644
index 655db31b..00000000
--- a/packages/docs/content/components/navs-tabs/bootstrap.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: React Bootstrap Navs and Tabs Component
-name: Navs and Tabs with Bootstrap Styling
-description: Learn how to use the React Bootstrap Navs and Tabs component from CoreUI to build navigations, tabbed interfaces, dropdowns, and more with responsive and accessible markup.
-route: /components/navs-tabs/
-bootstrap_component: true
----
-
-## React Bootstrap Base Nav
-
-The React Bootstrap Navs and Tabs component provides a flexible base for building navigations. The `<CNav>` component is built with flexbox and supports active, disabled, tabbed, and pill-styled variations.
-
-<ExampleSnippet className="theme-bootstrap" component="NavExample" componentName="React Bootstrap Nav" />
-
-You can structure navigation with `<ul>`, `<ol>`, or even `<nav>`, as seen here:
-
-<ExampleSnippet className="theme-bootstrap" component="Nav2Example" componentName="React Bootstrap Nav" />
-
-## React Bootstrap Nav Styles
-
-### Horizontal alignment
-
-Use flexbox utilities to align nav items center or right.
-
-<ExampleSnippet className="theme-bootstrap" component="NavHorizontalAlignmentExample" componentName="React Bootstrap Nav" />
-<ExampleSnippet className="theme-bootstrap" component="NavHorizontalAlignment2Example" componentName="React Bootstrap Nav" />
-
-### Vertical navs
-
-Stack items vertically using `.flex-column`.
-
-<ExampleSnippet className="theme-bootstrap" component="NavVerticalExample" componentName="React Bootstrap Nav" />
-
-### Tabs
-
-Switch to tabbed navigation with `variant="tabs"`.
-
-<ExampleSnippet className="theme-bootstrap" component="NavTabsExample" componentName="React Bootstrap Nav" />
-
-### Pills
-
-Use `variant="pills"` for pill-style nav links.
-
-<ExampleSnippet className="theme-bootstrap" component="NavPillsExample" componentName="React Bootstrap Nav" />
-
-### Underline
-
-Switch to underline style using `variant="underline"`.
-
-<ExampleSnippet className="theme-bootstrap" component="NavUnderlineExample" componentName="React Bootstrap Nav" />
-
-### Underline border
-
-Apply `variant="underline-border"` to create a bordered underline nav.
-
-<ExampleSnippet className="theme-bootstrap" component="NavUnderlineBorderExample" componentName="React Bootstrap Nav" />
-
-### Fill and justify navs
-
-Use `layout="fill"` to fill available space, or `layout="justified"` for equal width nav items.
-
-<ExampleSnippet className="theme-bootstrap" component="NavFillAndJustifyExample" componentName="React Bootstrap Nav" />
-<ExampleSnippet className="theme-bootstrap" component="NavFillAndJustify2Example" componentName="React Bootstrap Nav" />
-
-## Flex utility-based responsive navs
-
-Combine responsive flex utilities for fully adaptive nav layouts.
-
-<ExampleSnippet className="theme-bootstrap" component="NavWorkingWithFlexUtilitiesExample" componentName="React Bootstrap Nav" />
-
-## Accessibility in React Bootstrap Navs and Tabs
-
-- Use `role="navigation"` on a parent container.
-- Don’t use `role="tablist"` unless you’re building dynamic tab panels.
-- CoreUI handles dynamic tab ARIA attributes automatically.
-
-## React Bootstrap Navs with Dropdowns
-
-### Tabs with dropdowns
-
-<ExampleSnippet className="theme-bootstrap" component="NavTabsWithDropdownExample" componentName="React Bootstrap Nav" />
-
-### Pills with dropdowns
-
-<ExampleSnippet className="theme-bootstrap" component="NavPillsWithDropdownExample" componentName="React Bootstrap Nav" />
-
-## React Bootstrap Tab Panes
-
-Build dynamic tabbed interfaces using `<CTabContent>` and `<CTabPane>`. These components follow ARIA best practices.
-
-<ExampleSnippet className="theme-bootstrap" component="NavTabPanesExample" componentName="React Bootstrap Nav" />
-<ExampleSnippet className="theme-bootstrap" component="NavTabPanes2Example" componentName="React Bootstrap Nav" />
-
-## API reference
-
-Explore the full list of props and components used in React Bootstrap Navs and Tabs:
-
-- [&lt;CNav /&gt;](../api/#cnav)
-- [&lt;CNavItem /&gt;](../api/#cnavitem)
-- [&lt;CNavLink /&gt;](../api/#cnavlink)
-- [&lt;CTabContent /&gt;](../api/#ctabcontent)
-- [&lt;CTabPane /&gt;](../api/#ctabpane)
diff --git a/packages/docs/content/components/navs-tabs/examples/Nav2Example.tsx b/packages/docs/content/components/navs-tabs/examples/Nav2Example.tsx
deleted file mode 100644
index f5bba3c5..00000000
--- a/packages/docs/content/components/navs-tabs/examples/Nav2Example.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { CNav, CNavLink } from '@coreui/react'
-
-export const Nav2Example = () => {
-  return (
-    <CNav as="nav">
-      <CNavLink href="#" active>Active</CNavLink>
-      <CNavLink href="#">Link</CNavLink>
-      <CNavLink href="#">Link</CNavLink>
-      <CNavLink href="#" disabled>Disabled</CNavLink>
-    </CNav>
-  )
-}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx
deleted file mode 100644
index 33cbf837..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { CNav, CNavItem, CNavLink } from '@coreui/react'
-
-export const NavEnclosedExample = () => {
-  return (
-    <CNav variant="enclosed">
-      <CNavItem>
-        <CNavLink href="#" active>Active</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#" disabled>Disabled</CNavLink>
-      </CNavItem>
-    </CNav>
-  )
-}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx
deleted file mode 100644
index e49457f8..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { CNav, CNavItem, CNavLink } from '@coreui/react'
-
-export const NavEnclosedPillsExample = () => {
-  return (
-    <CNav variant="enclosed-pills">
-      <CNavItem>
-        <CNavLink href="#" active>Active</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Link</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#" disabled>Disabled</CNavLink>
-      </CNavItem>
-    </CNav>
-  )
-}
diff --git a/packages/docs/content/components/navs-tabs/examples/NavExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavExample.tsx
deleted file mode 100644
index e1d20817..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 0cc33a97..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavFillAndJustify2Example.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 0d8702e0..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavFillAndJustifyExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index b14fee61..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignment2Example.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 0eaeae56..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignmentExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 8dcfc4a5..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavPillsExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 5dcbf8d2..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavPillsWithDropdownExample.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index b7c0bb68..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavTabPanes2Example.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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
deleted file mode 100644
index 8a22e8da..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavTabPanesExample.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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
deleted file mode 100644
index 31766e74..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavTabsExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 4e01cc9a..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavTabsWithDropdownExample.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index e5e62017..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavUnderlineBorderExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 20157ee7..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavUnderlineExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 0ba22ad9..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavVerticalExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 16977f2b..00000000
--- a/packages/docs/content/components/navs-tabs/examples/NavWorkingWithFlexUtilitiesExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 439f05eb..00000000
--- a/packages/docs/content/components/navs-tabs/index.mdx
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: React Navs & Tabs Components
-name: Navs & Tabs
-description: Documentation and examples for how to use CoreUI's included React navigation components.
-route: /components/navs-tabs/
-other_frameworks: navs-tabs
----
-
-## Base nav
-
-Navigation available in CoreUI for React share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
-
-The base `<CNav>` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
-
-<ExampleSnippet component="NavExample" componentName="React Nav" />
-
-Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, `<ol>` if the order of your items is important, or roll your own with a `<nav>` element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.
-
-<ExampleSnippet component="Nav2Example" componentName="React Nav" />
-
-## Available styles
-
-Change the style of `<CNav>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
-
-### Horizontal alignment
-
-Change the horizontal alignment of your nav with [flexbox utilities](https://coreui.io/bootstrap/docs/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
-
-Centered with `.justify-content-center`:
-
-<ExampleSnippet component="NavHorizontalAlignmentExample" componentName="React Nav" />
-
-Right-aligned with `.justify-content-end`:
-
-<ExampleSnippet component="NavHorizontalAlignment2Example" componentName="React Nav" />
-
-### Vertical
-
-Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
-
-<ExampleSnippet component="NavVerticalExample" componentName="React Nav" />
-
-### Tabs
-
-Takes the basic nav from above and adds the `variant="tabs"` class to generate a tabbed interface
-
-<ExampleSnippet component="NavTabsExample" componentName="React Nav" />
-
-### Pills
-
-Take that same code, but use `variant="pills"` instead:
-
-<ExampleSnippet component="NavPillsExample" componentName="React Nav" />
-
-### Underline
-
-Take that same code, but use `variant="underline"` instead:
-
-<ExampleSnippet component="NavUnderlineExample" componentName="React Nav" />
-
-### Underline border
-
-Take that same code, but use `variant="underline-border"` instead:
-
-<ExampleSnippet component="NavUnderlineBorderExample" componentName="React Nav" />
-
-### Enclosed
-
-Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
-
-<ExampleSnippet component="NavEnclosedExample" componentName="React Nav" />
-
-### Enclosed pills 
-
-Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
-
-<ExampleSnippet component="NavEnclosedPillsExample" componentName="React Nav" />
-
-
-### Fill and justify
-
-Force your `<CNav>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
-
-<ExampleSnippet component="NavFillAndJustifyExample" componentName="React Nav" />
-
-For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.
-
-<ExampleSnippet component="NavFillAndJustify2Example" componentName="React Nav" />
-
-## Working with flex utilities
-
-If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
-
-<ExampleSnippet component="NavWorkingWithFlexUtilitiesExample" componentName="React Nav" />
-
-## Regarding accessibility
-
-If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
-
-Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. The `aria-current` attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding `aria-selected="true"` on the active tab.
-
-## Using dropdowns
-
-Add dropdown menus with a little extra HTML.
-
-### Tabs with dropdowns
-
-<ExampleSnippet component="NavTabsWithDropdownExample" componentName="React Nav" />
-
-### Pills with dropdowns
-
-<ExampleSnippet component="NavPillsWithDropdownExample" componentName="React Nav" />
-
-## Tab panes
-
-Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
-
-Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
-
-<ExampleSnippet component="NavTabPanesExample" componentName="React Nav" />
-
-The tabs also works with pills.
-
-<ExampleSnippet component="NavTabPanes2Example" componentName="React Nav" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CNav /&gt;](./api/#cnav)
-- [&lt;CNavItem /&gt;](./api/#cnavitem)
-- [&lt;CNavLink /&gt;](./api/#cnavlink)
-- [&lt;CTabContent /&gt;](./api/#ctabcontent)
-- [&lt;CTabPane /&gt;](./api/#ctabpane)
\ No newline at end of file
diff --git a/packages/docs/content/components/navs-tabs/styling.mdx b/packages/docs/content/components/navs-tabs/styling.mdx
deleted file mode 100644
index 9d74394f..00000000
--- a/packages/docs/content/components/navs-tabs/styling.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/offcanvas/api.mdx
deleted file mode 100644
index 28b85299..00000000
--- a/packages/docs/content/components/offcanvas/api.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: React Offcanvas Component API
-name: Offcanvas API
-description: Explore the API reference for the React Offcanvas component and discover how to effectively utilize its props for customization.
-route: /components/offcanvas/
----
-
-import COffcanvasAPI from '../../api/COffcanvas.api.mdx'
-import COffcanvasBodyAPI from '../../api/COffcanvasBody.api.mdx'
-import COffcanvasHeaderAPI from '../../api/COffcanvasHeader.api.mdx'
-import COffcanvasTitleAPI from '../../api/COffcanvasTitle.api.mdx'
-
-## COffcanvas
-
-<COffcanvasAPI />
-
-## COffcanvasBody
-
-<COffcanvasBodyAPI />
-
-## COffcanvasHeader
-
-<COffcanvasHeaderAPI />
-
-## COffcanvasTitle
-
-<COffcanvasTitleAPI />
diff --git a/packages/docs/content/components/offcanvas/bootstrap.mdx b/packages/docs/content/components/offcanvas/bootstrap.mdx
deleted file mode 100644
index 3cedb03e..00000000
--- a/packages/docs/content/components/offcanvas/bootstrap.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: React Bootstrap Offcanvas Component
-name: Offcanvas with Bootstrap Styling
-description: Learn how to use the React Bootstrap Offcanvas component from CoreUI to create hidden sidebars and sliding panels for navigation, shopping carts, or any additional UI element.
-route: /components/offcanvas/
-bootstrap_component: true
----
-
-## React Bootstrap Offcanvas examples
-
-The React Bootstrap Offcanvas component allows you to build sidebar-like panels that slide into view from any edge of the screen. These panels are great for navigation menus, shopping carts, and more.
-
-### Static offcanvas component
-
-Here’s a React Bootstrap Offcanvas that is shown by default using `visible={true}`. It includes a header with a close button and a padded body.
-
-<ExampleSnippet
-  className="theme-bootstrap docs-example-offcanvas bg-body-tertiary p-0 overflow-hidden"
-  component="OffcanvasExample"
-  componentName="React Bootstrap Offcanvas"
-/>
-
-### Live demo
-
-Click the buttons to toggle visibility of the offcanvas.
-
-<ExampleSnippet className="theme-bootstrap" component="OffcanvasLiveExample" componentName="React Bootstrap Offcanvas" />
-
-### Scrollable body
-
-Use the `scroll` prop to allow page scrolling while the offcanvas is visible. Combine it with `backdrop` to control overlay behavior.
-
-<ExampleSnippet className="theme-bootstrap" component="OffcanvasBodyScrollingExample" componentName="React Bootstrap Offcanvas" />
-
-### Scrollable body with backdrop
-
-<ExampleSnippet
-  className="theme-bootstrap"
-  component="OffcanvasBodyScrollingAndBackdropExample"
-  componentName="React Bootstrap Offcanvas"
-/>
-
-### Static backdrop
-
-Prevent closing the React Bootstrap Offcanvas on backdrop click by setting `backdrop="static"`.
-
-<ExampleSnippet className="theme-bootstrap" component="OffcanvasStaticBackdropExample" componentName="React Bootstrap Offcanvas" />
-
-## Dark variant
-
-Add the `dark` prop to match the React Bootstrap Offcanvas with dark themes or layouts.
-
-<ExampleSnippet
-  className="theme-bootstrap docs-example-offcanvas bg-body-secondary p-0 overflow-hidden"
-  component="OffcanvasDarkExample"
-  componentName="React Bootstrap Offcanvas"
-/>
-
-## Responsive behavior
-
-Use the `responsive` prop to show the offcanvas below specific breakpoints (e.g., `responsive="lg"`). Above that breakpoint, the offcanvas behaves as a regular visible container.
-
-<ExampleSnippet className="theme-bootstrap" component="OffcanvasResponsiveExample" componentName="React Bootstrap Offcanvas" />
-
-## Placement options for React Bootstrap Offcanvas
-
-Choose the offcanvas placement with the `placement` prop:
-
-- `placement="start"` – left
-- `placement="end"` – right
-- `placement="top"` – top
-- `placement="bottom"` – bottom
-
-Examples:
-
-<ExampleSnippet className="theme-bootstrap" component="OffcanvasPlacementTopExample" componentName="React Bootstrap Offcanvas" />
-<ExampleSnippet className="theme-bootstrap" component="OffcanvasPlacementRightExample" componentName="React Bootstrap Offcanvas" />
-<ExampleSnippet className="theme-bootstrap" component="OffcanvasPlacementBottomExample" componentName="React Bootstrap Offcanvas" />
-
-## Accessibility considerations
-
-React Bootstrap Offcanvas behaves like a modal. Use `aria-labelledby` to link the offcanvas title to assistive technologies. CoreUI automatically adds `role="dialog"` and other ARIA attributes for accessibility.
-
-## API reference
-
-Review the full API for the React Bootstrap Offcanvas component and its parts:
-
-- [&lt;COffcanvas /&gt;](../api/#coffcanvas)
-- [&lt;COffcanvasBody /&gt;](../api/#coffcanvasbody)
-- [&lt;COffcanvasHeader /&gt;](../api/#coffcanvasheader)
-- [&lt;COffcanvasTitle /&gt;](../api/#coffcanvastitle)
diff --git a/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingAndBackdropExample.tsx b/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingAndBackdropExample.tsx
deleted file mode 100644
index 134a81b7..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingAndBackdropExample.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index 802a8d5e..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingExample.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index 5a6d0afc..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasDarkExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index dd081b7a..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 3228e16d..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasLiveExample.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index 9bd31ed1..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementBottomExample.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index 65a2a5f6..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementRightExample.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index c7a1263b..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasPlacementTopExample.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index aa4142db..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasResponsiveExample.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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
deleted file mode 100644
index f3963d07..00000000
--- a/packages/docs/content/components/offcanvas/examples/OffcanvasStaticBackdropExample.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index ea9a2874..00000000
--- a/packages/docs/content/components/offcanvas/index.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
----
-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
deleted file mode 100644
index be6b2e0e..00000000
--- a/packages/docs/content/components/offcanvas/styling.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/pagination/api.mdx
deleted file mode 100644
index 8bc21ca8..00000000
--- a/packages/docs/content/components/pagination/api.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: React Pagination Component API
-name: Pagination API
-description: Explore the API reference for the React Pagination component and discover how to effectively utilize its props for customization.
-route: /components/pagination/
----
-
-import CPaginationAPI from '../../api/CPagination.api.mdx'
-import CPaginationItemAPI from '../../api/CPaginationItem.api.mdx'
-
-## CPagination
-
-<CPaginationAPI />
-
-## CPaginationItem
-
-<CPaginationItemAPI />
diff --git a/packages/docs/content/components/pagination/bootstrap.mdx b/packages/docs/content/components/pagination/bootstrap.mdx
deleted file mode 100644
index 4ff40cf1..00000000
--- a/packages/docs/content/components/pagination/bootstrap.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: React Bootstrap Pagination Component
-name: Pagination with Bootstrap Styling
-description: Learn how to use the React Bootstrap Pagination component from CoreUI to create accessible and responsive navigation between pages, including sizing, alignment, and icon support.
-route: /components/pagination/
-bootstrap_component: true
----
-
-## Overview of React Bootstrap Pagination
-
-The React Bootstrap Pagination component helps you build navigation for multi-page content, such as search results or article listings. It's based on semantic HTML with `<ul>` and `<li>` elements, ensuring accessibility and screen reader compatibility.
-
-Wrap the component in a `<nav>` element and use a descriptive `aria-label` like `aria-label="Search results pages"` for clarity.
-
-<ExampleSnippet className="theme-bootstrap" component="PaginationExample" componentName="React Bootstrap Pagination" />
-
-## Using icons in pagination
-
-You can replace text in pagination buttons with icons or symbols. Make sure to include proper `aria-labels` for accessibility.
-
-<ExampleSnippet className="theme-bootstrap" component="PaginationWorkingWithIconsExample" componentName="React Bootstrap Pagination" />
-
-## Disabled and active pagination items
-
-Use the `disabled` prop to indicate non-interactive items and the `.active` class to highlight the current page. CoreUI handles keyboard accessibility with `tabindex="-1"` and JS-based interaction disabling.
-
-<ExampleSnippet className="theme-bootstrap" component="PaginationDisabledAndActiveExample" componentName="React Bootstrap Pagination" />
-
-## Pagination sizing
-
-Adjust the size of the React Bootstrap Pagination component with the `size` prop. Available values: `lg` (large), `sm` (small).
-
-<ExampleSnippet className="theme-bootstrap" component="PaginationSizingLargeExample" componentName="React Bootstrap Pagination" />
-<ExampleSnippet className="theme-bootstrap" component="PaginationSizingSmallExample" componentName="React Bootstrap Pagination" />
-
-## Pagination alignment
-
-Change pagination alignment using the `align` prop: `"start"`, `"center"`, or `"end"`.
-
-<ExampleSnippet className="theme-bootstrap" component="PaginationAlignmentExample" componentName="React Bootstrap Pagination" />
-<ExampleSnippet className="theme-bootstrap" component="PaginationAlignment2Example" componentName="React Bootstrap Pagination" />
-
-## API reference
-
-Here’s the API reference for the React Bootstrap Pagination component:
-
-- [&lt;CPagination /&gt;](../api/#cpagination)
-- [&lt;CPaginationItem /&gt;](../api/#cpaginationitem)
diff --git a/packages/docs/content/components/pagination/examples/PaginationAlignment2Example.tsx b/packages/docs/content/components/pagination/examples/PaginationAlignment2Example.tsx
deleted file mode 100644
index a188141f..00000000
--- a/packages/docs/content/components/pagination/examples/PaginationAlignment2Example.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 8627944d..00000000
--- a/packages/docs/content/components/pagination/examples/PaginationAlignmentExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index ba8d612d..00000000
--- a/packages/docs/content/components/pagination/examples/PaginationDisabledAndActiveExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index e12a6e7d..00000000
--- a/packages/docs/content/components/pagination/examples/PaginationExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 35ba1590..00000000
--- a/packages/docs/content/components/pagination/examples/PaginationSizingLargeExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 857eace3..00000000
--- a/packages/docs/content/components/pagination/examples/PaginationSizingSmallExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 6a48d0da..00000000
--- a/packages/docs/content/components/pagination/examples/PaginationWorkingWithIconsExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 0e00bedc..00000000
--- a/packages/docs/content/components/pagination/index.mdx
+++ /dev/null
@@ -1,52 +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.
-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
deleted file mode 100644
index e84cfc4f..00000000
--- a/packages/docs/content/components/pagination/styling.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/placeholder/api.mdx
deleted file mode 100644
index eb237cd5..00000000
--- a/packages/docs/content/components/placeholder/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Placeholder Component API
-name: Placeholder API
-description: Explore the API reference for the React Placeholder component and discover how to effectively utilize its props for customization.
-route: /components/placeholder/
----
-
-import CPlaceholderAPI from '../../api/CPlaceholder.api.mdx'
-
-## CPlaceholder
-
-<CPlaceholderAPI />
diff --git a/packages/docs/content/components/placeholder/bootstrap.mdx b/packages/docs/content/components/placeholder/bootstrap.mdx
deleted file mode 100644
index cb90d762..00000000
--- a/packages/docs/content/components/placeholder/bootstrap.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: React Bootstrap Placeholder Component
-name: Placeholder with Bootstrap Styling
-description: Learn how to use the React Bootstrap Placeholder component from CoreUI to create animated loading placeholders that simulate content before it loads.
-route: /components/placeholder/
-bootstrap_component: true
----
-
-## About React Bootstrap Placeholder
-
-The React Bootstrap Placeholder component lets you create skeleton loading effects using only HTML and CSS. It's useful for improving perceived performance while content is loading.
-
-React placeholders are fully customizable using utility classes and support animations, sizing, colors, and layout variations.
-
-## React Bootstrap Placeholder example
-
-Here we simulate a "loading card" layout using placeholder elements. The dimensions match the final content layout for a seamless transition.
-
-<ExampleSnippet
-  className="theme-bootstrap d-flex justify-content-around"
-  component="PlaceholderExample"
-  componentName="React Bootstrap Placeholder"
-/>
-
-## How React Bootstrap Placeholder works
-
-Use the `<CPlaceholder>` component and specify width using grid props like `xs={6}` or utility classes. You can place it inside existing elements or use it standalone.
-
-<ExampleSnippet className="theme-bootstrap" component="Placeholder2Example" componentName="React Bootstrap Placeholder" />
-
-<Callout className="mb-4" color="info">
-  The use of <code>aria-hidden="true"</code> hides the placeholder from screen readers. You may need JavaScript to toggle content and notify assistive technologies of updates.
-</Callout>
-
-### Width
-
-Set the width of placeholders with utility classes, inline styles, or grid props.
-
-<ExampleSnippet className="theme-bootstrap" component="PlaceholderWidthExample" componentName="React Bootstrap Placeholder" />
-
-### Color
-
-By default, placeholders use `currentColor`, but you can apply any color using Bootstrap utility classes.
-
-<ExampleSnippet className="theme-bootstrap" component="PlaceholderColorExample" componentName="React Bootstrap Placeholder" />
-
-### Sizing
-
-Use the `size` prop (`lg`, `sm`, or `xs`) to adjust the height and line spacing of placeholders to match the parent typography.
-
-<ExampleSnippet className="theme-bootstrap" component="PlaceholderSizingExample" componentName="React Bootstrap Placeholder" />
-
-### Animation
-
-Make React Bootstrap Placeholder elements feel dynamic by using `animation="glow"` or `animation="wave"`.
-
-<ExampleSnippet className="theme-bootstrap" component="PlaceholderAnimationExample" componentName="React Bootstrap Placeholder" />
-
-## API reference
-
-Review the available props for the React Bootstrap Placeholder component:
-
-- [&lt;CPlaceholder /&gt;](../api/#cplaceholder)
diff --git a/packages/docs/content/components/placeholder/examples/Placeholder2Example.tsx b/packages/docs/content/components/placeholder/examples/Placeholder2Example.tsx
deleted file mode 100644
index 33c76b0f..00000000
--- a/packages/docs/content/components/placeholder/examples/Placeholder2Example.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 6fcb62a7..00000000
--- a/packages/docs/content/components/placeholder/examples/PlaceholderAnimationExample.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 709c62de..00000000
--- a/packages/docs/content/components/placeholder/examples/PlaceholderColorExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 0cd78f22..00000000
--- a/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react'
-import { withPrefix } from 'gatsby'
-import {
-  CButton,
-  CCard,
-  CCardBody,
-  CCardImage,
-  CCardText,
-  CCardTitle,
-  CPlaceholder,
-} from '@coreui/react'
-
-export const PlaceholderExample = () => {
-  return (
-    <>
-      <CCard style={{ width: '18rem' }}>
-        <CCardImage orientation="top" src={withPrefix('/images/react.jpg')} />
-        <CCardBody>
-          <CCardTitle>Card title</CCardTitle>
-          <CCardText>
-            Some quick example text to build on the card title and make up the bulk of the card's
-            content.
-          </CCardText>
-          <CButton color="primary" href="#">
-            Go somewhere
-          </CButton>
-        </CCardBody>
-      </CCard>
-      <CCard style={{ width: '18rem' }}>
-        <CCardImage
-          as="svg"
-          orientation="top"
-          width="100%"
-          height="162"
-          xmlns="http://www.w3.org/2000/svg"
-          role="img"
-          aria-label="Placeholder"
-          preserveAspectRatio="xMidYMid slice"
-          focusable="false"
-        >
-          <title>Placeholder</title>
-          <rect width="100%" height="100%" fill="#868e96"></rect>
-        </CCardImage>
-        <CCardBody>
-          <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
-            <CPlaceholder xs={6} />
-          </CPlaceholder>
-          <CPlaceholder as={CCardText} animation="glow">
-            <CPlaceholder xs={7} />
-            <CPlaceholder xs={4} />
-            <CPlaceholder xs={4} />
-            <CPlaceholder xs={6} />
-            <CPlaceholder xs={8} />
-          </CPlaceholder>
-          <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6} />
-        </CCardBody>
-      </CCard>
-    </>
-  )
-}
diff --git a/packages/docs/content/components/placeholder/examples/PlaceholderSizingExample.tsx b/packages/docs/content/components/placeholder/examples/PlaceholderSizingExample.tsx
deleted file mode 100644
index ad4a82d8..00000000
--- a/packages/docs/content/components/placeholder/examples/PlaceholderSizingExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index c3b8c275..00000000
--- a/packages/docs/content/components/placeholder/examples/PlaceholderWidthExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index efc734a6..00000000
--- a/packages/docs/content/components/placeholder/index.mdx
+++ /dev/null
@@ -1,66 +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.
-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
deleted file mode 100644
index ffe885a1..00000000
--- a/packages/docs/content/components/placeholder/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/popover/api.mdx
deleted file mode 100644
index cff7ebe7..00000000
--- a/packages/docs/content/components/popover/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Popover Component API
-name: Popover API
-description: Explore the API reference for the React Popover component and discover how to effectively utilize its props for customization.
-route: /components/popover/
----
-
-import CPopoverAPI from '../../api/CPopover.api.mdx'
-
-## CPopover
-
-<CPopoverAPI />
diff --git a/packages/docs/content/components/popover/bootstrap.mdx b/packages/docs/content/components/popover/bootstrap.mdx
deleted file mode 100644
index dc5b0616..00000000
--- a/packages/docs/content/components/popover/bootstrap.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: React Bootstrap Popover Component
-name: Popover with Bootstrap Styling
-description: Learn how to use the React Bootstrap Popover component from CoreUI to create interactive overlays for additional information, tooltips, or custom content.
-route: /components/popover/
-bootstrap_component: true
----
-
-## React Bootstrap Popover examples
-
-The React Bootstrap Popover component lets you display small overlay content on hover, click, or focus. Use it for tooltips, inline help, or contextual info without cluttering the UI.
-
-### Live demo
-
-Trigger the React Bootstrap Popover on click.
-
-<ExampleSnippet className="theme-bootstrap" component="PopoverLiveExample" componentName="React Bootstrap Popover" />
-
-### Four directions
-
-React Bootstrap Popovers support top, right, bottom, and left placement. Direction is automatically mirrored in RTL layouts.
-
-<ExampleSnippet className="theme-bootstrap" component="PopoverFourDirectionsExample" componentName="React Bootstrap Popover" />
-
-### Custom popovers
-
-Use inline `style` or CSS variables to override the popover's appearance.
-
-<ExampleSnippet className="theme-bootstrap" component="PopoverCustomPopoversExample" componentName="React Bootstrap Popover" />
-
-### Dismiss on next click
-
-Use `trigger="focus"` to automatically hide the popover when clicking outside the element.
-
-<ExampleSnippet className="theme-bootstrap" component="PopoverDismissExample" componentName="React Bootstrap Popover" />
-
-## Usage details
-
-### Popovers on disabled elements
-
-HTML elements with the `disabled` attribute cannot trigger popovers. Wrap them in a `<span>` or `<div>` and use `tabIndex="0"` to keep the element accessible. You can also use `trigger={['hover', 'focus']}` to ensure visual feedback.
-
-<ExampleSnippet className="theme-bootstrap" component="PopoverDisabledElementsExample" componentName="React Bootstrap Popover" />
-
-## API reference
-
-Explore the full API for the React Bootstrap Popover component:
-
-- [&lt;CPopover /&gt;](../api/#cpopover)
diff --git a/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.jsx b/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.jsx
deleted file mode 100644
index 8fe70484..00000000
--- a/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index 77018956..00000000
--- a/packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index 91aedb97..00000000
--- a/packages/docs/content/components/popover/examples/PopoverDisabledElementsExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 7e9d61d9..00000000
--- a/packages/docs/content/components/popover/examples/PopoverDismissExample.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index d57b0eba..00000000
--- a/packages/docs/content/components/popover/examples/PopoverFourDirectionsExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 0c0dbc06..00000000
--- a/packages/docs/content/components/popover/examples/PopoverLiveExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index bf0e011a..00000000
--- a/packages/docs/content/components/popover/index.mdx
+++ /dev/null
@@ -1,47 +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.
-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
deleted file mode 100644
index 30371916..00000000
--- a/packages/docs/content/components/popover/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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
deleted file mode 100644
index 6718ee10..00000000
--- a/packages/docs/content/components/progress/api.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: React Progress Component API
-name: Progress API
-description: Explore the API reference for the React Progress component and discover how to effectively utilize its props for customization.
-route: /components/progress/
----
-
-import CProgressAPI from '../../api/CProgress.api.mdx'
-import CProgressBarAPI from '../../api/CProgressBar.api.mdx'
-
-## CProgress
-
-<CProgressAPI />
-
-## CProgressBar
-
-<CProgressBarAPI />
diff --git a/packages/docs/content/components/progress/bootstrap.mdx b/packages/docs/content/components/progress/bootstrap.mdx
deleted file mode 100644
index acac97d1..00000000
--- a/packages/docs/content/components/progress/bootstrap.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: React Bootstrap Progress Component
-name: Progress with Bootstrap Styling
-description: Learn how to use the React Bootstrap Progress component from CoreUI to create progress bars with labels, stripes, animation, stacked sections, and custom colors.
-route: /components/progress/
-bootstrap_component: true
----
-
-## React Bootstrap Progress Component
-
-The React Bootstrap Progress component helps you visually represent progress or completion rates in tasks, processes, or downloads. These bars are fully customizable with colors, labels, sizes, and animations.
-
-## Basic usage
-
-Create a simple React Bootstrap progress bar using `<CProgress>` and `<CProgressBar>`.
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressExample" componentName="React Bootstrap Progress" />
-
-## Labels inside progress bars
-
-Add text labels to your progress bar by inserting content inside the `<CProgressBar>` element.
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressLabelsExample" componentName="React Bootstrap Progress" />
-
-When using long labels, ensure they are visible by applying `.overflow-visible` and setting a readable text color.
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressLabels2Example" componentName="React Bootstrap Progress" />
-
-Or use the `progressBarClassName` prop directly on `<CProgress>`:
-
-```jsx
-<CProgress progressBarClassName="overflow-visible text-dark px-2" color="success" value={10}>
-  Long label text for the progress bar
-</CProgress>
-```
-
-## Adjusting height
-
-Change the height of the React Bootstrap Progress component with utility classes or inline styles.
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressHeightExample" componentName="React Bootstrap Progress" />
-<ExampleSnippet className="theme-bootstrap" component="ProgressHeight2Example" componentName="React Bootstrap Progress" />
-
-## Custom backgrounds
-
-Use the `color` prop to set background colors for progress bars.
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressBackgroundsExample" componentName="React Bootstrap Progress" />
-
-If using labels, apply an appropriate text color for contrast:
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressBackgrounds2Example" componentName="React Bootstrap Progress" />
-
-Or use the `progressBarClassName` prop:
-
-```jsx
-<CProgress color="success" value={25}>25%</CProgress>
-<CProgress color="info" progressBarClassName="text-dark" value={50}>50%</CProgress>
-<CProgress color="warning" progressBarClassName="text-dark" value={75}>75%</CProgress>
-<CProgress color="danger" value={100}>100%</CProgress>
-```
-
-## Stacked progress bars
-
-React Bootstrap Progress supports multiple stacked bars inside a single `<CProgress>` or using the newer `<CProgressStacked>`.
-
-<Callout color="info" title="New markup in v4.9.0">
-  Use the `<CProgressStacked>` component introduced in v4.9.0 for stacked progress bars. Older syntax remains supported for now.
-</Callout>
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressMultipleBarsExample" componentName="React Bootstrap Progress" />
-
-Previous structure:
-
-```jsx
-<CProgress>
-  <CProgressBar value={15} />
-  <CProgressBar color="success" value={30} />
-  <CProgressBar color="info" value={20} />
-</CProgress>
-```
-
-## Striped variant
-
-Add stripes to any progress bar using `variant="striped"`.
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressStripedExample" componentName="React Bootstrap Progress" />
-
-## Animated stripes
-
-Make stripes animated using the `animated` prop.
-
-<ExampleSnippet className="theme-bootstrap" component="ProgressAnimatedStripedExample" componentName="React Bootstrap Progress" />
-
-## API reference
-
-Explore the full API for the React Bootstrap Progress component:
-
-- [&lt;CProgress /&gt;](../api/#cprogress)
-- [&lt;CProgressBar /&gt;](../api/#cprogressbar)
diff --git a/packages/docs/content/components/progress/examples/ProgressAnimatedStripedExample.tsx b/packages/docs/content/components/progress/examples/ProgressAnimatedStripedExample.tsx
deleted file mode 100644
index 3ffb272c..00000000
--- a/packages/docs/content/components/progress/examples/ProgressAnimatedStripedExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index c1476186..00000000
--- a/packages/docs/content/components/progress/examples/ProgressBackgrounds2Example.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index ee2d8f1f..00000000
--- a/packages/docs/content/components/progress/examples/ProgressBackgroundsExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 03c056d8..00000000
--- a/packages/docs/content/components/progress/examples/ProgressExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index b88a6b14..00000000
--- a/packages/docs/content/components/progress/examples/ProgressHeight2Example.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index dbb9a8b9..00000000
--- a/packages/docs/content/components/progress/examples/ProgressHeightExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 673b4fe7..00000000
--- a/packages/docs/content/components/progress/examples/ProgressLabels2Example.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 717ee4c4..00000000
--- a/packages/docs/content/components/progress/examples/ProgressLabelsExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index b9353162..00000000
--- a/packages/docs/content/components/progress/examples/ProgressMultipleBarsExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index adcf8c00..00000000
--- a/packages/docs/content/components/progress/examples/ProgressStripedExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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/index.mdx b/packages/docs/content/components/progress/index.mdx
deleted file mode 100644
index 7403e954..00000000
--- a/packages/docs/content/components/progress/index.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-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.
-route: /components/progress/
-other_frameworks: progress
----
-
-## 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
-
-<ExampleSnippet component="ProgressExample" componentName="React Progress" />
-
-## Labels
-
-Add labels to your progress bars by placing text within the `<CProgressBar>`.
-
-<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.
-
-<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.
-
-```jsx
-<CProgress progressBarClassName="overflow-visible text-dark px-2" color="success" value={10}>Long label text for the progress bar, set to a dark color</CProgress>
-```
-
-## Height
-
-We only set a `height` value on the `<CProgress>`, so if you change that value the inner `<CProgressBar>` will automatically resize accordingly.
-
-<ExampleSnippet component="ProgressHeightExample" componentName="React Progress" />
-
-<ExampleSnippet component="ProgressHeight2Example" componentName="React Progress" />
-
-## Backgrounds
-
-Use `color` prop to change the appearance of individual progress bars.
-
-<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.
-
-<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.
-
-```jsx
-<CProgress color="success" value={25}>25%</CProgress>
-<CProgress color="info" progressBarClassName="text-dark" value={50}>50%</CProgress>
-<CProgress color="warning" progressBarClassName="text-dark" value={75}>75%</CProgress>
-<CProgress color="danger" value={100}>100%</CProgress>
-```
-
-## Multiple bars
-
-Include multiple progress bars in a progress component if you need. In **v4.9.0**
-
-<Callout color="info" title="New markup 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>
-
-<ExampleSnippet component="ProgressMultipleBarsExample" componentName="React Progress" />
-
-**Previous markup**
-```jsx
-<CProgress>
-  <CProgressBar value={15} />
-  <CProgressBar color="success" value={30} />
-  <CProgressBar color="info" value={20} />
-</CProgress>
-```
-
-## Striped
-
-Add `variant="striped"` to any `<CProgressBar>` to apply a stripe via CSS gradient over the progress bar's background color.
-
-<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.
-
-<ExampleSnippet component="ProgressAnimatedStripedExample" componentName="React Progress" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&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
deleted file mode 100644
index 7af14283..00000000
--- a/packages/docs/content/components/progress/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/sidebar/api.mdx
deleted file mode 100644
index 92b6b112..00000000
--- a/packages/docs/content/components/sidebar/api.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: React Sidebar Component API
-name: Sidebar API
-description: Explore the API reference for the React Sidebar component and discover how to effectively utilize its props for customization.
-route: /components/widgets/
----
-
-import CSidebarAPI from '../../api/CSidebar.api.mdx'
-import CSidebarBrandAPI from '../../api/CSidebarBrand.api.mdx'
-import CSidebarFooterAPI from '../../api/CSidebarFooter.api.mdx'
-import CSidebarHeaderAPI from '../../api/CSidebarHeader.api.mdx'
-import CSidebarNavAPI from '../../api/CSidebarNav.api.mdx'
-import CSidebarTogglerAPI from '../../api/CSidebarToggler.api.mdx'
-
-## CSidebar
-
-<CSidebarAPI />
-
-## CSidebarBrand
-
-<CSidebarBrandAPI />
-
-## CSidebarFooter
-
-<CSidebarFooterAPI />
-
-## CSidebarHeader
-
-<CSidebarHeaderAPI />
-
-## CSidebarNav
-
-<CSidebarNavAPI />
-
-## CSidebarToggler
-
-<CSidebarTogglerAPI />
-
diff --git a/packages/docs/content/components/sidebar/bootstrap.mdx b/packages/docs/content/components/sidebar/bootstrap.mdx
deleted file mode 100644
index 0a3f246e..00000000
--- a/packages/docs/content/components/sidebar/bootstrap.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: React Bootstrap Sidebar Component
-name: Sidebar with Bootstrap Styling
-description: Learn how to use the React Bootstrap Sidebar component from CoreUI to build customizable side navigation panels with support for branding, dropdowns, dark mode, and responsive behavior.
-route: /components/sidebar/
-bootstrap_component: true
----
-
-## React Bootstrap Sidebar Component
-
-The React Bootstrap Sidebar component provides a flexible vertical navigation layout with support for branding, navigation links, toggling, and theming. It’s perfect for admin panels, dashboards, and mobile navigation.
-
-## Supported sub-components
-
-The sidebar includes built-in support for these components:
-
-- `<CSidebarHeader>` – optional top section.
-- `<CSidebarBrand>` – brand or logo section.
-- `<CSidebarNav>` – main vertical navigation area.
-- `<CSidebarFooter>` – optional bottom section.
-- `<CSidebarToggler>` – toggler for sidebar minimization or expansion.
-
-## React Bootstrap Sidebar examples
-
-### Standard sidebar
-
-By default, the sidebar is shown on desktop viewports and hidden on mobile.
-
-<ExampleSnippet
-  className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
-  component="SidebarExample"
-  componentName="React Bootstrap Sidebar"
-/>
-
-### Narrow sidebar
-
-Use the `narrow` prop to collapse the sidebar into a compact version, showing only icons.
-
-<ExampleSnippet
-  className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
-  component="SidebarNarrowExample"
-  componentName="React Bootstrap Sidebar"
-/>
-
-### Unfoldable sidebar
-
-Add `unfoldable` to create a narrow sidebar that expands on hover.
-
-<ExampleSnippet
-  className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
-  component="SidebarUnfoldableExample"
-  componentName="React Bootstrap Sidebar"
-/>
-
-## Dark mode sidebar
-
-Apply `colorScheme="dark"` to match your sidebar to a dark theme.
-
-<ExampleSnippet
-  className="theme-bootstrap bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
-  component="SidebarDarkExample"
-  componentName="React Bootstrap Sidebar"
-/>
-
-## Sidebar placement
-
-By default, the React Bootstrap Sidebar appears on the left. Use the `placement` prop to change this:
-
-- `placement="start"` – left side (default)
-- `placement="end"` – right side
-
-## API reference
-
-Explore the available props for the React Bootstrap Sidebar component and its subcomponents:
-
-- [&lt;CSidebar /&gt;](../api/#csidebar)
-- [&lt;CSidebarBrand /&gt;](../api/#csidebarbrand)
-- [&lt;CSidebarFooter /&gt;](../api/#csidebarfooter)
-- [&lt;CSidebarHeader /&gt;](../api/#csidebarheader)
-- [&lt;CSidebarNav /&gt;](../api/#csidebarnav)
-- [&lt;CSidebarToggler /&gt;](../api/#csidebartoggler)
diff --git a/packages/docs/content/components/sidebar/examples/SidebarDarkExample.tsx b/packages/docs/content/components/sidebar/examples/SidebarDarkExample.tsx
deleted file mode 100644
index 1681c3e0..00000000
--- a/packages/docs/content/components/sidebar/examples/SidebarDarkExample.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-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
deleted file mode 100644
index e3b35bbb..00000000
--- a/packages/docs/content/components/sidebar/examples/SidebarExample.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-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
deleted file mode 100644
index 2a332e6a..00000000
--- a/packages/docs/content/components/sidebar/examples/SidebarNarrowExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index a4c2cd49..00000000
--- a/packages/docs/content/components/sidebar/examples/SidebarUnfoldableExample.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-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
deleted file mode 100644
index 1ad2fe25..00000000
--- a/packages/docs/content/components/sidebar/index.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: React Sidebar Component
-name: Sidebar
-description:
-route: /components/sidebar/
-other_frameworks: sidebar
----
-
-## Supported content
-
-Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:
-
-- `<CSidebarHeader>` for optional header.
-- `<CSidebarBrand>` for your company, product, or project name.
-- `<CSidebarNav>` for a full-height and lightweight navigation (including support for dropdowns).
-- `<CSidebarFooter>` for optional footer.
-- `<CSidebarToggler>` for use with our minimizer plugin.
-
-## Examples
-
-### Sidebar component
-
-Below is an sidebar example that is shown by default on desktop devices.
-
-<ExampleSnippet
-  className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
-  component="SidebarExample"
-  componentName="React Sidebar"
-/>
-
-### Narrow sidebar
-
-Add the `narrow` property to make the sidebar narrow.
-
-<ExampleSnippet
-  className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
-  component="SidebarNarrowExample"
-  componentName="React Sidebar"
-/>
-
-### Unfoldable sidebar
-
-Add the `unfoldable` property to make the sidebar narrow with unfoldable on hover.
-
-<ExampleSnippet
-  className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
-  component="SidebarUnfoldableExample"
-  componentName="React Sidebar"
-/>
-
-## Dark sidebar
-
-Change the appearance of sidebars with the `colorScheme="dark"`.
-
-<ExampleSnippet
-  className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden"
-  component="SidebarDarkExample"
-  componentName="React Sidebar"
-/>
-
-## Placement
-
-By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.
-
-- `placement="start"` places sidebar on the left of the viewport (shown above)
-- `placement="end"` places sidebar on the right of the viewport
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CSidebar /&gt;](./api/#csidebar)
-- [&lt;CSidebarBrand /&gt;](./api/#csidebarbrand)
-- [&lt;CSidebarFooter /&gt;](./api/#csidebarfooter)
-- [&lt;CSidebarHeader /&gt;](./api/#csidebarheader)
-- [&lt;CSidebarNav /&gt;](./api/#csidebarnav)
-- [&lt;CSidebarToggler /&gt;](./api/#csidebartoggler)
diff --git a/packages/docs/content/components/sidebar/styling.mdx b/packages/docs/content/components/sidebar/styling.mdx
deleted file mode 100644
index 0a5ab0bd..00000000
--- a/packages/docs/content/components/sidebar/styling.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/spinner/api.mdx
deleted file mode 100644
index dd8cd57a..00000000
--- a/packages/docs/content/components/spinner/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Spinner Component API
-name: Spinner API
-description: Explore the API reference for the React Spinner component and discover how to effectively utilize its props for customization.
-route: /components/spinner/
----
-
-import CSpinnerAPI from '../../api/CSpinner.api.mdx'
-
-## CSpinner
-
-<CSpinnerAPI />
diff --git a/packages/docs/content/components/spinner/bootstrap.mdx b/packages/docs/content/components/spinner/bootstrap.mdx
deleted file mode 100644
index ec121699..00000000
--- a/packages/docs/content/components/spinner/bootstrap.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: React Bootstrap Spinner Component
-name: Spinner with Bootstrap Styling
-description: Learn how to use the React Bootstrap Spinner component from CoreUI to show loading states in your app with animated indicators, color options, alignment, and sizing.
-route: /components/spinner/
-bootstrap_component: true
----
-
-## React Bootstrap Spinner Component
-
-The React Bootstrap Spinner component displays a visual loading indicator in your app. Use it to communicate that content is loading, such as form submissions, page data, or background processes.
-
-All spinners are built with HTML and CSS—no JavaScript needed. You can easily customize appearance, color, size, and placement using utility classes.
-
-## Border spinner
-
-Use the border spinner as a lightweight, animated loading indicator.
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderExample" componentName="React Bootstrap Spinner" />
-
-### Spinner colors
-
-The React Bootstrap Spinner uses `currentColor`, so you can customize it using any text color utility class.
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderColorsExample" componentName="React Bootstrap Spinner" />
-
-## Grow spinner
-
-An alternative to the border version is the grow spinner. It expands and fades instead of spinning.
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerGrowExample" componentName="React Bootstrap Spinner" />
-<ExampleSnippet className="theme-bootstrap" component="SpinnerGrowColorsExample" componentName="React Bootstrap Spinner" />
-
-## Spinner alignment
-
-React Bootstrap Spinners use `inline-flex`, so they align well in many layout contexts.
-
-### Margin utilities
-
-Use Bootstrap spacing utilities for control over margin and spacing.
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderMarginExample" componentName="React Bootstrap Spinner" />
-
-### Flex alignment
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderPlacementFlexExample" componentName="React Bootstrap Spinner" />
-<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderPlacementFlex2Example" componentName="React Bootstrap Spinner" />
-
-### Float placement
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderPlacementFloatsExample" componentName="React Bootstrap Spinner" />
-
-### Text alignment
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerBorderPlacementTextAlignExample" componentName="React Bootstrap Spinner" />
-
-## Spinner size
-
-Use the `size="sm"` prop for a compact spinner.
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerSizeSmallExample" componentName="React Bootstrap Spinner" />
-
-For full control, use inline styles or custom CSS:
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerSizeCustomExample" componentName="React Bootstrap Spinner" />
-
-## Spinners in buttons
-
-Show React Bootstrap Spinners inside buttons to indicate loading states during form submissions or API requests.
-
-<ExampleSnippet className="theme-bootstrap" component="SpinnerButtonsExample" componentName="React Bootstrap Spinner" />
-<ExampleSnippet className="theme-bootstrap" component="SpinnerButtons2Example" componentName="React Bootstrap Spinner" />
-
-## Accessibility
-
-Each spinner includes `role="status"` and a visually hidden `<span>` with `"Loading..."` for screen readers. You can customize the text based on context.
-
-## API reference
-
-Explore the full API for the React Bootstrap Spinner component:
-
-- [&lt;CSpinner /&gt;](../api/#cspinner)
diff --git a/packages/docs/content/components/spinner/examples/SpinnerBorderColorsExample.tsx b/packages/docs/content/components/spinner/examples/SpinnerBorderColorsExample.tsx
deleted file mode 100644
index 666bc2d6..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerBorderColorsExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 20f79c24..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerBorderExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index fe16722d..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerBorderMarginExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index 6ea3851b..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlex2Example.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 102bc1b4..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlexExample.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index 625308f2..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFloatsExample.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index 335cf447..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerBorderPlacementTextAlignExample.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index 1044a293..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerButtons2Example.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 4aa7b70a..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerButtonsExample.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 1a889888..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerGrowColorsExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 4ec6ce16..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerGrowExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index 752ce62f..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerSizeCustomExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 49134e10..00000000
--- a/packages/docs/content/components/spinner/examples/SpinnerSizeSmallExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index 81e761c0..00000000
--- a/packages/docs/content/components/spinner/index.mdx
+++ /dev/null
@@ -1,87 +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.
-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
deleted file mode 100644
index 280abc50..00000000
--- a/packages/docs/content/components/spinner/styling.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
----
-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
deleted file mode 100644
index 12670487..00000000
--- a/packages/docs/content/components/table/api.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: React Table Component API
-name: Table API
-description: Explore the API reference for the React Table component and discover how to effectively utilize its props for customization.
-route: /components/table/
----
-
-import CTableAPI from '../../api/CTable.api.mdx'
-import CTableBodyAPI from '../../api/CTableBody.api.mdx'
-import CTableDataCellAPI from '../../api/CTableDataCell.api.mdx'
-import CTableFootAPI from '../../api/CTableFoot.api.mdx'
-import CTableHeadAPI from '../../api/CTableHead.api.mdx'
-import CTableHeaderCellAPI from '../../api/CTableHeaderCell.api.mdx'
-import CTableRowAPI from '../../api/CTableRow.api.mdx'
-
-## CTable
-
-<CTableAPI />
-
-## CTableBody
-
-<CTableBodyAPI />
-
-## CTableDataCell
-
-<CTableDataCellAPI />
-
-## CTableFoot
-
-<CTableFootAPI />
-
-## CTableHead
-
-<CTableHeadAPI />
-
-## CTableHeaderCell
-
-<CTableHeaderCellAPI />
-
-## CTableRow
-
-<CTableRowAPI />
diff --git a/packages/docs/content/components/table/bootstrap.mdx b/packages/docs/content/components/table/bootstrap.mdx
deleted file mode 100644
index a1edf2a3..00000000
--- a/packages/docs/content/components/table/bootstrap.mdx
+++ /dev/null
@@ -1,1640 +0,0 @@
----
-title: React Bootstrap Table Component
-name: Table with Bootstrap Styling
-description: Learn how to use CoreUI’s React Bootstrap Table component to build responsive, feature-rich tables styled with Bootstrap in your React app.
-route: /components/table/
-bootstrap_component: true
----
-
-import {
-  CBadge,
-  CTable,
-  CTableBody,
-  CTableCaption,
-  CTableDataCell,
-  CTableFoot,
-  CTableHead,
-  CTableHeaderCell,
-  CTableRow,
-} from '@coreui/react'
-
-## How to use React Bootstrap Table component
-
-The `<CTable>` component with Bootstrap theming lets you build responsive and accessible React tables using CoreUI components. Define structure manually or use the `columns` and `items` API for easier table generation.
-
-export const TableExample = (props) => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'class',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-    },
-  ]
-  return <CTable columns={columns} items={items} {...props} />
-}
-
-<ExampleSnippet component="TableExample" componentName="React Table" />
-
-In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).
-
-```jsx
-const columns = [
-  {
-    key: 'id',
-    label: '#',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'class',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_1',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_2',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-]
-const items = [
-  {
-    id: 1,
-    class: 'Mark',
-    heading_1: 'Otto',
-    heading_2: '@mdo',
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 2,
-    class: 'Jacob',
-    heading_1: 'Thornton',
-    heading_2: '@fat',
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 3,
-    class: 'Larry the Bird',
-    heading_2: '@twitter',
-    _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-  },
-]
-return <CTable columns={columns} items={items} />
-```
-
-You can also put all table components together manually as hitherto.
-
-```jsx
-<CTable>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col">#</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow>
-      <CTableHeaderCell scope="row">1</CTableHeaderCell>
-      <CTableDataCell>Mark</CTableDataCell>
-      <CTableDataCell>Otto</CTableDataCell>
-      <CTableDataCell>@mdo</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">2</CTableHeaderCell>
-      <CTableDataCell>Jacob</CTableDataCell>
-      <CTableDataCell>Thornton</CTableDataCell>
-      <CTableDataCell>@fat</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">3</CTableHeaderCell>
-      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-      <CTableDataCell>@twitter</CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-Both methods produce the same html code.
-
-## Variants
-
-Use contextual classes to color react tables, table rows or individual cells.
-
-export const VariantExample = () => {
-  const columns = [
-    { key: 'class', _props: { scope: 'col' } },
-    { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
-    { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
-  ]
-  const items = [
-    {
-      class: 'Default',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-    },
-    {
-      class: 'Primary',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'primary' },
-    },
-    {
-      class: 'Secondary',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'secondary' },
-    },
-    {
-      class: 'Success',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'success' },
-    },
-    {
-      class: 'Danger',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'danger' },
-    },
-    {
-      class: 'Warning',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'warning' },
-    },
-    {
-      class: 'Info',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'info' },
-    },
-    {
-      class: 'Light',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'light' },
-    },
-    {
-      class: 'Dark',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'dark' },
-    },
-  ]
-  return <CTable columns={columns} items={items} />
-}
-
-<Example className="theme-bootstrap">
-  <VariantExample />
-</Example>
-
-```jsx
-<CTable>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow>
-      <CTableHeaderCell scope="row">Default</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="primary">
-      <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="secondary">
-      <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="success">
-      <CTableHeaderCell scope="row">Success</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="danger">
-      <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="warning">
-      <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="info">
-      <CTableHeaderCell scope="row">Info</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="light">
-      <CTableHeaderCell scope="row">Light</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="dark">
-      <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-Since version **4.3.0** also this way.
-
-```jsx
-const columns = [
-  { key: 'class', _props: { scope: 'col' } },
-  { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
-  { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
-]
-const items = [
-  {
-    class: 'Default',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-  },
-  {
-    class: 'Primary',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'primary' },
-  },
-  {
-    class: 'Secondary',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'secondary' },
-  },
-  {
-    class: 'Success',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'success' },
-  },
-  {
-    class: 'Danger',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'danger' },
-  },
-  {
-    class: 'Warning',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'warning' },
-  },
-  {
-    class: 'Info',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'info' },
-  },
-  {
-    class: 'Light',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'light' },
-  },
-  {
-    class: 'Dark',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'dark' },
-  },
-]
-return <CTable columns={columns} items={items} />
-```
-
-## Accented tables
-
-### Striped rows
-
-Use `striped` property to add zebra-striping to any react table row within the `<CTableBody>`.
-
-<Example className="theme-bootstrap">
-  <TableExample striped />
-</Example>
-
-```jsx
-<CTable striped>
-  ...
-</CTable>
-```
-
-### Striped columns
-
-Enable `striped` to alternate row background colors for better visual distinction.
-
-<Example className="theme-bootstrap">
-  <TableExample stripedColumns />
-</Example>
-
-```jsx
-<CTable stripedColumns>
-  ...
-</CTable>
-```
-
-These classes can also be added to react table variants:
-
-<Example className="theme-bootstrap">
-  <TableExample color="dark" striped />
-</Example>
-
-```jsx
-<CTable color="dark" striped>
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  <TableExample color="dark" stripedColumns />
-</Example>
-
-```jsx
-<CTable color="dark" stripedColumns>
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  <TableExample color="success" striped />
-</Example>
-
-```jsx
-<CTable color="success" striped>
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  <TableExample color="success" stripedColumns />
-</Example>
-
-```jsx
-<CTable color="success" stripedColumns>
-  ...
-</CTable>
-```
-
-### Hoverable rows
-
-Use the `hover` prop to highlight rows when hovered by the user.
-
-<Example className="theme-bootstrap">
-  <TableExample hover />
-</Example>
-
-```jsx
-<CTable hover>
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  <TableExample color="dark" hover />
-</Example>
-
-```jsx
-<CTable color="dark" hover>
-  ...
-</CTable>
-```
-
-These hoverable rows can also be combined with the striped variant:
-
-<Example className="theme-bootstrap">
-  <TableExample striped hover />
-</Example>
-
-```jsx
-<CTable striped hover>
-  ...
-</CTable>
-```
-
-### Active tables
-
-Highlight a table row or cell by adding a `active` property.
-
-export const ActiveTableExample = () => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'class',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _props: { active: true },
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-    },
-  ]
-  return <CTable columns={columns} items={items} />
-}
-
-<Example className="rounded">
-  <ActiveTableExample />
-</Example>
-
-As mentioned before since version **4.3.0** we have two ways to generate tables, also with custom properties for rows, and cells.
-
-```jsx
-const columns = [
-  {
-    key: 'id',
-    label: '#',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'class',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_1',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_2',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-]
-const items = [
-  {
-    id: 1,
-    class: 'Mark',
-    heading_1: 'Otto',
-    heading_2: '@mdo',
-    _props: { active: true },
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 2,
-    class: 'Jacob',
-    heading_1: 'Thornton',
-    heading_2: '@fat',
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 3,
-    class: 'Larry the Bird',
-    heading_2: '@twitter',
-    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-  },
-]
-return <CTable columns={columns} items={items} />
-```
-
-```jsx
-<CTable>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col">#</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow active>
-      <CTableHeaderCell scope="row">1</CTableHeaderCell>
-      <CTableDataCell>Mark</CTableDataCell>
-      <CTableDataCell>Otto</CTableDataCell>
-      <CTableDataCell>@mdo</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">2</CTableHeaderCell>
-      <CTableDataCell>Jacob</CTableDataCell>
-      <CTableDataCell>Thornton</CTableDataCell>
-      <CTableDataCell>@fat</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">3</CTableHeaderCell>
-      <CTableDataCell colSpan={2} active>
-        Larry the Bird
-      </CTableDataCell>
-      <CTableDataCell>@twitter</CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-export const ActiveTableDarkExample = () => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'class',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _props: { active: true },
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-    },
-  ]
-  return <CTable color="dark" columns={columns} items={items} />
-}
-
-<Example className="theme-bootstrap">
-  <ActiveTableDarkExample />
-</Example>
-
-```jsx
-const columns = [
-  {
-    key: 'id',
-    label: '#',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'class',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_1',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_2',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-]
-const items = [
-  {
-    id: 1,
-    class: 'Mark',
-    heading_1: 'Otto',
-    heading_2: '@mdo',
-    _props: { active: true },
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 2,
-    class: 'Jacob',
-    heading_1: 'Thornton',
-    heading_2: '@fat',
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 3,
-    class: 'Larry the Bird',
-    heading_2: '@twitter',
-    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-  },
-]
-return <CTable color="dark" columns={columns} items={items} />
-```
-
-## Table borders
-
-### Bordered tables
-
-Add `bordered` property for borders on all sides of the table and cells.
-
-<Example className="theme-bootstrap">
-  <TableExample bordered />
-</Example>
-
-```jsx
-<CTable bordered>
-  ...
-</CTable>
-```
-
-[Border color utilities](https://coreui.io/bootstrap/docs/utilities/borders#border-color) can be added to change colors:
-
-<Example className="theme-bootstrap">
-  <TableExample bordered borderColor="primary" />
-</Example>
-
-```jsx
-<CTable bordered borderColor="primary">
-  ...
-</CTable>
-```
-
-### Tables without borders
-
-Add `borderless` property for a react table without borders.
-
-<Example className="theme-bootstrap">
-  <TableExample borderless />
-</Example>
-
-```jsx
-<CTable borderless>
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  <TableExample borderless color="dark" />
-</Example>
-
-```jsx
-<CTable color="dark" borderless>
-  ...
-</CTable>
-```
-
-## Small tables
-
-Add `small` property to make any `<CTable>` more compact by cutting all cell `padding` in half.
-
-<Example className="theme-bootstrap">
-  <TableExample small />
-</Example>
-
-```jsx
-<CTable small>
-  ...
-</CTable>
-```
-
-## Vertical alignment
-
-Table cells of `<CTableHead>` are always vertical aligned to the bottom. Table cells in `<CTableBody>` inherit their alignment from `<CTable>` and are aligned to the the top by default. Use the align property to re-align where needed.
-
-export const VerticalAlignmentExample = () => {
-  const columns = [
-    {
-      key: 'heading_1',
-      _props: { className: 'w-25', scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      _props: { className: 'w-25', scope: 'col' },
-    },
-    {
-      key: 'heading_3',
-      _props: { className: 'w-25', scope: 'col' },
-    },
-    {
-      key: 'heading_4',
-      _props: { className: 'w-25', scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_3: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-    },
-    {
-      heading_1: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-      heading_2: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-      heading_3: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-      _props: { align: 'bottom' }
-    },
-    {
-      heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_3: 'This cell is aligned to the top.',
-      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-       _cellProps: { heading_3: { align: 'top' }},
-    },
-  ]
-  return <CTable align="middle" columns={columns} items={items} />
-}
-
-<Example className="rounded">
-  <VerticalAlignmentExample />
-</Example>
-
-In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).
-
-```jsx
-const columns = [
-  {
-    key: 'heading_1',
-    _props: { className: 'w-25', scope: 'col' },
-  },
-  {
-    key: 'heading_2',
-    _props: { className: 'w-25', scope: 'col' },
-  },
-  {
-    key: 'heading_3',
-    _props: { className: 'w-25', scope: 'col' },
-  },
-  {
-    key: 'heading_4',
-    _props: { className: 'w-25', scope: 'col' },
-  },
-]
-const items = [
-  {
-    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_3: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-  },
-  {
-    heading_1: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-    heading_2: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-    heading_3: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-    _props: { align: 'bottom' }
-  },
-  {
-    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_3: 'This cell is aligned to the top.',
-    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-      _cellProps: { heading_3: { align: 'top' }},
-  },
-]
-return <CTable align="middle" columns={columns} items={items} />
-```
-
-You can also put all table components together manually as hitherto.
-
-```jsx
-<CTable align="middle" responsive>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col" className="w-25">
-        Heading 1
-      </CTableHeaderCell>
-      <CTableHeaderCell scope="col" className="w-25">
-        Heading 2
-      </CTableHeaderCell>
-      <CTableHeaderCell scope="col" className="w-25">
-        Heading 3
-      </CTableHeaderCell>
-      <CTableHeaderCell scope="col" className="w-25">
-        Heading 4
-      </CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell>
-        This here is some placeholder text, intended to take up quite a bit of vertical space, to
-        demonstrate how the vertical alignment works in the preceding cells.
-      </CTableDataCell>
-    </CTableRow>
-    <CTableRow align="bottom">
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: bottom;</code> from the table row
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: bottom;</code> from the table row
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: bottom;</code> from the table row
-      </CTableDataCell>
-      <CTableDataCell>
-        This here is some placeholder text, intended to take up quite a bit of vertical space, to
-        demonstrate how the vertical alignment works in the preceding cells.
-      </CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
-      <CTableDataCell>
-        This here is some placeholder text, intended to take up quite a bit of vertical space, to
-        demonstrate how the vertical alignment works in the preceding cells.
-      </CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-## Nesting
-
-Border styles, active styles, and react table component variants are not inherited by nested tables.
-
-<Example className="theme-bootstrap">
-  {<CTable striped>
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Mark</CTableDataCell>
-        <CTableDataCell>Otto</CTableDataCell>
-        <CTableDataCell>@mdo</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell colSpan={4}>
-          <CTable>
-            <CTableHead>
-              <CTableRow>
-                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-              </CTableRow>
-            </CTableHead>
-            <CTableBody>
-              <CTableRow>
-                <CTableHeaderCell scope="row">A</CTableHeaderCell>
-                <CTableDataCell>First</CTableDataCell>
-                <CTableDataCell>Last</CTableDataCell>
-              </CTableRow>
-              <CTableRow>
-                <CTableHeaderCell scope="row">B</CTableHeaderCell>
-                <CTableDataCell>First</CTableDataCell>
-                <CTableDataCell>Last</CTableDataCell>
-              </CTableRow>
-              <CTableRow>
-                <CTableHeaderCell scope="row">C</CTableHeaderCell>
-                <CTableDataCell>First</CTableDataCell>
-                <CTableDataCell>Last</CTableDataCell>
-              </CTableRow>
-            </CTableBody>
-          </CTable>
-        </CTableHeaderCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-        <CTableDataCell>@twitter</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable striped>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col">#</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow>
-      <CTableHeaderCell scope="row">1</CTableHeaderCell>
-      <CTableDataCell>Mark</CTableDataCell>
-      <CTableDataCell>Otto</CTableDataCell>
-      <CTableDataCell>@mdo</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell colSpan={4}>
-        <CTable>
-          <CTableHead>
-            <CTableRow>
-              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-            </CTableRow>
-          </CTableHead>
-          <CTableBody>
-            <CTableRow>
-              <CTableHeaderCell scope="row">A</CTableHeaderCell>
-              <CTableDataCell>First</CTableDataCell>
-              <CTableDataCell>Last</CTableDataCell>
-            </CTableRow>
-            <CTableRow>
-              <CTableHeaderCell scope="row">B</CTableHeaderCell>
-              <CTableDataCell>First</CTableDataCell>
-              <CTableDataCell>Last</CTableDataCell>
-            </CTableRow>
-            <CTableRow>
-              <CTableHeaderCell scope="row">C</CTableHeaderCell>
-              <CTableDataCell>First</CTableDataCell>
-              <CTableDataCell>Last</CTableDataCell>
-            </CTableRow>
-          </CTableBody>
-        </CTable>
-      </CTableHeaderCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">3</CTableHeaderCell>
-      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-      <CTableDataCell>@twitter</CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-## Anatomy
-
-### Table head
-
-Similar to tables and dark tables, use the modifier prop `color="light"` or `color="dark"` to make `<CTableHead>`s appear light or dark gray.
-
-<Example className="theme-bootstrap">
-  <TableExample tableHeadProps={{ color: 'light' }} />
-</Example>
-
-```jsx
-<CTable>
-  <CTableHead color="light">
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  </CTableBody>
-</CTable>
-```
-
-If you generate a table using the new method incorporated in version **4.3.0**, you have to use `tableHeadProps` property to pass properties to the table header component.
-
-```jsx
-const columns = [...]
-const items = [...]
-
-return <CTable columns={columns} items={items} tableHeadProps={{ color: 'light' }} />
-```
-
-<Example className="theme-bootstrap">
-  <TableExample tableHeadProps={{ color: 'dark' }} />
-</Example>
-
-```jsx
-<CTable>
-  <CTableHead color="dark">
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  </CTableBody>
-</CTable>
-```
-
-Starting from version **4.3.0** also this way.
-
-```jsx
-const columns = [...]
-const items = [...]
-
-return <CTable columns={columns} items={items} tableHeadProps={{ color: 'dark' }} />
-```
-
-### Table foot
-
-export const TableFoodExample = () => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'class',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const footer = [
-    'Footer',
-    'Footer',
-    'Footer',
-    'Footer',
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-    },
-  ]
-  return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }} />
-}
-
-<Example className="theme-bootstrap">
-  <TableFoodExample />
-</Example>
-
-```jsx
-<CTable>
-  <CTableHead color="light">
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  <CTableHead>
-    <CTableRow>
-      <CTableDataCell>Footer</CTableDataCell>
-      <CTableDataCell>Footer</CTableDataCell>
-      <CTableDataCell>Footer</CTableDataCell>
-      <CTableDataCell>Footer</CTableDataCell>
-    </CTableRow>
-  </CTableHead>
-</CTable>
-```
-
-Starting from version **4.3.0** also this way.
-
-```jsx
-const columns = [...]
-const footer = [
-  'Footer',
-  'Footer',
-  'Footer',
-  'Footer',
-]
-const items = [...]
-
-return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }}/>
-```
-
-### Captions
-
-A `<CTableCaption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
-
-<Example className="theme-bootstrap">
-  <TableExample caption="List of users" />
-</Example>
-
-```jsx
-<CTable>
-  <CTableCaption>List of users</CTableCaption>
-  <CTableHead>
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  </CTableBody>
-</CTable>
-```
-
-Starting from version **4.3.0** also this way.
-
-```jsx
-const columns = [...]
-const items = [...]
-
-return <CTable caption="List of users" columns={columns} items={items} />
-```
-
-You can also put the `<CTableCaption>` on the top of the table with `caption="top"`.
-
-<Example className="theme-bootstrap">
-  <TableExample captionTop="List of users" />
-</Example>
-
-```jsx
-<CTable caption="top">
-  <CTableCaption>List of users</CTableCaption>
-  <CTableHead>
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  </CTableBody>
-</CTable>
-```
-
-Since version **4.3.0** also this way.
-
-```jsx
-const columns = [...]
-const items = [...]
-
-return <CTable captionTop="List of users" columns={columns} items={items} />
-```
-
-## Responsive tables
-
-Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a `responsive` property. Or, pick a maximum breakpoint with which to have a responsive table up to by using `responsive="{-sm|-md|-lg|-xl|-xxl}"`.
-
-<Example className="theme-bootstrap">
-  {<CTable responsive>
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive>
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  {<CTable responsive="sm">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="sm">
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  {<CTable responsive="md">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="md">
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  {<CTable responsive="lg">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="lg">
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  {<CTable responsive="xl">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="xl">
-  ...
-</CTable>
-```
-
-<Example className="theme-bootstrap">
-  {<CTable responsive="xxl">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="xxl">
-  ...
-</CTable>
-```
-
-## API
-
-Explore all available props and component options in the API reference below.
-
-- [&lt;CTable /&gt;](../api/#ctable)
-- [&lt;CTableBody /&gt;](../api/#ctablebody)
-- [&lt;CTableDataCell /&gt;](../api/#ctabledatacell)
-- [&lt;CTableFoot /&gt;](../api/#ctablefoot)
-- [&lt;CTableHead /&gt;](../api/#ctablehead)
-- [&lt;CTableHeaderCell /&gt;](../api/#ctableheadercell)
-- [&lt;CTableRow /&gt;](../api/#ctablerow)
diff --git a/packages/docs/content/components/table/examples/TableExample.tsx b/packages/docs/content/components/table/examples/TableExample.tsx
deleted file mode 100644
index 9619b862..00000000
--- a/packages/docs/content/components/table/examples/TableExample.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-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
deleted file mode 100644
index 037ae081..00000000
--- a/packages/docs/content/components/table/examples/TableVariantsExample.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-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/index.mdx b/packages/docs/content/components/table/index.mdx
deleted file mode 100644
index 004276ed..00000000
--- a/packages/docs/content/components/table/index.mdx
+++ /dev/null
@@ -1,1642 +0,0 @@
----
-title: React Table Component
-name: Table
-description: Documentation and examples for opt-in styling of tables.
-route: /components/table/
-other_frameworks: table
----
-
-import {
-  CBadge,
-  CTable,
-  CTableBody,
-  CTableCaption,
-  CTableDataCell,
-  CTableFoot,
-  CTableHead,
-  CTableHeaderCell,
-  CTableRow,
-} from '@coreui/react'
-
-## How to use React Table Component
-
-Due to the widespread use of `<CTable>` elements across third-party widgets like calendars and date pickers, CoreUI's react tables are **opt-in**. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent.
-
-Using the most basic table CoreUI, here's how `<CTable>`-based tables look in CoreUI.
-
-export const TableExample = (props) => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'class',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-    },
-  ]
-  return <CTable columns={columns} items={items} {...props} />
-}
-
-<ExampleSnippet component="TableExample" componentName="React Table" />
-
-In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).
-
-```jsx
-const columns = [
-  {
-    key: 'id',
-    label: '#',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'class',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_1',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_2',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-]
-const items = [
-  {
-    id: 1,
-    class: 'Mark',
-    heading_1: 'Otto',
-    heading_2: '@mdo',
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 2,
-    class: 'Jacob',
-    heading_1: 'Thornton',
-    heading_2: '@fat',
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 3,
-    class: 'Larry the Bird',
-    heading_2: '@twitter',
-    _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-  },
-]
-return <CTable columns={columns} items={items} />
-```
-
-You can also put all table components together manually as hitherto.
-
-```jsx
-<CTable>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col">#</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow>
-      <CTableHeaderCell scope="row">1</CTableHeaderCell>
-      <CTableDataCell>Mark</CTableDataCell>
-      <CTableDataCell>Otto</CTableDataCell>
-      <CTableDataCell>@mdo</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">2</CTableHeaderCell>
-      <CTableDataCell>Jacob</CTableDataCell>
-      <CTableDataCell>Thornton</CTableDataCell>
-      <CTableDataCell>@fat</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">3</CTableHeaderCell>
-      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-      <CTableDataCell>@twitter</CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-Both methods produce the same html code.
-
-## Variants
-
-Use contextual classes to color react tables, table rows or individual cells.
-
-export const VariantExample = () => {
-  const columns = [
-    { key: 'class', _props: { scope: 'col' } },
-    { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
-    { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
-  ]
-  const items = [
-    {
-      class: 'Default',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-    },
-    {
-      class: 'Primary',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'primary' },
-    },
-    {
-      class: 'Secondary',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'secondary' },
-    },
-    {
-      class: 'Success',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'success' },
-    },
-    {
-      class: 'Danger',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'danger' },
-    },
-    {
-      class: 'Warning',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'warning' },
-    },
-    {
-      class: 'Info',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'info' },
-    },
-    {
-      class: 'Light',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'light' },
-    },
-    {
-      class: 'Dark',
-      heading_1: 'Cell',
-      heading_2: 'Cell',
-      _cellProps: { class: { scope: 'row' } },
-      _props: { color: 'dark' },
-    },
-  ]
-  return <CTable columns={columns} items={items} />
-}
-
-<Example>
-  <VariantExample />
-</Example>
-
-```jsx
-<CTable>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow>
-      <CTableHeaderCell scope="row">Default</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="primary">
-      <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="secondary">
-      <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="success">
-      <CTableHeaderCell scope="row">Success</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="danger">
-      <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="warning">
-      <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="info">
-      <CTableHeaderCell scope="row">Info</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="light">
-      <CTableHeaderCell scope="row">Light</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-    <CTableRow color="dark">
-      <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
-      <CTableDataCell>Cell</CTableDataCell>
-      <CTableDataCell>Cell</CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-Since version **4.3.0** also this way.
-
-```jsx
-const columns = [
-  { key: 'class', _props: { scope: 'col' } },
-  { key: 'heading_1', label: 'Heading', _props: { scope: 'col' } },
-  { key: 'heading_2', label: 'Heading', _props: { scope: 'col' } },
-]
-const items = [
-  {
-    class: 'Default',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-  },
-  {
-    class: 'Primary',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'primary' },
-  },
-  {
-    class: 'Secondary',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'secondary' },
-  },
-  {
-    class: 'Success',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'success' },
-  },
-  {
-    class: 'Danger',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'danger' },
-  },
-  {
-    class: 'Warning',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'warning' },
-  },
-  {
-    class: 'Info',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'info' },
-  },
-  {
-    class: 'Light',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'light' },
-  },
-  {
-    class: 'Dark',
-    heading_1: 'Cell',
-    heading_2: 'Cell',
-    _cellProps: { class: { scope: 'row' } },
-    _props: { color: 'dark' },
-  },
-]
-return <CTable columns={columns} items={items} />
-```
-
-## Accented tables
-
-### Striped rows
-
-Use `striped` property to add zebra-striping to any react table row within the `<CTableBody>`.
-
-<Example>
-  <TableExample striped />
-</Example>
-
-```jsx
-<CTable striped>
-  ...
-</CTable>
-```
-
-### Striped columns
-
-Use `stripedColumns` boolean property to add zebra-striping to any table column.
-
-<Example>
-  <TableExample stripedColumns />
-</Example>
-
-```jsx
-<CTable stripedColumns>
-  ...
-</CTable>
-```
-
-These classes can also be added to react table variants:
-
-<Example>
-  <TableExample color="dark" striped />
-</Example>
-
-```jsx
-<CTable color="dark" striped>
-  ...
-</CTable>
-```
-
-<Example>
-  <TableExample color="dark" stripedColumns />
-</Example>
-
-```jsx
-<CTable color="dark" stripedColumns>
-  ...
-</CTable>
-```
-
-<Example>
-  <TableExample color="success" striped />
-</Example>
-
-```jsx
-<CTable color="success" striped>
-  ...
-</CTable>
-```
-
-<Example>
-  <TableExample color="success" stripedColumns />
-</Example>
-
-```jsx
-<CTable color="success" stripedColumns>
-  ...
-</CTable>
-```
-
-### Hoverable rows
-
-Use `hover` property to enable a hover state on react table rows within a `<CTableBody>`.
-
-<Example>
-  <TableExample hover />
-</Example>
-
-```jsx
-<CTable hover>
-  ...
-</CTable>
-```
-
-<Example>
-  <TableExample color="dark" hover />
-</Example>
-
-```jsx
-<CTable color="dark" hover>
-  ...
-</CTable>
-```
-
-These hoverable rows can also be combined with the striped variant:
-
-<Example>
-  <TableExample striped hover />
-</Example>
-
-```jsx
-<CTable striped hover>
-  ...
-</CTable>
-```
-
-### Active tables
-
-Highlight a table row or cell by adding a `active` property.
-
-export const ActiveTableExample = () => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'class',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _props: { active: true },
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-    },
-  ]
-  return <CTable columns={columns} items={items} />
-}
-
-<Example className="rounded">
-  <ActiveTableExample />
-</Example>
-
-As mentioned before since version **4.3.0** we have two ways to generate tables, also with custom properties for rows, and cells.
-
-```jsx
-const columns = [
-  {
-    key: 'id',
-    label: '#',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'class',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_1',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_2',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-]
-const items = [
-  {
-    id: 1,
-    class: 'Mark',
-    heading_1: 'Otto',
-    heading_2: '@mdo',
-    _props: { active: true },
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 2,
-    class: 'Jacob',
-    heading_1: 'Thornton',
-    heading_2: '@fat',
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 3,
-    class: 'Larry the Bird',
-    heading_2: '@twitter',
-    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-  },
-]
-return <CTable columns={columns} items={items} />
-```
-
-```jsx
-<CTable>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col">#</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow active>
-      <CTableHeaderCell scope="row">1</CTableHeaderCell>
-      <CTableDataCell>Mark</CTableDataCell>
-      <CTableDataCell>Otto</CTableDataCell>
-      <CTableDataCell>@mdo</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">2</CTableHeaderCell>
-      <CTableDataCell>Jacob</CTableDataCell>
-      <CTableDataCell>Thornton</CTableDataCell>
-      <CTableDataCell>@fat</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">3</CTableHeaderCell>
-      <CTableDataCell colSpan={2} active>
-        Larry the Bird
-      </CTableDataCell>
-      <CTableDataCell>@twitter</CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-export const ActiveTableDarkExample = () => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'class',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _props: { active: true },
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-    },
-  ]
-  return <CTable color="dark" columns={columns} items={items} />
-}
-
-<Example>
-  <ActiveTableDarkExample />
-</Example>
-
-```jsx
-const columns = [
-  {
-    key: 'id',
-    label: '#',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'class',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_1',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-  {
-    key: 'heading_2',
-    label: 'Heading',
-    _props: { scope: 'col' },
-  },
-]
-const items = [
-  {
-    id: 1,
-    class: 'Mark',
-    heading_1: 'Otto',
-    heading_2: '@mdo',
-    _props: { active: true },
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 2,
-    class: 'Jacob',
-    heading_1: 'Thornton',
-    heading_2: '@fat',
-    _cellProps: { id: { scope: 'row' } },
-  },
-  {
-    id: 3,
-    class: 'Larry the Bird',
-    heading_2: '@twitter',
-    _cellProps: { id: { scope: 'row' }, class: { active: true, colSpan: 2 } },
-  },
-]
-return <CTable color="dark" columns={columns} items={items} />
-```
-
-## Table borders
-
-### Bordered tables
-
-Add `bordered` property for borders on all sides of the table and cells.
-
-<Example>
-  <TableExample bordered />
-</Example>
-
-```jsx
-<CTable bordered>
-  ...
-</CTable>
-```
-
-[Border color utilities](https://coreui.io/bootstrap/docs/utilities/borders#border-color) can be added to change colors:
-
-<Example>
-  <TableExample bordered borderColor="primary" />
-</Example>
-
-```jsx
-<CTable bordered borderColor="primary">
-  ...
-</CTable>
-```
-
-### Tables without borders
-
-Add `borderless` property for a react table without borders.
-
-<Example>
-  <TableExample borderless />
-</Example>
-
-```jsx
-<CTable borderless>
-  ...
-</CTable>
-```
-
-<Example>
-  <TableExample borderless color="dark" />
-</Example>
-
-```jsx
-<CTable color="dark" borderless>
-  ...
-</CTable>
-```
-
-## Small tables
-
-Add `small` property to make any `<CTable>` more compact by cutting all cell `padding` in half.
-
-<Example>
-  <TableExample small />
-</Example>
-
-```jsx
-<CTable small>
-  ...
-</CTable>
-```
-
-## Vertical alignment
-
-Table cells of `<CTableHead>` are always vertical aligned to the bottom. Table cells in `<CTableBody>` inherit their alignment from `<CTable>` and are aligned to the the top by default. Use the align property to re-align where needed.
-
-export const VerticalAlignmentExample = () => {
-  const columns = [
-    {
-      key: 'heading_1',
-      _props: { className: 'w-25', scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      _props: { className: 'w-25', scope: 'col' },
-    },
-    {
-      key: 'heading_3',
-      _props: { className: 'w-25', scope: 'col' },
-    },
-    {
-      key: 'heading_4',
-      _props: { className: 'w-25', scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_3: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-    },
-    {
-      heading_1: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-      heading_2: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-      heading_3: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-      _props: { align: 'bottom' }
-    },
-    {
-      heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-      heading_3: 'This cell is aligned to the top.',
-      heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-       _cellProps: { heading_3: { align: 'top' }},
-    },
-  ]
-  return <CTable align="middle" columns={columns} items={items} />
-}
-
-<Example className="rounded">
-  <VerticalAlignmentExample />
-</Example>
-
-In version **4.3.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/react/docs/components/smart-table/).
-
-```jsx
-const columns = [
-  {
-    key: 'heading_1',
-    _props: { className: 'w-25', scope: 'col' },
-  },
-  {
-    key: 'heading_2',
-    _props: { className: 'w-25', scope: 'col' },
-  },
-  {
-    key: 'heading_3',
-    _props: { className: 'w-25', scope: 'col' },
-  },
-  {
-    key: 'heading_4',
-    _props: { className: 'w-25', scope: 'col' },
-  },
-]
-const items = [
-  {
-    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_3: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-  },
-  {
-    heading_1: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-    heading_2: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-    heading_3: <>This cell inherits <code>vertical-align: bottom;</code> from the table row</>,
-    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-    _props: { align: 'bottom' }
-  },
-  {
-    heading_1: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_2: <>This cell inherits <code>vertical-align: middle;</code> from the table</>,
-    heading_3: 'This cell is aligned to the top.',
-    heading_4: 'This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.',
-      _cellProps: { heading_3: { align: 'top' }},
-  },
-]
-return <CTable align="middle" columns={columns} items={items} />
-```
-
-You can also put all table components together manually as hitherto.
-
-```jsx
-<CTable align="middle" responsive>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col" className="w-25">
-        Heading 1
-      </CTableHeaderCell>
-      <CTableHeaderCell scope="col" className="w-25">
-        Heading 2
-      </CTableHeaderCell>
-      <CTableHeaderCell scope="col" className="w-25">
-        Heading 3
-      </CTableHeaderCell>
-      <CTableHeaderCell scope="col" className="w-25">
-        Heading 4
-      </CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell>
-        This here is some placeholder text, intended to take up quite a bit of vertical space, to
-        demonstrate how the vertical alignment works in the preceding cells.
-      </CTableDataCell>
-    </CTableRow>
-    <CTableRow align="bottom">
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: bottom;</code> from the table row
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: bottom;</code> from the table row
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: bottom;</code> from the table row
-      </CTableDataCell>
-      <CTableDataCell>
-        This here is some placeholder text, intended to take up quite a bit of vertical space, to
-        demonstrate how the vertical alignment works in the preceding cells.
-      </CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell>
-        This cell inherits <code>vertical-align: middle;</code> from the table
-      </CTableDataCell>
-      <CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
-      <CTableDataCell>
-        This here is some placeholder text, intended to take up quite a bit of vertical space, to
-        demonstrate how the vertical alignment works in the preceding cells.
-      </CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-## Nesting
-
-Border styles, active styles, and react table component variants are not inherited by nested tables.
-
-<Example>
-  {<CTable striped>
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Mark</CTableDataCell>
-        <CTableDataCell>Otto</CTableDataCell>
-        <CTableDataCell>@mdo</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell colSpan={4}>
-          <CTable>
-            <CTableHead>
-              <CTableRow>
-                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-                <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-              </CTableRow>
-            </CTableHead>
-            <CTableBody>
-              <CTableRow>
-                <CTableHeaderCell scope="row">A</CTableHeaderCell>
-                <CTableDataCell>First</CTableDataCell>
-                <CTableDataCell>Last</CTableDataCell>
-              </CTableRow>
-              <CTableRow>
-                <CTableHeaderCell scope="row">B</CTableHeaderCell>
-                <CTableDataCell>First</CTableDataCell>
-                <CTableDataCell>Last</CTableDataCell>
-              </CTableRow>
-              <CTableRow>
-                <CTableHeaderCell scope="row">C</CTableHeaderCell>
-                <CTableDataCell>First</CTableDataCell>
-                <CTableDataCell>Last</CTableDataCell>
-              </CTableRow>
-            </CTableBody>
-          </CTable>
-        </CTableHeaderCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-        <CTableDataCell>@twitter</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable striped>
-  <CTableHead>
-    <CTableRow>
-      <CTableHeaderCell scope="col">#</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Class</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-    </CTableRow>
-  </CTableHead>
-  <CTableBody>
-    <CTableRow>
-      <CTableHeaderCell scope="row">1</CTableHeaderCell>
-      <CTableDataCell>Mark</CTableDataCell>
-      <CTableDataCell>Otto</CTableDataCell>
-      <CTableDataCell>@mdo</CTableDataCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell colSpan={4}>
-        <CTable>
-          <CTableHead>
-            <CTableRow>
-              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-              <CTableHeaderCell scope="col">Header</CTableHeaderCell>
-            </CTableRow>
-          </CTableHead>
-          <CTableBody>
-            <CTableRow>
-              <CTableHeaderCell scope="row">A</CTableHeaderCell>
-              <CTableDataCell>First</CTableDataCell>
-              <CTableDataCell>Last</CTableDataCell>
-            </CTableRow>
-            <CTableRow>
-              <CTableHeaderCell scope="row">B</CTableHeaderCell>
-              <CTableDataCell>First</CTableDataCell>
-              <CTableDataCell>Last</CTableDataCell>
-            </CTableRow>
-            <CTableRow>
-              <CTableHeaderCell scope="row">C</CTableHeaderCell>
-              <CTableDataCell>First</CTableDataCell>
-              <CTableDataCell>Last</CTableDataCell>
-            </CTableRow>
-          </CTableBody>
-        </CTable>
-      </CTableHeaderCell>
-    </CTableRow>
-    <CTableRow>
-      <CTableHeaderCell scope="row">3</CTableHeaderCell>
-      <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
-      <CTableDataCell>@twitter</CTableDataCell>
-    </CTableRow>
-  </CTableBody>
-</CTable>
-```
-
-## Anatomy
-
-### Table head
-
-Similar to tables and dark tables, use the modifier prop `color="light"` or `color="dark"` to make `<CTableHead>`s appear light or dark gray.
-
-<Example>
-  <TableExample tableHeadProps={{ color: 'light' }} />
-</Example>
-
-```jsx
-<CTable>
-  <CTableHead color="light">
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  </CTableBody>
-</CTable>
-```
-
-If you generate a table using the new method incorporated in version **4.3.0**, you have to use `tableHeadProps` property to pass properties to the table header component.
-
-```jsx
-const columns = [...]
-const items = [...]
-
-return <CTable columns={columns} items={items} tableHeadProps={{ color: 'light' }} />
-```
-
-<Example>
-  <TableExample tableHeadProps={{ color: 'dark' }} />
-</Example>
-
-```jsx
-<CTable>
-  <CTableHead color="dark">
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  </CTableBody>
-</CTable>
-```
-
-Starting from version **4.3.0** also this way.
-
-```jsx
-const columns = [...]
-const items = [...]
-
-return <CTable columns={columns} items={items} tableHeadProps={{ color: 'dark' }} />
-```
-
-### Table foot
-
-export const TableFoodExample = () => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'class',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const footer = [
-    'Footer',
-    'Footer',
-    'Footer',
-    'Footer',
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-    },
-  ]
-  return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }} />
-}
-
-<Example>
-  <TableFoodExample />
-</Example>
-
-```jsx
-<CTable>
-  <CTableHead color="light">
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  <CTableHead>
-    <CTableRow>
-      <CTableDataCell>Footer</CTableDataCell>
-      <CTableDataCell>Footer</CTableDataCell>
-      <CTableDataCell>Footer</CTableDataCell>
-      <CTableDataCell>Footer</CTableDataCell>
-    </CTableRow>
-  </CTableHead>
-</CTable>
-```
-
-Starting from version **4.3.0** also this way.
-
-```jsx
-const columns = [...]
-const footer = [
-  'Footer',
-  'Footer',
-  'Footer',
-  'Footer',
-]
-const items = [...]
-
-return <CTable columns={columns} footer={footer} items={items} tableHeadProps={{ color: 'light' }}/>
-```
-
-### Captions
-
-A `<CTableCaption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
-
-<Example>
-  <TableExample caption="List of users" />
-</Example>
-
-```jsx
-<CTable>
-  <CTableCaption>List of users</CTableCaption>
-  <CTableHead>
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  </CTableBody>
-</CTable>
-```
-
-Starting from version **4.3.0** also this way.
-
-```jsx
-const columns = [...]
-const items = [...]
-
-return <CTable caption="List of users" columns={columns} items={items} />
-```
-
-You can also put the `<CTableCaption>` on the top of the table with `caption="top"`.
-
-<Example>
-  <TableExample captionTop="List of users" />
-</Example>
-
-```jsx
-<CTable caption="top">
-  <CTableCaption>List of users</CTableCaption>
-  <CTableHead>
-    ...
-  </CTableHead>
-  <CTableBody>
-    ...
-  </CTableBody>
-</CTable>
-```
-
-Since version **4.3.0** also this way.
-
-```jsx
-const columns = [...]
-const items = [...]
-
-return <CTable captionTop="List of users" columns={columns} items={items} />
-```
-
-## Responsive tables
-
-Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a `responsive` property. Or, pick a maximum breakpoint with which to have a responsive table up to by using `responsive="{-sm|-md|-lg|-xl|-xxl}"`.
-
-<Example>
-  {<CTable responsive>
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive>
-  ...
-</CTable>
-```
-
-<Example>
-  {<CTable responsive="sm">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="sm">
-  ...
-</CTable>
-```
-
-<Example>
-  {<CTable responsive="md">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="md">
-  ...
-</CTable>
-```
-
-<Example>
-  {<CTable responsive="lg">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="lg">
-  ...
-</CTable>
-```
-
-<Example>
-  {<CTable responsive="xl">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="xl">
-  ...
-</CTable>
-```
-
-<Example>
-  {<CTable responsive="xxl">
-    <CTableHead>
-      <CTableRow>
-        <CTableHeaderCell scope="col">#</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-        <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
-      </CTableRow>
-    </CTableHead>
-    <CTableBody>
-      <CTableRow>
-        <CTableHeaderCell scope="row">1</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">2</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-      <CTableRow>
-        <CTableHeaderCell scope="row">3</CTableHeaderCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-        <CTableDataCell>Cell</CTableDataCell>
-      </CTableRow>
-    </CTableBody>
-  </CTable>}
-</Example>
-
-```jsx
-<CTable responsive="xxl">
-  ...
-</CTable>
-```
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&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
deleted file mode 100644
index b5c40fa9..00000000
--- a/packages/docs/content/components/table/styling.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/tabs/api.mdx
deleted file mode 100644
index 6618ca60..00000000
--- a/packages/docs/content/components/tabs/api.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: React Tabs Component API
-name: Tabs API
-description: Explore the API reference for the React Tabs component and discover how to effectively utilize its props for customization.
-route: /components/tabs/
----
-
-import CTabAPI from '../../api/CTab.api.mdx'
-import CTabContentAPI from '../../api/CTabContent.api.mdx'
-import CTabListAPI from '../../api/CTabList.api.mdx'
-import CTabPanelAPI from '../../api/CTabPanel.api.mdx'
-import CTabsAPI from '../../api/CTabs.api.mdx'
-
-## CTab
-
-<CTabAPI />
-
-## CTabContent
-
-<CTabContentAPI />
-
-## CTabList
-
-<CTabListAPI />
-
-## CTabPanel
-
-<CTabPanelAPI />
-
-## CTabs
-
-<CTabsAPI />
diff --git a/packages/docs/content/components/tabs/bootstrap.mdx b/packages/docs/content/components/tabs/bootstrap.mdx
deleted file mode 100644
index 520e47c5..00000000
--- a/packages/docs/content/components/tabs/bootstrap.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: React Bootstrap Tabs Component
-name: Tabs with Bootstrap Styling
-description: Learn how to create tabbed navigation interfaces in React using CoreUI's components styled like Bootstrap tabs and pills.
-route: /components/tabs/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Tabs component
-
-Use CoreUI's React tabs styled with Bootstrap to organize content into multiple sections that users can switch between using tabs or pills.
-
-### Tabs style
-
-The default `variant="tabs"` creates traditional Bootstrap-style tabbed navigation.
-
-<ExampleSnippet className="theme-bootstrap" component="TabsExample" componentName="React Bootstrap Tabs" />
-
-### Unstyled
-
-Without the `variant` prop, tabs render with minimal default styles.
-
-<ExampleSnippet className="theme-bootstrap" component="TabsUnstyledExample" componentName="React Bootstrap Tabs" />
-
-### Pills style
-
-Use `variant="pills"` to display tabs styled like Bootstrap pills.
-
-<ExampleSnippet className="theme-bootstrap" component="TabsPillsExample" componentName="React Bootstrap Tabs" />
-
-### Underline style
-
-Use `variant="underline"` to show a bottom border underline beneath the active tab.
-
-<ExampleSnippet className="theme-bootstrap" component="TabsUnderlineExample" componentName="React Bootstrap Tabs" />
-
-### Underline border
-
-Use `variant="underline-border"` to show a full underline across the width of the tab.
-
-<ExampleSnippet className="theme-bootstrap" component="TabsUnderlineBorderExample" componentName="React Bootstrap Tabs" />
-
-### Fill and justify
-
-Use `layout="fill"` or `layout="justified"` to control how tabs stretch to fill the horizontal space.
-
-<ExampleSnippet className="theme-bootstrap" component="TabsUnstyledFillAndJustifyExample" componentName="React Bootstrap Tabs" />
-<ExampleSnippet className="theme-bootstrap" component="TabsUnstyledFillAndJustify2Example" componentName="React Bootstrap Tabs" />
-
-### Controlled tabs
-
-Use `activeItemKey` and `onChange` to fully control the active tab from your component state.
-
-<ExampleSnippet className="theme-bootstrap" component="TabsControlledExample" componentName="React Bootstrap Tabs" />
-
-## Accessibility
-
-CoreUI's Tabs component automatically manages `aria-` and `role="..."` attributes to match Bootstrap and WAI-ARIA accessibility guidelines for tabs.
-
-## API reference
-
-Refer to the API documentation for detailed descriptions of all available props and usage patterns.
-
-- [&lt;CTabs /&gt;](../api/#ctabs)
-- [&lt;CTabList /&gt;](../api/#ctablist)
-- [&lt;CTab /&gt;](../api/#ctab)
-- [&lt;CTabContent /&gt;](../api/#ctabcontent)
-- [&lt;CTabPanel /&gt;](../api/#ctabpanel)
diff --git a/packages/docs/content/components/tabs/examples/TabsControlledExample.jsx b/packages/docs/content/components/tabs/examples/TabsControlledExample.jsx
deleted file mode 100644
index d2837f95..00000000
--- a/packages/docs/content/components/tabs/examples/TabsControlledExample.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { useState } from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsControlledExample = () => {
-  const [activeTab, setActiveTab] = useState('profile')
-
-  return (
-    <CTabs activeItemKey={activeTab} onChange={setActiveTab}>
-      <CTabList variant="tabs">
-        <CTab itemKey="home">Home</CTab>
-        <CTab itemKey="profile">Profile</CTab>
-        <CTab itemKey="contact">Contact</CTab>
-        <CTab disabled itemKey="disabled">
-          Disabled
-        </CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" itemKey="home">
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="profile">
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="contact">
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="disabled">
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsControlledExample.tsx b/packages/docs/content/components/tabs/examples/TabsControlledExample.tsx
deleted file mode 100644
index 83ce6d39..00000000
--- a/packages/docs/content/components/tabs/examples/TabsControlledExample.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { useState } from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsControlledExample = () => {
-  const [activeTab, setActiveTab] = useState<number | string>('profile')
-
-  return (
-    <CTabs activeItemKey={activeTab} onChange={setActiveTab}>
-      <CTabList variant="tabs">
-        <CTab itemKey="home">Home</CTab>
-        <CTab itemKey="profile">Profile</CTab>
-        <CTab itemKey="contact">Contact</CTab>
-        <CTab disabled itemKey="disabled">
-          Disabled
-        </CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" itemKey="home">
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="profile">
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="contact">
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="disabled">
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx
deleted file mode 100644
index 0c7b4a18..00000000
--- a/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsEnclosedExample = () => {
-  return (
-    <CTabs defaultActiveItemKey="profile">
-      <CTabList variant="enclosed">
-        <CTab itemKey="home">Home</CTab>
-        <CTab itemKey="profile">Profile</CTab>
-        <CTab itemKey="contact">Contact</CTab>
-        <CTab disabled itemKey="disabled">
-          Disabled
-        </CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" itemKey="home">
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="profile">
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="contact">
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="disabled">
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx
deleted file mode 100644
index 8fc0d82b..00000000
--- a/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsEnclosedPillsExample = () => {
-  return (
-    <CTabs defaultActiveItemKey="profile">
-      <CTabList variant="enclosed-pills">
-        <CTab itemKey="home">Home</CTab>
-        <CTab itemKey="profile">Profile</CTab>
-        <CTab itemKey="contact">Contact</CTab>
-        <CTab disabled itemKey="disabled">
-          Disabled
-        </CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" itemKey="home">
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="profile">
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="contact">
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="disabled">
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsExample.tsx b/packages/docs/content/components/tabs/examples/TabsExample.tsx
deleted file mode 100644
index 8903d31d..00000000
--- a/packages/docs/content/components/tabs/examples/TabsExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsExample = () => {
-  return (
-    <CTabs defaultActiveItemKey="profile">
-      <CTabList variant="tabs">
-        <CTab itemKey="home">Home</CTab>
-        <CTab itemKey="profile">Profile</CTab>
-        <CTab itemKey="contact">Contact</CTab>
-        <CTab disabled itemKey="disabled">
-          Disabled
-        </CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" itemKey="home">
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="profile">
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="contact">
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="disabled">
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsPillsExample.tsx b/packages/docs/content/components/tabs/examples/TabsPillsExample.tsx
deleted file mode 100644
index 364c707e..00000000
--- a/packages/docs/content/components/tabs/examples/TabsPillsExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsPillsExample = () => {
-  return (
-    <CTabs defaultActiveItemKey={2}>
-      <CTabList variant="pills">
-        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnderlineBorderExample.tsx b/packages/docs/content/components/tabs/examples/TabsUnderlineBorderExample.tsx
deleted file mode 100644
index 1a9e478a..00000000
--- a/packages/docs/content/components/tabs/examples/TabsUnderlineBorderExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsUnderlineBorderExample = () => {
-  return (
-    <CTabs defaultActiveItemKey={2}>
-      <CTabList variant="underline-border">
-        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnderlineExample.tsx b/packages/docs/content/components/tabs/examples/TabsUnderlineExample.tsx
deleted file mode 100644
index 5fe85dca..00000000
--- a/packages/docs/content/components/tabs/examples/TabsUnderlineExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsUnderlineExample = () => {
-  return (
-    <CTabs defaultActiveItemKey={2}>
-      <CTabList variant="underline">
-        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" aria-labelledby="home-tab-pane" itemKey={1}>
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnstyledExample.tsx b/packages/docs/content/components/tabs/examples/TabsUnstyledExample.tsx
deleted file mode 100644
index 3a87be06..00000000
--- a/packages/docs/content/components/tabs/examples/TabsUnstyledExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsUnstyledExample = () => {
-  return (
-    <CTabs defaultActiveItemKey="profile">
-      <CTabList>
-        <CTab itemKey="home">Home</CTab>
-        <CTab itemKey="profile">Profile</CTab>
-        <CTab itemKey="contact">Contact</CTab>
-        <CTab disabled itemKey="disabled">
-          Disabled
-        </CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="p-3" itemKey="home">
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="profile">
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="contact">
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="p-3" itemKey="disabled">
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustify2Example.tsx b/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustify2Example.tsx
deleted file mode 100644
index a4fe7cb0..00000000
--- a/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustify2Example.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsUnstyledFillAndJustify2Example = () => {
-  return (
-    <CTabs defaultActiveItemKey={2}>
-      <CTabList variant="tabs" layout="justified">
-        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustifyExample.tsx b/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustifyExample.tsx
deleted file mode 100644
index 55b05b1c..00000000
--- a/packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustifyExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
-
-export const TabsUnstyledFillAndJustifyExample = () => {
-  return (
-    <CTabs defaultActiveItemKey={2}>
-      <CTabList variant="tabs" layout="fill">
-        <CTab aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-        <CTab aria-controls="profile-tab-pane" itemKey={2}>Profile tab with longer content</CTab>
-        <CTab aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-        <CTab aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-      </CTabList>
-      <CTabContent>
-        <CTabPanel className="py-3" aria-labelledby="home-tab-pane" itemKey={1}>
-          Home tab content
-        </CTabPanel>
-        <CTabPanel className="py-3" aria-labelledby="profile-tab-pane" itemKey={2}>
-          Profile tab content
-        </CTabPanel>
-        <CTabPanel className="py-3" aria-labelledby="contact-tab-pane" itemKey={3}>
-          Contact tab content
-        </CTabPanel>
-        <CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" itemKey={4}>
-          Disabled tab content
-        </CTabPanel>
-      </CTabContent>
-    </CTabs>
-  )
-}
diff --git a/packages/docs/content/components/tabs/index.mdx b/packages/docs/content/components/tabs/index.mdx
deleted file mode 100644
index c493eb5d..00000000
--- a/packages/docs/content/components/tabs/index.mdx
+++ /dev/null
@@ -1,155 +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.
-route: /components/tabs/
-since: 5.1.0
----
-
-## Example
-
-The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface.
-
-<ExampleSnippet component="TabsExample" componentName="React Tabs" />
-
-## Available styles
-
-Change the style of `<CTabs>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
-
-### Unstyled
-
-If you don’t provide the `variant` prop, the component will default to a basic style.
-
-<ExampleSnippet component="TabsUnstyledExample" componentName="React Tabs" />
-
-### Pills
-
-Take that same code, but use `variant="pills"` instead:
-
-<ExampleSnippet component="TabsPillsExample" componentName="React Tabs" />
-
-### Underline
-
-Take that same code, but use `variant="underline"` instead:
-
-<ExampleSnippet component="TabsUnderlineExample" componentName="React Tabs" />
-
-### Underline border
-
-Take that same code, but use `variant="underline-border"` instead:
-
-<ExampleSnippet component="TabsUnderlineBorderExample" componentName="React Tabs" />
-
-### Enclosed
-
-Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
-
-<ExampleSnippet component="TabsEnclosedExample" componentName="React Tabs" />
-
-### Enclosed pills 
-
-Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
-
-<ExampleSnippet component="TabsEnclosedPillsExample" componentName="React Tabs" />
-
-### Fill and justify
-
-Force your `<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
-
-<ExampleSnippet component="TabsUnstyledFillAndJustifyExample" componentName="React Tabs" />
-
-For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width.
-
-<ExampleSnippet component="TabsUnstyledFillAndJustify2Example" componentName="React Tabs" />
-
-Sure! Here's a polished, production-ready **documentation section** (Markdown-style) explaining the **controlled usage** of the `<CTabs>` component, with a clear example:
-
----
-
-## Controlled Tabs
-
-Use the `activeItemKey` prop to control which tab is currently active. In this mode, the parent component is responsible for managing the active state and responding to user interactions via the `onChange` callback.
-
-This is useful when you need to synchronize the tab state with your application logic, such as routing or complex UI state management.
-
-**Key Points**
-
-- `activeItemKey` sets the currently active tab.
-- `onChange` receives the new `itemKey` when a tab is clicked.
-- You must manually update `activeItemKey` in your state based on `onChange`.
-
-> 💡 If you prefer the tabs to manage their own state, use `defaultActiveItemKey` instead.
-
-<ExampleSnippet component="TabsControlledExample" componentName="React Tabs" />
-
-
-## Accessibility
-
-Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
-
-### WAI-ARIA Roles
-
-- The element that serves as the container for the set of tabs has the role `tablist`.
-- Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`.
-- Each element that contains the content panel for a tab has the role `tabpanel`.
-- If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
-- Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
-- The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`.
-- Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
-
-Our React Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below:
-
-```jsx
-<CTabs activeItemKey={2}>
-  <CTabList variant="tabs">
-    <CTab id="home-tab" aria-controls="home-tab-pane" itemKey={1}>Home</CTab>
-    <CTab id="profile-tab" aria-controls="profile-tab-pane" itemKey={2}>Profile</CTab>
-    <CTab id="contact-tab" aria-controls="contact-tab-pane" itemKey={3}>Contact</CTab>
-    <CTab id="disabled-tab" aria-controls="disabled-tab-pane" disabled itemKey={4}>Disabled</CTab>
-  </CTabList>
-  <CTabContent>
-    <CTabPanel id="home-tab-pane" className="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" itemKey={1}>
-      Home tab content
-    </CTabPanel>
-    <CTabPanel id="profile-tab-pane" className="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" itemKey={2}>
-      Profile tab content
-    </CTabPanel>
-    <CTabPanel id="contact-tab-pane" className="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" itemKey={3}>
-      Contact tab content
-    </CTabPanel>
-    <CTabPanel id="disabled-tab-pane" className="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" itemKey={4}>
-      Disabled tab content
-    </CTabPanel>
-  </CTabContent>
-</CTabs>
-```
-
-This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your `<CTab>`'s and `<CTabPanels>`'s.
-
-### Keyboard Interaction
-
-**When focus enters the tab list:**
-
-<kbd>Tab</kbd>: It places focus on the active `tab` element.
-
-**When focus is on a tab element:**
-
-<kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.
-
-<kbd>Left Arrow</kbd>: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.
-
-<kbd>Right Arrow</kbd>: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.
-
-<kbd>Home</kbd>: Moves focus to the first tab.
-
-<kbd>End</kbd>: Moves focus to the last tab.
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CTab /&gt;](./api/#ctab)
-- [&lt;CTabContent /&gt;](./api/#ctabcontent)
-- [&lt;CTabList /&gt;](./api/#ctablist)
-- [&lt;CTabPanel /&gt;](./api/#ctabpanel)
-- [&lt;CTabs /&gt;](./api/#ctabs)
diff --git a/packages/docs/content/components/tabs/styling.mdx b/packages/docs/content/components/tabs/styling.mdx
deleted file mode 100644
index f07a85fc..00000000
--- a/packages/docs/content/components/tabs/styling.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/toast/api.mdx
deleted file mode 100644
index c6543960..00000000
--- a/packages/docs/content/components/toast/api.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: React Toast Component API
-name: Toast API
-description: Explore the API reference for the React Toast component and discover how to effectively utilize its props for customization.
-route: /components/toast/
----
-
-import CToastAPI from '../../api/CToast.api.mdx'
-import CToastHeaderAPI from '../../api/CToastHeader.api.mdx'
-import CToastBodyAPI from '../../api/CToastBody.api.mdx'
-import CToastCloseAPI from '../../api/CToastClose.api.mdx'
-import CToasterAPI from '../../api/CToaster.api.mdx'
-
-## CToast
-
-<CToastAPI />
-
-## CToastHeader
-
-<CToastHeaderAPI />
-
-## CToastBody
-
-<CToastBodyAPI />
-
-## CToastClose
-
-<CToastCloseAPI />
-
-## CToaster
-
-<CToasterAPI />
diff --git a/packages/docs/content/components/toast/bootstrap.mdx b/packages/docs/content/components/toast/bootstrap.mdx
deleted file mode 100644
index e529d4db..00000000
--- a/packages/docs/content/components/toast/bootstrap.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: React Bootstrap Toast Component
-name: Toast with Bootstrap Styling
-description: Learn how to create lightweight, customizable toast notifications using CoreUI’s React components styled with Bootstrap.
-route: /components/toast/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Toast component
-
-Use CoreUI's React toast notifications styled like Bootstrap to provide lightweight, dismissible alerts for your application. Toasts can include headers, body content, icons, or be customized entirely.
-
-### Basic usage
-
-Toasts support headers and body content. Use the `autohide` prop to configure automatic dismissal behavior.
-
-<ExampleSnippet className="theme-bootstrap" component="ToastExample" componentName="React Bootstrap Toast" />
-<ExampleSnippet className="theme-bootstrap" component="ToastLiveExample" componentName="React Bootstrap Toast" />
-
-### Translucent background
-
-Toasts have a slightly translucent background by default, giving a modern Bootstrap feel.
-
-<ExampleSnippet className="theme-bootstrap bg-dark" component="ToastTranslucentExample" componentName="React Bootstrap Toast" />
-
-### Stacked toasts
-
-Wrap multiple toasts in a container to stack them vertically with spacing.
-
-<ExampleSnippet className="theme-bootstrap" component="ToastStackingExample" componentName="React Bootstrap Toast" />
-
-### Custom content
-
-You can customize toasts by omitting headers, replacing close buttons, or applying utility classes and icons.
-
-<ExampleSnippet className="theme-bootstrap" component="ToastCustomContentExample" componentName="React Bootstrap Toast" />
-<ExampleSnippet className="theme-bootstrap" component="ToastCustomContent2Example" componentName="React Bootstrap Toast" />
-
-### Color schemes
-
-Use CoreUI’s utility classes and props like `color`, `text-white`, and `border-0` to create Bootstrap-styled toast variants.
-
-<ExampleSnippet className="theme-bootstrap" component="ToastColorSchemesExample" componentName="React Bootstrap Toast" />
-
-## API reference
-
-Refer to the API documentation for detailed descriptions of all the available props and components used to build Bootstrap-style toasts in React.
-
-- [&lt;CToast /&gt;](../api/#ctoast)
-- [&lt;CToastHeader /&gt;](../api/#ctoastheader)
-- [&lt;CToastBody /&gt;](../api/#ctoastbody)
-- [&lt;CToastClose /&gt;](../api/#ctoastclose)
-- [&lt;CToaster /&gt;](../api/#ctoaster)
diff --git a/packages/docs/content/components/toast/examples/ToastColorSchemesExample.tsx b/packages/docs/content/components/toast/examples/ToastColorSchemesExample.tsx
deleted file mode 100644
index 71f8f537..00000000
--- a/packages/docs/content/components/toast/examples/ToastColorSchemesExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index ce9cfea2..00000000
--- a/packages/docs/content/components/toast/examples/ToastCustomContent2Example.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index 827150e5..00000000
--- a/packages/docs/content/components/toast/examples/ToastCustomContentExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 620fe54d..00000000
--- a/packages/docs/content/components/toast/examples/ToastExample.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index a87fc04b..00000000
--- a/packages/docs/content/components/toast/examples/ToastLiveExample.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-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
deleted file mode 100644
index 5f94a15f..00000000
--- a/packages/docs/content/components/toast/examples/ToastLiveExample.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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
deleted file mode 100644
index 8ee32a9c..00000000
--- a/packages/docs/content/components/toast/examples/ToastStackingExample.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-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
deleted file mode 100644
index 5feea866..00000000
--- a/packages/docs/content/components/toast/examples/ToastTranslucentExample.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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
deleted file mode 100644
index 11e36763..00000000
--- a/packages/docs/content/components/toast/index.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
----
-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
deleted file mode 100644
index 75babf3e..00000000
--- a/packages/docs/content/components/toast/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/tooltip/api.mdx
deleted file mode 100644
index edfa37ac..00000000
--- a/packages/docs/content/components/tooltip/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Tooltip Component API
-name: Tooltip API
-description: Explore the API reference for the React Tooltip component and discover how to effectively utilize its props for customization.
-route: /components/tooltip/
----
-
-import CTooltipAPI from '../../api/CTooltip.api.mdx'
-
-## CTooltip
-
-<CTooltipAPI />
diff --git a/packages/docs/content/components/tooltip/bootstrap.mdx b/packages/docs/content/components/tooltip/bootstrap.mdx
deleted file mode 100644
index a6dc62e0..00000000
--- a/packages/docs/content/components/tooltip/bootstrap.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: React Bootstrap Tooltip Component
-name: Tooltip with Bootstrap Styling
-description: Learn how to add Bootstrap-style tooltips in your React app using CoreUI components styled to match Bootstrap.
-route: /components/tooltip/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Tooltip component
-
-Use CoreUI's React components styled with Bootstrap to show additional contextual information when users hover over elements, similar to native Bootstrap tooltips.
-
-### Tooltips on links
-
-Hover over the links below to see Bootstrap-style tooltips.
-
-<ExampleSnippet className="theme-bootstrap text-body-secondary" component="TooltipOnLinksExample" componentName="React Bootstrap Tooltip" />
-
-### Custom tooltips
-
-You can customize the appearance of tooltips using [CSS variables](./styling/#css-variables). Below is an example with scoped overrides for a unique appearance.
-
-<ExampleSnippet className="theme-bootstrap text-body-secondary" component="TooltipCustomExample" componentName="React Bootstrap Tooltip" />
-
-### Tooltip directions
-
-You can place tooltips on the top, right, bottom, or left of the element. Directions are automatically mirrored in RTL layouts.
-
-<ExampleSnippet className="theme-bootstrap text-body-secondary" component="TooltipDirectionsExample" componentName="React Bootstrap Tooltip" />
-
-### Disabled elements
-
-Because disabled elements do not trigger events, wrap them in a `<span>` or `<div>` with `tabIndex="0"` to enable tooltip behavior.
-
-<ExampleSnippet className="theme-bootstrap text-body-secondary" component="TooltipDisabledElementsExample" componentName="React Bootstrap Tooltip" />
-
-## API reference
-
-Refer to the API documentation for detailed descriptions of all available props and customization options.
-
-- [&lt;CTooltip /&gt;](../api/#ctooltip)
diff --git a/packages/docs/content/components/tooltip/examples/TooltipCustomExample.jsx b/packages/docs/content/components/tooltip/examples/TooltipCustomExample.jsx
deleted file mode 100644
index ad9602e2..00000000
--- a/packages/docs/content/components/tooltip/examples/TooltipCustomExample.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index e4390686..00000000
--- a/packages/docs/content/components/tooltip/examples/TooltipCustomExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index b0c0c923..00000000
--- a/packages/docs/content/components/tooltip/examples/TooltipDirectionsExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index be26b8dd..00000000
--- a/packages/docs/content/components/tooltip/examples/TooltipDisabledElementsExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index bc8ae7a8..00000000
--- a/packages/docs/content/components/tooltip/examples/TooltipOnLinksExample.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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
deleted file mode 100644
index 32a24dd1..00000000
--- a/packages/docs/content/components/tooltip/index.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: React Tooltip Component
-name: Tooltip
-description: Documentation and examples for adding React Tooltips.
-route: /components/tooltip/
-other_frameworks: tooltip
----
-
-## Examples
-
-### Tooltips on links
-
-Hover over the links below to see tooltips:
-
-<ExampleSnippet className="text-body-secondary" component="TooltipOnLinksExample" componentName="React Tooltip" />
-
-### Custom tooltips
-
-You can customize the appearance of tooltips using [CSS variables](./styling/#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.
-
-<ExampleSnippet className="text-body-secondary" component="TooltipCustomExample" componentName="React Tooltip" />
-
-### Directions
-
-Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
-
-<ExampleSnippet className="text-body-secondary" component="TooltipDirectionsExample" componentName="React Tooltip" />
-
-## Usage
-
-### Disabled elements
-
-Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
-
-<ExampleSnippet className="text-body-secondary" component="TooltipDisabledElementsExample" componentName="React Tooltip" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CTooltip /&gt;](./api/#ctooltip)
diff --git a/packages/docs/content/components/tooltip/styling.mdx b/packages/docs/content/components/tooltip/styling.mdx
deleted file mode 100644
index 92798da2..00000000
--- a/packages/docs/content/components/tooltip/styling.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-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/api.mdx b/packages/docs/content/components/widgets/api.mdx
deleted file mode 100644
index 86fe7fa8..00000000
--- a/packages/docs/content/components/widgets/api.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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
deleted file mode 100644
index 0951c346..00000000
--- a/packages/docs/content/components/widgets/examples/WidgetStatsAExample.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-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
deleted file mode 100644
index 49670d71..00000000
--- a/packages/docs/content/components/widgets/examples/WidgetStatsBExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 4c348828..00000000
--- a/packages/docs/content/components/widgets/examples/WidgetStatsCExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index c96072e4..00000000
--- a/packages/docs/content/components/widgets/examples/WidgetStatsDExample.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-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
deleted file mode 100644
index f4b830e7..00000000
--- a/packages/docs/content/components/widgets/examples/WidgetStatsDExample.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-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
deleted file mode 100644
index ed10695c..00000000
--- a/packages/docs/content/components/widgets/examples/WidgetStatsEExample.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-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
deleted file mode 100644
index 8d0eaebd..00000000
--- a/packages/docs/content/components/widgets/examples/WidgetStatsFExample.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-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
deleted file mode 100644
index aacc63c9..00000000
--- a/packages/docs/content/components/widgets/index.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: React Widgets
-name: Widgets
-description: React widget components give information about the app statistics.
-route: /components/widgets/
----
-
-## CWidgetStatsA
-
-<ExampleSnippet component="WidgetStatsAExample" componentName="React Widgets" />
-
-## CWidgetStatsB
-
-<ExampleSnippet component="WidgetStatsBExample" componentName="React Widgets" />
-
-## CWidgetStatsC
-
-<ExampleSnippet component="WidgetStatsCExample" componentName="React Widgets" />
-
-## CWidgetStatsD
-
-<ExampleSnippet component="WidgetStatsDExample" componentName="React Widgets" />
-
-## CWidgetStatsE
-
-<ExampleSnippet component="WidgetStatsEExample" componentName="React Widgets" />
-
-## CWidgetStatsF
-
-<ExampleSnippet component="WidgetStatsFExample" componentName="React Widgets" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CWidgetStatsA /&gt;](./api/#cwidgetstatsa)
-- [&lt;CWidgetStatsB /&gt;](./api/#cwidgetstatsb)
-- [&lt;CWidgetStatsC /&gt;](./api/#cwidgetstatsc)
-- [&lt;CWidgetStatsD /&gt;](./api/#cwidgetstatsd)
-- [&lt;CWidgetStatsE /&gt;](./api/#cwidgetstatse)
-- [&lt;CWidgetStatsF /&gt;](./api/#cwidgetstatsf)
diff --git a/packages/docs/content/customize/css-variables.mdx b/packages/docs/content/customize/css-variables.mdx
deleted file mode 100644
index d1495853..00000000
--- a/packages/docs/content/customize/css-variables.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: CSS variables
-name: CSS variables
-description: Use CoreUI's CSS custom properties for fast and forward-looking design and development.
-menu: Customize
-route: /templates/css-variables
----
-
-CoreUI includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.
-
-**All our custom properties are prefixed with `cui-`** to avoid conflicts with third party CSS.
-
-## Root variables
-
-Here are the variables we include (note that the `:root` is required) that can be accessed anywhere CoreUI's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
-
-```css
-:root {
-  --cui-blue: #0d6efd;
-  --cui-indigo: #6610f2;
-  --cui-purple: #6f42c1;
-  --cui-pink: #d63384;
-  --cui-red: #dc3545;
-  --cui-orange: #fd7e14;
-  --cui-yellow: #ffc107;
-  --cui-green: #198754;
-  --cui-teal: #20c997;
-  --cui-cyan: #0dcaf0;
-  --cui-black: #000015;
-  --cui-white: #fff;
-  --cui-gray: #8a93a2;
-  --cui-gray-dark: #636f83;
-  --cui-gray-100: #ebedef;
-  --cui-gray-200: #d8dbe0;
-  --cui-gray-300: #c4c9d0;
-  --cui-gray-400: #b1b7c1;
-  --cui-gray-500: #9da5b1;
-  --cui-gray-600: #8a93a2;
-  --cui-gray-700: #768192;
-  --cui-gray-800: #636f83;
-  --cui-gray-900: #4f5d73;
-  --cui-primary: #321fdb;
-  --cui-secondary: #9da5b1;
-  --cui-success: #2eb85c;
-  --cui-info: #39f;
-  --cui-warning: #f9b115;
-  --cui-danger: #e55353;
-  --cui-light: #ebedef;
-  --cui-dark: #4f5d73;
-  --cui-primary-rgb: 50, 31, 219;
-  --cui-secondary-rgb: 157, 165, 177;
-  --cui-success-rgb: 46, 184, 92;
-  --cui-info-rgb: 51, 153, 255;
-  --cui-warning-rgb: 249, 177, 21;
-  --cui-danger-rgb: 229, 83, 83;
-  --cui-light-rgb: 235, 237, 239;
-  --cui-dark-rgb: 79, 93, 115;
-  --cui-white-rgb: 255, 255, 255;
-  --cui-black-rgb: 0, 0, 21;
-  --cui-body-color-rgb: 44, 56, 74;
-  --cui-body-bg-rgb: 255, 255, 255;
-  --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --cui-body-font-family: var(--cui-font-sans-serif);
-  --cui-body-font-size: 1rem;
-  --cui-body-font-weight: 400;
-  --cui-body-line-height: 1.5;
-  --cui-body-color: rgba(44, 56, 74, 0.95);
-  --cui-body-bg: #fff;
-  --cui-border-width: 1px;
-  --cui-border-style: solid;
-  --cui-border-color: #d8dbe0;
-  --cui-border-color-translucent: rgba(0, 0, 21, 0.175);
-  --cui-border-radius: 0.375rem;
-  --cui-border-radius-sm: 0.25rem;
-  --cui-border-radius-lg: 0.5rem;
-  --cui-border-radius-xl: 1rem;
-  --cui-border-radius-2xl: 2rem;
-  --cui-border-radius-pill: 50rem;
-  --cui-heading-color: unset;
-  --cui-link-color: #321fdb;
-  --cui-link-hover-color: #2819af;
-  --cui-code-color: #d63384;
-  --cui-highlight-bg: #fff3cd;
-}
-```
-
-## Component variables
-
-CoreUI is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of CoreUI components after Sass compilation.
-
-Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
-
-## Prefix
-
-Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
-
-Customize the prefix via the `$prefix` Sass variable. By default, it's set to `cui-` (note the trailing dash).
-
-## Examples
-
-CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
-
-```css
-body {
-  font: 1rem/1.5 var(--cui-font-sans-serif);
-}
-a {
-  color: var(--cui-blue);
-}
-```
-
-## Grid breakpoints
-
-While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.
diff --git a/packages/docs/content/customize/options.mdx b/packages/docs/content/customize/options.mdx
deleted file mode 100644
index 1e54ce92..00000000
--- a/packages/docs/content/customize/options.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: Options
-name: Options
-description: Quickly customize CoreUI for React with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
-menu: Customize
-route: /customize/options
----
-
-Customize CoreUI for React with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed.
-
-You can find and customize these variables for key global options in CoreUI's `@coreui/coreui/scss/_variables.scss` file.
-
-| Variable                       | Values                             | Description                                                                            |
-| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
-| `$spacer`                      | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](https://coreui.io/docs/utilities/spacing). |
-| `$enable-rounded`              | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components. |
-| `$enable-shadows`              | `true` or `false` (default)        | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
-| `$enable-gradients`            | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components. |
-| `$enable-transitions`          | `true` (default) or `false`        | Enables predefined `transition`s on various components. |
-| `$enable-reduced-motion`       | `true` (default) or `false`        | Enables the [`prefers-reduced-motion` media query](https://coreui.io/docs/getting-started/accessibility#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
-| `$enable-grid-classes`         | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
-| `$enable-container-classes`    | `true` (default) or `false`        | Enables the generation of CSS classes for layout containers. (New in v4.2.0) |
-| `$enable-caret`                | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
-| `$enable-button-pointers`      | `true` (default) or `false`        | Add "hand" cursor to non-disabled button elements. |
-| `$enable-rfs`                  | `true` (default) or `false`        | Globally enables [RFS](https://coreui.io/docs/getting-started/rfs). |
-| `$enable-validation-icons`     | `true` (default) or `false`        | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
-| `$enable-negative-margins`     | `true` or `false` (default)        | Enables the generation of [negative margin utilities](https://coreui.io/docs/utilities/spacing#negative-margin). |
-| `$enable-deprecation-messages` | `true` (default) or `false`        | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
-| `$enable-important-utilities`  | `true` (default) or `false`        | Enables the `!important` suffix in utility classes. |
-| `$enable-smooth-scroll`        | `true` (default) or `false`        | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query](https://coreui.io/docs/getting-started/accessibility#reduced-motion) |
-| `$enable-ltr`                  | `false` or `false` (default)       | Enables Left-to-Right |
-| `$enable-rtl`                  | `true` (default) or `false`        | Enables Right-to-Left |
-
diff --git a/packages/docs/content/customize/sass.mdx b/packages/docs/content/customize/sass.mdx
deleted file mode 100644
index be8f4596..00000000
--- a/packages/docs/content/customize/sass.mdx
+++ /dev/null
@@ -1,394 +0,0 @@
----
-title: Sass
-name: Sass
-description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
-menu: Customize
-route: /customize/sass
----
-
-Utilize our source Sass files to take advantage of variables, maps, mixins, and more.
-
-## File structure
-
-Whenever possible, avoid modifying CoreUI's core files. For Sass, that means creating your own stylesheet that imports CoreUI for Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
-
-```text
-your-project/
-├── scss
-│   └── custom.scss
-└── node_modules/
-    └── @coreui/coreui
-        ├── js
-        └── scss
-```
-
-If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping CoreUI's source files separate from your own.
-
-```text
-your-project/
-├── scss
-│   └── custom.scss
-└── @coreui/coreui/
-    ├── js
-    └── scss
-```
-
-## Importing
-
-In your `custom.scss`, you'll import CoreUI's source Sass files. You have two options: include all of CoreUI, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
-
-<Callout color="info" type="dartSassModules" />
-
-```scss
-@use "sass:map";
-@use "@coreui/coreui/scss/variables" as *;
-
-$custom-colors: (
-  "custom-color": #900
-);
-
-$theme-colors: map.merge($theme-colors, $custom-colors);
-
-@use "@coreui/coreui/scss/coreui";
-```
-
-<Callout color="warning" type="dartSassDeprecations" />
-
-```scss
-// Custom.scss
-// Option A: Include all of CoreUI
-
-@import "../node_modules/@coreui/coreui/scss/coreui";
-
-// Then add additional custom code here
-```
-
-```scss
-// Custom.scss
-// Option B: Include parts of CoreUI
-
-// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
-@import "../node_modules/@coreui/coreui/scss/functions";
-
-// 2. Include any default variable overrides here
-
-// 3. Include remainder of required CoreUI stylesheets
-@import "../node_modules/@coreui/coreui/scss/variables";
-
-// 4. Include any default map overrides here
-
-// 5. Include remainder of required parts
-@import "../node_modules/@coreui/coreui/scss/maps";
-@import "../node_modules/@coreui/coreui/scss/mixins";
-@import "../node_modules/@coreui/coreui/scss/root";
-
-// 6. Optionally include any other parts as needed
-@import "../node_modules/@coreui/coreui/scss/utilities";
-@import "../node_modules/@coreui/coreui/scss/reboot";
-@import "../node_modules/@coreui/coreui/scss/type";
-@import "../node_modules/@coreui/coreui/scss/images";
-@import "../node_modules/@coreui/coreui/scss/containers";
-@import "../node_modules/@coreui/coreui/scss/grid";
-@import "../node_modules/@coreui/coreui/scss/helpers";
-
-// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
-@import "../node_modules/@coreui/coreui/scss/utilities/api";
-
-// 8. Add additional custom code here
-```
-
-With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of CoreUI for Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `coreui.scss` file as your starting point.
-
-## Variable defaults
-
-Every Sass variable in CoreUI for Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying CoreUI's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
-
-You will find the complete list of CoreUI's variables in `@coreui/coreui/scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration.
-
-Variable overrides must come after our functions are imported, but before the rest of the imports.
-
-Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling CoreUI for Bootstrap via npm:
-
-<Callout color="info" type="dartSassModules" />
-
-```scss
-@use "@coreui/coreui/scss/coreui" with (
-  $body-bg: #000,
-  $body-color: #111
-)
-```
-
-<Callout color="warning" type="dartSassDeprecations" />
-
-```scss
-// Required
-@import "../node_modules/@coreui/coreui/scss/functions";
-
-// Default variable overrides
-$body-bg: #000;
-$body-color: #111;
-
-// Required
-@import "../node_modules/@coreui/coreui/scss/variables";
-@import "../node_modules/@coreui/coreui/scss/maps";
-@import "../node_modules/@coreui/coreui/scss/mixins";
-@import "../node_modules/@coreui/coreui/scss/root";
-
-// Optional CoreUI components here
-@import "../node_modules/@coreui/coreui/scss/reboot";
-@import "../node_modules/@coreui/coreui/scss/type";
-// etc
-```
-
-Repeat as necessary for any variable in CoreUI, including the global options below.
-
-## Maps and loops
-
-CoreUI for Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended.
-
-Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult.
-
-### Modify map
-
-All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
-
-```scss
-$primary: #0074d9;
-$danger: #ff4136;
-```
-
-Later on, these variables are set in CoreUI's `$theme-colors` map:
-
-```scss
-$theme-colors: (
-  "primary": $primary,
-  "danger": $danger
-);
-```
-
-### Add to map
-
-Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.
-
-<Callout color="info" type="dartSassModules" />
-
-```scss
-@use "sass:map";
-@use "@coreui/coreui/scss/variables" as *;
-
-$custom-colors: (
-  "custom-color": #900
-);
-
-$theme-colors: map.merge($theme-colors, $custom-colors);
-
-@use "@coreui/coreui/scss/coreui";
-```
-
-<Callout color="warning" type="dartSassDeprecations" />
-
-```scss
-// Create your own map
-$custom-colors: (
-  "custom-color": #900
-);
-
-// Merge the maps
-$theme-colors: map-merge($theme-colors, $custom-colors);
-```
-
-### Remove from map
-
-To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options:
-
-<Callout color="info" type="dartSassModules" />
-
-```scss
-@use "sass:map";
-@use "@coreui/coreui/scss/variables" as *;
-@use "@coreui/coreui/scss/maps" as *;
-
-$theme-colors: map-remove($theme-colors, "info", "light", "dark");
-$theme-colors-border-subtle: map.remove($theme-colors-border-subtle, "info", "light", "dark");
-
-@use "@coreui/coreui/scss/coreui";
-```
-
-<Callout color="warning" type="dartSassDeprecations" />
-
-```scss
-// Required
-@import "../node_modules/@coreui/coreui/scss/functions";
-@import "../node_modules/@coreui/coreui/scss/variables";
-@import "../node_modules/@coreui/coreui/scss/maps";
-@import "../node_modules/@coreui/coreui/scss/mixins";
-@import "../node_modules/@coreui/coreui/scss/root";
-
-$theme-colors: map-remove($theme-colors, "info", "light", "dark");
-
-// Optional
-@import "../node_modules/@coreui/coreui/scss/reboot";
-@import "../node_modules/@coreui/coreui/scss/type";
-// etc
-```
-
-## Required keys
-
-CoreUI for Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used.
-
-For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values.
-
-## Functions
-
-### Colors
-
-Next to the [Sass maps](https://coreui.io/docs/customize/color#color-sass-maps") we have, theme colors can also be used as standalone variables, like `$primary`.
-
-```scss
-.custom-element {
-  color: $gray-100;
-  background-color: $dark;
-}
-```
-
-You can lighten or darken colors with CoreUI's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
-
-```scss
-// Tint a color: mix a color with white
-@function tint-color($color, $weight) {
-  @return mix(white, $color, $weight);
-}
-
-// Shade a color: mix a color with black
-@function shade-color($color, $weight) {
-  @return mix(black, $color, $weight);
-}
-
-// Shade the color if the weight is positive, else tint it
-@function shift-color($color, $weight) {
-  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
-}
-```
-
-In practice, you'd call the function and pass in the color and weight parameters.
-
-```scss
-@use "@coreui/coreui/scss/functions/color" as *;
-
-.custom-element {
-  color: tint-color($primary, 10%);
-}
-
-.custom-element-2 {
-  color: shade-color($danger, 30%);
-}
-```
-
-### Color contrast
-
-In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions.
-
-An additional function we include in CoreUI for Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` colorspace to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
-
-For example, to generate color swatches from our `$theme-colors` map:
-
-```scss
-@use "@coreui/coreui/scss/functions/color-contrast" as *;
-
-@each $color, $value in $theme-colors {
-  .swatch-#{$color} {
-    color: color-contrast($value);
-  }
-}
-```
-
-It can also be used for one-off contrast needs:
-
-```scss
-@use "@coreui/coreui/scss/functions/color-contrast" as *;
-
-.custom-element {
-  color: color-contrast(#000); // returns `color: #fff`
-}
-```
-
-You can also specify a base color with our color map functions:
-
-```scss
-@use "@coreui/coreui/scss/functions/color-contrast" as *;
-
-.custom-element {
-  color: color-contrast($dark); // returns `color: #fff`
-}
-```
-
-### Escape SVG
-
-We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. When using the `escape-svg` function, data URIs must be quoted.
-
-### Add and Subtract functions
-
-We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct.
-
-Example where the calc is valid:
-
-```scss
-@use "@coreui/coreui/scss/functions/math" as *;
-
-$border-radius: .25rem;
-$border-width: 1px;
-
-.element {
-  // Output calc(.25rem - 1px) is valid
-  border-radius: calc($border-radius - $border-width);
-}
-
-.element {
-  // Output the same calc(.25rem - 1px) as above
-  border-radius: subtract($border-radius, $border-width);
-}
-```
-
-Example where the calc is invalid:
-
-```scss
-@use "@coreui/coreui/scss/functions/math" as *;
-
-$border-radius: .25rem;
-$border-width: 0;
-
-.element {
-  // Output calc(.25rem - 0) is invalid
-  border-radius: calc($border-radius - $border-width);
-}
-
-.element {
-  // Output .25rem
-  border-radius: subtract($border-radius, $border-width);
-}
-```
-
-## Mixins
-
-Our `@coreui/coreui/scss/mixins/` directory has a ton of mixins that power parts of CoreUI and can also be used across your own project.
-
-### Color schemes
-
-A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
-
-
-<ScssDocs file="mixins/_color-scheme.scss" capture="mixin-color-scheme" />
-
-```scss
-@use "@coreui/coreui/scss/mixins/color-scheme" as *;
-
-.custom-element {
-  @include color-scheme(dark) {
-    // Insert dark mode styles here
-  }
-
-  @include color-scheme(custom-named-scheme) {
-    // Insert custom color scheme styles here
-  }
-}
-```
diff --git a/packages/docs/content/forms/checkbox/api.mdx b/packages/docs/content/forms/checkbox/api.mdx
deleted file mode 100644
index aa2717d5..00000000
--- a/packages/docs/content/forms/checkbox/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Form Checkbox Component API
-name: Form Checkbox API
-description: Explore the API reference for the React Form Checkbox component and discover how to effectively utilize its props for customization.
-route: /forms/checkbox/
----
-
-import CFormCheckAPI from '../../api/CFormCheck.api.mdx'
-
-## CFormCheck
-
-<CFormCheckAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/checkbox/bootstrap.mdx b/packages/docs/content/forms/checkbox/bootstrap.mdx
deleted file mode 100644
index 185c6753..00000000
--- a/packages/docs/content/forms/checkbox/bootstrap.mdx
+++ /dev/null
@@ -1,69 +0,0 @@
----
-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/examples/CheckboxDisabledExample.tsx b/packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx
deleted file mode 100644
index 4c987a09..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index db1592f2..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index f0010d6f..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index 31aeaef8..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 687e89a3..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 086a1dd5..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index dbe8fd64..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 47d3f3a8..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 0a9c5610..00000000
--- a/packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index bf330f43..00000000
--- a/packages/docs/content/forms/checkbox/index.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: React Bootstrap Checkbox Component
-name: Checkbox with Bootstrap Styling
-description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
-route: /forms/checkbox/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Checkbox component
-
-Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.
-
-### Basic example
-
-Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxExample" componentName="React Bootstrap Checkbox" />
-
-### Indeterminate state
-
-Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxIndeterminateExample" componentName="React Bootstrap Checkbox" />
-
-### Disabled state
-
-Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxDisabledExample" componentName="React Bootstrap Checkbox" />
-
-### Stacked layout (default)
-
-By default, multiple checkboxes stack vertically and are spaced evenly.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxStackedExample" componentName="React Bootstrap Checkbox" />
-
-### Inline checkboxes
-
-Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxInlineExample" componentName="React Bootstrap Checkbox" />
-
-### Reversed checkboxes
-
-Use the `reverse` prop to position the checkbox on the opposite side of the label.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxReverseExample" componentName="React Bootstrap Checkbox" />
-
-### Without labels
-
-If omitting a label, remember to include `aria-label` for accessibility compliance.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />
-
-## Checkbox toggle buttons
-
-Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />
-
-### Outlined toggle styles
-
-Use outlined button variants for a lighter, bordered appearance.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />
-
-## API reference
-
-Refer to the API documentation for detailed descriptions of all the available props and configuration options.
-
-- [&lt;CFormCheck /&gt;](./api/#cformcheck)
diff --git a/packages/docs/content/forms/checkbox/styling.mdx b/packages/docs/content/forms/checkbox/styling.mdx
deleted file mode 100644
index f50492d7..00000000
--- a/packages/docs/content/forms/checkbox/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: React Checkbox Component Styling
-name: Checkbox Styling
-description: Learn how to customize the React Checkbox component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
-route: /forms/checkbox/
----
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-check-variables" />
diff --git a/packages/docs/content/forms/checks-radios.mdx b/packages/docs/content/forms/checks-radios.mdx
deleted file mode 100644
index bb451d1c..00000000
--- a/packages/docs/content/forms/checks-radios.mdx
+++ /dev/null
@@ -1,190 +0,0 @@
----
-title: React Checkbox & Radio Components
-name: Checks & radios
-description: Create consistent cross-browser and cross-device checkboxes and radios with our React checkbox, radio, and switch components.
-menu: Forms
-route: /forms/checks-radios
----
-
-import { useEffect, useRef } from 'react'
-import {
-  CButton,
-  CForm,
-  CFormCheck,
-  CFormLabel,
-  CFormSwitch,
-  CFormText,
-} from '@coreui/react'
-
-## Approach
-
-Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
-
-## Checks
-
-```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/>
-```
-
-## 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/>
-```
-
-## Switches
-
-A switch has the markup of a custom checkbox but uses the `switch` boolean properly to render a toggle switch. Switches also support the `disabled` attribute.
-
-```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/>
-```
-
-### Sizes
-
-```jsx preview
-<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
-<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
-<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
-```
-
-## Default (stacked)
-
-By default, any number of checkboxes and radios 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/>
-```
-
-```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 checkboxes or radios 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/>
-```
-
-```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/>
-```
-
-## Without labels
-
-Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
-
-```jsx preview
-<div>
-  <CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>
-</div>
-<div>
-  <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>
-</div>
-```
-
-## 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.
-
-### Checkbox toggle buttons
-
-```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
-/>
-```
-
-### Radio toggle buttons
-
-```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
-<div>
-  <CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
-</div>
-<div>
-  <CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
-</div>
-<div>
-  <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"/>
-</div>
-```
-
-## API
-
-### CFormCheck
-
-`markdown:CFormCheck.api.mdx`
-
-### CFormSwitch
-
-`markdown:CFormSwitch.api.mdx`
diff --git a/packages/docs/content/forms/floating-labels/api.mdx b/packages/docs/content/forms/floating-labels/api.mdx
deleted file mode 100644
index 23ae298c..00000000
--- a/packages/docs/content/forms/floating-labels/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Form Floating Labels Component API
-name: Form Floating Labels API
-description: Explore the API reference for the React Form Floating Labels component and discover how to effectively utilize its props for customization.
-route: /forms/floating-labels/
----
-
-import CFormFloatingAPI from '../../api/CFormFloating.api.mdx'
-
-## CFormFloating
-
-<CFormFloatingAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/floating-labels/bootstrap.mdx b/packages/docs/content/forms/floating-labels/bootstrap.mdx
deleted file mode 100644
index a3da110a..00000000
--- a/packages/docs/content/forms/floating-labels/bootstrap.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: React Bootstrap Floating Labels Component
-name: Floating Labels with Bootstrap Styling
-description: Learn how to create clean and accessible floating form labels in React using CoreUI components styled with Bootstrap.
-route: /forms/floating-labels/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Floating Labels component
-
-Use CoreUI’s `<CFormFloating>`, `<CFormInput>`, `<CFormSelect>`, and `<CFormTextarea>` components with Bootstrap styling to create floating labels in React. Floating labels automatically animate above form fields when content is entered or focused.
-
-### Basic example
-
-Enable floating labels by setting the `floatingLabel` prop on supported form controls. A `placeholder` is required as the floating label effect relies on the `:placeholder-shown` pseudo-class.
-
-<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsExample" componentName="React Bootstrap Floating Labels" />
-
-### Using `<CFormFloating>`
-
-You can also wrap a `<CFormInput>` and `<CFormLabel>` pair inside a `<CFormFloating>` container. Make sure the input comes first to enable proper sibling selector behavior.
-
-```jsx
-<CFormFloating className="mb-3">
-  <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
-  <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
-</CFormFloating>
-<CFormFloating>
-  <CFormInput type="password" id="floatingPassword" placeholder="Password" />
-  <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
-</CFormFloating>
-```
-
-### Pre-filled values
-
-Floating labels adjust automatically when inputs have a preset value.
-
-<ExampleSnippet className="theme-bootstrap" component="FloatingLabels2Example" componentName="React Bootstrap Floating Labels" />
-
-### Validation support
-
-Floating labels integrate seamlessly with form validation styles.
-
-<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsValidationExample" componentName="React Bootstrap Floating Labels" />
-
-## Textareas
-
-Textareas styled with floating labels maintain the same height as inputs by default.
-
-<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsTextareaExample" componentName="React Bootstrap Floating Labels" />
-
-To change the height, set an explicit `height` via inline styles or custom CSS rather than using the `rows` attribute.
-
-<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsTextarea2Example" componentName="React Bootstrap Floating Labels" />
-
-## Select elements
-
-Floating labels also support `<CFormSelect>`. The label always appears in the floated state. **Note:** This is not compatible with `size` or `multiple`.
-
-<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsSelectExample" componentName="React Bootstrap Floating Labels" />
-
-## Grid layout support
-
-Use floating labels within the CoreUI Bootstrap grid system by nesting inputs inside column classes.
-
-<ExampleSnippet className="theme-bootstrap" component="FloatingLabelsLayoutExample" componentName="React Bootstrap Floating Labels" />
-
-## API reference
-
-Refer to the API documentation for detailed descriptions of all available props and configuration options.
-
-- [&lt;CFormFloating /&gt;](../api/#cformfloating)
diff --git a/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx b/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx
deleted file mode 100644
index 6f2b6ce2..00000000
--- a/packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 3c6a9533..00000000
--- a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index b7baba01..00000000
--- a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index a6286b7b..00000000
--- a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 3fd18152..00000000
--- a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 799dd31a..00000000
--- a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index bead6d13..00000000
--- a/packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index 9193c760..00000000
--- a/packages/docs/content/forms/floating-labels/index.mdx
+++ /dev/null
@@ -1,63 +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.
-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
deleted file mode 100644
index 4446fe02..00000000
--- a/packages/docs/content/forms/floating-labels/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: React Floating Labels Component Styling
-name: Floating Labels Styling
-description: Learn how to customize the React Floating Labels component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
-route: /forms/floating-labels/
----
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-floating-variables" />
diff --git a/packages/docs/content/forms/form-control.mdx b/packages/docs/content/forms/form-control.mdx
deleted file mode 100644
index ff3b6500..00000000
--- a/packages/docs/content/forms/form-control.mdx
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: React Form Controls
-name: Form control
-description: React input and textarea components. Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.
-menu: Forms
-route: /forms/form-control
----
-
-import { 
-  CButton,
-  CForm,
-  CFormInput,
-  CFormLabel,
-  CFormTextarea,
-  CCol,
-  CRow
-} from '@coreui/react'
-
-## Example
-
-```jsx preview
-<CForm>
-  <div className="mb-3">
-    <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
-    <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com"/>
-  </div>
-  <div className="mb-3">
-    <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
-    <CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
-  </div>
-</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
-
-```jsx preview
-<div className="mb-3">
-  <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
-  <CFormInput type="file" id="formFile"/>
-</div>
-<div className="mb-3">
-  <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
-  <CFormInput type="file" id="formFileMultiple" multiple/>
-</div>
-<div className="mb-3">
-  <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
-  <CFormInput type="file" id="formFileDisabled" disabled/>
-</div>
-<div className="mb-3">
-  <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
-  <CFormInput type="file" size="sm" id="formFileSm"/>
-</div>
-<div>
-  <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
-  <CFormInput type="file" size="lg" id="formFileLg"/>
-</div>
-```
-
-## Color
-
-```jsx preview
-<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
-<CFormInput type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" />
-```
-
-## API
-
-### CFormInput
-
-`markdown:CFormInput.api.mdx`
-
-### CFormTextarea
-
-`markdown:CFormTextarea.api.mdx`
diff --git a/packages/docs/content/forms/input-group/api.mdx b/packages/docs/content/forms/input-group/api.mdx
deleted file mode 100644
index 64cc01bb..00000000
--- a/packages/docs/content/forms/input-group/api.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: React Form Input Group Component API
-name: Form Input Group API
-description: Explore the API reference for the React Form Input Group component and discover how to effectively utilize its props for customization.
-route: /forms/input-group/
----
-
-import CInputGroupAPI from '../../api/CInputGroup.api.mdx'
-import CInputGroupTextAPI from '../../api/CInputGroupText.api.mdx'
-
-## CInputGroup
-
-<CInputGroupAPI />
-
-## CInputGroupText
-
-<CInputGroupTextAPI />
diff --git a/packages/docs/content/forms/input-group/bootstrap.mdx b/packages/docs/content/forms/input-group/bootstrap.mdx
deleted file mode 100644
index ef626c5f..00000000
--- a/packages/docs/content/forms/input-group/bootstrap.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: React Bootstrap Input Group Component
-name: Input Group with Bootstrap Styling
-description: Learn how to extend CoreUI’s React input fields with Bootstrap-styled input groups—add text, buttons, selects, or custom file inputs seamlessly.
-route: /forms/input-group/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Input Group component
-
-Use CoreUI’s `<CInputGroup>` components styled with Bootstrap to enhance form inputs by prepending or appending text, buttons, selects, and more—perfect for building rich form UIs.
-
-### Basic usage
-
-Add text or buttons on either side of the input using `<CInputGroupText>` or `<CButton>`.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupExample" componentName="React Bootstrap Form Input Group" />
-
-## Wrapping content
-
-Input groups use `flex-wrap` by default, which allows wrapping when needed—especially useful for validation messages or long inputs.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupWrappingExample" componentName="React Bootstrap Form Input Group" />
-
-To prevent wrapping, add `.flex-nowrap`.
-
-## Input group sizing
-
-Change size by applying `size="sm"` or `size="lg"` to `<CInputGroup>`. All inner elements will automatically adjust.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupSizingExample" componentName="React Bootstrap Form Input Group" />
-
-> 📌 Note: Do not apply size classes to individual input elements inside the group.
-
-## Checkboxes and radio buttons
-
-Include checkboxes or radios inside your input group to align them with text fields or buttons.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupCheckboxesAndRadiosExample" componentName="React Bootstrap Form Input Group" />
-
-## Multiple inputs
-
-You can group multiple inputs side by side using a single `<CInputGroup>`. Useful for username + domain, ranges, etc.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupMultipleInputsExample" componentName="React Bootstrap Form Input Group" />
-
-## Multiple addons
-
-You can add multiple `<CInputGroupText>` elements before or after the input, or combine them with checkboxes or buttons.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupMultipleAddonsExample" componentName="React Bootstrap Form Input Group" />
-
-## Input group with buttons
-
-Add buttons inside the input group to combine text entry with actions.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupButtonAddonsExample" componentName="React Bootstrap Form Input Group" />
-
-## Buttons with dropdowns
-
-Group dropdown buttons together with your inputs using `<CDropdown>` components.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupButtonsWithDropdownsExample" componentName="React Bootstrap Form Input Group" />
-
-## Segmented buttons
-
-You can also combine a primary button with a split dropdown inside the input group.
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupSegmentedButtonsExample" componentName="React Bootstrap Form Input Group" />
-
-## Custom form inputs
-
-CoreUI supports enhanced input groups with custom selects and file inputs. Default browser styles aren’t supported in this layout.
-
-### Select
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupCustomSelectExample" componentName="React Bootstrap Form Input Group" />
-
-### File upload
-
-<ExampleSnippet className="theme-bootstrap" component="InputGroupCustomFileInputExample" componentName="React Bootstrap Form Input Group" />
-
-## API reference
-
-Check out the API documentation for full details on available props.
-
-- [&lt;CInputGroup /&gt;](../api/#cinputgroup)
-- [&lt;CInputGroupText /&gt;](../api/#cinputgrouptext)
diff --git a/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx b/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx
deleted file mode 100644
index a2ad05ee..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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
deleted file mode 100644
index e31b638c..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-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
deleted file mode 100644
index 7c211fbd..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 00a51012..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-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
deleted file mode 100644
index 9dcc9d9c..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-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
deleted file mode 100644
index 6f66ac1c..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupExample.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-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
deleted file mode 100644
index e16114be..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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
deleted file mode 100644
index 3b5d6da1..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 911fc5b0..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-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
deleted file mode 100644
index 8e8155f2..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index aaf8fb77..00000000
--- a/packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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
deleted file mode 100644
index c75bbeee..00000000
--- a/packages/docs/content/forms/input-group/index.mdx
+++ /dev/null
@@ -1,76 +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.
-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
deleted file mode 100644
index 3d5ee0b1..00000000
--- a/packages/docs/content/forms/input-group/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-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
deleted file mode 100644
index 737e3ec2..00000000
--- a/packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index c3c2e8ec..00000000
--- a/packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 473ef8fc..00000000
--- a/packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-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/index.mdx b/packages/docs/content/forms/input-mask/index.mdx
deleted file mode 100644
index af0a900a..00000000
--- a/packages/docs/content/forms/input-mask/index.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-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.
-route: /forms/input-mask/
----
-
-## Usage
-
-While CoreUI for React does not currently include a 'mask' feature, it can be enhanced by leveraging existing libraries like `react-imask` to extend the functionality of our components.
-
-To enable the extension of the `<CFormInput />` component, please ensure that you have installed `react-imask` first.
-
-```bash tab={"label":"Npm"}
-npm install react-imask
-```
-
-```bash tab={"label":"Yarn"}
-yarn add react-imask
-```
-
-Once you have installed react-imask, you can proceed to create a custom component with a mask.
-
-```jsx
-import { IMaskMixin } from 'react-imask'
-```
-
-```jsx
-const CFormInputWithMask = IMaskMixin(({ inputRef, ...props }) => (
-  <CFormInput
-    {...props}
-    ref={inputRef} // bind internal input
-  />
-))
-```
-
-Here is an example of a date mask for reference.
-
-<ExampleSnippet component="InputMaskExample" componentName="React Form Input Mask" />
-
-## Example masks
-
-Please take a moment to review some example masks you can use for reference. These examples serve as helpful templates for implementing input masks and can assist you in effectively controlling data entry formats.
-
-### Phone
-
-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.
-
-<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.
-
-<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/api.mdx b/packages/docs/content/forms/input/api.mdx
deleted file mode 100644
index e8641ef8..00000000
--- a/packages/docs/content/forms/input/api.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: React Form Input Component API
-name: Form Input API
-description: Explore the API reference for the React Form Input component and discover how to effectively utilize its props for customization.
-route: /forms/input/
----
-
-import CFormInputAPI from '../../api/CFormInput.api.mdx'
-import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
-import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
-import CFormTextAPI from '../../api/CFormText.api.mdx'
-
-## CFormInput
-
-<CFormInputAPI />
-
-## CFormFeedback
-
-<CFormFeedbackAPI />
-
-## CFormLabel
-
-<CFormLabelAPI />
-
-## CFormText
-
-<CFormTextAPI />
diff --git a/packages/docs/content/forms/input/bootstrap.mdx b/packages/docs/content/forms/input/bootstrap.mdx
deleted file mode 100644
index 7e843886..00000000
--- a/packages/docs/content/forms/input/bootstrap.mdx
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: React Bootstrap Form Input Component
-name: Form Input with Bootstrap Styling
-description: Learn how to use CoreUI’s React input components styled with Bootstrap to create accessible, styled, and responsive form inputs.
-route: /forms/input/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Form Input component
-
-Use CoreUI’s `<CFormInput>` and related components styled with Bootstrap to create customizable and accessible form inputs in React. Easily control size, disabled state, readonly fields, file uploads, color pickers, and more.
-
-### Basic usage
-
-<ExampleSnippet className="theme-bootstrap" component="FormInputExample" componentName="React Bootstrap Form Input" />
-
-To build more complex form controls with labels and help text, you can compose the form manually using CoreUI components:
-
-```jsx
-<CForm>
-  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
-  <CFormInput
-    type="email"
-    id="exampleFormControlInput1"
-    placeholder="name@example.com"
-    aria-describedby="exampleFormControlInputHelpInline"
-  />
-  <CFormText as="span" id="exampleFormControlInputHelpInline">
-    Must be 8–20 characters long.
-  </CFormText>
-</CForm>
-```
-
-## Input sizing
-
-Change input sizes using the `size` prop (`"sm"` or `"lg"`).
-
-<ExampleSnippet className="theme-bootstrap" component="FormInputSizingExample" componentName="React Bootstrap Form Input" />
-
-## Disabled inputs
-
-Add the `disabled` prop to visually disable the input and remove pointer events.
-
-<ExampleSnippet className="theme-bootstrap" component="FormInputDisabledExample" componentName="React Bootstrap Form Input" />
-
-## Read-only inputs
-
-Use the `readOnly` prop to prevent editing while maintaining focus and tab behavior.
-
-<ExampleSnippet className="theme-bootstrap" component="FormInputReadonlyExample" componentName="React Bootstrap Form Input" />
-
-## Plaintext read-only inputs
-
-Add `plainText` for inputs that appear as plain text but retain layout spacing.
-
-<ExampleSnippet className="theme-bootstrap" component="FormInputReadonlyPlainTextExample" componentName="React Bootstrap Form Input" />
-
-<ExampleSnippet className="theme-bootstrap" component="FormInputReadonlyPlainText2Example" componentName="React Bootstrap Form Input" />
-
-## File input
-
-Use CoreUI's `<CFormInput type="file" />` for custom-styled file upload fields.
-
-<ExampleSnippet className="theme-bootstrap" component="FormInputFileExample" componentName="React Bootstrap Form Input" />
-
-## Color input
-
-Color inputs are supported using `type="color"`.
-
-<ExampleSnippet className="theme-bootstrap" component="FormInputColorExample" componentName="React Bootstrap Form Input" />
-
-## API reference
-
-Refer to the API documentation for detailed descriptions of all the props and configuration options.
-
-- [&lt;CFormInput /&gt;](../api/#cforminput)
-- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
-- [&lt;CFormLabel /&gt;](../api/#cformlabel)
-- [&lt;CFormText /&gt;](../api/#cformtext)
diff --git a/packages/docs/content/forms/input/examples/FormInputColorExample.tsx b/packages/docs/content/forms/input/examples/FormInputColorExample.tsx
deleted file mode 100644
index 5e483d9f..00000000
--- a/packages/docs/content/forms/input/examples/FormInputColorExample.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index fa886255..00000000
--- a/packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 825f977a..00000000
--- a/packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index f549a22e..00000000
--- a/packages/docs/content/forms/input/examples/FormInputExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index 19894a2f..00000000
--- a/packages/docs/content/forms/input/examples/FormInputFileExample.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index beb0fa42..00000000
--- a/packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index 1f35597d..00000000
--- a/packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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
deleted file mode 100644
index 03ecb43c..00000000
--- a/packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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
deleted file mode 100644
index 41233653..00000000
--- a/packages/docs/content/forms/input/examples/FormInputSizingExample.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-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
deleted file mode 100644
index 18593a11..00000000
--- a/packages/docs/content/forms/input/index.mdx
+++ /dev/null
@@ -1,67 +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.
-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
deleted file mode 100644
index 0cece944..00000000
--- a/packages/docs/content/forms/input/styling.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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/bootstrap.mdx b/packages/docs/content/forms/layout/bootstrap.mdx
deleted file mode 100644
index 419f189b..00000000
--- a/packages/docs/content/forms/layout/bootstrap.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: React Bootstrap Form Layout Component
-name: Form Layout with Bootstrap Styling
-description: Learn how to build responsive and structured form layouts using CoreUI’s React components styled with Bootstrap.
-route: /forms/layout/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Form Layout
-
-Use CoreUI’s React form components together with Bootstrap’s layout system to build flexible, responsive, and well-structured forms.
-
-### Form container
-
-Wrap form elements in the `<CForm>` component to enable default browser behaviors such as validation and submission.
-
-- CoreUI does not apply default styles to `<CForm>`, giving you full control.
-- All `<CButton>` components inside `<CForm>` default to `type="submit"` unless specified otherwise.
-- You can disable all fields by setting the `disabled` prop on `<CForm>`.
-
-### Form layout using grid
-
-Combine CoreUI form components with the Bootstrap grid system for complex form layouts.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutFormGridExample" componentName="React Bootstrap Form Layout" />
-
-### Gutters
-
-Control spacing between columns using Bootstrap's gutter utilities.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutGuttersExample" componentName="React Bootstrap Form Layout" />
-
-You can also create advanced layouts by customizing both horizontal and vertical spacing.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutGutters2Example" componentName="React Bootstrap Form Layout" />
-
-### Horizontal form layout
-
-To create horizontal forms, use Bootstrap’s `.row` and `.col-*` grid classes. Add `.col-form-label` to `<CFormLabel>` to align labels vertically with form controls.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutHorizontalFormExample" componentName="React Bootstrap Form Layout" />
-
-#### Sizing horizontal labels
-
-Use `.col-form-label-sm` or `.col-form-label-lg` to match form control sizes.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutHorizontalFormLabelSizingExample" componentName="React Bootstrap Form Layout" />
-
-### Column sizing
-
-Use CoreUI’s `<CRow>` and `<CCol>` components to automatically distribute or manually control the width of form inputs.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutColumnSizingExample" componentName="React Bootstrap Form Layout" />
-
-### Auto sizing columns
-
-Use `<CCol xs="auto">` to allow input elements to take up only as much space as needed.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutAutoSizingExample" componentName="React Bootstrap Form Layout" />
-
-This can be combined with custom sizing to match your UI needs.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutAutoSizing2Example" componentName="React Bootstrap Form Layout" />
-
-### Inline form layout
-
-Use inline layouts to group form controls in a horizontal row, perfect for compact forms. Use `xs="auto"` and `g-2` for spacing, and `align-items-center` for vertical alignment.
-
-<ExampleSnippet className="theme-bootstrap" component="LayoutInlineFormsExample" componentName="React Bootstrap Form Layout" />
-
-## API reference
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CForm /&gt;](../api/#cform)
-- [&lt;CRow /&gt;](../api/#crow)
-- [&lt;CCol /&gt;](../api/#ccol)
-- [&lt;CFormLabel /&gt;](../api/#cformlabel)
-- [&lt;CFormCheck /&gt;](../api/#cformcheck)
-- [&lt;CFormInput /&gt;](../api/#cforminput)
diff --git a/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx b/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx
deleted file mode 100644
index 981793af..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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
deleted file mode 100644
index e36b04cd..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-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
deleted file mode 100644
index 8f61f594..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 5a91967c..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 34d07b46..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-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
deleted file mode 100644
index e5954236..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 0d994967..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-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
deleted file mode 100644
index ef9d25f3..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-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
deleted file mode 100644
index c379da40..00000000
--- a/packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-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
deleted file mode 100644
index 59255aaf..00000000
--- a/packages/docs/content/forms/layout/index.mdx
+++ /dev/null
@@ -1,72 +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.
-route: /forms/layout/
----
-
-## Forms
-
-Every group of form fields should reside in a `<CForm>` element. CoreUI provides no default styling for the `<CForm>` element, but there are some powerful browser features that are provided by default.
-
-- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes.
-- `<CButton>`s within a `<CForm>` default to `type="submit"`, so strive to be specific and always include a `type`.
-- You can disable every form element within a form with the `disabled` attribute on the `<CForm>`.
-
-Since CoreUI applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
-
-## Utilities
-
-[Margin utilities](https://coreui.io/bootstrap/docs/utilities/spacing/) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
-
-## Form grid
-
-More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
-
-<ExampleSnippet component="LayoutFormGridExample" componentName="React Form Layout" />
-
-## Gutters
-
-By adding [gutter modifier classes](https://coreui.io/bootstrap/docs/layout/gutters/), you can have control over the gutter width in as well the inline as block direction.
-
-<ExampleSnippet component="LayoutGuttersExample" componentName="React Form Layout" />
-
-More complex layouts can also be created with the grid system.
-
-<ExampleSnippet component="LayoutGutters2Example" componentName="React Form Layout" />
-
-## Horizontal form
-
-Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<CFormLabel>`s as well so they're vertically centered with their associated form controls.
-
-At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
-
-<ExampleSnippet component="LayoutHorizontalFormExample" componentName="React Form Layout" />
-
-### Horizontal form label sizing
-
-Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<CFormLabel>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
-
-<ExampleSnippet component="LayoutHorizontalFormLabelSizingExample" componentName="React Form Layout" />
-
-## Column sizing
-
-As shown in the previous examples, our grid system allows you to place any number of `<CCol>`s within a `<CRow>`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `<CCol>`s equally split the rest, with specific column classes like `<CCol sm={7} >`.
-
-<ExampleSnippet component="LayoutColumnSizingExample" componentName="React Form Layout" />
-
-## Auto-sizing
-
-The example below uses a flexbox utility to vertically center the contents and changes `<CCol>` to `<CCol xs="auto">` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
-
-<ExampleSnippet component="LayoutAutoSizingExample" componentName="React Form Layout" />
-
-You can then remix that once again with size-specific column classes.
-
-<ExampleSnippet component="LayoutAutoSizing2Example" componentName="React Form Layout" />
-
-## Inline forms
-
-Use the `<CCol xs="auto">` class to create horizontal layouts. By adding [gutter modifier classes](https://coreui.io/bootstrap/docs/layout/gutters/), we will have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `<CFormCheck>` align properly.
-
-<ExampleSnippet component="LayoutInlineFormsExample" componentName="React Form Layout" />
diff --git a/packages/docs/content/forms/overview.mdx b/packages/docs/content/forms/overview.mdx
deleted file mode 100644
index 19362350..00000000
--- a/packages/docs/content/forms/overview.mdx
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: React Form Components
-name: Overview
-description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
-menu: Forms
-route: /forms/overview
----
-
-import {
-  CButton,
-  CForm,
-  CFormCheck,
-  CFormInput,
-  CFormLabel,
-  CFormSelect,
-  CFormText,
-  CCol,
-  CRow,
-} from '@coreui/react'
-
-## Overview
-
-CoreUI’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
-
-Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
-
-Here’s a quick example to demonstrate CoreUI’s form styles. Keep reading for documentation on required classes, form layout, and more.
-
-<Example>
-  <CForm>
-    <div className="mb-3">
-      <CFormLabel htmlFor="exampleInputEmail1">Email address</CFormLabel>
-      <CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
-      <CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
-    </div>
-    <div className="mb-3">
-      <CFormLabel htmlFor="exampleInputPassword1">Email Password</CFormLabel>
-      <CFormInput type="password" id="exampleInputPassword1" />
-    </div>
-    <CFormCheck
-      className="mb-3"
-      label="Check me out"
-      onChange={(e) => {
-        console.log(e.target)
-      }}
-    />
-    <CButton type="submit" color="primary">
-      Submit
-    </CButton>
-  </CForm>
-</Example>
-
-```jsx
-<CForm>
-  <div className="mb-3">
-    <CFormLabel htmlFor="exampleInputEmail1">Email address</CFormLabel>
-    <CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
-    <CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
-  </div>
-  <div className="mb-3">
-    <CFormLabel htmlFor="exampleInputPassword1">Email Password</CFormLabel>
-    <CFormInput type="password" id="exampleInputPassword1" />
-  </div>
-  <CFormCheck
-    className="mb-3"
-    label="Check me out"
-    onChange={(e) => {
-      console.log(e.target)
-    }}
-  />
-  <CButton type="submit" color="primary">
-    Submit
-  </CButton>
-</CForm>
-```
-
-## Form text
-
-Block-level or inline-level form text can be created using `<CFormText>`.
-
-Associating form text with form controls
-Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
-
-Form text below inputs can be styled with `<CFormText>`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
-
-<Example>
-  <CForm>
-    <div className="mb-3">
-      <CFormLabel htmlFor="inputPassword5">Password</CFormLabel>
-      <CFormInput type="password" id="inputPassword5" aria-describedby="passwordHelpBlock" />
-      <CFormText id="passwordHelpBlock">
-        Your password must be 8-20 characters long, contain letters and numbers, and must not
-        contain spaces, special characters, or emoji.
-      </CFormText>
-    </div>
-  </CForm>
-</Example>
-
-```jsx
-<CForm>
-  <div className="mb-3">
-    <CFormLabel htmlFor="inputPassword5">Password</CFormLabel>
-    <CFormInput type="password" id="inputPassword5" aria-describedby="passwordHelpBlock" />
-    <CFormText id="passwordHelpBlock">
-      Your password must be 8-20 characters long, contain letters and numbers, and must not
-      contain spaces, special characters, or emoji.
-    </CFormText>
-  </div>
-</CForm>
-```
-
-Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
-
-<Example>
-  <CRow className="g-3 align-items-center">
-    <CCol xs="auto">
-      <CFormLabel htmlFor="inputPassword6" className="col-form-label">
-        Password
-      </CFormLabel>
-    </CCol>
-    <CCol xs="auto">
-      <CFormInput type="password" id="inputPassword6" aria-describedby="passwordHelpInline" />
-    </CCol>
-    <CCol xs="auto">
-      <CFormText as="span" id="passwordHelpInline">
-        Must be 8-20 characters long.
-      </CFormText>
-    </CCol>
-  </CRow>
-</Example>
-
-```jsx
-<CRow className="g-3 align-items-center">
-  <CCol xs="auto">
-    <CFormLabel htmlFor="inputPassword6" className="col-form-label">
-      Password
-    </CFormLabel>
-  </CCol>
-  <CCol xs="auto">
-    <CFormInput type="password" id="inputPassword6" aria-describedby="passwordHelpInline" />
-  </CCol>
-  <CCol xs="auto">
-    <CFormText as="span" id="passwordHelpInline">
-      Must be 8-20 characters long.
-    </CFormText>
-  </CCol>
-</CRow>
-```
-
-## Disabled forms
-
-Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.
-
-```jsx
-<CFormLabel id="disabledInput" type="text" placeholder="Disabled input here..." disabled />
-```
-
-Add the `disabled` attribute to a `<fieldset>` to disable all the controls within. Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.
-
-However, if your form also includes custom button-like elements such as `<CButton>...</CButton>`, these will only be given a style of `pointer-events: none`, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies.
-
-<Example>
-  <CForm>
-    <fieldset disabled>
-      <legend>Disabled fieldset example</legend>
-      <div className="mb-3">
-        <CFormLabel htmlFor="disabledTextInput">Disabled input</CFormLabel>
-        <CFormInput id="disabledTextInput" placeholder="Disabled input" />
-      </div>
-      <div className="mb-3">
-        <CFormLabel htmlFor="disabledSelect">Disabled select menu</CFormLabel>
-        <CFormSelect id="disabledSelect">
-          <option>Disabled select</option>
-        </CFormSelect>
-      </div>
-      <div className="mb-3">
-        <CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
-      </div>
-      <CButton color="primary" type="submit">Submit</CButton>
-    </fieldset>
-  </CForm>
-</Example>
-
-```jsx
-<CForm>
-  <fieldset disabled>
-    <legend>Disabled fieldset example</legend>
-    <div className="mb-3">
-      <CFormLabel htmlFor="disabledTextInput">Disabled input</CFormLabel>
-      <CFormInput id="disabledTextInput" placeholder="Disabled input" />
-    </div>
-    <div className="mb-3">
-      <CFormLabel htmlFor="disabledSelect">Disabled select menu</CFormLabel>
-      <CFormSelect id="disabledSelect">
-        <option>Disabled select</option>
-      </CFormSelect>
-    </div>
-    <div className="mb-3">
-      <CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
-    </div>
-    <CButton color="primary" type="submit">Submit</CButton>
-  </fieldset>
-</CForm>
-```
diff --git a/packages/docs/content/forms/radio/api.mdx b/packages/docs/content/forms/radio/api.mdx
deleted file mode 100644
index 62bf3a61..00000000
--- a/packages/docs/content/forms/radio/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Form Radio Component API
-name: Form Radio API
-description: Explore the API reference for the React Form Radio component and discover how to effectively utilize its props for customization.
-route: /forms/radio/
----
-
-import CFormCheckAPI from '../../api/CFormCheck.api.mdx'
-
-## CFormCheck
-
-<CFormCheckAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/radio/bootstrap.mdx b/packages/docs/content/forms/radio/bootstrap.mdx
deleted file mode 100644
index cda8394c..00000000
--- a/packages/docs/content/forms/radio/bootstrap.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: React Bootstrap Radio Component
-name: Radio with Bootstrap Styling
-description: Learn how to build consistent, accessible, and customizable radio buttons using CoreUI’s React components styled with Bootstrap.
-route: /forms/radio/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Radio component
-
-Use CoreUI’s `<CFormCheck type="radio">` component to create Bootstrap-styled radio buttons for selecting one option from many. These components are built to be accessible, customizable, and responsive.
-
-### Default stacked radios
-
-By default, multiple radio buttons rendered as siblings will be stacked vertically with proper spacing.
-
-<ExampleSnippet className="theme-bootstrap" component="RadioExample" componentName="React Bootstrap Radio" />
-
-### Disabled state
-
-Add the `disabled` prop to disable a radio button. The associated label will also receive a muted style to reflect its state.
-
-<ExampleSnippet className="theme-bootstrap" component="RadioDisabledExample" componentName="React Bootstrap Radio" />
-
-### Inline radios
-
-Display radio buttons in a horizontal row by adding the `inline` prop to each `<CFormCheck type="radio">`.
-
-<ExampleSnippet className="theme-bootstrap" component="RadioInlineExample" componentName="React Bootstrap Radio" />
-
-### Reverse layout
-
-Use the `reverse` prop to position the label text on the opposite side of the radio input.
-
-<ExampleSnippet className="theme-bootstrap" component="RadioReverseExample" componentName="React Bootstrap Radio" />
-
-### Radios without labels
-
-You can omit visual labels, but make sure to provide accessible names using `aria-label` for screen readers.
-
-<ExampleSnippet className="theme-bootstrap" component="RadioWithoutLabelsExample" componentName="React Bootstrap Radio" />
-
-### Radio toggle buttons
-
-Turn your radios into button-like toggles using the `button` prop. These can also be grouped using a button group component.
-
-<ExampleSnippet className="theme-bootstrap" component="RadioToggleButtonsExample" componentName="React Bootstrap Radio" />
-
-#### Outlined toggle styles
-
-You can apply outlined styles to toggle radios using Bootstrap's button variant system.
-
-<ExampleSnippet className="theme-bootstrap" component="RadioToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Radio" />
-
-## API reference
-
-Refer to the API documentation below for a complete list of props supported by the React Bootstrap radio component.
-
-- [&lt;CFormCheck /&gt;](../api/#cformcheck)
diff --git a/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx b/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx
deleted file mode 100644
index 3a662127..00000000
--- a/packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index 293b329d..00000000
--- a/packages/docs/content/forms/radio/examples/RadioExample.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 30524b10..00000000
--- a/packages/docs/content/forms/radio/examples/RadioInlineExample.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 330b626c..00000000
--- a/packages/docs/content/forms/radio/examples/RadioReverseExample.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 42a5aba2..00000000
--- a/packages/docs/content/forms/radio/examples/RadioStackedExample.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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
deleted file mode 100644
index a96c0eec..00000000
--- a/packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-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
deleted file mode 100644
index 5b14b855..00000000
--- a/packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index 6621550e..00000000
--- a/packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index f49bf3a9..00000000
--- a/packages/docs/content/forms/radio/index.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
----
-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
deleted file mode 100644
index ec508fbb..00000000
--- a/packages/docs/content/forms/radio/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-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
deleted file mode 100644
index 522a6c51..00000000
--- a/packages/docs/content/forms/range/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Form Range Component API
-name: Form Range API
-description: Explore the API reference for the React Form Range component and discover how to effectively utilize its props for customization.
-route: /forms/range/
----
-
-import CFormRangeAPI from '../../api/CFormRange.api.mdx'
-
-## CFormRange
-
-<CFormRangeAPI />
diff --git a/packages/docs/content/forms/range/bootstrap.mdx b/packages/docs/content/forms/range/bootstrap.mdx
deleted file mode 100644
index 124e2b56..00000000
--- a/packages/docs/content/forms/range/bootstrap.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: React Bootstrap Range Component
-name: Range with Bootstrap Styling
-description: Learn how to create customizable and consistent cross-browser range sliders using CoreUI’s React components styled with Bootstrap.
-route: /forms/range/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Range component
-
-Use CoreUI’s `<CFormRange>` component to create custom range inputs with Bootstrap styling. It provides consistent appearance and behavior across modern browsers and supports customization via standard props.
-
-### Basic example
-
-The `<CFormRange>` component renders a stylized `<input type="range">` element.
-
-<ExampleSnippet className="theme-bootstrap" component="FormRangeExample" componentName="React Bootstrap Range" />
-
-### Disabled state
-
-Add the `disabled` prop to visually gray out the slider and disable interaction.
-
-<ExampleSnippet className="theme-bootstrap" component="FormRangeDisabledExample" componentName="React Bootstrap Range" />
-
-### Minimum and maximum values
-
-Customize the slider’s value range using the `min` and `max` props.
-
-<ExampleSnippet className="theme-bootstrap" component="FormRangeMinAndMaxExample" componentName="React Bootstrap Range" />
-
-### Custom step values
-
-Set a custom `step` size to control the interval between selectable values.
-
-<ExampleSnippet className="theme-bootstrap" component="FormRangeStepsExample" componentName="React Bootstrap Range" />
-
-## API reference
-
-Refer to the API documentation below for detailed descriptions of all available props.
-
-- [&lt;CFormRange /&gt;](../api/#cformrange)
diff --git a/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx b/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx
deleted file mode 100644
index 60e0fed4..00000000
--- a/packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index 5e5ccf6b..00000000
--- a/packages/docs/content/forms/range/examples/FormRangeExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index d31ad1b7..00000000
--- a/packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index c91a5e21..00000000
--- a/packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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/index.mdx b/packages/docs/content/forms/range/index.mdx
deleted file mode 100644
index 68990db5..00000000
--- a/packages/docs/content/forms/range/index.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: React Range Component
-name: Range
-description: React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
-route: /forms/range/
-other_frameworks: range
----
-
-## 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.
-
-<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.
-
-<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.
-
-<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}`.
-
-<ExampleSnippet component="FormRangeStepsExample" componentName="React Form Range" />
-
-## API
-
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-
-- [&lt;CFormRange /&gt;](./api/#cformrange)
diff --git a/packages/docs/content/forms/range/styling.mdx b/packages/docs/content/forms/range/styling.mdx
deleted file mode 100644
index 2f2348e4..00000000
--- a/packages/docs/content/forms/range/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-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/api.mdx b/packages/docs/content/forms/select/api.mdx
deleted file mode 100644
index ef612feb..00000000
--- a/packages/docs/content/forms/select/api.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: React Form Select Component API
-name: Form Select API
-description: Explore the API reference for the React Form Select component and discover how to effectively utilize its props for customization.
-route: /forms/select/
----
-
-import CFormSelectAPI from '../../api/CFormSelect.api.mdx'
-import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
-import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
-import CFormTextAPI from '../../api/CFormText.api.mdx'
-
-## CFormSelect
-
-<CFormSelectAPI />
-
-## CFormFeedback
-
-<CFormFeedbackAPI />
-
-## CFormLabel
-
-<CFormLabelAPI />
-
-## CFormText
-
-<CFormTextAPI />
diff --git a/packages/docs/content/forms/select/bootstrap.mdx b/packages/docs/content/forms/select/bootstrap.mdx
deleted file mode 100644
index d6c39a04..00000000
--- a/packages/docs/content/forms/select/bootstrap.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: React Bootstrap Select Component
-name: Select with Bootstrap Styling
-description: Learn how to build accessible and customizable dropdown menus using CoreUI’s React select component styled with Bootstrap.
-route: /forms/select/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Select component
-
-Use CoreUI’s `<CFormSelect>` to create custom-styled `<select>` elements that match the Bootstrap look and feel. It supports single and multiple selections, custom sizing, and full accessibility.
-
-### Basic usage
-
-The default select renders a Bootstrap-styled native dropdown.
-
-<ExampleSnippet className="theme-bootstrap" component="FormSelectExample" componentName="React Bootstrap Select" />
-
-You can also define options manually using JSX:
-
-```jsx
-<CFormSelect aria-label="Default select example">
-  <option>Open this select menu</option>
-  <option value="1">One</option>
-  <option value="2">Two</option>
-  <option value="3" disabled>Three</option>
-</CFormSelect>
-```
-
-### Sizing
-
-Use the `size` prop with values like `"sm"` or `"lg"` to change the select height.
-
-<ExampleSnippet className="theme-bootstrap" component="FormSelectSizingExample" componentName="React Bootstrap Select" />
-
-You can also enable multi-select behavior using the `multiple` prop:
-
-<ExampleSnippet className="theme-bootstrap" component="FormSelectSizing2Example" componentName="React Bootstrap Select" />
-
-And specify a fixed visible size using the `htmlSize` prop:
-
-<ExampleSnippet className="theme-bootstrap" component="FormSelectSizing3Example" componentName="React Bootstrap Select" />
-
-### Disabled state
-
-Add the `disabled` prop to disable user interaction and apply a muted appearance.
-
-<ExampleSnippet className="theme-bootstrap" component="FormSelectDisabledExample" componentName="React Bootstrap Select" />
-
-## API reference
-
-Refer to the API documentation below for detailed descriptions of all available props and subcomponents.
-
-- [&lt;CFormSelect /&gt;](../api/#cformselect)
-- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
-- [&lt;CFormLabel /&gt;](../api/#cformlabel)
-- [&lt;CFormText /&gt;](../api/#cformtext)
diff --git a/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx b/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx
deleted file mode 100644
index c1596b4b..00000000
--- a/packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 3d2c51c0..00000000
--- a/packages/docs/content/forms/select/examples/FormSelectExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index cb273285..00000000
--- a/packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 68038524..00000000
--- a/packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 95bce395..00000000
--- a/packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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
deleted file mode 100644
index 18f914c4..00000000
--- a/packages/docs/content/forms/select/index.mdx
+++ /dev/null
@@ -1,51 +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.
-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
deleted file mode 100644
index 1dc4571d..00000000
--- a/packages/docs/content/forms/select/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-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/api.mdx b/packages/docs/content/forms/switch/api.mdx
deleted file mode 100644
index 7c2bb692..00000000
--- a/packages/docs/content/forms/switch/api.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: React Form Switch Component API
-name: Form Switch API
-description: Explore the API reference for the React Form Switch component and discover how to effectively utilize its props for customization.
-route: /forms/switch/
----
-
-import CFormSwitchAPI from '../../api/CFormSwitch.api.mdx'
-
-## CFormSwitch
-
-<CFormSwitchAPI />
\ No newline at end of file
diff --git a/packages/docs/content/forms/switch/bootstrap.mdx b/packages/docs/content/forms/switch/bootstrap.mdx
deleted file mode 100644
index b8839c12..00000000
--- a/packages/docs/content/forms/switch/bootstrap.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: React Bootstrap Switch Component
-name: Switch with Bootstrap Styling
-description: Learn how to create responsive toggle switches using CoreUI’s React component styled to match Bootstrap form elements.
-route: /forms/switch/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Switch component
-
-Use CoreUI’s `<CFormSwitch>` to create cross-browser, Bootstrap-styled toggle switches that represent binary states such as on/off, enabled/disabled, or true/false.
-
-### Basic usage
-
-A standard switch uses the `type="switch"` option on the `<CFormSwitch>` component.
-
-<ExampleSnippet className="theme-bootstrap" component="FormSwitchExample" componentName="React Bootstrap Switch" />
-
-### Sizing
-
-Use the `size` prop to adjust the visual scale of the switch. Available sizes include `"lg"` and `"xl"`.
-
-<ExampleSnippet className="theme-bootstrap" component="FormSwitchSizingExample" componentName="React Bootstrap Switch" />
-
-### Reverse layout
-
-Add the `reverse` prop to place the switch control after the label.
-
-<ExampleSnippet className="theme-bootstrap" component="FormSwitchReverseExample" componentName="React Bootstrap Switch" />
-
-## API reference
-
-Refer to the API documentation below for a complete list of available props for the React Bootstrap Switch component.
-
-- [&lt;CFormSwitch /&gt;](../api/#cformswitch)
diff --git a/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx b/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx
deleted file mode 100644
index 560faaf8..00000000
--- a/packages/docs/content/forms/switch/examples/FormSwitchExample.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index c65883fc..00000000
--- a/packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-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
deleted file mode 100644
index b1dc4955..00000000
--- a/packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index d0fbcefc..00000000
--- a/packages/docs/content/forms/switch/index.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-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
deleted file mode 100644
index a27170e8..00000000
--- a/packages/docs/content/forms/switch/styling.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-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/api.mdx b/packages/docs/content/forms/textarea/api.mdx
deleted file mode 100644
index 733f0a55..00000000
--- a/packages/docs/content/forms/textarea/api.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: React Form Textarea Component API
-name: Form Textarea API
-description: Explore the API reference for the React Form Textarea component and discover how to effectively utilize its props for customization.
-route: /forms/textarea/
----
-
-import CFormTextareaAPI from '../../api/CFormTextarea.api.mdx'
-import CFormFeedbackAPI from '../../api/CFormFeedback.api.mdx'
-import CFormLabelAPI from '../../api/CFormLabel.api.mdx'
-import CFormTextAPI from '../../api/CFormText.api.mdx'
-
-## CFormTextarea
-
-<CFormTextareaAPI />
-
-## CFormFeedback
-
-<CFormFeedbackAPI />
-
-## CFormLabel
-
-<CFormLabelAPI />
-
-## CFormText
-
-<CFormTextAPI />
diff --git a/packages/docs/content/forms/textarea/bootstrap.mdx b/packages/docs/content/forms/textarea/bootstrap.mdx
deleted file mode 100644
index 9af3cec1..00000000
--- a/packages/docs/content/forms/textarea/bootstrap.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: React Bootstrap Textarea Component
-name: Form Textarea with Bootstrap Styling
-description: Learn how to style and enhance Bootstrap-style textarea fields in React using CoreUI components with custom sizing, disabled states, and validation feedback.
-route: /forms/textarea/
-other_frameworks: textarea
-bootstrap_component: true
----
-
-## How to use React Bootstrap Textarea component
-
-Use `<CFormTextarea>` to create multi-line text inputs in your forms, styled to match Bootstrap’s design system.
-
-### Basic example
-
-Use the component with a label and help text for accessibility and usability.
-
-<ExampleSnippet className="theme-bootstrap" component="FormTextareaExample" componentName="React Bootstrap Textarea" />
-
-You can also build the same structure manually using individual form components:
-
-```jsx
-<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
-<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
-<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
-```
-
-### Disabled state
-
-Add the `disabled` prop to make the textarea inactive and visually grayed out.
-
-<ExampleSnippet className="theme-bootstrap" component="FormTextareaDisabledExample" componentName="React Bootstrap Textarea" />
-
-### Read-only
-
-Use the `readOnly` prop to prevent edits while still allowing text selection and copying.
-
-<ExampleSnippet className="theme-bootstrap" component="FormTextareaReadonlyExample" componentName="React Bootstrap Textarea" />
-
-## API reference
-
-Refer to the API documentation below for a complete list of available props and subcomponents used to build Bootstrap-style textareas in React.
-
-- [&lt;CFormTextarea /&gt;](../api/#cformtextarea)
-- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
-- [&lt;CFormLabel /&gt;](../api/#cformlabel)
-- [&lt;CFormText /&gt;](../api/#cformtext)
diff --git a/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx b/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx
deleted file mode 100644
index abc7ab18..00000000
--- a/packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 369a6a3f..00000000
--- a/packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 41ae2daf..00000000
--- a/packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index eea522bb..00000000
--- a/packages/docs/content/forms/textarea/index.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-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
deleted file mode 100644
index d257b17b..00000000
--- a/packages/docs/content/forms/textarea/styling.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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/bootstrap.mdx b/packages/docs/content/forms/validation/bootstrap.mdx
deleted file mode 100644
index 2b3ddbfb..00000000
--- a/packages/docs/content/forms/validation/bootstrap.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: React Bootstrap Form Validation
-name: Form Validation with Bootstrap Styling
-description: Learn how to use Bootstrap-style validation in React forms using CoreUI components. Show validation messages, use custom styles, and support native browser behavior.
-route: /forms/validation/
-bootstrap_component: true
----
-
-## How to use React Bootstrap Form Validation
-
-React Bootstrap validation lets you provide custom or native HTML5 feedback styles for form controls. CoreUI components support both approaches for a better user experience.
-
-### Custom validation styles
-
-Disable the browser’s native validation UI with the `noValidate` prop on `<CForm>`, and use the `validated` prop to enable feedback based on custom logic. Try submitting the form below to see how validation classes like `:invalid` and `:valid` are applied.
-
-<ExampleSnippet className="theme-bootstrap" component="ValidationExample" componentName="React Bootstrap Form Validation" />
-
-### Browser default behavior
-
-If you prefer to rely on native browser validation, skip `noValidate` and `validated`. Submit the form and let the browser handle feedback based on built-in rules.
-
-<ExampleSnippet className="theme-bootstrap" component="ValidationBrowserDefaultsExample" componentName="React Bootstrap Form Validation" />
-
-### Manual validation
-
-Use the `valid` and `invalid` props directly on components like `<CFormInput>` to apply validation styles manually, which is useful for server-side validation or complex form logic.
-
-<ExampleSnippet className="theme-bootstrap" component="ValidationCustomExample" componentName="React Bootstrap Form Validation" />
-
-### Supported components
-
-These CoreUI components support Bootstrap validation classes:
-
-- `<CFormCheck>`
-- `<CFormInput>`
-- `<CFormSelect>`
-- `<CFormTextarea>`
-
-<ExampleSnippet className="theme-bootstrap" component="ValidationSupportedElementsExample" componentName="React Bootstrap Form Validation" />
-
-### Tooltip feedback
-
-For compact layouts, validation messages can appear as tooltips. Make sure the parent container has `position: relative` to position tooltips correctly.
-
-<ExampleSnippet className="theme-bootstrap" component="ValidationTooltipsExample" componentName="React Bootstrap Form Validation" />
-
-## API reference
-
-Refer to the API documentation for detailed descriptions of the props and features available:
-
-- [&lt;CForm /&gt;](../api/#cform)
-- [&lt;CFormCheck /&gt;](../api/#cformcheck)
-- [&lt;CFormInput /&gt;](../api/#cforminput)
-- [&lt;CFormSelect /&gt;](../api/#cformselect)
-- [&lt;CFormTextarea /&gt;](../api/#cformtextarea)
-- [&lt;CFormFeedback /&gt;](../api/#cformfeedback)
diff --git a/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx b/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx
deleted file mode 100644
index 0ac49071..00000000
--- a/packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-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
deleted file mode 100644
index 9a5c979e..00000000
--- a/packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-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
deleted file mode 100644
index 903851b1..00000000
--- a/packages/docs/content/forms/validation/examples/ValidationExample.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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
deleted file mode 100644
index 8ab9ce35..00000000
--- a/packages/docs/content/forms/validation/examples/ValidationExample.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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
deleted file mode 100644
index 5d688f21..00000000
--- a/packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-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
deleted file mode 100644
index d4a6d40a..00000000
--- a/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-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
deleted file mode 100644
index b50e5f58..00000000
--- a/packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-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
deleted file mode 100644
index 35d1a7f0..00000000
--- a/packages/docs/content/forms/validation/index.mdx
+++ /dev/null
@@ -1,47 +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.
-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
deleted file mode 100644
index 4370de0b..00000000
--- a/packages/docs/content/forms/validation/styling.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: React Form Validation Styling
-name: Form Validation Styling
-description: Learn how to customize the React form validation with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
-route: /forms/validation/
----
-
-### CSS variables
-
-CoreUI for React components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
-
-<ScssDocs file="_root.scss" capture="root-form-validation-variables" />
-
-These variables are also color mode adaptive, meaning they change color while in dark mode.
-
-### SASS variables
-
-<ScssDocs file="_variables.scss" capture="form-feedback-variables" />
-
-<ScssDocs file="_variables.scss" capture="form-validation-colors" />
-
-<ScssDocs file="_variables-dark.scss" capture="form-validation-colors-dark" />
diff --git a/packages/docs/content/getting-started/accessibility.mdx b/packages/docs/content/getting-started/accessibility.mdx
deleted file mode 100644
index 17bbee89..00000000
--- a/packages/docs/content/getting-started/accessibility.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Accessibility
-name: Accessibility
-description: A brief overview of CoreUI for React features and limitations for the creation of accessible content.
-menu: Getting started
-route: /getting-started/accessibility
----
-
-CoreUI for React provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.
-
-## Overview and limitations
-
-The overall accessibility of any project built with CoreUI for React depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with CoreUI for React that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1](https://www.w3.org/TR/WCAG21/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
-
-### Structural markup
-
-CoreUI for React styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of CoreUI for React itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.
-
-### Interactive components
-
-CoreUI for React interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant [<abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/WAI/standards-guidelines/aria/) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).
-
-Because CoreUI for React components are purposely designed to be fairly generic, authors may need to include further <abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.
-
-### Color contrast
-
-Some combinations of colors that currently make up CoreUI for React default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG21/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.
-
-### Visually hidden content
-
-Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
-
-```html
-<p className="text-danger">
-  <span className="visually-hidden">Danger: </span>
-  This action is not reversible
-</p>
-```
-
-For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, CoreUI's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.**
-
-```html
-<a className="visually-hidden-focusable" href="#content">Skip to main content</a>
-```
-
-### Reduced motion
-
-CoreUI for React includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in CoreUI for React (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.
-
-On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), CoreUI for React enables smooth scrolling using the `scroll-behavior` property.
-
-## Additional resources
-
-- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
-- [The A11Y Project](https://www.a11yproject.com/)
-- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
-- [Tenon.io Accessibility Checker](https://tenon.io/)
-- [Color Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/)
-- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
-- [Microsoft Accessibility Insights](https://accessibilityinsights.io/)
-- [Deque Axe testing tools](https://www.deque.com/axe/)
diff --git a/packages/docs/content/getting-started/introduction.mdx b/packages/docs/content/getting-started/introduction.mdx
deleted file mode 100644
index bf0c7ca2..00000000
--- a/packages/docs/content/getting-started/introduction.mdx
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: Introduction
-name: Introduction
-description: CoreUI for React.js is UI Component library written in TypeScript, and ready for your next React.js project. Learn how to include CoreUI for React.js in your project.
-menu: Getting started
-route: /getting-started/introduction
----
-
-## Installation
-
-### Npm
-
-```bash tab={"label":"CoreUI"}
-npm install @coreui/react @coreui/coreui
-```
-
-```bash tab={"label":"CoreUI PRO"}
-npm install @coreui/react-pro @coreui/coreui-pro
-```
-
-### Yarn
-
-```bash tab={"label":"CoreUI"}
-yarn add @coreui/react @coreui/coreui
-```
-
-```bash tab={"label":"CoreUI PRO"}
-yarn add @coreui/react-pro @coreui/coreui-pro
-```
-
-## Using components
-
-```jsx tab={"label":"CoreUI"}
-import { CAlert } from '@coreui/react';
-```
-
-```jsx tab={"label":"CoreUI PRO"}
-import { CAlert } from '@coreui/react-pro';
-```
-
-## Stylesheets
-
-React components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS library, but you can also use them with the bootstrap CSS library. That is possible because the `@coreui/coreui` library is compatible with Bootstrap, it just extends its functionalities. The only exceptions are custom CoreUI and CoreUI PRO components, which don't exist in the Bootstrap ecosystem.
-
-### CoreUI and CoreUI PRO CSS files
-
-###### Basic usage
-
-```js tab={"label":"CoreUI"}
-import '@coreui/coreui/dist/css/coreui.min.css'
-```
-
-```js tab={"label":"CoreUI PRO"}
-import '@coreui/coreui-pro/dist/css/coreui.min.css'
-```
-
-### Bootstrap CSS files
-
-###### Installation
-
-```bash
-npm install bootstrap
-```
-
-###### Basic usage
-
-```js
-import 'bootstrap/dist/css/bootstrap.min.css'
-```
\ No newline at end of file
diff --git a/packages/docs/content/layout/breakpoints.mdx b/packages/docs/content/layout/breakpoints.mdx
deleted file mode 100644
index 16dced59..00000000
--- a/packages/docs/content/layout/breakpoints.mdx
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: Breakpoints
-name: Breakpoints
-description: Breakpoints are the triggers in CoreUI for React.js for how your layout responsive changes across device or viewport sizes.
-menu: Layout
-route: "/layout/breakpoints"
----
-
-## Core concepts
-
-- **Breakpoints are the building blocks of responsive design.** Use them to control when your layout can be adapted at a particular viewport or device size.
-
-- **Use media queries to architect your CSS by breakpoint.** Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use `min-width` in our media queries.
-
-- **Mobile first, responsive design is the goal.** CoreUI's CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
-
-## Available breakpoints
-
-CoreUI for React.js includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files.
-
-| Breakpoint | Class infix | Dimensions |
-| --- | --- | --- |
-| Extra small | <em>None</em> | &lt;576px |
-| Small | `sm` | &ge;576px |
-| Medium | `md` | &ge;768px |
-| Large | `lg` | &ge;992px |
-| Extra large | `xl` | &ge;1200px |
-| Extra extra large | `xxl` | &ge;1400px |
-
-Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
-
-These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet.
-
-```scss
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-);
-```
-
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation](https://coreui.io/docs/layout/grid#sass).
-
-## Media queries
-
-Since CoreUI for React.js is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
-
-### Min-width
-
-CoreUI for React.js primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
-
-```scss
-// Source mixins
-
-// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
-@include media-breakpoint-up(sm) { ... }
-@include media-breakpoint-up(md) { ... }
-@include media-breakpoint-up(lg) { ... }
-@include media-breakpoint-up(xl) { ... }
-@include media-breakpoint-up(xxl) { ... }
-
-// Usage
-
-// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
-.custom-class {
-  display: none;
-}
-@include media-breakpoint-up(sm) {
-  .custom-class {
-    display: block;
-  }
-}
-```
-
-These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:
-
-```scss
-// X-Small devices (portrait phones, less than 576px)
-// No media query for `xs` since this is the default in CoreUI
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) { ... }
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) { ... }
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) { ... }
-
-// X-Large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) { ... }
-
-// XX-Large devices (larger desktops, 1400px and up)
-@media (min-width: 1400px) { ... }
-```
-
-### Max-width
-
-We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
-
-```scss
-// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
-@include media-breakpoint-down(sm) { ... }
-@include media-breakpoint-down(md) { ... }
-@include media-breakpoint-down(lg) { ... }
-@include media-breakpoint-down(xl) { ... }
-@include media-breakpoint-down(xxl) { ... }
-
-// Example: Style from medium breakpoint and down
-@include media-breakpoint-down(md) {
-  .custom-class {
-    display: block;
-  }
-}
-```
-
-These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example:
-
-```scss
-// X-Small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) { ... }
-
-// Small devices (landscape phones, less than 768px)
-@media (max-width: 767.98px) { ... }
-
-// Medium devices (tablets, less than 992px)
-@media (max-width: 991.98px) { ... }
-
-// Large devices (desktops, less than 1200px)
-@media (max-width: 1199.98px) { ... }
-
-// X-Large devices (large desktops, less than 1400px)
-@media (max-width: 1399.98px) { ... }
-
-// XX-Large devices (larger desktops)
-// No media query since the xxl breakpoint has no upper bound on its width
-```
-
-<Callout color="warning">
-  <strong>Why subtract .02px?</strong> Browsers don’t currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, so we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code>min-</code> and <code>max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
-</Callout>
-
-### Single breakpoint
-
-There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
-
-```scss
-@include media-breakpoint-only(xs) { ... }
-@include media-breakpoint-only(sm) { ... }
-@include media-breakpoint-only(md) { ... }
-@include media-breakpoint-only(lg) { ... }
-@include media-breakpoint-only(xl) { ... }
-@include media-breakpoint-only(xxl) { ... }
-```
-
-For example the `@include media-breakpoint-only(md) { ... }` will result in :
-
-```scss
-@media (min-width: 768px) and (max-width: 991.98px) { ... }
-```
-
-### Between breakpoints
-
-Similarly, media queries may span multiple breakpoint widths:
-
-```scss
-@include media-breakpoint-between(md, xl) { ... }
-```
-
-Which results in:
-
-```scss
-// Example
-// Apply styles starting from medium devices and up to extra large devices
-@media (min-width: 768px) and (max-width: 1199.98px) { ... }
-```
diff --git a/packages/docs/content/layout/columns.mdx b/packages/docs/content/layout/columns.mdx
deleted file mode 100644
index 982add80..00000000
--- a/packages/docs/content/layout/columns.mdx
+++ /dev/null
@@ -1,274 +0,0 @@
----
-title: Columns
-name: Columns
-description: Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.
-menu: Layout
-route: '/layout/columns'
----
-
-import { CCol, CContainer, CRow } from '@coreui/react'
-
-## How they work
-
-- **Columns build on the grid's flexbox architecture.** Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level](./../grid#row-columns). You choose how columns grow, shrink, or otherwise change.
-
-- **When building grid layouts, all content goes in columns.** The hierarchy of CoreUI's grid goes from [container](./../containers) to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
-
-- **CoreUI for React.js includes predefined components for creating fast, responsive layouts.** With [six breakpoints](./../breakpoints) and a dozen columns at each grid tier, we have dozens of components already built for you to create your desired layouts. This can be disabled via Sass if you wish.
-
-## Alignment
-
-Use flexbox alignment utilities to vertically and horizontally align columns.
-
-### Vertical alignment
-
-```jsx preview className="docs-example-row docs-example-row-flex-cols"
-<CContainer>
-  <CRow className="align-items-start">
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-  </CRow>
-  <CRow className="align-items-center">
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-  </CRow>
-  <CRow className="align-items-end">
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-    <CCol>One of three columns</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row docs-example-row-flex-cols"
-<CContainer>
-  <CRow>
-    <CCol className="align-self-start">One of three columns</CCol>
-    <CCol className="align-self-center">One of three columns</CCol>
-    <CCol className="align-self-end">One of three columns</CCol>
-  </CRow>
-</CContainer>
-```
-
-### Horizontal alignment
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow className="justify-content-start">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-center">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-end">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-around">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-between">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-  <CRow className="justify-content-evenly">
-    <CCol xs={4}>One of two columns</CCol>
-    <CCol xs={4}>One of two columns</CCol>
-  </CRow>
-</CContainer>
-```
-
-### Column wrapping
-
-If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol xs={9}>.col-9</CCol>
-    <CCol xs={4}>
-      .col-4
-      <br />
-      Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one
-      contiguous unit.
-    </CCol>
-    <CCol xs={6}>
-      .col-6
-      <br />
-      Subsequent columns continue along the new line.
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-### Column breaks
-
-Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `<CRow>`s, but not every implementation method can account for this.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol xs={6} sm={3}>
-      .col-6 .col-sm-3
-    </CCol>
-    <CCol xs={6} sm={3}>
-      .col-6 .col-sm-3
-    </CCol>
-    <div className="w-100"></div>
-    <CCol xs={6} sm={3}>
-      .col-6 .col-sm-3
-    </CCol>
-    <CCol xs={6} sm={3}>
-      .col-6 .col-sm-3
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-You may also apply this break at specific breakpoints with our [responsive display utilities](https://coreui.io/docs/utilities/display).
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol xs={6} sm={4}>
-      .col-6 .col-sm-4
-    </CCol>
-    <CCol xs={6} sm={4}>
-      .col-6 .col-sm-4
-    </CCol>
-    <div className="w-100 d-none d-md-block"></div>
-    <CCol xs={6} sm={4}>
-      .col-6 .col-sm-4
-    </CCol>
-    <CCol xs={6} sm={4}>
-      .col-6 .col-sm-4
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-## Reordering
-
-### Order props
-
-Use `xs|sm|md|lg|xl|xxl={{ order: 1-5 }}` props for controlling the **visual order** of your content. These props are responsive, so you can set the `order` by breakpoint (e.g., `xs={{ order: 1}} md={{ order: 2}}`). Includes support for `1` through `5` across all six grid tiers.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol>First in DOM, no order applied</CCol>
-    <CCol xs={{ span: true, order: 5 }}>Second in DOM, with a larger order</CCol>
-    <CCol xs={{ span: true, order: 1 }}>Third in DOM, with an order of 1</CCol>
-  </CRow>
-</CContainer>
-```
-
-There are also responsive `xs|sm|md|lg|xl|xxl={{ order: 'first' }}` and `xs|sm|md|lg|xl|xxl={{ order: 'last' }}` props that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These values can also be intermixed with the numbered `xs|sm|md|lg|xl|xxl={{ order: 1-5 }}` values as needed.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol xs={{ span: true, order: 'last' }}>First in DOM, ordered last</CCol>
-    <CCol>Second in DOM, unordered</CCol>
-    <CCol xs={{ span: true, order: 'first' }}>Third in DOM, ordered first</CCol>
-  </CRow>
-</CContainer>
-```
-
-### Offsetting columns
-
-You can offset grid columns in two ways: our responsive `xs|sm|md|lg|xl|xxl={{ offset: 0-12 }}` grid props and our [margin utilities](https://coreui.io/docs/utilities/spacing). Grid props are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
-
-#### Offset prop
-
-Move columns to the right using `md={{ offset: * }}` props. These props increase the left margin of a column by `*` columns. For example, `md={{ offset: 4 }}` moves `.col-md-4` over four columns.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol md={4}>.col-md-4</CCol>
-    <CCol md={{ span: 4, offset: 4 }}>.col-md-4 .offset-md-4</CCol>
-  </CRow>
-  <CRow>
-    <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
-    <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
-  </CRow>
-  <CRow>
-    <CCol md={{ span: 6, offset: 3 }}>.col-md-6 .offset-md-3</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol sm={5} md={6}>
-      .col-sm-5 .col-md-6
-    </CCol>
-    <CCol sm={{ span: 5, offset: 2 }} md={{ span: 6, offset: 0 }}>
-      .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol sm={6} md={5} lg={6}>
-      .col-sm-6 .col-md-5 .col-lg-6
-    </CCol>
-    <CCol sm={6} md={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 0 }}>
-      .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-#### Margin utilities
-
-You can use margin utilities like `.me-auto` to force sibling columns away from one another.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol md={4}>.col-md-4</CCol>
-    <CCol md={4} className="ms-auto">
-      .col-md-4 .ms-auto
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol md={3} className="ms-md-auto">
-      .col-md-3 .ms-md-auto
-    </CCol>
-    <CCol md={3} className="ms-md-auto">
-      .col-md-3 .ms-md-auto
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs="auto" className="me-auto">
-      .col-auto .me-auto
-    </CCol>
-    <CCol xs="auto">.col-auto</CCol>
-  </CRow>
-</CContainer>
-```
-
-## Standalone column component
-
-The `<CCol>` component can also be used outside a `<CRow>` to give an element a specific width. Whenever column component are used as non direct children of a row, the paddings are omitted.
-
-```jsx preview
-<CCol xs={3} className="bg-light p-3 border">
-  .col-3: width of 25%
-</CCol>
-<CCol sm={9} className="bg-light p-3 border">
-  .col-sm-9: width of 75% above sm breakpoint
-</CCol>
-```
-
-## API
-
-### CCol
-
-`markdown:CCol.api.mdx`
diff --git a/packages/docs/content/layout/containers.mdx b/packages/docs/content/layout/containers.mdx
deleted file mode 100644
index 0c8a43f2..00000000
--- a/packages/docs/content/layout/containers.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
----
-name: Containers
-title: Containers
-description: Containers are a fundamental building block of CoreUI for React.js that contain, pad, and align your content within a given device or viewport.
-menu: Layout
-route: "/layout/containers"
----
-
-import { CCol, CContainer, CRow } from '@coreui/react'
-
-## How they work
-
-Containers are the most basic layout element in CoreUI for React.js and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers *can* be nested, most layouts do not require a nested container.
-
-CoreUI for React.js comes with three different containers:
-
-- `<CContainer>`, which sets a `max-width` at each responsive breakpoint
-- `<CContainer fluid>`, which is `width: 100%` at all breakpoints
-- `<CContainer {sm|md|lg|xl|xxl}>`, which is `width: 100%` until the specified breakpoint
-
-The table below illustrates how each container's `max-width` compares to the original `<CContainer>` and `<CContainer fluid>` across each breakpoint.
-
-|  | Extra small<div className="fw-normal">&lt;576px</div> | Small<div className="fw-normal">&ge;576px</div> | Medium<div className="fw-normal">&ge;768px</div> | Large<div className="fw-normal">&ge;992px</div> | X-Large<div className="fw-normal">&ge;1200px</div> | XX-Large<div className="fw-normal">&ge;1400px</div> |
-| --- | --- | --- | --- | --- | --- | --- |
-| `.container` | <span className="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.container-sm` | <span className="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.container-md` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
-| `.container-lg` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
-| `.container-xl` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 1140px | 1320px |
-| `.container-xxl` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 1320px |
-| `.container-fluid` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> |
-
-
-## Default container
-
-Our default `<CContainer>` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.
-
-```jsx
-<CContainer>
-  Content here
-</CContainer>
-```
-
-## Responsive containers
-
-Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `<CContainer sm>` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
-
-```jsx
-<CContainer sm>100% wide until small breakpoint</CContainer>
-<CContainer md>100% wide until medium breakpoint</CContainer>
-<CContainer lg>100% wide until large breakpoint</CContainer>
-<CContainer xl>100% wide until extra large breakpoint</CContainer>
-<CContainer xxl>100% wide until extra extra large breakpoint</CContainer>
-```
-
-## Fluid containers
-
-Use `<CContainer fluid>` for a full width container, spanning the entire width of the viewport.
-
-```jsx
-<CContainer fluid>
-  Content here
-</CContainer>
-```
-
-## API
-
-### CContainer
-
-`markdown:CContainer.api.mdx`
diff --git a/packages/docs/content/layout/grid.mdx b/packages/docs/content/layout/grid.mdx
deleted file mode 100644
index e4124778..00000000
--- a/packages/docs/content/layout/grid.mdx
+++ /dev/null
@@ -1,352 +0,0 @@
----
-name: Grid
-title: Grid
-description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
-menu: Layout
-route: "/layout/grid"
----
-
-import { CCol, CContainer, CRow } from '@coreui/react'
-
-## Example
-
-CoreUI's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol sm="auto">One of three columns</CCol>
-    <CCol sm="auto">One of three columns</CCol>
-    <CCol sm="auto">One of three columns</CCol>
-  </CRow>
-</CContainer>
-```
-
-The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent `<CContainer>`.
-
-## How it works
-
-Breaking it down, here's how the grid system comes together:
-
-- **Our grid supports [six responsive breakpoints](../breakpoints).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `sm={4}` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint.
-
-- **Containers center and horizontally pad your content.** Use `<CContainer>` for a responsive pixel width, `<CContainer fluid>` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `<CContainer md>`) for a combination of fluid and pixel widths.
-
-- **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](#row-columns) and [gutter classes](../gutters) to change the spacing of your content.
-
-- **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `CCol xs={4}` spans four). `width`s are set in percentages so you always have the same relative sizing.
-
-- **Gutters are also responsive and customizable.** [Gutter classes are available](../gutters) across all breakpoints, with all the same sizes as our [margin and padding spacing](https://coreui.io/docs/utilities/spacing/). Change horizontal gutters with `xs|sm|md|lg|xl|xxl={{ gutterX: * }}` classes, vertical gutters with `xs|sm|md|lg|xl|xxl={{ gutterY: * }}`, or all gutters with `xs|sm|md|lg|xl|xxl={{ gutter: * }}` classes. `xs|sm|md|lg|xl|xxl={{ gutter: 0 }}` is also available to remove gutters.
-
-Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
-
-## Grid options
-
-CoreUI's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
-
-- Extra small (xs)
-- Small (sm)
-- Medium (md)
-- Large (lg)
-- Extra large (xl)
-- Extra extra large (xxl)
-
-As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
-
-{<div className="table-responsive">
-  <table className="table mb-4">
-    <thead>
-      <tr>
-        <th scope="col"></th>
-        <th scope="col">
-          xs
-          <div className="fw-normal">&lt;576px</div>
-        </th>
-        <th scope="col">
-          sm
-          <div className="fw-normal">&ge;576px</div>
-        </th>
-        <th scope="col">
-          md
-          <div className="fw-normal">&ge;768px</div>
-        </th>
-        <th scope="col">
-          lg
-          <div className="fw-normal">&ge;992px</div>
-        </th>
-        <th scope="col">
-          xl
-          <div className="fw-normal">&ge;1200px</div>
-        </th>
-        <th scope="col">
-          xxl
-          <div className="fw-normal">&ge;1400px</div>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th className="text-nowrap" scope="row">Container <code className="fw-normal">max-width</code></th>
-        <td>None (auto)</td>
-        <td>540px</td>
-        <td>720px</td>
-        <td>960px</td>
-        <td>1140px</td>
-        <td>1320px</td>
-      </tr>
-      <tr>
-        <th className="text-nowrap" scope="row">Class prefix</th>
-        <td><code>.col-</code></td>
-        <td><code>.col-sm-</code></td>
-        <td><code>.col-md-</code></td>
-        <td><code>.col-lg-</code></td>
-        <td><code>.col-xl-</code></td>
-        <td><code>.col-xxl-</code></td>
-      </tr>
-      <tr>
-        <th className="text-nowrap" scope="row"># of columns</th>
-        <td colSpan={6}>12</td>
-      </tr>
-      <tr>
-        <th className="text-nowrap" scope="row">Gutter width</th>
-        <td colSpan={6}>1.5rem (.75rem on left and right)</td>
-      </tr>
-      <tr>
-        <th className="text-nowrap" scope="row">Custom gutters</th>
-        <td colSpan={6}><a href="../gutters">Yes</a></td>
-      </tr>
-      <tr>
-        <th className="text-nowrap" scope="row">Nestable</th>
-        <td colSpan={6}><a href="#nesting">Yes</a></td>
-      </tr>
-      <tr>
-        <th className="text-nowrap" scope="row">Column ordering</th>
-        <td colSpan={6}><a href="../columns#reordering">Yes</a></td>
-      </tr>
-    </tbody>
-  </table>
-</div>}
-
-## Auto-layout columns
-
-Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `<CCol sm={6}>`.
-
-### Equal-width
-
-For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
-
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol>1 of 2</CCol>
-    <CCol>2 of 2</CCol>
-  </CRow>
-  <CRow>
-    <CCol>1 of 3</CCol>
-    <CCol>2 of 3</CCol>
-    <CCol>3 of 3</CCol>
-  </CRow>
-</CContainer>
-```
-
-### Setting one column width
-
-Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol>1 of 3</CCol>
-    <CCol xs={6}>2 of 3 (wider)</CCol>
-    <CCol>3 of 3</CCol>
-  </CRow>
-  <CRow>
-    <CCol>1 of 3</CCol>
-    <CCol xs={6}>2 of 3 (wider)</CCol>
-    <CCol>3 of 3</CCol>
-  </CRow>
-</CContainer>
-```
-
-### Variable width content
-
-Use `<CCol {breakpoint}="auto"` props to size columns based on the natural width of their content.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <div className="row justify-content-md-center">
-    <CCol xs lg={2}>
-      1 of 3
-    </CCol>
-    <CCol md="auto">Variable width content</CCol>
-    <CCol xs lg={2}>
-      3 of 3
-    </CCol>
-  </div>
-  <CRow>
-    <CCol>1 of 3</CCol>
-    <CCol md="auto">Variable width content</CCol>
-    <CCol xs lg={2}>
-      3 of 3
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-## Responsive classes
-
-CoreUI's grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
-
-### All breakpoints
-
-For grids that are the same from the smallest of devices to the largest, use the `<CCol>` and `<CCol xs={*}>` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `<CCol>`.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol>col</CCol>
-    <CCol>col</CCol>
-    <CCol>col</CCol>
-    <CCol>col</CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={8}>col-8</CCol>
-    <CCol xs={4}>col-4</CCol>
-  </CRow>
-</CContainer>
-```
-
-### Stacked to horizontal
-
-Using a single set of `<CCol sm={*}>` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol sm={8}>col-sm-8</CCol>
-    <CCol sm={4}>col-sm-4</CCol>
-  </CRow>
-  <CRow>
-    <CCol sm>col-sm</CCol>
-    <CCol sm>col-sm</CCol>
-    <CCol sm>col-sm</CCol>
-  </CRow>
-</CContainer>
-```
-
-### Mix and match
-
-Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow>
-    <CCol md={8}>.col-md-8</CCol>
-    <CCol xs={6} md={4}>
-      .col-6 .col-md-4
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={6} md={4}>
-      .col-6 .col-md-4
-    </CCol>
-    <CCol xs={6} md={4}>
-      .col-6 .col-md-4
-    </CCol>
-    <CCol xs={6} md={4}>
-      .col-6 .col-md-4
-    </CCol>
-  </CRow>
-  <CRow>
-    <CCol xs={6}>.col-6</CCol>
-    <CCol xs={6}>.col-6</CCol>
-  </CRow>
-</CContainer>
-```
-
-### Row columns
-
-Use the responsive `{breakpoint}={{ cols: * }}` classes to quickly set the number of columns that best render your content and layout. Whereas normal `<CCol xs={*}>` classes apply to the individual columns (e.g., `<CCol xs={4}>`), the row columns classes are set on the parent `<CRow>` as a shortcut. With `{breakpoint}={{ cols: 'auto' }}` you can give the columns their natural width.
-
-Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 2 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 3 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 'auto' }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 4 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 4 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol xs={6}>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-```jsx preview className="docs-example-row"
-<CContainer>
-  <CRow xs={{ cols: 1 }} sm={{ cols: 2 }} md={{ cols: 4 }}>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-    <CCol>Column</CCol>
-  </CRow>
-</CContainer>
-```
-
-## API
-
-### CContainer
-
-`markdown:CContainer.api.mdx`
-
-### CRow
-
-`markdown:CRow.api.mdx`
-
-### CCol
-
-`markdown:CCol.api.mdx`
diff --git a/packages/docs/content/layout/gutters.mdx b/packages/docs/content/layout/gutters.mdx
deleted file mode 100644
index af9d3ff6..00000000
--- a/packages/docs/content/layout/gutters.mdx
+++ /dev/null
@@ -1,181 +0,0 @@
----
-name: Gutters
-title: Gutters
-description: Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for React.js grid system.
-menu: Layout
-route: "/layout/gutters"
----
-
-import { CCol, CContainer, CRow } from '@coreui/react'
-
-## How they work
-
-- **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content.
-
-- **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [padding and margin spacers](https://coreui.io/docs/utilities/spacing) scale.
-
-- **Gutters can be responsively adjusted.** Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters.
-
-## Horizontal gutters
-
-`{breakpoint}={{ gutterX: * }}` props can be used to control the horizontal gutter widths. The `<CContainer>` or `<CContainer fluid>` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
-
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer className="px-4">
-  <CRow xs={{ gutterX: 5 }}>
-    <CCol>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-An alternative solution is to add a wrapper around the `<CRow>` with the `.overflow-hidden` class:
-
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer className="overflow-hidden">
-  <CRow xs={{ gutterX: 5 }}>
-    <CCol>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-## Vertical gutters
-
-`{breakpoint}={{ gutterY: * }}` props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `<CRow>` at the end of a page. If this occurs, you add a wrapper around `<CRow>` with the `.overflow-hidden` class:
-
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer className="overflow-hidden">
-  <CRow xs={{ gutterY: 5 }}>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-## Horizontal & vertical gutters
-
-`{breakpoint}={{ gutter: * }}` props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
-
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer>
-  <CRow xs={{ gutter: 2 }}>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-    <CCol xs={{ span: 6 }}>
-      <div className="p-3">Custom column padding</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-## Row columns gutters
-
-Gutter props can also be added to [row columns](../layout/grid#row-columns). In the following example, we use responsive row columns and responsive gutter props.
-
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-<CContainer>
-  <CRow xs={{ cols:2, gutter: 2 }} lg={{ cols: 5, gutter: 3}}>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-    <CCol>
-      <div className="p-3">Row column</div>
-    </CCol>
-  </CRow>
-</CContainer>
-```
-
-## No gutters
-
-The gutters between columns in our predefined grid props can be removed with `{breakpoint}={{ gutter: 0 }}`. This removes the negative `margin`s from `<CRow>` and the horizontal `padding` from all immediate children columns.
-
-**Need an edge-to-edge design?** Drop the parent `<CContainer>` or `<CContainer fluid>`.
-
-In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more).
-
-```jsx preview className="docs-example m-0 border-0 docs-example-row"
-<CRow xs={{ gutter: 0 }}>
-  <CCol sm={6} md={8}>.col-sm-6 .col-md-8</CCol>
-  <CCol xs={6} md={4}>.col-6 .col-md-4</CCol>
-</CRow>
-```
-
-## Change the gutters
-
-Classes are built from the `$gutters` Sass map which is inherited from the `$spacers` Sass map.
-
-```scss
-$grid-gutter-width: 1.5rem;
-$gutters: (
-  0: 0,
-  1: $spacer * .25,
-  2: $spacer * .5,
-  3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3,
-);
-```
-
-## API
-
-### CContainer
-
-`markdown:CContainer.api.mdx`
-
-### CRow
-
-`markdown:CRow.api.mdx`
-
-### CCol
-
-`markdown:CCol.api.mdx`
diff --git a/packages/docs/content/migration/v4.mdx b/packages/docs/content/migration/v4.mdx
deleted file mode 100644
index d1139895..00000000
--- a/packages/docs/content/migration/v4.mdx
+++ /dev/null
@@ -1,408 +0,0 @@
----
-title: Migration to v4
-description: Track and review changes to the CoreUI for React.js components to help you migrate from v3 to v4.
-menu: "Migration"
-route: "/migration/v4"
----
-
-CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/docs/migration/v4/).
-
-## Components
-
-### CAlert
-
-- Deprecated property `innerRef`.
-- Deprecated property `fade`.
-- Deprecated property `onShowChange`.
-- Deprecated property `closeButton`, use `dismissible` instead of.
-- Deprecated property `show`, use `visible` instead of.
-
-### CBadge
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-### CBreadcrumb
-
-- Deprecated property `innerRef`.
-
-#### CBreadcrumbItem
-
-- Deprecated property `innerRef`.
-
-### CButton
-
-- Deprecated property `block`.
-- Deprecated property `innerRef`.
-- Deprecated property `pressed`.
-- Deprecated property `tag`, use `component` instead of.
-
-### CCallout
-
-- Deprecated property `innerRef`.
-
-### CCard
-
-- Deprecated property `innerRef`.
-- Deprecated property `accentColor`, use utilities `className="border-top-{#color} border-top-3"` instead of.
-
-#### CCardBody
-
-- Deprecated property `innerRef`.
-
-#### CCardFooter
-
-- Deprecated property `innerRef`.
-
-#### CCardGroup
-
-- Deprecated property `columns`.
-- Deprecated property `deck`.
-- Deprecated property `innerRef`.
-
-#### CCardHeader
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CCardImg
-
-- **Component renamed to `CCardImg`**
-- Deprecated property `variant`, use `orientation` instead of.
-
-#### CCardImgOverlay
-
-- **Component renamed to `CCardImgOverlay`**
-- Deprecated property `innerRef`.
-- Deprecated property `tag`.
-
-#### CCardSubtitle
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CCardText
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CCardTitle
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-### CCarousel
-
-- Deprecated property `autoSlide`.
-- Deprecated property `innerRef`.
-- Deprecated property `activeIndex`, use `index` instead of.
-
-#### CCarouselControl
-
-- Component is depracated, use `<CCarousel controls>` instead of. 
-
-#### CCarouselIndicators
-
-- Component is depracated, use `<CCarousel indicators>` instead of. 
-
-#### CCarouselInner
-
-- Component is depracated. 
-
-### CCollapse
-
-- Deprecated property `innerRef`.
-- Deprecated property `navbar`.
-- Deprecated property `show`, use `visible` instead of.
-
-#### CCreateElement
-
-- Component is depracated. 
-
-### CDropdown
-
-- Deprecated property `innerRef`.
-- Deprecated property `inNav`, use `variant="nav-item"` instead of.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CDropdownitem
-
-- Deprecated property `color`.
-- Deprecated property `divider`.
-- Deprecated property `innerRef`.
-- Deprecated property `header`.
-- Deprecated property `onClick`.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CDropdownMenu
-
-- Deprecated property `innerRef`.
-- Deprecated property `modifiers`.
-- Deprecated property `placement` , use `<CDropdown placement="...">` instead of.
-- Deprecated property `show` , use `<CDropdown visible>` instead of.
-
-#### CDropdownToggle
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-### CEmbed
-
-- Component is depracated.
-
-### CFade
-
-- Component is depracated.
-
-### CHeader
-
-- Deprecated property `withSubheader`.
-- Deprecated component `CHeaderNavItem`, use `CNavItem` instead of.
-- Deprecated component `CHeaderNavLink`, use `CNavLink` instead of.
-
-### CImg
-
-- **Component renamed to `CImage`**
-- Deprecated property `block`.
-- Deprecated property `innerRef`.
-- Deprecated property `fluidGrow`.
-- Deprecated property `placeholderColor`.
-- Deprecated property `shape`.
-- Deprecated property `tag`.
-
-### CJumbotron
-
-- Component is depracated.
-
-### CListGroup
-
-- Deprecated property `accent`.
-- Deprecated property `horizontal`, use `layout` instead of.
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CListGroupItem
-
-- Deprecated property `accent`.
-- Deprecated property `action`, use property `component="a"` or `component="button"` instead of. 
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-### CMedia
-
-- Component is depracated.
-
-### CModal
-
-- Deprecated property `addContentClass`.
-- Deprecated property `borderColor`, use utilities `className="border border-{#color}"` instead of.
-- Deprecated property `centered`.
-- Deprecated property `closeOnBackdrop`.
-- Deprecated property `fade`, use `transition` instead of.
-- Deprecated property `innerRef`.
-- Deprecated property `onClosed`.
-- Deprecated property `onOpened`.
-- Deprecated property `show`, use `visible` instead of.
-
-#### CModalBody
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`.
-
-#### CModalFooter
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`.
-
-#### CModalHeader
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`.
-
-### CNav
-
-- Deprecated property `inCard`.
-- Deprecated property `innerRef`.
-- Deprecated property `fill`, use `layout="fill"` instead of.
-- Deprecated property `justified`, use `layout="justified"` instead of.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CNavItem
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CNavLink
-
-- Deprecated property `innerRef`.
-
-### CNavbar
-
-- Deprecated property `expandable`, use `expand` instead of.
-- Deprecated property `fixed`, use `placement="fixed-top"` instead of.
-- Deprecated property `innerRef`.
-- Deprecated property `light`, use `colorScheme="light"` instead of.
-- Deprecated property `sticky`, use `placement="sticky-top"` instead of.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CNavbarNav
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-#### CNavbarText
-
-- Deprecated property `innerRef`.
-- Deprecated property `tag`, use `component` instead of.
-
-### CPagination
-
-- **The component has been split into `CPagination` and to `CSmartPagination` components.
-
-### CPopover
-
-- Deprecated property `header`, use `title` instead of.
-
-### CProgress
-
-- Deprecated property `innerRef`.
-- Deprecated property `max`.
-- Deprecated property `precision`.
-- Deprecated property `showPercentage`.
-- Deprecated property `showValue`.
-- Deprecated property `size`, use `height` instead of.
-- Deprecated property `striped`, use `variant="striped"` instead of.
-
-### CProgressBar
-
-- Deprecated property `innerRef`.
-- Deprecated property `max`.
-- Deprecated property `precision`.
-- Deprecated property `showPercentage`.
-- Deprecated property `showValue`.
-- Deprecated property `size`, use `height` instead of.
-- Deprecated property `striped`, use `variant="striped"` instead of.
-
-### CSidebar
-- Deprecated property `minimize` use `narrow` instead of.
-- Deprecated property `dropdownMode`.
-- Deprecated component `CSidebarForm`, use `CForm` instead of.
-- Deprecated component `CSidebarNavDivider`, use `CNavDivider` instead of.
-- Deprecated component `CSidebarNavDropdown`, use `CNavGroup` instead of.
-- Deprecated component `CSidebarNavLink`, use `CNavLink` instead of.
-- Deprecated component `CSidebarNavItem`, use `CNavItem` instead of.
-- Deprecated component `CSidebarNavTitile`, use `CNavTitle` instead of.
-
-### CSwitch
-
-- Component is depracated, use `CFormSwitch` instead of.
-
-### CSpinner
-
-- Deprecated property `innerRef`.
-- Deprecated property `grow`, use `variant="grow"` instead of.
-- Deprecated property `tag`, use `component` instead of.
-
-### CTabs
-
-- Component is depracated, use `<CNav variant="tabs" role="tablist">` instead of
-
-#### CTabContent
-
-- Deprecated property `innerRef`.
-- Deprecated property `fade`.
-
-#### CTabPane
-
-- Deprecated property `active`, use `visible` instead of.
-- Deprecated property `innerRef`.
-
-### CToast
-
-- Deprecated property `innerRef`.
-- Deprecated property `fade`, use `animation` instead of.
-- Deprecated property `show`, use `visible` instead of.
-- Deprecated property `onStateChange`.
-
-#### CToastBody
-
-- Deprecated property `innerRef`.
-
-#### CToastHeader
-
-- Deprecated property `innerRef`.
-
-
-### CToggler
-
-- Component is depracated.
-
-### CTooltip
-
-- Deprecated property `interactive`.
-- Deprecated property `advancedOptions`.
-
-
-## Forms
-
-### CFormGroup
-
-- Component is depracated.
-
-### CInput
-
-- **Component renamed to `CFormInput`**
-- Deprecated property `plaintext`, use `plainText` instead of.
-
-### CInputCheckbox
-
-- Component is depracated, use `<CFormCheck>` instead of.
-
-### CInputFile
-
-- Component is depracated, use `<CFormInput type="file">` instead of.
-
-### CInputRadio
-
-- Component is depracated, use `<CFormCheck type="radio">` instead of.
-
-### CInputGroup
-
-- Deprecated property `innerRef`.
-
-#### CInputGroupAddon
-
-- Component is depracated, use `CInputGroupText` instead of.
-
-### CSelect
-
-- Component is depracated, use `<CFormSelect>` instead of.
-
-### CValidFeedback
-
-- Component is depracated, use `<CFormFeedback valid>` instead of.
-
-### CInvalidFeedback
-
-- Component is depracated, use `<CCFormFeedback invalid>` instead of.
-
-## Layout
-
-### CContainer
-
-- Deprecated property `tag`.
-- Deprecated property `innerRef`.
-
-### CCol
-
-- Deprecated property `tag`.
-- Deprecated property `width`, use `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.
-
-### CRow
-
-- Deprecated property `alignHorizontal`.
-- Deprecated property `alignVertical`.
-- Deprecated property `form`.
-- Deprecated property `gutters`.
-- Deprecated property `tag`.
-- Deprecated property `width`, use `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.
\ No newline at end of file
diff --git a/packages/docs/content/migration/v5.mdx b/packages/docs/content/migration/v5.mdx
deleted file mode 100644
index 9513a96c..00000000
--- a/packages/docs/content/migration/v5.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: Migration to v5
-description: Track and review changes to the CoreUI for React.js components to help you migrate from v4 to v5.
-menu: "Migration"
-route: "/migration/v5"
----
-
-CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 4 to 5 migration guide](https://coreui.io/docs/migration/v5/).
-
-## Components
-
-### CAlertHeading
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CAvatar
-
-- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
-- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.
-
-### CBadge
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
-- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.
-
-### CButton
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-- <span class="badge bg-danger">Breaking</span> The button doesn't have a default color anymore, you have to add `color="primary"`
-
-### CCard
-
-- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
-- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.
-
-### CCardHeading
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CCardImage
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CCardSubtitle
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CCardText
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CCardTitle
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CCloseButton
-
-- Deprecated property `white`, use `dark` instead of.
-
-### CDropdown
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CDropdownHeader
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CDropdownItem
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CDropdownItemPlain
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CDropdownMenu
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CDropdownToggle
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CFormFeedback
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CFormText
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CHeaderBrand
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CHeaderNav
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CInputGroupText
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CLink
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CListGroup
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CListGroupItem
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CModalTitle
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CNav
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-- <span class="badge bg-danger">Breaking</span> The `underline` variant has been changed to `underline-border`
-
-### CNavbar
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CNavbarBrand
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CNavbarNav
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CNavItem
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CNavLink
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CNavTitle
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### COffcanvasTitle
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CPaginationItem
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CPlaceholder
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CSidebar
-
-- <span class="badge bg-danger">Breaking</span> Sidebar has a light color scheme by default, use `colorScheme="dark"` to make it dark.
-
-### CSpinner
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-
-### CToastClose
-
-- <span class="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
-- Deprecated property `white`, use `dark` instead of.
diff --git a/packages/docs/content/templates/admin-dashboard.mdx b/packages/docs/content/templates/admin-dashboard.mdx
deleted file mode 100644
index 4766c72d..00000000
--- a/packages/docs/content/templates/admin-dashboard.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: React Templates
-name: React Templates
-description: Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize react admin panels to cover any requirement.
-menu: Templates
-route: /templates/admin-dashboard
----
-
-import {
-  CCard,
-  CCardBody,
-  CCardSubtitle,
-  CCardTitle,
-  CCol,
-  CImage,
-  CLink,
-  CRow 
-} from '@coreui/react'
-
-## React Admin & Dashboard Templates
-
-Check out the fully-featured, ready-to-use admin dashboard templates built using CoreUI for React.js, and CoreUI PRO for React.js
-
-<CRow>
-  <CCol md={6}>
-    <CCard className="mb-4">
-      <CCardBody>
-        <CLink className="text-decoration-none text-reset" href="https://coreui.io/react/#compare" target="_blank">
-          <CCardTitle>Free React Admin Template</CCardTitle>
-          <CCardSubtitle className="mb-3 text-body-secondary">Default Theme</CCardSubtitle>
-          <CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_free_1440.webp" alt=""/>
-        </CLink>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol md={6}>
-    <CCard className="mb-4">
-      <CCardBody>
-        <CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=default-v3" target="_blank">
-          <CCardTitle>React Dashboard Template</CCardTitle>
-          <CCardSubtitle className="mb-3 text-body-secondary">Default Theme v3</CCardSubtitle>
-          <CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_v3_1440.webp" alt=""/>
-        </CLink>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol md={6}>
-    <CCard className="mb-4">
-      <CCardBody>
-        <CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=light-v3" target="_blank">
-          <CCardTitle>React Dashboard Template</CCardTitle>
-          <CCardSubtitle className="mb-3 text-body-secondary">Light Theme v3</CCardSubtitle>
-          <CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_v3_1440.webp" alt=""/>
-        </CLink>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol md={6}>
-    <CCard className="mb-4">
-      <CCardBody>
-        <CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=default" target="_blank">
-          <CCardTitle>React Dashboard Template</CCardTitle>
-          <CCardSubtitle className="mb-3 text-body-secondary">Default Theme</CCardSubtitle>
-          <CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_1440.webp" alt=""/>
-        </CLink>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol md={6}>
-    <CCard className="mb-4">
-      <CCardBody>
-        <CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=light" target="_blank">
-          <CCardTitle>React Dashboard Template</CCardTitle>
-          <CCardSubtitle className="mb-3 text-body-secondary">Light Theme</CCardSubtitle>
-          <CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_1440.webp" alt=""/>
-        </CLink>
-      </CCardBody>
-    </CCard>
-  </CCol>
-  <CCol md={6}>
-    <CCard className="mb-4">
-      <CCardBody>
-        <CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=dark" target="_blank">
-          <CCardTitle>React Dashboard Template</CCardTitle>
-          <CCardSubtitle className="mb-3 text-body-secondary">Dark Theme</CCardSubtitle>
-          <CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_dark_1440.webp" alt=""/>
-        </CLink>
-      </CCardBody>
-    </CCard>
-  </CCol>
-</CRow>
\ No newline at end of file
diff --git a/packages/docs/content/templates/contents.mdx b/packages/docs/content/templates/contents.mdx
deleted file mode 100644
index c11998d1..00000000
--- a/packages/docs/content/templates/contents.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: React templates contents
-name: React templates contents
-description: Discover what's included in CoreUI React Admin Template, including our precompiled and source code flavors.
-menu: Templates
-route: /templates/contents
----
-
-## Project structure
-
-Once downloaded, unzip the compressed folder and you'll see something like this:
-
-```text
-coreui-react-admin-template/
-├── public/
-├── src/
-│   ├── assets/
-│   │   ├── brand/
-│   │   └── images/
-│   ├── components/
-│   ├── layout/
-│   ├── scss/
-│   └── views/
-│       ├── base/
-│       ├── buttons/
-│       ├── css/
-│       ├── icons/
-│       ├── notifications/
-│       ├── App.js
-│       ├── App.test.js
-│       ├── _nav.js
-│       ├── index.js
-│       ├── reportWebVitals.js
-│       ├── routes.js
-│       ├── setupTests.js
-│       └── store.js
-└── package.json
-```
-
-This is the most basic form of CoreUI React Admin Templates.
diff --git a/packages/docs/content/templates/customize.mdx b/packages/docs/content/templates/customize.mdx
deleted file mode 100644
index 740e3f2a..00000000
--- a/packages/docs/content/templates/customize.mdx
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: Customize react templates
-name: Customize react templates
-description: Learn how to theme, customize, and extend CoreUI React Templates with Sass, a boatload of global options.
-menu: Templates
-route: /templates/customize
----
-
-## Overview
-
-There are multiple ways to customize CoreUI for React. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for React you're using, browser support, and more.
-
-Our two preferred methods are:
-
-1. You can extend our source files.
-2. You can override CoreUI’s styles.
-
-## File structure
-
-Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
-
-Whenever possible, avoid modifying CoreUI's core files. For Sass, that means creating your own stylesheet that imports CoreUI for React so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
-
-```text
-your-project/
-├── ...
-├── node_modules/
-│   ├── @coreui/coreui
-│   │   ├── scss
-│   │   └── ...
-│   └── @coreui/react
-│       └── ...
-├── src
-│   └── scss
-│       ├── _custom.scss
-│       ├── ...
-│       ├── _variables.scss
-│       └── ...
-└── ...
-```
-
-## Variable defaults
-
-Every Sass variable in CoreUI for React includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying CoreUI's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in CoreUI.
-
-You will find the complete list of CoreUI's variables in `node_modules/@coreui/coreui/scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. You can also find a specific component variables list in **Customizing** section ex. [Alerts - Customizing](https://coreui.io/react/docs/components/alerts#customizing)
-
-Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling CoreUI for React via npm:
-
-```scss
-// _variables.scss
-
-// Default variable overrides
-$body-bg: #000;
-$body-color: #111;
-```
-
-## Custom styles and overrides
-
-In your `custom.scss`, you can put custom code for CoreUI's components or your own styles.
-
-```scss
-// _custom.scss
-
-// Additional custom code here
-.custom-component {
-  border: 2px solid #222;
-}
-```
diff --git a/packages/docs/content/templates/download.mdx b/packages/docs/content/templates/download.mdx
deleted file mode 100644
index af732f34..00000000
--- a/packages/docs/content/templates/download.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Download react templates
-name: Download react templates
-description: Download CoreUI React Admin Templates to get the source code that lets you customize and create your react-based application.
-route: /templates/download
----
-
-## Source files
-
-Compile CoreUI React Admin with your own asset pipeline by downloading our source Sass, and JavaScript files. This option requires some additional tooling:
-
-- Create React App
-- React, React Dom, React Router
-- Redux
-- Sass compiler for compiling your CSS.
-
-<a href="https://coreui.io/product/free-react-admin-template/" className="btn btn-primary">Download</a>
-
-<br/><br/>
-
-### Clone repo
-
-You can also fork [CoreUI React Admin Template's repository](https://github.com/coreui/coreui-free-react-admin-template.git).
-
-```sh
-git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project
-```
diff --git a/packages/docs/content/templates/installation.mdx b/packages/docs/content/templates/installation.mdx
deleted file mode 100644
index 485dbe61..00000000
--- a/packages/docs/content/templates/installation.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: React templates installation
-name: React templates installation
-description: Learn how to use CoreUI React Admin Dashboard Templates including npm scripts to build templates, compile source code, run tests, and more.
-menu: Templates
-route: /templates/admin-dashboard
----
-
-## Tooling setup
-
-CoreUI React Admin Templates uses [npm scripts](https://docs.npmjs.com/misc/scripts/) for its build system. Our `package.json` includes convenient methods for working with the framework, including compiling code, running tests, and more.
-
-To use our build system and run our admin template locally, you'll need a copy of source files and Node. Follow these steps and you should be ready to rock:
-
-1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies.
-2. If you prefer to use Yarn instead of NPM, you have to [download and install it](https://classic.yarnpkg.com/lang/en/docs/install/)
-3. [Download CoreUI React Admin Template](https://coreui.io/product/free-react-admin-template/).
-4. Navigate to the root template directory and run `npm install` or `yarn install` to install our local dependencies listed in `package.json`.
-
-When completed, you'll be able to run the various commands provided from the command line.
-
-## Using npm scripts
-
-Our `package.json` includes numerous tasks for developing the project. Run `npm run` or `yarn run` to see all the npm scripts in your terminal. **Primary tasks include:**
-
-| Task | Description |
-| --- | --- |
-| `npm start` or `yarn start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
-| `npm run build` or `yarn build` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer). |
-| `npm test` or `yarn test` | Runs tests locally  |
-
-## Sass
-
-CoreUI uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline.
-
-Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.
-
-## Autoprefixer
-
-We uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
-
-We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See `.browserslistrc`.
-
-## Local template
-
-Here's how to get it started:
-
-1. Run through the [tooling setup](#tooling-setup) above to install all dependencies.
-2. From the root template directory, run `npm run start` or `yarn start` in the command line.
-3. Open `http://localhost:3000` in your browser, and voilà.
-
-## Troubleshooting
-
-Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install` or `yarn install`.
diff --git a/packages/docs/gatsby-browser.tsx b/packages/docs/gatsby-browser.tsx
deleted file mode 100644
index 3eb149f6..00000000
--- a/packages/docs/gatsby-browser.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { ReactNode } from 'react'
-import '@docsearch/css'
-import DefaultLayout from './src/templates/DefaultLayout'
-import DocsLayout from './src/templates/DocsLayout'
-import './src/styles/styles.scss'
-import './src/styles/search.scss'
-
-export const wrapRootElement = ({ element }: { element: ReactNode }) => {
-  return <DefaultLayout>{element}</DefaultLayout>
-}
-
-export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => {
-  const path = props.location.pathname
-  if (path.endsWith('/bootstrap') || path.endsWith('/bootstrap/')) {
-    require('./src/styles/bootstrap-examples.scss')
-  }
-  return <DocsLayout {...props}>{element}</DocsLayout>
-}
diff --git a/packages/docs/gatsby-config.mjs b/packages/docs/gatsby-config.mjs
deleted file mode 100644
index 99256c61..00000000
--- a/packages/docs/gatsby-config.mjs
+++ /dev/null
@@ -1,110 +0,0 @@
-import remarkGfm from 'remark-gfm'
-import remarkCodeTabs from 'remark-code-tabs'
-
-import { dirname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-const config = {
-  siteMetadata: {
-    title: `CoreUI for React.js`,
-    titleTemplate: `%s · React UI Components · CoreUI `,
-    description: `CoreUI for React.js is UI Component library written in TypeScript, and ready for your next React.js project.`,
-    author: `@coreui_io`,
-    url: `https://coreui.io/react/docs/`,
-    siteUrl: `https://coreui.io/react/docs/`,
-    image: ``, // Path to your image you placed in the `static` folder
-    twitterUsername: `@coreui_io`,
-  },
-  pathPrefix: `/react/docs/`,
-  plugins: [
-    `gatsby-plugin-image`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
-    },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        icon: `${__dirname}/src/assets/images/brand/icon.png`,
-        name: `CoreUI for React.js`,
-        short_name: `CoreUI for React.js`,
-        start_url: `https://coreui.io/react/`,
-        background_color: `#fff`,
-        theme_color: `#321fdb`,
-        display: `standalone`,
-      },
-    },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `docs`,
-        path: `${__dirname}/content/`,
-      },
-    },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `scss`,
-        path: `./../../node_modules/@coreui/coreui/scss/`,
-      },
-    },
-    {
-      resolve: `gatsby-plugin-mdx`,
-      options: {
-        mdxOptions: {
-          remarkPlugins: [remarkGfm, remarkCodeTabs],
-        },
-        gatsbyRemarkPlugins: [
-          {
-            resolve: `gatsby-remark-import-markdown`,
-            options: {
-              directory: `${__dirname}/content/api/`,
-            },
-          },
-          `gatsby-remark-jsx-preview`,
-          {
-            resolve: `gatsby-remark-autolink-headers`,
-            options: {
-              className: `anchor-link`,
-              icon: `<span>#</span>`,
-              isIconAfterHeader: true,
-            },
-          },
-          {
-            resolve: 'gatsby-remark-external-links',
-            options: {
-              target: '_blank',
-              rel: 'nofollow',
-            },
-          },
-        ],
-      },
-    },
-    `gatsby-plugin-sass`,
-    `gatsby-plugin-typescript`,
-    {
-      resolve: `gatsby-plugin-sitemap`,
-      options: {
-        output: `/sitemap-react.xml`,
-      },
-    },
-    {
-      resolve: `gatsby-plugin-google-tagmanager`,
-      options: {
-        id: `GTM-KX4JH47`,
-      },
-    },
-    {
-      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
-    },
-  ],
-}
-
-export default config
diff --git a/packages/docs/gatsby-node.mjs b/packages/docs/gatsby-node.mjs
deleted file mode 100644
index 3deb22e8..00000000
--- a/packages/docs/gatsby-node.mjs
+++ /dev/null
@@ -1,103 +0,0 @@
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { createFilePath } from 'gatsby-source-filesystem'
-import { glob } from 'glob'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-export const onCreateWebpackConfig = ({ actions }) => {
-  const { setWebpackConfig } = actions
-
-  // Find all 'examples' directories
-  const examplePaths = glob.sync(resolve(__dirname, 'content/**/**/examples'))
-
-  // Create Webpack alias
-  setWebpackConfig({
-    resolve: {
-      alias: {
-        '@coreui/react': resolve(__dirname, '..', 'coreui-react/src/index.ts'),
-        '@example': examplePaths, // Adds all paths to a single alias
-      },
-    },
-  })
-}
-
-export const onCreateNode = async ({
-  node,
-  loadNodeContent,
-  actions: { createNodeField },
-  getNode,
-}) => {
-  if (node.internal.type === 'Mdx') {
-    const slug = createFilePath({ node, getNode })
-
-    createNodeField({
-      node,
-      name: 'slug',
-      value: `${slug}`,
-    })
-  }
-
-  if (node.ext === '.scss') {
-    const nodeContent = await loadNodeContent(node)
-    createNodeField({
-      node,
-      name: `content`,
-      value: nodeContent,
-    })
-  }
-}
-
-export const createPages = async ({
-  graphql,
-  actions: { createPage, createRedirect },
-  reporter,
-}) => {
-  const result = await graphql(`
-    query {
-      allMdx(filter: { fields: { slug: { regex: "/^(?!/api/).*/" } } }) {
-        nodes {
-          id
-          fields {
-            slug
-          }
-          frontmatter {
-            route
-          }
-          internal {
-            contentFilePath
-          }
-          tableOfContents(maxDepth: 3)
-        }
-      }
-    }
-  `)
-
-  if (result.errors) {
-    reporter.panicOnBuild('Error loading MDX result', result.errors)
-  }
-
-  const posts = result.data.allMdx.nodes
-
-  if (posts.length > 0) {
-    posts.forEach((node) => {
-      createPage({
-        path: node.fields.slug,
-        component: `${resolve(`./src/templates/MdxLayout.tsx`)}?__contentFilePath=${
-          node.internal.contentFilePath
-        }`,
-        context: {
-          id: node.id,
-          route: node.frontmatter.route,
-          regex: `/^${node.frontmatter.route}/`,
-        },
-      })
-    })
-    createRedirect({
-      fromPath: `/`,
-      toPath: `/getting-started/introduction/`,
-      redirectInBrowser: true,
-      isPermanent: true,
-    })
-  }
-}
diff --git a/packages/docs/gatsby-ssr.tsx b/packages/docs/gatsby-ssr.tsx
deleted file mode 100644
index 3eb149f6..00000000
--- a/packages/docs/gatsby-ssr.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { ReactNode } from 'react'
-import '@docsearch/css'
-import DefaultLayout from './src/templates/DefaultLayout'
-import DocsLayout from './src/templates/DocsLayout'
-import './src/styles/styles.scss'
-import './src/styles/search.scss'
-
-export const wrapRootElement = ({ element }: { element: ReactNode }) => {
-  return <DefaultLayout>{element}</DefaultLayout>
-}
-
-export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => {
-  const path = props.location.pathname
-  if (path.endsWith('/bootstrap') || path.endsWith('/bootstrap/')) {
-    require('./src/styles/bootstrap-examples.scss')
-  }
-  return <DocsLayout {...props}>{element}</DocsLayout>
-}
diff --git a/packages/docs/package.json b/packages/docs/package.json
deleted file mode 100644
index c7bc49c3..00000000
--- a/packages/docs/package.json
+++ /dev/null
@@ -1,67 +0,0 @@
-{
-  "name": "@coreui/react-docs",
-  "version": "5.7.0",
-  "private": true,
-  "description": "",
-  "homepage": "https://coreui.io/react/",
-  "bugs": {
-    "url": "https://github.com/coreui/coreui-react/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/coreui/coreui-react.git"
-  },
-  "license": "MIT",
-  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
-  "scripts": {
-    "api": "rimraf \"content/api/*\" & node build/api.mjs",
-    "build": "gatsby build --prefix-paths",
-    "develop": "gatsby develop",
-    "dist": "run-s api build",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
-    "start": "gatsby develop",
-    "serve": "gatsby serve --prefix-paths",
-    "clean": "gatsby clean"
-  },
-  "dependencies": {
-    "@coreui/chartjs": "^4.1.0",
-    "@coreui/coreui": "^5.4.0",
-    "@coreui/icons": "^3.0.1",
-    "@coreui/icons-react": "^2.3.0",
-    "@coreui/react-chartjs": "^3.0.0",
-    "@coreui/utils": "^2.0.2",
-    "@docsearch/css": "^3.9.0",
-    "@docsearch/react": "^3.9.0",
-    "@mdx-js/mdx": "^3.1.0",
-    "@mdx-js/react": "^3.1.0",
-    "@stackblitz/sdk": "^1.11.0",
-    "gatsby": "^5.14.3",
-    "gatsby-plugin-google-tagmanager": "^5.14.0",
-    "gatsby-plugin-image": "^3.14.0",
-    "gatsby-plugin-manifest": "^5.14.0",
-    "gatsby-plugin-mdx": "^5.14.1",
-    "gatsby-plugin-sass": "^6.14.0",
-    "gatsby-plugin-sharp": "^5.14.0",
-    "gatsby-plugin-sitemap": "^6.14.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
-    "gatsby-remark-autolink-headers": "^6.14.0",
-    "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-source-filesystem": "^5.14.0",
-    "gatsby-transformer-sharp": "^5.14.0",
-    "globby": "^14.1.0",
-    "prism-react-renderer": "^2.4.1",
-    "prismjs": "^1.30.0",
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^18.3.1",
-    "react-imask": "^7.6.1",
-    "react-markdown": "^10.1.0",
-    "rimraf": "^6.0.1",
-    "sass": "^1.89.0",
-    "showdown": "^2.1.0"
-  },
-  "devDependencies": {
-    "npm-run-all": "^4.1.5"
-  }
-}
diff --git a/packages/docs/src/AppContext.tsx b/packages/docs/src/AppContext.tsx
deleted file mode 100644
index 39ff4698..00000000
--- a/packages/docs/src/AppContext.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-
-export interface AppContextProps {
-  name?: string
-  sidebarVisible?: boolean | undefined
-  setSidebarVisible?: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const AppContextInitialState: AppContextProps = {
-  name: 'DocsContext',
-}
-
-export const AppContext = React.createContext(AppContextInitialState)
diff --git a/packages/docs/src/assets/coreui-react.svg b/packages/docs/src/assets/coreui-react.svg
deleted file mode 100755
index 00738947..00000000
--- a/packages/docs/src/assets/coreui-react.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 134">
-  <g>
-    <g fill="#00a1ff">
-      <path d="M361.773,90.1513,353.0054,69.415a.25.25,0,0,0-.2558-.1914h-9.9844a.2263.2263,0,0,0-.2559.2558v20.543a.5659.5659,0,0,1-.64.6406h-1.2163a.5654.5654,0,0,1-.64-.6406v-43.52a.5656.5656,0,0,1,.64-.64h12.5444a9.9785,9.9785,0,0,1,7.7437,3.2315,12.2042,12.2042,0,0,1,2.9443,8.5449,12.4389,12.4389,0,0,1-2.24,7.584,9.3707,9.3707,0,0,1-6.08,3.7441c-.1709.0859-.2139.1914-.1279.3193l8.7041,20.6084.0639.2559c0,.3418-.1919.5117-.5757.5117h-1.1523A.7029.7029,0,0,1,361.773,90.1513Zm-19.2637-41.793V66.8544a.2263.2263,0,0,0,.2559.2569h10.3037a7.6687,7.6687,0,0,0,6.0166-2.5928,9.878,9.878,0,0,0,2.3037-6.8154,10.2858,10.2858,0,0,0-2.272-6.9756,7.601,7.601,0,0,0-6.0483-2.625H342.7652A.2263.2263,0,0,0,342.5093,48.3583Z"/>
-      <path d="M401.0816,48.1025H381.05a.2263.2263,0,0,0-.2559.2558V66.8544a.2263.2263,0,0,0,.2559.2569h13.8237a.5663.5663,0,0,1,.6406.64v.96a.566.566,0,0,1-.6406.64H381.05a.2263.2263,0,0,0-.2559.2559V88.1669a.2259.2259,0,0,0,.2559.2559h20.0317a.567.567,0,0,1,.6406.6406v.959a.5663.5663,0,0,1-.6406.6406H378.938a.5656.5656,0,0,1-.64-.6406v-43.52a.5657.5657,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.566.566,0,0,1,401.0816,48.1025Z"/>
-      <path d="M438.8023,90.1513l-2.4316-8.832a.2962.2962,0,0,0-.32-.1924H419.2828a.2946.2946,0,0,0-.32.1924l-2.3682,8.7676a.6576.6576,0,0,1-.7036.5761h-1.2163a.5883.5883,0,0,1-.4795-.1914.5822.5822,0,0,1-.0962-.5127L426.13,46.3749a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1924c0,.3418-.2138.5117-.64.5117h-1.2163A.6428.6428,0,0,1,438.8023,90.1513ZM419.6988,78.9189a.3026.3026,0,0,0,.2236.0957h15.4883a.3039.3039,0,0,0,.2236-.0957c.0645-.0645.0742-.1172.0323-.16L427.7945,49.831c-.043-.085-.086-.1279-.1279-.1279s-.086.0429-.128.1279l-7.872,28.9277C419.6236,78.8017,419.6343,78.8544,419.6988,78.9189Z"/>
-      <path d="M456.357,87.9111a11.6374,11.6374,0,0,1-3.3277-8.7041V57.19a11.4135,11.4135,0,0,1,3.36-8.5752,12.0908,12.0908,0,0,1,8.8-3.2647,12.2528,12.2528,0,0,1,8.8643,3.2324,11.3906,11.3906,0,0,1,3.36,8.6075v.6406a.5663.5663,0,0,1-.6406.6406l-1.28.0635q-.6408,0-.64-.5762v-.832a9.2874,9.2874,0,0,0-2.6558-6.9121,10.67,10.67,0,0,0-14.0161,0,9.2838,9.2838,0,0,0-2.6562,6.9121V79.3994a9.2824,9.2824,0,0,0,2.6562,6.9121,10.6734,10.6734,0,0,0,14.0161,0,9.286,9.286,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5663.5663,0,0,1,.6406.64V79.27a11.4976,11.4976,0,0,1-3.36,8.6407,13.6262,13.6262,0,0,1-17.6963,0Z"/>
-      <path d="M514.1929,46.5029v.96a.5655.5655,0,0,1-.64.64h-10.752a.2262.2262,0,0,0-.2558.2558V90.0224a.5663.5663,0,0,1-.6407.6406H500.689a.5654.5654,0,0,1-.64-.6406V48.3583a.2267.2267,0,0,0-.2559-.2558H489.6172a.5653.5653,0,0,1-.64-.64v-.96a.5657.5657,0,0,1,.64-.64h23.9361A.5659.5659,0,0,1,514.1929,46.5029Z"/>
-      <path d="M521.8218,89.5107a2.8346,2.8346,0,0,1-.8-2.0479,2.9233,2.9233,0,0,1,.8-2.1123,2.7577,2.7577,0,0,1,2.08-.832,2.8467,2.8467,0,0,1,2.9439,2.9443,2.7544,2.7544,0,0,1-.8321,2.08,2.9213,2.9213,0,0,1-2.1118.8A2.754,2.754,0,0,1,521.8218,89.5107Z"/>
-      <path d="M542.1607,88.0068a11.3094,11.3094,0,0,1-3.2-8.416V74.1513a.5663.5663,0,0,1,.64-.6406h1.2159a.5667.5667,0,0,1,.64.6406v5.5039a9.1437,9.1437,0,0,0,2.5283,6.72,8.9735,8.9735,0,0,0,6.6875,2.56,8.7894,8.7894,0,0,0,9.28-9.2793V46.5029a.5655.5655,0,0,1,.64-.64h1.2163a.5661.5661,0,0,1,.64.64V79.5908a11.2516,11.2516,0,0,1-3.2324,8.416,13.0622,13.0622,0,0,1-17.0557,0Z"/>
-      <path d="M580.1055,88.1025a10.4824,10.4824,0,0,1-3.36-8.127V78.1826a.5655.5655,0,0,1,.64-.64h1.0884a.566.566,0,0,1,.64.64v1.6005a8.5438,8.5438,0,0,0,2.752,6.6553,10.5357,10.5357,0,0,0,7.36,2.4961,9.8761,9.8761,0,0,0,6.9761-2.3672,8.2153,8.2153,0,0,0,2.56-6.3359,8.3974,8.3974,0,0,0-1.12-4.416,11.3828,11.3828,0,0,0-3.3282-3.3926,71.6257,71.6257,0,0,0-6.1762-3.7119,71.3024,71.3024,0,0,1-6.24-3.84,12.174,12.174,0,0,1-3.4238-3.6806,10.2567,10.2567,0,0,1-1.28-5.3438,9.8592,9.8592,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6953,0,8.96,3.1045a10.8233,10.8233,0,0,1,3.2641,8.2236v1.6006a.5658.5658,0,0,1-.64.64h-1.1519a.5653.5653,0,0,1-.64-.64V56.8076a8.8646,8.8646,0,0,0-2.624-6.6885,9.9938,9.9938,0,0,0-7.232-2.5283,9.3654,9.3654,0,0,0-6.5278,2.1445,7.8216,7.8216,0,0,0-2.3682,6.1113,7.8007,7.8007,0,0,0,1.0245,4.16,10.3761,10.3761,0,0,0,3.0078,3.04,62.8289,62.8289,0,0,0,5.9521,3.4883,71.0575,71.0575,0,0,1,6.72,4.2559,13.4537,13.4537,0,0,1,3.648,3.9365,10.0487,10.0487,0,0,1,1.28,5.1836,10.7141,10.7141,0,0,1-3.2637,8.1914q-3.2637,3.0732-8.832,3.0722Q583.4649,91.1747,580.1055,88.1025Z"/>
-    </g>
-    <g fill="var(--cui-body-color, currentColor)">
-      <g>
-        <path d="M99.59,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0337,12.0337,0,0,0-6,10.3924V91.4833a12.0331,12.0331,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0333,12.0333,0,0,0,6-10.3923V46.45A12.0336,12.0336,0,0,0,99.59,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
-        <path d="M77.612,82.0046H74.746a4.001,4.001,0,0,0-1.9247.4934L55.5406,91.9833,35.59,80.4648V57.4872L55.54,45.9687l17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.3833,38.9521a8.0389,8.0389,0,0,0-7.8427.09L31.59,50.56a8.0245,8.0245,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0427,8.0427,0,0,0,7.8432.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.612,82.0046Z"/>
-      </g>
-      <g>
-        <path d="M172.3351,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.3351,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
-        <path d="M135.6692,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9892.9892,0,0,0,.9842.865h6.03a1.0109,1.0109,0,0,0,.9988-1.0971,15.0183,15.0183,0,0,0-15.7162-13.8837A15.2881,15.2881,0,0,0,121.59,60.7968V77.2037A15.288,15.288,0,0,0,135.8346,92.62a15.0184,15.0184,0,0,0,15.7162-13.8842,1.0109,1.0109,0,0,0-.9988-1.0971h-6.03a.9892.9892,0,0,0-.9842.865,7.0106,7.0106,0,0,1-7.868,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.6692,53.4211Z"/>
-        <path d="M218.5125,72.9277a12.1584,12.1584,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.5474,46H196.59a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6215l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5912a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.5479,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
-        <path d="M260.59,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.59,46Z"/>
-        <path d="M298.59,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.59,46Z"/>
-        <rect x="307.5904" y="46" width="8" height="38" rx="1"/>
-      </g>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/packages/docs/src/assets/images/brand/icon.png b/packages/docs/src/assets/images/brand/icon.png
deleted file mode 100644
index ba91b901..00000000
Binary files a/packages/docs/src/assets/images/brand/icon.png and /dev/null differ
diff --git a/packages/docs/src/assets/images/hex_bootstrap.png b/packages/docs/src/assets/images/hex_bootstrap.png
deleted file mode 100755
index 1b113885..00000000
Binary files a/packages/docs/src/assets/images/hex_bootstrap.png and /dev/null differ
diff --git a/packages/docs/src/assets/images/hex_react.png b/packages/docs/src/assets/images/hex_react.png
deleted file mode 100755
index a1ce6fba..00000000
Binary files a/packages/docs/src/assets/images/hex_react.png and /dev/null differ
diff --git a/packages/docs/src/components/Ads.tsx b/packages/docs/src/components/Ads.tsx
deleted file mode 100644
index e7deca2a..00000000
--- a/packages/docs/src/components/Ads.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { FC, useEffect, useRef } from 'react'
-
-interface AdsProps {
-  code: string
-  location: string
-  placement: string
-}
-
-export const Ads: FC<AdsProps> = ({ code, location, placement }) => {
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.innerHTML = ''
-      const s = document.createElement('script')
-      s.id = '_carbonads_js'
-      s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
-      ref.current.appendChild(s)
-    }
-  }, [location])
-
-  return <div className="carbonads-wrapper" ref={ref} />
-}
-
-Ads.displayName = 'Ads'
-
-export default Ads
diff --git a/packages/docs/src/components/Banner.tsx b/packages/docs/src/components/Banner.tsx
deleted file mode 100644
index f422502f..00000000
--- a/packages/docs/src/components/Banner.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { FC } from 'react'
-import { StaticImage } from 'gatsby-plugin-image'
-import { CButton, CCol, CRow } from '@coreui/react'
-
-interface BannerProps {
-  bootstrap?: boolean | string
-  preview?: boolean | string
-  pro?: boolean
-}
-
-const Banner: FC<BannerProps> = ({ bootstrap, preview, pro }) => {
-  return (
-    <>
-      {bootstrap && (
-        <div className="bg-primary bg-opacity-10 border border-2 border-primary text-primary-emphasis rounded p-3 px-xl-4 mb-5">
-          <CRow className="d-flex align-items-center flex-xl-nowrap">
-            <CCol className="d-none d-xl-block p-0" xs={12} xl="auto">
-              <StaticImage
-                src="../assets/images/hex_bootstrap.png"
-                alt="CoreUI PRO for React.js & Bootstrap"
-                height={160}
-                width={160}
-              />
-            </CCol>
-            <CCol className="px-lg-4" xs={12} md>
-              <h4>Bootstrap 5 components designed for React.js</h4>
-              <p>
-                This component is part of the CoreUI for React.js UI components library, which
-                offers all Bootstrap components designed to work seamlessly with React.js.
-              </p>
-              <p className="mb-0">
-                If you want to use Bootstrap 5 in a React.js environment while also needing advanced
-                components that Bootstrap does not offer and dedicated developer support, then this
-                library is the best solution for you.
-              </p>
-            </CCol>
-          </CRow>
-        </div>
-      )}
-      {pro && (
-        <div className="bg-info bg-opacity-10 border border-2 border-info rounded p-3 px-xl-4 mb-5">
-          <CRow className="d-flex align-items-center flex-xl-nowrap">
-            <CCol className="d-none d-xl-block p-0" xs={12} xl="auto">
-              <StaticImage
-                src="../assets/images/hex_react.png"
-                alt="CoreUI PRO for React.js"
-                height={160}
-                width={160}
-              />
-            </CCol>
-            <CCol className="px-lg-4" xs={12} md>
-              This Component is a part of CoreUI PRO for React.js, an advanced UI library offering
-              over 100 components designed for creating responsive, sleek, and powerful
-              applications. Experience it yourself by signing up for a complimentary 7-day trial.
-            </CCol>
-            <CCol className="mt-3 mt-lg-0" xs={12} md="auto">
-              <CButton
-                className="text-nowrap text-white"
-                color="danger"
-                href="https://coreui.io/trial/?src=react-docs&cta=pro-banner"
-              >
-                Start Free Trial
-              </CButton>
-            </CCol>
-          </CRow>
-        </div>
-      )}
-      {preview && (
-        <div className="bg-warning d-none d-lg-block bg-opacity-10 border-start border-start-5 border-start-warning p-4 pb-3 mb-5">
-          <h3 className="mb-4">Alpha release</h3>
-          <p>
-            This component is in the Alpha phase and has an experimental API, which can be changed
-            in the final release. If you want to use this component, please install{' '}
-            <strong>@coreui/coreui-pro {preview}</strong> and{' '}
-            <strong>@coreui/react-pro {preview}</strong>
-          </p>
-        </div>
-      )}
-    </>
-  )
-}
-
-Banner.displayName = 'Banner'
-
-export default Banner
diff --git a/packages/docs/src/components/Callout.tsx b/packages/docs/src/components/Callout.tsx
deleted file mode 100644
index 8c7b9ffe..00000000
--- a/packages/docs/src/components/Callout.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-export interface CalloutProps {
-  children: ReactNode
-  color: string
-  title?: string | ReactNode
-  type?: string
-}
-
-const description = (type: string) => {
-  switch (type) {
-    case 'colorAssistiveTechnologies': {
-      return (
-        <>
-          <h5>Conveying meaning to assistive technologies</h5>
-          <p>
-            Using color to add meaning only provides a visual indication, which will not be conveyed
-            to users of assistive technologies – such as screen readers. Ensure that information
-            denoted by the color is either obvious from the content itself (e.g. the visible text),
-            or is included through alternative means, such as additional text hidden with the{' '}
-            <code>.visually-hidden</code> class.
-          </p>
-        </>
-      )
-    }
-    case 'dartSassModules': {
-      return (
-        <>
-          <p>
-            <strong>Heads up!</strong> Since <code>@coreui/coreui</code> v5.3.0 and{' '}
-            <code>@coreui/coreui-pro</code> v5.10.0, we support Sass modules.
-          </p>
-          <p>
-            You can now use the modern <code>@use</code> and <code>@forward</code> rules instead of{' '}
-            <code>@import</code>, which is deprecated and will be removed in Dart Sass 3.0.0. Using{' '}
-            <code>@import</code> will result in a compilation warning. You can learn more about this
-            transition{' '}
-            <a
-              href="https://sass-lang.com/documentation/breaking-changes/import/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              here
-            </a>
-            .
-          </p>
-        </>
-      )
-    }
-    case 'dartSassDeprecations': {
-      return (
-        <>
-          <p>
-            <strong>
-              Sass <code>@import</code> are deprecated and will be removed in Dart Sass 3.0.0.!
-            </strong>
-          </p>
-          <p>
-            You can also use <code>@import</code> rules, but please be aware that they are
-            deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning.
-            You can learn more about this deprecation{' '}
-            <a
-              href="https://sass-lang.com/documentation/breaking-changes/import/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              here
-            </a>
-            .
-          </p>
-        </>
-      )
-    }
-    default: {
-      return ''
-    }
-  }
-}
-
-const Callout: FC<CalloutProps> = ({ children, color, title, type }) => {
-  return (
-    <div className={`docs-callout docs-callout-${color}`}>
-      {type ? (
-        description(type)
-      ) : (
-        <>
-          {title && <h5>{title}</h5>}
-          {children}
-        </>
-      )}
-    </div>
-  )
-}
-
-Callout.displayName = 'Callout'
-
-export default Callout
diff --git a/packages/docs/src/components/ClassNamesDocs.tsx b/packages/docs/src/components/ClassNamesDocs.tsx
deleted file mode 100644
index 6adc8988..00000000
--- a/packages/docs/src/components/ClassNamesDocs.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import React from 'react'
-import Markdown from 'react-markdown'
-
-const extractCLassNames = (code: string) => {
-  const re = new RegExp(`export const .*CLASS_NAMES((?:.|\n)*?)}`)
-  const captured = re.exec(code)[0]
-
-  // Regular expression to match each comment block followed by a key-value pair
-  const regexWithComments = /\/\*\*\s*([\s\S]*?)\s*\*\/\s*(\w+):\s*['"]([^'"]+)['"]/g
-
-  // Regular expression to match key-value pairs without preceding comments
-  const regexWithoutComments = /(^|\n)\s*(\w+):\s*['"]([^'"]+)['"]/g
-
-  // Array to hold the resulting objects
-  const classNamesArray = []
-
-  // Temporary map to hold key-value pairs with their descriptions
-  const tempMap = new Map()
-
-  // First, extract all entries with comments
-  let match
-  while ((match = regexWithComments.exec(captured)) !== null) {
-    const rawDescription = match[1]
-    const description = rawDescription
-      .split('\n')
-      .map((line) => line.replace(/^\s*\*\s?/, '').trim())
-      .join(' ')
-      .replaceAll(/\s+/g, ' ')
-      .trim()
-
-    const className = match[2]
-    const value = match[3]
-
-    tempMap.set(className, { className, value, description })
-  }
-
-  // Now, extract all entries without comments
-  while ((match = regexWithoutComments.exec(captured)) !== null) {
-    const className = match[2]
-    const value = match[3]
-
-    // If this key was already processed with a comment, skip it
-    if (tempMap.has(className)) continue
-
-    classNamesArray.push({
-      className,
-      value,
-      description: null, // or undefined
-    })
-  }
-
-  // Add the entries with comments
-  for (const entry of tempMap.values()) {
-    classNamesArray.push(entry)
-  }
-
-  // Optional: Sort the array based on the order in the original string
-  // This step ensures that entries appear in the array in the same order as in the object
-  const orderedClassNames = []
-  const lines = captured.split('\n')
-  for (const line of lines) {
-    const keyMatch = line.match(/^\s*(\w+):\s*['"]([^'"]+)['"]/)
-    if (keyMatch) {
-      const key = keyMatch[1]
-      const entry = classNamesArray.find((item) => item.className === key)
-      if (entry && !orderedClassNames.includes(entry)) {
-        orderedClassNames.push(entry)
-      }
-    }
-  }
-
-  return classNamesArray
-}
-
-const ClassNamesDocs = ({ files }: { files: string | string[] }) => {
-  const _files = Array.isArray(files) ? files : [files]
-
-  const classNames = _files.flatMap((file) => {
-    let _file
-
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      _file = require(`!!raw-loader!../../../../packages/coreui-react/src/${file}`)
-      console.log('File loaded from coreui-react.')
-    } catch {
-      try {
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        _file = require(`!!raw-loader!../../../../packages/coreui-react-pro/src/${file}`)
-        console.log('File loaded from coreui-react-pro.')
-      } catch {
-        console.error('File not found in both paths.')
-        _file = null // Set to null or handle as needed
-      }
-    }
-    return extractCLassNames(_file.default)
-  })
-
-  const sortedClassNames = classNames.sort((a, b) => {
-    if (a.className < b.className) return -1
-    if (a.className > b.className) return 1
-    return 0
-  })
-
-  return (
-    <div className="table-api table-responsive border rounded mb-3">
-      <table className="table">
-        <thead>
-          <tr>
-            <th>customClassNames</th>
-            <th>Class Name</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          {sortedClassNames.map((className, index) => (
-            <tr className="align-middle" key={index}>
-              <td className="fw-semibold text-primary small">{className.className}</td>
-              <td>
-                <code className="text-nowrap">.{className.value}</code>
-              </td>
-              <td>
-                <Markdown>{className.description}</Markdown>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-ClassNamesDocs.displayName = 'ClassNamesDocs'
-
-export default ClassNamesDocs
diff --git a/packages/docs/src/components/CodeBlock.tsx b/packages/docs/src/components/CodeBlock.tsx
deleted file mode 100644
index 9b78aabc..00000000
--- a/packages/docs/src/components/CodeBlock.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { FC } from 'react'
-import { Highlight, Prism } from 'prism-react-renderer'
-
-export interface CodeBlockProps {
-  children: any // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-const CodeBlock: FC<CodeBlockProps> = ({ children }) => {
-  ;(typeof globalThis === 'undefined' ? globalThis : globalThis).Prism = Prism
-  // eslint-disable-next-line unicorn/prefer-module
-  require('prismjs/components/prism-bash')
-  require('prismjs/components/prism-scss')
-  const _children = children && children.props.children
-  const language = children.props.className
-    ? children.props.className.replace(/language-/, '')
-    : 'jsx'
-
-  return (
-    <div className="highlight">
-      <Highlight code={_children?.trim()} language={language} theme={{ plain: {}, styles: [] }}>
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <pre className={className} style={{ ...style }}>
-            {tokens.map((line, i) => (
-              <div key={i} {...getLineProps({ line, key: i })}>
-                {line.map((token, key) => (
-                  <span key={key} {...getTokenProps({ token, key })} />
-                ))}
-              </div>
-            ))}
-          </pre>
-        )}
-      </Highlight>
-    </div>
-  )
-}
-
-CodeBlock.displayName = 'CodeBlock'
-
-export default CodeBlock
diff --git a/packages/docs/src/components/ComponentSubNav.tsx b/packages/docs/src/components/ComponentSubNav.tsx
deleted file mode 100644
index 304b337b..00000000
--- a/packages/docs/src/components/ComponentSubNav.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useMemo, useRef } from 'react'
-import { Link } from 'gatsby'
-import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react'
-import useStickyObserver from '../hooks/useStickyObserver' // Adjust the path as needed
-
-type Fields = {
-  slug: string
-}
-
-type Node = {
-  id: string
-  fields: Fields
-}
-
-export interface Item {
-  node: Node
-}
-
-export interface ComponentSubNavProps extends HTMLAttributes<HTMLDivElement> {
-  nodes: Item[]
-}
-
-const findShortestSlug = (items: Item[]): string | undefined => {
-  if (items.length === 0) {
-    return undefined
-  }
-
-  let shortestSlug = items[0].node.fields.slug
-
-  for (const item of items) {
-    const currentSlug = item.node.fields.slug
-    if (currentSlug.length < shortestSlug.length) {
-      shortestSlug = currentSlug
-    }
-  }
-
-  return shortestSlug
-}
-
-const ComponentSubNav = forwardRef<HTMLDivElement, ComponentSubNavProps>(
-  ({ nodes, ...rest }, ref) => {
-    const parentPathname = findShortestSlug(nodes)
-    const hasNavAccessibility = useMemo(
-      () => nodes.some((edge) => edge.node.fields.slug.includes('accessibility')),
-      [nodes]
-    )
-    const hasNavAPI = useMemo(
-      () => nodes.some((edge) => edge.node.fields.slug.includes('api')),
-      [nodes]
-    )
-    const hasNavStyling = useMemo(
-      () => nodes.some((edge) => edge.node.fields.slug.includes('styling')),
-      [nodes]
-    )
-
-    const hasNavBootstrap = useMemo(
-      () => nodes.some((edge) => edge.node.fields.slug.includes('bootstrap')),
-      [nodes]
-    )
-
-    // Ref for the sentinel element
-    const sentinelRef = useRef<HTMLDivElement>(null)
-
-    // Use the custom hook to track sticky state
-    const isSticky = useStickyObserver(sentinelRef)
-
-    return (
-      <>
-        <div ref={sentinelRef} style={{ height: '1px' }} />
-        <div
-          className={`component-sub-nav-wrapper bg-body position-sticky z-3 ${isSticky ? 'sticky shadow-sm' : ''}`}
-          ref={ref}
-          {...rest}
-        >
-          <CContainer lg className="px-3 px-sm-4">
-            <CNav
-              className="docs-nav component-sub-nav"
-              variant="underline-border"
-              role={undefined}
-            >
-              <CNavItem>
-                <CNavLink as={Link} to={parentPathname} activeClassName="active">
-                  Features
-                </CNavLink>
-              </CNavItem>
-              {hasNavAPI && (
-                <CNavItem>
-                  <CNavLink as={Link} to={`${parentPathname}api/`} activeClassName="active">
-                    API
-                  </CNavLink>
-                </CNavItem>
-              )}
-              {hasNavStyling && (
-                <CNavItem>
-                  <CNavLink as={Link} to={`${parentPathname}styling/`} activeClassName="active">
-                    Styling
-                  </CNavLink>
-                </CNavItem>
-              )}
-              {hasNavAccessibility && (
-                <CNavItem>
-                  <CNavLink
-                    as={Link}
-                    to={`${parentPathname}accessibility/`}
-                    activeClassName="active"
-                  >
-                    Accessibility
-                  </CNavLink>
-                </CNavItem>
-              )}
-              {hasNavBootstrap && (
-                <CNavItem>
-                  <CNavLink as={Link} to={`${parentPathname}bootstrap/`} activeClassName="active">
-                    Use with Bootstrap
-                  </CNavLink>
-                </CNavItem>
-              )}
-            </CNav>
-          </CContainer>
-        </div>
-      </>
-    )
-  }
-)
-
-ComponentSubNav.displayName = 'ComponentSubNav'
-
-export default ComponentSubNav
diff --git a/packages/docs/src/components/Example.tsx b/packages/docs/src/components/Example.tsx
deleted file mode 100644
index d5992eae..00000000
--- a/packages/docs/src/components/Example.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-export interface ExampleProps {
-  children: ReactNode
-  className: string
-}
-
-const Example: FC<ExampleProps> = ({ children, className, ...rest }) => {
-  return (
-    <div
-      className={`docs-example ${className} ${className && className.includes('p-') ? '' : 'p-3'}`}
-      {...rest}
-    >
-      {children}
-    </div>
-  )
-}
-
-Example.displayName = 'Example'
-
-export default Example
diff --git a/packages/docs/src/components/ExampleSnippet.tsx b/packages/docs/src/components/ExampleSnippet.tsx
deleted file mode 100644
index a76b2105..00000000
--- a/packages/docs/src/components/ExampleSnippet.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import React, { FC, lazy, Suspense, useEffect, useMemo, useState } from 'react'
-import { Highlight, Language } from 'prism-react-renderer'
-import CIcon from '@coreui/icons-react'
-import { cibCodesandbox, cilCheckAlt, cilCopy } from '@coreui/icons'
-import { CNav, CNavLink, CTooltip, useClipboard } from '@coreui/react'
-import { openStackBlitzProject } from '../utils/stackblitz'
-import { openCodeSandboxProject } from '../utils/codesandbox'
-
-export interface ExampleSnippetProps {
-  className?: string
-  codeSandbox?: boolean
-  component: string
-  componentName?: string
-  pro?: boolean
-  stackBlitz?: boolean
-}
-
-const ExampleSnippet: FC<ExampleSnippetProps> = ({
-  className = '',
-  codeSandbox = true,
-  component,
-  componentName = 'Example Component',
-  pro = false,
-  stackBlitz = true,
-}) => {
-  const [clipboardCode, setClipboardCode] = useState<string>()
-  const [highlightCode, setHighlightCode] = useState<string>()
-  const [language, setLanguage] = useState<'js' | 'ts'>('js')
-  const { copy, isCopied } = useClipboard()
-
-  const Preview = useMemo(() => {
-    if (!component) return null
-    return lazy(() =>
-      import(`@example/${component}.tsx`)
-        .then((module) => ({ default: module[component] }))
-        .catch((error) => {
-          console.error(`Failed to load Preview component for ${component}:`, error)
-          return { default: () => <div>Preview not available.</div> }
-        })
-    )
-  }, [component])
-
-  useEffect(() => {
-    const loadCode = async () => {
-      try {
-        const module = await import(`!!raw-loader!@example/${component}.${language}x`)
-        setClipboardCode(module.default)
-      } catch {
-        const tsModule = await import(`!!raw-loader!@example/${component}.tsx`)
-        setClipboardCode(tsModule.default)
-      }
-    }
-
-    loadCode()
-  }, [component, language])
-
-  useEffect(() => {
-    const loadCode = async () => {
-      try {
-        const module = await import(`!!raw-loader!@example/${component}.short.${language}x`)
-        setHighlightCode(module.default)
-      } catch {
-        try {
-          const tsModule = await import(`!!raw-loader!@example/${component}.short.tsx`)
-          setHighlightCode(tsModule.default)
-        } catch {
-          setHighlightCode(clipboardCode)
-        }
-      }
-    }
-
-    loadCode()
-  }, [clipboardCode])
-
-  const handleCopy = () => {
-    if (clipboardCode) copy(clipboardCode)
-  }
-
-  const prismLanguage: Language = language === 'js' ? 'jsx' : 'tsx'
-
-  return (
-    <div className="docs-example-snippet">
-      <div className={`docs-example ${className}`}>
-        {Preview ? (
-          <Suspense fallback={<div>Loading preview...</div>}>
-            <Preview />
-          </Suspense>
-        ) : (
-          <div>No component specified.</div>
-        )}
-      </div>
-      <div className="highlight-toolbar border-top">
-        <CNav as="div" className="px-3" variant="underline-border" role={undefined}>
-          <CNavLink as="button" active={language === 'js'} onClick={() => setLanguage('js')}>
-            JavaScript
-          </CNavLink>
-          <CNavLink as="button" active={language === 'ts'} onClick={() => setLanguage('ts')}>
-            TypeScript
-          </CNavLink>
-          <span className="ms-auto"></span>
-          {codeSandbox && clipboardCode && (
-            <CTooltip content="Try it on CodeSandbox">
-              <button
-                type="button"
-                className="btn btn-transparent"
-                aria-label="Try it on CodeSandbox"
-                onClick={() =>
-                  openCodeSandboxProject({
-                    name: component,
-                    language,
-                    code: clipboardCode,
-                    componentName,
-                    pro,
-                  })
-                }
-              >
-                <CIcon icon={cibCodesandbox} />
-              </button>
-            </CTooltip>
-          )}
-          {stackBlitz && clipboardCode && (
-            <CTooltip content="Try it on StackBlitz">
-              <button
-                type="button"
-                className="btn btn-transparent px-1"
-                aria-label="Try it on StackBlitz"
-                onClick={() =>
-                  openStackBlitzProject({
-                    name: component,
-                    language,
-                    code: clipboardCode,
-                    componentName,
-                    pro,
-                  })
-                }
-              >
-                <svg
-                  className="icon"
-                  width="56"
-                  height="78"
-                  viewBox="0 0 56 78"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.4273 48.2853C23.7931 47.5845 23.0614 46.8837 22.3298 46.8837H1.11228C0.0148224 46.8837 -0.350997 45.8326 0.380642 45.1318L40.9866 0.282084C41.7182 -0.418693 43.1815 0.282084 42.8157 1.33325L32.9386 30.0651C32.5727 30.7659 32.9386 31.4666 33.6702 31.4666H54.8877C55.9852 31.4666 56.351 32.5178 55.6194 33.2186L15.0134 77.7179C14.2818 78.4187 12.8185 77.7179 13.1843 76.6667L23.4273 48.2853Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </button>
-            </CTooltip>
-          )}
-          <CTooltip content={isCopied ? 'Copied' : 'Copy to clipboard'}>
-            <button
-              type="button"
-              className="btn btn-transparent px-1"
-              aria-label="Copy to clipboard"
-              onClick={handleCopy}
-            >
-              <CIcon icon={isCopied ? cilCheckAlt : cilCopy} />
-            </button>
-          </CTooltip>
-        </CNav>
-      </div>
-      {highlightCode && (
-        <div className="highlight">
-          <Highlight
-            code={highlightCode}
-            language={prismLanguage}
-            theme={{ plain: {}, styles: [] }}
-          >
-            {({ className: highlightClass, style, tokens, getLineProps, getTokenProps }) => (
-              <pre className={highlightClass} style={style}>
-                {tokens.map((line, i) => (
-                  <div {...getLineProps({ line, key: i })} key={i}>
-                    {line.map((token, key) => (
-                      <span {...getTokenProps({ token, key })} key={key} />
-                    ))}
-                  </div>
-                ))}
-              </pre>
-            )}
-          </Highlight>
-        </div>
-      )}
-    </div>
-  )
-}
-
-ExampleSnippet.displayName = 'ExampleSnippet'
-
-export default ExampleSnippet
diff --git a/packages/docs/src/components/ExampleSnippetLazy.tsx b/packages/docs/src/components/ExampleSnippetLazy.tsx
deleted file mode 100644
index 252b38c1..00000000
--- a/packages/docs/src/components/ExampleSnippetLazy.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import React, { FC, lazy, ReactNode, Suspense, useEffect, useMemo, useRef, useState } from 'react'
-import { Highlight, Language } from 'prism-react-renderer'
-import CIcon from '@coreui/icons-react'
-import { cibCodesandbox, cilCheckAlt, cilCopy } from '@coreui/icons'
-import { CNav, CNavLink, CTooltip, useClipboard } from '@coreui/react'
-import { openStackBlitzProject } from '../utils/stackblitz'
-import { openCodeSandboxProject } from '../utils/codesandbox'
-import { isInViewport } from '@coreui/react'
-
-interface CodeSnippets {
-  js?: string
-  ts?: string
-}
-
-export interface ExampleSnippetLazyProps {
-  children: ReactNode
-  className?: string
-  code?: string | CodeSnippets
-  codeSandbox?: boolean
-  component?: string
-  componentName?: string
-  pro?: boolean
-  stackBlitz?: boolean
-}
-
-const ExampleSnippetLazy: FC<ExampleSnippetLazyProps> = ({
-  children,
-  className = '',
-  code,
-  codeSandbox = true,
-  component,
-  componentName,
-  pro = false,
-  stackBlitz = true,
-}) => {
-  const exampleSnippetRef = useRef<HTMLDivElement>(null)
-  const [codeJS, setCodeJS] = useState<string>()
-  const [codeTS, setCodeTS] = useState<string>()
-  const [language, setLanguage] = useState<'js' | 'ts'>('js')
-  const [visible, setVisible] = useState(false)
-  const { copy, isCopied } = useClipboard()
-
-  const Preview = useMemo(() => {
-    if (!component) return null
-    return lazy(() =>
-      import(`@example/${component}.tsx`)
-        .then((module) => ({ default: module[component] }))
-        .catch((error) => {
-          console.error(`Failed to load Preview component for ${component}:`, error)
-          return { default: () => <div>Preview not available.</div> }
-        }),
-    )
-  }, [component])
-
-  const handleScroll = () => {
-    setVisible(true)
-  }
-
-  useEffect(() => {
-    if (exampleSnippetRef.current && isInViewport(exampleSnippetRef.current)) {
-      setVisible(true)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (visible) {
-      window.removeEventListener('scroll', handleScroll)
-    } else {
-      window.addEventListener('scroll', handleScroll)
-    }
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
-
-  useEffect(() => {
-    const loadCode = async () => {
-      if (code) {
-        if (typeof code === 'string') {
-          setCodeJS(code)
-        } else {
-          setCodeJS(code.js)
-          setCodeTS(code.ts)
-        }
-      } else if (component) {
-        try {
-          const tsModule = await import(`!!raw-loader!@example/${component}.tsx`)
-          setCodeTS(tsModule.default)
-          setCodeJS(tsModule.default)
-        } catch (error) {
-          console.error(`Failed to load TypeScript code for component ${component}:`, error)
-        }
-
-        try {
-          const jsModule = await import(`!!raw-loader!@example/${component}.jsx`)
-          setCodeJS(jsModule.default)
-        } catch {
-          // JSX version may not exist
-        }
-      }
-    }
-
-    loadCode()
-  }, [code, component])
-
-  const hasJS = codeJS !== undefined && codeJS !== ''
-  const hasTS = codeTS !== undefined && codeTS !== ''
-
-  useEffect(() => {
-    if (!hasJS && hasTS) {
-      setLanguage('ts')
-    } else {
-      setLanguage('js')
-    }
-  }, [hasJS, hasTS])
-
-  const handleCopy = () => {
-    const codeToCopy = language === 'js' ? codeJS : codeTS
-    if (codeToCopy) copy(codeToCopy)
-  }
-
-  const prismLanguage: Language = language === 'js' ? 'jsx' : 'tsx'
-  const showJSTab = hasJS && !(typeof code === 'object' && code?.js === code?.ts)
-  const showTSTab = hasTS
-
-  const getProjectName = (): string => {
-    if (React.isValidElement(children)) {
-      const childType = (children as React.ReactElement).type
-      if (typeof childType === 'string') return childType
-      if (typeof childType === 'function' && childType.name) return childType.name
-    }
-    return 'ExampleProject'
-  }
-
-  return (
-    <div className="docs-example-snippet" ref={exampleSnippetRef}>
-      {visible && (
-        <div className={`docs-example ${className}`}>
-          {children ? (
-            children
-          ) : Preview ? (
-            <Suspense fallback={<div>Loading preview...</div>}>
-              <Preview />
-            </Suspense>
-          ) : (
-            <div>No component specified.</div>
-          )}
-        </div>
-      )}
-      <div className="highlight-toolbar border-top">
-        <CNav className="px-3" variant="underline-border">
-          {showJSTab && (
-            <CNavLink as="button" active={language === 'js'} onClick={() => setLanguage('js')}>
-              JavaScript
-            </CNavLink>
-          )}
-          {showTSTab && (
-            <CNavLink as="button" active={language === 'ts'} onClick={() => setLanguage('ts')}>
-              TypeScript
-            </CNavLink>
-          )}
-          <span className="ms-auto"></span>
-          {codeSandbox && (
-            <CTooltip content="Try it on CodeSandbox">
-              <button
-                type="button"
-                className="btn btn-transparent"
-                aria-label="Try it on CodeSandbox"
-                onClick={() =>
-                  openCodeSandboxProject({
-                    name: component || getProjectName(),
-                    language,
-                    code: language === 'js' ? codeJS || '' : codeTS || '',
-                    componentName,
-                    pro,
-                  })
-                }
-                disabled={language === 'ts' && !hasTS}
-              >
-                <CIcon icon={cibCodesandbox} />
-              </button>
-            </CTooltip>
-          )}
-          {stackBlitz && (
-            <CTooltip content="Try it on StackBlitz">
-              <button
-                type="button"
-                className="btn btn-transparent px-1"
-                aria-label="Try it on StackBlitz"
-                onClick={() =>
-                  openStackBlitzProject({
-                    name: component || getProjectName(),
-                    language,
-                    code: language === 'js' ? codeJS || '' : codeTS || '',
-                    componentName,
-                    pro,
-                  })
-                }
-                disabled={language === 'ts' && !hasTS}
-              >
-                <svg
-                  className="icon"
-                  width="56"
-                  height="78"
-                  viewBox="0 0 56 78"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M23.4273 48.2853C23.7931 47.5845 23.0614 46.8837 22.3298 46.8837H1.11228C0.0148224 46.8837 -0.350997 45.8326 0.380642 45.1318L40.9866 0.282084C41.7182 -0.418693 43.1815 0.282084 42.8157 1.33325L32.9386 30.0651C32.5727 30.7659 32.9386 31.4666 33.6702 31.4666H54.8877C55.9852 31.4666 56.351 32.5178 55.6194 33.2186L15.0134 77.7179C14.2818 78.4187 12.8185 77.7179 13.1843 76.6667L23.4273 48.2853Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </button>
-            </CTooltip>
-          )}
-          <CTooltip content={isCopied ? 'Copied' : 'Copy to clipboard'}>
-            <button
-              type="button"
-              className="btn btn-transparent px-1"
-              aria-label="Copy to clipboard"
-              onClick={handleCopy}
-              disabled={(language === 'js' && !hasJS) || (language === 'ts' && !hasTS)}
-            >
-              <CIcon icon={isCopied ? cilCheckAlt : cilCopy} />
-            </button>
-          </CTooltip>
-        </CNav>
-      </div>
-      {visible && (hasJS || hasTS) && (
-        <div className="highlight">
-          <Highlight
-            code={language === 'js' ? codeJS || '' : codeTS || ''}
-            language={prismLanguage}
-            theme={{ plain: {}, styles: [] }}
-          >
-            {({ className: highlightClass, style, tokens, getLineProps, getTokenProps }) => (
-              <pre className={highlightClass} style={style}>
-                {tokens.map((line, i) => (
-                  <div {...getLineProps({ line, key: i })} key={i}>
-                    {line.map((token, key) => (
-                      <span {...getTokenProps({ token, key })} key={key} />
-                    ))}
-                  </div>
-                ))}
-              </pre>
-            )}
-          </Highlight>
-        </div>
-      )}
-    </div>
-  )
-}
-
-ExampleSnippetLazy.displayName = 'ExampleSnippetLazy'
-
-export default ExampleSnippetLazy
diff --git a/packages/docs/src/components/Footer.tsx b/packages/docs/src/components/Footer.tsx
deleted file mode 100644
index d5282cff..00000000
--- a/packages/docs/src/components/Footer.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { FC } from 'react'
-
-import { CContainer, CFooter } from '@coreui/react'
-
-// @ts-expect-error json file
-import pkg from './../../package.json'
-
-const Footer: FC = () => {
-  return (
-    <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-react/blob/main/LICENSE"
-            target="_blank"
-            rel="noreferrer"
-          >
-            MIT
-          </a>
-          , docs{' '}
-          <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noreferrer">
-            CC BY 3.0
-          </a>
-          .{' '}
-          <strong>
-            CoreUI PRO requires a{' '}
-            <a href="https://coreui.io/pricing/?framework=react&docs=footer">commercial license</a>.
-          </strong>
-        </p>
-      </CContainer>
-    </CFooter>
-  )
-}
-
-Footer.displayName = 'Footer'
-
-export default Footer
diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx
deleted file mode 100644
index 9b13856d..00000000
--- a/packages/docs/src/components/Header.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { forwardRef } from 'react'
-import { DocSearch } from '@docsearch/react'
-
-import CIcon from '@coreui/icons-react'
-import {
-  cibGithub,
-  cibOpenCollective,
-  cibTwitter,
-  cilCloudDownload,
-  cilMenu,
-  cilSun,
-  cilMoon,
-  cilContrast,
-  cilHandshake,
-} from '@coreui/icons'
-
-import {
-  CButton,
-  CDropdown,
-  CDropdownItem,
-  CDropdownMenu,
-  CDropdownToggle,
-  CHeader,
-  CHeaderNav,
-  CHeaderToggler,
-  CNavItem,
-  useColorModes,
-} from '@coreui/react'
-import { AppContext } from './../AppContext'
-
-const Header = forwardRef<HTMLDivElement>(({}, ref) => {
-  const { colorMode, setColorMode } = useColorModes('coreui-react-docs-theme')
-  return (
-    <>
-      <AppContext.Consumer>
-        {(context) => (
-          <CHeader className="mb-5" position="sticky" ref={ref}>
-            <CHeaderToggler
-              className="ms-md-3"
-              aria-label="Close"
-              onClick={() =>
-                context.setSidebarVisible && context.setSidebarVisible(!context.sidebarVisible)
-              }
-            >
-              <CIcon icon={cilMenu} size="lg" />
-            </CHeaderToggler>
-            <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"
-              >
-                <CIcon icon={cibGithub} size="xl" />
-              </CNavItem>
-              <CNavItem href="https://twitter.com/core_ui" aria-label="Visit our Twitter">
-                <CIcon icon={cibTwitter} size="xl" />
-              </CNavItem>
-              <CNavItem
-                href="https://opencollective.com/coreui"
-                aria-label="Visit our OpenCollective"
-              >
-                <CIcon icon={cibOpenCollective} size="xl" />
-              </CNavItem>
-              <li className="nav-item py-2 py-lg-1">
-                <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 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' ? (
-                    <CIcon icon={cilContrast} size="xl" />
-                  ) : (
-                    <CIcon icon={cilSun} size="xl" />
-                  )}
-                </CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem
-                    active={colorMode === 'light'}
-                    className="d-flex align-items-center"
-                    as="button"
-                    type="button"
-                    onClick={() => setColorMode('light')}
-                  >
-                    <CIcon className="me-2" icon={cilSun} size="lg" /> Light
-                  </CDropdownItem>
-                  <CDropdownItem
-                    active={colorMode === 'dark'}
-                    className="d-flex align-items-center"
-                    as="button"
-                    type="button"
-                    onClick={() => setColorMode('dark')}
-                  >
-                    <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
-                  </CDropdownItem>
-                  <CDropdownItem
-                    active={colorMode === 'auto'}
-                    className="d-flex align-items-center"
-                    as="button"
-                    type="button"
-                    onClick={() => setColorMode('auto')}
-                  >
-                    <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
-                  </CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <li className="nav-item py-2 py-lg-1">
-                <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>
-            </CHeaderNav>
-            <CButton
-              className="d-lg-inline-block my-2 my-md-0 ms-md-3"
-              color="primary"
-              href="https://coreui.io/react/docs/getting-started/introduction/"
-              variant="outline"
-            >
-              <CIcon className="me-2" icon={cilCloudDownload} /> Download
-            </CButton>
-            <CButton
-              className="d-lg-inline-block my-2 my-md-0 ms-md-3"
-              color="primary"
-              href="https://coreui.io/about/services/?docs=coreui-header-button"
-              variant="outline"
-            >
-              <CIcon className="me-2" icon={cilHandshake} /> Hire Us
-            </CButton>
-            <CButton
-              className="d-lg-inline-block my-2 my-md-0 ms-md-3"
-              color="primary"
-              href="https://coreui.io/pricing/?framework=react&docs=coreui-header-button"
-            >
-              Get CoreUI PRO
-            </CButton>
-          </CHeader>
-        )}
-      </AppContext.Consumer>
-    </>
-  )
-})
-
-Header.displayName = 'Header'
-
-export default Header
diff --git a/packages/docs/src/components/JSXDocs.tsx b/packages/docs/src/components/JSXDocs.tsx
deleted file mode 100644
index f831974c..00000000
--- a/packages/docs/src/components/JSXDocs.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { Highlight } from 'prism-react-renderer'
-
-const JSXDocs = ({ code }: { code: string }) => {
-  return (
-    code && (
-      <div className="highlight">
-        <Highlight code={code} language="jsx" theme={{ plain: {}, styles: [] }}>
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre className={className} style={{ ...style }}>
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({ line, key: i })
-                return (
-                  <div className={lineProps.className} key={i}>
-                    {line.map((token, key) => {
-                      const tokenProps = getTokenProps({ token, key })
-                      return (
-                        <span className={tokenProps.className} key={key}>
-                          {tokenProps.children}
-                        </span>
-                      )
-                    })}
-                  </div>
-                )
-              })}
-            </pre>
-          )}
-        </Highlight>
-      </div>
-    )
-  )
-}
-
-JSXDocs.displayName = 'JSXDocs'
-
-export default JSXDocs
diff --git a/packages/docs/src/components/ScssDocs.tsx b/packages/docs/src/components/ScssDocs.tsx
deleted file mode 100644
index f6acfffb..00000000
--- a/packages/docs/src/components/ScssDocs.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react'
-import { useStaticQuery, graphql } from 'gatsby'
-import { Highlight, Prism } from 'prism-react-renderer'
-
-export interface ScssDocsProps {
-  file: string
-  capture: string
-}
-
-const unindent = (text: string) => {
-  const lines = text.split('\n')
-  // Find first non-empty line to determine indentation
-  const firstLine = lines.find((line) => line.trim().length > 0) || ''
-  const indentMatch = firstLine.match(/^( *)/)
-  const indent = indentMatch ? indentMatch[1] : ''
-  const regex = new RegExp(`^${indent}`)
-  return lines
-    .map((line) => line.replace(regex, ''))
-    .join('\n')
-    .trimEnd()
-}
-
-const ScssDocs = ({ file, capture }: ScssDocsProps) => {
-  ;(typeof global === 'undefined' ? window : global).Prism = Prism
-  // eslint-disable-next-line unicorn/prefer-module
-  require('prismjs/components/prism-scss')
-
-  const data = useStaticQuery(graphql`
-    query {
-      allFile(filter: { ext: { eq: ".scss" } }) {
-        edges {
-          node {
-            name
-            relativePath
-            id
-            internal {
-              content
-            }
-          }
-        }
-      }
-    }
-  `)
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const _file = data.allFile.edges.find((node: any) => node.node.relativePath === file)
-  const captureStart = `// scss-docs-start ${capture}\n`
-  const captureEnd = `// scss-docs-end ${capture}\n`
-  const re = new RegExp(`${captureStart}([\\s\\S]*?)${captureEnd}`, 'm')
-  const captured = re.exec(_file.node.internal.content)
-  const code = captured ? captured[1] : undefined
-
-  if (code === undefined) {
-    console.error(`Can't find "${capture}" in ${_file.node.relativePath}`)
-  }
-
-  return (
-    code && (
-      <div className="highlight mb-3">
-        <Highlight
-          code={unindent(code).replaceAll('--#{$prefix}', '--cui-')}
-          language="scss"
-          theme={{ plain: {}, styles: [] }}
-        >
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre className={className} style={{ ...style }}>
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({ line, key: i })
-                return (
-                  <div className={lineProps.className} key={i}>
-                    {line.map((token, key) => {
-                      const tokenProps = getTokenProps({ token, key })
-                      return (
-                        <span className={tokenProps.className} key={key}>
-                          {tokenProps.children}
-                        </span>
-                      )
-                    })}
-                  </div>
-                )
-              })}
-            </pre>
-          )}
-        </Highlight>
-      </div>
-    )
-  )
-}
-
-ScssDocs.displayName = 'ScssDocs'
-
-export default ScssDocs
diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx
deleted file mode 100644
index 26cd82d0..00000000
--- a/packages/docs/src/components/Seo.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react'
-import { useLocation } from '@reach/router'
-import { useStaticQuery, graphql } from 'gatsby'
-
-interface SEOProps {
-  title?: string
-  description?: string
-  name?: string
-  image?: string
-  article?: string
-}
-
-const SEO = ({ title, description, name, image, article }: SEOProps) => {
-  const { pathname } = useLocation()
-  const { site } = useStaticQuery(query)
-
-  const {
-    defaultTitle,
-    titleTemplate,
-    defaultDescription,
-    siteUrl,
-    defaultImage,
-    twitterUsername,
-  } = site.siteMetadata
-
-  const prefix = site.pathPrefix
-
-  const seo = {
-    title: title || defaultTitle,
-    description: description || defaultDescription,
-    name: name,
-    image: `${siteUrl}${image || defaultImage}`,
-    url: `${siteUrl}${pathname.replace(`${prefix}/`, '')}`,
-  }
-
-  const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
-
-  return (
-    <>
-      <title>{formattedTitle}</title>
-      <meta name="description" content={seo.description} />
-      <meta name="image" content={seo.image} />
-      {seo.url && <meta property="og:url" content={seo.url.replace('docs//', 'docs/')} />}
-      {(article ? true : null) && <meta property="og:type" content="article" />}
-      {seo.title && <meta property="og:title" content={seo.title} />}
-      {seo.description && <meta property="og:description" content={seo.description} />}
-      {seo.image && <meta property="og:image" content={seo.image} />}
-      <meta name="twitter:card" content="summary_large_image" />
-      {twitterUsername && <meta name="twitter:creator" content={twitterUsername} />}
-      {seo.title && <meta name="twitter:title" content={seo.title} />}
-      {seo.description && <meta name="twitter:description" content={seo.description} />}
-      {seo.image && <meta name="twitter:image" content={seo.image} />}
-      {seo.name && (
-        <script type="application/ld+json">
-          {`{
-            "@context": "https://schema.org",
-            "@type": "BreadcrumbList",
-            "itemListElement": [{
-              "@type": "ListItem",
-              "position": 1,
-              "name": "React",
-              "item": "${siteUrl}"
-            },{
-              "@type": "ListItem",
-              "position": 2,
-              "name": "${seo.name}",
-              "item": "${seo.url.replace('docs//', 'docs/')}"
-            }]
-          }`}
-        </script>
-      )}
-    </>
-  )
-}
-
-export default SEO
-
-const query = graphql`
-  query SEO {
-    site {
-      siteMetadata {
-        defaultTitle: title
-        titleTemplate
-        defaultDescription: description
-        siteUrl: url
-        defaultImage: image
-        twitterUsername
-      }
-      pathPrefix
-    }
-  }
-`
diff --git a/packages/docs/src/components/Sidebar.tsx b/packages/docs/src/components/Sidebar.tsx
deleted file mode 100644
index 7897a3d6..00000000
--- a/packages/docs/src/components/Sidebar.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { FC } from 'react'
-import { Link } from 'gatsby'
-
-import {
-  CDropdown,
-  CDropdownToggle,
-  CDropdownMenu,
-  CDropdownItem,
-  CSidebar,
-  CSidebarBrand,
-} from '@coreui/react'
-import { SidebarNav } from '.'
-
-import { AppContext } from './../AppContext'
-
-import items from './../nav'
-
-const Sidebar: FC = () => {
-  return (
-    <AppContext.Consumer>
-      {(context) => (
-        <CSidebar
-          className="docs-sidebar border-end px-xl-4 elevation-0"
-          position="fixed"
-          size="lg"
-          visible={context.sidebarVisible}
-          onVisibleChange={(value: boolean) =>
-            context.setSidebarVisible && context.setSidebarVisible(value)
-          }
-        >
-          <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"
-              height={50}
-              className="d-block mt-4 mb-5"
-            >
-              <g fill="#00a1ff">
-                <path d="m361.773 90.151-8.768-20.736a.25.25 0 0 0-.255-.191h-9.985a.226.226 0 0 0-.256.255v20.543a.566.566 0 0 1-.64.641h-1.216a.565.565 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h12.544a9.979 9.979 0 0 1 7.744 3.23 12.204 12.204 0 0 1 2.944 8.546 12.439 12.439 0 0 1-2.24 7.584 9.37 9.37 0 0 1-6.08 3.744c-.17.086-.213.191-.127.32l8.704 20.608.063.256c0 .341-.191.511-.575.511h-1.153a.703.703 0 0 1-.704-.51Zm-19.264-41.793v18.496a.226.226 0 0 0 .256.257h10.304a7.669 7.669 0 0 0 6.017-2.593 9.878 9.878 0 0 0 2.303-6.815 10.286 10.286 0 0 0-2.272-6.975 7.601 7.601 0 0 0-6.048-2.625h-10.304a.226.226 0 0 0-.256.255ZM401.082 48.102H381.05a.226.226 0 0 0-.256.256v18.496a.226.226 0 0 0 .256.257h13.824a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64H381.05a.226.226 0 0 0-.256.256v18.56a.226.226 0 0 0 .256.256h20.032a.567.567 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64h-22.144a.566.566 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h22.144a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64ZM438.802 90.151l-2.431-8.832a.296.296 0 0 0-.32-.192h-16.768a.295.295 0 0 0-.32.192l-2.368 8.768a.658.658 0 0 1-.704.576h-1.216a.588.588 0 0 1-.48-.191.582.582 0 0 1-.096-.513l12.031-43.584a.644.644 0 0 1 .704-.512h1.6a.644.644 0 0 1 .704.512l12.16 43.584.065.192c0 .342-.214.512-.64.512h-1.217a.643.643 0 0 1-.704-.512ZM419.7 78.92a.303.303 0 0 0 .223.096h15.489a.304.304 0 0 0 .223-.096c.065-.065.074-.117.033-.16l-7.872-28.928c-.043-.085-.086-.128-.128-.128s-.086.043-.128.128l-7.872 28.928c-.043.043-.033.095.032.16ZM456.357 87.911a11.637 11.637 0 0 1-3.328-8.704V57.19a11.414 11.414 0 0 1 3.36-8.575 12.09 12.09 0 0 1 8.8-3.265 12.253 12.253 0 0 1 8.865 3.232 11.39 11.39 0 0 1 3.36 8.608v.64a.566.566 0 0 1-.641.641l-1.28.064q-.64 0-.64-.577v-.832a9.287 9.287 0 0 0-2.656-6.912 10.67 10.67 0 0 0-14.016 0 9.284 9.284 0 0 0-2.656 6.912V79.4a9.282 9.282 0 0 0 2.656 6.912 10.673 10.673 0 0 0 14.016 0 9.286 9.286 0 0 0 2.656-6.912v-.768q0-.576.64-.575l1.28.063a.566.566 0 0 1 .64.64v.511a11.498 11.498 0 0 1-3.36 8.64 13.626 13.626 0 0 1-17.696 0ZM514.193 46.503v.96a.566.566 0 0 1-.64.64H502.8a.226.226 0 0 0-.256.256v41.663a.566.566 0 0 1-.64.641h-1.216a.565.565 0 0 1-.64-.64V48.357a.227.227 0 0 0-.256-.255h-10.176a.565.565 0 0 1-.64-.64v-.96a.566.566 0 0 1 .64-.64h23.936a.566.566 0 0 1 .64.64ZM521.822 89.51a2.835 2.835 0 0 1-.8-2.047 2.923 2.923 0 0 1 .8-2.112 2.758 2.758 0 0 1 2.08-.833 2.847 2.847 0 0 1 2.944 2.945 2.754 2.754 0 0 1-.832 2.08 2.921 2.921 0 0 1-2.112.8 2.754 2.754 0 0 1-2.08-.832ZM542.16 88.007a11.31 11.31 0 0 1-3.2-8.416v-5.44a.566.566 0 0 1 .64-.64h1.217a.567.567 0 0 1 .64.64v5.504a9.144 9.144 0 0 0 2.528 6.72 8.973 8.973 0 0 0 6.687 2.56 8.79 8.79 0 0 0 9.28-9.28V46.504a.566.566 0 0 1 .64-.64h1.217a.566.566 0 0 1 .64.64V79.59a11.252 11.252 0 0 1-3.233 8.416 13.062 13.062 0 0 1-17.055 0ZM580.106 88.103a10.482 10.482 0 0 1-3.36-8.127v-1.793a.566.566 0 0 1 .64-.64h1.088a.566.566 0 0 1 .64.64v1.6a8.544 8.544 0 0 0 2.752 6.655 10.536 10.536 0 0 0 7.36 2.496 9.876 9.876 0 0 0 6.976-2.367 8.215 8.215 0 0 0 2.56-6.336 8.397 8.397 0 0 0-1.12-4.416 11.383 11.383 0 0 0-3.328-3.392 71.626 71.626 0 0 0-6.176-3.712 71.302 71.302 0 0 1-6.24-3.84 12.174 12.174 0 0 1-3.424-3.68 10.257 10.257 0 0 1-1.28-5.345 9.86 9.86 0 0 1 3.072-7.744 12.012 12.012 0 0 1 8.32-2.752q5.695 0 8.96 3.105a10.823 10.823 0 0 1 3.264 8.223v1.601a.566.566 0 0 1-.64.64h-1.152a.565.565 0 0 1-.64-.64v-1.471a8.865 8.865 0 0 0-2.624-6.689 9.994 9.994 0 0 0-7.232-2.528 9.365 9.365 0 0 0-6.528 2.144 7.822 7.822 0 0 0-2.368 6.112 7.8 7.8 0 0 0 1.024 4.16 10.376 10.376 0 0 0 3.008 3.04 62.829 62.829 0 0 0 5.952 3.488 71.058 71.058 0 0 1 6.72 4.256 13.454 13.454 0 0 1 3.648 3.936 10.049 10.049 0 0 1 1.28 5.184 10.714 10.714 0 0 1-3.264 8.191q-3.263 3.073-8.832 3.072-5.697 0-9.057-3.072Z" />
-              </g>
-              <g fill="var(--cui-body-color, currentColor)">
-                <path d="m99.59 36.058-39-22.517a12 12 0 0 0-12 0l-39 22.517a12.034 12.034 0 0 0-6 10.392v45.033a12.033 12.033 0 0 0 6 10.393l39 22.516a12 12 0 0 0 12 0l39-22.516a12.033 12.033 0 0 0 6-10.393V46.45a12.034 12.034 0 0 0-6-10.392Zm-2 55.425a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0l-39-22.517a4 4 0 0 1-2-3.464V46.45a4 4 0 0 1 2-3.464l39-22.517a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464Z" />
-                <path d="M77.612 82.005h-2.866a4.001 4.001 0 0 0-1.925.493l-17.28 9.485L35.59 80.465V57.487L55.54 45.97l17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.712a2 2 0 0 0-1.04-1.754L59.383 38.952a8.039 8.039 0 0 0-7.842.09L31.59 50.56a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.087l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-1.999-2ZM172.335 45.362a15.017 15.017 0 0 0-15 15v17.277a15 15 0 0 0 30 0V60.36a15.017 15.017 0 0 0-15-15Zm7 32.277a7 7 0 0 1-14 0V60.36a7 7 0 0 1 14 0ZM135.67 53.421a7.01 7.01 0 0 1 7.867 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097 15.018 15.018 0 0 0-15.717-13.883 15.288 15.288 0 0 0-14.244 15.416v16.407a15.288 15.288 0 0 0 14.245 15.416 15.018 15.018 0 0 0 15.716-13.884 1.01 1.01 0 0 0-.999-1.097h-6.03a.99.99 0 0 0-.984.865 7.01 7.01 0 0 1-7.868 6.075 7.164 7.164 0 0 1-6.08-7.184v-16.79a7.164 7.164 0 0 1 6.08-7.184ZM218.512 72.928a12.158 12.158 0 0 0 7.185-11.077v-3.702A12.15 12.15 0 0 0 213.547 46H196.59a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V74h6.622l7.915 17.414a1 1 0 0 0 .91.586h6.591a1 1 0 0 0 .91-1.414Zm-.815-11.077a4.154 4.154 0 0 1-4.15 4.149h-9.85V54h9.85a4.154 4.154 0 0 1 4.15 4.15ZM260.59 46h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19V72h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13V54h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM298.59 46h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V47a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V47a1 1 0 0 0-1-1Z" />
-                <rect width="8" height="38" x="307.59" y="46" rx="1" />
-              </g>
-            </svg>
-          </CSidebarBrand>
-          <div className="text-body-secondary mx-3 mb-2 small fw-semibold">Framework:</div>
-          <CDropdown className="mx-3 mb-4">
-            <CDropdownToggle color="primary" variant="outline">
-              React.js
-            </CDropdownToggle>
-            <CDropdownMenu className="w-100">
-              <CDropdownItem href="https://coreui.io/angular/docs/" target="_blank">
-                Angular
-              </CDropdownItem>
-              <CDropdownItem href="https://coreui.io/docs/" target="_blank">
-                JavaScript / Vanilla JS
-              </CDropdownItem>
-              <CDropdownItem href="https://coreui.io/vue/docs/" target="_blank">
-                Vue.js
-              </CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-          <SidebarNav items={items} />
-        </CSidebar>
-      )}
-    </AppContext.Consumer>
-  )
-}
-
-Sidebar.displayName = 'Sidebar'
-
-export default Sidebar
diff --git a/packages/docs/src/components/SidebarNav.tsx b/packages/docs/src/components/SidebarNav.tsx
deleted file mode 100644
index 1bd5e299..00000000
--- a/packages/docs/src/components/SidebarNav.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { ReactNode } from 'react'
-import { Link } from 'gatsby'
-
-import { CBadge, CNavGroup, CNavItem, CNavLink, CSidebarNav } from '@coreui/react'
-import CIcon from '@coreui/icons-react'
-
-export type Badge = {
-  color: string
-  text: string
-}
-
-export type NavItem = {
-  name: string | JSX.Element
-  icon?: string | JSX.Element
-  badge?: Badge
-  to: string
-  items?: NavItem[]
-}
-
-interface SidebarNavProps {
-  items: NavItem[]
-}
-
-export const SidebarNav = ({ items }: SidebarNavProps) => {
-  const navLink = (name: string | JSX.Element, icon: string | ReactNode, badge?: Badge) => {
-    return (
-      <>
-        {icon && typeof icon === 'string' ? <CIcon name={icon} customClassName="nav-icon" /> : icon}
-        {name && name}
-        {badge && (
-          <CBadge color={badge.color} className="ms-auto">
-            {badge.text}
-          </CBadge>
-        )}
-      </>
-    )
-  }
-
-  const navItem = (item: NavItem, index: number) => {
-    const { name, badge, icon, ...rest } = item
-    return (
-      <CNavItem key={index}>
-        <CNavLink as={Link} activeClassName="active" partiallyActive {...rest}>
-          {navLink(name, icon, badge)}
-        </CNavLink>
-      </CNavItem>
-    )
-  }
-
-  const navGroup = (item: NavItem, index: number) => {
-    const { name, icon, items } = item
-    return (
-      <CNavGroup compact toggler={navLink(name, icon)} key={index}>
-        {items?.map((item: NavItem, index: number) =>
-          item.items ? navGroup(item, index) : navItem(item, index),
-        )}
-      </CNavGroup>
-    )
-  }
-
-  return (
-    <CSidebarNav>
-      {items &&
-        items.map((item: NavItem, index: number) =>
-          item.items ? navGroup(item, index) : navItem(item, index),
-        )}
-    </CSidebarNav>
-  )
-}
diff --git a/packages/docs/src/components/Toc.tsx b/packages/docs/src/components/Toc.tsx
deleted file mode 100644
index e5d3825f..00000000
--- a/packages/docs/src/components/Toc.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { CSSProperties, forwardRef, useState } from 'react'
-import { CCollapse, CNav } from '@coreui/react'
-
-export type TocItem = {
-  url: string
-  title: string
-  items: TocItem[]
-}
-
-interface TocProps {
-  items: TocItem[]
-  style: CSSProperties
-}
-
-const toc = (items: TocItem[]) => {
-  return (
-    items &&
-    items.map((item, index) => {
-      if (Array.isArray(item.items)) {
-        return (
-          <li key={index}>
-            <a href={item.url}>{item.title}</a>
-            <ul>{toc(item.items)}</ul>
-          </li>
-        )
-      }
-      return (
-        <li key={index}>
-          <a href={item.url}>{item.title}</a>
-        </li>
-      )
-    })
-  )
-}
-
-const Toc = forwardRef<HTMLDivElement, TocProps>(({ items, ...rest }, ref) => {
-  const [visible, setVisible] = useState(false)
-  return (
-    <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-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"
-        onClick={() => setVisible(!visible)}
-      >
-        On this page
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="icon d-lg-none ms-2"
-          aria-hidden="true"
-          viewBox="0 0 512 512"
-        >
-          <polygon
-            fill="var(--ci-primary-color, currentColor)"
-            points="256 382.627 60.687 187.313 83.313 164.687 256 337.372 428.687 164.687 451.313 187.313 256 382.627"
-            className="ci-primary"
-          />
-        </svg>
-      </button>
-      <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>
-        </CNav>
-      </CCollapse>
-    </div>
-  )
-})
-
-Toc.displayName = 'Toc'
-
-export default Toc
diff --git a/packages/docs/src/components/index.ts b/packages/docs/src/components/index.ts
deleted file mode 100644
index 3770af70..00000000
--- a/packages/docs/src/components/index.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Ads from './Ads'
-import Banner from './Banner'
-import Callout from './Callout'
-import CodeBlock from './CodeBlock'
-import ClassNamesDocs from './ClassNamesDocs'
-import ComponentSubNav from './ComponentSubNav'
-import Example from './Example'
-import ExampleSnippet from './ExampleSnippet'
-import Footer from './Footer'
-import Header from './Header'
-import JSXDocs from './JSXDocs'
-import ScssDocs from './ScssDocs'
-import Seo from './Seo'
-import Sidebar from './Sidebar'
-import { SidebarNav } from './SidebarNav'
-import Toc from './Toc'
-
-export {
-  Ads,
-  Banner,
-  Callout,
-  CodeBlock,
-  ClassNamesDocs,
-  ComponentSubNav,
-  Example,
-  ExampleSnippet,
-  Footer,
-  Header,
-  JSXDocs,
-  ScssDocs,
-  Seo,
-  Sidebar,
-  SidebarNav,
-  Toc,
-}
diff --git a/packages/docs/src/data/other_frameworks.json b/packages/docs/src/data/other_frameworks.json
deleted file mode 100644
index df64148b..00000000
--- a/packages/docs/src/data/other_frameworks.json
+++ /dev/null
@@ -1,241 +0,0 @@
-{
-  "accordion": {
-    "angular": "https://coreui.io/angular/docs/components/accordion/",
-    "bootstrap": "https://coreui.io/docs/components/accordion/",
-    "react": "https://coreui.io/react/docs/components/accordion/",
-    "vue": "https://coreui.io/vue/docs/components/accordion.html"
-  },
-  "alert": {
-    "angular": "https://coreui.io/angular/docs/components/alert/",
-    "bootstrap": "https://coreui.io/docs/components/alerts/",
-    "react": "https://coreui.io/react/docs/components/alert/",
-    "vue": "https://coreui.io/vue/docs/components/alert.html"
-  },
-  "avatar": {
-    "angular": "https://coreui.io/angular/docs/components/avatar/",
-    "bootstrap": "https://coreui.io/docs/components/avatar/",
-    "react": "https://coreui.io/react/docs/components/avatar/",
-    "vue": "https://coreui.io/vue/docs/components/avatar.html"
-  },
-  "badge": {
-    "angular": "https://coreui.io/angular/docs/components/badge/",
-    "bootstrap": "https://coreui.io/docs/components/badge/",
-    "react": "https://coreui.io/react/docs/components/badge/",
-    "vue": "https://coreui.io/vue/docs/components/badge.html"
-  },
-  "breadcrumb": {
-    "angular": "https://coreui.io/angular/docs/components/breadcrumb/",
-    "bootstrap": "https://coreui.io/docs/components/breadcrumb/",
-    "react": "https://coreui.io/react/docs/components/breadcrumb/",
-    "vue": "https://coreui.io/vue/docs/components/breadcrumb.html"
-  },
-  "button": {
-    "angular": "https://coreui.io/angular/docs/components/button/",
-    "bootstrap": "https://coreui.io/docs/components/buttons/",
-    "react": "https://coreui.io/react/docs/components/button/",
-    "vue": "https://coreui.io/vue/docs/components/button.html"
-  },
-  "button-group": {
-    "angular": "https://coreui.io/angular/docs/components/button-group/",
-    "bootstrap": "https://coreui.io/docs/components/button-group/",
-    "react": "https://coreui.io/react/docs/components/button-group/",
-    "vue": "https://coreui.io/vue/docs/components/button-group.html"
-  },
-  "callout": {
-    "angular": "https://coreui.io/angular/docs/components/callout/",
-    "bootstrap": "https://coreui.io/docs/components/callout/",
-    "react": "https://coreui.io/react/docs/components/callout/",
-    "vue": "https://coreui.io/vue/docs/components/callout.html"
-  },
-  "card": {
-    "angular": "https://coreui.io/angular/docs/components/card/",
-    "bootstrap": "https://coreui.io/docs/components/card/",
-    "react": "https://coreui.io/react/docs/components/card/",
-    "vue": "https://coreui.io/vue/docs/components/card.html"
-  },
-  "carousel": {
-    "angular": "https://coreui.io/angular/docs/components/carousel/",
-    "bootstrap": "https://coreui.io/docs/components/carousel/",
-    "react": "https://coreui.io/react/docs/components/carousel/",
-    "vue": "https://coreui.io/vue/docs/components/carousel.html"
-  },
-  "checkbox": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
-    "react": "https://coreui.io/react/docs/forms/checkbox/",
-    "vue": "https://coreui.io/vue/docs/forms/checkbox.html"
-  },
-  "close-button": {
-    "angular": "https://coreui.io/angular/docs/components/close-button/",
-    "bootstrap": "https://coreui.io/docs/components/close-button/",
-    "react": "https://coreui.io/react/docs/components/close-button/",
-    "vue": "https://coreui.io/vue/docs/components/close-button.html"
-  },
-  "collapse": {
-    "angular": "https://coreui.io/angular/docs/components/collapse/",
-    "bootstrap": "https://coreui.io/docs/components/collapse/",
-    "react": "https://coreui.io/react/docs/components/collapse/",
-    "vue": "https://coreui.io/vue/docs/components/collapse.html"
-  },
-  "dropdown": {
-    "angular": "https://coreui.io/angular/docs/components/dropdown/",
-    "bootstrap": "https://coreui.io/docs/components/dropdowns/",
-    "react": "https://coreui.io/react/docs/components/dropdown/",
-    "vue": "https://coreui.io/vue/docs/components/dropdown.html"
-  },
-  "footer": {
-    "angular": "https://coreui.io/angular/docs/components/footer/",
-    "bootstrap": "https://coreui.io/docs/components/footer/",
-    "react": "https://coreui.io/react/docs/components/footer/",
-    "vue": "https://coreui.io/vue/docs/components/footer.html"
-  },
-  "header": {
-    "angular": "https://coreui.io/angular/docs/components/header/",
-    "bootstrap": "https://coreui.io/docs/components/header/",
-    "react": "https://coreui.io/react/docs/components/header/",
-    "vue": "https://coreui.io/vue/docs/components/header.html"
-  },
-  "icon": {
-    "angular": "https://coreui.io/angular/docs/components/icon/",
-    "bootstrap": "https://coreui.io/docs/components/icon/",
-    "react": "https://coreui.io/react/docs/components/icon/",
-    "vue": "https://coreui.io/vue/docs/components/icon.html"
-  },
-  "image": {
-    "angular": "https://coreui.io/angular/docs/components/image/",
-    "bootstrap": "https://coreui.io/docs/content/images/",
-    "react": "https://coreui.io/react/docs/components/image/",
-    "vue": "https://coreui.io/vue/docs/components/image.html"
-  },
-  "input": {
-    "angular": "https://coreui.io/angular/docs/forms/input/",
-    "bootstrap": "https://coreui.io/docs/forms/form-control/",
-    "react": "https://coreui.io/react/docs/forms/input/",
-    "vue": "https://coreui.io/vue/docs/forms/input.html"
-  },
-  "input-group": {
-    "angular": "https://coreui.io/angular/docs/forms/input-group/",
-    "bootstrap": "https://coreui.io/docs/forms/input-group/",
-    "react": "https://coreui.io/react/docs/forms/input-group/",
-    "vue": "https://coreui.io/vue/docs/forms/input-group.html"
-  },
-  "floating-labels": {
-    "angular": "https://coreui.io/angular/docs/forms/floating-labels/",
-    "bootstrap": "https://coreui.io/docs/forms/floating-labels/",
-    "react": "https://coreui.io/react/docs/forms/floating-labels/",
-    "vue": "https://coreui.io/vue/docs/forms/floating-labels.html"
-  },
-  "list-group": {
-    "angular": "https://coreui.io/angular/docs/components/list-group/",
-    "bootstrap": "https://coreui.io/docs/components/list-group/",
-    "react": "https://coreui.io/react/docs/components/list-group/",
-    "vue": "https://coreui.io/vue/docs/components/list-group.html"
-  },
-  "modal": {
-    "angular": "https://coreui.io/angular/docs/components/modal/",
-    "bootstrap": "https://coreui.io/docs/components/modal/",
-    "react": "https://coreui.io/react/docs/components/modal/",
-    "vue": "https://coreui.io/vue/docs/components/modal.html"
-  },
-  "navbar": {
-    "bootstrap": "https://coreui.io/docs/components/navbar/",
-    "react": "https://coreui.io/react/docs/components/navbar/",
-    "vue": "https://coreui.io/vue/docs/components/navbar.html"
-  },
-  "navs-tabs": {
-    "angular": "https://coreui.io/angular/docs/components/nav/",
-    "bootstrap": "https://coreui.io/docs/components/navs-tabs/",
-    "react": "https://coreui.io/react/docs/components/navs-tabs/",
-    "vue": "https://coreui.io/vue/docs/components/navs-tabs.html"
-  },
-  "offcanvas": {
-    "angular": "https://coreui.io/angular/docs/components/offcanvas/",
-    "bootstrap": "https://coreui.io/docs/components/offcanvas/",
-    "react": "https://coreui.io/react/docs/components/offcanvas/",
-    "vue": "https://coreui.io/vue/docs/components/offcanvas.html"
-  },
-  "pagination": {
-    "angular": "https://coreui.io/angular/docs/components/pagination/",
-    "bootstrap": "https://coreui.io/docs/components/pagination/",
-    "react": "https://coreui.io/react/docs/components/pagination/",
-    "vue": "https://coreui.io/vue/docs/components/pagination.html"
-  },
-  "placeholder": {
-    "angular": "https://coreui.io/angular/docs/components/placeholder/",
-    "bootstrap": "https://coreui.io/docs/components/placeholders/",
-    "react": "https://coreui.io/react/docs/components/placeholder/",
-    "vue": "https://coreui.io/vue/docs/components/placeholder.html"
-  },
-  "popover": {
-    "angular": "https://coreui.io/angular/docs/components/popover/",
-    "bootstrap": "https://coreui.io/docs/components/popovers/",
-    "react": "https://coreui.io/react/docs/components/popover/",
-    "vue": "https://coreui.io/vue/docs/components/popover.html"
-  },
-  "progress": {
-    "angular": "https://coreui.io/angular/docs/components/progress/",
-    "bootstrap": "https://coreui.io/docs/components/progress/",
-    "react": "https://coreui.io/react/docs/components/progress/",
-    "vue": "https://coreui.io/vue/docs/components/progress.html"
-  },
-  "radio": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
-    "react": "https://coreui.io/react/docs/forms/radio/",
-    "vue": "https://coreui.io/vue/docs/forms/radio.html"
-  },
-  "range": {
-    "angular": "https://coreui.io/angular/docs/forms/range/",
-    "bootstrap": "https://coreui.io/docs/forms/range/",
-    "react": "https://coreui.io/react/docs/forms/range/",
-    "vue": "https://coreui.io/vue/docs/forms/range.html"
-  },
-  "select": {
-    "angular": "https://coreui.io/angular/docs/forms/select/",
-    "bootstrap": "https://coreui.io/docs/forms/select/",
-    "react": "https://coreui.io/react/docs/forms/select/",
-    "vue": "https://coreui.io/vue/docs/forms/select.html"
-  },
-  "sidebar": {
-    "angular": "https://coreui.io/angular/docs/components/sidebar/",
-    "bootstrap": "https://coreui.io/docs/components/sidebar/",
-    "react": "https://coreui.io/react/docs/components/sidebar/",
-    "vue": "https://coreui.io/vue/docs/components/sidebar.html"
-  },
-  "spinner": {
-    "angular": "https://coreui.io/angular/docs/components/spinner/",
-    "bootstrap": "https://coreui.io/docs/components/spinners/",
-    "react": "https://coreui.io/react/docs/components/spinner/",
-    "vue": "https://coreui.io/vue/docs/components/spinner.html"
-  },
-  "switch": {
-    "angular": "https://coreui.io/angular/docs/forms/checks-radios/",
-    "bootstrap": "https://coreui.io/docs/forms/checks-radios/",
-    "react": "https://coreui.io/react/docs/forms/switch/",
-    "vue": "https://coreui.io/vue/docs/forms/switch.html"
-  },
-  "table": {
-    "angular": "https://coreui.io/angular/docs/components/table/",
-    "bootstrap": "https://coreui.io/docs/content/tables/",
-    "react": "https://coreui.io/react/docs/components/table/",
-    "vue": "https://coreui.io/vue/docs/components/table.html"
-  },
-  "textarea": {
-    "angular": "https://coreui.io/angular/docs/forms/form-control/",
-    "bootstrap": "https://coreui.io/docs/forms/form-control/",
-    "react": "https://coreui.io/react/docs/forms/textarea/",
-    "vue": "https://coreui.io/vue/docs/forms/textarea.html"
-  },
-  "toast": {
-    "angular": "https://coreui.io/angular/docs/components/toast/",
-    "bootstrap": "https://coreui.io/docs/components/toasts/",
-    "react": "https://coreui.io/react/docs/components/toast/",
-    "vue": "https://coreui.io/vue/docs/components/toast.html"
-  },
-  "tooltip": {
-    "angular": "https://coreui.io/angular/docs/components/tooltip/",
-    "bootstrap": "https://coreui.io/docs/components/tooltips/",
-    "react": "https://coreui.io/react/docs/components/tooltip/",
-    "vue": "https://coreui.io/vue/docs/components/tooltip.html"
-  }
-}
diff --git a/packages/docs/src/hooks/useStickyObserver.ts b/packages/docs/src/hooks/useStickyObserver.ts
deleted file mode 100644
index 325c719b..00000000
--- a/packages/docs/src/hooks/useStickyObserver.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-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/images/gatsby-astronaut.png b/packages/docs/src/images/gatsby-astronaut.png
deleted file mode 100644
index da58ece0..00000000
Binary files a/packages/docs/src/images/gatsby-astronaut.png and /dev/null differ
diff --git a/packages/docs/src/images/gatsby-icon.png b/packages/docs/src/images/gatsby-icon.png
deleted file mode 100644
index 908bc78a..00000000
Binary files a/packages/docs/src/images/gatsby-icon.png and /dev/null differ
diff --git a/packages/docs/src/index.ts b/packages/docs/src/index.ts
deleted file mode 100644
index cb64ac1b..00000000
--- a/packages/docs/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components'
diff --git a/packages/docs/src/nav.tsx b/packages/docs/src/nav.tsx
deleted file mode 100644
index 6aebda1d..00000000
--- a/packages/docs/src/nav.tsx
+++ /dev/null
@@ -1,386 +0,0 @@
-import React from 'react'
-import CIcon from '@coreui/icons-react'
-
-const nav = [
-  {
-    name: 'Getting Started',
-    to: '/getting-started/',
-    icon: (
-      <CIcon
-        customClassName="nav-icon text-primary"
-        icon={[
-          '512 512',
-          '<rect width="32" height="32" x="144" y="464" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="464" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="336" y="464" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M312,76.82v34.265a142.419,142.419,0,0,1,86.207,130.708C398.207,320.206,334.413,384,256,384S113.793,320.206,113.793,241.793A142.419,142.419,0,0,1,200,111.085V76.82c-68.671,23.373-118.207,88.5-118.207,164.973C81.793,337.851,159.942,416,256,416s174.207-78.149,174.207-174.207C430.207,165.316,380.671,100.193,312,76.82Z" class="ci-primary"></path><rect width="32" height="229.793" x="240" y="16" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect>',
-        ]}
-        width={64}
-        height={64}
-      />
-    ),
-    items: [
-      {
-        name: 'Introduction',
-        to: '/getting-started/introduction/',
-      },
-      {
-        name: 'Accessibility',
-        to: '/getting-started/accessibility/',
-      },
-    ],
-  },
-  {
-    name: 'Customize',
-    to: '/customize/',
-    icon: (
-      <CIcon
-        customClassName="nav-icon text-primary"
-        icon={[
-          '512 512',
-          '<path fill="var(--ci-primary-color, currentColor)" d="M425.514,82.055C380.778,39.458,320.673,16,256.271,16,196.248,16,136.415,36.073,92.115,71.071,43.032,109.85,16,164.161,16,224c0,60.1,15.531,98.87,48.876,122.019,28,19.438,68.412,27.731,135.124,27.731h29.75A26.28,26.28,0,0,1,256,400v47.984a32,32,0,0,0,32,32h.032l90.755-.088a32.094,32.094,0,0,0,19.686-6.8c9.725-7.622,34.727-29.4,56.8-66.9C482.3,360.262,496,307.037,496,248,496,184.268,470.968,125.334,425.514,82.055Zm2.173,307.915c-19.3,32.792-40.663,51.447-48.932,57.926L288,447.984V400a58.316,58.316,0,0,0-58.25-58.25H200c-59.69,0-94.644-6.585-116.876-22.019C58.833,302.869,48,273.344,48,224,48,113.833,153.9,48,256.271,48,372.755,48,464,135.851,464,248,464,301.253,451.782,349.019,427.687,389.97Z" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M128,144a56,56,0,1,0,56,56A56.064,56.064,0,0,0,128,144Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,128,224Z" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M240,72a56,56,0,1,0,56,56A56.064,56.064,0,0,0,240,72Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,240,152Z" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M360,128a56,56,0,1,0,56,56A56.064,56.064,0,0,0,360,128Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,360,208Z" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M376,264a56,56,0,1,0,56,56A56.064,56.064,0,0,0,376,264Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,376,344Z" class="ci-primary"/>',
-        ]}
-        width={64}
-        height={64}
-      />
-    ),
-    items: [
-      {
-        name: 'Sass',
-        to: '/customize/sass/',
-      },
-      {
-        name: 'Options',
-        to: '/customize/options/',
-      },
-      {
-        name: 'CSS Variables',
-        to: '/customize/css-variables/',
-      },
-    ],
-  },
-  {
-    name: 'Layout',
-    to: '/layout/',
-    icon: (
-      <CIcon
-        customClassName="nav-icon text-primary"
-        icon={[
-          '512 512',
-          '<path fill="var(--ci-primary-color, currentColor)" d="M16,64V448H496V64ZM464,240H192V96H464ZM192,272H312V416H192ZM48,96H160V416H48ZM344,416V272H464V416Z" class="ci-primary"></path>',
-        ]}
-        width={64}
-        height={64}
-      />
-    ),
-    items: [
-      {
-        name: 'Breakpoints',
-        to: '/layout/breakpoints/',
-      },
-      {
-        name: 'Containers',
-        to: '/layout/containers/',
-      },
-      {
-        name: 'Grid',
-        to: '/layout/grid/',
-      },
-      {
-        name: 'Columns',
-        to: '/layout/columns/',
-      },
-      {
-        name: 'Gutters',
-        to: '/layout/gutters/',
-      },
-    ],
-  },
-  {
-    name: 'Forms',
-    to: '/forms/',
-    icon: (
-      <CIcon
-        customClassName="nav-icon text-primary"
-        icon={[
-          '512 512',
-          '<rect width="288" height="32" x="112" y="152" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="288" height="32" x="112" y="240" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="152" height="32" x="112" y="328" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M480,48H32V464H480ZM448,432H64V80H448Z" class="ci-primary"></path>',
-        ]}
-        width={64}
-        height={64}
-      />
-    ),
-    items: [
-      {
-        name: 'Checkbox',
-        to: '/forms/checkbox/',
-      },
-      {
-        name: 'Input',
-        to: '/forms/input/',
-      },
-      {
-        name: 'Input Mask',
-        to: '/forms/input-mask/',
-      },
-      {
-        name: 'Input Group',
-        to: '/forms/input-group/',
-      },
-      {
-        name: 'Radio',
-        to: '/forms/radio/',
-      },
-      {
-        name: 'Range',
-        to: '/forms/range/',
-      },
-      {
-        name: 'Select',
-        to: '/forms/select/',
-      },
-      {
-        name: 'Switch',
-        to: '/forms/switch/',
-      },
-      {
-        name: 'Textarea',
-        to: '/forms/textarea/',
-      },
-      {
-        name: 'Floating Labels',
-        to: '/forms/floating-labels/',
-      },
-      {
-        name: 'Layout',
-        to: '/forms/layout/',
-      },
-      {
-        name: 'Validation',
-        to: '/forms/validation/',
-      },
-    ],
-  },
-  {
-    name: 'Components',
-    to: '/components/',
-    icon: (
-      <CIcon
-        customClassName="nav-icon text-primary"
-        icon={[
-          '512 512',
-          '<path fill="var(--ci-primary-color, currentColor)" d="M410.989,16H101.011L16,237.029V496H496V237.029Zm-288,32H240V240H49.143ZM184,272H328v40H184ZM464,464H48V272H152v72H360V272H464ZM272,240V48H389.012l73.845,192Z" class="ci-primary"></path>',
-        ]}
-        width={64}
-        height={64}
-      />
-    ),
-    items: [
-      {
-        name: 'Accordion',
-        to: '/components/accordion/',
-      },
-      {
-        name: 'Alert',
-        to: '/components/alert/',
-      },
-      {
-        name: 'Avatar',
-        to: '/components/avatar/',
-      },
-      {
-        name: 'Badge',
-        to: '/components/badge/',
-      },
-      {
-        name: 'Breadcrumb',
-        to: '/components/breadcrumb/',
-      },
-      {
-        name: 'Button',
-        to: '/components/button/',
-      },
-      {
-        name: 'Button Group',
-        to: '/components/button-group/',
-      },
-      {
-        name: 'Callout',
-        to: '/components/callout/',
-      },
-      {
-        name: 'Card',
-        to: '/components/card/',
-      },
-      {
-        name: 'Carousel',
-        to: '/components/carousel/',
-      },
-      {
-        name: 'Chart',
-        to: '/components/chart/',
-      },
-      {
-        name: 'Close Button',
-        to: '/components/close-button/',
-      },
-      {
-        name: 'Collapse',
-        to: '/components/collapse/',
-      },
-      {
-        name: 'Dropdown',
-        to: '/components/dropdown/',
-      },
-      {
-        name: 'Footer',
-        to: '/components/footer/',
-      },
-      {
-        name: 'Header',
-        to: '/components/header/',
-      },
-      {
-        name: 'Icon',
-        to: '/components/icon/',
-      },
-      {
-        name: 'Image',
-        to: '/components/image/',
-      },
-      {
-        name: 'List Group',
-        to: '/components/list-group/',
-      },
-      {
-        name: 'Modal',
-        to: '/components/modal/',
-      },
-      {
-        name: 'Navbar',
-        to: '/components/navbar/',
-      },
-      {
-        name: 'Navs & Tabs',
-        to: '/components/navs-tabs/',
-      },
-      {
-        name: 'Offcanvas',
-        to: '/components/offcanvas/',
-      },
-      {
-        name: 'Pagination',
-        to: '/components/pagination/',
-      },
-      {
-        name: 'Placeholder',
-        to: '/components/placeholder/',
-      },
-      {
-        name: 'Popover',
-        to: '/components/popover/',
-      },
-      {
-        name: 'Progress',
-        to: '/components/progress/',
-      },
-      {
-        name: 'Sidebar',
-        to: '/components/sidebar/',
-      },
-      {
-        name: 'Spinner',
-        to: '/components/spinner/',
-      },
-      {
-        name: 'Table',
-        to: '/components/table/',
-      },
-      {
-        name: 'Tabs',
-        to: '/components/tabs/',
-        badge: {
-          color: 'success',
-          text: 'New',
-        },
-      },
-      {
-        name: 'Toast',
-        to: '/components/toast/',
-      },
-      {
-        name: 'Tooltip',
-        to: '/components/tooltip/',
-      },
-      {
-        name: 'Widgets',
-        to: '/components/widgets/',
-      },
-    ],
-  },
-  {
-    name: 'Templates',
-    to: '/templates/',
-    icon: (
-      <CIcon
-        customClassName="nav-icon text-primary"
-        icon={[
-          '512 512',
-          '<path fill="var(--ci-primary-color, currentColor)" d="M472,232H424V120a24.028,24.028,0,0,0-24-24H40a24.028,24.028,0,0,0-24,24V366a24.028,24.028,0,0,0,24,24H212v50H152v32H304V440H244V390h92v58a24.027,24.027,0,0,0,24,24H472a24.027,24.027,0,0,0,24-24V256A24.027,24.027,0,0,0,472,232ZM336,256V358H48V128H392V232H360A24.027,24.027,0,0,0,336,256ZM464,440H368V264h96Z" class="ci-primary"/>',
-        ]}
-        width={64}
-        height={64}
-      />
-    ),
-    items: [
-      {
-        name: 'Admin & Dashboard',
-        to: '/templates/admin-dashboard/',
-        badge: {
-          color: 'success',
-          text: 'New',
-        },
-      },
-      {
-        name: 'Download',
-        to: '/templates/download/',
-      },
-      {
-        name: 'Installation',
-        to: '/templates/installation/',
-      },
-      {
-        name: 'Customize',
-        to: '/templates/customize/',
-      },
-      {
-        name: 'Contents',
-        to: '/templates/contents/',
-      },
-    ],
-  },
-  {
-    name: 'Migration',
-    to: '/migration/',
-    icon: (
-      <CIcon
-        customClassName="nav-icon text-primary"
-        icon={[
-          '512 512',
-          '<path fill="var(--ci-primary-color, currentColor)" d="M464,256.25C464,370.8,370.8,464,256.25,464S48.5,370.8,48.5,256.25,141.7,48.5,256.25,48.5a208,208,0,0,1,149.963,64H328.5v32h128V16.5h-32V85.478A239.717,239.717,0,1,0,496,256.25Z" class="ci-primary"></path><polygon fill="var(--ci-primary-color, currentColor)" points="272.5 112.451 240.5 112.549 241.017 282.756 353.301 334.53 366.699 305.47 272.954 262.244 272.5 112.451" class="ci-primary"></polygon>',
-        ]}
-        width={64}
-        height={64}
-      />
-    ),
-    items: [
-      {
-        name: 'v4',
-        to: '/migration/v4/',
-      },
-      {
-        name: 'v5',
-        to: '/migration/v5/',
-      },
-    ],
-  },
-]
-
-export default nav
diff --git a/packages/docs/src/pages/404.tsx b/packages/docs/src/pages/404.tsx
deleted file mode 100644
index d0f696de..00000000
--- a/packages/docs/src/pages/404.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-import { graphql, useStaticQuery } from 'gatsby'
-import { CButton } from '@coreui/react'
-
-import Seo from '../components/Seo'
-
-const NotFoundPage = () => {
-  const { site } = useStaticQuery(query)
-  const { siteUrl } = site.siteMetadata
-  return (
-    <>
-      <Seo title="404: Not found" />
-      <h1>404: Not Found</h1>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-      <CButton color="primary" href={siteUrl}>
-        Go to documentation
-      </CButton>
-    </>
-  )
-}
-
-export default NotFoundPage
-
-const query = graphql`
-  query URL {
-    site {
-      siteMetadata {
-        siteUrl: url
-      }
-    }
-  }
-`
diff --git a/packages/docs/src/styles/_ads.scss b/packages/docs/src/styles/_ads.scss
deleted file mode 100644
index b2b942f0..00000000
--- a/packages/docs/src/styles/_ads.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-// stylelint-disable declaration-no-important, selector-max-id
-@use "@coreui/coreui/scss/mixins/border-radius" as *;
-@use "@coreui/coreui/scss/mixins/breakpoints" as *;
-@use "@coreui/coreui/scss/vendor/rfs" as *;
-
-//
-// Carbon ads
-//
-
-#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;
-  text-align: left;
-  background-color: var(--cui-tertiary-bg);
-
-  a {
-    color: var(--cui-body-color);
-    text-decoration: none;
-  }
-
-  @include media-breakpoint-up(sm) {
-    @include border-radius(.5rem);
-  }
-}
-
-.carbon-img {
-  float: left;
-  margin-left: -145px;
-}
-
-.carbon-poweredby {
-  display: block;
-  margin-top: .75rem;
-  color: var(--cui-body-color) !important;
-}
diff --git a/packages/docs/src/styles/_anchor.scss b/packages/docs/src/styles/_anchor.scss
deleted file mode 100644
index 974fc725..00000000
--- a/packages/docs/src/styles/_anchor.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use "@coreui/coreui/scss/mixins/transition" as *;
-@use "@coreui/coreui/scss/variables" as *;
-
-.anchor-link {
-  padding: 0 .175rem;
-  font-weight: 400;
-  color: rgba($link-color, .5);
-  text-decoration: none;
-  opacity: 0;
-  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
-
-  &:focus,
-  &:hover,
-  :hover > &,
-  :target > & {
-    color: $link-color;
-    text-decoration: none;
-    opacity: 1;
-  }
-}
diff --git a/packages/docs/src/styles/_callouts.scss b/packages/docs/src/styles/_callouts.scss
deleted file mode 100644
index 9c29d8b1..00000000
--- a/packages/docs/src/styles/_callouts.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use "@coreui/coreui/scss/variables" as *;
-@use "variables" as *;
-
-//
-// Callouts
-//
-
-.docs-callout {
-  --#{$prefix}link-color-rgb: var(--cd-callout-link);
-  --#{$prefix}code-color: var(--cd-callout-code-color);
-
-  padding: 1.25rem;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-  background-color: var(--cd-callout-bg, var(--cui-gray-100));
-  border-left: .25rem solid var(--cd-callout-border, var(--cui-gray-300));
-
-  h4 {
-    margin-bottom: .25rem;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-
-  + .docs-callout {
-    margin-top: -.25rem;
-  }
-
-  .highlight {
-    background-color: rgba($black, .05);
-  }
-}
-
-// Variations
-@each $variant in $cd-callout-variants {
-  .docs-callout-#{$variant} {
-    --cd-callout-color: var(--cui-#{$variant}-text-emphasis);
-    --cd-callout-bg: rgba(var(--cui-#{$variant}-rgb), .1);
-    --cd-callout-border: var(--cui-#{$variant});
-  }
-}
diff --git a/packages/docs/src/styles/_component-examples.scss b/packages/docs/src/styles/_component-examples.scss
deleted file mode 100644
index a93971ce..00000000
--- a/packages/docs/src/styles/_component-examples.scss
+++ /dev/null
@@ -1,508 +0,0 @@
-@use "@coreui/coreui/scss/mixins/border-radius" as *;
-@use "@coreui/coreui/scss/mixins/breakpoints" as *;
-@use "@coreui/coreui/scss/mixins/clearfix" as *;
-@use "@coreui/coreui/scss/mixins/container" as *;
-@use "@coreui/coreui/scss/mixins/grid" as *;
-@use "@coreui/coreui/scss/vendor/rfs" as *;
-@use "@coreui/coreui/scss/variables" as *;
-@use "variables" as *;
-
-//
-// Docs examples
-//
-
-.docs-code-tabs {
-  padding: 0 ($cd-gutter-x * .5);
-  margin: 0 ($cd-gutter-x * -.5);
-
-  @include media-breakpoint-up(md) {
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.docs-code-tab-content {
-  .tab-pane > .docs-code-snippet,
-  .tab-pane > .highlight {
-    border-top: 0;
-    @include border-top-radius(0);
-
-    .highlight {
-      @include border-top-radius(0);
-    }
-  }
-}
-
-.docs-example-snippet {
-  border: solid var(--cui-border-color);
-  border-width: 1px 0;
-  margin: 0 ($cd-gutter-x * -.5) 1rem ($cd-gutter-x * -.5);
-  padding: 0;
-  @include border-radius(0);
-
-  .docs-example {
-    margin: 0;
-    padding: 1rem;
-    border-width: 0 1px 0 0;
-  }
-
-  .highlight-toolbar {
-    border-top: 1px solid var(--cui-border-color);
-  }
-
-  .highlight {
-    margin: 0;
-    padding: 1rem;
-  }
-
-  .docs-example,
-  .highlight {
-    border: 0
-  }
-
-  .highlight {
-    margin-bottom: 0;
-    @include border-top-radius(0);
-  }
-
-  @include media-breakpoint-up(sm) {
-    margin: 0 0 1rem 0;
-    border-width: 1px;
-    @include border-radius(var(--cui-border-radius));
-  }
-}
-
-.docs-example {
-  --cd-example-padding: 1rem;
-
-  position: relative;
-  padding: var(--cd-example-padding);
-  margin: 0 ($cd-gutter-x * -.5);
-  border: solid var(--cui-border-color);
-  border-width: 1px 0;
-  @include clearfix();
-
-  @include media-breakpoint-up(md) {
-    --cd-example-padding: 1.5rem;
-
-    margin-right: 0;
-    margin-left: 0;
-    border-width: 1px;
-    @include border-top-radius(var(--cui-border-radius));
-  }
-
-  + .docs-code-snippet {
-    @include border-top-radius(0);
-    border: solid var(--cui-border-color);
-    border-width: 0 1px 1px;
-  }
-
-  + p {
-    margin-top: 2rem;
-  }
-
-  > .form-control {
-    + .form-control {
-      margin-top: .5rem;
-    }
-  }
-
-  > .nav + .nav,
-  > .alert + .alert,
-  > .navbar + .navbar,
-  > .progress + .progress {
-    margin-top: $spacer;
-  }
-
-  > .dropdown-menu {
-    position: static;
-    display: block;
-  }
-
-  > :last-child,
-  > nav:last-child .breadcrumb {
-    margin-bottom: 0;
-  }
-
-  > hr:last-child {
-    margin-bottom: $spacer;
-  }
-
-  // Images
-  > svg + svg,
-  > img + img {
-    margin-left: .5rem;
-  }
-
-  // Avatars
-  > .avatar + .avatar {
-    margin-left: .25rem;
-  }
-
-  // Badges
-  > .badge + .badge {
-    margin-left: .25rem;
-  }
-
-  // Buttons
-  > .btn,
-  > .btn-group {
-    margin: .25rem .125rem;
-  }
-  > .btn-toolbar + .btn-toolbar {
-    margin-top: .5rem;
-  }
-
-  // List groups
-  > .list-group {
-    max-width: 400px;
-  }
-
-  > [class*="list-group-horizontal"] {
-    max-width: 100%;
-  }
-
-  // Navbars
-  .fixed-top,
-  .sticky-top {
-    position: static;
-    margin: calc(var(--cd-example-padding) * -1) calc(var(--cd-example-padding) * -1) var(--cd-example-padding); // stylelint-disable-line function-disallowed-list
-  }
-
-  .fixed-bottom,
-  .sticky-bottom {
-    position: static;
-    margin: var(--cd-example-padding) calc(var(--cd-example-padding) * -1) calc(var(--cd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
-
-  }
-
-  // Pagination
-  .pagination {
-    margin-bottom: 0;
-  }
-
-  // Spinners
-  > .spinner-grow + .spinner-border,
-  > .spinner-border + .spinner-grow,
-  > .spinner-border + .spinner-border,
-  > .spinner-grow + .spinner-grow {
-    margin-left: .25rem;
-  }
-
-  // Sidebar
-  .sidebar-narrow,
-  .sidebar-narrow-unfoldable {
-    position: static;
-  }
-
-  .sidebar-narrow-unfoldable {
-    min-height: 550px;
-  }
-}
-
-//
-// Grid examples
-//
-
-.docs-example-row [class^="col"],
-.docs-example-cols [class^="col"] > *,
-.docs-example-cssgrid [class*="grid"] > * {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  background-color: rgba(var(--cd-violet-rgb), .15);
-  border: 1px solid rgba(var(--cd-violet-rgb), .3);
-}
-
-.docs-example-row .row + .row,
-.docs-example-cssgrid .grid + .grid {
-  margin-top: 1rem;
-}
-
-.docs-example-row-flex-cols .row {
-  min-height: 10rem;
-  background-color: rgba(var(--cd-violet-rgb), .15);
-}
-
-.docs-example-flex div:not(.vr) {
-  background-color: rgba(var(--cd-violet-rgb), .15);
-  border: 1px solid rgba(var(--cd-violet-rgb), .3);
-}
-
-// Grid mixins
-.example-container {
-  width: 800px;
-  @include make-container();
-}
-
-.example-row {
-  @include make-row();
-}
-
-.example-content-main {
-  @include make-col-ready();
-
-  @include media-breakpoint-up(sm) {
-    @include make-col(6);
-  }
-
-  @include media-breakpoint-up(lg) {
-    @include make-col(8);
-  }
-}
-
-.example-content-secondary {
-  @include make-col-ready();
-
-  @include media-breakpoint-up(sm) {
-    @include make-col(6);
-  }
-
-  @include media-breakpoint-up(lg) {
-    @include make-col(4);
-  }
-}
-
-// Ratio helpers
-.docs-example-ratios {
-  .ratio {
-    display: inline-block;
-    width: 10rem;
-    color: var(--cui-secondary-color);
-    background-color: var(--cui-tertiary-bg);
-    border: var(--cui-border-width) solid var(--cui-border-color);
-
-    > div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-.docs-example-ratios-breakpoint {
-  .ratio-4x3 {
-    width: 16rem;
-
-    @include media-breakpoint-up(md) {
-      --cui-aspect-ratio: 50%; // 2x1
-    }
-  }
-}
-
-.docs-example-offcanvas {
-  .offcanvas {
-    position: static;
-    display: block;
-    height: 200px;
-    visibility: visible;
-    transform: translate(0);
-  }
-}
-
-// Tooltips
-.tooltip-demo {
-  a {
-    white-space: nowrap;
-  }
-
-  .btn {
-    margin: .25rem .125rem;
-  }
-}
-
-// scss-docs-start custom-tooltip
-.custom-tooltip {
-  --cui-tooltip-bg: var(--cui-primary);
-}
-// scss-docs-end custom-tooltip
-
-// scss-docs-start custom-popovers
-.custom-popover {
-  --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;
-}
-// scss-docs-end custom-popovers
-
-// Scrollspy demo on fixed height div
-.scrollspy-example {
-  height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
-}
-
-.scrollspy-example-2 {
-  height: 350px;
-  overflow: auto;
-}
-
-.simple-list-example-scrollspy {
-  .active {
-    background-color: rgba(var(--cd-violet-rgb), .15);
-  }
-}
-
-.docs-example-border-utils {
-  [class^="border"] {
-    display: inline-block;
-    width: 5rem;
-    height: 5rem;
-    margin: .25rem;
-    background-color: var(--cui-tertiary-bg);
-  }
-}
-
-.docs-example-rounded-utils {
-  [class*="rounded"] {
-    margin: .25rem;
-  }
-}
-
-.docs-example-position-utils {
-  position: relative;
-  padding: 2rem;
-
-  .position-relative {
-    height: 200px;
-    background-color: var(--cui-tertiary-bg);
-  }
-
-  .position-absolute {
-    width: 2rem;
-    height: 2rem;
-    background-color: var(--cui-body-color);
-    @include border-radius();
-  }
-}
-
-.docs-example-position-examples {
-  &::after {
-    content: none;
-  }
-}
-
-// Placeholders
-.docs-example-placeholder-cards {
-  &::after {
-    display: none;
-  }
-
-  .card {
-    width: 18rem;
-  }
-}
-
-// Toasts
-.docs-example-toasts {
-  min-height: 240px;
-}
-
-.docs-example-zindex-levels {
-  min-height: 15rem;
-
-  > div {
-    color: var(--cui-body-bg);
-    background-color: var(--cd-violet);
-    border: 1px solid var(--cd-purple);
-
-    > span {
-      position: absolute;
-      right: 5px;
-      bottom: 0;
-    }
-  }
-
-  > :nth-child(2) {
-    top: 3rem;
-    left: 3rem;
-  }
-  > :nth-child(3) {
-    top: 4.5rem;
-    left: 4.5rem;
-  }
-  > :nth-child(4) {
-    top: 6rem;
-    left: 6rem;
-  }
-  > :nth-child(5) {
-    top: 7.5rem;
-    left: 7.5rem;
-  }
-}
-
-//
-// Code snippets
-//
-
-.highlight {
-  position: relative;
-  padding: .75rem ($cd-gutter-x * .5);
-  margin: 0 ($cd-gutter-x * -.5) 1rem ($cd-gutter-x * -.5) ;
-  border: 1px solid var(--cui-border-color);
-  background-color: var(--cd-pre-bg);
-
-  @include media-breakpoint-up(md) {
-    padding: .75rem 1.25rem;
-    margin-right: 0;
-    margin-left: 0;
-    @include border-radius(var(--cui-border-radius));
-  }
-
-  pre {
-    padding: .25rem 0 .875rem;
-    margin-top: .8125rem;
-    margin-bottom: 0;
-    overflow: overlay;
-    white-space: pre;
-    background-color: transparent;
-    border: 0;
-  }
-
-  pre code {
-    @include font-size(inherit);
-    color: var(--cui-body-color); // Effectively the base text color
-    word-wrap: normal;
-  }
-}
-
-.docs-code-snippet {
-  margin: 0 ($cd-gutter-x * -.5) $spacer;
-
-  .highlight {
-    margin: 0;
-  }
-
-  .docs-example ~ .highlight {
-    border: solid var(--cui-border-color);
-    border-width: 1px 0 0;
-    @include border-top-radius(0);
-  }
-
-  .docs-example {
-    margin: 0;
-    border: 0;
-  }
-
-  @include media-breakpoint-up(md) {
-    margin-right: 0;
-    margin-left: 0;
-    @include border-radius($border-radius);
-  }
-}
-
-.highlight-toolbar {
-  background-color: var(--cd-pre-bg);
-}
-
-.docs-scss-docs {
-  .highlight-toolbar {
-    @include border-top-radius(calc(var(--cui-border-radius) + 1px));
-  }
-}
-
-.docs-example + .highlight {
-  border-top-width: 0;
-  @include border-top-radius(0);
-}
diff --git a/packages/docs/src/styles/_component-sub-nav.scss b/packages/docs/src/styles/_component-sub-nav.scss
deleted file mode 100644
index 093eeb58..00000000
--- a/packages/docs/src/styles/_component-sub-nav.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@use "@coreui/coreui/scss/mixins/transition" as *;
-
-.component-sub-nav-wrapper {
-  @include transition(box-shadow 0.2s linear);
-  &:before {
-    position: absolute;
-    z-index: -1;
-    content: '';
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 2px;
-    width: 90%;
-    max-width: 1140px;
-    margin: 0 auto;
-    background: var(--cui-border-color);
-    @include transition(max-width .2s ease-in-out, width .2s ease-in-out);
-  }
-
-  .component-sub-nav {
-    .nav-link {
-      @include transition(padding .2s linear);
-    }
-  }
-
-  &.sticky {
-    &::before {
-      width: 100%;
-      max-width: 100%;
-    }
-
-    .component-sub-nav {
-      .nav-link {
-        --cui-nav-underline-border-link-padding-y: .75rem;
-      }
-    }
-  }
-}
diff --git a/packages/docs/src/styles/_footer.scss b/packages/docs/src/styles/_footer.scss
deleted file mode 100644
index d7edfce1..00000000
--- a/packages/docs/src/styles/_footer.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "@coreui/coreui/scss/vendor/rfs" as *;
-@use "@coreui/coreui/scss/variables" as *;
-
-//
-// Footer
-//
-
-.footer {
-  --cui-footer-bg: var(--cui-tertiary-bg);
-  @include font-size(.875rem);
-
-  a {
-    color: var(--#{$prefix}secondary-color);
-    // text-decoration: none;
-
-    &:hover,
-    &:focus {
-      color: var(--cui-link-hover-color);
-    }
-  }
-}
diff --git a/packages/docs/src/styles/_layout.scss b/packages/docs/src/styles/_layout.scss
deleted file mode 100644
index 7b4740de..00000000
--- a/packages/docs/src/styles/_layout.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@use "@coreui/coreui/scss/mixins/breakpoints" as *;
-@use "@coreui/coreui/scss/mixins/transition" as *;
-@use "@coreui/coreui/scss/variables" as *;
-
-.wrapper {
-  width: 100%;
-  padding-inline-start: var(--cui-sidebar-occupy-start, 0);
-  will-change: auto;
-  @include transition(padding .15s);
-}
-
-.docs-sidebar {
-  grid-area: sidebar;
-}
-
-.docs-main {
-  grid-area: main;
-  display: grid;
-  grid-template-areas:
-    "header"
-    "intro"
-    "toc"
-    "content";
-  grid-template-rows: auto auto 1fr;
-  gap: .5rem;
-
-  @include media-breakpoint-down(lg) {
-    max-width: 760px;
-    margin-inline: auto;
-  }
-
-  @include media-breakpoint-up(xl) {
-    grid-template-areas:
-      "intro   toc"
-      "content toc";
-    grid-template-rows: auto auto;
-    grid-template-columns: 4fr 1fr;
-    gap: $grid-gutter-width;
-  }
-}
-
-.docs-header {
-  grid-area: header;
-}
-
-.docs-intro {
-  grid-area: intro;
-}
-
-.docs-toc {
-  grid-area: toc;
-}
-
-.docs-content {
-  grid-area: content;
-  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
-}
diff --git a/packages/docs/src/styles/_prism.scss b/packages/docs/src/styles/_prism.scss
deleted file mode 100644
index 8e6bc187..00000000
--- a/packages/docs/src/styles/_prism.scss
+++ /dev/null
@@ -1,176 +0,0 @@
-@use "sass:color";
-@use "@coreui/coreui/scss/mixins/color-mode" as *;
-@use "@coreui/coreui/scss/variables" as *;
-
-/* PrismJS 1.24.1
-https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
-/**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
- * Based on https://github.com/chriskempson/tomorrow-theme
- * @author Rose Pritchard
- */
-
-:root,
-[data-coreui-theme="light"] {
-  // --base00: #fff;
-  // --base01: #f5f5f5;
-  --base02: #c8c8fa;
-  --base03: #565c64;
-  --base04: #666;
-  --base05: #333;
-  --base06: #fff;
-  --base07: #{$teal-700}; // #9a6700
-  --base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
-  --base09: #{$cyan-700}; // #087990
-  --base0A: #{$purple-500}; // #795da3
-  --base0B: #{$blue-700}; // #183691
-  --base0C: #{$blue-700}; // #183691
-  --base0D: #{$purple-500}; // #795da3
-  --base0E: #{$pink-600}; // #a71d5d
-  --base0F: #333;
- }
-
-@include color-mode(dark, true) {
-  // --base00: #282c34;
-  // --base01: #353b45;
-  --base02: #3e4451;
-  --base03: #868e96;
-  --base04: #868e96;
-  --base05: #abb2bf;
-  --base06: #b6bdca;
-  --base07: #{$orange-300}; // #d19a66
-  --base08: #{$cyan-300};
-  --base09: #{$orange-300}; // #d19a66
-  --base0A: #{$yellow-200}; // #e5c07b
-  --base0B: #{$teal-300}; // #98c379
-  --base0C: #{$teal-300}; // #56b6c2
-  --base0D: #{$blue-300}; // #61afef
-  --base0E: #{$indigo-200}; // #c678dd
-  --base0F: #{$red-300}; // #be5046
-
-  .language-diff .gd {
-    color: $red-400;
-  }
-  .language-diff .gi {
-    color: $green-400;
-  }
-}
-
-code[class*='language-'],
-pre[class*='language-'] {
-  background: none;
-  font-family: var(--cui-font-monospace);
-  font-size: .875em;
-  text-align: left;
-  white-space: pre;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*='language-']:not(.language-sass):not(.language-scss):not(.language-text):not(.language-css) {
-  overflow: scroll;
-  max-height: 500px;
-}
-
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: var(--base03);
-}
-
-.token.tag {
-  color: var(--base08);
-}
-
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: var(--base0A);
-}
-
-.token.punctuation {
-  color: var(--base05);
-}
-
-.token.function-name {
-  color: var(--base0A); 
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: var(--base09);
-}
-
-.token.class-name,
-.token.maybe-class-name {
-  color: var(--base08);
-}
-
-.token.property,
-.token.constant,
-.token.symbol {
-  color: var(--base0A);
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: var(--base0E);
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: var(--base0C);
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: var(--base05);
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
-
-.language-bash,
-.language-sh {
-  .token-line::before {
-    color: var(--base03);
-    content: "$ ";
-    user-select: none;
-  }
-}
-
-.language-powershell::before {
-  color: var(--base0C);
-  content: "PM> ";
-  user-select: none;
-}
\ No newline at end of file
diff --git a/packages/docs/src/styles/_root.scss b/packages/docs/src/styles/_root.scss
deleted file mode 100644
index 417e1fb0..00000000
--- a/packages/docs/src/styles/_root.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use "@coreui/coreui/scss/functions/to-rgb" as *;
-@use "@coreui/coreui/scss/variables" as *;
-@use "variables" as *;
-
-:root {
-  --cd-purple: #{$cd-purple};
-  --cd-violet: #{$cd-violet};
-  --cd-accent: #{$cd-accent};
-  --cd-violet-rgb: #{to-rgb($cd-violet)};
-  --cd-accent-rgb: #{to-rgb($cd-accent)};
-  --cd-pink-rgb: #{to-rgb($pink-500)};
-  --cd-teal-rgb: #{to-rgb($teal-500)};
-  --cd-violet-bg: var(--cd-violet);
-  --cd-toc-color: var(--cd-violet);
-  --cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
-  --cd-callout-link: #{to-rgb($blue-600)};
-  --cd-callout-code-color: #{$pink-600};
-  --cd-pre-bg: var(--cui-tertiary-bg);
-}
diff --git a/packages/docs/src/styles/_scrolling.scss b/packages/docs/src/styles/_scrolling.scss
deleted file mode 100644
index 1026b940..00000000
--- a/packages/docs/src/styles/_scrolling.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// When navigating with the keyboard, prevent focus from landing behind the sticky header
-
-main {
-  a,
-  button,
-  h2,
-  h3,
-  h4,
-  [tabindex='0'] {
-    scroll-margin-top: 80px;
-    scroll-margin-bottom: 100px;
-  }
-}
-
-.component-sub-nav-wrapper + .container-lg .docs-main {
-  a,
-  button,
-  h2,
-  h3,
-  h4,
-  [tabindex='0'] {
-    scroll-margin-top: 130px;
-  }
-}
diff --git a/packages/docs/src/styles/_sidebar.scss b/packages/docs/src/styles/_sidebar.scss
deleted file mode 100644
index d8cfb716..00000000
--- a/packages/docs/src/styles/_sidebar.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@use "@coreui/coreui/scss/mixins/color-mode" as *;
-
-.docs-sidebar {
-  --cui-sidebar-bg: var(--cui-tertiary-bg);
-  --cui-sidebar-brand-bg: transparent;
-  --cui-sidebar-brand-color: var(--cui-body-color);
-
-  .sidebar-nav {
-    --cui-sidebar-nav-link-color: var(--cui-body-color);
-    --cui-sidebar-nav-link-active-bg: transparent;
-    --cui-sidebar-nav-link-active-color: var(--cui-primary);
-    --cui-sidebar-nav-link-hover-bg: transparent;
-    --cui-sidebar-nav-link-hover-color: var(--cui-primary);
-    --cui-sidebar-nav-link-icon-margin: 1rem;
-    --cui-sidebar-nav-group-bg: transparent;
-    --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);
-
-    .compact .nav-link {
-      --cui-sidebar-nav-link-padding-y: .375rem;
-    }
-
-    .nav-group-items {
-      --cui-sidebar-nav-link-color: var(--cui-body-color);
-    }
-  }
-}
-
-@include color-mode(dark) {
-  .docs-sidebar {
-    --cui-sidebar-bg: var(--cui-body-bg);
-  }
-}
diff --git a/packages/docs/src/styles/_table-api.scss b/packages/docs/src/styles/_table-api.scss
deleted file mode 100644
index 7018717e..00000000
--- a/packages/docs/src/styles/_table-api.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.table-api,
-.table-docs {
-  .table {
-    margin: 0;
-  }
-
-  tr {
-    scroll-margin-top: 80px;
-    scroll-margin-bottom: 100px;
-  }
-
-  tr th {
-    padding: 0.75rem 1rem;
-  }
-
-  tr td {
-    padding: 1rem;
-  }
-
-  th {
-    background-color: var(--cui-tertiary-bg);
-  }
-
-  tr:nth-child(2n-1):has(+ tr td[colspan='3']) td {
-    border-bottom-style: dashed;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  tbody tr:last-child td {
-    border-bottom: 0;
-  }
-
-  .highlight {
-    margin: 1rem -1rem -1rem -1rem !important;
-    padding: 0.25rem 1rem;
-    border: 0;
-    border-radius: 0;
-    border: 2px solid var(--cui-body-bg);
-
-    code[class*='language-'],
-    pre[class*='language-'] {
-      white-space: pre-wrap;
-    }
-  }
-}
-
-.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
deleted file mode 100644
index 7a016e59..00000000
--- a/packages/docs/src/styles/_toc.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-// stylelint-disable selector-max-type
-
-@use "@coreui/coreui/scss/functions/math" as *;
-@use "@coreui/coreui/scss/mixins/border-radius" as *;
-@use "@coreui/coreui/scss/mixins/breakpoints" as *;
-@use "@coreui/coreui/scss/vendor/rfs" as *;
-
-.docs-toc {
-  @include media-breakpoint-up(xl) {
-    position: sticky;
-    top: 5rem;
-    right: 0;
-    z-index: 2;
-    height: subtract(100vh, 7rem);
-    overflow-y: auto;
-  }
-
-  nav {
-    @include font-size(.875rem);
-
-    ul {
-      padding-left: 0;
-      list-style: none;
-
-      ul {
-        padding-left: 1rem;
-        margin-top: .25rem;
-      }
-    }
-
-    li {
-      margin-bottom: .25rem;
-    }
-
-    a {
-      color: inherit;
-
-      &:not(:hover) {
-        text-decoration: none;
-      }
-
-      code {
-        font: inherit;
-      }
-    }
-  }
-}
-
-.docs-toc-toggle {
-  display: flex;
-  align-items: center;
-
-  @include media-breakpoint-down(lg) {
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  @include media-breakpoint-down(lg) {
-    color: var(--cui-body-color);
-    border: 1px solid var(--cui-border-color);
-    @include border-radius(var(--cui-border-radius));
-
-    &:hover,
-    &:focus,
-    &:active,
-    &[aria-expanded="true"] {
-      color: var(--cui-primary);
-      background-color: var(--cui-body-bg);
-      border-color: var(--cui-primary);
-    }
-
-    &:focus,
-    &[aria-expanded="true"] {
-      box-shadow: 0 0 0 3px rgba(var(--cui-primary-rgb), .25);
-    }
-  }
-}
-
-.docs-toc-collapse {
-  @include media-breakpoint-down(lg) {
-    nav {
-      padding: 1.25rem 1.25rem 1.25rem 1rem;
-      background-color: var(--cui-tertiary-bg);
-      border: 1px solid var(--cui-border-color);
-      @include border-radius(var(--cui-border-radius));
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    display: block !important; // stylelint-disable-line declaration-no-important
-  }
-}
diff --git a/packages/docs/src/styles/_variables.scss b/packages/docs/src/styles/_variables.scss
deleted file mode 100644
index a4794811..00000000
--- a/packages/docs/src/styles/_variables.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use "sass:color";
-@use "@coreui/coreui/scss/variables" as *;
-// Local docs variables
-
-$cd-purple:       #4c0bce;
-$cd-violet:        color.scale($cd-purple, $saturation: 10%, $lightness: 25%); // stylelint-disable-line scss/at-function-named-arguments
-$cd-accent:       #ffe484;
-
-$cd-gutter-x: 3rem;
-$cd-callout-variants: info, warning, danger !default;
diff --git a/packages/docs/src/styles/bootstrap-examples.scss b/packages/docs/src/styles/bootstrap-examples.scss
deleted file mode 100644
index 0b6666ea..00000000
--- a/packages/docs/src/styles/bootstrap-examples.scss
+++ /dev/null
@@ -1,538 +0,0 @@
-@charset "UTF-8";
-/*!
- * CoreUI Bootstrap Theme v5.3.2 (https://coreui.io)
- * Copyright (c) 2025 creativeLabs Łukasz Holeczek
- * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
- */
-.theme-bootstrap,
-[data-coreui-theme=light] .theme-bootstrap {
-  --cui-blue: #0d6efd;
-  --cui-indigo: #6610f2;
-  --cui-purple: #6f42c1;
-  --cui-pink: #d63384;
-  --cui-red: #dc3545;
-  --cui-orange: #fd7e14;
-  --cui-yellow: #ffc107;
-  --cui-green: #198754;
-  --cui-teal: #20c997;
-  --cui-cyan: #0dcaf0;
-  --cui-black: #000;
-  --cui-white: #fff;
-  --cui-gray: #6c757d;
-  --cui-gray-dark: #343a40;
-  --cui-gray-100: #f8f9fa;
-  --cui-gray-200: #e9ecef;
-  --cui-gray-300: #dee2e6;
-  --cui-gray-400: #ced4da;
-  --cui-gray-500: #adb5bd;
-  --cui-gray-600: #6c757d;
-  --cui-gray-700: #495057;
-  --cui-gray-800: #343a40;
-  --cui-gray-900: #212529;
-  --cui-primary: #0d6efd;
-  --cui-secondary: #6c757d;
-  --cui-success: #198754;
-  --cui-info: #0dcaf0;
-  --cui-warning: #ffc107;
-  --cui-danger: #dc3545;
-  --cui-light: #f8f9fa;
-  --cui-dark: #212529;
-  --cui-primary-rgb: 13, 110, 253;
-  --cui-secondary-rgb: 108, 117, 125;
-  --cui-success-rgb: 25, 135, 84;
-  --cui-info-rgb: 13, 202, 240;
-  --cui-warning-rgb: 255, 193, 7;
-  --cui-danger-rgb: 220, 53, 69;
-  --cui-light-rgb: 248, 249, 250;
-  --cui-dark-rgb: 33, 37, 41;
-  --cui-primary-text-emphasis: #052c65;
-  --cui-secondary-text-emphasis: #2b2f32;
-  --cui-success-text-emphasis: #0a3622;
-  --cui-info-text-emphasis: #055160;
-  --cui-warning-text-emphasis: #664d03;
-  --cui-danger-text-emphasis: #58151c;
-  --cui-light-text-emphasis: #495057;
-  --cui-dark-text-emphasis: #495057;
-  --cui-primary-bg-subtle: #cfe2ff;
-  --cui-secondary-bg-subtle: #e2e3e5;
-  --cui-success-bg-subtle: #d1e7dd;
-  --cui-info-bg-subtle: #cff4fc;
-  --cui-warning-bg-subtle: #fff3cd;
-  --cui-danger-bg-subtle: #f8d7da;
-  --cui-light-bg-subtle: #fcfcfd;
-  --cui-dark-bg-subtle: #ced4da;
-  --cui-primary-border-subtle: #9ec5fe;
-  --cui-secondary-border-subtle: #c4c8cb;
-  --cui-success-border-subtle: #a3cfbb;
-  --cui-info-border-subtle: #9eeaf9;
-  --cui-warning-border-subtle: #ffe69c;
-  --cui-danger-border-subtle: #f1aeb5;
-  --cui-light-border-subtle: #e9ecef;
-  --cui-dark-border-subtle: #adb5bd;
-  --cui-white-rgb: 255, 255, 255;
-  --cui-black-rgb: 0, 0, 0;
-  --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --cui-body-font-family: var(--cui-font-sans-serif);
-  --cui-body-font-size: 1rem;
-  --cui-body-font-weight: 400;
-  --cui-body-line-height: 1.5;
-  --cui-body-color: #212529;
-  --cui-body-color-rgb: 33, 37, 41;
-  --cui-body-bg: #fff;
-  --cui-body-bg-rgb: 255, 255, 255;
-  --cui-emphasis-color: #000;
-  --cui-emphasis-color-rgb: 0, 0, 0;
-  --cui-secondary-color: rgba(33, 37, 41, 0.75);
-  --cui-secondary-color-rgb: 33, 37, 41;
-  --cui-secondary-bg: #e9ecef;
-  --cui-secondary-bg-rgb: 233, 236, 239;
-  --cui-tertiary-color: rgba(37, 42.92, 54.02, 0.38);
-  --cui-tertiary-color-rgb: 37, 42.92, 54.02;
-  --cui-tertiary-bg: rgba(33, 37, 41, 0.75);
-  --cui-tertiary-bg-rgb: 33, 37, 41;
-  --cui-body-color: #212529;
-  --cui-body-color-rgb: 33, 37, 41;
-  --cui-body-bg: #fff;
-  --cui-body-bg-rgb: 255, 255, 255;
-  --cui-emphasis-color: #000;
-  --cui-emphasis-color-rgb: 0, 0, 0;
-  --cui-secondary-color: rgba(33, 37, 41, 0.75);
-  --cui-secondary-color-rgb: 33, 37, 41;
-  --cui-secondary-bg: #e9ecef;
-  --cui-secondary-bg-rgb: 233, 236, 239;
-  --cui-tertiary-color: rgba(33, 37, 41, 0.5);
-  --cui-tertiary-color-rgb: 33, 37, 41;
-  --cui-tertiary-bg: #f8f9fa;
-  --cui-tertiary-bg-rgb: 248, 249, 250;
-  --cui-heading-color: inherit;
-  --cui-link-color: #0d6efd;
-  --cui-link-color-rgb: 13, 110, 253;
-  --cui-link-decoration: underline;
-  --cui-link-hover-color: #0a58ca;
-  --cui-link-hover-color-rgb: 10, 88, 202;
-  --cui-code-color: #d63384;
-  --cui-highlight-color: #212529;
-  --cui-highlight-bg: #fff3cd;
-  --cui-border-width: 1px;
-  --cui-border-style: solid;
-  --cui-border-color: #dee2e6;
-  --cui-border-color-translucent: rgba(0, 0, 0, 0.175);
-  --cui-border-radius: 0.375rem;
-  --cui-border-radius-sm: 0.25rem;
-  --cui-border-radius-lg: 0.5rem;
-  --cui-border-radius-xl: 1rem;
-  --cui-border-radius-xxl: 2rem;
-  --cui-border-radius-2xl: var(--cui-border-radius-xxl);
-  --cui-border-radius-pill: 50rem;
-  --cui-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  --cui-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-  --cui-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
-  --cui-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  --cui-focus-ring-width: 0.25rem;
-  --cui-focus-ring-opacity: 0.25;
-  --cui-focus-ring-color: rgba(13, 110, 253, 0.25);
-  --cui-form-valid-color: #198754;
-  --cui-form-valid-border-color: #198754;
-  --cui-form-invalid-color: #dc3545;
-  --cui-form-invalid-border-color: #dc3545;
-  --cui-btn-close-filter: ;
-  --cui-carousel-indicator-active-bg: #fff;
-  --cui-carousel-caption-color: #fff;
-  --cui-carousel-control-icon-filter: ;
-}
-
-[data-coreui-theme=dark] .theme-bootstrap {
-  color-scheme: dark;
-  --cui-body-color: #dee2e6;
-  --cui-body-color-rgb: 222, 226, 230;
-  --cui-body-bg: #212529;
-  --cui-body-bg-rgb: 33, 37, 41;
-  --cui-emphasis-color: #fff;
-  --cui-emphasis-color-rgb: 255, 255, 255;
-  --cui-secondary-color: rgba(222, 226, 230, 0.75);
-  --cui-secondary-color-rgb: 222, 226, 230;
-  --cui-secondary-bg: #343a40;
-  --cui-secondary-bg-rgb: 52, 58, 64;
-  --cui-tertiary-color: rgba(222, 226, 230, 0.5);
-  --cui-tertiary-color-rgb: 222, 226, 230;
-  --cui-tertiary-bg: rgb(42.5, 47.5, 52.5);
-  --cui-tertiary-bg-rgb: 42.5, 47.5, 52.5;
-  --cui-high-emphasis: rgba(255, 255, 255, 0.87);
-  --cui-medium-emphasis: rgba(255, 255, 255, 0.6);
-  --cui-disabled: rgba(255, 255, 255, 0.38);
-  --cui-primary-text-emphasis: rgb(109.8, 168, 253.8);
-  --cui-secondary-text-emphasis: rgb(166.8, 172.2, 177);
-  --cui-success-text-emphasis: rgb(117, 183, 152.4);
-  --cui-info-text-emphasis: rgb(109.8, 223.2, 246);
-  --cui-warning-text-emphasis: rgb(255, 217.8, 106.2);
-  --cui-danger-text-emphasis: rgb(234, 133.8, 143.4);
-  --cui-light-text-emphasis: #f8f9fa;
-  --cui-dark-text-emphasis: #dee2e6;
-  --cui-primary-bg-subtle: rgb(2.6, 22, 50.6);
-  --cui-secondary-bg-subtle: rgb(21.6, 23.4, 25);
-  --cui-success-bg-subtle: rgb(5, 27, 16.8);
-  --cui-info-bg-subtle: rgb(2.6, 40.4, 48);
-  --cui-warning-bg-subtle: rgb(51, 38.6, 1.4);
-  --cui-danger-bg-subtle: rgb(44, 10.6, 13.8);
-  --cui-light-bg-subtle: #343a40;
-  --cui-dark-bg-subtle: #1a1d20;
-  --cui-primary-border-subtle: rgb(7.8, 66, 151.8);
-  --cui-secondary-border-subtle: rgb(64.8, 70.2, 75);
-  --cui-success-border-subtle: rgb(15, 81, 50.4);
-  --cui-info-border-subtle: rgb(7.8, 121.2, 144);
-  --cui-warning-border-subtle: rgb(153, 115.8, 4.2);
-  --cui-danger-border-subtle: rgb(132, 31.8, 41.4);
-  --cui-light-border-subtle: #495057;
-  --cui-dark-border-subtle: #343a40;
-  --cui-heading-color: inherit;
-  --cui-link-color: rgb(25, 112.3, 241);
-  --cui-link-hover-color: rgb(71, 140.84, 243.8);
-  --cui-link-color-rgb: 25, 112.3, 241;
-  --cui-link-hover-color-rgb: 71, 140.84, 243.8;
-  --cui-code-color: rgb(230.4, 132.6, 181.2);
-  --cui-highlight-color: #dee2e6;
-  --cui-highlight-bg: rgb(102, 77.2, 2.8);
-  --cui-border-color: #343a40;
-  --cui-border-color-translucent: rgba(255, 255, 255, 0.1);
-  --cui-form-valid-color: rgb(117, 183, 152.4);
-  --cui-form-valid-border-color: rgb(117, 183, 152.4);
-  --cui-form-invalid-color: rgb(234, 133.8, 143.4);
-  --cui-form-invalid-border-color: rgb(234, 133.8, 143.4);
-  --cui-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
-  --cui-carousel-indicator-active-bg: #000;
-  --cui-carousel-caption-color: #000;
-  --cui-carousel-control-icon-filter: invert(1) grayscale(100);
-}
-
-.theme-bootstrap {
-  .accordion {
-    --cui-accordion-color: var(--cui-body-color);
-    --cui-accordion-bg: var(--cui-body-bg);
-    --cui-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
-    --cui-accordion-border-color: var(--cui-border-color);
-    --cui-accordion-border-width: var(--cui-border-width);
-    --cui-accordion-border-radius: var(--cui-border-radius);
-    --cui-accordion-inner-border-radius: calc(var(--cui-border-radius) - (var(--cui-border-width)));
-    --cui-accordion-btn-padding-x: 1.25rem;
-    --cui-accordion-btn-padding-y: 1rem;
-    --cui-accordion-btn-color: var(--cui-body-color);
-    --cui-accordion-btn-bg: var(--cui-accordion-bg);
-    --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
-    --cui-accordion-btn-icon-width: 1.25rem;
-    --cui-accordion-btn-icon-transform: rotate(-180deg);
-    --cui-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-    --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
-    --cui-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-    --cui-accordion-body-padding-x: 1.25rem;
-    --cui-accordion-body-padding-y: 1rem;
-    --cui-accordion-active-color: var(--cui-primary-text-emphasis);
-    --cui-accordion-active-bg: var(--cui-primary-bg-subtle);
-  }
-
-  .btn-primary {
-    --cui-btn-color: #fff;
-    --cui-btn-bg: #0d6efd;
-    --cui-btn-border-color: #0d6efd;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #0b5ed7;
-    --cui-btn-hover-border-color: #0a58ca;
-    --cui-btn-focus-shadow-rgb: 49, 132, 253;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #0a58ca;
-    --cui-btn-active-border-color: #0a53be;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #fff;
-    --cui-btn-disabled-bg: #0d6efd;
-    --cui-btn-disabled-border-color: #0d6efd;
-  }
-  
-  .btn-secondary {
-    --cui-btn-color: #fff;
-    --cui-btn-bg: #6c757d;
-    --cui-btn-border-color: #6c757d;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #5c636a;
-    --cui-btn-hover-border-color: #565e64;
-    --cui-btn-focus-shadow-rgb: 130, 138, 145;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #565e64;
-    --cui-btn-active-border-color: #51585e;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #fff;
-    --cui-btn-disabled-bg: #6c757d;
-    --cui-btn-disabled-border-color: #6c757d;
-  }
-  
-  .btn-success {
-    --cui-btn-color: #fff;
-    --cui-btn-bg: #198754;
-    --cui-btn-border-color: #198754;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #157347;
-    --cui-btn-hover-border-color: #146c43;
-    --cui-btn-focus-shadow-rgb: 60, 153, 110;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #146c43;
-    --cui-btn-active-border-color: #13653f;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #fff;
-    --cui-btn-disabled-bg: #198754;
-    --cui-btn-disabled-border-color: #198754;
-  }
-  
-  .btn-info {
-    --cui-btn-color: #000;
-    --cui-btn-bg: #0dcaf0;
-    --cui-btn-border-color: #0dcaf0;
-    --cui-btn-hover-color: #000;
-    --cui-btn-hover-bg: #31d2f2;
-    --cui-btn-hover-border-color: #25cff2;
-    --cui-btn-focus-shadow-rgb: 11, 172, 204;
-    --cui-btn-active-color: #000;
-    --cui-btn-active-bg: #3dd5f3;
-    --cui-btn-active-border-color: #25cff2;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #000;
-    --cui-btn-disabled-bg: #0dcaf0;
-    --cui-btn-disabled-border-color: #0dcaf0;
-  }
-  
-  .btn-warning {
-    --cui-btn-color: #000;
-    --cui-btn-bg: #ffc107;
-    --cui-btn-border-color: #ffc107;
-    --cui-btn-hover-color: #000;
-    --cui-btn-hover-bg: #ffca2c;
-    --cui-btn-hover-border-color: #ffc720;
-    --cui-btn-focus-shadow-rgb: 217, 164, 6;
-    --cui-btn-active-color: #000;
-    --cui-btn-active-bg: #ffcd39;
-    --cui-btn-active-border-color: #ffc720;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #000;
-    --cui-btn-disabled-bg: #ffc107;
-    --cui-btn-disabled-border-color: #ffc107;
-  }
-  
-  .btn-danger {
-    --cui-btn-color: #fff;
-    --cui-btn-bg: #dc3545;
-    --cui-btn-border-color: #dc3545;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #bb2d3b;
-    --cui-btn-hover-border-color: #b02a37;
-    --cui-btn-focus-shadow-rgb: 225, 83, 97;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #b02a37;
-    --cui-btn-active-border-color: #a52834;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #fff;
-    --cui-btn-disabled-bg: #dc3545;
-    --cui-btn-disabled-border-color: #dc3545;
-  }
-  
-  .btn-light {
-    --cui-btn-color: #000;
-    --cui-btn-bg: #f8f9fa;
-    --cui-btn-border-color: #f8f9fa;
-    --cui-btn-hover-color: #000;
-    --cui-btn-hover-bg: #d3d4d5;
-    --cui-btn-hover-border-color: #c6c7c8;
-    --cui-btn-focus-shadow-rgb: 211, 212, 213;
-    --cui-btn-active-color: #000;
-    --cui-btn-active-bg: #c6c7c8;
-    --cui-btn-active-border-color: #babbbc;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #000;
-    --cui-btn-disabled-bg: #f8f9fa;
-    --cui-btn-disabled-border-color: #f8f9fa;
-  }
-  
-  .btn-dark {
-    --cui-btn-color: #fff;
-    --cui-btn-bg: #212529;
-    --cui-btn-border-color: #212529;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #424649;
-    --cui-btn-hover-border-color: #373b3e;
-    --cui-btn-focus-shadow-rgb: 66, 70, 73;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #4d5154;
-    --cui-btn-active-border-color: #373b3e;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #fff;
-    --cui-btn-disabled-bg: #212529;
-    --cui-btn-disabled-border-color: #212529;
-  }
-  
-  .btn-outline-primary {
-    --cui-btn-color: #0d6efd;
-    --cui-btn-border-color: #0d6efd;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #0d6efd;
-    --cui-btn-hover-border-color: #0d6efd;
-    --cui-btn-focus-shadow-rgb: 13, 110, 253;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #0d6efd;
-    --cui-btn-active-border-color: #0d6efd;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #0d6efd;
-    --cui-btn-disabled-bg: transparent;
-    --cui-btn-disabled-border-color: #0d6efd;
-    --cui-gradient: none;
-  }
-  
-  .btn-outline-secondary {
-    --cui-btn-color: #6c757d;
-    --cui-btn-border-color: #6c757d;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #6c757d;
-    --cui-btn-hover-border-color: #6c757d;
-    --cui-btn-focus-shadow-rgb: 108, 117, 125;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #6c757d;
-    --cui-btn-active-border-color: #6c757d;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #6c757d;
-    --cui-btn-disabled-bg: transparent;
-    --cui-btn-disabled-border-color: #6c757d;
-    --cui-gradient: none;
-  }
-  
-  .btn-outline-success {
-    --cui-btn-color: #198754;
-    --cui-btn-border-color: #198754;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #198754;
-    --cui-btn-hover-border-color: #198754;
-    --cui-btn-focus-shadow-rgb: 25, 135, 84;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #198754;
-    --cui-btn-active-border-color: #198754;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #198754;
-    --cui-btn-disabled-bg: transparent;
-    --cui-btn-disabled-border-color: #198754;
-    --cui-gradient: none;
-  }
-  
-  .btn-outline-info {
-    --cui-btn-color: #0dcaf0;
-    --cui-btn-border-color: #0dcaf0;
-    --cui-btn-hover-color: #000;
-    --cui-btn-hover-bg: #0dcaf0;
-    --cui-btn-hover-border-color: #0dcaf0;
-    --cui-btn-focus-shadow-rgb: 13, 202, 240;
-    --cui-btn-active-color: #000;
-    --cui-btn-active-bg: #0dcaf0;
-    --cui-btn-active-border-color: #0dcaf0;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #0dcaf0;
-    --cui-btn-disabled-bg: transparent;
-    --cui-btn-disabled-border-color: #0dcaf0;
-    --cui-gradient: none;
-  }
-  
-  .btn-outline-warning {
-    --cui-btn-color: #ffc107;
-    --cui-btn-border-color: #ffc107;
-    --cui-btn-hover-color: #000;
-    --cui-btn-hover-bg: #ffc107;
-    --cui-btn-hover-border-color: #ffc107;
-    --cui-btn-focus-shadow-rgb: 255, 193, 7;
-    --cui-btn-active-color: #000;
-    --cui-btn-active-bg: #ffc107;
-    --cui-btn-active-border-color: #ffc107;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #ffc107;
-    --cui-btn-disabled-bg: transparent;
-    --cui-btn-disabled-border-color: #ffc107;
-    --cui-gradient: none;
-  }
-  
-  .btn-outline-danger {
-    --cui-btn-color: #dc3545;
-    --cui-btn-border-color: #dc3545;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #dc3545;
-    --cui-btn-hover-border-color: #dc3545;
-    --cui-btn-focus-shadow-rgb: 220, 53, 69;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #dc3545;
-    --cui-btn-active-border-color: #dc3545;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #dc3545;
-    --cui-btn-disabled-bg: transparent;
-    --cui-btn-disabled-border-color: #dc3545;
-    --cui-gradient: none;
-  }
-  
-  .btn-outline-light {
-    --cui-btn-color: #f8f9fa;
-    --cui-btn-border-color: #f8f9fa;
-    --cui-btn-hover-color: #000;
-    --cui-btn-hover-bg: #f8f9fa;
-    --cui-btn-hover-border-color: #f8f9fa;
-    --cui-btn-focus-shadow-rgb: 248, 249, 250;
-    --cui-btn-active-color: #000;
-    --cui-btn-active-bg: #f8f9fa;
-    --cui-btn-active-border-color: #f8f9fa;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #f8f9fa;
-    --cui-btn-disabled-bg: transparent;
-    --cui-btn-disabled-border-color: #f8f9fa;
-    --cui-gradient: none;
-  }
-  
-  .btn-outline-dark {
-    --cui-btn-color: #212529;
-    --cui-btn-border-color: #212529;
-    --cui-btn-hover-color: #fff;
-    --cui-btn-hover-bg: #212529;
-    --cui-btn-hover-border-color: #212529;
-    --cui-btn-focus-shadow-rgb: 33, 37, 41;
-    --cui-btn-active-color: #fff;
-    --cui-btn-active-bg: #212529;
-    --cui-btn-active-border-color: #212529;
-    --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --cui-btn-disabled-color: #212529;
-    --cui-btn-disabled-bg: transparent;
-    --cui-btn-disabled-border-color: #212529;
-    --cui-gradient: none;
-  }
-  
-  .btn-link {
-    --cui-btn-font-weight: 400;
-    --cui-btn-color: var(--cui-link-color);
-    --cui-btn-bg: transparent;
-    --cui-btn-border-color: transparent;
-    --cui-btn-hover-color: var(--cui-link-hover-color);
-    --cui-btn-hover-border-color: transparent;
-    --cui-btn-active-color: var(--cui-link-hover-color);
-    --cui-btn-active-border-color: transparent;
-    --cui-btn-disabled-color: #6c757d;
-    --cui-btn-disabled-border-color: transparent;
-    --cui-btn-box-shadow: 0 0 0 #000;
-    --cui-btn-focus-shadow-rgb: 49, 132, 253;
-    text-decoration: underline;
-  }
-
-  .form-control::-webkit-file-upload-button {
-    color: var(--cui-body-color);
-    background-color: var(--cui-tertiary-bg);
-    border-inline-end-width: var(--cui-border-width);
-  }
-  .form-control::file-selector-button {
-    color: var(--cui-body-color);
-    background-color: var(--cui-tertiary-bg);
-    border-inline-end-width: var(--cui-border-width);
-  }
-  .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
-    background-color: var(--cui-secondary-bg);
-  }
-  .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--cui-secondary-bg);
-  }
-}
\ No newline at end of file
diff --git a/packages/docs/src/styles/search.scss b/packages/docs/src/styles/search.scss
deleted file mode 100644
index ae1e0b17..00000000
--- a/packages/docs/src/styles/search.scss
+++ /dev/null
@@ -1,165 +0,0 @@
-/*!
- * CoreUI Docs (https://coreui.io/bootstrap/docs/)
- * Copyright 2025 creativeLabs Łukasz Holeczek
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
- * For details, see https://creativecommons.org/licenses/by/3.0/.
- */
-
-@use "@coreui/coreui/scss/mixins/border-radius" as *;
-@use "@coreui/coreui/scss/mixins/box-shadow" as *;
-@use "@coreui/coreui/scss/mixins/breakpoints" as *;
-@use "@coreui/coreui/scss/mixins/color-mode" as *;
-@use "@coreui/coreui/scss/mixins/transition" as *;
-@use "@coreui/coreui/scss/vendor/rfs" as *;
-@use "@coreui/coreui/scss/variables" as *;
- 
-@forward "@docsearch/css/dist/style";
-
-
-// stylelint-disable selector-class-pattern
-:root {
-  --docsearch-primary-color: var(--cui-primary);
-  --docsearch-logo-color: var(--cui-primary);
-}
-
-@include color-mode(dark, true) {
-  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
-  // in html[data-theme="dark"] selector
-  // and are slightly modified for formatting purpose
-  --docsearch-text-color: #f5f6f7;
-  --docsearch-container-background: rgba(9, 10, 17, .8);
-  --docsearch-modal-background: #15172a;
-  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --docsearch-searchbox-background: #090a11;
-  --docsearch-searchbox-focus-background: #000;
-  --docsearch-hit-color: #bec3c9;
-  --docsearch-hit-shadow: none;
-  --docsearch-hit-background: #090a11;
-  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
-  --docsearch-footer-background: #1e2136;
-  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
-  --docsearch-muted-color: #7f8497;
-}
-
-.DocSearch-Container {
-  --docsearch-muted-color: var(--cui-secondary-color);
-  --docsearch-hit-shadow: none;
-
-  position: fixed;
-  z-index: 2000; // Make sure to be over all components showcased in the documentation
-  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
-
-  @include media-breakpoint-up(lg) {
-    padding-top: 4rem;
-  }
-}
-
-.DocSearch-Button {
-  --docsearch-searchbox-background: #{rgba($black, .1)};
-  --docsearch-searchbox-focus-background: #{rgba($black, .25)};
-
-  min-width: 200px;
-  min-height: 38px;
-  font-family: $input-font-family;
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  @include font-size($input-font-size);
-  color: $input-color;
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
-
-  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($btn-border-radius);
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
-
-  &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-focus-box-shadow;
-    }
-  }
-
-  &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $form-file-button-hover-bg;
-  }
-
-  .DocSearch-Search-Icon {
-    opacity: .65;
-  }
-}
-
-
-.DocSearch-Button-Keys {
-  min-width: 0;
-  padding: 0 .25rem;
-  background: rgba($black, .125);
-  @include border-radius(.25rem);
-}
-
-.DocSearch-Button-Key {
-  top: 0;
-  width: auto;
-  height: 1.5rem;
-  padding: 0 .125rem;
-  margin-right: 0;
-  font-size: .875rem;
-  background: none;
-  box-shadow: none;
-}
-
-.DocSearch-Commands-Key {
-  padding-left: 1px;
-  font-size: .875rem;
-  background-color: rgba($black, .1);
-  background-image: none;
-  box-shadow: none;
-}
-
-.DocSearch-Form {
-  @include border-radius(var(--cui-border-radius));
-}
-
-.DocSearch-Hits {
-  mark {
-    padding: 0;
-  }
-}
-
-.DocSearch-Hit {
-  padding-bottom: 0;
-  @include border-radius(0);
-
-  a {
-    @include border-radius(0);
-    border: solid var(--cui-border-color);
-    border-width: 0 1px 1px;
-  }
-
-  &:first-child a {
-    @include border-top-radius(var(--cui-border-radius));
-    border-top-width: 1px;
-  }
-  &:last-child a {
-    @include border-bottom-radius(var(--cui-border-radius));
-  }
-}
-
-.DocSearch-Hit-icon {
-  display: flex;
-  align-items: center;
-}
-
-// Fix --docsearch-logo-color that doesn't do anything
-.DocSearch-Logo svg .cls-1,
-.DocSearch-Logo svg .cls-2 {
-  fill: var(--docsearch-logo-color);
-}
diff --git a/packages/docs/src/styles/styles.scss b/packages/docs/src/styles/styles.scss
deleted file mode 100644
index 40a7a1dd..00000000
--- a/packages/docs/src/styles/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "@coreui/coreui/scss/coreui" with (
-  $enable-deprecation-messages: false
-);
-
-// Import Chart.js custom tooltips styles
-@use "@coreui/chartjs/scss/coreui-chartjs";
-
-// Load docs components
-@forward "root";
-@forward "ads";
-@forward "anchor";
-@forward "callouts";
-@forward "component-examples";
-@forward "component-sub-nav";
-@forward "footer";
-@forward "layout";
-@forward "prism";
-@forward "scrolling";
-@forward "sidebar";
-@forward "table-api";
-@forward "toc";
diff --git a/packages/docs/src/templates/DefaultLayout.tsx b/packages/docs/src/templates/DefaultLayout.tsx
deleted file mode 100644
index f4c6ceb2..00000000
--- a/packages/docs/src/templates/DefaultLayout.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { FC, ReactNode, useState } from 'react'
-import { AppContext } from '../AppContext'
-
-interface DefaultLayoutProps {
-  children: ReactNode
-}
-
-const DefaultLayout: FC<DefaultLayoutProps> = ({ children }) => {
-  const [sidebarVisible, setSidebarVisible] = useState()
-  return (
-    <AppContext.Provider
-      value={{
-        sidebarVisible,
-        setSidebarVisible,
-      }}
-    >
-      {children}
-    </AppContext.Provider>
-  )
-}
-
-DefaultLayout.displayName = 'DefaultLayout'
-
-export default DefaultLayout
diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx
deleted file mode 100644
index c16b7241..00000000
--- a/packages/docs/src/templates/DocsLayout.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { FC, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
-import { Link } from 'gatsby'
-import { CContainer } from '@coreui/react'
-import { Ads, Banner, ComponentSubNav, Footer, Header, Sidebar, Toc } from '../components'
-// @ts-expect-error json file
-import jsonData from './../data/other_frameworks.json'
-
-import { Item } from '../components/ComponentSubNav'
-import type { TocItem } from '../components/Toc'
-
-interface DocsLayoutProps {
-  children: ReactNode
-  data: DocsData
-  location: Location
-  pageContext: PageContext
-  path: string
-}
-
-interface DocsData {
-  allMdx: {
-    edges: Array<{
-      node: {
-        fields: {
-          slug: string
-        }
-      }
-    }>
-  }
-  mdx?: {
-    tableOfContents: {
-      items: TocItem[]
-    }
-  }
-}
-
-interface PageContext {
-  frontmatter?: Frontmatter
-}
-
-interface Frontmatter {
-  title?: string
-  description?: string
-  name?: string
-  other_frameworks?: string
-  pro_component?: boolean
-  route?: string
-}
-
-interface OtherFrameworks {
-  [key: string]: {
-    [key: string]: string
-  }
-}
-
-const humanize = (text: string): string => {
-  return text
-    .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-}
-
-const getDescription = (location: Location, description: string) => {
-  if (location.pathname.includes('api') || location.pathname.includes('styling')) {
-    const regex = /React\s+(.*?)\s+component/
-    const parts = description.split(regex)
-    const matches = description.match(regex)
-
-    if (matches && parts.length > 1) {
-      return (
-        <>
-          {parts[0]}
-          <Link to="../">React {parts[1]}</Link> component
-          {parts[2]}
-        </>
-      )
-    }
-
-    return description
-  }
-
-  return description
-}
-
-const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext, path }) => {
-  const docsNavRef = useRef<HTMLDivElement>(null)
-  const headerRef = useRef<HTMLDivElement>(null)
-  const [docsNavHeight, setDocsNavHeigh] = useState<number>(0)
-  const [headerHeight, setHeaderHeight] = useState<number>(0)
-  const frontmatter = pageContext.frontmatter || {}
-
-  const {
-    title = '',
-    description = '',
-    name = '',
-    other_frameworks: otherFrameworksStr = '',
-    pro_component: proComponent = false,
-    bootstrap_component: bootstrapComponent = false,
-  } = frontmatter
-  const frameworks = useMemo(
-    () => otherFrameworksStr.split(', ').filter(Boolean),
-    [otherFrameworksStr]
-  )
-  const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), [])
-  const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data])
-
-  const handleScroll = () => {
-    if (docsNavRef.current) {
-      setDocsNavHeigh(docsNavRef.current.offsetHeight)
-    }
-    if (headerRef.current) {
-      setHeaderHeight(headerRef.current.offsetHeight)
-    }
-  }
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll)
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
-
-  return (
-    <>
-      <Sidebar />
-      <div className="wrapper flex-grow-1">
-        <Header ref={headerRef} />
-        {hasNav && (
-          <ComponentSubNav
-            nodes={data?.allMdx?.edges as Item[]}
-            style={{ top: `${headerHeight}px` } as React.CSSProperties}
-            ref={docsNavRef}
-          />
-        )}
-        {path === '/404/' ? (
-          <CContainer lg className="px-4">
-            {children}
-          </CContainer>
-        ) : (
-          <CContainer lg className="my-md-4 flex-grow-1 px-4">
-            <main className="docs-main order-1">
-              <div className="docs-intro">
-                {name && name !== title ? (
-                  <div className="d-flex flex-column">
-                    <h1 className="order-2 h5 mb-4 text-body-secondary" id="content">
-                      {title}
-                    </h1>
-                    <h2 className="docs-title order-1 h1">{name}</h2>
-                  </div>
-                ) : (
-                  <h1 className="docs-title" id="content">
-                    {title}
-                  </h1>
-                )}
-                <Banner bootstrap={bootstrapComponent} />
-                <Banner pro={proComponent} />
-                <p className="docs-lead">{getDescription(location, description)}</p>
-                <Ads code="CEAICKJY" location={location.pathname} placement="coreuiio" />
-                {frameworks.length > 0 && (
-                  <>
-                    <h2>Other Frameworks</h2>
-                    <p>
-                      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and
-                      Vue components. To learn more please visit the following pages.
-                    </p>
-                    <ul>
-                      {frameworks.map((item) => (
-                        <React.Fragment key={item}>
-                          {Object.entries(otherFrameworks[item] || {})
-                            .filter(([key]) => key !== 'react')
-                            .map(([framework, url]) => (
-                              <li key={framework}>
-                                <a href={url}>
-                                  {framework.charAt(0).toUpperCase() + framework.slice(1)}{' '}
-                                  {humanize(item)}
-                                </a>
-                              </li>
-                            ))}
-                        </React.Fragment>
-                      ))}
-                    </ul>
-                  </>
-                )}
-              </div>
-              {data?.mdx && (
-                <Toc
-                  items={data.mdx.tableOfContents.items}
-                  style={{ top: `${docsNavHeight + headerHeight + 16}px` }}
-                />
-              )}
-              <div className="docs-content">{children}</div>
-            </main>
-          </CContainer>
-        )}
-        <Footer />
-      </div>
-    </>
-  )
-}
-
-DocsLayout.displayName = 'DocsLayout'
-
-export default DocsLayout
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
deleted file mode 100644
index 00aa6f11..00000000
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { FC, useMemo } from 'react'
-import { graphql, PageProps } from 'gatsby'
-import { MDXProvider } from '@mdx-js/react'
-import {
-  Callout,
-  CodeBlock,
-  ClassNamesDocs,
-  Example,
-  ExampleSnippet,
-  JSXDocs,
-  ScssDocs,
-  Seo,
-} from '../components'
-
-import { CalloutProps } from '../components/Callout'
-import { CodeBlockProps } from '../components/CodeBlock'
-import { ExampleProps } from '../components/Example'
-import { ExampleSnippetProps } from '../components/ExampleSnippet'
-import { ScssDocsProps } from '../components/ScssDocs'
-import type { TocItem } from '../components/Toc'
-
-interface DataProps {
-  mdx: {
-    tableOfContents: Toc
-  }
-  allMdx: {
-    edges: Array<{
-      node: {
-        id: string
-        fields: {
-          slug: string
-        }
-      }
-    }>
-  }
-}
-
-interface PageContextType {
-  frontmatter: {
-    title: string
-    description: string
-    name: string
-  }
-}
-
-interface Toc {
-  items: TocItem[]
-}
-
-const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
-  const components = useMemo(
-    () => ({
-      Callout: (props: CalloutProps) => {
-        const { children, title, ...rest } = props
-        return (
-          <Callout {...rest}>
-            {title && <h5>{title}</h5>}
-            {children}
-          </Callout>
-        )
-      },
-      ClassNamesDocs: (props: { files: string | string[] }) => <ClassNamesDocs {...props} />,
-      Example: (props: ExampleProps) => {
-        const { children, ...rest } = props
-        return (
-          <Example {...rest}>
-            {React.Children.map(children, (child) => {
-              if (React.isValidElement(child)) {
-                return React.cloneElement(child)
-              }
-              return
-            })}
-          </Example>
-        )
-      },
-      ExampleSnippet: (props: ExampleSnippetProps) => <ExampleSnippet {...props} />,
-      JSXDocs: (props: { code: string }) => <JSXDocs {...props} />,
-      ScssDocs: (props: ScssDocsProps) => <ScssDocs {...props} />,
-      pre: (props: CodeBlockProps) => <CodeBlock {...props} />,
-      table: (props) => (
-        <div className="table-responsive table-docs border rounded mb-3">
-          <table className="table table-docs" {...props} />
-        </div>
-      ),
-    }),
-    [],
-  )
-  return <MDXProvider components={components}>{children}</MDXProvider>
-}
-
-MdxLayout.displayName = 'MdxLayout'
-
-export default MdxLayout
-
-export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
-  const { frontmatter } = pageContext
-
-  const title = frontmatter?.title || ''
-  const description = frontmatter?.description || ''
-  const name = frontmatter?.name || ''
-
-  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 }) {
-      tableOfContents(maxDepth: 3)
-    }
-    allMdx(filter: { fields: { slug: { regex: $regex } } }) {
-      edges {
-        node {
-          id
-          fields {
-            slug
-          }
-        }
-      }
-    }
-  }
-`
diff --git a/packages/docs/src/utils/codesandbox.ts b/packages/docs/src/utils/codesandbox.ts
deleted file mode 100644
index e2964eb9..00000000
--- a/packages/docs/src/utils/codesandbox.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
-  ProjectOptions,
-  generateTitle,
-  generateDescription,
-  generateIndexHTML,
-  generateIndexJS,
-  generatePackageJSON,
-} from './projectUtils'
-
-// Define the options interface specific to CodeSandbox
-interface CodeSandboxOptions extends ProjectOptions {
-  language: 'js' | 'ts'
-}
-
-// Function to open a CodeSandbox project
-export const openCodeSandboxProject = async (options: CodeSandboxOptions) => {
-  const { code, componentName, language, name, pro = false } = options
-
-  const title = generateTitle(componentName)
-  const description = generateDescription(componentName)
-  const template = 'create-react-app'
-
-  const indexHTML = generateIndexHTML(title)
-  const indexExtension = language === 'ts' ? 'tsx' : 'js'
-  const indexJS = generateIndexJS(name, language, pro)
-  const packageJSON = generatePackageJSON(title, description, language, pro, code, 'codesandbox')
-
-  // Define the files structure
-  const files: Record<string, { content: string }> = {
-    'public/index.html': {
-      content: indexHTML,
-    },
-    [`src/${name}.${language}x`]: {
-      content: code.replaceAll('../../images/', 'https://assets.coreui.io/images/'),
-    },
-    [`src/index.${indexExtension}`]: {
-      content: indexJS,
-    },
-    'package.json': {
-      content: packageJSON,
-    },
-  }
-
-  // Define the payload for CodeSandbox API
-  const payload = {
-    files,
-    template,
-    title,
-    description,
-  }
-
-  try {
-    // Make a POST request to CodeSandbox API
-    const response = await fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json',
-      },
-      body: JSON.stringify(payload),
-    })
-
-    if (!response.ok) {
-      throw new Error(`Error creating sandbox: ${response.statusText}`)
-    }
-
-    const result = await response.json()
-
-    // Open the sandbox in a new tab
-    const sandboxURL = `https://codesandbox.io/s/${result.sandbox_id}`
-    window.open(sandboxURL, '_blank')
-  } catch (error) {
-    console.error('Failed to create CodeSandbox:', error)
-    alert('Failed to create CodeSandbox. Please check the console for more details.')
-  }
-}
diff --git a/packages/docs/src/utils/projectUtils.ts b/packages/docs/src/utils/projectUtils.ts
deleted file mode 100644
index 8404ecaa..00000000
--- a/packages/docs/src/utils/projectUtils.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-export interface ProjectOptions {
-  code: string
-  componentName?: string
-  language: 'js' | 'ts'
-  name: string
-  pro: boolean
-}
-
-export const extractDependencies = (code: string, exclude: string[] = []) => {
-  const importRegex = /import\s+(?:{[^}]+}|\S+)\s+from\s+["']([^"']+)["']/g
-  const dependencies = []
-
-  let match
-  while ((match = importRegex.exec(code)) !== null) {
-    const dependency = match[1]
-
-    if (!exclude.includes(dependency) && !exclude.some((prefix) => dependency.startsWith(prefix))) {
-      dependencies.push(dependency)
-    }
-  }
-
-  return dependencies
-}
-
-// Function to generate title
-export const generateTitle = (componentName?: string): string => {
-  return componentName ? `${componentName} Example` : 'Project Preview'
-}
-
-// Function to generate description
-export const generateDescription = (componentName?: string): string => {
-  const baseURL = globalThis.location.href
-  return componentName
-    ? `${componentName} example from ${baseURL}`
-    : `Official example from ${baseURL}`
-}
-
-// Function to generate dependencies
-export const getDependencies = (
-  language: 'js' | 'ts',
-  pro: boolean,
-  code: string,
-): Record<string, string> => {
-  const dependencies: Record<string, string> = {
-    ...(pro
-      ? {
-          '@coreui/coreui-pro': 'latest',
-          '@coreui/react-pro': 'latest',
-        }
-      : {
-          '@coreui/coreui': 'latest',
-          '@coreui/react': 'latest',
-        }),
-    '@popperjs/core': 'latest',
-    react: '~18.3',
-    'react-dom': '~18.3',
-    'react-scripts': 'latest',
-  }
-
-  const externalDependencies = extractDependencies(code, ['react', 'react-dom'])
-
-  for (const dependency of externalDependencies) {
-    dependencies[`${dependency}`] = 'latest'
-  }
-
-  if (language === 'ts') {
-    dependencies['typescript'] = 'latest'
-    dependencies['@types/jest'] = 'latest'
-    dependencies['@types/node'] = 'latest'
-    dependencies['@types/react'] = '~18.3'
-    dependencies['@types/react-dom'] = '~18.3'
-  }
-
-  const sortedDependencies: Record<string, string> = {}
-  const keys = Object.keys(dependencies).sort()
-  for (const key of keys) {
-    sortedDependencies[key] = dependencies[key]
-  }
-
-  return sortedDependencies
-}
-
-// Function to generate scripts
-export const getScripts = (): Record<string, string> => {
-  return {
-    start: 'react-scripts start',
-    build: 'react-scripts build',
-  }
-}
-
-// Function to generate index.html content
-export const generateIndexHTML = (title: string): string => {
-  return `<!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8">
-      <title>${title}</title>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    </head>
-    <body>
-      <div id="root"></div>
-    </body>
-  </html>`
-}
-
-// Function to generate index.js or index.tsx content
-export const generateIndexJS = (name: string, language: 'js' | 'ts', pro: boolean): string => {
-  return `import React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css';
-import { ${name} } from './${name}.${language}x';
-  
-ReactDOM.createRoot(document.querySelector("#root")).render(
-  <React.StrictMode>
-    <div className="p-3">
-      <${name} />
-    </div>
-  </React.StrictMode>
-);`
-}
-
-// Function to generate package.json content
-export const generatePackageJSON = (
-  title: string,
-  description: string,
-  language: 'js' | 'ts',
-  pro: boolean,
-  code: string,
-  templateType: 'codesandbox' | 'stackblitz',
-): string => {
-  const indexExtension = language === 'ts' ? 'tsx' : 'js'
-
-  const packageJSON = {
-    name: title.toLowerCase().replaceAll(/\s+/g, '-'),
-    version: '1.0.0',
-    description,
-    main: templateType === 'codesandbox' ? `src/index.${indexExtension}` : `index.js`,
-    scripts: getScripts(),
-    dependencies: getDependencies(language, pro, code),
-    ...(templateType === 'stackblitz' && {
-      devDependencies: language === 'ts' ? getDependencies(language, pro, code) : {},
-    }),
-  }
-
-  return JSON.stringify(packageJSON, null, 2)
-}
diff --git a/packages/docs/src/utils/stackblitz.ts b/packages/docs/src/utils/stackblitz.ts
deleted file mode 100644
index f0161e27..00000000
--- a/packages/docs/src/utils/stackblitz.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import sdk, { Project } from '@stackblitz/sdk'
-import {
-  ProjectOptions,
-  generateTitle,
-  generateDescription,
-  getDependencies,
-  generateIndexHTML,
-  generateIndexJS,
-  generatePackageJSON,
-} from './projectUtils'
-
-// Define the options interface specific to StackBlitz
-interface StackBlitzOptions extends ProjectOptions {
-  language: 'js' | 'ts'
-}
-
-// Function to open a StackBlitz project
-export const openStackBlitzProject = (options: StackBlitzOptions) => {
-  const { code, componentName, language, name, pro = false } = options
-
-  const title = generateTitle(componentName)
-  const description = generateDescription(componentName)
-  const template = 'create-react-app'
-
-  const indexHTML = generateIndexHTML(title)
-  const indexJS = generateIndexJS(name, language, pro)
-  const packageJSON = generatePackageJSON(title, description, language, pro, code, 'stackblitz')
-
-  const files = {
-    'public/index.html': indexHTML,
-    [`src/${name}.${language}x`]: code.replaceAll(
-      '../../images/',
-      'https://assets.coreui.io/images/',
-    ),
-    [`src/index.js`]: indexJS, // StackBlitz uses 'index.js' regardless of language
-    'package.json': packageJSON,
-  }
-
-  const project: Project = {
-    title,
-    description,
-    template,
-    files,
-    dependencies: getDependencies(language, pro, code),
-    tags: ['coreui', 'react'],
-  }
-
-  sdk.openProject(project, { openFile: `src/index.${language === 'ts' ? 'tsx' : 'js'}` })
-}
diff --git a/packages/docs/static/images/angular.jpg b/packages/docs/static/images/angular.jpg
deleted file mode 100755
index 50448112..00000000
Binary files a/packages/docs/static/images/angular.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/1.jpg b/packages/docs/static/images/avatars/1.jpg
deleted file mode 100644
index 8b5f8091..00000000
Binary files a/packages/docs/static/images/avatars/1.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/2.jpg b/packages/docs/static/images/avatars/2.jpg
deleted file mode 100644
index 161eeef5..00000000
Binary files a/packages/docs/static/images/avatars/2.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/3.jpg b/packages/docs/static/images/avatars/3.jpg
deleted file mode 100644
index 53ecc542..00000000
Binary files a/packages/docs/static/images/avatars/3.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/4.jpg b/packages/docs/static/images/avatars/4.jpg
deleted file mode 100644
index a6ee3c72..00000000
Binary files a/packages/docs/static/images/avatars/4.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/5.jpg b/packages/docs/static/images/avatars/5.jpg
deleted file mode 100644
index c38baeed..00000000
Binary files a/packages/docs/static/images/avatars/5.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/6.jpg b/packages/docs/static/images/avatars/6.jpg
deleted file mode 100644
index 57bbf968..00000000
Binary files a/packages/docs/static/images/avatars/6.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/7.jpg b/packages/docs/static/images/avatars/7.jpg
deleted file mode 100644
index dfc20b7a..00000000
Binary files a/packages/docs/static/images/avatars/7.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/8.jpg b/packages/docs/static/images/avatars/8.jpg
deleted file mode 100644
index 4e8b48d4..00000000
Binary files a/packages/docs/static/images/avatars/8.jpg and /dev/null differ
diff --git a/packages/docs/static/images/avatars/9.jpg b/packages/docs/static/images/avatars/9.jpg
deleted file mode 100644
index f690e78c..00000000
Binary files a/packages/docs/static/images/avatars/9.jpg and /dev/null differ
diff --git a/packages/docs/static/images/brand/coreui-signet.svg b/packages/docs/static/images/brand/coreui-signet.svg
deleted file mode 100644
index 9a4b2c5f..00000000
--- a/packages/docs/static/images/brand/coreui-signet.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="102px" height="116px" viewBox="0 0 102 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Untitled 3</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="coreui-signet" fill="#3C4B64" fill-rule="nonzero">
-            <path d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z" id="Shape"></path>
-            <path d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z" id="Path"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/docs/static/images/react.jpg b/packages/docs/static/images/react.jpg
deleted file mode 100755
index a1fe5a74..00000000
Binary files a/packages/docs/static/images/react.jpg and /dev/null differ
diff --git a/packages/docs/static/images/react400.jpg b/packages/docs/static/images/react400.jpg
deleted file mode 100644
index fdcd1039..00000000
Binary files a/packages/docs/static/images/react400.jpg and /dev/null differ
diff --git a/packages/docs/static/images/vue.jpg b/packages/docs/static/images/vue.jpg
deleted file mode 100755
index d7b39647..00000000
Binary files a/packages/docs/static/images/vue.jpg and /dev/null differ
diff --git a/packages/docs/static/index.html b/packages/docs/static/index.html
deleted file mode 100644
index b08ad38b..00000000
--- a/packages/docs/static/index.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<script>
-  window.location.replace("./getting-started/introduction/");
-</script>
\ No newline at end of file
diff --git a/packages/gatsby-remark-import-markdown/index.js b/packages/gatsby-remark-import-markdown/index.js
deleted file mode 100755
index f1e5018b..00000000
--- a/packages/gatsby-remark-import-markdown/index.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, unicorn/prefer-module */
-const fs = require('node:fs')
-const path = require('node:path')
-const normalizePath = require('normalize-path')
-const visitParents = require('unist-util-visit-parents') // Ensure you have installed this
-const unified = require('unified')
-const parse = require('remark-parse')
-const remarkGfm = require('remark-gfm')
-
-/**
- * Plugin Options Interface
- * @typedef {Object} PluginOptions
- * @property {string} directory - The directory containing markdown fragments
- */
-
-/**
- * Main plugin function
- * @param {Object} param0 - Object containing the markdown AST
- * @param {Object} [pluginOptions={}] - Plugin options
- * @param {PluginOptions} pluginOptions.directory - Required directory option
- * @returns {Object} - The transformed markdown AST
- */
-// eslint-disable-next-line unicorn/no-anonymous-default-export
-module.exports = ({ markdownAST }, pluginOptions = {}) => {
-  const { directory } = pluginOptions
-
-  validateDirectory(directory)
-
-  const normalizedDirectory = ensureTrailingSlash(normalizeDirectory(directory))
-
-  const processor = unified().use(parse).use(remarkGfm)
-
-  visitParents(markdownAST, 'inlineCode', (node, ancestors) => {
-    processInlineCodeNode(node, ancestors, normalizedDirectory, processor)
-  })
-
-  return markdownAST
-}
-
-/**
- * Validates the directory option
- * @param {string} directory - The directory to validate
- */
-function validateDirectory(directory) {
-  if (!directory) {
-    throw new Error(`Required option "directory" not specified`)
-  }
-
-  if (!fs.existsSync(directory)) {
-    throw new Error(`Invalid directory specified "${directory}"`)
-  }
-}
-
-/**
- * Normalizes the directory path
- * @param {string} directory - The directory path to normalize
- * @returns {string} - The normalized directory path
- */
-function normalizeDirectory(directory) {
-  return path.resolve(directory)
-}
-
-/**
- * Ensures the directory path ends with a trailing slash
- * @param {string} directory - The directory path
- * @returns {string} - The directory path with a trailing slash
- */
-function ensureTrailingSlash(directory) {
-  return directory.endsWith(path.sep) ? directory : `${directory}${path.sep}`
-}
-
-/**
- * Processes an inline code node that starts with 'markdown:'
- * @param {Object} node - The AST node
- * @param {Array} ancestors - Ancestor nodes
- * @param {string} directory - The base directory for markdown fragments
- * @param {Object} processor - Unified processor instance
- */
-function processInlineCodeNode(node, ancestors, directory, processor) {
-  const { value } = node
-
-  if (!value.startsWith('markdown:')) {
-    return
-  }
-
-  const fileName = value.slice('markdown:'.length).trim()
-
-  if (!fileName) {
-    throw new Error('Inline code starting with "markdown:" must specify a file name')
-  }
-
-  const filePath = normalizePath(path.join(directory, fileName))
-
-  if (!fs.existsSync(filePath)) {
-    throw new Error(`Invalid fragment specified; no such file "${filePath}"`)
-  }
-
-  const fileContent = fs.readFileSync(filePath, 'utf8')
-  const parsed = processor.parse(
-    fileContent.replaceAll('className="', 'class="').replaceAll('{`', '').replaceAll('`}', ''),
-  )
-
-  removePositionData(parsed)
-
-  replaceParentNodeWithParsedContent(ancestors, parsed.children)
-}
-
-/**
- * Removes position information from AST nodes to avoid conflicts
- * @param {Object} parsed - The parsed AST
- */
-function removePositionData(parsed) {
-  if (!parsed.children) return
-
-  parsed.children.forEach((child) => {
-    if (child.position) {
-      delete child.position
-    }
-  })
-}
-
-/**
- * Replaces the parent node with the new array of nodes from the parsed content
- * @param {Array} ancestors - Ancestor nodes
- * @param {Array} newChildren - New child nodes to insert
- */
-function replaceParentNodeWithParsedContent(ancestors, newChildren) {
-  const parent = ancestors.at(-1)
-  const grandparent = ancestors.at(-2)
-
-  if (!grandparent || !Array.isArray(grandparent.children)) {
-    throw new Error('Parent node does not have a grandparent with children')
-  }
-
-  const parentIndex = grandparent.children.indexOf(parent)
-
-  if (parentIndex === -1) {
-    throw new Error("Parent node not found in grandparent's children")
-  }
-
-  // Replace the parent node with the new nodes
-  grandparent.children.splice(parentIndex, 1, ...newChildren)
-}
diff --git a/packages/gatsby-remark-import-markdown/package.json b/packages/gatsby-remark-import-markdown/package.json
deleted file mode 100644
index 42b8f614..00000000
--- a/packages/gatsby-remark-import-markdown/package.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "gatsby-remark-import-markdown",
-  "license": "MIT",
-  "version": "1.0.0",
-  "author": "Łukasz Holeczek <https://github.com/mrholek>",
-  "repository": "",
-  "keywords": [
-    "markdown",
-    "embed",
-    "gatsby",
-    "gatsby-plugin",
-    "remark"
-  ],
-  "description": "Gatsby plugin to embed markdown fragments within markdown",
-  "dependencies": {
-    "normalize-path": "^2.1.1",
-    "unist-util-map": "^1.0.5",
-    "unist-util-visit-parents": "^3.1.1",
-    "unified": "^9.2.2",
-    "remark-gfm": "^1.0.0",
-    "remark-html": "^13.0.2",
-    "remark-parse": "^9.0.0",
-    "remark-rehype": "^8.1.0",
-    "rehype-stringify": "^8.0.0"
-  },
-  "scripts": {},
-  "peerDependencies": {
-    "gatsby": ">=5.0.0"
-  },
-  "main": "index.js"
-}
diff --git a/packages/gatsby-remark-jsx-preview/index.js b/packages/gatsby-remark-jsx-preview/index.js
deleted file mode 100755
index a0eaadb8..00000000
--- a/packages/gatsby-remark-jsx-preview/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, unicorn/prefer-module */
-const acorn = require('acorn')
-const fromMarkdown = require('mdast-util-from-markdown')
-const mdxJsx = require('mdast-util-mdx-jsx')
-const mdxMd = require('micromark-extension-mdx-md')
-const syntax = require('micromark-extension-mdx-jsx')
-const visit = require('unist-util-visit')
-
-// eslint-disable-next-line unicorn/no-anonymous-default-export
-module.exports = ({ markdownAST }) => {
-  visit(markdownAST, 'code', (node) => {
-    if (node.meta && node.meta.includes('preview')) {
-      const value = node.value
-      const className = /className="(.*)"/.test(node.meta) ? RegExp.$1 : ''
-      const tree = fromMarkdown(value.replaceAll(/(\r\n|\n|\r)/gm, ''), {
-        extensions: [syntax({ acorn: acorn, addResult: true }), mdxMd],
-        mdastExtensions: [mdxJsx.fromMarkdown],
-      })
-
-      delete node.value
-      delete node.position
-      delete node.lang
-      delete node.meta
-
-      node.type = 'div'
-      node.data = { hProperties: { className: ['docs-example-snippet docs-code-snippet'] } }
-      node.children = [
-        {
-          type: 'mdxJsxFlowElement',
-          name: 'Example',
-          attributes: [{ type: 'mdxJsxAttribute', name: 'className', value: className }],
-          children:
-            tree.children[0].type === 'paragraph'
-              ? tree.children[0].children.map((child) => child)
-              : tree.children.map((child) => child),
-        },
-        {
-          type: 'code',
-          lang: 'jsx',
-          value: value,
-        },
-      ]
-    }
-  })
-
-  return markdownAST
-}
diff --git a/packages/gatsby-remark-jsx-preview/package.json b/packages/gatsby-remark-jsx-preview/package.json
deleted file mode 100644
index f21a9d2f..00000000
--- a/packages/gatsby-remark-jsx-preview/package.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "gatsby-remark-jsx-preview",
-  "license": "MIT",
-  "version": "1.0.0",
-  "author": "Łukasz Holeczek <https://github.com/mrholek>",
-  "repository": "",
-  "keywords": [
-    "code",
-    "jsx",
-    "gatsby",
-    "gatsby-plugin",
-    "remark"
-  ],
-  "description": "Gatsby plugin to embed jsx code preview",
-  "dependencies": {
-    "mdast-util-from-markdown": "^0.8.5",
-    "micromark-extension-mdx-jsx": "^0.3.3",
-    "micromark-extension-mdx-md": "^0.1.1",
-    "mdast-util-mdx-jsx": "^0.1.4",
-    "unist-util-visit": "^2.0.3"
-  },
-  "peerDependencies": {
-    "gatsby": ">=5.0.0"
-  },
-  "main": "index.js"
-}
diff --git a/packages/remark-code-tabs/index.js b/packages/remark-code-tabs/index.js
deleted file mode 100755
index bb414d7d..00000000
--- a/packages/remark-code-tabs/index.js
+++ /dev/null
@@ -1,247 +0,0 @@
-import { is } from 'unist-util-is'
-import { visit } from 'unist-util-visit'
-
-const importNodes = {
-  data: {
-    estree: {
-      body: [
-        {
-          source: {
-            raw: "'@coreui/react'",
-            type: 'Literal',
-            value: '@coreui/react',
-          },
-          specifiers: [
-            {
-              local: { name: 'CTab', type: 'Identifier' },
-              imported: { name: 'CTab', type: 'Identifier' },
-              type: 'ImportSpecifier',
-            },
-          ],
-          type: 'ImportDeclaration',
-        },
-        {
-          source: {
-            raw: "'@coreui/react'",
-            type: 'Literal',
-            value: '@coreui/react',
-          },
-          specifiers: [
-            {
-              local: { name: 'CTabContent', type: 'Identifier' },
-              imported: { name: 'CTabContent', type: 'Identifier' },
-              type: 'ImportSpecifier',
-            },
-          ],
-          type: 'ImportDeclaration',
-        },
-        {
-          source: {
-            raw: "'@coreui/react'",
-            type: 'Literal',
-            value: '@coreui/react',
-          },
-          specifiers: [
-            {
-              local: { name: 'CTabPanel', type: 'Identifier' },
-              imported: { name: 'CTabPanel', type: 'Identifier' },
-              type: 'ImportSpecifier',
-            },
-          ],
-          type: 'ImportDeclaration',
-        },
-        {
-          source: {
-            raw: "'@coreui/react'",
-            type: 'Literal',
-            value: '@coreui/react',
-          },
-          specifiers: [
-            {
-              local: { name: 'CTabList', type: 'Identifier' },
-              imported: { name: 'CTabList', type: 'Identifier' },
-              type: 'ImportSpecifier',
-            },
-          ],
-          type: 'ImportDeclaration',
-        },
-        {
-          source: {
-            raw: "'@coreui/react'",
-            type: 'Literal',
-            value: '@coreui/react',
-          },
-          specifiers: [
-            {
-              local: { name: 'CTabs', type: 'Identifier' },
-              imported: { name: 'CTabs', type: 'Identifier' },
-              type: 'ImportSpecifier',
-            },
-          ],
-          type: 'ImportDeclaration',
-        },
-      ],
-      type: 'Program',
-    },
-  },
-  type: 'mdxjsEsm',
-  value: "import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react';",
-}
-
-function parseMeta(nodeMeta) {
-  const parsedMeta = { span: 1 }
-  const tabTag = nodeMeta.match(/tab(={.+})?/g)
-
-  if (tabTag == null) {
-    return null
-  }
-
-  const tabMeta = tabTag[0].split('=')[1]
-
-  if (tabMeta == null) {
-    return parsedMeta
-  }
-
-  return { ...parsedMeta, ...JSON.parse(tabMeta) }
-}
-
-function createTabs(tabNodes, { labels }) {
-  const tabNavContentChildren = tabNodes.map(([nodes, meta], index) => {
-    const lang = nodes[0].lang
-    const label = meta.label ?? labels.get(lang)
-
-    return {
-      attributes: [
-        {
-          name: 'itemKey',
-          type: 'mdxJsxAttribute',
-          value: index,
-        },
-      ],
-      children: [{ type: 'text', value: label }],
-      name: 'CTab',
-      type: 'mdxJsxFlowElement',
-    }
-  })
-
-  const tabContentChildren = tabNodes.map(([nodes], index) => {
-    return {
-      attributes: [
-        {
-          name: 'itemKey',
-          type: 'mdxJsxAttribute',
-          value: index,
-        },
-      ],
-      children: nodes,
-      name: 'CTabPanel',
-      type: 'mdxJsxFlowElement',
-    }
-  })
-
-  return {
-    attributes: [{ name: 'activeItemKey', type: 'mdxJsxAttribute', value: 0 }],
-    children: [
-      {
-        attributes: [
-          { name: 'className', type: 'mdxJsxAttribute', value: 'docs-code-tabs' },
-          {
-            name: 'variant',
-            type: 'mdxJsxAttribute',
-            value: 'underline-border',
-          },
-        ],
-        children: tabNavContentChildren,
-        name: 'CTabList',
-        type: 'mdxJsxFlowElement',
-      },
-      {
-        attributes: [
-          { name: 'className', type: 'mdxJsxAttribute', value: 'docs-code-tab-content mb-3' },
-        ],
-        children: tabContentChildren,
-        name: 'CTabContent',
-        type: 'mdxJsxFlowElement',
-      },
-    ],
-    name: 'CTabs',
-    type: 'mdxJsxFlowElement',
-  }
-}
-
-function collectTabNodes(parent, index) {
-  let node = parent.children[index]
-  const tabNodes = []
-
-  do {
-    if (is(node, 'code') && typeof node.meta === 'string') {
-      const meta = parseMeta(node.meta)
-
-      if (meta == null) {
-        break
-      }
-
-      const spanItems = []
-
-      while (spanItems.length < meta.span && is(node, 'code')) {
-        spanItems.push(node)
-
-        index++
-        node = parent.children[index]
-      }
-
-      tabNodes.push([spanItems, meta])
-    } else {
-      break
-    }
-  } while (index <= parent.children.length)
-
-  if (tabNodes.length === 0) {
-    return null
-  }
-
-  return tabNodes
-}
-
-function resolveConfig(options) {
-  return {
-    labels: new Map([['js', 'JavaScript'], ['ts', 'TypeScript'], ...(options.labels || [])]),
-  }
-}
-
-function plugin(options = {}) {
-  const config = resolveConfig(options)
-
-  return function transformer(tree) {
-    let hasTabs = false
-    let includesImportTabs = false
-
-    visit(tree, ['code', 'mdxjsEsm'], (node, index, parent) => {
-      if (is(node, 'mdxjsEsm') && node.value.includes('@coreui/react')) {
-        includesImportTabs = true
-
-        return
-      }
-
-      const tabNodes = collectTabNodes(parent, index)
-
-      if (tabNodes == null) {
-        return
-      }
-
-      hasTabs = true
-
-      const tabs = createTabs(tabNodes, config)
-
-      const replacedCount = tabNodes.reduce((nodesCount, [nodes]) => nodesCount + nodes.length, 0)
-
-      parent.children.splice(index, replacedCount, tabs)
-    })
-
-    if (hasTabs && !includesImportTabs) {
-      tree.children.unshift(importNodes)
-    }
-  }
-}
-
-export default plugin
diff --git a/packages/remark-code-tabs/package.json b/packages/remark-code-tabs/package.json
deleted file mode 100644
index 1c521f7e..00000000
--- a/packages/remark-code-tabs/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "remark-code-tabs",
-  "type": "module",
-  "license": "MIT",
-  "version": "1.0.0",
-  "author": "Łukasz Holeczek <https://github.com/mrholek>",
-  "repository": "",
-  "keywords": [
-    "code",
-    "jsx",
-    "remark"
-  ],
-  "description": "Gatsby plugin to embed jsx code preview",
-  "dependencies": {
-    "unist-util-is": "^6.0.0",
-    "unist-util-visit": "^5.0.0"
-  },
-  "main": "index.js"
-}
diff --git a/prettier.config.mjs b/prettier.config.mjs
deleted file mode 100644
index 6e0ae723..00000000
--- a/prettier.config.mjs
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @see https://prettier.io/docs/en/configuration.html
- * @type {import("prettier").Config}
- */
-const config = {
-  printWidth: 100,
-  semi: false,
-  singleQuote: true,
-  tabWidth: 2,
-  trailingComma: 'es5',
-};
-
-export default config;
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 00000000..437af024
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,41 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
+import babel from '@rollup/plugin-babel'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+
+const external = ['react', 'react-dom', 'react-router-dom', 'react-dom/server']
+// const external = id => id.includes('@babel/runtime')
+
+const plugins = [
+  babel({
+    // Only transpile our source code
+    exclude: 'node_modules/**',
+    // Include the helpers in the bundle, at most one copy of each
+    babelHelpers: 'runtime'
+  }),
+  peerDepsExternal(),
+  resolve({
+    // module: true,
+    // browser: true,
+    // jsnext: true,
+    // preferBuiltins: false,
+    extensions: ['.js', '.json', '.jsx'],
+    dedupe: ['react', 'react-dom', 'react-router-dom', 'react-dom/server']
+  }),
+  commonjs(),
+  postcss()
+]
+
+const rollupConfig = {
+  input: `./src/index.js`,
+  output: {
+    file: `./lib/index.js`,
+    format: 'cjs',
+    name: 'coreui-react'
+  },
+  external,
+  plugins
+}
+
+module.exports = rollupConfig
\ No newline at end of file
diff --git a/src/CPortal.js b/src/CPortal.js
new file mode 100644
index 00000000..a3a9ddbb
--- /dev/null
+++ b/src/CPortal.js
@@ -0,0 +1,48 @@
+// import {useEffect, useRef} from 'react';
+// import ReactDOM from 'react-dom';
+// import PropTypes from 'prop-types';
+// import {canUseDOM} from './utils/helper.js';
+
+// //component - CoreUI / CPortal
+
+// const CPortal = props=>{
+
+//   const fields = useRef({defaultNode: null}).current;
+
+//   // effect
+
+//   useEffect(() => {
+//     return function cleanup() {
+//       if (fields.defaultNode) {
+//         document.body.removeChild(fields.defaultNode);
+//       }
+//       fields.defaultNode = null;
+//     };
+//   },
+//   [fields.defaultNode]);
+
+//   // render
+
+//   if (!canUseDOM) {
+//     return null;
+//   }
+
+//   if (!props.node && !fields.defaultNode) {
+//     fields.defaultNode = document.createElement('div');
+//     document.body.appendChild(fields.defaultNode);
+//   }
+
+//   return ReactDOM.createPortal(
+//     props.children,
+//     props.node || fields.defaultNode
+//   );
+
+// }
+
+// CPortal.propTypes = {
+//   children: PropTypes.node.isRequired,
+//   //
+//   node: PropTypes.any
+// };
+
+// export default CPortal;
diff --git a/src/README.md b/src/README.md
new file mode 100644
index 00000000..00e07c57
--- /dev/null
+++ b/src/README.md
@@ -0,0 +1,19 @@
+## @coreui/react v3 for [CoreUI 3 for React](https://coreui.io/react/)
+
+[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20Vue%20Admin%20Template%20&url=http://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)  
+[![npm_latest][npm-coreui-react-badge-latest]][npm-coreui-react]
+[![npm next][npm-coreui-react-badge-next]][npm-coreui-react]
+[![NPM downloads][npm-coreui-react-download]][npm-coreui-react]
+[![Build](https://img.shields.io/github/workflow/status/coreui/coreui-react/Project%20check?style=flat-square)][coreui]  
+[![react](https://img.shields.io/badge/react-^17.0.1-lightgrey.svg?style=flat-square&logo=react)][coreui]
+
+[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square
+[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react
+[npm-coreui-react-badge-latest]: https://img.shields.io/npm/v/@coreui/react/latest?style=flat-square
+[npm-coreui-react-badge-next]: https://img.shields.io/npm/v/@coreui/react/next?style=flat-square
+[coreui]: https://coreui.io/react
+
+
+```bash
+npm install @coreui/react
+```
diff --git a/src/alert/CAlert.js b/src/alert/CAlert.js
new file mode 100644
index 00000000..72c4e796
--- /dev/null
+++ b/src/alert/CAlert.js
@@ -0,0 +1,92 @@
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CFade from '../fade/CFade'
+import { omitByKeys } from '@coreui/utils/src'
+import { CFadeProps } from '../utils/helper.js'
+import CButtonClose from '../button/CButtonClose'
+
+//component - CoreUI / CAlert
+const CAlert = props => {
+  let {
+    children,
+    className,
+    innerRef,
+    //
+    onShowChange,
+    closeButton,
+    color,
+    fade,
+    show,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames(
+    className,
+    'alert',
+    {
+      [`alert-${color}`]: color,
+      'alert-dismissible': closeButton
+    }
+  )
+
+  const alertTransition = {
+    baseClass: fade ? CFade.baseClass : '',
+    timeout: fade ? CFade.timeout : 0,
+    unmountOnExit: true
+  }
+  
+  const [isOpen, setIsOpen] = useState(show)
+
+  useEffect(() => {
+    setIsOpen(show)
+  }, [show])
+
+  let timeout = useRef()
+
+  useEffect(() => {
+    onShowChange && onShowChange(isOpen)
+    clearTimeout(timeout.current)
+    if (typeof isOpen === 'number' && isOpen > 0) {
+      timeout.current = setTimeout(() => {
+        setIsOpen(isOpen - 1)
+      }, 1000)
+    }
+    return () => clearTimeout(timeout.current)
+  }, [isOpen])
+
+  const attrs = omitByKeys(attributes, CFadeProps)
+
+  return (
+    <CFade
+      {...alertTransition}
+      className={classes}
+      in={Boolean(isOpen)}
+      role="alert"
+      {...attrs}
+      innerRef={innerRef}
+    >
+      { children }
+      { closeButton && <CButtonClose onClick={() => setIsOpen(false)} />}
+    </CFade>
+  )
+}
+
+CAlert.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  onShowChange: PropTypes.func,
+  closeButton: PropTypes.bool,
+  color: PropTypes.string,
+  fade: PropTypes.bool,
+  show: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+}
+
+CAlert.defaultProps = {
+  show: true,
+  fade: true
+}
+
+export default CAlert
diff --git a/src/alert/tests/CAlert.test.js b/src/alert/tests/CAlert.test.js
new file mode 100644
index 00000000..d66a1a75
--- /dev/null
+++ b/src/alert/tests/CAlert.test.js
@@ -0,0 +1,69 @@
+import React from 'react'
+//import { renderHook, act } from '@testing-library/react-hooks'
+import { configure, mount, shallow } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CAlert from '../CAlert'
+
+configure({ adapter: new Adapter() })
+
+describe('CAlert', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CAlert/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CAlert
+        className='class-name'
+        closeButton
+        color='warning'
+        show
+      >
+        CAlert
+      </CAlert>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  /*
+  it('closes alert after click on dismiss button', () => {
+    jest.useFakeTimers()
+    const onClose = jest.fn();
+    const component = mount(
+      <CAlert 
+        closeButton 
+        show
+        onShowChange={onClose}
+      >
+        CAlert
+      </CAlert>
+    );
+    console.log(component.html())
+    component.find('button').simulate('click')
+    //jest.runAllTimers()
+    jest.advanceTimersByTime(5001)
+    console.log(component.html())
+    expect(component).toBe(false)
+  })
+  */
+  it('run onShowChange after click on dismiss button', () => {
+    jest.useFakeTimers()
+    const onClose = jest.fn();
+    const component = mount(
+      <CAlert 
+        closeButton 
+        show
+        onShowChange={onClose}
+      >
+        CAlert
+      </CAlert>
+    );
+    expect(onClose).toHaveBeenCalledTimes(1);
+    component.find('button').simulate('click')
+    jest.advanceTimersByTime(1000)
+    expect(onClose).toHaveBeenCalledTimes(2);
+  })
+})
diff --git a/src/alert/tests/__snapshots__/CAlert.test.js.snap b/src/alert/tests/__snapshots__/CAlert.test.js.snap
new file mode 100644
index 00000000..b2d4dd28
--- /dev/null
+++ b/src/alert/tests/__snapshots__/CAlert.test.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CAlert renders basic wrapper correctly 1`] = `
+<div
+  className="alert fade"
+  role="alert"
+/>
+`;
+
+exports[`CAlert renders customized wrapper correctly 1`] = `
+<div
+  className="class-name alert alert-warning alert-dismissible fade"
+  role="alert"
+>
+  CAlert
+  <button
+    aria-label="Close"
+    className="close"
+    onClick={[Function]}
+  >
+    ×
+  </button>
+</div>
+`;
diff --git a/src/badge/CBadge.js b/src/badge/CBadge.js
new file mode 100644
index 00000000..eba17bed
--- /dev/null
+++ b/src/badge/CBadge.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import CLink from '../link/CLink'
+
+//component - CoreUI / CBadge
+
+const CBadge = props => {
+
+  let {
+    tag,
+    className,
+    //
+    innerRef,
+    color,
+    shape,
+    ...attributes
+  } = props
+
+  // render
+
+  const classes = classNames(
+    className,
+    'badge',
+    {
+      [`badge-${color}`]: color,
+      [`badge-${shape}`]: shape
+    }
+  )
+
+  const Tag = attributes.to || attributes.href ? CLink : tag
+  const ref = { [`${typeof Tag === 'string' ? 'ref': 'innerRef'}`]: innerRef }
+
+  return (
+    <Tag className={classes} {...attributes} {...ref} />
+  )
+
+}
+
+CBadge.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  color: PropTypes.string,
+  shape: PropTypes.oneOf(['', 'pill'])
+};
+
+CBadge.defaultProps = {
+  tag: 'span'
+}
+
+export default CBadge
diff --git a/src/badge/tests/CBadge.test.js b/src/badge/tests/CBadge.test.js
new file mode 100644
index 00000000..21dcf9d2
--- /dev/null
+++ b/src/badge/tests/CBadge.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CBadge from '../CBadge'
+
+configure({ adapter: new Adapter() })
+
+describe('CBadge', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CBadge/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CBadge
+        className='class-name'
+        color='warning'
+        shape="pill"
+        href='href'
+      >
+        CBadge
+      </CBadge>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/badge/tests/__snapshots__/CBadge.test.js.snap b/src/badge/tests/__snapshots__/CBadge.test.js.snap
new file mode 100644
index 00000000..79326a60
--- /dev/null
+++ b/src/badge/tests/__snapshots__/CBadge.test.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CBadge renders basic wrapper correctly 1`] = `
+<span
+  className="badge"
+/>
+`;
+
+exports[`CBadge renders customized wrapper correctly 1`] = `
+<a
+  className="class-name badge badge-warning badge-pill"
+  href="href"
+  onClick={[Function]}
+  rel={null}
+>
+  CBadge
+</a>
+`;
diff --git a/src/breadcrumb/CBreadcrumb.js b/src/breadcrumb/CBreadcrumb.js
new file mode 100644
index 00000000..29ba9d88
--- /dev/null
+++ b/src/breadcrumb/CBreadcrumb.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CBreadcrumb
+
+const CBreadcrumb = props => {
+
+  const {
+    className,
+    innerRef,
+    //
+    ...attributes
+  } = props
+
+  const classes = classNames(className, 'breadcrumb')
+
+  //render
+  return (
+    <ol className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CBreadcrumb.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+}
+
+export default CBreadcrumb
\ No newline at end of file
diff --git a/src/breadcrumb/CBreadcrumbItem.js b/src/breadcrumb/CBreadcrumbItem.js
new file mode 100644
index 00000000..fb25f899
--- /dev/null
+++ b/src/breadcrumb/CBreadcrumbItem.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CBreadcrumbItem
+
+const CBreadcrumbItem = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    active,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    active ? 'active' : false,
+    'breadcrumb-item'
+  )
+
+  return (
+    <li 
+      className={classes}
+      role="presentation"
+      aria-current={active ? 'page' : undefined}
+      {...attributes}
+      ref={innerRef} 
+    />
+  )
+
+}
+
+CBreadcrumbItem.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  active: PropTypes.bool
+}
+
+export default CBreadcrumbItem
\ No newline at end of file
diff --git a/src/breadcrumb/CBreadcrumbRouter.js b/src/breadcrumb/CBreadcrumbRouter.js
new file mode 100644
index 00000000..4f88e91c
--- /dev/null
+++ b/src/breadcrumb/CBreadcrumbRouter.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CBreadcrumb, CBreadcrumbItem } from '../index'
+import { Link, useLocation, matchPath } from 'react-router-dom';
+
+//component - CoreUI / CBreadcrumbRouter
+const getPaths = pathname => {
+  const paths = ['/']
+  if (pathname === '/') return paths;
+  pathname.split('/').reduce((prev, curr) => {
+    const currPath = `${prev}/${curr}`
+    paths.push(currPath)
+    return currPath
+  })
+  return paths
+}
+
+const CBreadcrumbRouteItem = ({name, currPath}, fullCurrPath) => {
+  if (currPath === fullCurrPath) {
+    return <CBreadcrumbItem key={currPath} active>{name}</CBreadcrumbItem>
+  } else {
+    return <CBreadcrumbItem key={currPath}>
+      <Link to={currPath}>
+        {name}
+      </Link>
+    </CBreadcrumbItem>
+  }
+}
+
+const CBreadcrumbRouter = props => {
+
+  const {
+    className,
+    innerRef,
+    routes,
+    ...attributes
+  } = props
+
+  let items = null
+  if (routes) {
+    const currPath = useLocation().pathname
+    const paths = getPaths(currPath)
+    const currRoutes = paths.map(currPath => {
+      const route = routes.find(route => matchPath(currPath, {
+        path: route.path,
+        exact: route.exact
+      }))
+      return { ...route, currPath }
+    }).filter(route => route && route.name)
+    
+    items = currRoutes.map(route => {
+      return CBreadcrumbRouteItem(route, currPath)
+    })
+  }
+
+
+  //render
+  const classes = classNames(className)
+
+  return (
+    <CBreadcrumb 
+      className={classes} 
+      {...attributes}
+      ref={innerRef}
+    >
+      {items}
+    </CBreadcrumb>
+  )
+}
+
+CBreadcrumbRouter.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  routes: PropTypes.array
+}
+
+export default CBreadcrumbRouter
\ No newline at end of file
diff --git a/src/breadcrumb/tests/CBreadcrumb.test.js b/src/breadcrumb/tests/CBreadcrumb.test.js
new file mode 100644
index 00000000..4887d33f
--- /dev/null
+++ b/src/breadcrumb/tests/CBreadcrumb.test.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CBreadcrumb from '../CBreadcrumb'
+import CBreadcrumbItem from '../CBreadcrumbItem'
+
+configure({ adapter: new Adapter() })
+
+describe('CBreadcrumb', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CBreadcrumb/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CBreadcrumb
+        className='class-name'
+      >
+        <CBreadcrumbItem
+
+        >item</CBreadcrumbItem>
+        <CBreadcrumbItem
+          active
+        >item 2</CBreadcrumbItem>
+      </CBreadcrumb>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/breadcrumb/tests/__snapshots__/CBreadcrumb.test.js.snap b/src/breadcrumb/tests/__snapshots__/CBreadcrumb.test.js.snap
new file mode 100644
index 00000000..75325a2b
--- /dev/null
+++ b/src/breadcrumb/tests/__snapshots__/CBreadcrumb.test.js.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CBreadcrumb renders basic wrapper correctly 1`] = `
+<ol
+  className="breadcrumb"
+/>
+`;
+
+exports[`CBreadcrumb renders customized wrapper correctly 1`] = `
+<ol
+  className="class-name breadcrumb"
+>
+  <li
+    className="breadcrumb-item"
+    role="presentation"
+  >
+    item
+  </li>
+  <li
+    aria-current="page"
+    className="active breadcrumb-item"
+    role="presentation"
+  >
+    item 2
+  </li>
+</ol>
+`;
diff --git a/src/button/CButton.js b/src/button/CButton.js
new file mode 100644
index 00000000..2cee3b7c
--- /dev/null
+++ b/src/button/CButton.js
@@ -0,0 +1,87 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import CLink from '../link/CLink'
+//component - CoreUI / CButton
+
+const CButton = props => {
+
+  let {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    onClick,
+    disabled,
+    active,
+    block,
+    color,
+    size,
+    pressed,
+    shape,
+    variant,
+    ...attributes
+  } = props
+
+  const click = e => !disabled && onClick && onClick(e)
+
+  const isLink = attributes.to || attributes.href
+
+  //render
+  const classes = classNames(
+    className,
+    'btn',
+    variant || color ? `btn${variant ? '-' + variant : ''}-${color}` : false,
+    size ? `btn-${size}` : false,
+    block ? 'btn-block' : false,
+    shape ? `btn-${shape}` : false,
+    pressed ? 'btn-pressed' : false,
+    { 'active': active && !isLink,
+    'disabled': disabled && !isLink }
+  )
+
+
+  if (isLink) {
+    return <CLink
+      {...attributes}
+      active={active}
+      disabled={disabled}
+      className={classes}
+      onClick={click}
+      innerRef={innerRef}
+    />
+  } else {
+    return <Tag
+      className={classes}
+      type="button"
+      disabled={disabled}
+      {...attributes}
+      onClick={click}
+      ref={innerRef}
+    />
+  }
+}
+
+CButton.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  active: PropTypes.bool,
+  block: PropTypes.bool,
+  shape: PropTypes.string,
+  variant: PropTypes.oneOf(['', 'ghost', 'outline']),
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  size: PropTypes.string,
+  pressed: PropTypes.bool,
+}
+
+CButton.defaultProps = {
+  tag: 'button'
+}
+
+//export
+export default CButton
diff --git a/src/button/CButtonClose.js b/src/button/CButtonClose.js
new file mode 100644
index 00000000..8ed2f5fd
--- /dev/null
+++ b/src/button/CButtonClose.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CButtonClose
+
+const CButtonClose = props => {
+
+  const {
+    children,
+    className,
+    //
+    buttonClass,
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    buttonClass,
+    className
+  )
+
+  return (
+    <button
+      className={classes}
+      aria-label="Close"
+      {...attributes} 
+      ref={innerRef}
+    >
+      { children || String.fromCharCode(215) }
+    </button>
+  )
+
+}
+
+CButtonClose.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  buttonClass: PropTypes.string,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+}
+
+CButtonClose.defaultProps = {
+  buttonClass: 'close'
+}
+
+export default CButtonClose
diff --git a/src/button/CButtonGroup.js b/src/button/CButtonGroup.js
new file mode 100644
index 00000000..a5d6de3d
--- /dev/null
+++ b/src/button/CButtonGroup.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CButtonGroup
+
+const CButtonGroup = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    size,
+    vertical,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    size ? 'btn-group-' + size : false,
+    vertical ? 'btn-group-vertical' : 'btn-group'
+  )
+
+  return (
+    <div 
+      className={classes} 
+      role="group"
+      {...attributes} 
+      ref={innerRef} 
+    />
+  )
+}
+
+CButtonGroup.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  size: PropTypes.oneOf(['', 'sm', 'lg']),
+  vertical: PropTypes.bool
+}
+
+
+export default CButtonGroup
diff --git a/src/button/CButtonToolbar.js b/src/button/CButtonToolbar.js
new file mode 100644
index 00000000..f3206168
--- /dev/null
+++ b/src/button/CButtonToolbar.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CButtonToolbar
+
+const CButtonToolbar = props=>{
+
+  const {
+    className,
+    //
+    innerRef,
+    justify,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    'btn-toolbar',
+    { [`justify-content-${justify}`]: justify }
+  )
+
+  return (
+    <div 
+      className={classes}
+      role="toolbar"
+      aria-label="toolbar"
+      {...attributes} 
+      ref={innerRef} 
+    />
+  )
+
+}
+
+CButtonToolbar.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  role: PropTypes.string,
+  justify: PropTypes.oneOf(['', 'start', 'end', 'between', 'center'])
+}
+
+export default CButtonToolbar
diff --git a/src/button/tests/CButton.test.js b/src/button/tests/CButton.test.js
new file mode 100644
index 00000000..10604aac
--- /dev/null
+++ b/src/button/tests/CButton.test.js
@@ -0,0 +1,72 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CButton from '../CButton'
+
+configure({ adapter: new Adapter() })
+
+describe('CButton', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CButton/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CButton
+        className='class-name'
+        disabled
+        block
+        size="lg"
+        pressed
+        shape="pill"
+        variant="ghost"
+        color='warning'
+      >
+        CAlert
+      </CButton>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly two', () => {
+    const componentCustomized = renderer.create(
+      <CButton
+        className='class-name'
+        active
+        block
+        size="lg"
+        pressed
+        shape="pill"
+        color='warning'
+        href="href"
+      >
+        CButton
+      </CButton>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('on click', () => {
+    const closeFn = jest.fn();
+    const component = mount(
+      <CButton
+        className='class-name'
+        active
+        block
+        size="lg"
+        pressed
+        shape="pill"
+        color='warning'
+        onClick={closeFn}
+      >
+        CButton
+      </CButton>
+    );
+    component.find('button').simulate('click')
+    expect(closeFn).toHaveBeenCalledTimes(1);
+  })
+
+})
diff --git a/src/button/tests/CButtonClose.test.js b/src/button/tests/CButtonClose.test.js
new file mode 100644
index 00000000..0c1c0f05
--- /dev/null
+++ b/src/button/tests/CButtonClose.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CButtonClose from '../CButtonClose'
+
+configure({ adapter: new Adapter() })
+
+describe('CButtonClose', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CButtonClose/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CButtonClose
+        className='class-name'
+      >
+        CButtonClose
+      </CButtonClose>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/button/tests/CButtonGroup.test.js b/src/button/tests/CButtonGroup.test.js
new file mode 100644
index 00000000..55f18249
--- /dev/null
+++ b/src/button/tests/CButtonGroup.test.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CButtonGroup from '../CButtonGroup'
+import CButton from '../CButton'
+
+configure({ adapter: new Adapter() })
+
+describe('CButtonGroup', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CButtonGroup/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CButtonGroup
+        className='class-name'
+      >
+        <CButton>A</CButton>
+        <CButton>B</CButton>
+      </CButtonGroup>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly two', () => {
+    const componentCustomized = renderer.create(
+      <CButtonGroup
+        className='class-name'
+        size='lg'
+        vertical
+      >
+        <CButton>A</CButton>
+        <CButton>B</CButton>
+      </CButtonGroup>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/button/tests/CButtonToolbar.test.js b/src/button/tests/CButtonToolbar.test.js
new file mode 100644
index 00000000..bee5106e
--- /dev/null
+++ b/src/button/tests/CButtonToolbar.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CButtonToolbar from '../CButtonToolbar'
+
+configure({ adapter: new Adapter() })
+
+describe('CButtonToolbar', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CButtonToolbar/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CButtonToolbar
+        className='class-name'
+        justify='between'
+      >
+        CButtonToolbar
+      </CButtonToolbar>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/button/tests/__snapshots__/CButton.test.js.snap b/src/button/tests/__snapshots__/CButton.test.js.snap
new file mode 100644
index 00000000..ab6833ac
--- /dev/null
+++ b/src/button/tests/__snapshots__/CButton.test.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CButton renders basic wrapper correctly 1`] = `
+<button
+  className="btn"
+  onClick={[Function]}
+  type="button"
+/>
+`;
+
+exports[`CButton renders customized wrapper correctly 1`] = `
+<button
+  className="class-name btn btn-ghost-warning btn-lg btn-block btn-pill btn-pressed disabled"
+  disabled={true}
+  onClick={[Function]}
+  type="button"
+>
+  CAlert
+</button>
+`;
+
+exports[`CButton renders customized wrapper correctly two 1`] = `
+<a
+  className="active class-name btn btn-warning btn-lg btn-block btn-pill btn-pressed"
+  href="href"
+  onClick={[Function]}
+  rel={null}
+>
+  CButton
+</a>
+`;
diff --git a/src/button/tests/__snapshots__/CButtonClose.test.js.snap b/src/button/tests/__snapshots__/CButtonClose.test.js.snap
new file mode 100644
index 00000000..a70d4f90
--- /dev/null
+++ b/src/button/tests/__snapshots__/CButtonClose.test.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CButtonClose renders basic wrapper correctly 1`] = `
+<button
+  aria-label="Close"
+  className="close"
+>
+  ×
+</button>
+`;
+
+exports[`CButtonClose renders customized wrapper correctly 1`] = `
+<button
+  aria-label="Close"
+  className="close class-name"
+>
+  CButtonClose
+</button>
+`;
diff --git a/src/button/tests/__snapshots__/CButtonGroup.test.js.snap b/src/button/tests/__snapshots__/CButtonGroup.test.js.snap
new file mode 100644
index 00000000..ec84d84d
--- /dev/null
+++ b/src/button/tests/__snapshots__/CButtonGroup.test.js.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CButtonGroup renders basic wrapper correctly 1`] = `
+<div
+  className="btn-group"
+  role="group"
+/>
+`;
+
+exports[`CButtonGroup renders customized wrapper correctly 1`] = `
+<div
+  className="class-name btn-group"
+  role="group"
+>
+  <button
+    className="btn"
+    onClick={[Function]}
+    type="button"
+  >
+    A
+  </button>
+  <button
+    className="btn"
+    onClick={[Function]}
+    type="button"
+  >
+    B
+  </button>
+</div>
+`;
+
+exports[`CButtonGroup renders customized wrapper correctly two 1`] = `
+<div
+  className="class-name btn-group-lg btn-group-vertical"
+  role="group"
+>
+  <button
+    className="btn"
+    onClick={[Function]}
+    type="button"
+  >
+    A
+  </button>
+  <button
+    className="btn"
+    onClick={[Function]}
+    type="button"
+  >
+    B
+  </button>
+</div>
+`;
diff --git a/src/button/tests/__snapshots__/CButtonToolbar.test.js.snap b/src/button/tests/__snapshots__/CButtonToolbar.test.js.snap
new file mode 100644
index 00000000..d9c57c2b
--- /dev/null
+++ b/src/button/tests/__snapshots__/CButtonToolbar.test.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CButtonToolbar renders basic wrapper correctly 1`] = `
+<div
+  aria-label="toolbar"
+  className="btn-toolbar"
+  role="toolbar"
+/>
+`;
+
+exports[`CButtonToolbar renders customized wrapper correctly 1`] = `
+<div
+  aria-label="toolbar"
+  className="class-name btn-toolbar justify-content-between"
+  role="toolbar"
+>
+  CButtonToolbar
+</div>
+`;
diff --git a/src/callout/CCallout.js b/src/callout/CCallout.js
new file mode 100644
index 00000000..54aed484
--- /dev/null
+++ b/src/callout/CCallout.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CCallout
+
+const CCallout = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    color,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'c-callout',
+    color ? 'c-callout-' + color : null,
+    className
+  )
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef} />
+  )
+
+}
+
+CCallout.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  color: PropTypes.string
+}
+
+export default CCallout
diff --git a/src/callout/tests/CCallout.test.js b/src/callout/tests/CCallout.test.js
new file mode 100644
index 00000000..76fa9775
--- /dev/null
+++ b/src/callout/tests/CCallout.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCallout from '../CCallout'
+
+configure({ adapter: new Adapter() })
+
+describe('CCallout', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCallout/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCallout
+        className='class-name'
+        color='warning'
+      >
+        CCallout
+      </CCallout>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/callout/tests/__snapshots__/CCallout.test.js.snap b/src/callout/tests/__snapshots__/CCallout.test.js.snap
new file mode 100644
index 00000000..9d9a82e6
--- /dev/null
+++ b/src/callout/tests/__snapshots__/CCallout.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCallout renders basic wrapper correctly 1`] = `
+<div
+  className="c-callout"
+/>
+`;
+
+exports[`CCallout renders customized wrapper correctly 1`] = `
+<div
+  className="c-callout c-callout-warning class-name"
+>
+  CCallout
+</div>
+`;
diff --git a/src/card/CCard.js b/src/card/CCard.js
new file mode 100644
index 00000000..c6cd7733
--- /dev/null
+++ b/src/card/CCard.js
@@ -0,0 +1,65 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CCard
+
+const CCard = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    color,
+    textColor,
+    borderColor,
+    align,
+    accentColor,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    'card',
+    align ? `text-${align}` : false,
+    textColor ? `text-${textColor}` : false,
+    color ? `bg-${color}` : false,
+    borderColor ? `border-${borderColor}` : false,
+    accentColor ? `card-accent-${accentColor}` : false,
+  )
+
+
+  return (
+    <Tag 
+      className={classes} 
+      {...attributes} 
+      ref={innerRef}
+    />
+  )
+}
+
+export const sharedPropTypes = {
+  align: PropTypes.oneOf(['', 'left', 'center', 'right']),
+  color: PropTypes.string,
+  borderColor: PropTypes.string,
+  textColor: PropTypes.string
+}
+
+CCard.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  accentColor: PropTypes.string,
+  ...sharedPropTypes
+}
+
+CCard.defaultProps = {
+  tag: 'div'
+}
+
+export default CCard
diff --git a/src/card/CCardBody.js b/src/card/CCardBody.js
new file mode 100644
index 00000000..34708239
--- /dev/null
+++ b/src/card/CCardBody.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import { sharedPropTypes } from './CCard'
+//component - CoreUI / CCardBody
+
+const CCardBody = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    color,
+    textColor,
+    borderColor,
+    align,
+    ...attributes
+  } = props
+
+
+  //render
+
+  const classes = classNames(
+    className,
+    'card-body',
+    align ? `text-${align}` : false,
+    textColor ? `text-${textColor}` : false,
+    color ? `bg-${color}` : false,
+    borderColor ? `border-${borderColor}` : false
+  )
+
+  return (
+    <Tag 
+      className={classes} 
+      {...attributes}
+      ref={innerRef}
+    />
+  )
+
+}
+
+CCardBody.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  ...sharedPropTypes
+}
+
+CCardBody.defaultProps = {
+  tag: 'div'
+}
+
+export default CCardBody
diff --git a/src/card/CCardFooter.js b/src/card/CCardFooter.js
new file mode 100644
index 00000000..476fb1bb
--- /dev/null
+++ b/src/card/CCardFooter.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import { sharedPropTypes } from './CCard.js'
+
+//component - CoreUI / CCardFooter
+
+const CCardFooter = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    color,
+    textColor,
+    borderColor,
+    align,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    'card-footer',
+    align ? `text-${align}` : false,
+    textColor ? `text-${textColor}` : false,
+    color ? `bg-${color}` : false,
+    borderColor ? `border-${borderColor}` : false
+  )
+
+  return (
+    <Tag 
+      className={classes} 
+       {...attributes}
+      ref={innerRef} 
+    />
+  )
+
+}
+
+CCardFooter.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  ...sharedPropTypes
+}
+
+CCardFooter.defaultProps = {
+  tag: 'footer'
+}
+
+export default CCardFooter
diff --git a/src/card/CCardGroup.js b/src/card/CCardGroup.js
new file mode 100644
index 00000000..3cdb2b23
--- /dev/null
+++ b/src/card/CCardGroup.js
@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import {tagPropType} from '../utils/helper.js'
+
+//component - CoreUI / CCardGroup
+
+const CCardGroup = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    deck,
+    columns,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    `card-${columns ? 'columns' : deck ? 'deck' : 'group' }`,
+    className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  )
+
+}
+
+CCardGroup.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  deck: PropTypes.bool,
+  columns: PropTypes.bool,
+}
+
+CCardGroup.defaultProps = {
+  tag: 'div'
+}
+
+export default CCardGroup
diff --git a/src/card/CCardHeader.js b/src/card/CCardHeader.js
new file mode 100644
index 00000000..5fa86c41
--- /dev/null
+++ b/src/card/CCardHeader.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import { sharedPropTypes } from './CCard'
+
+//component - CoreUI / CCardHeader
+
+const CCardHeader = props => {
+
+  const {
+    tag: Tag,
+    className,
+    innerRef,
+    color,
+    textColor,
+    borderColor,
+    align,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    'card-header',
+    align ? `text-${align}` : false,
+    textColor ? `text-${textColor}` : false,
+    color ? `bg-${color}` : false,
+    borderColor ? `border-${borderColor}` : false
+  )
+
+  return (
+    <Tag 
+      className={classes}
+       {...attributes} 
+      ref={innerRef} 
+    />
+  )
+
+}
+
+CCardHeader.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  ...sharedPropTypes
+}
+
+CCardHeader.defaultProps = {
+  tag: 'header'
+}
+
+export default CCardHeader
diff --git a/src/card/CCardImg.js b/src/card/CCardImg.js
new file mode 100644
index 00000000..d2296fd0
--- /dev/null
+++ b/src/card/CCardImg.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import CImg from '../image/CImg'
+
+//component - CoreUI / CCardImg
+const CCardImg = props => {
+  const { variant, ...rest } = props
+  const classSuffix = variant !== 'full' ? `-${variant}` : ''
+  return (
+    <CImg {...rest} className={[`card-img${classSuffix}`, rest.className]}/>
+  )
+}
+
+CCardImg.propTypes = {
+  variant: PropTypes.oneOf(['', 'top', 'bottom', 'full'])
+}
+
+CCardImg.defaultProps = {
+  variant: 'full'
+}
+
+export default CCardImg
diff --git a/src/card/CCardImgOverlay.js b/src/card/CCardImgOverlay.js
new file mode 100644
index 00000000..74556f05
--- /dev/null
+++ b/src/card/CCardImgOverlay.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CCardImgOverlay
+
+const CCardImgOverlay = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    'card-img-overlay'
+  );
+
+  return (
+    <Tag {...attributes} className={classes} ref={innerRef} />
+  );
+
+}
+
+CCardImgOverlay.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+CCardImgOverlay.defaultProps = {
+  tag: 'div'
+};
+
+export default CCardImgOverlay;
diff --git a/src/card/CCardLink.js b/src/card/CCardLink.js
new file mode 100644
index 00000000..68123007
--- /dev/null
+++ b/src/card/CCardLink.js
@@ -0,0 +1,11 @@
+/* eslint react/prop-types: 0 */
+import React from 'react'
+import CLink from '../link/CLink'
+
+const CCardLink = props => {
+  return (
+    <CLink {...props} className={['card-link', props.className]}/>
+  )
+}
+
+export default CCardLink
diff --git a/src/card/CCardSubtitle.js b/src/card/CCardSubtitle.js
new file mode 100644
index 00000000..715fa2f4
--- /dev/null
+++ b/src/card/CCardSubtitle.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CCardSubtitle
+
+const CCardSubtitle = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    'card-subtitle'
+  );
+
+  return (
+    <Tag {...attributes} className={classes} ref={innerRef} />
+  );
+
+}
+
+CCardSubtitle.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+CCardSubtitle.defaultProps = {
+  tag: 'h6'
+};
+
+export default CCardSubtitle;
diff --git a/src/card/CCardText.js b/src/card/CCardText.js
new file mode 100644
index 00000000..e169c34d
--- /dev/null
+++ b/src/card/CCardText.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CCardText
+
+const CCardText = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    'card-text'
+  );
+
+  return (
+    <Tag {...attributes} className={classes} ref={innerRef} />
+  );
+
+}
+
+CCardText.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+CCardText.defaultProps = {
+  tag: 'p'
+};
+
+export default CCardText;
diff --git a/src/card/CCardTitle.js b/src/card/CCardTitle.js
new file mode 100644
index 00000000..789754d1
--- /dev/null
+++ b/src/card/CCardTitle.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CCardTitle
+
+const CCardTitle = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    innerRef,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    'card-title'
+  );
+
+  return (
+    <Tag {...attributes} className={classes} ref={innerRef} />
+  );
+
+}
+
+CCardTitle.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+CCardTitle.defaultProps = {
+  tag: 'h4'
+};
+
+export default CCardTitle;
diff --git a/src/card/tests/CCard.test.js b/src/card/tests/CCard.test.js
new file mode 100644
index 00000000..448f8ecf
--- /dev/null
+++ b/src/card/tests/CCard.test.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCard from '../CCard'
+
+configure({ adapter: new Adapter() })
+
+describe('CCard', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCard/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCard
+        className='class-name'
+        color='warning'
+        textColor="primary"
+        borderColor='info'
+        align="left"
+        accentColor="danger"
+      >
+        CCard
+      </CCard>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardBody.test.js b/src/card/tests/CCardBody.test.js
new file mode 100644
index 00000000..7e6c775c
--- /dev/null
+++ b/src/card/tests/CCardBody.test.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardBody from '../CCardBody'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardBody', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardBody/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardBody
+        className='class-name'
+        color='warning'
+        textColor="primary"
+        borderColor="info"
+        align='right'
+      >
+        CCardBody
+      </CCardBody>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardFooter.test.js b/src/card/tests/CCardFooter.test.js
new file mode 100644
index 00000000..3f604983
--- /dev/null
+++ b/src/card/tests/CCardFooter.test.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardFooter from '../CCardFooter'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardFooter', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardFooter/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardFooter
+        className='class-name'
+        color='info'
+        textColor='primary'
+        borderColor="warning"
+        align="left"
+      >
+        CCardFooter
+      </CCardFooter>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardGroup.test.js b/src/card/tests/CCardGroup.test.js
new file mode 100644
index 00000000..f449eb85
--- /dev/null
+++ b/src/card/tests/CCardGroup.test.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardGroup from '../CCardGroup'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardGroup', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardGroup/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardGroup
+        className='class-name'
+        columns
+      >
+        CCardGroup
+      </CCardGroup>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly two', () => {
+    const componentCustomized = renderer.create(
+      <CCardGroup
+        className='class-name'
+        deck
+      >
+        CCardGroup
+      </CCardGroup>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardHeader.test.js b/src/card/tests/CCardHeader.test.js
new file mode 100644
index 00000000..3f3c0fa6
--- /dev/null
+++ b/src/card/tests/CCardHeader.test.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardHeader from '../CCardHeader'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardHeader', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardHeader/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardHeader
+        className='class-name'
+        color='warning'
+        textColor='info'
+        borderColor='danger'
+        align='left'
+      >
+        CCardHeader
+      </CCardHeader>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardImg.test.js b/src/card/tests/CCardImg.test.js
new file mode 100644
index 00000000..0603459e
--- /dev/null
+++ b/src/card/tests/CCardImg.test.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardImg from '../CCardImg'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardImg', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardImg/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardImg
+        className='class-name'
+        variant='bottom'
+      />
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardImgOverlay.test.js b/src/card/tests/CCardImgOverlay.test.js
new file mode 100644
index 00000000..02b76e0a
--- /dev/null
+++ b/src/card/tests/CCardImgOverlay.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardImgOverlay from '../CCardImgOverlay'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardImgOverlay', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardImgOverlay/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardImgOverlay
+        className='class-name'
+      >
+        CCardImgOverlay
+      </CCardImgOverlay>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardLink.test.js b/src/card/tests/CCardLink.test.js
new file mode 100644
index 00000000..cea13d69
--- /dev/null
+++ b/src/card/tests/CCardLink.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardLink from '../CCardLink'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardLink', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardLink/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardLink
+        className='class-name'
+      >
+        CCardLink
+      </CCardLink>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardSubtitle.test.js b/src/card/tests/CCardSubtitle.test.js
new file mode 100644
index 00000000..28f08fa0
--- /dev/null
+++ b/src/card/tests/CCardSubtitle.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardSubtitle from '../CCardSubtitle'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardSubtitle', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardSubtitle/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardSubtitle
+        className='class-name'
+      >
+        CCardSubtitle
+      </CCardSubtitle>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardText.test.js b/src/card/tests/CCardText.test.js
new file mode 100644
index 00000000..c3208614
--- /dev/null
+++ b/src/card/tests/CCardText.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardText from '../CCardText'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardText', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardText/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardText
+        className='class-name'
+      >
+        CCardText
+      </CCardText>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/CCardTitle.test.js b/src/card/tests/CCardTitle.test.js
new file mode 100644
index 00000000..fdb927b4
--- /dev/null
+++ b/src/card/tests/CCardTitle.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCardTitle from '../CCardTitle'
+
+configure({ adapter: new Adapter() })
+
+describe('CCardTitle', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCardTitle/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCardTitle
+        className='class-name'
+      >
+        CCardTitle
+      </CCardTitle>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/card/tests/__snapshots__/CCard.test.js.snap b/src/card/tests/__snapshots__/CCard.test.js.snap
new file mode 100644
index 00000000..24748beb
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCard.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCard renders basic wrapper correctly 1`] = `
+<div
+  className="card"
+/>
+`;
+
+exports[`CCard renders customized wrapper correctly 1`] = `
+<div
+  className="class-name card text-left text-primary bg-warning border-info card-accent-danger"
+>
+  CCard
+</div>
+`;
diff --git a/src/card/tests/__snapshots__/CCardBody.test.js.snap b/src/card/tests/__snapshots__/CCardBody.test.js.snap
new file mode 100644
index 00000000..f3d713a4
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardBody.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardBody renders basic wrapper correctly 1`] = `
+<div
+  className="card-body"
+/>
+`;
+
+exports[`CCardBody renders customized wrapper correctly 1`] = `
+<div
+  className="class-name card-body text-right text-primary bg-warning border-info"
+>
+  CCardBody
+</div>
+`;
diff --git a/src/card/tests/__snapshots__/CCardFooter.test.js.snap b/src/card/tests/__snapshots__/CCardFooter.test.js.snap
new file mode 100644
index 00000000..8b3fa81e
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardFooter.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardFooter renders basic wrapper correctly 1`] = `
+<footer
+  className="card-footer"
+/>
+`;
+
+exports[`CCardFooter renders customized wrapper correctly 1`] = `
+<footer
+  className="class-name card-footer text-left text-primary bg-info border-warning"
+>
+  CCardFooter
+</footer>
+`;
diff --git a/src/card/tests/__snapshots__/CCardGroup.test.js.snap b/src/card/tests/__snapshots__/CCardGroup.test.js.snap
new file mode 100644
index 00000000..1d93c6c7
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardGroup.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardGroup renders basic wrapper correctly 1`] = `
+<div
+  className="card-group"
+/>
+`;
+
+exports[`CCardGroup renders customized wrapper correctly 1`] = `
+<div
+  className="card-columns class-name"
+>
+  CCardGroup
+</div>
+`;
+
+exports[`CCardGroup renders customized wrapper correctly two 1`] = `
+<div
+  className="card-deck class-name"
+>
+  CCardGroup
+</div>
+`;
diff --git a/src/card/tests/__snapshots__/CCardHeader.test.js.snap b/src/card/tests/__snapshots__/CCardHeader.test.js.snap
new file mode 100644
index 00000000..0a1364c8
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardHeader.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardHeader renders basic wrapper correctly 1`] = `
+<header
+  className="card-header"
+/>
+`;
+
+exports[`CCardHeader renders customized wrapper correctly 1`] = `
+<header
+  className="class-name card-header text-left text-info bg-warning border-danger"
+>
+  CCardHeader
+</header>
+`;
diff --git a/src/card/tests/__snapshots__/CCardImg.test.js.snap b/src/card/tests/__snapshots__/CCardImg.test.js.snap
new file mode 100644
index 00000000..c810d75d
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardImg.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardImg renders basic wrapper correctly 1`] = `
+<svg
+  className="card-img"
+  style={
+    Object {
+      "backgroundColor": "transparent",
+    }
+  }
+/>
+`;
+
+exports[`CCardImg renders customized wrapper correctly 1`] = `
+<svg
+  className="card-img-bottom class-name"
+  style={
+    Object {
+      "backgroundColor": "transparent",
+    }
+  }
+/>
+`;
diff --git a/src/card/tests/__snapshots__/CCardImgOverlay.test.js.snap b/src/card/tests/__snapshots__/CCardImgOverlay.test.js.snap
new file mode 100644
index 00000000..11b1e6b4
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardImgOverlay.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardImgOverlay renders basic wrapper correctly 1`] = `
+<div
+  className="card-img-overlay"
+/>
+`;
+
+exports[`CCardImgOverlay renders customized wrapper correctly 1`] = `
+<div
+  className="class-name card-img-overlay"
+>
+  CCardImgOverlay
+</div>
+`;
diff --git a/src/card/tests/__snapshots__/CCardLink.test.js.snap b/src/card/tests/__snapshots__/CCardLink.test.js.snap
new file mode 100644
index 00000000..84fff310
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardLink.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardLink renders basic wrapper correctly 1`] = `
+<a
+  className="card-link"
+  href="#"
+  onClick={[Function]}
+  rel={null}
+/>
+`;
+
+exports[`CCardLink renders customized wrapper correctly 1`] = `
+<a
+  className="card-link class-name"
+  href="#"
+  onClick={[Function]}
+  rel={null}
+>
+  CCardLink
+</a>
+`;
diff --git a/src/card/tests/__snapshots__/CCardSubtitle.test.js.snap b/src/card/tests/__snapshots__/CCardSubtitle.test.js.snap
new file mode 100644
index 00000000..f18e82a2
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardSubtitle.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardSubtitle renders basic wrapper correctly 1`] = `
+<h6
+  className="card-subtitle"
+/>
+`;
+
+exports[`CCardSubtitle renders customized wrapper correctly 1`] = `
+<h6
+  className="class-name card-subtitle"
+>
+  CCardSubtitle
+</h6>
+`;
diff --git a/src/card/tests/__snapshots__/CCardText.test.js.snap b/src/card/tests/__snapshots__/CCardText.test.js.snap
new file mode 100644
index 00000000..8611b0a1
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardText.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardText renders basic wrapper correctly 1`] = `
+<p
+  className="card-text"
+/>
+`;
+
+exports[`CCardText renders customized wrapper correctly 1`] = `
+<p
+  className="class-name card-text"
+>
+  CCardText
+</p>
+`;
diff --git a/src/card/tests/__snapshots__/CCardTitle.test.js.snap b/src/card/tests/__snapshots__/CCardTitle.test.js.snap
new file mode 100644
index 00000000..d503ff46
--- /dev/null
+++ b/src/card/tests/__snapshots__/CCardTitle.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCardTitle renders basic wrapper correctly 1`] = `
+<h4
+  className="card-title"
+/>
+`;
+
+exports[`CCardTitle renders customized wrapper correctly 1`] = `
+<h4
+  className="class-name card-title"
+>
+  CCardTitle
+</h4>
+`;
diff --git a/src/carousel/CCarousel.js b/src/carousel/CCarousel.js
new file mode 100644
index 00000000..d03217d2
--- /dev/null
+++ b/src/carousel/CCarousel.js
@@ -0,0 +1,89 @@
+import React, { useState, useRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export const Context = React.createContext({});
+
+//component - CoreUI / CCarousel
+
+const CCarousel = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    autoSlide,
+    activeIndex,
+    animate,
+    onSlideChange,
+    ...attributes
+  } = props;
+
+  const [state, setState] = useState([null, activeIndex])
+  const [itemNumber, setItemNumber] = useState(null)
+  const [animating, setAnimating] = useState()
+
+  useEffect(() => {
+    setState([state[1], activeIndex])
+  }, [activeIndex])
+
+  const timeout = useRef()
+
+  const setNext = () => {
+    reset()
+    if (autoSlide) {
+      timeout.current = setTimeout(() => nextItem(), autoSlide)
+    } 
+  }
+  const reset = () => clearTimeout(timeout.current)
+  const nextItem = () => {
+    setState([state[1], itemNumber === state[1] + 1 ? 0 : state[1] + 1, 'next'])
+  }
+
+  useEffect(() => {
+    onSlideChange && onSlideChange(state[1])
+    setNext()
+    return () => reset()
+  }, [state])
+
+
+  const classes = classNames('carousel', className)
+  return (
+    <div
+      className={classes}
+      onMouseEnter={reset}
+      onMouseLeave={setNext}
+      {...attributes}
+      ref={innerRef}
+    >
+      <Context.Provider value={{
+        state,
+        setState,
+        animate,
+        itemNumber,
+        setItemNumber,
+        animating,
+        setAnimating
+      }}>
+        {props.children}
+      </Context.Provider>
+    </div>
+  )
+}
+
+CCarousel.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  children: PropTypes.array,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  activeIndex: PropTypes.number,
+  autoSlide: PropTypes.number,
+  animate: PropTypes.bool,
+  onSlideChange: PropTypes.func
+};
+
+CCarousel.defaultProps = {
+  activeIndex: 0
+};
+
+export default CCarousel
diff --git a/src/carousel/CCarouselCaption.js b/src/carousel/CCarouselCaption.js
new file mode 100644
index 00000000..3c83079b
--- /dev/null
+++ b/src/carousel/CCarouselCaption.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CCarouselCaption
+
+const CCarouselCaption = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    'carousel-caption',
+    className
+  )
+
+  return (
+    <div 
+      className={classes} 
+      {...attributes} 
+      ref={innerRef}
+    />
+  )
+}
+
+CCarouselCaption.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+export default CCarouselCaption
diff --git a/src/carousel/CCarouselControl.js b/src/carousel/CCarouselControl.js
new file mode 100644
index 00000000..ab35d1da
--- /dev/null
+++ b/src/carousel/CCarouselControl.js
@@ -0,0 +1,64 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { Context } from './CCarousel'
+
+//component - CoreUI / CCarouselControl
+
+const CCarouselControl = props => {
+
+  const {
+    className,
+    children,
+    //
+    innerRef,
+    direction,
+    ...attributes
+  } = props
+
+  const { state, setState, itemNumber, animating } = useContext(Context)
+
+  const onClick = () => {
+    if (animating) {
+      return
+    }
+    let newIdx
+    if (direction === 'next') {
+      newIdx = itemNumber === state[1] + 1 ? 0 : state[1] + 1
+    } else {
+      newIdx = state[1] === 0 ? itemNumber - 1 : state[1] - 1
+    }
+    setState([state[1], newIdx, direction])
+  }
+
+  //render
+
+  const anchorClasses = classNames(
+    `carousel-control-${direction}`, className,
+  )
+
+  return (
+    <a
+      className={anchorClasses}
+      {...attributes}
+      onClick={onClick}
+      ref={innerRef}
+    >
+      { children || <span 
+        className={`carousel-control-${direction}-icon`} 
+        aria-label={direction} 
+      />}
+    </a>
+  )
+}
+
+CCarouselControl.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  children: PropTypes.node,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  direction: PropTypes.oneOf(['prev', 'next']).isRequired,
+};
+
+export default CCarouselControl
diff --git a/src/carousel/CCarouselIndicators.js b/src/carousel/CCarouselIndicators.js
new file mode 100644
index 00000000..7c6e57b0
--- /dev/null
+++ b/src/carousel/CCarouselIndicators.js
@@ -0,0 +1,58 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Context } from './CCarousel'
+//component - CoreUI / CCarouselIndicators
+
+const CCarouselIndicators = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    indicatorsClass,
+    ...attributes
+  } = props
+
+  const { itemNumber, state, setState, animating } = useContext(Context)
+
+  //render
+  const listClasses = classNames(
+    indicatorsClass, className
+  )
+
+  const indicators = Array.from({length: itemNumber}, (_, i) => i).map(key => {
+    return (
+      <li
+        key={`indicator${key}`}
+        onClick={() => {
+          !animating && key !== state[1] && setState([state[1], key])
+        }}
+        className={state[1] === key ? 'active' : ''}
+      />)
+  })
+
+  return (
+    <ol 
+      className={listClasses}
+      {...attributes}
+      ref={innerRef}
+    >
+      {indicators}
+    </ol>
+  )
+}
+
+CCarouselIndicators.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  indicatorsClass: PropTypes.string
+};
+
+CCarouselIndicators.defaultProps = {
+  indicatorsClass: 'carousel-indicators'
+};
+
+export default CCarouselIndicators
diff --git a/src/carousel/CCarouselInner.js b/src/carousel/CCarouselInner.js
new file mode 100644
index 00000000..95d3ce01
--- /dev/null
+++ b/src/carousel/CCarouselInner.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CCarouselInner
+
+const CCarouselInner = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    'carousel-inner',
+    className
+  )
+
+  return (
+    <div 
+      className={classes} 
+      {...attributes} 
+      ref={innerRef}
+    />
+  )
+}
+
+CCarouselInner.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+export default CCarouselInner
diff --git a/src/carousel/CCarouselItem.js b/src/carousel/CCarouselItem.js
new file mode 100644
index 00000000..83dc80ce
--- /dev/null
+++ b/src/carousel/CCarouselItem.js
@@ -0,0 +1,141 @@
+import React, { useState, useContext, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
+import { Context } from './CCarousel'
+
+//component - CoreUI / CCarouselItem
+const getIndex = (el) => Array.from(el.parentNode.children).indexOf(el)
+
+const getDirection = (state) => {
+  if (state[2]) {
+    return state[2] === 'next' ? 'right' : 'left'
+  } else {
+    return state[1] > state[0] ? 'right' : 'left'
+  }
+}
+
+const CCarouselItem = props => {
+
+  const {
+    children,
+    className,
+    innerRef,
+    ...attributes
+  } = props
+
+  const {
+    animate,
+    state,
+    itemNumber,
+    setItemNumber,
+    animating,
+    setAnimating
+  } = useContext(Context)
+
+  const ref = typeof innerRef === 'object' ? innerRef : useRef()
+  typeof innerRef === 'function' && innerRef(ref)
+
+  const [isIn, setIsIn] = useState()
+
+  useEffect(() => {
+    if (!itemNumber) {
+      setItemNumber(ref.current.parentNode.children.length)
+    }
+    setIsIn(state[1] === getIndex(ref.current))
+  }, [state])
+
+  const onEnter = () => {
+    setAnimating(false)
+  }
+
+  const onEntering = () => {
+    /* eslint-disable no-unused-vars */
+    const offsetHeight = ref.current.offsetHeight
+    setAnimating(true)
+    /* eslint-enable no-unused-vars */
+  }
+
+  const onExit = () => {
+    setAnimating(false)
+  }
+
+  const onExiting = () => {
+    setAnimating(true)
+  }
+
+  const onExited = () => {
+    setAnimating(false)
+  }
+
+  // const nodeRef = React.useRef()
+
+  //render
+  if (!animate || state[0] === null) {
+    const itemClasses = classNames(
+      'carousel-item',
+      isIn && 'active',
+      className,
+    )
+    return (
+      <div 
+        className={itemClasses} 
+        ref={ref}
+        {...attributes}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <Transition
+      timeout={600}
+      in={isIn}
+      onEnter={onEnter}
+      onEntering={onEntering}
+      onExit={onExit}
+      onExiting={onExiting}
+      onExited={onExited}
+      nodeRef={ref}
+    >
+      {(status) => {
+        const direction = getDirection(state)
+        const isActive = (status === 'entered') || (status === 'exiting')
+        const directionClassName = (status === 'entering' || status === 'exiting') &&
+          animating &&
+          (direction === 'right' ? 'carousel-item-left' : 'carousel-item-right')
+
+        const orderClassName = (status === 'entering') &&
+          (direction === 'right' ? 'carousel-item-next' : 'carousel-item-prev')
+
+        const itemClasses = classNames(
+          'carousel-item',
+          isActive && 'active',
+          directionClassName,
+          orderClassName,
+          className,
+        )
+
+        return (
+          <div 
+            className={itemClasses} 
+            ref={ref}
+            {...attributes}
+          >
+            {children}
+          </div>
+        )
+      }}
+    </Transition>
+  )
+
+}
+
+CCarouselItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+}
+
+export default CCarouselItem
diff --git a/src/carousel/tests/CCarousel.test.js b/src/carousel/tests/CCarousel.test.js
new file mode 100644
index 00000000..4520672c
--- /dev/null
+++ b/src/carousel/tests/CCarousel.test.js
@@ -0,0 +1,90 @@
+import React from 'react'
+import { configure, mount, shallow } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCarousel from '../CCarousel'
+import CCarouselIndicators from '../CCarouselIndicators'
+import CCarouselInner from '../CCarouselInner'
+import CCarouselControl from '../CCarouselControl'
+import CCarouselItem from '../CCarouselItem'
+import CCarouselCaption from '../CCarouselCaption'
+
+configure({ adapter: new Adapter() })
+
+describe('CCarousel', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCarousel/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCarousel
+        className='class-name'
+        autoSlide={100}
+        activeIndex={1}
+        animate
+      >
+      </CCarousel>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('render full carousel', () => {
+    const component = renderer.create(
+      <CCarousel activeIndex={0}>
+        <CCarouselIndicators/>
+        <CCarouselInner>
+          <CCarouselItem>
+            Slide 1
+            <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+          </CCarouselItem>
+          <CCarouselItem>
+            Slide 2
+            <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+          </CCarouselItem>
+          <CCarouselItem>
+            Slide 3
+            <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+          </CCarouselItem>
+        </CCarouselInner>
+        <CCarouselControl direction="prev"/>
+        <CCarouselControl direction="next"/>
+      </CCarousel>
+    );
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('action on click carousel control', () => {
+    const component = mount(
+      <CCarousel activeIndex={0}>
+        <CCarouselIndicators/>
+        <CCarouselInner>
+          <CCarouselItem>
+            Slide 1
+            <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+          </CCarouselItem>
+          <CCarouselItem>
+            Slide 2
+            <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+          </CCarouselItem>
+          <CCarouselItem>
+            Slide 3
+            <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+          </CCarouselItem>
+        </CCarouselInner>
+        <CCarouselControl direction="prev"/>
+        <CCarouselControl direction="next"/>
+      </CCarousel>
+    );
+    component.find('a').at(1).simulate('click')
+    expect(component.find('.carousel-item').at(0).hasClass('active')).toBe(false)
+    expect(component.find('.carousel-item').at(1).hasClass('active')).toBe(true)
+    expect(component.find('.carousel-item').at(2).hasClass('active')).toBe(false)
+    component.find('a').at(0).simulate('click')
+    expect(component.find('.carousel-item').at(0).hasClass('active')).toBe(true)
+    expect(component.find('.carousel-item').at(1).hasClass('active')).toBe(false)
+    expect(component.find('.carousel-item').at(2).hasClass('active')).toBe(false)
+  })
+})
diff --git a/src/carousel/tests/CCarouselCaption.test.js b/src/carousel/tests/CCarouselCaption.test.js
new file mode 100644
index 00000000..60c73d79
--- /dev/null
+++ b/src/carousel/tests/CCarouselCaption.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCarouselCaption from '../CCarouselCaption'
+
+configure({ adapter: new Adapter() })
+
+describe('CCarouselCaption', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCarouselCaption/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCarouselCaption
+        className='class-name'
+      >
+        CCarouselCaption
+      </CCarouselCaption>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/carousel/tests/CCarouselControl.test.js b/src/carousel/tests/CCarouselControl.test.js
new file mode 100644
index 00000000..8052c241
--- /dev/null
+++ b/src/carousel/tests/CCarouselControl.test.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import { configure, mount, shallow } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCarouselControl from '../CCarouselControl'
+
+configure({ adapter: new Adapter() })
+
+describe('CCarouselControl', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCarouselControl direction={'next'}/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCarouselControl
+        className='class-name'
+        direction='prev'
+      />
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/carousel/tests/CCarouselIndicators.test.js b/src/carousel/tests/CCarouselIndicators.test.js
new file mode 100644
index 00000000..4cf9c681
--- /dev/null
+++ b/src/carousel/tests/CCarouselIndicators.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCarouselIndicators from '../CCarouselIndicators'
+
+configure({ adapter: new Adapter() })
+
+describe('CCarouselIndicators', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCarouselIndicators/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCarouselIndicators
+        className='class-name'
+      />
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/carousel/tests/CCarouselInner.test.js b/src/carousel/tests/CCarouselInner.test.js
new file mode 100644
index 00000000..8d0214a2
--- /dev/null
+++ b/src/carousel/tests/CCarouselInner.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCarouselInner from '../CCarouselInner'
+
+configure({ adapter: new Adapter() })
+
+describe('CCarouselInner', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCarouselInner/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCarouselInner
+        className='class-name'
+      />
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/carousel/tests/CCarouselItem.test.js b/src/carousel/tests/CCarouselItem.test.js
new file mode 100644
index 00000000..6d61a0cf
--- /dev/null
+++ b/src/carousel/tests/CCarouselItem.test.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCarouselItem from '../CCarouselItem'
+
+configure({ adapter: new Adapter() })
+
+describe('CCarouselItem', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCarouselItem/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  /*
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCarouselItem
+        className='class-name'
+      >
+        CCarouselItem
+      </CCarouselItem>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  */
+})
diff --git a/src/carousel/tests/__snapshots__/CCarousel.test.js.snap b/src/carousel/tests/__snapshots__/CCarousel.test.js.snap
new file mode 100644
index 00000000..42db28c9
--- /dev/null
+++ b/src/carousel/tests/__snapshots__/CCarousel.test.js.snap
@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCarousel render full carousel 1`] = `
+<div
+  className="carousel"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <ol
+    className="carousel-indicators"
+  />
+  <div
+    className="carousel-inner"
+  >
+    <div
+      className="carousel-item"
+    >
+      Slide 1
+      <div
+        className="carousel-caption"
+      >
+        <h3>
+          Slide 1
+        </h3>
+        <p>
+          Slide 1
+        </p>
+      </div>
+    </div>
+    <div
+      className="carousel-item"
+    >
+      Slide 2
+      <div
+        className="carousel-caption"
+      >
+        <h3>
+          Slide 2
+        </h3>
+        <p>
+          Slide 2
+        </p>
+      </div>
+    </div>
+    <div
+      className="carousel-item"
+    >
+      Slide 3
+      <div
+        className="carousel-caption"
+      >
+        <h3>
+          Slide 3
+        </h3>
+        <p>
+          Slide 3
+        </p>
+      </div>
+    </div>
+  </div>
+  <a
+    className="carousel-control-prev"
+    onClick={[Function]}
+  >
+    <span
+      aria-label="prev"
+      className="carousel-control-prev-icon"
+    />
+  </a>
+  <a
+    className="carousel-control-next"
+    onClick={[Function]}
+  >
+    <span
+      aria-label="next"
+      className="carousel-control-next-icon"
+    />
+  </a>
+</div>
+`;
+
+exports[`CCarousel renders basic wrapper correctly 1`] = `
+<div
+  className="carousel"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+/>
+`;
+
+exports[`CCarousel renders customized wrapper correctly 1`] = `
+<div
+  className="carousel class-name"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+/>
+`;
diff --git a/src/carousel/tests/__snapshots__/CCarouselCaption.test.js.snap b/src/carousel/tests/__snapshots__/CCarouselCaption.test.js.snap
new file mode 100644
index 00000000..f3681791
--- /dev/null
+++ b/src/carousel/tests/__snapshots__/CCarouselCaption.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCarouselCaption renders basic wrapper correctly 1`] = `
+<div
+  className="carousel-caption"
+/>
+`;
+
+exports[`CCarouselCaption renders customized wrapper correctly 1`] = `
+<div
+  className="carousel-caption class-name"
+>
+  CCarouselCaption
+</div>
+`;
diff --git a/src/carousel/tests/__snapshots__/CCarouselControl.test.js.snap b/src/carousel/tests/__snapshots__/CCarouselControl.test.js.snap
new file mode 100644
index 00000000..8afc012b
--- /dev/null
+++ b/src/carousel/tests/__snapshots__/CCarouselControl.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCarouselControl renders basic wrapper correctly 1`] = `
+<a
+  className="carousel-control-next"
+  onClick={[Function]}
+>
+  <span
+    aria-label="next"
+    className="carousel-control-next-icon"
+  />
+</a>
+`;
+
+exports[`CCarouselControl renders customized wrapper correctly 1`] = `
+<a
+  className="carousel-control-prev class-name"
+  onClick={[Function]}
+>
+  <span
+    aria-label="prev"
+    className="carousel-control-prev-icon"
+  />
+</a>
+`;
diff --git a/src/carousel/tests/__snapshots__/CCarouselIndicators.test.js.snap b/src/carousel/tests/__snapshots__/CCarouselIndicators.test.js.snap
new file mode 100644
index 00000000..71cc3073
--- /dev/null
+++ b/src/carousel/tests/__snapshots__/CCarouselIndicators.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCarouselIndicators renders basic wrapper correctly 1`] = `
+<ol
+  className="carousel-indicators"
+/>
+`;
+
+exports[`CCarouselIndicators renders customized wrapper correctly 1`] = `
+<ol
+  className="carousel-indicators class-name"
+/>
+`;
diff --git a/src/carousel/tests/__snapshots__/CCarouselInner.test.js.snap b/src/carousel/tests/__snapshots__/CCarouselInner.test.js.snap
new file mode 100644
index 00000000..d35accb7
--- /dev/null
+++ b/src/carousel/tests/__snapshots__/CCarouselInner.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCarouselInner renders basic wrapper correctly 1`] = `
+<div
+  className="carousel-inner"
+/>
+`;
+
+exports[`CCarouselInner renders customized wrapper correctly 1`] = `
+<div
+  className="carousel-inner class-name"
+/>
+`;
diff --git a/src/carousel/tests/__snapshots__/CCarouselItem.test.js.snap b/src/carousel/tests/__snapshots__/CCarouselItem.test.js.snap
new file mode 100644
index 00000000..e6243c4d
--- /dev/null
+++ b/src/carousel/tests/__snapshots__/CCarouselItem.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCarouselItem renders basic wrapper correctly 1`] = `
+<div
+  className="carousel-item"
+/>
+`;
diff --git a/src/collapse/CCollapse.js b/src/collapse/CCollapse.js
new file mode 100644
index 00000000..dd65e358
--- /dev/null
+++ b/src/collapse/CCollapse.js
@@ -0,0 +1,101 @@
+import React, { useState, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
+
+const getTransitionClass = s => {
+  return s === 'entering' ? 'collapsing' : 
+         s === 'entered' ? 'collapse show' :
+         s === 'exiting' ? 'collapsing' : 'collapse'
+}
+
+//component - CoreUI / CCollapse
+const CCollapse = props => {
+
+  const {
+    children,
+    className,
+    //
+    innerRef,
+    show,
+    navbar,
+    ...attributes
+  } = props
+
+  const [height, setHeight] = useState()
+
+  const ref = typeof innerRef === 'object' ? innerRef : useRef()
+  typeof innerRef === 'function' && innerRef(ref)
+
+  const onEntering = () => {
+    setHeight(ref.current.scrollHeight)
+  }
+
+  const onEntered = () => {
+    setHeight(null)
+  }
+
+  const onExit = () => {
+    setHeight(ref.current.scrollHeight)
+  }
+
+  const onExiting = () => {
+    const _unused = ref.current.offsetHeight // eslint-disable-line no-unused-vars
+    setHeight(0)
+  }
+
+  const onExited = () => {
+    setHeight(null)
+  }
+
+  //render
+  return (
+    <Transition
+      in={show}
+      timeout={350}
+      appear={false}
+      enter={true}
+      exit={true}
+      onEntering={onEntering}
+      onEntered={onEntered}
+      onExit={onExit}
+      onExiting={onExiting}
+      onExited={onExited}
+      nodeRef={ref}
+    >
+      {(status) => {
+        let collapseClass = getTransitionClass(status)
+        const classes = classNames(
+          className,
+          collapseClass,
+          navbar && 'navbar-collapse'
+        )
+        const style = height === null ? null : { height }
+        return (
+          <div
+            {...attributes}
+            style={{ ...attributes.style, ...style }}
+            className={classes}
+            ref={ref}
+          >
+            {children}
+          </div>
+        )
+      }}
+    </Transition>
+  )
+}
+
+CCollapse.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  show: PropTypes.bool,
+  navbar: PropTypes.bool
+}
+
+export default CCollapse
diff --git a/src/collapse/tests/CCollapse.test.js b/src/collapse/tests/CCollapse.test.js
new file mode 100644
index 00000000..8439632c
--- /dev/null
+++ b/src/collapse/tests/CCollapse.test.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCollapse from '../CCollapse'
+
+configure({ adapter: new Adapter() })
+
+describe('CCollapse', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCollapse/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCollapse
+        className='class-name'
+        show
+        navbar
+      >
+        CCollapse
+      </CCollapse>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/collapse/tests/__snapshots__/CCollapse.test.js.snap b/src/collapse/tests/__snapshots__/CCollapse.test.js.snap
new file mode 100644
index 00000000..b701c040
--- /dev/null
+++ b/src/collapse/tests/__snapshots__/CCollapse.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCollapse renders basic wrapper correctly 1`] = `
+<div
+  className="collapse"
+  style={
+    Object {
+      "height": undefined,
+    }
+  }
+/>
+`;
+
+exports[`CCollapse renders customized wrapper correctly 1`] = `
+<div
+  className="class-name collapse show navbar-collapse"
+  style={
+    Object {
+      "height": undefined,
+    }
+  }
+>
+  CCollapse
+</div>
+`;
diff --git a/src/create-element/CCreateElement.js b/src/create-element/CCreateElement.js
new file mode 100644
index 00000000..0573bfb1
--- /dev/null
+++ b/src/create-element/CCreateElement.js
@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+
+//component - CoreUI / CCreateElement
+const CCreateElement = ({ items, components = {} }) => {
+  const renderItem = (item, i) => {
+    const { _tag, _children, ...rest } = item
+    const Tag = components[_tag] || _tag
+    const children = _children ? _children.map((child, i) => {
+      return typeof child === 'object' ? renderItem(child, i) : child
+    }) : ''
+    return <Tag key={Tag + i} {...rest}>{children}</Tag>
+  }
+
+  const generatedItems = useMemo(() => {
+    return items && items.map((item, i) => renderItem(item, i))
+  }, [JSON.stringify(items)])
+
+  return (
+    <React.Fragment>
+      {generatedItems}
+    </React.Fragment>
+  )
+}
+
+CCreateElement.propTypes = {
+  items: PropTypes.array.isRequired,
+  components: PropTypes.object
+};
+
+export default CCreateElement
\ No newline at end of file
diff --git a/src/create-element/tests/CCreateElement.test.js b/src/create-element/tests/CCreateElement.test.js
new file mode 100644
index 00000000..b38c286d
--- /dev/null
+++ b/src/create-element/tests/CCreateElement.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCreateElement from '../CCreateElement'
+
+configure({ adapter: new Adapter() })
+
+describe('CCreateElement', () => {
+  it('renders basic wrapper correctly', () => {
+    const items = [
+      {
+        _tag: 'CSidebarNavItem',
+        name: 'Dashboard',
+        to: '/dashboard',
+        icon: 'cil-speedometer',
+        badge: {
+          color: 'info',
+          text: 'NEW',
+        }
+      },
+    ]
+    const component = renderer.create(<CCreateElement items={items} ></CCreateElement>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/create-element/tests/__snapshots__/CCreateElement.test.js.snap b/src/create-element/tests/__snapshots__/CCreateElement.test.js.snap
new file mode 100644
index 00000000..ec2fb86a
--- /dev/null
+++ b/src/create-element/tests/__snapshots__/CCreateElement.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCreateElement renders basic wrapper correctly 1`] = `
+<CSidebarNavItem
+  badge={
+    Object {
+      "color": "info",
+      "text": "NEW",
+    }
+  }
+  icon="cil-speedometer"
+  name="Dashboard"
+  to="/dashboard"
+>
+  
+</CSidebarNavItem>
+`;
diff --git a/src/dropdown/CDropdown.js b/src/dropdown/CDropdown.js
new file mode 100644
index 00000000..23e239b9
--- /dev/null
+++ b/src/dropdown/CDropdown.js
@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+export const Context = React.createContext({})
+
+//component - CoreUI / CDropdown
+
+const CDropdown = props => {
+
+  const {
+    className,
+    tag,
+    //
+    innerRef,
+    inNav,
+    ...attributes
+  } = props
+
+
+  const [reference, setReference] = useState()
+  const [isOpen, setIsOpen] = useState()
+  const [split, setSplit] = useState()
+  const [placement, setPlacement] = useState('')
+
+  const carretClass = placement.includes('top') ? 'dropup' :
+    placement.includes('right') ? 'dropright' :
+    placement.includes('left') ? 'dropleft' : 'dropdown'
+
+  const Tag = tag || (inNav ? 'li' : 'div')
+  const classes = classNames(
+    className,
+    carretClass,
+    { 'nav-item': inNav, 'btn-group': split, 'show': isOpen }
+  )
+
+
+  return (
+    <Context.Provider value={{
+      isOpen,
+      setIsOpen,
+      reference,
+      setReference,
+      inNav,
+      setSplit,
+      setPlacement
+    }}>
+      <Tag
+        className={classes}
+        {...attributes}
+        ref={innerRef}
+      />
+    </Context.Provider>
+  )
+}
+
+CDropdown.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  inNav: PropTypes.bool
+}
+
+export default CDropdown
diff --git a/src/dropdown/CDropdownDivider.js b/src/dropdown/CDropdownDivider.js
new file mode 100644
index 00000000..7a8ff6f3
--- /dev/null
+++ b/src/dropdown/CDropdownDivider.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import CDropdownItem from './CDropdownItem'
+
+//component - CoreUI / CDropdownDivider
+
+const CDropdownDivider = props => {
+
+  return (
+    <CDropdownItem {...props} divider/>
+  )
+}
+
+export default CDropdownDivider
\ No newline at end of file
diff --git a/src/dropdown/CDropdownHeader.js b/src/dropdown/CDropdownHeader.js
new file mode 100644
index 00000000..8fd14a3a
--- /dev/null
+++ b/src/dropdown/CDropdownHeader.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import CDropdownItem from './CDropdownItem'
+
+//component - CoreUI / CDropdownHeader
+
+const CDropdownHeader = props => {
+
+  return (
+    <CDropdownItem {...props} header/>
+  )
+}
+
+export default CDropdownHeader
diff --git a/src/dropdown/CDropdownItem.js b/src/dropdown/CDropdownItem.js
new file mode 100644
index 00000000..f798207f
--- /dev/null
+++ b/src/dropdown/CDropdownItem.js
@@ -0,0 +1,79 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import { Context } from './CDropdown'
+import CLink from '../link/CLink'
+
+//component - CoreUI / CDropdownItem
+const CDropdownItem = props => {
+
+  let {
+    tag,
+    className,
+    //
+    innerRef,
+    onClick,
+    color,
+    divider,
+    header,
+    active,
+    disabled,
+    ...rest
+  } = props
+
+  const { setIsOpen } = useContext(Context)
+
+  const isItem = !(header || divider)
+
+  const click = e => {
+    if (disabled) {
+      return
+    }
+    onClick && onClick(e)
+    isItem && setIsOpen(false)
+  }
+
+  //render
+  const tabIndex = isItem && !disabled ? null : -1
+  const role = tabIndex === null ? 'menuitem' : undefined
+  const Tag = tag || (!isItem ? 'div' : CLink)
+  const ref = { [`${typeof Tag === 'string' ? 'ref': 'innerRef'}`]: innerRef }
+
+  const classes = classNames(
+    className,
+    'dropdown-' + (header ? 'header' : divider ? 'divider' : 'item'),
+    { active },
+    color && 'bg-' + color,
+    disabled && Tag !== CLink && 'disabled'
+  )
+
+
+
+  return (
+    <Tag
+      className={classes}
+      tabIndex={tabIndex}
+      role={role}
+      disabled={disabled}
+      {...rest}
+      onClick={click}
+      {...ref}
+    />
+  )
+}
+
+CDropdownItem.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  color: PropTypes.string,
+  divider: PropTypes.bool,
+  header: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  active: PropTypes.bool
+}
+
+export default CDropdownItem
diff --git a/src/dropdown/CDropdownMenu.js b/src/dropdown/CDropdownMenu.js
new file mode 100644
index 00000000..a3f7c43c
--- /dev/null
+++ b/src/dropdown/CDropdownMenu.js
@@ -0,0 +1,110 @@
+import React, { useState, useEffect, useLayoutEffect, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Context } from './CDropdown'
+import { createPopper } from '@popperjs/core'
+
+//component - CoreUI / CDropdownMenu
+
+
+const CDropdownMenu = props => {
+
+  const {
+    className,
+    show,
+    placement,
+    modifiers,
+    innerRef,
+    ...rest
+  } = props
+
+  const { reference, isOpen, setIsOpen, setPlacement } = useContext(Context)
+  const [popperElement, setPopperElement] = useState(null)
+  const [popper, setPopper] = useState(null)
+
+  innerRef && innerRef(popperElement)
+
+  useEffect(() => {
+    setIsOpen(show)
+    setPlacement(placement)
+  }, [show, placement])
+
+  const classes = classNames(
+    className,
+    'dropdown-menu',
+    {
+      'show': isOpen,
+    }
+  )
+
+  useLayoutEffect(() => {
+    if (!reference) {
+      return
+    }
+    setPopper(createPopper(
+      reference,
+      popperElement,
+      {
+        placement,
+        modifiers: modifiers || []
+      }
+    ))
+   
+    return () => {
+      if (popper) {
+        popper.destroy()
+      }
+    }
+  }, [isOpen])
+
+  const checkClose = (e) => {
+    if ([reference, popperElement].every(el => !el.contains(e.target))) {
+      setIsOpen(false)
+    }
+  }
+
+  const onKeypress = e => e.keyCode == '27' && setIsOpen(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('click', checkClose)
+      document.addEventListener('keydown', onKeypress)
+    }
+    return () => {
+      document.removeEventListener('click', checkClose)
+      document.removeEventListener('keydown', onKeypress) 
+    }
+  }, [isOpen])
+
+  return (
+    <div
+      className={classes}
+      ref={setPopperElement}
+      role="menu"
+      aria-hidden={!isOpen}
+      {...rest}
+    />
+  )
+}
+
+
+CDropdownMenu.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  modifiers: PropTypes.array,
+  show: PropTypes.bool,
+  placement: PropTypes.oneOf([
+    '', 'top-end', 'top', 'top-start',
+    'bottom-end', 'bottom', 'bottom-start',
+    'right-start', 'right', 'right-end',
+    'left-start', 'left', 'left-end'
+  ])
+}
+
+CDropdownMenu.defaultProps = {
+  placement: 'bottom-start',
+}
+
+export default CDropdownMenu
diff --git a/src/dropdown/CDropdownToggle.js b/src/dropdown/CDropdownToggle.js
new file mode 100644
index 00000000..d1bc6866
--- /dev/null
+++ b/src/dropdown/CDropdownToggle.js
@@ -0,0 +1,106 @@
+import React, { useContext, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import CButton from '../button/CButton'
+import CLink from '../link/CLink'
+import { Context } from './CDropdown'
+
+//component - CoreUI / CDropdownToggle
+
+const CDropdownToggle = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    onClick,
+    caret,
+    split,
+    tag,
+    ...attributes
+  } = props
+
+  const {
+    reference,
+    setReference,
+    isOpen,
+    setIsOpen,
+    inNav,
+    setSplit
+  } = useContext(Context)
+  
+  innerRef && innerRef(reference)
+
+  useEffect(() => {
+    setSplit(split)
+  })
+
+  const click = e => {
+    if (props.disabled) {
+      return
+    }
+    onClick && onClick(e)
+    setIsOpen(!isOpen)
+  }
+
+  const Tag = tag || (inNav ? CLink : CButton)
+
+  const classes = classNames(
+    className,
+    {
+      'dropdown-toggle': caret && !split,
+      'nav-link': inNav
+    }
+  )
+
+  const togglerAttrs = {
+    onClick: click,
+    'aria-expanded': isOpen ? 'true' : 'false',
+    'aria-haspopup': 'true',
+    'aria-label': 'Dropdown toggle',
+    [`${tag && typeof tag === 'string' ? 'ref' : 'innerRef'}`]: setReference,
+    'role': Tag === CButton ? null : 'button'
+  }
+
+  if (split) {
+    return (
+      <React.Fragment>
+        <CButton {...attributes}>
+          {props.children}
+        </CButton>
+        <CButton
+          className='dropdown-toggle dropdown-toggle-split'
+          {...togglerAttrs}
+          {...attributes}
+        >{''}</CButton>
+      </React.Fragment>
+    )
+  } else {
+    return (
+      <Tag
+        className={classes}
+        {...togglerAttrs}
+        {...attributes}
+      />
+    )
+  }
+}
+
+CDropdownToggle.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  caret: PropTypes.bool,
+  onClick: PropTypes.func,
+  split: PropTypes.bool,
+  disabled: PropTypes.bool
+}
+
+CDropdownToggle.defaultProps = {
+  caret: true
+}
+
+export default CDropdownToggle
diff --git a/src/dropdown/tests/CDropdown.test.js b/src/dropdown/tests/CDropdown.test.js
new file mode 100644
index 00000000..0e197a97
--- /dev/null
+++ b/src/dropdown/tests/CDropdown.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CDropdown from '../CDropdown'
+
+configure({ adapter: new Adapter() })
+
+describe('CDropdown', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CDropdown/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CDropdown
+        className='class-name'
+        inNav
+      >
+        CDropdown
+      </CDropdown>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/dropdown/tests/CDropdownDivider.test.js b/src/dropdown/tests/CDropdownDivider.test.js
new file mode 100644
index 00000000..4b01ae48
--- /dev/null
+++ b/src/dropdown/tests/CDropdownDivider.test.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CDropdownDivider from '../CDropdownDivider'
+
+configure({ adapter: new Adapter() })
+
+describe('CDropdownDivider', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CDropdownDivider/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/dropdown/tests/CDropdownHeader.test.js b/src/dropdown/tests/CDropdownHeader.test.js
new file mode 100644
index 00000000..326059e2
--- /dev/null
+++ b/src/dropdown/tests/CDropdownHeader.test.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CDropdownHeader from '../CDropdownHeader'
+
+configure({ adapter: new Adapter() })
+
+describe('CDropdownHeader', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CDropdownHeader/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/dropdown/tests/CDropdownItem.test.js b/src/dropdown/tests/CDropdownItem.test.js
new file mode 100644
index 00000000..1dd50962
--- /dev/null
+++ b/src/dropdown/tests/CDropdownItem.test.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CDropdownItem from '../CDropdownItem'
+import CDropdownMenu from '../CDropdownMenu'
+import CDropdownToggle from '../CDropdownToggle'
+import CDropdown from '../CDropdown'
+
+
+configure({ adapter: new Adapter() })
+
+describe('CDropdownItem', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CDropdownItem/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const onClick = () => {}
+    const componentCustomized = renderer.create(
+      <CDropdownItem
+        className='class-name'
+        onClick={onClick}
+        color='warning'
+        divider
+        header
+        active
+        disabled
+      >
+        CDropdownItem
+      </CDropdownItem>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('on click', () => {
+    const onClick = jest.fn();
+    const component = mount(
+      <CDropdown className="mt-2">
+        <CDropdownToggle caret color="info">
+          Dropdown button
+        </CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem
+            onClick={onClick}
+          >
+            CDropdownItem
+          </CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    );
+    component.find('a').simulate('click')
+    expect(onClick).toHaveBeenCalledTimes(1);
+  })
+  it('click on disabled', () => {
+    const onClick = jest.fn();
+    const component = mount(
+      <CDropdown className="mt-2">
+        <CDropdownToggle caret color="info">
+          Dropdown button
+        </CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem
+            onClick={onClick}
+            disabled
+          >
+            CDropdownItem
+          </CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    );
+    component.find('a').simulate('click')
+    expect(onClick).toHaveBeenCalledTimes(0);
+  })
+})
diff --git a/src/dropdown/tests/CDropdownMenu.test.js b/src/dropdown/tests/CDropdownMenu.test.js
new file mode 100644
index 00000000..df59d6b4
--- /dev/null
+++ b/src/dropdown/tests/CDropdownMenu.test.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+///import CDropdownItem from '../CDropdownItem'
+import CDropdownMenu from '../CDropdownMenu'
+//import CDropdownToggle from '../CDropdownToggle'
+//import CDropdown from '../CDropdown'
+
+configure({ adapter: new Adapter() })
+
+describe('CDropdownMenu', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CDropdownMenu>menu</CDropdownMenu>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  // todo
+  // it('renders customized wrapper correctly', () => {
+  //   const componentCustomized = renderer.create(
+  //     <CDropdownMenu
+  //       className='class-name'
+  //       placement='left'
+  //     >
+  //       CDropdownMenu
+  //     </CDropdownMenu>
+  //   );
+  //   let tree = componentCustomized.toJSON();
+  //   expect(tree).toMatchSnapshot()
+  // })
+})
diff --git a/src/dropdown/tests/CDropdownToggle.test.js b/src/dropdown/tests/CDropdownToggle.test.js
new file mode 100644
index 00000000..42ea6a54
--- /dev/null
+++ b/src/dropdown/tests/CDropdownToggle.test.js
@@ -0,0 +1,81 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CDropdownToggle from '../CDropdownToggle'
+import CDropdown from '../CDropdown'
+
+configure({ adapter: new Adapter() })
+
+describe('CDropdownToggle', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CDropdown><CDropdownToggle/></CDropdown>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CDropdown>
+        <CDropdownToggle
+          className='class-name'
+          caret
+          disabled
+        >
+          CDropdownToggle
+        </CDropdownToggle>
+      </CDropdown>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper witch split', () => {
+    const componentCustomized = renderer.create(
+      <CDropdown>
+        <CDropdownToggle
+          className='class-name'
+          caret
+          disabled
+          split
+        >
+          CDropdownToggle
+        </CDropdownToggle>
+      </CDropdown>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('on click', () => {
+    const onClick = jest.fn();
+    const component = mount(
+      <CDropdown>
+        <CDropdownToggle
+          className='class-name'
+          caret
+          onClick={onClick}
+        >
+          CDropdownToggle
+        </CDropdownToggle>
+      </CDropdown>
+    );
+    component.find('button').simulate('click')
+    expect(onClick).toHaveBeenCalledTimes(1);
+  })
+  it('click on disabled', () => {
+    const onClick = jest.fn();
+    const component = mount(
+      <CDropdown>
+        <CDropdownToggle
+          className='class-name'
+          caret
+          onClick={onClick}
+          disabled
+        >
+          CDropdownToggle
+        </CDropdownToggle>
+      </CDropdown>
+    );
+    component.find('button').simulate('click')
+    expect(onClick).toHaveBeenCalledTimes(0);
+  })
+})
diff --git a/src/dropdown/tests/__snapshots__/CDropdown.test.js.snap b/src/dropdown/tests/__snapshots__/CDropdown.test.js.snap
new file mode 100644
index 00000000..ed25ce1b
--- /dev/null
+++ b/src/dropdown/tests/__snapshots__/CDropdown.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdown renders basic wrapper correctly 1`] = `
+<div
+  className="dropdown"
+/>
+`;
+
+exports[`CDropdown renders customized wrapper correctly 1`] = `
+<li
+  className="class-name dropdown nav-item"
+>
+  CDropdown
+</li>
+`;
diff --git a/src/dropdown/tests/__snapshots__/CDropdownDivider.test.js.snap b/src/dropdown/tests/__snapshots__/CDropdownDivider.test.js.snap
new file mode 100644
index 00000000..53b2a90e
--- /dev/null
+++ b/src/dropdown/tests/__snapshots__/CDropdownDivider.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownDivider renders basic wrapper correctly 1`] = `
+<div
+  className="dropdown-divider"
+  onClick={[Function]}
+  tabIndex={-1}
+/>
+`;
diff --git a/src/dropdown/tests/__snapshots__/CDropdownHeader.test.js.snap b/src/dropdown/tests/__snapshots__/CDropdownHeader.test.js.snap
new file mode 100644
index 00000000..165b3cde
--- /dev/null
+++ b/src/dropdown/tests/__snapshots__/CDropdownHeader.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownHeader renders basic wrapper correctly 1`] = `
+<div
+  className="dropdown-header"
+  onClick={[Function]}
+  tabIndex={-1}
+/>
+`;
diff --git a/src/dropdown/tests/__snapshots__/CDropdownItem.test.js.snap b/src/dropdown/tests/__snapshots__/CDropdownItem.test.js.snap
new file mode 100644
index 00000000..72eb2b29
--- /dev/null
+++ b/src/dropdown/tests/__snapshots__/CDropdownItem.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownItem renders basic wrapper correctly 1`] = `
+<a
+  className="dropdown-item"
+  href="#"
+  onClick={[Function]}
+  rel={null}
+  role="menuitem"
+  tabIndex={null}
+/>
+`;
+
+exports[`CDropdownItem renders customized wrapper correctly 1`] = `
+<div
+  className="class-name dropdown-header active bg-warning disabled"
+  disabled={true}
+  onClick={[Function]}
+  tabIndex={-1}
+>
+  CDropdownItem
+</div>
+`;
diff --git a/src/dropdown/tests/__snapshots__/CDropdownMenu.test.js.snap b/src/dropdown/tests/__snapshots__/CDropdownMenu.test.js.snap
new file mode 100644
index 00000000..f6d12465
--- /dev/null
+++ b/src/dropdown/tests/__snapshots__/CDropdownMenu.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownMenu renders basic wrapper correctly 1`] = `
+<div
+  aria-hidden={true}
+  className="dropdown-menu"
+  role="menu"
+>
+  menu
+</div>
+`;
diff --git a/src/dropdown/tests/__snapshots__/CDropdownToggle.test.js.snap b/src/dropdown/tests/__snapshots__/CDropdownToggle.test.js.snap
new file mode 100644
index 00000000..ebd4f2d0
--- /dev/null
+++ b/src/dropdown/tests/__snapshots__/CDropdownToggle.test.js.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDropdownToggle renders basic wrapper correctly 1`] = `
+<div
+  className="dropdown"
+>
+  <button
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="Dropdown toggle"
+    className="dropdown-toggle btn"
+    onClick={[Function]}
+    role={null}
+    type="button"
+  />
+</div>
+`;
+
+exports[`CDropdownToggle renders customized wrapper correctly 1`] = `
+<div
+  className="dropdown"
+>
+  <button
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="Dropdown toggle"
+    className="class-name dropdown-toggle btn disabled"
+    disabled={true}
+    onClick={[Function]}
+    role={null}
+    type="button"
+  >
+    CDropdownToggle
+  </button>
+</div>
+`;
+
+exports[`CDropdownToggle renders customized wrapper witch split 1`] = `
+<div
+  className="dropdown btn-group"
+>
+  <button
+    className="btn disabled"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    CDropdownToggle
+  </button>
+  <button
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-label="Dropdown toggle"
+    className="dropdown-toggle dropdown-toggle-split btn disabled"
+    disabled={true}
+    onClick={[Function]}
+    role={null}
+    type="button"
+  >
+    
+  </button>
+</div>
+`;
diff --git a/src/element-cover/CElementCover.js b/src/element-cover/CElementCover.js
new file mode 100644
index 00000000..b9e51963
--- /dev/null
+++ b/src/element-cover/CElementCover.js
@@ -0,0 +1,99 @@
+import React, { useEffect, createRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CSpinner from '../spinner/CSpinner'
+
+//component - CoreUI / CElementCover
+const CElementCover = props => {
+
+  const {
+    className,
+    children,
+    //
+    innerRef,
+    boundaries,
+    opacity,
+    ...attributes
+  } = props
+
+  const [customBoundaries, setCustomBoundaries] = useState({})
+  const ref = createRef(null)
+  innerRef && innerRef(ref)
+
+  const getCustomBoundaries = () => {
+    if (!ref || !ref.current || !boundaries) {
+      return {}
+    }
+    const parent = ref.current.parentElement
+    const parentCoords = parent.getBoundingClientRect()
+    const customBoundaries = {}
+    boundaries.forEach(({sides, query}) => {
+      const element = parent.querySelector(query)
+      if (!element || !sides) {
+        return
+      }
+      const coords = element.getBoundingClientRect()
+      sides.forEach(side => {
+        const sideMargin = Math.abs(coords[side] - parentCoords[side])
+        customBoundaries[side] = sideMargin + 'px'
+      })
+    })
+    return customBoundaries
+  }
+
+  useEffect(() => {
+    setCustomBoundaries(getCustomBoundaries())
+  }, [JSON.stringify(getCustomBoundaries())])
+
+  //render
+  const classes = classNames(className)
+
+  const containerCoords = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    ...customBoundaries
+  }
+
+  const coverStyles = {
+    ...containerCoords,
+    position: 'absolute',
+    backgroundColor: `rgb(255,255,255,${opacity})`
+  }
+
+  return (
+    <div 
+      className={classes} 
+      style={coverStyles} 
+      {...attributes} 
+      ref={ref}
+    >
+      { children ||  
+        <div style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translateX(-50%) translateY(-50%)'
+        }}>       
+          <CSpinner grow size="lg" color="primary"/>
+        </div>
+      }
+    </div>
+  )
+}
+
+CElementCover.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  boundaries: PropTypes.array,
+  opacity: PropTypes.number
+};
+
+CElementCover.defaultProps = {
+  opacity: 0.4
+};
+
+export default CElementCover
\ No newline at end of file
diff --git a/src/element-cover/tests/CElementCover.test.js b/src/element-cover/tests/CElementCover.test.js
new file mode 100644
index 00000000..5a833c65
--- /dev/null
+++ b/src/element-cover/tests/CElementCover.test.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CElementCover from '../CElementCover'
+
+configure({ adapter: new Adapter() })
+
+describe('CElementCover', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CElementCover/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CElementCover
+        className='class-name'
+        opacity={0.5}
+      >
+        CElementCover
+      </CElementCover>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  /*
+  //nonsenso test
+  it('renders witch boundaries', () => {
+    const ref = (a) => { 
+      a['current'] = [];
+      a['current']['parentElement'] = {
+        getBoundingClientRect: (a) => {return a},
+        querySelector: (a) => {return null}
+      };
+      return a 
+    }
+    const boundaries = ['some-class'];
+    const component = renderer.create(
+      <CElementCover
+        className='class-name'
+        opacity={0.5}
+        boundaries={boundaries}
+        innerRef={ref}
+      >
+        CElementCover
+      </CElementCover>
+    );
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  */
+})
diff --git a/src/element-cover/tests/__snapshots__/CElementCover.test.js.snap b/src/element-cover/tests/__snapshots__/CElementCover.test.js.snap
new file mode 100644
index 00000000..2b67198b
--- /dev/null
+++ b/src/element-cover/tests/__snapshots__/CElementCover.test.js.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CElementCover renders basic wrapper correctly 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "backgroundColor": "rgb(255,255,255,0.4)",
+      "bottom": 0,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "left": "50%",
+        "position": "absolute",
+        "top": "50%",
+        "transform": "translateX(-50%) translateY(-50%)",
+      }
+    }
+  >
+    <div
+      aria-hidden="false"
+      aria-label="Loading"
+      className="spinner-grow spinner-grow-lg text-primary"
+      role="status"
+    />
+  </div>
+</div>
+`;
+
+exports[`CElementCover renders customized wrapper correctly 1`] = `
+<div
+  className="class-name"
+  style={
+    Object {
+      "backgroundColor": "rgb(255,255,255,0.5)",
+      "bottom": 0,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  CElementCover
+</div>
+`;
diff --git a/src/embed/CEmbed.js b/src/embed/CEmbed.js
new file mode 100644
index 00000000..d2bacce8
--- /dev/null
+++ b/src/embed/CEmbed.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CEmbed
+
+const CEmbed = props => {
+
+  const {
+    tag: Tag,
+    className,
+    innerRef,
+    //
+    ratio,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className, 'embed-responsive', `embed-responsive-${ratio}`
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CEmbed.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  ratio: PropTypes.oneOf(['21by9', '16by9', '4by3', '1by1']),
+};
+
+CEmbed.defaultProps = {
+  tag: 'div',
+  ratio: '16by9'
+}
+
+export default CEmbed
diff --git a/src/embed/CEmbedItem.js b/src/embed/CEmbedItem.js
new file mode 100644
index 00000000..b2a8498a
--- /dev/null
+++ b/src/embed/CEmbedItem.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CEmbedItem
+
+const CEmbedItem = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    'embed-responsive-item'
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CEmbedItem.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  type: PropTypes.oneOf(['iframe', 'embed', 'video', 'object', 'img'])
+};
+
+CEmbedItem.defaultProps = {
+  tag: 'iframe'
+}
+
+export default CEmbedItem
diff --git a/src/embed/tests/CEmbed.test.js b/src/embed/tests/CEmbed.test.js
new file mode 100644
index 00000000..7a1b3eb8
--- /dev/null
+++ b/src/embed/tests/CEmbed.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CEmbed from '../CEmbed'
+
+configure({ adapter: new Adapter() })
+
+describe('CEmbed', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CEmbed/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CEmbed
+        className='class-name'
+        ratio='1by1'
+      >
+        CEmbed
+      </CEmbed>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/embed/tests/CEmbedItem.test.js b/src/embed/tests/CEmbedItem.test.js
new file mode 100644
index 00000000..49547d52
--- /dev/null
+++ b/src/embed/tests/CEmbedItem.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CEmbedItem from '../CEmbedItem'
+
+configure({ adapter: new Adapter() })
+
+describe('CEmbedItem', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CEmbedItem/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CEmbedItem
+        className='class-name'
+      >
+        CEmbedItem
+      </CEmbedItem>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/embed/tests/__snapshots__/CEmbed.test.js.snap b/src/embed/tests/__snapshots__/CEmbed.test.js.snap
new file mode 100644
index 00000000..bc71bf4a
--- /dev/null
+++ b/src/embed/tests/__snapshots__/CEmbed.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CEmbed renders basic wrapper correctly 1`] = `
+<div
+  className="embed-responsive embed-responsive-16by9"
+/>
+`;
+
+exports[`CEmbed renders customized wrapper correctly 1`] = `
+<div
+  className="class-name embed-responsive embed-responsive-1by1"
+>
+  CEmbed
+</div>
+`;
diff --git a/src/embed/tests/__snapshots__/CEmbedItem.test.js.snap b/src/embed/tests/__snapshots__/CEmbedItem.test.js.snap
new file mode 100644
index 00000000..9986e0bb
--- /dev/null
+++ b/src/embed/tests/__snapshots__/CEmbedItem.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CEmbedItem renders basic wrapper correctly 1`] = `
+<iframe
+  className="embed-responsive-item"
+/>
+`;
+
+exports[`CEmbedItem renders customized wrapper correctly 1`] = `
+<iframe
+  className="class-name embed-responsive-item"
+>
+  CEmbedItem
+</iframe>
+`;
diff --git a/src/fade/CFade.js b/src/fade/CFade.js
new file mode 100644
index 00000000..eb61a1c8
--- /dev/null
+++ b/src/fade/CFade.js
@@ -0,0 +1,75 @@
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { pickByKeys, omitByKeys } from '@coreui/utils/src'
+import { TransitionPropTypeKeys, tagPropType } from '../utils/helper.js'
+import { Transition } from 'react-transition-group'
+
+//component - CoreUI / CFade
+const CFade = props => {
+
+  const {
+    tag: Tag,
+    className,
+    children,
+    //
+    innerRef,
+    baseClass,
+    baseClassActive,
+    ...rest
+  } = props
+
+  //render
+  const transitionProps = pickByKeys(rest, TransitionPropTypeKeys)
+  const childProps = omitByKeys(rest, TransitionPropTypeKeys)
+
+  const ref = typeof innerRef === 'object' ? innerRef : useRef()
+  typeof innerRef === 'function' && innerRef(ref)
+
+
+
+  return (
+    <Transition {...transitionProps} nodeRef={ref}>
+      {(status) => {
+        const isActive = status === 'entered'
+        const classes = classNames(
+          className,
+          baseClass,
+          isActive && baseClassActive
+        )
+        return (
+          <Tag className={classes} {...childProps} ref={ref}>
+            {children}
+          </Tag>
+        )
+      }}
+    </Transition>
+  )
+}
+
+CFade.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  baseClass: PropTypes.string,
+  baseClassActive: PropTypes.string
+}
+
+CFade.defaultProps = {
+  tag: 'div',
+  //
+  baseClass: 'fade',
+  baseClassActive: 'show',
+  timeout: 150,
+  appear: true,
+  enter: true,
+  exit: true,
+  in: true
+}
+
+export default CFade
diff --git a/src/fade/tests/CFade.test.js b/src/fade/tests/CFade.test.js
new file mode 100644
index 00000000..644eb7b8
--- /dev/null
+++ b/src/fade/tests/CFade.test.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CFade from '../CFade'
+
+configure({ adapter: new Adapter() })
+
+describe('CFade', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CFade/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CFade
+        className='class-name'
+        baseClassActive='base-class-active'
+        baseClass='base-class'
+      >
+        CFade
+      </CFade>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/fade/tests/__snapshots__/CFade.test.js.snap b/src/fade/tests/__snapshots__/CFade.test.js.snap
new file mode 100644
index 00000000..f136ecdb
--- /dev/null
+++ b/src/fade/tests/__snapshots__/CFade.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CFade renders basic wrapper correctly 1`] = `
+<div
+  className="fade"
+/>
+`;
+
+exports[`CFade renders customized wrapper correctly 1`] = `
+<div
+  className="class-name base-class"
+>
+  CFade
+</div>
+`;
diff --git a/src/form/CForm.js b/src/form/CForm.js
new file mode 100644
index 00000000..425bfaf5
--- /dev/null
+++ b/src/form/CForm.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CForm
+
+const CForm = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    innerRef,
+    //
+    inline,
+    wasValidated,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    inline ? 'form-inline' : false,
+    wasValidated ? 'was-validated' : false
+  );
+
+  return (
+    <Tag {...attributes} className={classes} ref={innerRef} />
+  );
+
+}
+
+CForm.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  inline: PropTypes.bool,
+  wasValidated: PropTypes.bool
+};
+
+CForm.defaultProps = {
+  tag: 'form',
+};
+
+export default CForm;
diff --git a/src/form/CFormFeedback.js b/src/form/CFormFeedback.js
new file mode 100644
index 00000000..635186d0
--- /dev/null
+++ b/src/form/CFormFeedback.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CFormFeedback
+
+const CFormFeedback = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    valid,
+    tooltip,
+    ...attributes
+  } = props
+
+  //render
+  const validMode = tooltip ? 'tooltip' : 'feedback'
+  const classes = classNames(
+    valid ? `valid-${validMode}` : `invalid-${validMode}`,
+    className
+  )
+
+  return <div className={classes} {...attributes} ref={innerRef} />
+}
+
+CFormFeedback.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  valid: PropTypes.bool,
+  tooltip: PropTypes.bool
+};
+
+export const CValidFeedback = props => <CFormFeedback {...props} valid/>
+export const CInvalidFeedback = props => <CFormFeedback {...props} valid={false}/>
diff --git a/src/form/CFormGroup.js b/src/form/CFormGroup.js
new file mode 100644
index 00000000..48423681
--- /dev/null
+++ b/src/form/CFormGroup.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CFormGroup
+const CFormGroup = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    row,
+    disabled,
+    variant,
+    inline,
+    ...attributes
+  } = props
+
+  //render
+  const checkClass = variant && variant.includes('custom') ? 'custom-control' : 'form-check'
+
+  const classes = classNames(
+    row && 'row',
+    !variant && 'form-group',
+    variant && checkClass,
+    variant === 'custom-radio' && 'custom-radio',
+    variant === 'custom-checkbox' && 'custom-checkbox',
+    variant && inline && `${checkClass}-inline`,
+    variant && disabled && 'disabled',
+    className
+  )
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CFormGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  row: PropTypes.bool,
+  variant: PropTypes.oneOf(['checkbox', 'custom-checkbox', 'custom-radio']),
+  inline: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+
+
+export default CFormGroup
diff --git a/src/form/CFormText.js b/src/form/CFormText.js
new file mode 100644
index 00000000..2af8f68f
--- /dev/null
+++ b/src/form/CFormText.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CFormText
+const CFormText = props => {
+
+  const {
+    tag: Tag,
+    className,
+    innerRef,
+    //
+    color,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'form-text', color && `text-${color}`, className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CFormText.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  color: PropTypes.string
+};
+
+CFormText.defaultProps = {
+  tag: 'small',
+  color: 'muted'
+};
+
+export default CFormText
diff --git a/src/form/CInput.js b/src/form/CInput.js
new file mode 100644
index 00000000..c371aa09
--- /dev/null
+++ b/src/form/CInput.js
@@ -0,0 +1,195 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CInput
+const commonPropTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  valid: PropTypes.bool,
+  invalid: PropTypes.bool
+}
+
+const CInput = props => {
+
+  let {
+    className,
+    //
+    innerRef,
+    type,
+    valid,
+    invalid,
+    plaintext,
+    size,
+    sizeHtml,
+    ...attributes
+  } = props
+
+  // render
+  const classes = 
+  classNames(
+    plaintext ? 'form-control-plaintext' : 'form-control',
+    size && `form-control-${size}`,
+    invalid && 'is-invalid',
+    valid && 'is-valid',
+    className
+  )
+
+  return <input 
+    className={classes} 
+    type={type}
+    {...attributes}
+    size={sizeHtml} 
+    ref={innerRef}
+  />
+}
+
+CInput.propTypes = {
+  ...commonPropTypes,
+  plaintext: PropTypes.bool,
+  type: PropTypes.string,
+  size: PropTypes.string,
+  sizeHtml: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+CInput.defaultProps = {
+  type: 'text'
+};
+
+const CTextarea = props => {
+
+  let {
+    className,
+    //
+    innerRef,
+    valid,
+    invalid,
+    plaintext,
+    size,
+    ...attributes
+  } = props
+
+  // render
+  const classes = classNames(
+      plaintext ? 'form-control-plaintext' : 'form-control',
+      size && `form-control-${size}`,
+      invalid && 'is-invalid',
+      valid && 'is-valid',
+      className
+  )
+
+  return <textarea className={classes} {...attributes} ref={innerRef}/>
+}
+
+CTextarea.propTypes = {
+  ...commonPropTypes,
+  plaintext: PropTypes.bool,
+  size: PropTypes.string
+};
+
+const CInputFile = props => {
+
+  let {
+    className,
+    //
+    innerRef,
+    valid,
+    invalid,
+    custom,
+    ...attributes
+  } = props
+
+  // render
+
+  const classes = classNames(
+    custom ? 'custom-file-input' : 'form-control-file',
+    invalid && 'is-invalid',
+    valid && 'is-valid',
+    className
+  )
+
+  return <input className={classes} {...attributes} type="file" ref={innerRef}/>
+}
+
+CInputFile.propTypes = {
+  ...commonPropTypes,
+  custom: PropTypes.bool
+};
+
+const CInputCheckbox = props => {
+
+  let {
+    className,
+    //
+    innerRef,
+    valid,
+    invalid,
+    custom,
+    ...attributes
+  } = props
+
+  // render
+
+  const classes = classNames(
+    custom ? 'custom-control-input' : 'form-check-input',
+    invalid && 'is-invalid',
+    valid && 'is-valid',
+    className
+  )
+
+  return <input className={classes} type="checkbox" {...attributes} ref={innerRef}/>
+}
+
+CInputCheckbox.propTypes = {
+  ...commonPropTypes,
+  custom: PropTypes.bool
+};
+
+const CInputRadio = props => <CInputCheckbox {...props} type="radio"/> 
+
+const CSelect = props => {
+
+  let {
+    className,
+    //
+    innerRef,
+    valid,
+    invalid,
+    size,
+    sizeHtml,
+    custom,
+    ...attributes
+  } = props
+
+  // render
+  const baseClass = custom ? 'custom-select' : 'form-control'
+  const classes = classNames(
+    baseClass,
+    size && `${baseClass}-${size}`,
+    invalid && 'is-invalid',
+    valid && 'is-valid',
+    className
+  )
+
+  return <select 
+    className={classes} 
+    {...attributes} 
+    size={sizeHtml} 
+    ref={innerRef}
+  />
+}
+
+CSelect.propTypes = {
+  ...commonPropTypes,
+  size: PropTypes.string,
+  sizeHtml: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+export {
+  CInput,
+  CTextarea,
+  CInputFile,
+  CInputCheckbox,
+  CInputRadio,
+  CSelect
+}
\ No newline at end of file
diff --git a/src/form/CInputGroup.js b/src/form/CInputGroup.js
new file mode 100644
index 00000000..7f489fea
--- /dev/null
+++ b/src/form/CInputGroup.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CInputGroup
+const CInputGroup = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    size,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'input-group',
+    size && `input-group-${size}`,
+    className
+  )
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CInputGroup.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  size: PropTypes.string
+};
+
+export default CInputGroup
diff --git a/src/form/CInputGroupAddon.js b/src/form/CInputGroupAddon.js
new file mode 100644
index 00000000..29d654b0
--- /dev/null
+++ b/src/form/CInputGroupAddon.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CInputGroupAddon
+const CInputGroupAddon = props => {
+
+  const {
+    children,
+    className,
+    //
+    innerRef,
+    prepend,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames(
+    'input-group-' + (prepend ? 'prepend' : 'append'), className
+  )
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef}>
+      {children}
+    </div>
+  )
+}
+
+CInputGroupAddon.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  prepend: PropTypes.bool
+};
+
+export const CInputGroupAppend = props => <CInputGroupAddon {...props} prepend={false}/>
+export const CInputGroupPrepend = props => <CInputGroupAddon {...props} prepend/>
diff --git a/src/form/CInputGroupText.js b/src/form/CInputGroupText.js
new file mode 100644
index 00000000..2a24e5d8
--- /dev/null
+++ b/src/form/CInputGroupText.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CInputGroupText
+const CInputGroupText = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames(
+    'input-group-text', className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CInputGroupText.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+CInputGroupText.defaultProps = {
+  tag: 'div'
+};
+
+export default CInputGroupText
diff --git a/src/form/CLabel.js b/src/form/CLabel.js
new file mode 100644
index 00000000..1ec02164
--- /dev/null
+++ b/src/form/CLabel.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import CCol from '../grid/CCol'
+
+//component - CoreUI / CLabel
+const CLabel = props => {
+
+  const {
+    tag,
+    className,
+    //
+    innerRef,
+    hidden,
+    variant,
+    col,
+    ...attributes
+  } = props
+
+  // render
+  const classes = classNames(
+    hidden && 'sr-only',
+    variant === 'custom-checkbox' && 'custom-control-label',
+    variant === 'checkbox' && 'form-check-label',
+    variant === 'custom-file' && 'custom-file-label',
+    col && 'col-form-label',
+    col && typeof col === 'string' && `col-form-label-${col}`,
+    className
+  )
+
+  const Tag = col ? CCol : tag
+  const addLabelTag = col && { tag }
+
+  return (
+    <Tag className={classes} {...addLabelTag} {...attributes} ref={innerRef}/>
+  )
+}
+
+CLabel.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  hidden: PropTypes.bool,
+  variant: PropTypes.oneOf(['custom-file', 'checkbox', 'custom-checkbox']),
+  col: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+};
+
+CLabel.defaultProps = {
+  tag: 'label'
+}
+
+export default CLabel
diff --git a/src/form/tests/CForm.test.js b/src/form/tests/CForm.test.js
new file mode 100644
index 00000000..926d1634
--- /dev/null
+++ b/src/form/tests/CForm.test.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CForm from '../CForm'
+
+configure({ adapter: new Adapter() })
+
+describe('CForm', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CForm/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CForm
+        className='class-name'
+        inline
+        wasValidated
+      >
+        CForm
+      </CForm>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/form/tests/CFormFeedback.test.js b/src/form/tests/CFormFeedback.test.js
new file mode 100644
index 00000000..130fc255
--- /dev/null
+++ b/src/form/tests/CFormFeedback.test.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CFormFeedback from '../CFormFeedback'
+import {CValidFeedback, CInvalidFeedback} from '../CFormFeedback'
+
+configure({ adapter: new Adapter() })
+
+describe('CFormFeedback/CValidFeedback/CInvalidFeedback', () => {
+  // todo
+  // it('renders basic wrapper correctly', () => {
+  //   const component = renderer.create(<CFormFeedback/>);
+  //   let tree = component.toJSON();
+  //   expect(tree).toMatchSnapshot()
+  // })
+  // todo
+  // it('renders customized wrapper correctly', () => {
+  //   const componentCustomized = renderer.create(<CFormFeedback className='class-name' valid tooltip>CFormFeedback</CFormFeedback>
+  //   );
+  //   let tree = componentCustomized.toJSON();
+  //   expect(tree).toMatchSnapshot()
+  // })
+  it('renders basic wrapper correctly CValidFeedback', () => {
+    const component = renderer.create(<CValidFeedback/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly CValidFeedback', () => {
+    const componentCustomized = renderer.create(
+      <CValidFeedback
+        className='class-name'
+        tooltip
+      >
+      CValidFeedback
+      </CValidFeedback>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders basic wrapper correctly CInvalidFeedback', () => {
+    const component = renderer.create(<CInvalidFeedback/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly CInvalidFeedback', () => {
+    const componentCustomized = renderer.create(
+      <CInvalidFeedback
+        className='class-name'
+        tooltip
+      >
+      CInvalidFeedback
+      </CInvalidFeedback>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/form/tests/CFormGroup.test.js b/src/form/tests/CFormGroup.test.js
new file mode 100644
index 00000000..5772c9a0
--- /dev/null
+++ b/src/form/tests/CFormGroup.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CFormGroup from '../CFormGroup'
+
+configure({ adapter: new Adapter() })
+
+describe('CFormGroup', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CFormGroup/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CFormGroup
+        className='class-name'
+        variant='custom-checkbox'
+        inline
+        disabled
+      >
+        CFormGroup
+      </CFormGroup>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/form/tests/CFormText.test.js b/src/form/tests/CFormText.test.js
new file mode 100644
index 00000000..d11722cc
--- /dev/null
+++ b/src/form/tests/CFormText.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CFormText from '../CFormText'
+
+configure({ adapter: new Adapter() })
+
+describe('CFormText', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CFormText/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CFormText
+        className='class-name'
+        color='warning'
+      >
+        CFormText
+      </CFormText>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/form/tests/CInput.test.js b/src/form/tests/CInput.test.js
new file mode 100644
index 00000000..fe6786bf
--- /dev/null
+++ b/src/form/tests/CInput.test.js
@@ -0,0 +1,146 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import { CInput, CTextarea, CInputFile, CInputCheckbox, CInputRadio, CSelect } from '../CInput'
+
+configure({ adapter: new Adapter() })
+
+describe('CInput', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CInput/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CInput
+        className='class-name'
+        type='number'
+        valid
+        invalid
+        plaintext
+        size='lg'
+        sizeHtml='200'
+      >
+        CInput
+      </CInput>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
+
+  describe('CInput-CTextarea', () => {
+    it('renders basic wrapper correctly', () => {
+      const component = renderer.create(<CTextarea/>);
+      let tree = component.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+    it('renders customized wrapper correctly', () => {
+      const componentCustomized = renderer.create(
+        <CTextarea
+          className='class-name'
+          valid
+          invalid
+          plaintext
+          size='lg'
+        >
+          CTextarea
+        </CTextarea>
+      );
+      let tree = componentCustomized.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+  })
+
+  describe('CInput-CInputFile', () => {
+    it('renders basic wrapper correctly', () => {
+      const component = renderer.create(<CInputFile/>);
+      let tree = component.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+    it('renders customized wrapper correctly', () => {
+      const componentCustomized = renderer.create(
+        <CInputFile
+          className='class-name'
+          valid
+          invalid
+          custom
+        >
+          CInputFile
+        </CInputFile>
+      );
+      let tree = componentCustomized.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+  })
+
+  describe('CInput-CInputCheckbox', () => {
+    it('renders basic wrapper correctly', () => {
+      const component = renderer.create(<CInputCheckbox/>);
+      let tree = component.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+    it('renders customized wrapper correctly', () => {
+      const componentCustomized = renderer.create(
+        <CInputCheckbox
+          className='class-name'
+          valid
+          invalid
+          custom
+        >
+          CInputCheckbox
+        </CInputCheckbox>
+      );
+      let tree = componentCustomized.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+  })
+
+  describe('CInput-CInputRadio', () => {
+    it('renders basic wrapper correctly', () => {
+      const component = renderer.create(<CInputRadio/>);
+      let tree = component.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+    it('renders customized wrapper correctly', () => {
+      const componentCustomized = renderer.create(
+        <CInputRadio
+          className='class-name'
+          valid
+          invalid
+          custom
+        >
+          CInputRadio
+        </CInputRadio>
+      );
+      let tree = componentCustomized.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+  })
+
+  describe('CInput-CSelect', () => {
+    it('renders basic wrapper correctly', () => {
+      const component = renderer.create(<CSelect/>);
+      let tree = component.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+    it('renders customized wrapper correctly', () => {
+      const componentCustomized = renderer.create(
+        <CSelect
+          className='class-name'
+          valid
+          invalid
+          custom
+          size='lg'
+          sizeHtml='200'
+        >
+          CSelect
+        </CSelect>
+      );
+      let tree = componentCustomized.toJSON();
+      expect(tree).toMatchSnapshot()
+    })
+  })
diff --git a/src/form/tests/CInputGroup.test.js b/src/form/tests/CInputGroup.test.js
new file mode 100644
index 00000000..d637c8fb
--- /dev/null
+++ b/src/form/tests/CInputGroup.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CInputGroup from '../CInputGroup'
+
+configure({ adapter: new Adapter() })
+
+describe('CInputGroup', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CInputGroup/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CInputGroup
+        className='class-name'
+        size='lg'
+      >
+        CInputGroup
+      </CInputGroup>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/form/tests/CInputGroupText.test.js b/src/form/tests/CInputGroupText.test.js
new file mode 100644
index 00000000..936ee185
--- /dev/null
+++ b/src/form/tests/CInputGroupText.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CInputGroupText from '../CInputGroupText'
+
+configure({ adapter: new Adapter() })
+
+describe('CInputGroupText', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CInputGroupText/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CInputGroupText
+        className='class-name'
+      >
+        CInputGroupText
+      </CInputGroupText>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/form/tests/CLabel.test.js b/src/form/tests/CLabel.test.js
new file mode 100644
index 00000000..b54ac991
--- /dev/null
+++ b/src/form/tests/CLabel.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CLabel from '../CLabel'
+
+configure({ adapter: new Adapter() })
+
+describe('CLabel', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CLabel/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CLabel
+        className='class-name'
+        hidden
+        variant='custom-file'
+        col
+      >
+        CLabel
+      </CLabel>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/form/tests/__snapshots__/CForm.test.js.snap b/src/form/tests/__snapshots__/CForm.test.js.snap
new file mode 100644
index 00000000..a52c358b
--- /dev/null
+++ b/src/form/tests/__snapshots__/CForm.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CForm renders basic wrapper correctly 1`] = `
+<form
+  className=""
+/>
+`;
+
+exports[`CForm renders customized wrapper correctly 1`] = `
+<form
+  className="class-name form-inline was-validated"
+>
+  CForm
+</form>
+`;
diff --git a/src/form/tests/__snapshots__/CFormFeedback.test.js.snap b/src/form/tests/__snapshots__/CFormFeedback.test.js.snap
new file mode 100644
index 00000000..07e9925c
--- /dev/null
+++ b/src/form/tests/__snapshots__/CFormFeedback.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CFormFeedback/CValidFeedback/CInvalidFeedback renders basic wrapper correctly CInvalidFeedback 1`] = `
+<div
+  className="invalid-feedback"
+/>
+`;
+
+exports[`CFormFeedback/CValidFeedback/CInvalidFeedback renders basic wrapper correctly CValidFeedback 1`] = `
+<div
+  className="valid-feedback"
+/>
+`;
+
+exports[`CFormFeedback/CValidFeedback/CInvalidFeedback renders customized wrapper correctly CInvalidFeedback 1`] = `
+<div
+  className="invalid-tooltip class-name"
+>
+  CInvalidFeedback
+</div>
+`;
+
+exports[`CFormFeedback/CValidFeedback/CInvalidFeedback renders customized wrapper correctly CValidFeedback 1`] = `
+<div
+  className="valid-tooltip class-name"
+>
+  CValidFeedback
+</div>
+`;
diff --git a/src/form/tests/__snapshots__/CFormGroup.test.js.snap b/src/form/tests/__snapshots__/CFormGroup.test.js.snap
new file mode 100644
index 00000000..323379d3
--- /dev/null
+++ b/src/form/tests/__snapshots__/CFormGroup.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CFormGroup renders basic wrapper correctly 1`] = `
+<div
+  className="form-group"
+/>
+`;
+
+exports[`CFormGroup renders customized wrapper correctly 1`] = `
+<div
+  className="custom-control custom-checkbox custom-control-inline disabled class-name"
+>
+  CFormGroup
+</div>
+`;
diff --git a/src/form/tests/__snapshots__/CFormText.test.js.snap b/src/form/tests/__snapshots__/CFormText.test.js.snap
new file mode 100644
index 00000000..ca3a0bbb
--- /dev/null
+++ b/src/form/tests/__snapshots__/CFormText.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CFormText renders basic wrapper correctly 1`] = `
+<small
+  className="form-text text-muted"
+/>
+`;
+
+exports[`CFormText renders customized wrapper correctly 1`] = `
+<small
+  className="form-text text-warning class-name"
+>
+  CFormText
+</small>
+`;
diff --git a/src/form/tests/__snapshots__/CInput.test.js.snap b/src/form/tests/__snapshots__/CInput.test.js.snap
new file mode 100644
index 00000000..a4792f17
--- /dev/null
+++ b/src/form/tests/__snapshots__/CInput.test.js.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CInput renders basic wrapper correctly 1`] = `
+<input
+  className="form-control"
+  type="text"
+/>
+`;
+
+exports[`CInput renders customized wrapper correctly 1`] = `
+<input
+  className="form-control-plaintext form-control-lg is-invalid is-valid class-name"
+  size="200"
+  type="number"
+>
+  CInput
+</input>
+`;
+
+exports[`CInput-CInputCheckbox renders basic wrapper correctly 1`] = `
+<input
+  className="form-check-input"
+  type="checkbox"
+/>
+`;
+
+exports[`CInput-CInputCheckbox renders customized wrapper correctly 1`] = `
+<input
+  className="custom-control-input is-invalid is-valid class-name"
+  type="checkbox"
+>
+  CInputCheckbox
+</input>
+`;
+
+exports[`CInput-CInputFile renders basic wrapper correctly 1`] = `
+<input
+  className="form-control-file"
+  type="file"
+/>
+`;
+
+exports[`CInput-CInputFile renders customized wrapper correctly 1`] = `
+<input
+  className="custom-file-input is-invalid is-valid class-name"
+  type="file"
+>
+  CInputFile
+</input>
+`;
+
+exports[`CInput-CInputRadio renders basic wrapper correctly 1`] = `
+<input
+  className="form-check-input"
+  type="radio"
+/>
+`;
+
+exports[`CInput-CInputRadio renders customized wrapper correctly 1`] = `
+<input
+  className="custom-control-input is-invalid is-valid class-name"
+  type="radio"
+>
+  CInputRadio
+</input>
+`;
+
+exports[`CInput-CSelect renders basic wrapper correctly 1`] = `
+<select
+  className="form-control"
+/>
+`;
+
+exports[`CInput-CSelect renders customized wrapper correctly 1`] = `
+<select
+  className="custom-select custom-select-lg is-invalid is-valid class-name"
+  size="200"
+>
+  CSelect
+</select>
+`;
+
+exports[`CInput-CTextarea renders basic wrapper correctly 1`] = `
+<textarea
+  className="form-control"
+/>
+`;
+
+exports[`CInput-CTextarea renders customized wrapper correctly 1`] = `
+<textarea
+  className="form-control-plaintext form-control-lg is-invalid is-valid class-name"
+>
+  CTextarea
+</textarea>
+`;
diff --git a/src/form/tests/__snapshots__/CInputGroup.test.js.snap b/src/form/tests/__snapshots__/CInputGroup.test.js.snap
new file mode 100644
index 00000000..55d6dc6b
--- /dev/null
+++ b/src/form/tests/__snapshots__/CInputGroup.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CInputGroup renders basic wrapper correctly 1`] = `
+<div
+  className="input-group"
+/>
+`;
+
+exports[`CInputGroup renders customized wrapper correctly 1`] = `
+<div
+  className="input-group input-group-lg class-name"
+>
+  CInputGroup
+</div>
+`;
diff --git a/src/form/tests/__snapshots__/CInputGroupText.test.js.snap b/src/form/tests/__snapshots__/CInputGroupText.test.js.snap
new file mode 100644
index 00000000..1f24063a
--- /dev/null
+++ b/src/form/tests/__snapshots__/CInputGroupText.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CInputGroupText renders basic wrapper correctly 1`] = `
+<div
+  className="input-group-text"
+/>
+`;
+
+exports[`CInputGroupText renders customized wrapper correctly 1`] = `
+<div
+  className="input-group-text class-name"
+>
+  CInputGroupText
+</div>
+`;
diff --git a/src/form/tests/__snapshots__/CLabel.test.js.snap b/src/form/tests/__snapshots__/CLabel.test.js.snap
new file mode 100644
index 00000000..1210a7c2
--- /dev/null
+++ b/src/form/tests/__snapshots__/CLabel.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CLabel renders basic wrapper correctly 1`] = `
+<label
+  className=""
+/>
+`;
+
+exports[`CLabel renders customized wrapper correctly 1`] = `
+<label
+  className="sr-only custom-file-label col-form-label class-name col"
+>
+  CLabel
+</label>
+`;
diff --git a/src/grid/CCol.js b/src/grid/CCol.js
new file mode 100644
index 00000000..8040be02
--- /dev/null
+++ b/src/grid/CCol.js
@@ -0,0 +1,99 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+
+const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+const columnProps = PropTypes.oneOfType([
+  PropTypes.bool,
+  PropTypes.number,
+  PropTypes.string,
+  PropTypes.shape({
+    size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
+    order: stringOrNumberProp,
+    offset: stringOrNumberProp
+  })
+])
+
+const getColumnSizeClass = (isXs, colWidth, colSize) => {
+  if (colSize === true || colSize === '') {
+    return isXs ? 'col' : `col-${colWidth}`
+  } else if (colSize === 'auto') {
+    return isXs ? 'col-auto' : `col-${colWidth}-auto`
+  }
+  return isXs ? `col-${colSize}` : `col-${colWidth}-${colSize}`
+};
+
+//component - CoreUI / CCol
+const CCol = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    widths,
+    ...attributes
+  } = props
+
+  //render
+
+  const colClasses = []
+  widths.forEach((colWidth, i) => {
+    let columnProp = props[colWidth]
+    delete attributes[colWidth]
+    if (!columnProp && columnProp !== '') {
+      return
+    }
+    const isXs = !i
+    if (typeof columnProp === 'object') {
+      const colSizeInterfix = isXs ? '-' : `-${colWidth}-`
+      const colClass = getColumnSizeClass(isXs, colWidth, columnProp.size)
+
+      colClasses.push(classNames({
+        [colClass]: columnProp.size || columnProp.size === '',
+        [`order${colSizeInterfix}${columnProp.order}`]: columnProp.order || columnProp.order === 0,
+        [`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0
+      }))
+    } else {
+      const colClass = getColumnSizeClass(isXs, colWidth, columnProp)
+      colClasses.push(colClass)
+    }
+  })
+
+  if (!colClasses.length) {
+    colClasses.push('col')
+  }
+
+  const classes = classNames(
+    className,
+    colClasses
+  )
+
+  return (
+    <Tag {...attributes} className={classes} ref={innerRef} />
+  )
+
+}
+
+CCol.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  xs: columnProps,
+  sm: columnProps,
+  md: columnProps,
+  lg: columnProps,
+  xl: columnProps,
+  xxl: columnProps,
+  widths: PropTypes.array
+}
+
+CCol.defaultProps = {
+  tag: 'div',
+  widths: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+}
+
+export default CCol
diff --git a/src/grid/CContainer.js b/src/grid/CContainer.js
new file mode 100644
index 00000000..fb568d3d
--- /dev/null
+++ b/src/grid/CContainer.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CContainer
+
+const CContainer = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    fluid,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    fluid ? 'container-fluid' : 'container'
+  );
+
+  return (
+    <Tag {...attributes} className={classes} ref={innerRef} />
+  );
+
+}
+
+CContainer.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  fluid: PropTypes.bool
+};
+
+CContainer.defaultProps = {
+  tag: 'div',
+};
+
+export default CContainer;
diff --git a/src/grid/CRow.js b/src/grid/CRow.js
new file mode 100644
index 00000000..9123f804
--- /dev/null
+++ b/src/grid/CRow.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CRow
+const CRow = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    gutters,
+    form,
+    alignHorizontal,
+    alignVertical,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    !gutters ? 'no-gutters' : null,
+    alignHorizontal ? `justify-content-${alignHorizontal}` : null,
+    alignVertical ? `align-${alignVertical}` : null,
+    form ? 'form-row' : 'row'
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CRow.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  gutters: PropTypes.bool,
+  form: PropTypes.bool,
+  alignHorizontal: PropTypes.string,
+  alignVertical: PropTypes.string
+};
+
+CRow.defaultProps = {
+  tag: 'div',
+  gutters: true
+};
+
+export default CRow
diff --git a/src/grid/tests/CCol.test.js b/src/grid/tests/CCol.test.js
new file mode 100644
index 00000000..2ad0f9fb
--- /dev/null
+++ b/src/grid/tests/CCol.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CCol from '../CCol'
+
+configure({ adapter: new Adapter() })
+
+describe('CCol', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CCol/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CCol
+        className='class-name'
+        lg='5'
+        md='4'
+        sm='3'
+      >
+        CCol
+      </CCol>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/grid/tests/CContainer.test.js b/src/grid/tests/CContainer.test.js
new file mode 100644
index 00000000..4c240df6
--- /dev/null
+++ b/src/grid/tests/CContainer.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CContainer from '../CContainer'
+
+configure({ adapter: new Adapter() })
+
+describe('CContainer', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CContainer/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CContainer
+        className='class-name'
+        fluid
+      >
+        CContainer
+      </CContainer>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/grid/tests/CRow.test.js b/src/grid/tests/CRow.test.js
new file mode 100644
index 00000000..5232aba7
--- /dev/null
+++ b/src/grid/tests/CRow.test.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CRow from '../CRow'
+
+configure({ adapter: new Adapter() })
+
+describe('CRow', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CRow/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CRow
+        className='class-name'
+        gutters
+        form
+        alignHorizontal='right'
+        alignVertical='bottom'
+      >
+        CRow
+      </CRow>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/grid/tests/__snapshots__/CCol.test.js.snap b/src/grid/tests/__snapshots__/CCol.test.js.snap
new file mode 100644
index 00000000..714c30bf
--- /dev/null
+++ b/src/grid/tests/__snapshots__/CCol.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CCol renders basic wrapper correctly 1`] = `
+<div
+  className="col"
+/>
+`;
+
+exports[`CCol renders customized wrapper correctly 1`] = `
+<div
+  className="class-name col-sm-3 col-md-4 col-lg-5"
+>
+  CCol
+</div>
+`;
diff --git a/src/grid/tests/__snapshots__/CContainer.test.js.snap b/src/grid/tests/__snapshots__/CContainer.test.js.snap
new file mode 100644
index 00000000..bb94f414
--- /dev/null
+++ b/src/grid/tests/__snapshots__/CContainer.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CContainer renders basic wrapper correctly 1`] = `
+<div
+  className="container"
+/>
+`;
+
+exports[`CContainer renders customized wrapper correctly 1`] = `
+<div
+  className="class-name container-fluid"
+>
+  CContainer
+</div>
+`;
diff --git a/src/grid/tests/__snapshots__/CRow.test.js.snap b/src/grid/tests/__snapshots__/CRow.test.js.snap
new file mode 100644
index 00000000..9cf71e09
--- /dev/null
+++ b/src/grid/tests/__snapshots__/CRow.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CRow renders basic wrapper correctly 1`] = `
+<div
+  className="row"
+/>
+`;
+
+exports[`CRow renders customized wrapper correctly 1`] = `
+<div
+  className="class-name justify-content-right align-bottom form-row"
+>
+  CRow
+</div>
+`;
diff --git a/src/image/CImg.js b/src/image/CImg.js
new file mode 100644
index 00000000..2c053c83
--- /dev/null
+++ b/src/image/CImg.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CImg
+const CImg = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    fluid,
+    block,
+    thumbnail,
+    shape,
+    align,
+    src,
+    width,
+    height,
+    placeholderColor,
+    fluidGrow,
+    ...attributes
+  } = props
+
+  const alignClass = align === 'center' ? 'mx-auto' : 
+                     align === 'right' ? 'float-right' :
+                     align === 'left' ? 'float-left' : ''
+
+  // render
+  const classes = classNames(
+    className,
+    alignClass,
+    thumbnail && 'img-thumbnail',
+    fluid || fluidGrow && 'img-fluid',
+    fluidGrow && 'w-100',
+    block && 'd-block',
+    shape
+  )
+
+  return (
+    src ?
+      <img
+        className={classes}
+        src={src}
+        width={width}
+        height={height}
+        {...attributes}
+        ref={innerRef} 
+      /> :
+      <svg
+        className={classes}
+        width={width}
+        height={height}
+        style={{'backgroundColor': placeholderColor }}
+        {...attributes}
+        ref={innerRef}
+      />
+  )
+
+}
+
+CImg.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  src: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  block: PropTypes.bool,
+  fluid: PropTypes.bool,
+  fluidGrow: PropTypes.bool,
+  shape: PropTypes.string,//oneOf(['', 'rounded']),
+  thumbnail: PropTypes.bool,
+  align: PropTypes.oneOf(['', 'left', 'right', 'center']),
+  placeholderColor: PropTypes.string
+};
+
+CImg.defaultProps = {
+  placeholderColor: 'transparent'
+};
+
+export default CImg
diff --git a/src/image/tests/CImg.test.js b/src/image/tests/CImg.test.js
new file mode 100644
index 00000000..2a746495
--- /dev/null
+++ b/src/image/tests/CImg.test.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CImg from '../CImg'
+
+configure({ adapter: new Adapter() })
+
+describe('CImg', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CImg/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CImg
+        className='class-name'
+        fluid
+        block
+        thumbnail
+        shape='rounded'
+        align='right'
+        src='src'
+        width='200px'
+        height='250px'
+        placeholderColor='#ffffff'
+        fluidGrow
+      />
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/image/tests/__snapshots__/CImg.test.js.snap b/src/image/tests/__snapshots__/CImg.test.js.snap
new file mode 100644
index 00000000..7da476f4
--- /dev/null
+++ b/src/image/tests/__snapshots__/CImg.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CImg renders basic wrapper correctly 1`] = `
+<svg
+  className=""
+  style={
+    Object {
+      "backgroundColor": "transparent",
+    }
+  }
+/>
+`;
+
+exports[`CImg renders customized wrapper correctly 1`] = `
+<img
+  className="class-name float-right img-thumbnail w-100 d-block rounded"
+  height="250px"
+  src="src"
+  width="200px"
+/>
+`;
diff --git a/src/index.d.ts b/src/index.d.ts
new file mode 100644
index 00000000..0291a4cd
--- /dev/null
+++ b/src/index.d.ts
@@ -0,0 +1,1174 @@
+import { HTMLProps } from 'react'
+type ChildElement = any
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+type className = string | className[] | object
+type innerRef = object | Function
+type HTMLPropsNoClassName = Omit<HTMLProps<any>, 'className'>
+
+interface CAlert extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  onShowChange?: Function;
+  closeButton?: boolean;
+  color?: string;
+  fade?: boolean;
+  show?: boolean | number;
+}
+
+interface CBadge extends CLink {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  color?: string;
+  shape?: '' | 'pill';
+}
+
+interface CBrand extends CLink {
+  tag?: any;
+  children?: ChildElement;
+  className?: className | Array<any>;
+  innerRef?: innerRef;
+}
+
+interface CHeaderBrand extends CBrand { }
+interface CNavbarBrand extends CBrand { }
+interface CSidebarBrand extends CBrand { }
+
+interface CBreadcrumb extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CBreadcrumbItem extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  active?: boolean;
+}
+
+interface CBreadcrumbRouter extends HTMLPropsNoClassName {
+  className?: className;
+  innerRef?: innerRef;
+  routes?: Array<any>;
+}
+
+interface CButton extends Omit<CLink, 'size'> {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  active?: boolean;
+  block?: boolean;
+  shape?: string;
+  variant?: '' | 'ghost' | 'outline';
+  color?: string;
+  disabled?: boolean;
+  onClick?: Function;
+  size?: string;
+  pressed?: boolean;
+}
+
+interface CButtonClose extends Omit<HTMLProps<HTMLButtonElement>, 'className'> {
+  children?: ChildElement;
+  className?: className;
+  buttonClass?: string;
+  innerRef?: innerRef;
+}
+
+interface CButtonGroup extends Omit< HTMLPropsNoClassName, 'size'> {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  size?: '' | 'sm' | 'lg';
+  vertical?: boolean;
+}
+
+interface CButtonToolbar extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  role?: string;
+  justify?: '' | 'start' | 'end' | 'between' | 'center';
+}
+
+interface CCallout extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  color?: string;
+}
+
+interface sharedCardProps {
+  align?: '' | 'left' | 'center' | 'right';
+  color?: string;
+  borderColor?: string;
+  textColor?: string;
+}
+
+interface CCard extends sharedCardProps, HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  accentColor?: string;
+}
+
+interface CCardBody extends sharedCardProps, HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCardFooter extends sharedCardProps, HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCardGroup extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  deck?: boolean;
+  columns?: boolean;
+}
+
+interface CCardHeader extends sharedCardProps, HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCardImg extends CImg {
+  variant?: '' | 'top' | 'bottom' | 'full';
+}
+
+interface CCardImgOverlay extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCardSubtitle extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCardText extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCardTitle extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCarousel extends HTMLPropsNoClassName {
+  className?: className;
+  children?: ChildElement;
+  innerRef?: innerRef;
+  activeIndex?: number;
+  autoSlide?: number;
+  animate?: boolean;
+  onSlideChange?: Function;
+}
+
+interface CCarouselCaption extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCarouselControl extends HTMLPropsNoClassName {
+  className?: className;
+  children?: ChildElement;
+  innerRef?: innerRef;
+  direction: 'prev' | 'next';
+}
+
+interface CCarouselIndicators extends HTMLPropsNoClassName {
+  className?: className;
+  innerRef?: innerRef;
+  indicatorsClass?: string
+}
+
+interface CCarouselInner extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CCarouselItem extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+type columnProps = boolean | number | string | {
+  size?: boolean | number | string,
+  order?: string | number,
+  offset?: string | number
+}
+
+interface CCol extends HTMLPropsNoClassName {
+  children?: ChildElement
+  tag?: any
+  className?: className
+  innerRef?: innerRef
+  xs?: columnProps
+  sm?: columnProps
+  md?: columnProps
+  lg?: columnProps
+  xl?: columnProps
+  xxl?: columnProps
+  widths?: Array<any>
+}
+
+
+interface Transition {
+  nodeRef?: any;
+  in?: boolean;
+  mountOnEnter?: boolean;
+  unmountOnExit?: boolean;
+  appear?: boolean;
+  enter?: boolean;
+  exit?: boolean;
+  timeout?: number | { enter?: number, exit?: number, appear?: number };
+  addEndListener?: Function;
+  onEnter?: Function;
+  onEntering?: Function;
+  onEntered?: Function;
+  onExit?: Function;
+  onExiting?: Function;
+  onExited?: Function;
+}
+
+interface CCollapse extends HTMLPropsNoClassName {
+  children?: ChildElement | Array<ChildElement>;
+  className?: className;
+  innerRef?: innerRef;
+  show?: boolean;
+  navbar?: boolean;
+}
+
+interface CContainer extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  fluid?: boolean;
+}
+
+interface CCreateElement {
+  items: Array<any>;
+  components?: object;
+}
+
+interface CDataTable {
+  innerRef?: innerRef;
+  overTableSlot?: ChildElement;
+  columnHeaderSlot?: object;
+  sortingIconSlot?: Function;
+  columnFilterSlot?: object;
+  noItemsViewSlot?: ChildElement;
+  noItemsView?: object;
+  captionSlot?: ChildElement;
+  underTableSlot?: ChildElement;
+  scopedSlots?: object;
+  theadTopSlot?: ChildElement;
+  loadingSlot?: ChildElement;
+  loading?: boolean;
+  fields?: Array<any>;
+  pagination?: boolean | object;
+  activePage?: number;
+  itemsPerPage?: number;
+  items?: Array<any>;
+  sorter?: boolean | object;
+  clickableRows?: boolean;
+  columnFilter?: boolean | object;
+  tableFilterValue?: string;
+  tableFilter?: boolean | object;
+  cleaner?: boolean | Function;
+  addTableClasses?: string | Array<any> | object;
+  size?: string;
+  dark?: boolean;
+  striped?: boolean;
+  hover?: boolean;
+  border?: boolean;
+  outlined?: boolean;
+  responsive?: boolean;
+  footer?: boolean;
+  itemsPerPageSelect?: boolean | object;
+  sorterValue?: object;
+  columnFilterValue?: object;
+  header?: boolean;
+  onRowClick?: Function;
+  onSorterValueChange?: Function;
+  onPaginationChange?: Function;
+  onColumnFilterChange?: Function;
+  onPagesChange?: Function;
+  onTableFilterChange?: Function;
+  onPageChange?: Function;
+  onFilteredItemsChange?: Function;
+}
+
+interface CDropdown extends HTMLPropsNoClassName {
+  tag?: any;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  inNav?: boolean;
+}
+
+interface CDropdownItem extends CLink {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  color?: string;
+  divider?: boolean;
+  header?: boolean;
+  disabled?: boolean;
+  onClick?: Function;
+  active?: boolean;
+}
+
+interface CDropdownDivider extends CDropdownItem { }
+
+interface CDropdownHeader extends CDropdownItem { }
+
+interface CDropdownMenu extends HTMLPropsNoClassName {
+  children: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  modifiers?: Array<any>;
+  show?: boolean;
+  placement?: '' | 'top-end' | 'top' | 'top-start' |
+  'bottom-end' | 'bottom' | 'bottom-start' |
+  'right-start' | 'right' | 'right-end' |
+  'left-start' | 'left' | 'left-end';
+}
+
+interface CDropdownToggle extends CButton {
+  tag?: any;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  caret?: boolean;
+  onClick?: Function;
+  split?: boolean;
+  disabled?: boolean;
+}
+
+interface CElementCover extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  boundaries?: Array<any>;
+  opacity?: number;
+}
+
+interface CEmbed extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  ratio?: '21by9' | '16by9' | '4by3' | '1by1';
+}
+
+interface CEmbedItem extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  type?: 'iframe' | 'embed' | 'video' | 'object' | 'img';
+}
+
+interface CFade extends Transition {
+  tag?: any;
+  children?: Array<ChildElement> | ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  baseClass?: string;
+  baseClassActive?: string;
+}
+
+interface CFooter extends HTMLPropsNoClassName {
+  tag?: Function | string;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  fixed?: boolean;
+}
+
+interface CForm extends HTMLPropsNoClassName {
+  tag?: any;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  inline?: boolean;
+  wasValidated?: boolean;
+}
+
+interface CValidFeedback extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  tooltip?: boolean;
+}
+
+interface CInvalidFeedback extends CValidFeedback { }
+
+interface CFormGroup {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  row?: boolean;
+  variant?: 'checkbox' | 'custom-checkbox' | 'custom-radio';
+  inline?: boolean;
+  disabled?: boolean;
+}
+
+interface CFormText extends HTMLPropsNoClassName {
+  tag?: any;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  color?: string;
+}
+
+interface CHeader extends HTMLPropsNoClassName {
+  tag?: Function | string;
+  className?: className;
+  children?: ChildElement;
+  innerRef?: innerRef;
+  fixed?: boolean;
+  withSubheader?: boolean;
+  colorScheme?: string;
+}
+
+interface CHeaderNav extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CHeaderNavItem extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CHeaderNavLink extends CLink {
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CImg extends HTMLPropsNoClassName {
+  tag?: any;
+  className?: className | Array<any>;
+  innerRef?: innerRef;
+  src?: string;
+  width?: number | string;
+  height?: number | string;
+  block?: boolean;
+  fluid?: boolean;
+  fluidGrow?: boolean;
+  shape?: string;
+  thumbnail?: boolean;
+  align?: '' | 'left' | 'right' | 'center';
+  placeholderColor?: string;
+}
+
+interface sharedInputProps {
+  className?: className;
+  innerRef?: innerRef;
+  valid?: boolean;
+  invalid?: boolean;
+}
+
+interface CInput extends sharedInputProps, Omit< HTMLPropsNoClassName, 'size'> {
+  plaintext?: boolean;
+  type?: string;
+  size?: string;
+  sizeHtml?: string | number;
+}
+
+interface CTextarea extends sharedInputProps, Omit< HTMLPropsNoClassName, 'size'> {
+  plaintext?: boolean;
+  size?: string;
+}
+
+interface CInputFile extends sharedInputProps, HTMLPropsNoClassName {
+  custom?: boolean;
+}
+
+interface CInputCheckbox extends sharedInputProps, HTMLPropsNoClassName {
+  custom?: boolean;
+}
+
+interface CInputRadio extends CInputCheckbox { }
+
+interface CSelect extends sharedInputProps, Omit< HTMLPropsNoClassName, 'size'> {
+  children?: ChildElement;
+  size?: string;
+  sizeHtml?: string | number;
+}
+
+interface CInputGroup extends Omit< HTMLPropsNoClassName, 'size'> {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  size?: string;
+}
+
+interface CInputGroupAppend extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CInputGroupPrepend extends CInputGroupAppend { }
+
+interface CInputGroupText extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CJumbotron extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  fluid?: boolean;
+}
+
+interface CLabel extends HTMLPropsNoClassName {
+  tag?: any;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  hidden?: boolean;
+  variant?: 'custom-file' | 'checkbox' | 'custom-checkbox';
+  col?: string | boolean;
+}
+
+interface NavLink extends HTMLProps<HTMLAnchorElement> {
+  to?: string | object | Function;
+  replace?: boolean;
+  component?: any;
+  activeclassName?: className;
+  activeStyle?: object;
+  exact?: boolean;
+  strict?: boolean;
+  isActive?: Function;
+  location?: object;
+}
+
+interface CLink extends Omit<NavLink, 'className' | 'onClick' | 'to'> {
+  children?: ChildElement;
+  innerRef?: innerRef;
+  active?: boolean;
+  href?: string;
+  onClick?: Function;
+  disabled?: boolean;
+  className?: className | Array<any>;
+  to?: object | string | number;
+}
+
+
+interface CCardLink extends CLink { }
+
+interface CListGroup extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  flush?: boolean;
+  horizontal?: string;
+  accent?: boolean;
+}
+
+interface CListGroupItem extends Omit<CLink, 'action'> {
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  active?: boolean;
+  disabled?: boolean;
+  color?: string;
+  accent?: string;
+  action?: boolean;
+}
+
+interface CMedia extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CMediaBody extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CModal extends Omit< HTMLPropsNoClassName, 'size'> {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  show?: boolean;
+  centered?: boolean;
+  size?: '' | 'sm' | 'lg' | 'xl';
+  backdrop?: boolean;
+  color?: string;
+  borderColor?: string;
+  onOpened?: Function;
+  onClosed?: Function;
+  fade?: boolean;
+  closeOnBackdrop?: boolean;
+  onClose?: Function;
+  addContentClass?: string;
+  scrollable?: boolean;
+}
+
+interface CModalBody extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CModalFooter extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CModalHeader extends HTMLPropsNoClassName {
+  tag?: any;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  closeButton?: boolean;
+}
+
+interface CModalTitle extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CNav extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  variant?: '' | 'tabs' | 'pills';
+  vertical?: boolean | string;
+  justified?: boolean;
+  fill?: boolean;
+  inCard?: boolean;
+}
+
+interface CNavbar extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  light?: boolean;
+  color?: string;
+  fixed?: '' | 'top' | 'bottom';
+  sticky?: boolean;
+  expandable?: boolean | string;
+}
+
+interface CNavbarNav extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CNavbarText extends HTMLPropsNoClassName {
+  tag?: any;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CNavItem extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CNavLink extends CLink {
+  className?: className;
+  innerRef?: innerRef;
+  onClick?: Function;
+}
+
+interface CPagination extends Omit< HTMLPropsNoClassName, 'size'> {
+  className?: className;
+  innerRef?: innerRef;
+  activePage?: number;
+  dots?: boolean;
+  arrows?: boolean;
+  doubleArrows?: boolean;
+  firstButton?: ChildElement | string;
+  previousButton?: ChildElement | string;
+  nextButton?: ChildElement | string;
+  lastButton?: ChildElement | string;
+  size?: '' | 'sm' | 'lg';
+  align?: 'start' | 'center' | 'end';
+  addListClass?: string;
+  limit?: number;
+  pages?: number;
+  onActivePageChange: Function;
+}
+
+interface CTooltip {
+  children?: ChildElement;
+  content?: ChildElement;
+  interactive?: boolean;
+  placement?: '' | 'top-end' | 'top' | 'top-start' |
+  'bottom-end' | 'bottom' | 'bottom-start' |
+  'right-start' | 'right' | 'right-end' |
+  'left-start' | 'left' | 'left-end';
+  trigger?: string;
+  advancedOptions?: object;
+}
+
+interface CPopover extends CTooltip {
+  content?: ChildElement;
+  header?: ChildElement;
+}
+
+interface CProgress extends Omit< HTMLPropsNoClassName, 'size'> {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  size?: string;
+  value?: string | number;
+  max?: string | number;
+  animated?: boolean;
+  striped?: boolean;
+  color?: string;
+  precision?: number;
+  showPercentage?: boolean;
+  showValue?: boolean;
+}
+
+interface CProgressBar extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  value?: number;
+  max?: number;
+  animated?: boolean;
+  striped?: boolean;
+  color?: string;
+  precision?: number;
+  showPercentage?: boolean;
+  showValue?: boolean;
+}
+
+interface CRow extends Omit< HTMLPropsNoClassName, 'form'> {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  gutters?: boolean;
+  form?: boolean;
+  alignHorizontal?: string;
+  alignVertical?: string;
+}
+
+interface CScrollbar extends HTMLPropsNoClassName {
+  tag?: Function | string;
+  className?: className;
+  settings?: object;
+  switcher?: boolean;
+  innerRef?: innerRef;
+}
+
+interface CSidebar extends Omit< HTMLPropsNoClassName, 'size'> {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  fixed?: boolean;
+  unfoldable?: boolean;
+  overlaid?: boolean;
+  breakpoint?: false | '' | 'sm' | 'md' | 'lg' | 'xl';
+  minimize?: boolean;
+  show?: '' | true | false | 'responsive';
+  size?: '' | 'sm' | 'lg' | 'xl';
+  hideOnMobileClick?: boolean;
+  aside?: boolean;
+  colorScheme?: string;
+  dropdownMode?: '' | 'openActive' | 'close' | 'closeInactive' | 'noAction';
+  onShowChange?: Function;
+  onMinimizeChange?: Function;
+}
+
+interface CSidebarClose extends CButtonClose { }
+
+interface CSidebarFooter extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: Function | string;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CSidebarForm extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: Function | string;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CSidebarHeader extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: Function | string;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CSidebarMinimizer extends HTMLPropsNoClassName {
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CSidebarNav extends HTMLPropsNoClassName {
+  className?: className;
+  children?: ChildElement;
+  innerRef?: innerRef;
+}
+
+interface CSidebarNavDivider extends HTMLPropsNoClassName {
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CSidebarNavDropdown extends HTMLPropsNoClassName {
+  className?: className;
+  children?: ChildElement;
+  innerRef?: innerRef;
+  name?: string;
+  icon?: object | string;
+  fontIcon?: string;
+  show?: boolean;
+  route?: string;
+}
+
+interface CSidebarNavItem extends Omit<CLink, 'label'> {
+  className?: className;
+  innerRef?: innerRef;
+  icon?: string | object;
+  fontIcon?: string;
+  badge?: object;
+  addLinkClass?: string;
+  label?: boolean;
+  name?: string;
+}
+
+interface CSidebarNavTitle extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CSpinner extends Omit< HTMLPropsNoClassName, 'size'> {
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+  grow?: boolean;
+  size?: string;
+  color?: string;
+}
+
+interface CSubheader extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  tag?: any;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CSwitch extends Omit< HTMLPropsNoClassName, 'size'> {
+  className?: className
+  innerRef?: innerRef
+  size?: '' | 'lg' | 'sm'
+  color?: string
+  labelOn?: string
+  labelOff?: string
+  variant?: '' | '3d' | 'opposite' | 'outline'
+  shape?: '' | 'pill' | 'square'
+}
+
+interface CTabContent extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  fade?: boolean;
+}
+
+interface CTabPane extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  active?: boolean;
+}
+
+interface CTabs extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  activeTab?: string | number;
+  onActiveTabChange?: Function;
+}
+
+interface CToast extends HTMLPropsNoClassName {
+  className?: className;
+  children?: ChildElement;
+  innerRef?: innerRef;
+  show?: boolean;
+  autohide?: number | boolean;
+  fade?: boolean;
+  color?: string;
+  onStateChange?: Function;
+}
+
+interface CToastBody extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+}
+
+interface CToaster extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  position?: '' | 'static' | 'top-right' | 'top-left' | 'top-center' | 'top-full' |
+  'bottom-right' | 'bottom-left' | 'bottom-center' | 'bottom-full';
+}
+
+interface CToastHeader extends HTMLPropsNoClassName {
+  className?: className;
+  children?: ChildElement;
+  innerRef?: innerRef;
+  closeButton?: boolean;
+}
+
+interface CToggler extends Omit<HTMLProps<HTMLButtonElement>, 'className'> {
+  tag?: any;
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  inHeader?: boolean;
+  inNavbar?: boolean;
+}
+
+interface CWidgetBrand extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  color?: string;
+  rightHeader?: string;
+  rightFooter?: string;
+  leftHeader?: string;
+  leftFooter?: string;
+  addHeaderClasses?: string | Array<any> | object;
+  bodySlot?: ChildElement;
+}
+
+interface CWidgetDropdown extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  header?: string;
+  color?: string;
+  footerSlot?: ChildElement;
+  text?: string;
+}
+
+interface CWidgetIcon extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  header?: string;
+  text?: string;
+  iconPadding?: boolean;
+  color?: string;
+  footerSlot?: ChildElement;
+}
+
+interface CWidgetProgress extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  header?: string;
+  text?: string;
+  footer?: string;
+  color?: string;
+  value?: number;
+  inverse?: boolean;
+}
+
+interface CWidgetProgressIcon extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  header?: string;
+  text?: string;
+  color?: string;
+  value?: number;
+  inverse?: boolean;
+  progressSlot?: ChildElement;
+}
+
+interface CWidgetSimple extends HTMLPropsNoClassName {
+  children?: ChildElement;
+  className?: className;
+  innerRef?: innerRef;
+  header?: string;
+  text?: string;
+}
+
+export declare const CAlert: (props: CAlert) => any;
+export declare const CBadge: (props: CBadge) => any;
+export declare const CBrand: (props: CBrand) => any;
+export declare const CHeaderBrand: (props: CHeaderBrand) => any;
+export declare const CNavbarBrand: (props: CNavbarBrand) => any;
+export declare const CSidebarBrand: (props: CSidebarBrand) => any;
+export declare const CBreadcrumb: (props: CBreadcrumb) => any;
+export declare const CBreadcrumbItem: (props: CBreadcrumbItem) => any;
+export declare const CBreadcrumbRouter: (props: CBreadcrumbRouter) => any;
+export declare const CButton: (props: CButton) => any;
+export declare const CButtonClose: (props: CButtonClose) => any;
+export declare const CButtonGroup: (props: CButtonGroup) => any;
+export declare const CButtonToolbar: (props: CButtonToolbar) => any;
+export declare const CCallout: (props: CCallout) => any;
+export declare const CCard: (props: CCard) => any;
+export declare const CCardBody: (props: CCardBody) => any;
+export declare const CCardFooter: (props: CCardFooter) => any;
+export declare const CCardGroup: (props: CCardGroup) => any;
+export declare const CCardHeader: (props: CCardHeader) => any;
+export declare const CCardImg: (props: CCardImg) => any;
+export declare const CCardImgOverlay: (props: CCardImgOverlay) => any;
+export declare const CCardSubtitle: (props: CCardSubtitle) => any;
+export declare const CCardText: (props: CCardText) => any;
+export declare const CCardTitle: (props: CCardTitle) => any;
+export declare const CCarousel: (props: CCarousel) => any;
+export declare const CCarouselCaption: (props: CCarouselCaption) => any;
+export declare const CCarouselControl: (props: CCarouselControl) => any;
+export declare const CCarouselIndicators: (props: CCarouselIndicators) => any;
+export declare const CCarouselInner: (props: CCarouselInner) => any;
+export declare const CCarouselItem: (props: CCarouselItem) => any;
+export declare const CCol: (props: CCol) => any;
+export declare const CCollapse: (props: CCollapse) => any;
+export declare const CContainer: (props: CContainer) => any;
+export declare const CCreateElement: (props: CCreateElement) => any;
+export declare const CDataTable: (props: CDataTable) => any;
+export declare const CDropdown: (props: CDropdown) => any;
+export declare const CDropdownItem: (props: CDropdownItem) => any;
+export declare const CDropdownDivider: (props: CDropdownDivider) => any;
+export declare const CDropdownHeader: (props: CDropdownHeader) => any;
+export declare const CDropdownMenu: (props: CDropdownMenu) => any;
+export declare const CDropdownToggle: (props: CDropdownToggle) => any;
+export declare const CElementCover: (props: CElementCover) => any;
+export declare const CEmbed: (props: CEmbed) => any;
+export declare const CEmbedItem: (props: CEmbedItem) => any;
+export declare const CFade: (props: CFade) => any;
+export declare const CFooter: (props: CFooter) => any;
+export declare const CForm: (props: CForm) => any;
+export declare const CValidFeedback: (props: CValidFeedback) => any;
+export declare const CInvalidFeedback: (props: CInvalidFeedback) => any;
+export declare const CFormGroup: (props: CFormGroup) => any;
+export declare const CFormText: (props: CFormText) => any;
+export declare const CHeader: (props: CHeader) => any;
+export declare const CHeaderNav: (props: CHeaderNav) => any;
+export declare const CHeaderNavItem: (props: CHeaderNavItem) => any;
+export declare const CHeaderNavLink: (props: CHeaderNavLink) => any;
+export declare const CImg: (props: CImg) => any;
+export declare const CInput: (props: CInput) => any;
+export declare const CTextarea: (props: CTextarea) => any;
+export declare const CInputFile: (props: CInputFile) => any;
+export declare const CInputCheckbox: (props: CInputCheckbox) => any;
+export declare const CInputRadio: (props: CInputRadio) => any;
+export declare const CSelect: (props: CSelect) => any;
+export declare const CInputGroup: (props: CInputGroup) => any;
+export declare const CInputGroupAppend: (props: CInputGroupAppend) => any;
+export declare const CInputGroupPrepend: (props: CInputGroupPrepend) => any;
+export declare const CInputGroupText: (props: CInputGroupText) => any;
+export declare const CJumbotron: (props: CJumbotron) => any;
+export declare const CLabel: (props: CLabel) => any;
+export declare const CLink: (props: CLink) => any;
+export declare const CCardLink: (props: CCardLink) => any;
+export declare const CListGroup: (props: CListGroup) => any;
+export declare const CListGroupItem: (props: CListGroupItem) => any;
+export declare const CMedia: (props: CMedia) => any;
+export declare const CMediaBody: (props: CMediaBody) => any;
+export declare const CModal: (props: CModal) => any;
+export declare const CModalBody: (props: CModalBody) => any;
+export declare const CModalFooter: (props: CModalFooter) => any;
+export declare const CModalHeader: (props: CModalHeader) => any;
+export declare const CModalTitle: (props: CModalTitle) => any;
+export declare const CNav: (props: CNav) => any;
+export declare const CNavbar: (props: CNavbar) => any;
+export declare const CNavbarNav: (props: CNavbarNav) => any;
+export declare const CNavbarText: (props: CNavbarText) => any;
+export declare const CNavItem: (props: CNavItem) => any;
+export declare const CNavLink: (props: CNavLink) => any;
+export declare const CPagination: (props: CPagination) => any;
+export declare const CPopover: (props: CPopover) => any;
+export declare const CProgress: (props: CProgress) => any;
+export declare const CProgressBar: (props: CProgressBar) => any;
+export declare const CRow: (props: CRow) => any;
+export declare const CScrollbar: (props: CScrollbar) => any;
+export declare const CSidebar: (props: CSidebar) => any;
+export declare const CSidebarClose: (props: CSidebarClose) => any;
+export declare const CSidebarFooter: (props: CSidebarFooter) => any;
+export declare const CSidebarForm: (props: CSidebarForm) => any;
+export declare const CSidebarHeader: (props: CSidebarHeader) => any;
+export declare const CSidebarMinimizer: (props: CSidebarMinimizer) => any;
+export declare const CSidebarNav: (props: CSidebarNav) => any;
+export declare const CSidebarNavDivider: (props: CSidebarNavDivider) => any;
+export declare const CSidebarNavDropdown: (props: CSidebarNavDropdown) => any;
+export declare const CSidebarNavItem: (props: CSidebarNavItem) => any;
+export declare const CSidebarNavTitle: (props: CSidebarNavTitle) => any;
+export declare const CSpinner: (props: CSpinner) => any;
+export declare const CSubheader: (props: CSubheader) => any;
+export declare const CSwitch: (props: CSwitch) => any;
+export declare const CTabContent: (props: CTabContent) => any;
+export declare const CTabPane: (props: CTabPane) => any;
+export declare const CTabs: (props: CTabs) => any;
+export declare const CToast: (props: CToast) => any;
+export declare const CToastBody: (props: CToastBody) => any;
+export declare const CToaster: (props: CToaster) => any;
+export declare const CToastHeader: (props: CToastHeader) => any;
+export declare const CTooltip: (props: CTooltip) => any;
+export declare const CToggler: (props: CToggler) => any;
+export declare const CWidgetBrand: (props: CWidgetBrand) => any;
+export declare const CWidgetDropdown: (props: CWidgetDropdown) => any;
+export declare const CWidgetIcon: (props: CWidgetIcon) => any;
+export declare const CWidgetProgress: (props: CWidgetProgress) => any;
+export declare const CWidgetProgressIcon: (props: CWidgetProgressIcon) => any;
+export declare const CWidgetSimple: (props: CWidgetSimple) => any;
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..d3b69435
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,132 @@
+export {default as CAlert} from './alert/CAlert';
+export {default as CBadge} from './badge/CBadge';
+export {default as CButton} from './button/CButton';
+export {default as CButtonClose} from './button/CButtonClose';
+export {default as CButtonGroup} from './button/CButtonGroup';
+export {default as CButtonToolbar} from './button/CButtonToolbar';
+export {default as CBreadcrumb} from './breadcrumb/CBreadcrumb';
+export {default as CBreadcrumbRouter} from './breadcrumb/CBreadcrumbRouter';
+export {default as CBreadcrumbItem} from './breadcrumb/CBreadcrumbItem';
+export {default as CCallout} from './callout/CCallout';
+export {default as CCard} from './card/CCard';
+export {default as CCardBody} from './card/CCardBody';
+export {default as CCardHeader} from './card/CCardHeader';
+export {default as CCardFooter} from './card/CCardFooter';
+export {default as CCardGroup} from './card/CCardGroup';
+export {default as CCardImg} from './card/CCardImg';
+export {default as CCardImgOverlay} from './card/CCardImgOverlay';
+export {default as CCardLink} from './card/CCardLink';
+export {default as CCardTitle} from './card/CCardTitle';
+export {default as CCardSubtitle} from './card/CCardSubtitle';
+export {default as CCardText} from './card/CCardText';
+export {default as CCarousel} from './carousel/CCarousel';
+export {default as CCarouselItem} from './carousel/CCarouselItem';
+export {default as CCarouselControl} from './carousel/CCarouselControl';
+export {default as CCarouselIndicators} from './carousel/CCarouselIndicators';
+export {default as CCarouselCaption} from './carousel/CCarouselCaption';
+export {default as CCarouselInner} from './carousel/CCarouselInner';
+export {default as CCollapse} from './collapse/CCollapse';
+export {default as CCreateElement} from './create-element/CCreateElement';
+export {default as CDropdown} from './dropdown/CDropdown';
+export {default as CDropdownDivider} from './dropdown/CDropdownDivider';
+export {default as CDropdownHeader} from './dropdown/CDropdownHeader';
+export {default as CDropdownItem} from './dropdown/CDropdownItem';
+export {default as CDropdownMenu} from './dropdown/CDropdownMenu';
+export {default as CDropdownToggle} from './dropdown/CDropdownToggle';
+export {default as CElementCover} from './element-cover/CElementCover';
+export {default as CEmbed} from './embed/CEmbed';
+export {default as CEmbedItem} from './embed/CEmbedItem';
+export {default as CFade} from './fade/CFade';
+export {default as CForm} from './form/CForm';
+export { CValidFeedback, CInvalidFeedback } from './form/CFormFeedback';
+export {default as CLabel} from './form/CLabel';
+export {default as CFormGroup} from './form/CFormGroup';
+export {default as CFormText} from './form/CFormText';
+export {
+  CTextarea,
+  CInput,
+  CInputFile,
+  CInputCheckbox,
+  CInputRadio,
+  CSelect
+}
+from './form/CInput';
+export {default as CInputGroup} from './form/CInputGroup';
+export {CInputGroupPrepend} from './form/CInputGroupAddon';
+export {CInputGroupAppend} from './form/CInputGroupAddon';
+export {default as CInputGroupText} from './form/CInputGroupText';
+export {default as CRow} from './grid/CRow';
+export {default as CCol} from './grid/CCol';
+export {default as CContainer} from './grid/CContainer';
+export {default as CImg} from './image/CImg';
+export {default as CJumbotron} from './jumbotron/CJumbotron';
+export {default as CLink} from './link/CLink';
+export {default as CListGroup} from './list-group/CListGroup';
+export {default as CListGroupItem} from './list-group/CListGroupItem';
+import React from 'react'
+const wrapper = props => {
+  console.warn('CListGroupItemText component is deprecated, please use div tag instead')
+  return <div {...props}></div>
+}
+const heading = props => {
+  console.warn('CListGroupItemHeading component is deprecated, please use h5 tag instead')
+  return <h5 {...props}></h5>
+}
+export { wrapper as CListGroupItemText};
+export { heading as CListGroupItemHeading};
+export {default as CMedia} from './media/CMedia';
+export {default as CMediaBody} from './media/CMediaBody';
+export {default as CModal} from './modal/CModal';
+export {default as CModalBody} from './modal/CModalBody';
+export {default as CModalHeader} from './modal/CModalHeader';
+export {default as CModalFooter} from './modal/CModalFooter';
+export {default as CModalTitle} from './modal/CModalTitle';
+export {default as CNav} from './nav/CNav';
+export {default as CNavItem} from './nav/CNavItem';
+export {default as CNavLink} from './nav/CNavLink';
+export {default as CNavbarBrand} from './navbar/CNavbarBrand';
+export {default as CNavbar} from './navbar/CNavbar';
+export {default as CNavbarNav} from './navbar/CNavbarNav';
+export {default as CNavbarText} from './navbar/CNavbarText';
+export {default as CPagination} from './pagination/CPagination';
+export {default as CProgress} from './progress/CProgress';
+export {default as CProgressBar} from './progress/CProgressBar';
+export {default as CSpinner} from './spinner/CSpinner';
+export {default as CSwitch} from './switch/CSwitch';
+export {default as CDataTable} from './table/CDataTable';
+export {default as CTabs} from './tabs/CTabs';
+export {default as CTabPane} from './tabs/CTabPane';
+export {default as CTabContent} from './tabs/CTabContent';
+export {default as CFooter} from './template/CFooter';
+export {default as CHeader} from './template/CHeader';
+export {default as CHeaderNav} from './template/CHeaderNav';
+export {default as CHeaderNavItem} from './template/CHeaderNavItem';
+export {default as CHeaderNavLink} from './template/CHeaderNavLink';
+export {default as CHeaderBrand} from './template/CHeaderBrand';
+export {default as CSubheader} from './template/CSubheader';
+export {default as CSidebar} from './template/CSidebar';
+export {default as CSidebarBrand} from './template/CSidebarBrand';
+export {default as CSidebarNavDivider} from './template/CSidebarNavDivider';
+export {default as CSidebarNavTitle} from './template/CSidebarNavTitle';
+export {default as CSidebarNavItem} from './template/CSidebarNavItem';
+export {default as CSidebarNavDropdown} from './template/CSidebarNavDropdown';
+export {default as CSidebarFooter} from './template/CSidebarFooter';
+export {default as CSidebarForm} from './template/CSidebarForm';
+export {default as CSidebarHeader} from './template/CSidebarHeader';
+export {default as CSidebarMinimizer} from './template/CSidebarMinimizer';
+export {default as CSidebarNav} from './template/CSidebarNav';
+export {default as CSidebarClose} from './template/CSidebarClose';
+export {default as CToast} from './toast/CToast';
+export {default as CToastHeader} from './toast/CToastHeader';
+export {default as CToastBody} from './toast/CToastBody';
+export {default as CToaster} from './toast/CToaster';
+export {default as CToggler} from './toggler/CToggler';
+export {default as CTooltip} from './tooltip/CTooltip';
+export {default as CPopover} from './tooltip/CPopover';
+// export {default as CPortal} from './portal/CPortal';
+export {default as CWidgetProgress} from './widgets/CWidgetProgress';
+export {default as CWidgetIcon} from './widgets/CWidgetIcon';
+export {default as CWidgetBrand} from './widgets/CWidgetBrand';
+export {default as CWidgetProgressIcon} from './widgets/CWidgetProgressIcon';
+export {default as CWidgetDropdown} from './widgets/CWidgetDropdown';
+export {default as CWidgetSimple} from './widgets/CWidgetSimple';
diff --git a/src/jumbotron/CJumbotron.js b/src/jumbotron/CJumbotron.js
new file mode 100644
index 00000000..cec9cf7b
--- /dev/null
+++ b/src/jumbotron/CJumbotron.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CJumbotron
+
+const CJumbotron = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    fluid,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    'jumbotron',
+    fluid ? 'jumbotron-fluid' : false
+  );
+
+  return (
+    <Tag {...attributes} className={classes} ref={innerRef} />
+  );
+
+}
+
+CJumbotron.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  fluid: PropTypes.bool
+};
+
+CJumbotron.defaultProps = {
+  tag: 'div'
+};
+
+export default CJumbotron;
diff --git a/src/jumbotron/tests/CJumbotron.test.js b/src/jumbotron/tests/CJumbotron.test.js
new file mode 100644
index 00000000..1d22a21b
--- /dev/null
+++ b/src/jumbotron/tests/CJumbotron.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CJumbotron from '../CJumbotron'
+
+configure({ adapter: new Adapter() })
+
+describe('CJumbotron', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CJumbotron/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CJumbotron
+        className='class-name'
+        fluid
+      >
+        CJumbotron
+      </CJumbotron>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/jumbotron/tests/__snapshots__/CJumbotron.test.js.snap b/src/jumbotron/tests/__snapshots__/CJumbotron.test.js.snap
new file mode 100644
index 00000000..c65177ac
--- /dev/null
+++ b/src/jumbotron/tests/__snapshots__/CJumbotron.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CJumbotron renders basic wrapper correctly 1`] = `
+<div
+  className="jumbotron"
+/>
+`;
+
+exports[`CJumbotron renders customized wrapper correctly 1`] = `
+<div
+  className="class-name jumbotron jumbotron-fluid"
+>
+  CJumbotron
+</div>
+`;
diff --git a/src/link/CLink.js b/src/link/CLink.js
new file mode 100644
index 00000000..6ef78127
--- /dev/null
+++ b/src/link/CLink.js
@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { NavLink } from 'react-router-dom'
+
+//component - CoreUI / CLink
+const CLink = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    active,
+    href,
+    onClick,
+    disabled,
+    ...rest
+  } = props
+
+  const to = rest ? rest.to : null
+  const click = e => {
+    if ((!href && !to) || href === '#') {
+      e.preventDefault()
+    }
+    !disabled && onClick && onClick(e)
+  }
+
+  // render
+
+  const classes = classNames(
+    active && 'active',
+    disabled && 'disabled',
+    className
+  )
+
+  return to ? (
+    <NavLink
+      {...rest}
+      className={classes}
+      onClick={click}
+      ref={innerRef}
+    />
+  ) : (
+    <a
+      href={href || '#'}
+      className={classes}
+      rel={rest.target === '_blank' ? 'noopener norefferer' : null}
+      {...rest}
+      onClick={click}
+      ref={innerRef}
+    />
+  )
+}
+
+CLink.propTypes = {
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  active: PropTypes.bool,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  disabled: PropTypes.bool,
+  ...NavLink.propTypes,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  to: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func])
+};
+
+// CLink.sortAttributes = (attributesToSort) => {
+//   const attributes = {}
+//   const linkProps = {}
+//   Object.entries(attributesToSort || {}).forEach(([key, value]) => {
+//     if (Object.keys(CLink.propTypes).includes(key)) {
+//       linkProps[key] = value
+//     } else {
+//       attributes[key] = value
+//     }
+//   })
+//   return { linkProps, attributes }
+// }
+
+export default CLink
diff --git a/src/link/tests/CLink.test.js b/src/link/tests/CLink.test.js
new file mode 100644
index 00000000..ae6f7c10
--- /dev/null
+++ b/src/link/tests/CLink.test.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CLink from '../CLink'
+
+configure({ adapter: new Adapter() })
+
+describe('CLink', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CLink/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CLink
+        className='class-name'
+        active
+        href='href'
+        disabled
+      >
+        CLink
+      </CLink>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('on click', () => {
+    const clickFn = jest.fn();
+    const component = mount(
+      <CLink
+        className='class-name'
+        href='#'
+        onClick={clickFn}
+      >
+        CLink
+      </CLink>
+    );
+    component.find('a').simulate('click')
+    expect(clickFn).toHaveBeenCalledTimes(1);
+  })
+})
diff --git a/src/link/tests/__snapshots__/CLink.test.js.snap b/src/link/tests/__snapshots__/CLink.test.js.snap
new file mode 100644
index 00000000..91c97046
--- /dev/null
+++ b/src/link/tests/__snapshots__/CLink.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CLink renders basic wrapper correctly 1`] = `
+<a
+  className=""
+  href="#"
+  onClick={[Function]}
+  rel={null}
+/>
+`;
+
+exports[`CLink renders customized wrapper correctly 1`] = `
+<a
+  className="active disabled class-name"
+  href="href"
+  onClick={[Function]}
+  rel={null}
+>
+  CLink
+</a>
+`;
diff --git a/src/list-group/CListGroup.js b/src/list-group/CListGroup.js
new file mode 100644
index 00000000..75bf5cd7
--- /dev/null
+++ b/src/list-group/CListGroup.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import {tagPropType} from '../utils/helper.js'
+
+//component - CoreUI / CListGroup
+
+const CListGroup = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    horizontal,
+    flush,
+    accent,
+    ...attributes
+  } = props;
+
+  // render
+
+  const classes = classNames(
+    className,
+    'list-group', 
+    {
+      [`list-group-horizontal-${horizontal}`]: horizontal,
+      'list-group-flush': flush,
+      'list-group-accent': accent
+    }
+  );
+
+  return (
+    <Tag 
+      className={classes}
+      role="list-items"
+      {...attributes}
+      ref={innerRef}
+    />
+  )
+
+}
+
+CListGroup.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  flush: PropTypes.bool,
+  horizontal: PropTypes.string,
+  accent: PropTypes.bool
+};
+
+CListGroup.defaultProps = {
+  tag: 'ul',
+};
+
+export default CListGroup
diff --git a/src/list-group/CListGroupItem.js b/src/list-group/CListGroupItem.js
new file mode 100644
index 00000000..1745a6f8
--- /dev/null
+++ b/src/list-group/CListGroupItem.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import CLink from '../link/CLink'
+
+//component - CoreUI / CListGroupItem
+
+const CListGroupItem = props => {
+
+  let {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    active,
+    disabled,
+    action,
+    color,
+    accent,
+    ...rest
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className, 'list-group-item',
+    {
+      'list-group-item-action': action||rest.href||rest.to||Tag=='button',
+      active,
+      disabled,
+      [`list-group-item-${color}`]: color,
+      [`list-group-item-accent-${accent}`]: accent
+    }
+  )
+
+  if (props.href || props.to){
+    return (
+      <CLink {...rest} className={classes} innerRef={innerRef}/>
+    )
+  }
+  else {
+    return (
+      <Tag {...rest} className={classes} ref={innerRef}/>
+    )
+  }
+
+}
+
+CListGroupItem.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.any,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  active: PropTypes.bool,
+  disabled: PropTypes.bool,
+  color: PropTypes.string,
+  accent: PropTypes.string,
+  action: PropTypes.bool
+};
+
+CListGroupItem.defaultProps = {
+  tag: 'li'
+};
+
+export default CListGroupItem
diff --git a/src/list-group/CListGroupItemHeading.js b/src/list-group/CListGroupItemHeading.js
new file mode 100644
index 00000000..8d7b11ce
--- /dev/null
+++ b/src/list-group/CListGroupItemHeading.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CListGroupItemHeading
+const CListGroupItemHeading = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  // render
+  const classes = classNames('list-group-item-heading', className)
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  )
+
+}
+
+CListGroupItemHeading.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.any,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
+}
+
+CListGroupItemHeading.defaultProps = {
+  tag: 'h5'
+}
+
+export default CListGroupItemHeading
diff --git a/src/list-group/CListGroupItemText.js b/src/list-group/CListGroupItemText.js
new file mode 100644
index 00000000..dd86e5ca
--- /dev/null
+++ b/src/list-group/CListGroupItemText.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CListGroupItemText
+const CListGroupItemText = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames('list-group-item-text', className)
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  )
+
+}
+
+CListGroupItemText.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.any,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
+}
+
+CListGroupItemText.defaultProps = {
+  tag: 'p'
+}
+
+export default CListGroupItemText
diff --git a/src/list-group/tests/CListGroup.test.js b/src/list-group/tests/CListGroup.test.js
new file mode 100644
index 00000000..b6646a4d
--- /dev/null
+++ b/src/list-group/tests/CListGroup.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CListGroup from '../CListGroup'
+
+configure({ adapter: new Adapter() })
+
+describe('CListGroup', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CListGroup/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CListGroup
+        className='class-name'
+        horizontal='horizontal'
+        flush
+        accent
+      >
+        CListGroup
+      </CListGroup>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/list-group/tests/CListGroupItem.test.js b/src/list-group/tests/CListGroupItem.test.js
new file mode 100644
index 00000000..fb200eca
--- /dev/null
+++ b/src/list-group/tests/CListGroupItem.test.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CListGroupItem from '../CListGroupItem'
+
+configure({ adapter: new Adapter() })
+
+describe('CListGroupItem', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CListGroupItem/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CListGroupItem
+        className='class-name'
+        active
+        disabled
+        action
+        color='warning'
+        accent='accent'
+      >
+        CListGroupItem
+      </CListGroupItem>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly two', () => {
+    const componentCustomized = renderer.create(
+      <CListGroupItem
+        className='class-name'
+        active
+        disabled
+        action
+        color='warning'
+        accent='accent'
+        href='href'
+      >
+        CListGroupItem
+      </CListGroupItem>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/list-group/tests/CListGroupItemHeading.test.js b/src/list-group/tests/CListGroupItemHeading.test.js
new file mode 100644
index 00000000..905084c6
--- /dev/null
+++ b/src/list-group/tests/CListGroupItemHeading.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CListGroupItemHeading from '../CListGroupItemHeading'
+
+configure({ adapter: new Adapter() })
+
+describe('CListGroupItemHeading', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CListGroupItemHeading/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CListGroupItemHeading
+        className='class-name'
+      >
+        CListGroupItemHeading
+      </CListGroupItemHeading>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/list-group/tests/CListGroupItemText.test.js b/src/list-group/tests/CListGroupItemText.test.js
new file mode 100644
index 00000000..87d8bfca
--- /dev/null
+++ b/src/list-group/tests/CListGroupItemText.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CListGroupItemText from '../CListGroupItemText'
+
+configure({ adapter: new Adapter() })
+
+describe('CListGroupItemText', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CListGroupItemText/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CListGroupItemText
+        className='class-name'
+      >
+        CListGroupItemText
+      </CListGroupItemText>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/list-group/tests/__snapshots__/CListGroup.test.js.snap b/src/list-group/tests/__snapshots__/CListGroup.test.js.snap
new file mode 100644
index 00000000..e5a4f42c
--- /dev/null
+++ b/src/list-group/tests/__snapshots__/CListGroup.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CListGroup renders basic wrapper correctly 1`] = `
+<ul
+  className="list-group"
+  role="list-items"
+/>
+`;
+
+exports[`CListGroup renders customized wrapper correctly 1`] = `
+<ul
+  className="class-name list-group list-group-horizontal-horizontal list-group-flush list-group-accent"
+  role="list-items"
+>
+  CListGroup
+</ul>
+`;
diff --git a/src/list-group/tests/__snapshots__/CListGroupItem.test.js.snap b/src/list-group/tests/__snapshots__/CListGroupItem.test.js.snap
new file mode 100644
index 00000000..82d1c074
--- /dev/null
+++ b/src/list-group/tests/__snapshots__/CListGroupItem.test.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CListGroupItem renders basic wrapper correctly 1`] = `
+<li
+  className="list-group-item"
+/>
+`;
+
+exports[`CListGroupItem renders customized wrapper correctly 1`] = `
+<li
+  className="class-name list-group-item list-group-item-action active disabled list-group-item-warning list-group-item-accent-accent"
+>
+  CListGroupItem
+</li>
+`;
+
+exports[`CListGroupItem renders customized wrapper correctly two 1`] = `
+<a
+  className="class-name list-group-item list-group-item-action active disabled list-group-item-warning list-group-item-accent-accent"
+  href="href"
+  onClick={[Function]}
+  rel={null}
+>
+  CListGroupItem
+</a>
+`;
diff --git a/src/list-group/tests/__snapshots__/CListGroupItemHeading.test.js.snap b/src/list-group/tests/__snapshots__/CListGroupItemHeading.test.js.snap
new file mode 100644
index 00000000..58c0ac2a
--- /dev/null
+++ b/src/list-group/tests/__snapshots__/CListGroupItemHeading.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CListGroupItemHeading renders basic wrapper correctly 1`] = `
+<h5
+  className="list-group-item-heading"
+/>
+`;
+
+exports[`CListGroupItemHeading renders customized wrapper correctly 1`] = `
+<h5
+  className="list-group-item-heading class-name"
+>
+  CListGroupItemHeading
+</h5>
+`;
diff --git a/src/list-group/tests/__snapshots__/CListGroupItemText.test.js.snap b/src/list-group/tests/__snapshots__/CListGroupItemText.test.js.snap
new file mode 100644
index 00000000..eb06d956
--- /dev/null
+++ b/src/list-group/tests/__snapshots__/CListGroupItemText.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CListGroupItemText renders basic wrapper correctly 1`] = `
+<p
+  className="list-group-item-text"
+/>
+`;
+
+exports[`CListGroupItemText renders customized wrapper correctly 1`] = `
+<p
+  className="list-group-item-text class-name"
+>
+  CListGroupItemText
+</p>
+`;
diff --git a/src/media/CMedia.js b/src/media/CMedia.js
new file mode 100644
index 00000000..b4bb8913
--- /dev/null
+++ b/src/media/CMedia.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CMedia
+
+const CMedia = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames('media', className)
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef} />
+  )
+}
+
+CMedia.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+export default CMedia
diff --git a/src/media/CMediaBody.js b/src/media/CMediaBody.js
new file mode 100644
index 00000000..0ebfe4de
--- /dev/null
+++ b/src/media/CMediaBody.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CMediaBody
+
+const CMediaBody = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'media-body', className
+  )
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CMediaBody.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+export default CMediaBody
diff --git a/src/media/tests/CMedia.test.js b/src/media/tests/CMedia.test.js
new file mode 100644
index 00000000..24c23f84
--- /dev/null
+++ b/src/media/tests/CMedia.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CMedia from '../CMedia'
+
+configure({ adapter: new Adapter() })
+
+describe('CMedia', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CMedia/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CMedia
+        className='class-name'
+      >
+        CMedia
+      </CMedia>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/media/tests/CMediaBody.test.js b/src/media/tests/CMediaBody.test.js
new file mode 100644
index 00000000..f7a9aa45
--- /dev/null
+++ b/src/media/tests/CMediaBody.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CMediaBody from '../CMediaBody'
+
+configure({ adapter: new Adapter() })
+
+describe('CMediaBody', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CMediaBody/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CMediaBody
+        className='class-name'
+      >
+        CMediaBody
+      </CMediaBody>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/media/tests/__snapshots__/CMedia.test.js.snap b/src/media/tests/__snapshots__/CMedia.test.js.snap
new file mode 100644
index 00000000..d7f6343d
--- /dev/null
+++ b/src/media/tests/__snapshots__/CMedia.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CMedia renders basic wrapper correctly 1`] = `
+<div
+  className="media"
+/>
+`;
+
+exports[`CMedia renders customized wrapper correctly 1`] = `
+<div
+  className="media class-name"
+>
+  CMedia
+</div>
+`;
diff --git a/src/media/tests/__snapshots__/CMediaBody.test.js.snap b/src/media/tests/__snapshots__/CMediaBody.test.js.snap
new file mode 100644
index 00000000..5cc5cf08
--- /dev/null
+++ b/src/media/tests/__snapshots__/CMediaBody.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CMediaBody renders basic wrapper correctly 1`] = `
+<div
+  className="media-body"
+/>
+`;
+
+exports[`CMediaBody renders customized wrapper correctly 1`] = `
+<div
+  className="media-body class-name"
+>
+  CMediaBody
+</div>
+`;
diff --git a/src/modal/CModal.js b/src/modal/CModal.js
new file mode 100644
index 00000000..274b17a7
--- /dev/null
+++ b/src/modal/CModal.js
@@ -0,0 +1,166 @@
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
+
+export const Context = React.createContext({})
+
+const getTransitionClass = s => {
+  return  s === 'entering' ? 'd-block' :
+          s === 'entered' ? 'show d-block' :
+          s === 'exiting' ? 'd-block' : ''
+}
+
+//animation fixes introduced thanks to Sirlordt
+//component - CoreUI / CModal
+const CModal = props => {
+
+  const {
+    innerRef,
+    show,
+    centered,
+    size,
+    color,
+    borderColor,
+    fade,
+    backdrop,
+    closeOnBackdrop,
+    onOpened,
+    onClosed,
+    addContentClass,
+    onClose,
+    className,
+    scrollable,
+    ...attributes
+  } = props
+
+  const [isOpen, setIsOpen] = useState(false)
+  const [modalTrigger, setModalTrigger] = useState(false)
+  const modalClick = e => e.target.dataset.modal && closeOnBackdrop && close()
+
+  useEffect(() => {
+    setIsOpen(show)
+  }, [show])
+
+  const onKeypress = e => e.keyCode == '27' && close()
+
+  useEffect(() => {
+    isOpen && document.addEventListener('keydown', onKeypress)
+    return () => document.removeEventListener('keydown', onKeypress)
+  }, [isOpen])
+
+  const close = () => {
+    onClose && onClose()
+    setIsOpen(false)
+  }
+
+  const onEntered = () => {
+    setModalTrigger(document.querySelector(':focus'))
+    nodeRef.current.focus()
+    onOpened && onOpened()
+  }
+
+  const onExited = () => {
+    modalTrigger && modalTrigger.focus()
+    onClosed && onClosed()
+  }
+
+  const modalClasses = classNames(
+    'modal overflow-auto fade', {
+      [`modal-${color}`]: color
+    },
+    className
+  )
+
+  const dialogClasses = classNames(
+    'modal-dialog', {
+      'modal-dialog-scrollable': scrollable,
+      'modal-dialog-centered': centered,
+      [`modal-${size}`]: size
+    }
+  )
+
+  const contentClasses = classNames(
+    'modal-content', {
+      [`border-${borderColor}`]: borderColor,
+    },
+    addContentClass
+  )
+
+  const backdropClasses = classNames({
+    'modal-backdrop': true,
+    'fade': fade,
+    'show': isOpen || fade
+  })
+
+  const nodeRef = useRef(null)
+  return (
+    <div onClick={modalClick}>
+      <Transition
+        in={Boolean(isOpen)}
+        onEntered={onEntered}
+        onExited={onExited}
+        timeout={fade ? 150 : 0}
+        nodeRef={nodeRef}
+      >
+        {(status) => {
+          let transitionClass = getTransitionClass(status)
+          const classes = classNames(
+            modalClasses,
+            transitionClass
+          )
+          return (
+            <div
+              tabIndex="-1"
+              role="dialog"
+              className={classes}
+              data-modal={true}
+              ref={nodeRef}
+            >
+              <div className={dialogClasses} role="document">
+                <div
+                  {...attributes}
+                  className={contentClasses}
+                  ref={innerRef}
+                >
+                  <Context.Provider value={{close}}>
+                    {props.children}
+                  </Context.Provider>
+                </div>
+              </div>
+            </div>
+          )
+        }}
+
+      </Transition>
+      { backdrop && isOpen && <div className={backdropClasses}></div> }
+    </div>
+  )
+}
+
+CModal.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  show: PropTypes.bool,
+  centered: PropTypes.bool,
+  size: PropTypes.oneOf(['', 'sm', 'lg', 'xl']),
+  backdrop: PropTypes.bool,
+  color: PropTypes.string,
+  borderColor: PropTypes.string,
+  onOpened: PropTypes.func,
+  onClosed: PropTypes.func,
+  fade: PropTypes.bool,
+  closeOnBackdrop: PropTypes.bool,
+  onClose: PropTypes.func,
+  addContentClass: PropTypes.string,
+  scrollable: PropTypes.bool,
+}
+
+CModal.defaultProps = {
+  backdrop: true,
+  fade: true,
+  closeOnBackdrop: true
+}
+
+export default CModal
diff --git a/src/modal/CModalBody.js b/src/modal/CModalBody.js
new file mode 100644
index 00000000..5e07ac46
--- /dev/null
+++ b/src/modal/CModalBody.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CModalBody
+
+const CModalBody = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    'modal-body'
+  );
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  );
+
+}
+
+CModalBody.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CModalBody.defaultProps = {
+  tag: 'div',
+};
+
+export default CModalBody;
diff --git a/src/modal/CModalFooter.js b/src/modal/CModalFooter.js
new file mode 100644
index 00000000..cb367eaa
--- /dev/null
+++ b/src/modal/CModalFooter.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {tagPropType} from '../utils/helper.js';
+
+//component - CoreUI / CModalFooter
+
+const CModalFooter = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props;
+
+  //render
+
+  const classes = classNames(
+    className,
+    'modal-footer'
+  );
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  );
+
+}
+
+CModalFooter.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CModalFooter.defaultProps = {
+  tag: 'footer'
+};
+
+export default CModalFooter;
diff --git a/src/modal/CModalHeader.js b/src/modal/CModalHeader.js
new file mode 100644
index 00000000..8155563b
--- /dev/null
+++ b/src/modal/CModalHeader.js
@@ -0,0 +1,52 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+import { Context } from './CModal'
+import CButtonClose from '../button/CButtonClose'
+//component - CoreUI / CModalHeader
+
+const CModalHeader = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    closeButton,
+    ...attributes
+  } = props
+
+  const { close } = useContext(Context)
+  
+  //render
+
+
+  const classes = classNames(
+    className,
+    'modal-header'
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}>
+      {props.children}
+      {closeButton && <CButtonClose onClick={close}/>}
+    </Tag>
+  )
+
+}
+
+CModalHeader.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  closeButton: PropTypes.bool
+};
+
+CModalHeader.defaultProps = {
+  tag: 'header'
+};
+
+export default CModalHeader
diff --git a/src/modal/CModalTitle.js b/src/modal/CModalTitle.js
new file mode 100644
index 00000000..19dd740e
--- /dev/null
+++ b/src/modal/CModalTitle.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CModalTitle
+const CModalTitle = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'modal-title', className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  )
+}
+
+CModalTitle.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CModalTitle.defaultProps = {
+  tag: 'h5'
+};
+
+export default CModalTitle
diff --git a/src/modal/tests/CModal.test.js b/src/modal/tests/CModal.test.js
new file mode 100644
index 00000000..7acdf044
--- /dev/null
+++ b/src/modal/tests/CModal.test.js
@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CModal from '../CModal'
+
+configure({ adapter: new Adapter() })
+
+describe('CModal', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CModal/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CModal
+        className='class-name'
+        show
+        centered
+        size='lg'
+        backdrop
+        color='warning'
+        borderColor='info'
+        fade
+        closeOnBackdrop
+        addContentClass='content-class'
+      >
+        CModal
+      </CModal>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders modal dialog scrollable correctly', () => {
+    const componentCustomized = renderer.create(
+      <CModal
+        scrollable
+        color='danger'
+      >
+        CModal modal-dialog-scrollable
+      </CModal>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('run onClose function after click modal', () => {
+    jest.useFakeTimers()
+    const onClose = jest.fn();
+    const component = mount(
+      
+        <CModal
+          className='class-name'
+          onClose={onClose}
+          closeOnBackdrop
+          show
+        >
+          CModal
+        </CModal>
+    );
+    component.find('.modal').simulate('click')
+    jest.runAllTimers();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  })
+})
diff --git a/src/modal/tests/CModalBody.test.js b/src/modal/tests/CModalBody.test.js
new file mode 100644
index 00000000..21b14d07
--- /dev/null
+++ b/src/modal/tests/CModalBody.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CModalBody from '../CModalBody'
+
+configure({ adapter: new Adapter() })
+
+describe('CModalBody', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CModalBody/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CModalBody
+        className='class-name'
+      >
+        CModalBody
+      </CModalBody>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/modal/tests/CModalFooter.test.js b/src/modal/tests/CModalFooter.test.js
new file mode 100644
index 00000000..f8a17e43
--- /dev/null
+++ b/src/modal/tests/CModalFooter.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CModalFooter from '../CModalFooter'
+
+configure({ adapter: new Adapter() })
+
+describe('CModalFooter', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CModalFooter/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CModalFooter
+        className='class-name'
+      >
+        CAlert
+      </CModalFooter>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/modal/tests/CModalHeader.test.js b/src/modal/tests/CModalHeader.test.js
new file mode 100644
index 00000000..09b4ec48
--- /dev/null
+++ b/src/modal/tests/CModalHeader.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CModalHeader from '../CModalHeader'
+
+configure({ adapter: new Adapter() })
+
+describe('CModalHeader', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CModalHeader/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CModalHeader
+        className='class-name'
+        closeButton
+      >
+        CModalHeader
+      </CModalHeader>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/modal/tests/CModalTitle.test.js b/src/modal/tests/CModalTitle.test.js
new file mode 100644
index 00000000..f23ecc4c
--- /dev/null
+++ b/src/modal/tests/CModalTitle.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CModalTitle from '../CModalTitle'
+
+configure({ adapter: new Adapter() })
+
+describe('CModalTitle', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CModalTitle/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CModalTitle
+        className='class-name'
+      >
+        CModalTitle
+      </CModalTitle>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/modal/tests/__snapshots__/CModal.test.js.snap b/src/modal/tests/__snapshots__/CModal.test.js.snap
new file mode 100644
index 00000000..5aff88c0
--- /dev/null
+++ b/src/modal/tests/__snapshots__/CModal.test.js.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModal renders basic wrapper correctly 1`] = `
+<div
+  onClick={[Function]}
+>
+  <div
+    className="modal overflow-auto fade"
+    data-modal={true}
+    role="dialog"
+    tabIndex="-1"
+  >
+    <div
+      className="modal-dialog"
+      role="document"
+    >
+      <div
+        className="modal-content"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CModal renders customized wrapper correctly 1`] = `
+<div
+  onClick={[Function]}
+>
+  <div
+    className="modal overflow-auto fade modal-warning class-name d-block"
+    data-modal={true}
+    role="dialog"
+    tabIndex="-1"
+  >
+    <div
+      className="modal-dialog modal-dialog-centered modal-lg"
+      role="document"
+    >
+      <div
+        className="modal-content border-info content-class"
+      >
+        CModal
+      </div>
+    </div>
+  </div>
+  <div
+    className="modal-backdrop fade show"
+  />
+</div>
+`;
+
+exports[`CModal renders modal dialog scrollable correctly 1`] = `
+<div
+  onClick={[Function]}
+>
+  <div
+    className="modal overflow-auto fade modal-danger"
+    data-modal={true}
+    role="dialog"
+    tabIndex="-1"
+  >
+    <div
+      className="modal-dialog modal-dialog-scrollable"
+      role="document"
+    >
+      <div
+        className="modal-content"
+      >
+        CModal modal-dialog-scrollable
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/modal/tests/__snapshots__/CModalBody.test.js.snap b/src/modal/tests/__snapshots__/CModalBody.test.js.snap
new file mode 100644
index 00000000..cbdfdbfc
--- /dev/null
+++ b/src/modal/tests/__snapshots__/CModalBody.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalBody renders basic wrapper correctly 1`] = `
+<div
+  className="modal-body"
+/>
+`;
+
+exports[`CModalBody renders customized wrapper correctly 1`] = `
+<div
+  className="class-name modal-body"
+>
+  CModalBody
+</div>
+`;
diff --git a/src/modal/tests/__snapshots__/CModalFooter.test.js.snap b/src/modal/tests/__snapshots__/CModalFooter.test.js.snap
new file mode 100644
index 00000000..a5c3e305
--- /dev/null
+++ b/src/modal/tests/__snapshots__/CModalFooter.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalFooter renders basic wrapper correctly 1`] = `
+<footer
+  className="modal-footer"
+/>
+`;
+
+exports[`CModalFooter renders customized wrapper correctly 1`] = `
+<footer
+  className="class-name modal-footer"
+>
+  CAlert
+</footer>
+`;
diff --git a/src/modal/tests/__snapshots__/CModalHeader.test.js.snap b/src/modal/tests/__snapshots__/CModalHeader.test.js.snap
new file mode 100644
index 00000000..b73be5e0
--- /dev/null
+++ b/src/modal/tests/__snapshots__/CModalHeader.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalHeader renders basic wrapper correctly 1`] = `
+<header
+  className="modal-header"
+/>
+`;
+
+exports[`CModalHeader renders customized wrapper correctly 1`] = `
+<header
+  className="class-name modal-header"
+>
+  CModalHeader
+  <button
+    aria-label="Close"
+    className="close"
+  >
+    ×
+  </button>
+</header>
+`;
diff --git a/src/modal/tests/__snapshots__/CModalTitle.test.js.snap b/src/modal/tests/__snapshots__/CModalTitle.test.js.snap
new file mode 100644
index 00000000..15df8707
--- /dev/null
+++ b/src/modal/tests/__snapshots__/CModalTitle.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CModalTitle renders basic wrapper correctly 1`] = `
+<h5
+  className="modal-title"
+/>
+`;
+
+exports[`CModalTitle renders customized wrapper correctly 1`] = `
+<h5
+  className="modal-title class-name"
+>
+  CModalTitle
+</h5>
+`;
diff --git a/src/nav/CNav.js b/src/nav/CNav.js
new file mode 100644
index 00000000..83f6abc5
--- /dev/null
+++ b/src/nav/CNav.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CNav
+
+const CNav = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    variant,
+    vertical,
+    justified,
+    fill,
+    inCard,
+    ...attributes
+  } = props
+
+  const verticalClass = `flex${vertical === true ? '' : `-${vertical}`}-column`
+
+  //render
+
+  const classes = classNames(
+    'nav',
+    vertical && verticalClass,
+    {
+      [`nav-${variant}`]: variant,
+      'nav-justified': justified,
+      'nav-fill': fill,
+      [`card-header-${variant}`]: inCard && variant
+    },
+    className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  )
+
+}
+
+CNav.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  variant: PropTypes.oneOf(['', 'tabs', 'pills']),
+  vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  justified: PropTypes.bool,
+  fill: PropTypes.bool,
+  inCard: PropTypes.bool
+};
+
+CNav.defaultProps = {
+  tag: 'ul'
+};
+
+export default CNav
diff --git a/src/nav/CNavItem.js b/src/nav/CNavItem.js
new file mode 100644
index 00000000..bb60d99d
--- /dev/null
+++ b/src/nav/CNavItem.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CNavItem
+
+const CNavItem = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'nav-item',
+    className
+  )
+
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CNavItem.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+CNavItem.defaultProps = {
+  tag: 'li',
+};
+
+export default CNavItem
diff --git a/src/nav/CNavLink.js b/src/nav/CNavLink.js
new file mode 100644
index 00000000..63f135e2
--- /dev/null
+++ b/src/nav/CNavLink.js
@@ -0,0 +1,56 @@
+import React, { useContext, useState, createRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import CLink from '../link/CLink'
+
+import { Context } from '../tabs/CTabs'
+
+const getIndex = (el) => Array.from(el.parentNode.children).indexOf(el)
+
+const getState = ({ current: el }) => {
+  const hasSiblings = el.parentElement.childNodes.length > 1
+  return el.dataset.tab || getIndex(hasSiblings ? el : el.parentElement)
+}
+
+const CNavLink = props => {
+
+  const {
+    innerRef,
+    className,
+    onClick,
+    ...rest
+  } = props
+
+  const tabState = useContext(Context)
+  const actTab = (tabState || {}).active
+  const ref = createRef()
+  innerRef && innerRef(ref)
+  const [active, setActive] = useState()
+
+  useEffect(() => {
+    typeof actTab !== 'undefined' && setActive(getState(ref) === actTab)
+  }, [actTab])
+
+  const click = (e) => {
+    onClick && onClick(e)
+    tabState && tabState.setActiveTab(getState(ref))
+  }
+
+  return (
+    <CLink 
+      active={active}
+      {...rest}
+      innerRef={ref}
+      onClick={click} 
+      className={['nav-link', className]}
+    />
+  )
+}
+
+CNavLink.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  onClick: PropTypes.func
+};
+
+export default CNavLink
diff --git a/src/nav/tests/CNav.test.js b/src/nav/tests/CNav.test.js
new file mode 100644
index 00000000..a7637d45
--- /dev/null
+++ b/src/nav/tests/CNav.test.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CNav from '../CNav'
+
+configure({ adapter: new Adapter() })
+
+describe('CNav', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CNav/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CNav
+        className='class-name'
+        variant='pills'
+        vertical
+        justified
+        fill
+        inCard
+      >
+        CNav
+      </CNav>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/nav/tests/CNavItem.test.js b/src/nav/tests/CNavItem.test.js
new file mode 100644
index 00000000..b4653c17
--- /dev/null
+++ b/src/nav/tests/CNavItem.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CNavItem from '../CNavItem'
+
+configure({ adapter: new Adapter() })
+
+describe('CNavItem', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CNavItem/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CNavItem
+        className='class-name'
+      >
+        CNavItem
+      </CNavItem>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/nav/tests/CNavLink.test.js b/src/nav/tests/CNavLink.test.js
new file mode 100644
index 00000000..0d463510
--- /dev/null
+++ b/src/nav/tests/CNavLink.test.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CNavLink from '../CNavLink'
+
+configure({ adapter: new Adapter() })
+
+describe('CNavLink', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CNavLink/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CNavLink
+        className='class-name'
+      >
+        CNavLink
+      </CNavLink>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('on click', () => {
+    const clickFn = jest.fn();
+    const component = mount(
+      <CNavLink
+        className='class-name'
+        onClick={clickFn}
+      >
+        CNavLink
+      </CNavLink>
+    );
+    component.find('a').simulate('click')
+    expect(clickFn).toHaveBeenCalledTimes(1);
+  })
+})
diff --git a/src/nav/tests/__snapshots__/CNav.test.js.snap b/src/nav/tests/__snapshots__/CNav.test.js.snap
new file mode 100644
index 00000000..df2379d0
--- /dev/null
+++ b/src/nav/tests/__snapshots__/CNav.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNav renders basic wrapper correctly 1`] = `
+<ul
+  className="nav"
+/>
+`;
+
+exports[`CNav renders customized wrapper correctly 1`] = `
+<ul
+  className="nav flex-column nav-pills nav-justified nav-fill card-header-pills class-name"
+>
+  CNav
+</ul>
+`;
diff --git a/src/nav/tests/__snapshots__/CNavItem.test.js.snap b/src/nav/tests/__snapshots__/CNavItem.test.js.snap
new file mode 100644
index 00000000..98753c7b
--- /dev/null
+++ b/src/nav/tests/__snapshots__/CNavItem.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavItem renders basic wrapper correctly 1`] = `
+<li
+  className="nav-item"
+/>
+`;
+
+exports[`CNavItem renders customized wrapper correctly 1`] = `
+<li
+  className="nav-item class-name"
+>
+  CNavItem
+</li>
+`;
diff --git a/src/nav/tests/__snapshots__/CNavLink.test.js.snap b/src/nav/tests/__snapshots__/CNavLink.test.js.snap
new file mode 100644
index 00000000..aff44dee
--- /dev/null
+++ b/src/nav/tests/__snapshots__/CNavLink.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavLink renders basic wrapper correctly 1`] = `
+<a
+  className="nav-link"
+  href="#"
+  onClick={[Function]}
+  rel={null}
+/>
+`;
+
+exports[`CNavLink renders customized wrapper correctly 1`] = `
+<a
+  className="nav-link class-name"
+  href="#"
+  onClick={[Function]}
+  rel={null}
+>
+  CNavLink
+</a>
+`;
diff --git a/src/navbar/CNavbar.js b/src/navbar/CNavbar.js
new file mode 100644
index 00000000..d712ccc5
--- /dev/null
+++ b/src/navbar/CNavbar.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CNavbar
+
+const CNavbar = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    expandable,
+    light,
+    fixed,
+    sticky,
+    color,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'navbar', className,
+    light ? 'navbar-light' : 'navbar-dark',
+    {
+      [`navbar-expand${expandable===true ? '': `-${expandable}`}`]: expandable,
+      [`bg-${color}`]: color,
+      [`fixed-${fixed}`]: fixed,
+      'sticky-top': sticky
+    }
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CNavbar.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  light: PropTypes.bool,
+  color: PropTypes.string,
+  fixed: PropTypes.oneOf(['', 'top', 'bottom']),
+  sticky: PropTypes.bool,
+  expandable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+};
+
+CNavbar.defaultProps = {
+  tag: 'nav'
+};
+
+export default CNavbar;
diff --git a/src/navbar/CNavbarBrand.js b/src/navbar/CNavbarBrand.js
new file mode 100644
index 00000000..1e575d09
--- /dev/null
+++ b/src/navbar/CNavbarBrand.js
@@ -0,0 +1,12 @@
+/* eslint react/prop-types: 0 */
+import React from 'react'
+import CBrand from '../utils/CBrand'
+
+//component - CoreUI / CNavbarBrand
+const CNavbarBrand = props => {
+  return (
+    <CBrand {...props} className={['navbar-brand', props.className]}/>
+  )
+}
+
+export default CNavbarBrand
\ No newline at end of file
diff --git a/src/navbar/CNavbarNav.js b/src/navbar/CNavbarNav.js
new file mode 100644
index 00000000..7b61ecf0
--- /dev/null
+++ b/src/navbar/CNavbarNav.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CNavbarNav
+
+const CNavbarNav = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'navbar-nav', className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+
+}
+
+CNavbarNav.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CNavbarNav.defaultProps = {
+  tag: 'ul'
+};
+
+export default CNavbarNav
diff --git a/src/navbar/CNavbarText.js b/src/navbar/CNavbarText.js
new file mode 100644
index 00000000..0859cbed
--- /dev/null
+++ b/src/navbar/CNavbarText.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CNavbarText
+
+const CNavbarText = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'navbar-text', className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  )
+}
+
+CNavbarText.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CNavbarText.defaultProps = {
+  tag: 'div'
+};
+
+export default CNavbarText
diff --git a/src/navbar/tests/CNavbar.test.js b/src/navbar/tests/CNavbar.test.js
new file mode 100644
index 00000000..56e05e37
--- /dev/null
+++ b/src/navbar/tests/CNavbar.test.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CNavbar from '../CNavbar'
+
+configure({ adapter: new Adapter() })
+
+describe('CNavbar', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CNavbar/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CNavbar
+        className='class-name'
+        expandable
+        light
+        color='warning'
+        fixed='bottom'
+        sticky
+        expandable
+      >
+        CNavbar
+      </CNavbar>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/navbar/tests/CNavbarBrand.test.js b/src/navbar/tests/CNavbarBrand.test.js
new file mode 100644
index 00000000..8171d53c
--- /dev/null
+++ b/src/navbar/tests/CNavbarBrand.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CNavbarBrand from '../CNavbarBrand'
+
+configure({ adapter: new Adapter() })
+
+describe('CNavbarBrand', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CNavbarBrand/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CNavbarBrand
+        className='class-name'
+      >
+        CNavbarBrand
+      </CNavbarBrand>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/navbar/tests/CNavbarNav.test.js b/src/navbar/tests/CNavbarNav.test.js
new file mode 100644
index 00000000..93bf3084
--- /dev/null
+++ b/src/navbar/tests/CNavbarNav.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CNavbarNav from '../CNavbarNav'
+
+configure({ adapter: new Adapter() })
+
+describe('CNavbarNav', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CNavbarNav/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CNavbarNav
+        className='class-name'
+      >
+        CNavbarNav
+      </CNavbarNav>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/navbar/tests/CNavbarText.test.js b/src/navbar/tests/CNavbarText.test.js
new file mode 100644
index 00000000..7617d75c
--- /dev/null
+++ b/src/navbar/tests/CNavbarText.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CNavbarText from '../CNavbarText'
+
+configure({ adapter: new Adapter() })
+
+describe('CNavbarText', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CNavbarText/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CNavbarText
+        className='class-name'
+      >
+        CNavbarText
+      </CNavbarText>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/navbar/tests/__snapshots__/CNavbar.test.js.snap b/src/navbar/tests/__snapshots__/CNavbar.test.js.snap
new file mode 100644
index 00000000..5af3a69a
--- /dev/null
+++ b/src/navbar/tests/__snapshots__/CNavbar.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavbar renders basic wrapper correctly 1`] = `
+<nav
+  className="navbar navbar-dark"
+/>
+`;
+
+exports[`CNavbar renders customized wrapper correctly 1`] = `
+<nav
+  className="navbar class-name navbar-light navbar-expand bg-warning fixed-bottom sticky-top"
+>
+  CNavbar
+</nav>
+`;
diff --git a/src/navbar/tests/__snapshots__/CNavbarBrand.test.js.snap b/src/navbar/tests/__snapshots__/CNavbarBrand.test.js.snap
new file mode 100644
index 00000000..dd9a6665
--- /dev/null
+++ b/src/navbar/tests/__snapshots__/CNavbarBrand.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavbarBrand renders basic wrapper correctly 1`] = `
+<div
+  className="navbar-brand"
+/>
+`;
+
+exports[`CNavbarBrand renders customized wrapper correctly 1`] = `
+<div
+  className="navbar-brand class-name"
+>
+  CNavbarBrand
+</div>
+`;
diff --git a/src/navbar/tests/__snapshots__/CNavbarNav.test.js.snap b/src/navbar/tests/__snapshots__/CNavbarNav.test.js.snap
new file mode 100644
index 00000000..aa588b72
--- /dev/null
+++ b/src/navbar/tests/__snapshots__/CNavbarNav.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavbarNav renders basic wrapper correctly 1`] = `
+<ul
+  className="navbar-nav"
+/>
+`;
+
+exports[`CNavbarNav renders customized wrapper correctly 1`] = `
+<ul
+  className="navbar-nav class-name"
+>
+  CNavbarNav
+</ul>
+`;
diff --git a/src/navbar/tests/__snapshots__/CNavbarText.test.js.snap b/src/navbar/tests/__snapshots__/CNavbarText.test.js.snap
new file mode 100644
index 00000000..98e19d97
--- /dev/null
+++ b/src/navbar/tests/__snapshots__/CNavbarText.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CNavbarText renders basic wrapper correctly 1`] = `
+<div
+  className="navbar-text"
+/>
+`;
+
+exports[`CNavbarText renders customized wrapper correctly 1`] = `
+<div
+  className="navbar-text class-name"
+>
+  CNavbarText
+</div>
+`;
diff --git a/src/pagination/CPagination.js b/src/pagination/CPagination.js
new file mode 100644
index 00000000..493b277f
--- /dev/null
+++ b/src/pagination/CPagination.js
@@ -0,0 +1,220 @@
+import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CLink from '../link/CLink'
+
+//component - CoreUI / CPagination
+const CPagination = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    addListClass,
+    activePage,
+    size,
+    firstButton,
+    previousButton,
+    nextButton,
+    lastButton,
+    dots,
+    arrows,
+    doubleArrows,
+    limit,
+    pages,
+    align,
+    onActivePageChange,
+    ...attributes
+  } = props;
+
+  useEffect(() => {
+    pages < activePage && onActivePageChange(pages, true)
+  }, [pages])
+
+  //render
+  const listClasses = classNames(
+    'pagination',
+    size && 'pagination-' + size,
+    'justify-content-' + align,
+    addListClass
+  )
+
+  const backArrowsClasses = classNames(
+    'page-item',
+    activePage === 1 && 'disabled'
+  )
+
+  const nextArrowsClasses = classNames(
+    'page-item',
+    activePage === pages && 'disabled'
+  )
+
+  const showDots = (() => {
+    return dots && limit > 4 && limit < pages
+  })()
+  const maxPrevItems = (() => {
+    return Math.floor((limit - 1) / 2)
+  })()
+  const maxNextItems = (() => {
+    return Math.ceil((limit - 1) / 2)
+  })()
+  const beforeDots = (() => {
+    return showDots && activePage > maxPrevItems + 1
+  })()
+  const afterDots = (() => {
+    return showDots && activePage < pages - maxNextItems
+  })()
+  const computedLimit = (() => {
+    return limit - afterDots - beforeDots
+  })()
+  const range = (() => {
+    return activePage + maxNextItems
+  })()
+  const lastItem = (() => {
+    return range >= pages ? pages : range - afterDots
+  })()
+  const itemsAmount = (() => {
+    return pages < computedLimit ? pages : computedLimit
+  })()
+  const items = (() => {
+    if (activePage - maxPrevItems <= 1) {
+      return Array.from({
+        length: itemsAmount
+      }, (v, i) => i + 1)
+    } else {
+      return Array.from({
+        length: itemsAmount
+      }, (v, i) => {
+        return lastItem - i
+      }).reverse()
+    }
+  })()
+
+  const setPage = (number) => {
+    if (number !== activePage) {
+      onActivePageChange(number)
+    }
+  }
+
+  return (
+    <nav
+      className={className}
+      aria-label="pagination"
+      {...attributes}
+      ref={innerRef}
+    >
+      <ul className={listClasses}>
+        { doubleArrows &&
+          <li className={backArrowsClasses}>
+            <CLink
+              className="page-link"
+              onClick={ () => setPage(1)}
+              aria-label="Go to first page"
+              aria-disabled={activePage === 1}
+              disabled={activePage === 1}
+            >
+              { firstButton }
+            </CLink>
+          </li>
+        }
+        { arrows &&
+          <li className={backArrowsClasses}>
+            <CLink
+              className="page-link"
+              onClick={ () => setPage(activePage - 1)}
+              aria-label="Go to previous page"
+              aria-disabled={activePage === 1}
+              disabled={activePage === 1}
+            >
+              { previousButton }
+            </CLink>
+          </li>
+        }
+        { beforeDots &&
+          <li role="separator" className="page-item disabled">
+            <span className="page-link">…</span>
+          </li>
+        }
+        { items.map(i => {
+            return (
+            <li className={`${activePage===i ? 'active' : ''} page-item`} key={i}>
+              <CLink
+                className="page-link"
+                onClick={(e) => setPage(i, e)}
+                aria-label={activePage === i ? `Current page ${i}` : `Go to page ${i}`}
+              >{i}</CLink>
+            </li>)
+          })
+        }
+        { afterDots &&
+          <li role="separator" className="page-item disabled">
+            <span className="page-link">…</span>
+          </li>
+        }
+        { arrows &&
+          <li className={nextArrowsClasses}>
+            <CLink
+              className="page-link"
+              onClick={ () => setPage(activePage + 1)}
+              aria-label="Go to next page"
+              aria-disabled={activePage === pages}
+              disabled={activePage === pages}
+            >
+              { nextButton }
+            </CLink>
+          </li>
+        }
+        { doubleArrows &&
+          <li className={nextArrowsClasses}>
+            <CLink
+              className="page-link"
+              onClick={ () => setPage(pages)}
+              aria-label="Go to last page"
+              aria-disabled={activePage === pages}
+              disabled={activePage === pages}
+            >
+              { lastButton }
+            </CLink>
+          </li>
+        }
+      </ul>
+    </nav>
+  )
+
+}
+
+CPagination.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  activePage: PropTypes.number,
+  dots: PropTypes.bool,
+  arrows: PropTypes.bool,
+  doubleArrows: PropTypes.bool,
+  firstButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  previousButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  nextButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  lastButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  size: PropTypes.oneOf(['', 'sm', 'lg']),
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+  addListClass: PropTypes.string,
+  limit: PropTypes.number,
+  pages: PropTypes.number,
+  onActivePageChange: PropTypes.func.isRequired
+};
+
+CPagination.defaultProps = {
+  activePage: 1,
+  dots: true,
+  arrows: true,
+  doubleArrows: true,
+  limit: 5,
+  firstButton: <React.Fragment>&laquo;</React.Fragment>,
+  previousButton: <React.Fragment>&lsaquo;</React.Fragment>,
+  nextButton: <React.Fragment>&rsaquo;</React.Fragment>,
+  lastButton: <React.Fragment>&raquo;</React.Fragment>,
+  align: 'start',
+  pages: 10
+};
+
+export default CPagination
diff --git a/src/pagination/tests/CPagination.test.js b/src/pagination/tests/CPagination.test.js
new file mode 100644
index 00000000..26846c36
--- /dev/null
+++ b/src/pagination/tests/CPagination.test.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CPagination from '../CPagination'
+
+configure({ adapter: new Adapter() })
+
+describe('CPagination', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CPagination onActivePageChange={()=>{}}/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CPagination
+        onActivePageChange={()=>{}}
+        className='class-name'
+        addListClass='list-class'
+        activePage={5}
+        size='lg'
+        firstButton='first-button'
+        previousButton='previous-button'
+        nextButton='next-button'
+        lastButton='last-button'
+        dots
+        arrows
+        doubleArrows
+        limit={5}
+        pages={15}
+        align='end'
+      >
+        CPagination
+      </CPagination>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly two', () => {
+    const componentCustomized = renderer.create(
+      <CPagination
+        onActivePageChange={()=>{}}
+        className='class-name'
+        addListClass='list-class'
+        activePage={5}
+        size='lg'
+        firstButton='first-button'
+        previousButton='previous-button'
+        nextButton='next-button'
+        lastButton='last-button'
+        dots
+        arrows
+        doubleArrows
+        limit={30}
+        pages={15}
+        align='end'
+      >
+        CPagination
+      </CPagination>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/pagination/tests/__snapshots__/CPagination.test.js.snap b/src/pagination/tests/__snapshots__/CPagination.test.js.snap
new file mode 100644
index 00000000..19107d01
--- /dev/null
+++ b/src/pagination/tests/__snapshots__/CPagination.test.js.snap
@@ -0,0 +1,520 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CPagination renders basic wrapper correctly 1`] = `
+<nav
+  aria-label="pagination"
+>
+  <ul
+    className="pagination justify-content-start"
+  >
+    <li
+      className="page-item disabled"
+    >
+      <a
+        aria-disabled={true}
+        aria-label="Go to first page"
+        className="disabled page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        «
+      </a>
+    </li>
+    <li
+      className="page-item disabled"
+    >
+      <a
+        aria-disabled={true}
+        aria-label="Go to previous page"
+        className="disabled page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        ‹
+      </a>
+    </li>
+    <li
+      className="active page-item"
+    >
+      <a
+        aria-label="Current page 1"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        1
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 2"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        2
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 3"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        3
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 4"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        4
+      </a>
+    </li>
+    <li
+      className="page-item disabled"
+      role="separator"
+    >
+      <span
+        className="page-link"
+      >
+        …
+      </span>
+    </li>
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to next page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        ›
+      </a>
+    </li>
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to last page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        »
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`CPagination renders customized wrapper correctly 1`] = `
+<nav
+  aria-label="pagination"
+  className="class-name"
+>
+  <ul
+    className="pagination pagination-lg justify-content-end list-class"
+  >
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to first page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        first-button
+      </a>
+    </li>
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to previous page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        previous-button
+      </a>
+    </li>
+    <li
+      className="page-item disabled"
+      role="separator"
+    >
+      <span
+        className="page-link"
+      >
+        …
+      </span>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 4"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        4
+      </a>
+    </li>
+    <li
+      className="active page-item"
+    >
+      <a
+        aria-label="Current page 5"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        5
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 6"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        6
+      </a>
+    </li>
+    <li
+      className="page-item disabled"
+      role="separator"
+    >
+      <span
+        className="page-link"
+      >
+        …
+      </span>
+    </li>
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to next page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        next-button
+      </a>
+    </li>
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to last page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        last-button
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`CPagination renders customized wrapper correctly two 1`] = `
+<nav
+  aria-label="pagination"
+  className="class-name"
+>
+  <ul
+    className="pagination pagination-lg justify-content-end list-class"
+  >
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to first page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        first-button
+      </a>
+    </li>
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to previous page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        previous-button
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 1"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        1
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 2"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        2
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 3"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        3
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 4"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        4
+      </a>
+    </li>
+    <li
+      className="active page-item"
+    >
+      <a
+        aria-label="Current page 5"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        5
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 6"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        6
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 7"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        7
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 8"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        8
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 9"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        9
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 10"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        10
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 11"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        11
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 12"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        12
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 13"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        13
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 14"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        14
+      </a>
+    </li>
+    <li
+      className=" page-item"
+    >
+      <a
+        aria-label="Go to page 15"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        15
+      </a>
+    </li>
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to next page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        next-button
+      </a>
+    </li>
+    <li
+      className="page-item"
+    >
+      <a
+        aria-disabled={false}
+        aria-label="Go to last page"
+        className="page-link"
+        href="#"
+        onClick={[Function]}
+        rel={null}
+      >
+        last-button
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
diff --git a/src/progress/CProgress.js b/src/progress/CProgress.js
new file mode 100644
index 00000000..f9224c8d
--- /dev/null
+++ b/src/progress/CProgress.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CProgressBar from './CProgressBar'
+
+export const Context = React.createContext({})
+//component - CoreUI / CProgress
+
+const CProgress = props => {
+
+  const {
+    children,
+    className,
+    //
+    innerRef,
+    size,
+    color,
+    striped,
+    animated,
+    precision,
+    showPercentage,
+    showValue,
+    max,
+    value,
+    ...attributes
+  } = props
+
+  const inheritedProps = {
+    color,
+    striped,
+    animated,
+    precision,
+    showPercentage,
+    showValue,
+    max,
+    value
+  }
+
+  const progressClasses = classNames(
+    'progress', 
+    size && 'progress-' + size,
+    className
+  )
+
+  // render
+  return (
+    <div 
+      className={progressClasses} 
+      {...attributes} 
+      ref={innerRef}
+    >
+      <Context.Provider value={{ inheritedProps }}>
+        { children || <CProgressBar/>}
+      </Context.Provider>
+    </div>
+  )
+
+}
+
+CProgress.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  size: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
+  max: PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
+  animated: PropTypes.bool,
+  striped: PropTypes.bool,
+  color: PropTypes.string,
+  precision: PropTypes.number,
+  showPercentage: PropTypes.bool,
+  showValue: PropTypes.bool
+};
+
+CProgress.defaultProps = {
+  value: 0,
+  max: 100,
+  precision: 0
+};
+
+export default CProgress
diff --git a/src/progress/CProgressBar.js b/src/progress/CProgressBar.js
new file mode 100644
index 00000000..ca198dce
--- /dev/null
+++ b/src/progress/CProgressBar.js
@@ -0,0 +1,71 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Context } from './CProgress'
+//component - CoreUI / CProgressBar
+
+const CProgressBar = directProps => {
+
+  const { inheritedProps } = useContext(Context)
+  const props = {...inheritedProps, ...directProps }
+
+  const {
+    children,
+    className,
+    //
+    innerRef,
+    color,
+    striped,
+    animated,
+    precision,
+    showPercentage,
+    showValue,
+    max,
+    value,
+    ...attributes
+  } = props
+
+  // render
+  const progressBarClasses = classNames(
+    'progress-bar',
+    animated && 'progress-bar-animated',
+    (striped || animated) && 'progress-bar-striped',
+    color && `bg-${color}`,
+    className
+  )
+
+  const valLabel = Number(value).toFixed(precision)
+  const percentLabel = Number((value / max) * 100).toFixed(precision) + '%'
+
+  return (
+    <div
+      className={progressBarClasses}
+      style={{ width: `${(value / max) * 100}%` }}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin="0"
+      aria-valuemax={max}
+      {...attributes}
+      ref={innerRef}
+    >
+      { showPercentage ? percentLabel : showValue ? valLabel : children }
+    </div>
+  )
+}
+
+CProgressBar.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  value: PropTypes.number,
+  max: PropTypes.number,
+  animated: PropTypes.bool,
+  striped: PropTypes.bool,
+  color: PropTypes.string,
+  precision: PropTypes.number,
+  showPercentage: PropTypes.bool,
+  showValue: PropTypes.bool
+};
+
+export default CProgressBar
diff --git a/src/progress/tests/CProgress.test.js b/src/progress/tests/CProgress.test.js
new file mode 100644
index 00000000..0226f70d
--- /dev/null
+++ b/src/progress/tests/CProgress.test.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CProgress from '../CProgress'
+
+configure({ adapter: new Adapter() })
+
+describe('CProgress', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CProgress/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CProgress
+        className='class-name'
+        size='lg'
+        color='warning'
+        striped
+        animated
+        precision={5}
+        showPercentage
+        showValue
+        max='100'
+        value='55'
+      >
+        CProgress
+      </CProgress>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/progress/tests/CProgressBar.test.js b/src/progress/tests/CProgressBar.test.js
new file mode 100644
index 00000000..5f82892a
--- /dev/null
+++ b/src/progress/tests/CProgressBar.test.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CProgressBar from '../CProgressBar'
+
+configure({ adapter: new Adapter() })
+
+describe('CProgressBar', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CProgressBar/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CProgressBar
+        className='class-name'
+        color='warning'
+        striped
+        animated
+        precision={5}
+        showPercentage
+        showValue
+        max='100'
+        value='75'
+      >
+        CProgressBar
+      </CProgressBar>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/progress/tests/__snapshots__/CProgress.test.js.snap b/src/progress/tests/__snapshots__/CProgress.test.js.snap
new file mode 100644
index 00000000..800a23c8
--- /dev/null
+++ b/src/progress/tests/__snapshots__/CProgress.test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CProgress renders basic wrapper correctly 1`] = `
+<div
+  className="progress"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin="0"
+    aria-valuenow={0}
+    className="progress-bar"
+    role="progressbar"
+    style={
+      Object {
+        "width": "0%",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`CProgress renders customized wrapper correctly 1`] = `
+<div
+  className="progress progress-lg class-name"
+>
+  CProgress
+</div>
+`;
diff --git a/src/progress/tests/__snapshots__/CProgressBar.test.js.snap b/src/progress/tests/__snapshots__/CProgressBar.test.js.snap
new file mode 100644
index 00000000..905ec700
--- /dev/null
+++ b/src/progress/tests/__snapshots__/CProgressBar.test.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CProgressBar renders basic wrapper correctly 1`] = `
+<div
+  aria-valuemin="0"
+  className="progress-bar"
+  role="progressbar"
+  style={
+    Object {
+      "width": "NaN%",
+    }
+  }
+/>
+`;
+
+exports[`CProgressBar renders customized wrapper correctly 1`] = `
+<div
+  aria-valuemax="100"
+  aria-valuemin="0"
+  aria-valuenow="75"
+  className="progress-bar progress-bar-animated progress-bar-striped bg-warning class-name"
+  role="progressbar"
+  style={
+    Object {
+      "width": "75%",
+    }
+  }
+>
+  75.00000%
+</div>
+`;
diff --git a/src/spinner/CSpinner.js b/src/spinner/CSpinner.js
new file mode 100644
index 00000000..af984d57
--- /dev/null
+++ b/src/spinner/CSpinner.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CSpinner
+
+const CSpinner = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    grow,
+    size,
+    color,
+    ...attributes
+  } = props
+
+  //render
+  const type = grow ? 'grow' : 'border'
+
+  const classes = classNames(
+    `spinner-${type}`,
+    size && `spinner-${type}-${size}`,
+    color && `text-${color}`,
+    className
+  )
+
+  return (
+    <Tag 
+      className={classes} 
+      aria-hidden="false" 
+      aria-label="Loading" 
+      role="status" 
+      {...attributes}
+      ref={innerRef}
+    />
+  )
+}
+
+CSpinner.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  grow: PropTypes.bool,
+  size: PropTypes.string,
+  color: PropTypes.string
+};
+
+CSpinner.defaultProps = {
+  tag: 'div'
+};
+
+export default CSpinner
diff --git a/src/spinner/tests/CSpinner.test.js b/src/spinner/tests/CSpinner.test.js
new file mode 100644
index 00000000..4097d5a1
--- /dev/null
+++ b/src/spinner/tests/CSpinner.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSpinner from '../CSpinner'
+
+configure({ adapter: new Adapter() })
+
+describe('CSpinner', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSpinner/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSpinner
+        className='class-name'
+        grow
+        size='lg'
+        color='info'
+      >
+        CSpinner
+      </CSpinner>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/spinner/tests/__snapshots__/CSpinner.test.js.snap b/src/spinner/tests/__snapshots__/CSpinner.test.js.snap
new file mode 100644
index 00000000..2e59dc0a
--- /dev/null
+++ b/src/spinner/tests/__snapshots__/CSpinner.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSpinner renders basic wrapper correctly 1`] = `
+<div
+  aria-hidden="false"
+  aria-label="Loading"
+  className="spinner-border"
+  role="status"
+/>
+`;
+
+exports[`CSpinner renders customized wrapper correctly 1`] = `
+<div
+  aria-hidden="false"
+  aria-label="Loading"
+  className="spinner-grow spinner-grow-lg text-info class-name"
+  role="status"
+>
+  CSpinner
+</div>
+`;
diff --git a/src/styleMock.js b/src/styleMock.js
new file mode 100644
index 00000000..f053ebf7
--- /dev/null
+++ b/src/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/src/switch/CSwitch.js b/src/switch/CSwitch.js
new file mode 100644
index 00000000..e13448e6
--- /dev/null
+++ b/src/switch/CSwitch.js
@@ -0,0 +1,65 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CSwitch
+const CSwitch = props => {
+
+  let {
+    className,
+    //
+    innerRef,
+    size,
+    color,
+    labelOn,
+    labelOff,
+    variant,
+    shape,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames(
+    'c-switch form-check-label',
+    (labelOn || labelOff) && 'c-switch-label',
+    size && `c-switch-${size}`,
+    shape && `c-switch-${shape}`,
+    color && `c-switch${variant ? `-${variant}` : ''}-${color}`,
+    className
+  )
+
+  const inputClasses = classNames(
+    'c-switch-input',
+    'c-form-check-input'
+  )
+
+  return (
+    <label className={classes}>
+      <input 
+        className={inputClasses} 
+        type="checkbox" 
+        {...attributes}
+        ref={innerRef}
+      />
+      <span 
+        className="c-switch-slider"
+        data-checked={labelOn}
+        data-unchecked={labelOff}
+      />
+    </label>
+  )
+}
+
+CSwitch.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  size: PropTypes.oneOf(['', 'lg', 'sm']),
+  shape: PropTypes.oneOf(['', 'pill', 'square']),
+  variant: PropTypes.oneOf(['', '3d', 'opposite', 'outline']),
+  color: PropTypes.string,
+  labelOn: PropTypes.string,
+  labelOff: PropTypes.string,
+}
+
+export default CSwitch
diff --git a/src/switch/tests/CSwitch.test.js b/src/switch/tests/CSwitch.test.js
new file mode 100644
index 00000000..a02fe785
--- /dev/null
+++ b/src/switch/tests/CSwitch.test.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSwitch from '../CSwitch'
+
+configure({ adapter: new Adapter() })
+
+describe('CSwitch', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSwitch/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSwitch
+        className='class-name'
+        size='lg'
+        shape='square'
+        variant='outline'
+        color='info'
+        checked
+        labelOn='label-on'
+        labelOff='label-off'
+      />
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly two', () => {
+    const componentCustomized = renderer.create(
+      <CSwitch
+        className='class-name'
+        size='lg'
+        shape='square'
+        color='info'
+        checked
+        labelOn='label-on'
+        labelOff='label-off'
+      />
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('on checked change', () => {
+    jest.useFakeTimers()
+    const onChange = jest.fn();
+    const component = mount(
+      <div>
+        <CSwitch
+          className='class-name'
+          size='lg'
+          shape='square'
+          variant='outline'
+          color='info'
+          onChange={onChange}
+        />
+      </div>
+    );
+    component.find('input').simulate('change')
+    jest.runAllTimers()
+    expect(onChange).toHaveBeenCalledTimes(1);
+  })
+})
diff --git a/src/switch/tests/__snapshots__/CSwitch.test.js.snap b/src/switch/tests/__snapshots__/CSwitch.test.js.snap
new file mode 100644
index 00000000..433600c9
--- /dev/null
+++ b/src/switch/tests/__snapshots__/CSwitch.test.js.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSwitch renders basic wrapper correctly 1`] = `
+<label
+  className="c-switch form-check-label"
+>
+  <input
+    className="c-switch-input c-form-check-input"
+    type="checkbox"
+  />
+  <span
+    className="c-switch-slider"
+  />
+</label>
+`;
+
+exports[`CSwitch renders customized wrapper correctly 1`] = `
+<label
+  className="c-switch form-check-label c-switch-label c-switch-lg c-switch-square c-switch-outline-info class-name"
+>
+  <input
+    checked={true}
+    className="c-switch-input c-form-check-input"
+    type="checkbox"
+  />
+  <span
+    className="c-switch-slider"
+    data-checked="label-on"
+    data-unchecked="label-off"
+  />
+</label>
+`;
+
+exports[`CSwitch renders customized wrapper correctly two 1`] = `
+<label
+  className="c-switch form-check-label c-switch-label c-switch-lg c-switch-square c-switch-info class-name"
+>
+  <input
+    checked={true}
+    className="c-switch-input c-form-check-input"
+    type="checkbox"
+  />
+  <span
+    className="c-switch-slider"
+    data-checked="label-on"
+    data-unchecked="label-off"
+  />
+</label>
+`;
diff --git a/src/table/CDataTable.css b/src/table/CDataTable.css
new file mode 100644
index 00000000..9cc1914f
--- /dev/null
+++ b/src/table/CDataTable.css
@@ -0,0 +1,18 @@
+.c-datatable-filter {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.c-datatable-filter label {
+  margin-bottom: 0;
+}
+.c-datatable-items-per-page {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+}
+.c-datatable-items-per-page label {
+  margin-bottom: 0;
+}
diff --git a/src/table/CDataTable.js b/src/table/CDataTable.js
new file mode 100644
index 00000000..b344624a
--- /dev/null
+++ b/src/table/CDataTable.js
@@ -0,0 +1,663 @@
+import React, { useState, useRef, useMemo, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CPagination from '../pagination/CPagination'
+import CElementCover from '../element-cover/CElementCover'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilBan, cilFilterX } from '@coreui/icons'
+import style from './CDataTable.module.css'
+import './CDataTable.css'
+
+//component - CoreUI / CTable
+const CDataTable = props => {
+
+  const {
+    //
+    innerRef,
+    overTableSlot,
+    columnHeaderSlot,
+    sortingIconSlot,
+    columnFilterSlot,
+    noItemsViewSlot,
+    noItemsView,
+    captionSlot,
+    footerSlot,
+    underTableSlot,
+    theadTopSlot,
+    loadingSlot,
+    scopedSlots,
+    loading,
+    fields,
+    pagination,
+    activePage,
+    itemsPerPage,
+    items,
+    sorter,
+    header,
+    clickableRows,
+    columnFilter,
+    tableFilterValue,
+    tableFilter,
+    cleaner,
+    addTableClasses,
+    size,
+    dark,
+    striped,
+    hover,
+    border,
+    outlined,
+    responsive,
+    footer,
+    itemsPerPageSelect,
+    sorterValue,
+    columnFilterValue,
+    onRowClick,
+    onSorterValueChange,
+    onPaginationChange,
+    onColumnFilterChange,
+    onPagesChange,
+    onTableFilterChange,
+    onPageChange,
+    onFilteredItemsChange
+  } = props
+
+  const compData = useRef(
+    { firstRun: true, columnFiltered: 0, changeItems: 0 }).current
+
+
+  //
+  const [perPageItems, setPerPageItems] = useState(itemsPerPage)
+  const [sorterState, setSorterState] = useState(sorterValue || {})
+  const [tableFilterState, setTableFilterState] = useState(tableFilterValue)
+  const [columnFilterState, setColumnFilterState] = useState(columnFilterValue || {})
+  const [page, setPage] = useState(activePage || 1)
+  const [passedItems, setPassedItems] = useState(items || [])
+
+  // functions
+
+  const cellClass = (item, colName, index) => {
+    let classes = []
+    if (item._cellClasses && item._cellClasses[colName]) {
+      classes.push(item._cellClasses[colName])
+    }
+    if (fields && fields[index]._classes) {
+      classes.push(fields[index]._classes)
+    }
+    return classes
+  }
+
+  const pretifyName = (name)=>{
+    return name.replace(/[-_.]/g, ' ')
+      .replace(/ +/g, ' ')
+      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  }
+
+  const headerClass = i => fields && fields[i]._classes && fields[i]._classes
+
+  const isSortable = i => {
+    const isDataColumn = itemsDataColumns.includes(rawColumnNames[i])
+    return sorter && (!fields || fields[i].sorter !== false) && isDataColumn 
+  }
+
+  const headerStyles = (index) => {
+    let style = { verticalAlign: 'middle', overflow: 'hidden' }
+    if (isSortable(index)) {
+      style.cursor='pointer'
+    }
+    if (fields && fields[index] && fields[index]._style) {
+      return {...style, ...fields[index]._style}
+    }
+    return style
+  }
+
+  const getIconState = index => {
+    const direction = sorterState.asc ? 'asc' : 'desc'
+    return rawColumnNames[index] === sorterState.column ? direction : 0
+  }
+
+  const iconClasses = index => {
+    const state = getIconState(index)
+    return [
+      'position-absolute', style['icon-transition'], style['arrow-position'],
+      !state && style['transparent'],
+      state === 'desc' && style['rotate-icon']
+    ]
+  }
+
+  const rowClicked = (item, index, e, detailsClick = false) => {
+    onRowClick && onRowClick(item, index, getClickedColumnName(e, detailsClick), e)
+  }
+
+  const changeSort = (column, index) => {
+    if (!isSortable(index)) {
+      return
+    }
+    //if column changed or sort was descending change asc to true
+    const state = sorterState
+    const columnRepeated = state.column === column
+    if (!sorter || !sorter.resetable) {
+      state.column = column
+    } else {
+      state.column = columnRepeated && state.asc === false ? null : column
+    }
+    state.asc = !(columnRepeated && state.asc)
+    setSorterState({...state})
+  }
+
+  useEffect(() => {
+    onSorterValueChange && onSorterValueChange(sorterState)
+  }, [JSON.stringify(sorterState)])
+
+  const paginationChange = e => {
+    onPaginationChange && onPaginationChange(Number(e.target.value))
+    !itemsPerPageSelect.external && setPerPageItems(Number(e.target.value))
+  }
+
+  const columnFilterEvent = (colName, value, type)=>{
+    const isLazy = columnFilter && columnFilter.lazy === true
+    if (isLazy && type === 'input' || !isLazy && type === 'change') {
+      return
+    }
+    const newState = {...columnFilterState, [`${colName}`]: value }
+    setColumnFilterState(newState)
+  }
+
+  useEffect(() => {
+    onColumnFilterChange && onColumnFilterChange(columnFilterState)
+  }, [JSON.stringify(columnFilterState)])
+
+  const tableFilterChange = (value, type) => {
+    const isLazy = tableFilter && tableFilter.lazy === true
+    if (isLazy && type === 'input' || !isLazy && type === 'change') {
+      return
+    }
+    setTableFilterState(value)
+  }
+
+  useEffect(() => {
+    onTableFilterChange && onTableFilterChange(tableFilterState)
+  }, [tableFilterState])
+
+  const getClickedColumnName = (e, detailsClick) => {
+    if (detailsClick) {
+      return 'details'
+    } else {
+      const children = Array.from(e.target.closest('tr').children)
+      const clickedCell = children.filter(child => child.contains(e.target))[0]
+      return rawColumnNames[children.indexOf(clickedCell)]
+    }
+  }
+
+  const clean = () => {
+    setTableFilterState('')
+    setColumnFilterState({})
+    setSorterState({
+      column: "",
+      asc: true
+    })
+  }
+
+  // computed
+
+  const genCols = Object.keys(passedItems[0] || {}).filter(el => el.charAt(0) !== '_')
+
+  const rawColumnNames = fields ? fields.map(el => el.key || el) : genCols
+
+  const itemsDataColumns = rawColumnNames.filter(name => genCols.includes(name))
+
+  useMemo(() => {
+    compData.columnFiltered++
+  }, [
+    JSON.stringify(columnFilter),
+    JSON.stringify(columnFilterState),
+    itemsDataColumns.join(''),
+    compData.changeItems
+  ])
+
+  const columnFiltered = useMemo(()=>{
+    let items = passedItems
+    if (columnFilter && columnFilter.external) {
+      return items
+    }
+    Object.entries(columnFilterState).forEach(([key, value]) => {
+      const columnFilter = String(value).toLowerCase()
+      if (columnFilter && itemsDataColumns.includes(key)) {
+        items = items.filter(item => {
+          return String(item[key]).toLowerCase().includes(columnFilter)
+        })
+      }
+    })
+    return items
+  }, [compData.columnFiltered])
+
+  const tableFiltered = useMemo(()=>{
+    let items = columnFiltered
+    if (!tableFilterState || (tableFilter && tableFilter.external)) {
+      return items
+    }
+    const filter = tableFilterState.toLowerCase()
+    const valueContainFilter = val => String(val).toLowerCase().includes(filter)
+    items = items.filter(item => {
+      return !!itemsDataColumns.find(key => valueContainFilter(item[key]))
+    })
+    return items
+  }, [
+    compData.columnFiltered,
+    tableFilterState,
+    JSON.stringify(tableFilter)
+  ])
+  
+  const sortedItems = useMemo(() => {
+    const col = sorterState.column
+    if (!col || !itemsDataColumns.includes(col) || (sorter && sorter.external)) {
+      return tableFiltered
+    }
+    //if values in column are to be sorted by numeric value they all have to be type number
+    const flip = sorterState.asc ? 1 : -1
+    const sorted = tableFiltered.slice().sort((item, item2) => {
+      const value = item[col]
+      const value2 = item2[col]
+      const a = typeof value === 'number' ? value : String(value).toLowerCase()
+      const b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase()
+      return a > b ? 1 * flip : b > a ? -1 * flip : 0
+    })
+    return sorted
+  }, [
+    JSON.stringify(tableFiltered), 
+    JSON.stringify(sorterState), 
+    JSON.stringify(sorter)
+  ])
+
+  useEffect(() => {
+    !compData.firstRun && onFilteredItemsChange && onFilteredItemsChange(sortedItems)
+  }, [JSON.stringify(sortedItems)])
+
+  const tableClasses = [
+    'table',
+    {
+      [`table-${size}`]: size,
+      'table-dark': dark,
+      'table-striped': striped,
+      'table-hover': hover,
+      'table-bordered': border,
+      'border': outlined
+    },
+    addTableClasses
+  ]
+
+
+  const columnNames = useMemo(() => {
+    if (fields) {
+      return fields.map(f => {
+        return f.label !== undefined ? f.label : pretifyName(f.key || f)
+      })
+    }
+    return rawColumnNames.map(el => pretifyName(el))
+  }, [fields, rawColumnNames])
+
+  const sortingIconStyles = sorter && 'position-relative pr-4'
+
+  const colspan = rawColumnNames.length
+
+  const totalPages = Math.ceil((sortedItems.length) / perPageItems) || 1
+  useMemo(() => {
+    !compData.firstRun && onPagesChange && onPagesChange(totalPages)
+  }, [totalPages])
+
+  const computedPage = useMemo(() => {
+    const compPage = pagination ? page : activePage
+    !compData.firstRun && onPageChange && onPageChange(compPage)
+    return compPage
+  }, [page, activePage, pagination])
+
+  const firstItemIndex = (computedPage - 1) * perPageItems || 0
+
+  const paginatedItems = sortedItems.slice(
+    firstItemIndex,
+    firstItemIndex + perPageItems
+  )
+  const currentItems = computedPage ? paginatedItems : sortedItems
+
+  const tableFilterData = {
+    label: (tableFilter && tableFilter.label) || 'Filter:',
+    placeholder: (tableFilter && tableFilter.placeholder) || 'type string...'
+  }
+
+  const paginationSelect = {
+    label: (itemsPerPageSelect && itemsPerPageSelect.label) || 'Items per page:',
+    values: (itemsPerPageSelect && itemsPerPageSelect.values) || [5, 10, 20, 50]
+  }
+
+  const noItemsText = (() => {
+    const customValues = noItemsView || {}
+    if (passedItems.length) {
+      return customValues.noResults || 'No filtering results'
+    }
+    return customValues.noItems || 'No items'
+  })()
+
+  const isFiltered = tableFilterState || sorterState.column ||
+                     Object.values(columnFilterState).join('')   
+
+  const cleanerProps = {
+    content: cilFilterX,
+    className: `mfs-2 ${isFiltered ? 'text-danger' : 'transparent'}`,
+    role: isFiltered ? 'button' : null,
+    tabIndex: isFiltered ? 0 : null,
+  }
+
+  // watch
+  useMemo(() => setPerPageItems(itemsPerPage), [itemsPerPage])
+
+  useMemo(() => setSorterState({ ...sorterValue }), [sorterValue])
+
+  useMemo(() => setTableFilterState(tableFilterValue), [tableFilterValue])
+
+  useMemo(() => setColumnFilterState({...columnFilterValue}), [columnFilterValue])
+
+  //items
+  useMemo(() => {
+    if (
+      items &&
+      !compData.firstRun &&
+      (items.length !== passedItems.length ||
+      JSON.stringify(items) !== JSON.stringify(passedItems))
+    ) {
+      setPassedItems(items)
+      compData.changeItems++
+    }
+  })
+
+
+
+  // render
+  compData.firstRun = false
+
+  const paginationProps = typeof pagination === 'object' ? pagination : null
+
+  const headerContent = (
+  <tr>
+    {
+      columnNames.map((name, index)=>{
+        return (
+          <th
+            onClick={()=>{changeSort(rawColumnNames[index], index)}}
+            className={classNames([headerClass(index), sortingIconStyles])}
+            style={headerStyles(index)}
+            key={index}
+          >
+            { columnHeaderSlot[`${rawColumnNames[index]}`] ||
+              <div className="d-inline">{name}</div>
+            }
+            {
+              isSortable(index) &&
+              ((sortingIconSlot && sortingIconSlot(getIconState(index), iconClasses(index))) ||
+              <CIcon
+                customClasses={classNames(iconClasses(index))}
+                width={18}
+                content={cilArrowTop}
+              />)
+            }
+          </th>
+        )
+      })
+    }
+  </tr>)
+
+  return (
+<React.Fragment>
+<div ref={innerRef}>
+  {
+    (itemsPerPageSelect || tableFilter || cleaner) &&
+    <div className="row my-2 mx-0">
+      {
+        (tableFilter || cleaner) &&
+        <div className="col-sm-6 form-inline p-0 c-datatable-filter">
+          {
+            tableFilter &&
+            <>
+              <label className="mfe-2">{tableFilterData.label}</label>
+              <input
+                className="form-control"
+                type="text"
+                placeholder={tableFilterData.placeholder}
+                onInput={(e)=>{tableFilterChange(e.target.value, 'input')}}
+                onChange={(e)=>{tableFilterChange(e.target.value, 'change')}}
+                value={tableFilterState || ''}
+                aria-label="table filter input"
+              />
+            </>
+          }
+          {
+            cleaner && (
+              typeof cleaner === 'function' ? cleaner(clean, isFiltered, cleanerProps) :
+              <CIcon
+                {...cleanerProps}
+                onClick={clean}
+                onKeyUp={(event) => { if (event.key === 'Enter') clean() }}
+              />
+            )
+          }
+          
+        </div>
+      }
+      {
+        itemsPerPageSelect &&
+        <div className={`col-sm-6 p-0 ${(tableFilter || cleaner) ? '' : 'offset-sm-6'}`}>
+          <div className="form-inline justify-content-sm-end c-datatable-items-per-page">
+            <label className="mfe-2">{paginationSelect.label}</label>
+            <select
+              className="form-control"
+              onChange={paginationChange}
+              aria-label="changes number of visible items"
+              value={perPageItems}
+            >
+              { paginationSelect.values.map((number, key)=>{
+                return (
+                  <option
+                    val={number}
+                    key={key}
+                  >
+                    {number}
+                  </option>
+                )
+              })}
+            </select>
+          </div>
+        </div>
+      }
+    </div>
+  }
+</div>
+
+{ overTableSlot }
+
+<div className={`position-relative ${responsive && 'table-responsive' }`}>
+  <table className={classNames(tableClasses)}>
+    <thead>
+      { theadTopSlot }
+      { header && headerContent }
+      {
+        columnFilter && <tr className="table-sm">
+          {
+            rawColumnNames.map((colName, index)=>{
+              return (
+                <th className={classNames(headerClass(index))} key={index}>
+                  { columnFilterSlot[`${rawColumnNames[index]}`] ||
+                    ( (!fields || fields[index].filter !== false) &&
+                      <input
+                        className="form-control form-control-sm"
+                        onInput={e=>{columnFilterEvent(colName, e.target.value, 'input')}}
+                        onChange={e=>{columnFilterEvent(colName, e.target.value, 'change')}}
+                        value={columnFilterState[colName] || ''}
+                        aria-label={`column name: '${colName}' filter input`}
+                      />)
+                  }
+                </th>
+              )
+            })
+          }
+        </tr>
+      }
+    </thead>
+    <tbody style={clickableRows && { cursor: 'pointer' }}>
+      { currentItems.map((item, itemIndex) => {
+        return (
+          <React.Fragment key={itemIndex}>
+          <tr
+            className={classNames(item._classes)}
+            tabIndex={clickableRows && 0}
+            onClick={(e)=>{rowClicked(item, itemIndex + firstItemIndex, e)}}
+          >
+            {
+              rawColumnNames.map((colName, index)=>{
+                return (
+                  scopedSlots[colName] &&
+                  React.cloneElement(
+                    scopedSlots[colName](item, itemIndex + firstItemIndex),
+                    {'key': index}
+                  )
+                ) ||
+                <td
+                  className={classNames(cellClass(item, colName, index))}
+                  key={index}
+                >
+                  { String(item[colName]) }
+                </td>
+              })
+            }
+          </tr>
+          {
+            scopedSlots.details &&
+            <tr
+              onClick={(e)=>{rowClicked(item, itemIndex + firstItemIndex, e, true)}}
+              className="p-0"
+              style={{border: 'none !important'}}
+              key={'details' + itemIndex}
+            >
+              <td
+                colSpan={colspan}
+                className="p-0"
+                style={{border: 'none !important'}}
+              >
+                { scopedSlots.details(item, itemIndex + firstItemIndex) }
+              </td>
+            </tr>
+          }
+          </React.Fragment>
+        )
+      })}
+      {
+        !currentItems.length &&
+        <tr>
+          <td colSpan={colspan}>
+            { noItemsViewSlot ||
+              <div className="text-center my-5">
+                <h2>
+                  { noItemsText + ' ' }
+                  <CIcon
+                    width="30"
+                    name="cilBan"
+                    content={cilBan}
+                    className="text-danger mb-2"
+                  />
+                </h2>
+              </div>}
+          </td>
+        </tr>
+      }
+    </tbody>
+    { footer && currentItems.length > 0 && <tfoot>{headerContent}</tfoot>}
+    { footerSlot }
+    { captionSlot }
+  </table>
+  { loading && 
+    (loadingSlot || 
+    <CElementCover 
+      boundaries={[
+        { sides: ['top'], query: 'td' },
+        { sides: ['bottom'], query: 'tbody' }
+      ]}
+    />)
+  }
+</div>
+
+{ underTableSlot }
+
+{ pagination &&
+  <CPagination
+    style={{display: totalPages > 1 ? 'inline' : 'none'}}
+    onActivePageChange={(page) => { setPage(page) }}
+    pages={totalPages}
+    activePage={page}
+    {...paginationProps}
+  />
+}
+</React.Fragment>
+  )
+}
+
+CDataTable.propTypes = {
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  overTableSlot: PropTypes.node,
+  columnHeaderSlot: PropTypes.object,
+  sortingIconSlot: PropTypes.func,
+  columnFilterSlot: PropTypes.object,
+  noItemsViewSlot: PropTypes.node,
+  noItemsView: PropTypes.object,
+  captionSlot: PropTypes.node,
+  footerSlot: PropTypes.node,
+  underTableSlot: PropTypes.node,
+  scopedSlots: PropTypes.object,
+  theadTopSlot: PropTypes.node,
+  loadingSlot: PropTypes.node,
+  loading: PropTypes.bool,
+  fields: PropTypes.array,
+  pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  activePage: PropTypes.number,
+  itemsPerPage: PropTypes.number,
+  items: PropTypes.array,
+  sorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  clickableRows: PropTypes.bool,
+  columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  tableFilterValue: PropTypes.string,
+  tableFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  cleaner: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  addTableClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  size: PropTypes.string,
+  dark: PropTypes.bool,
+  striped: PropTypes.bool,
+  hover: PropTypes.bool,
+  border: PropTypes.bool,
+  outlined: PropTypes.bool,
+  responsive: PropTypes.bool,
+  footer: PropTypes.bool,
+  itemsPerPageSelect: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  sorterValue: PropTypes.object,
+  columnFilterValue: PropTypes.object,
+  header: PropTypes.bool,
+  onRowClick: PropTypes.func,
+  onSorterValueChange: PropTypes.func,
+  onPaginationChange: PropTypes.func,
+  onColumnFilterChange: PropTypes.func,
+  onPagesChange: PropTypes.func,
+  onTableFilterChange: PropTypes.func,
+  onPageChange: PropTypes.func,
+  onFilteredItemsChange: PropTypes.func
+}
+
+CDataTable.defaultProps = {
+  itemsPerPage: 10,
+  responsive: true,
+  columnHeaderSlot: {},
+  columnFilterSlot: {},
+  scopedSlots: {},
+  sorterValue: {},
+  header: true
+}
+
+export default CDataTable
diff --git a/src/table/CDataTable.module.css b/src/table/CDataTable.module.css
new file mode 100644
index 00000000..d7768cc9
--- /dev/null
+++ b/src/table/CDataTable.module.css
@@ -0,0 +1,17 @@
+.transparent {
+  opacity: 0.4;
+}
+.icon-transition {
+  -webkit-transition: transform 0.3s;
+  transition: transform 0.3s;
+}
+.arrow-position {
+  right: 0;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+.rotate-icon {
+  -ms-transform: translateY(-50%) rotate(-180deg);
+  transform: translateY(-50%) rotate(-180deg);
+}
diff --git a/src/table/tests/CDataTable.test.js b/src/table/tests/CDataTable.test.js
new file mode 100644
index 00000000..c905e41b
--- /dev/null
+++ b/src/table/tests/CDataTable.test.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CDataTable from '../CDataTable'
+
+configure({ adapter: new Adapter() })
+
+describe('CDataTable', () => {
+    it('renders basic wrapper correctly', () => {
+        const component = renderer.create(<CDataTable/>);
+        let tree = component.toJSON();
+        expect(tree).toMatchSnapshot()
+    })
+  it('renders customized wrapper correctly', () => {
+    const items = [
+        {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
+        {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
+        {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+        {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+        {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+        {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+        {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
+        {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+    ]
+    const fields = [
+        { key: 'name', _style: { width: '40%'} },
+        'registered',
+        { key: 'role', _style: { width: '20%'} },
+        { key: 'status', _style: { width: '20%'} },
+        {
+          key: 'show_details',
+          label: '',
+          _style: { width: '1%' },
+          sorter: false,
+          filter: false
+        }
+    ]
+    const componentCustomized = renderer.create(
+      <CDataTable
+        loading
+        fields={fields}
+        pagination
+        activePage={2}
+        itemsPerPage={3}
+        items={items}
+        sorter
+        clickableRows
+        columnFilter
+        tableFilter
+        cleaner
+        addTableClasses="table-classes"
+        size="sm"
+        dark
+        striped
+        hover
+        border
+        outlined
+        responsive
+        footer
+        itemsPerPageSelect
+        header
+        scopedSlots = {{
+            'status':
+                (item)=>(
+                <td className="bg-info">
+                    {item.status}
+                </td>
+                ),
+            }}
+        />
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/table/tests/__snapshots__/CDataTable.test.js.snap b/src/table/tests/__snapshots__/CDataTable.test.js.snap
new file mode 100644
index 00000000..5f3c3902
--- /dev/null
+++ b/src/table/tests/__snapshots__/CDataTable.test.js.snap
@@ -0,0 +1,707 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CDataTable renders basic wrapper correctly 1`] = `
+Array [
+  <div />,
+  <div
+    className="position-relative table-responsive"
+  >
+    <table
+      className="table"
+    >
+      <thead>
+        <tr />
+      </thead>
+      <tbody>
+        <tr>
+          <td
+            colSpan={0}
+          >
+            <div
+              className="text-center my-5"
+            >
+              <h2>
+                No items 
+                <svg
+                  className="c-icon c-icon-custom-size text-danger mb-2"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<path fill='var(--ci-primary-color, currentColor)' d='M425.706,86.294A240,240,0,0,0,86.294,425.705,240,240,0,0,0,425.706,86.294ZM256,48A207.1,207.1,0,0,1,391.528,98.345L98.345,391.528A207.1,207.1,0,0,1,48,256C48,141.309,141.309,48,256,48Zm0,416a207.084,207.084,0,0,1-134.986-49.887l293.1-293.1A207.084,207.084,0,0,1,464,256C464,370.691,370.691,464,256,464Z' class='ci-primary'/>",
+                    }
+                  }
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="30"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </h2>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>,
+]
+`;
+
+exports[`CDataTable renders customized wrapper correctly 1`] = `
+Array [
+  <div>
+    <div
+      className="row my-2 mx-0"
+    >
+      <div
+        className="col-sm-6 form-inline p-0 c-datatable-filter"
+      >
+        <label
+          className="mfe-2"
+        >
+          Filter:
+        </label>
+        <input
+          aria-label="table filter input"
+          className="form-control"
+          onChange={[Function]}
+          onInput={[Function]}
+          placeholder="type string..."
+          type="text"
+          value=""
+        />
+        <svg
+          className="c-icon mfs-2 transparent"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225' class='ci-primary'/>",
+            }
+          }
+          onClick={[Function]}
+          onKeyUp={[Function]}
+          role="img"
+          tabIndex={null}
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </div>
+      <div
+        className="col-sm-6 p-0 "
+      >
+        <div
+          className="form-inline justify-content-sm-end c-datatable-items-per-page"
+        >
+          <label
+            className="mfe-2"
+          >
+            Items per page:
+          </label>
+          <select
+            aria-label="changes number of visible items"
+            className="form-control"
+            onChange={[Function]}
+            value={3}
+          >
+            <option
+              val={5}
+            >
+              5
+            </option>
+            <option
+              val={10}
+            >
+              10
+            </option>
+            <option
+              val={20}
+            >
+              20
+            </option>
+            <option
+              val={50}
+            >
+              50
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="position-relative table-responsive"
+  >
+    <table
+      className="table table-sm table-dark table-striped table-hover table-bordered border table-classes"
+    >
+      <thead>
+        <tr>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "cursor": "pointer",
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+                "width": "40%",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              Name
+            </div>
+            <svg
+              className="position-absolute"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>",
+                }
+              }
+              role="img"
+              viewBox="0 0 512 512"
+              width={18}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </th>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "cursor": "pointer",
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              Registered
+            </div>
+            <svg
+              className="position-absolute"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>",
+                }
+              }
+              role="img"
+              viewBox="0 0 512 512"
+              width={18}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </th>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "cursor": "pointer",
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+                "width": "20%",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              Role
+            </div>
+            <svg
+              className="position-absolute"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>",
+                }
+              }
+              role="img"
+              viewBox="0 0 512 512"
+              width={18}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </th>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "cursor": "pointer",
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+                "width": "20%",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              Status
+            </div>
+            <svg
+              className="position-absolute"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>",
+                }
+              }
+              role="img"
+              viewBox="0 0 512 512"
+              width={18}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </th>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+                "width": "1%",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              
+            </div>
+          </th>
+        </tr>
+        <tr
+          className="table-sm"
+        >
+          <th
+            className=""
+          >
+            <input
+              aria-label="column name: 'name' filter input"
+              className="form-control form-control-sm"
+              onChange={[Function]}
+              onInput={[Function]}
+              value=""
+            />
+          </th>
+          <th
+            className=""
+          >
+            <input
+              aria-label="column name: 'registered' filter input"
+              className="form-control form-control-sm"
+              onChange={[Function]}
+              onInput={[Function]}
+              value=""
+            />
+          </th>
+          <th
+            className=""
+          >
+            <input
+              aria-label="column name: 'role' filter input"
+              className="form-control form-control-sm"
+              onChange={[Function]}
+              onInput={[Function]}
+              value=""
+            />
+          </th>
+          <th
+            className=""
+          >
+            <input
+              aria-label="column name: 'status' filter input"
+              className="form-control form-control-sm"
+              onChange={[Function]}
+              onInput={[Function]}
+              value=""
+            />
+          </th>
+          <th
+            className=""
+          />
+        </tr>
+      </thead>
+      <tbody
+        style={
+          Object {
+            "cursor": "pointer",
+          }
+        }
+      >
+        <tr
+          className=""
+          onClick={[Function]}
+          tabIndex={0}
+        >
+          <td
+            className=""
+          >
+            Chetan Mohamed
+          </td>
+          <td
+            className=""
+          >
+            2018/02/01
+          </td>
+          <td
+            className=""
+          >
+            Admin
+          </td>
+          <td
+            className="bg-info"
+          >
+            Inactive
+          </td>
+          <td
+            className=""
+          >
+            undefined
+          </td>
+        </tr>
+        <tr
+          className=""
+          onClick={[Function]}
+          tabIndex={0}
+        >
+          <td
+            className=""
+          >
+            Derick Maximinus
+          </td>
+          <td
+            className=""
+          >
+            2018/03/01
+          </td>
+          <td
+            className=""
+          >
+            Member
+          </td>
+          <td
+            className="bg-info"
+          >
+            Pending
+          </td>
+          <td
+            className=""
+          >
+            undefined
+          </td>
+        </tr>
+        <tr
+          className=""
+          onClick={[Function]}
+          tabIndex={0}
+        >
+          <td
+            className=""
+          >
+            Friderik Dávid
+          </td>
+          <td
+            className=""
+          >
+            2018/01/21
+          </td>
+          <td
+            className=""
+          >
+            Staff
+          </td>
+          <td
+            className="bg-info"
+          >
+            Active
+          </td>
+          <td
+            className=""
+          >
+            undefined
+          </td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "cursor": "pointer",
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+                "width": "40%",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              Name
+            </div>
+            <svg
+              className="position-absolute"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>",
+                }
+              }
+              role="img"
+              viewBox="0 0 512 512"
+              width={18}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </th>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "cursor": "pointer",
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              Registered
+            </div>
+            <svg
+              className="position-absolute"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>",
+                }
+              }
+              role="img"
+              viewBox="0 0 512 512"
+              width={18}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </th>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "cursor": "pointer",
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+                "width": "20%",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              Role
+            </div>
+            <svg
+              className="position-absolute"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>",
+                }
+              }
+              role="img"
+              viewBox="0 0 512 512"
+              width={18}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </th>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "cursor": "pointer",
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+                "width": "20%",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              Status
+            </div>
+            <svg
+              className="position-absolute"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>",
+                }
+              }
+              role="img"
+              viewBox="0 0 512 512"
+              width={18}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </th>
+          <th
+            className="position-relative pr-4"
+            onClick={[Function]}
+            style={
+              Object {
+                "overflow": "hidden",
+                "verticalAlign": "middle",
+                "width": "1%",
+              }
+            }
+          >
+            <div
+              className="d-inline"
+            >
+              
+            </div>
+          </th>
+        </tr>
+      </tfoot>
+    </table>
+    <div
+      className=""
+      style={
+        Object {
+          "backgroundColor": "rgb(255,255,255,0.4)",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "left": "50%",
+            "position": "absolute",
+            "top": "50%",
+            "transform": "translateX(-50%) translateY(-50%)",
+          }
+        }
+      >
+        <div
+          aria-hidden="false"
+          aria-label="Loading"
+          className="spinner-grow spinner-grow-lg text-primary"
+          role="status"
+        />
+      </div>
+    </div>
+  </div>,
+  <nav
+    aria-label="pagination"
+    style={
+      Object {
+        "display": "inline",
+      }
+    }
+  >
+    <ul
+      className="pagination justify-content-start"
+    >
+      <li
+        className="page-item"
+      >
+        <a
+          aria-disabled={false}
+          aria-label="Go to first page"
+          className="page-link"
+          href="#"
+          onClick={[Function]}
+          rel={null}
+        >
+          «
+        </a>
+      </li>
+      <li
+        className="page-item"
+      >
+        <a
+          aria-disabled={false}
+          aria-label="Go to previous page"
+          className="page-link"
+          href="#"
+          onClick={[Function]}
+          rel={null}
+        >
+          ‹
+        </a>
+      </li>
+      <li
+        className=" page-item"
+      >
+        <a
+          aria-label="Go to page 1"
+          className="page-link"
+          href="#"
+          onClick={[Function]}
+          rel={null}
+        >
+          1
+        </a>
+      </li>
+      <li
+        className="active page-item"
+      >
+        <a
+          aria-label="Current page 2"
+          className="page-link"
+          href="#"
+          onClick={[Function]}
+          rel={null}
+        >
+          2
+        </a>
+      </li>
+      <li
+        className=" page-item"
+      >
+        <a
+          aria-label="Go to page 3"
+          className="page-link"
+          href="#"
+          onClick={[Function]}
+          rel={null}
+        >
+          3
+        </a>
+      </li>
+      <li
+        className="page-item"
+      >
+        <a
+          aria-disabled={false}
+          aria-label="Go to next page"
+          className="page-link"
+          href="#"
+          onClick={[Function]}
+          rel={null}
+        >
+          ›
+        </a>
+      </li>
+      <li
+        className="page-item"
+      >
+        <a
+          aria-disabled={false}
+          aria-label="Go to last page"
+          className="page-link"
+          href="#"
+          onClick={[Function]}
+          rel={null}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  </nav>,
+]
+`;
diff --git a/src/tabs/CTabContent.js b/src/tabs/CTabContent.js
new file mode 100644
index 00000000..9f90960e
--- /dev/null
+++ b/src/tabs/CTabContent.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+//component - CoreUI / CTabContent
+export const Context = React.createContext()
+
+const CTabContent = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    fade,
+    ...attributes
+  } = props;
+
+  // render
+  const classes = classNames('tab-content',className)
+
+  return (
+    <Context.Provider value={fade}>
+      <div className={classes} {...attributes} ref={innerRef}/>
+    </Context.Provider>
+  )
+}
+
+CTabContent.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  fade: PropTypes.bool
+}
+
+CTabContent.defaultProps = {
+  fade: true
+}
+
+export default CTabContent
diff --git a/src/tabs/CTabPane.js b/src/tabs/CTabPane.js
new file mode 100644
index 00000000..cd4617c6
--- /dev/null
+++ b/src/tabs/CTabPane.js
@@ -0,0 +1,73 @@
+import React, {
+  useState,
+  useContext,
+  useRef,
+  useEffect
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CFade from '../fade/CFade'
+import { omitByKeys } from '@coreui/utils/src'
+import { CFadeProps } from '../utils/helper.js'
+
+import { Context } from './CTabs.js'
+import { Context as FadeContext } from './CTabContent.js'
+
+//component - CoreUI / CTabPane
+const getIndex = el => Array.from(el.parentNode.children).indexOf(el)
+
+const getState = r => r.current.dataset.tab || getIndex(r.current)
+
+const CTabPane = props => {
+  const {
+    className,
+    //
+    innerRef,
+    active,
+    ...attributes
+  } = props
+
+  const { active: activeTab, setActiveTab } = useContext(Context) || {} 
+  const fade = useContext(FadeContext)
+  const ref = typeof innerRef === 'object' ? innerRef : useRef()
+  typeof innerRef === 'function' && innerRef(ref)
+
+  const [isActive, setIsActive] = useState()
+
+  useEffect(() => {
+    setIsActive(activeTab === getState(ref))
+  }, [activeTab])
+
+  useEffect(() => {
+    if (active !== undefined) {
+      setActiveTab ? setActiveTab(active && getState(ref)) : setIsActive(active)
+    }
+  }, [active])
+
+  //render
+  const classes = classNames(
+    'tab-pane',
+    { 'active': isActive },
+    className
+  )
+
+  const attrs = omitByKeys(attributes, CFadeProps)
+
+  return (
+    <CFade
+      in={isActive}
+      baseClass={fade ? 'fade' : ''}
+      className={classes} 
+      {...attrs} 
+      innerRef={ref}
+    />
+  )
+}
+
+CTabPane.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  active: PropTypes.bool
+}
+
+export default CTabPane
diff --git a/src/tabs/CTabs.js b/src/tabs/CTabs.js
new file mode 100644
index 00000000..0088c701
--- /dev/null
+++ b/src/tabs/CTabs.js
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+//component - CoreUI / CTabPane
+export const Context = React.createContext()
+
+const CTabs = props => {
+  const {
+    children,
+    activeTab,
+    onActiveTabChange
+  } = props
+
+  const [active, setActive] = useState(0)
+  useEffect(() => {
+    activeTab !== undefined && setActive(activeTab)
+  }, [activeTab])
+
+  const setActiveTab = tab => {
+    onActiveTabChange && onActiveTabChange(tab)
+    setActive(tab)
+  }
+
+  return (
+    <React.Fragment>
+      <Context.Provider value={{active, setActiveTab}}>
+        {children}
+      </Context.Provider>
+    </React.Fragment>
+  )
+}
+
+CTabs.propTypes = {
+  children: PropTypes.node,
+  activeTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onActiveTabChange: PropTypes.func,
+}
+
+export default CTabs
diff --git a/src/tabs/tests/CTabContent.test.js b/src/tabs/tests/CTabContent.test.js
new file mode 100644
index 00000000..61ee492f
--- /dev/null
+++ b/src/tabs/tests/CTabContent.test.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { configure } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer'
+
+import CTabContent from '../CTabContent'
+
+configure({ adapter: new Adapter() })
+
+describe('CTabContent', () => {
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CTabContent className="class-name">
+        CTabContent
+      </CTabContent>
+    )
+    let tree = componentCustomized.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/tabs/tests/CTabPane.test.js b/src/tabs/tests/CTabPane.test.js
new file mode 100644
index 00000000..35a5b771
--- /dev/null
+++ b/src/tabs/tests/CTabPane.test.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import toJson from 'enzyme-to-json'
+
+import CTabPane from '../CTabPane'
+
+configure({ adapter: new Adapter() })
+
+describe('CTabPane', () => {
+  it('renders customized wrapper correctly', () => {
+    const wrapper = mount(
+      <CTabPane className="class-name" active>
+        CTabPane
+      </CTabPane>
+    )
+    expect(toJson(wrapper)).toMatchSnapshot()
+  })
+
+})
diff --git a/src/tabs/tests/CTabs.test.js b/src/tabs/tests/CTabs.test.js
new file mode 100644
index 00000000..ed917d37
--- /dev/null
+++ b/src/tabs/tests/CTabs.test.js
@@ -0,0 +1,94 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import toJson from 'enzyme-to-json'
+
+import CTabs from '../CTabs'
+
+import CTabPane from '../CTabPane'
+import CNav from '../../nav/CNav'
+import CNavItem from '../../nav/CNavItem'
+import CNavLink from '../../nav/CNavLink'
+import CTabContent from '../CTabContent'
+
+configure({ adapter: new Adapter() })
+
+describe('CTabs', () => {
+
+  it('render full tabs', () => {
+    const wrapper = mount(
+      <CTabs activeTab="home">
+        <CNav variant="tabs">
+          <CNavItem>
+            <CNavLink data-tab="home">
+              Home
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink data-tab="profile">
+              Profile
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink data-tab="messages">
+              Messages
+            </CNavLink>
+          </CNavItem>
+        </CNav>
+        <CTabContent>
+          <CTabPane data-tab="home">
+            123
+          </CTabPane>
+          <CTabPane data-tab="profile">
+            456
+          </CTabPane>
+          <CTabPane data-tab="messages">
+            789
+          </CTabPane>
+        </CTabContent>
+      </CTabs>
+    )
+    expect(toJson(wrapper)).toMatchSnapshot()
+  })
+
+  it('onActiveTabChange', () => {
+    const tabChange = jest.fn()
+    const component = mount(
+      <CTabs 
+        activeTab="home"
+        onActiveTabChange={tabChange}
+      >
+        <CNav variant="tabs">
+          <CNavItem>
+            <CNavLink data-tab="home">
+              Home
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink data-tab="profile">
+              Profile
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink data-tab="messages">
+              Messages
+            </CNavLink>
+          </CNavItem>
+        </CNav>
+        <CTabContent>
+          <CTabPane data-tab="home">
+            123
+          </CTabPane>
+          <CTabPane data-tab="profile">
+            456
+          </CTabPane>
+          <CTabPane data-tab="messages">
+            789
+          </CTabPane>
+        </CTabContent>
+      </CTabs>
+    )
+    component.find('.nav-link').at(1).simulate('click')
+    expect(tabChange).toHaveBeenCalledTimes(1);
+  })
+})
diff --git a/src/tabs/tests/__snapshots__/CTabContent.test.js.snap b/src/tabs/tests/__snapshots__/CTabContent.test.js.snap
new file mode 100644
index 00000000..13243ab6
--- /dev/null
+++ b/src/tabs/tests/__snapshots__/CTabContent.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTabContent renders customized wrapper correctly 1`] = `
+<div
+  className="tab-content class-name"
+>
+  CTabContent
+</div>
+`;
diff --git a/src/tabs/tests/__snapshots__/CTabPane.test.js.snap b/src/tabs/tests/__snapshots__/CTabPane.test.js.snap
new file mode 100644
index 00000000..bc0ac73b
--- /dev/null
+++ b/src/tabs/tests/__snapshots__/CTabPane.test.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTabPane renders customized wrapper correctly 1`] = `
+<CTabPane
+  active={true}
+  className="class-name"
+>
+  <CFade
+    appear={true}
+    baseClass=""
+    baseClassActive="show"
+    className="tab-pane active class-name"
+    enter={true}
+    exit={true}
+    in={true}
+    innerRef={
+      Object {
+        "current": <div
+          class="tab-pane active class-name"
+        >
+          CTabPane
+        </div>,
+      }
+    }
+    tag="div"
+    timeout={150}
+  >
+    <Transition
+      appear={true}
+      enter={true}
+      exit={true}
+      in={true}
+      mountOnEnter={false}
+      nodeRef={
+        Object {
+          "current": <div
+            class="tab-pane active class-name"
+          >
+            CTabPane
+          </div>,
+        }
+      }
+      onEnter={[Function]}
+      onEntered={[Function]}
+      onEntering={[Function]}
+      onExit={[Function]}
+      onExited={[Function]}
+      onExiting={[Function]}
+      timeout={150}
+      unmountOnExit={false}
+    >
+      <div
+        className="tab-pane active class-name"
+      >
+        CTabPane
+      </div>
+    </Transition>
+  </CFade>
+</CTabPane>
+`;
diff --git a/src/tabs/tests/__snapshots__/CTabs.test.js.snap b/src/tabs/tests/__snapshots__/CTabs.test.js.snap
new file mode 100644
index 00000000..cacc7002
--- /dev/null
+++ b/src/tabs/tests/__snapshots__/CTabs.test.js.snap
@@ -0,0 +1,334 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTabs render full tabs 1`] = `
+<CTabs
+  activeTab="home"
+>
+  <CNav
+    tag="ul"
+    variant="tabs"
+  >
+    <ul
+      className="nav nav-tabs"
+    >
+      <CNavItem
+        tag="li"
+      >
+        <li
+          className="nav-item"
+        >
+          <CNavLink
+            data-tab="home"
+          >
+            <CLink
+              active={true}
+              className={
+                Array [
+                  "nav-link",
+                  undefined,
+                ]
+              }
+              data-tab="home"
+              innerRef={
+                Object {
+                  "current": <a
+                    class="active nav-link"
+                    data-tab="home"
+                    href="#"
+                  >
+                    Home
+                  </a>,
+                }
+              }
+              onClick={[Function]}
+            >
+              <a
+                className="active nav-link"
+                data-tab="home"
+                href="#"
+                onClick={[Function]}
+                rel={null}
+              >
+                Home
+              </a>
+            </CLink>
+          </CNavLink>
+        </li>
+      </CNavItem>
+      <CNavItem
+        tag="li"
+      >
+        <li
+          className="nav-item"
+        >
+          <CNavLink
+            data-tab="profile"
+          >
+            <CLink
+              active={false}
+              className={
+                Array [
+                  "nav-link",
+                  undefined,
+                ]
+              }
+              data-tab="profile"
+              innerRef={
+                Object {
+                  "current": <a
+                    class="nav-link"
+                    data-tab="profile"
+                    href="#"
+                  >
+                    Profile
+                  </a>,
+                }
+              }
+              onClick={[Function]}
+            >
+              <a
+                className="nav-link"
+                data-tab="profile"
+                href="#"
+                onClick={[Function]}
+                rel={null}
+              >
+                Profile
+              </a>
+            </CLink>
+          </CNavLink>
+        </li>
+      </CNavItem>
+      <CNavItem
+        tag="li"
+      >
+        <li
+          className="nav-item"
+        >
+          <CNavLink
+            data-tab="messages"
+          >
+            <CLink
+              active={false}
+              className={
+                Array [
+                  "nav-link",
+                  undefined,
+                ]
+              }
+              data-tab="messages"
+              innerRef={
+                Object {
+                  "current": <a
+                    class="nav-link"
+                    data-tab="messages"
+                    href="#"
+                  >
+                    Messages
+                  </a>,
+                }
+              }
+              onClick={[Function]}
+            >
+              <a
+                className="nav-link"
+                data-tab="messages"
+                href="#"
+                onClick={[Function]}
+                rel={null}
+              >
+                Messages
+              </a>
+            </CLink>
+          </CNavLink>
+        </li>
+      </CNavItem>
+    </ul>
+  </CNav>
+  <CTabContent
+    fade={true}
+  >
+    <div
+      className="tab-content"
+    >
+      <CTabPane
+        data-tab="home"
+      >
+        <CFade
+          appear={true}
+          baseClass="fade"
+          baseClassActive="show"
+          className="tab-pane active"
+          data-tab="home"
+          enter={true}
+          exit={true}
+          in={true}
+          innerRef={
+            Object {
+              "current": <div
+                class="tab-pane active fade"
+                data-tab="home"
+              >
+                123
+              </div>,
+            }
+          }
+          tag="div"
+          timeout={150}
+        >
+          <Transition
+            appear={true}
+            enter={true}
+            exit={true}
+            in={true}
+            mountOnEnter={false}
+            nodeRef={
+              Object {
+                "current": <div
+                  class="tab-pane active fade"
+                  data-tab="home"
+                >
+                  123
+                </div>,
+              }
+            }
+            onEnter={[Function]}
+            onEntered={[Function]}
+            onEntering={[Function]}
+            onExit={[Function]}
+            onExited={[Function]}
+            onExiting={[Function]}
+            timeout={150}
+            unmountOnExit={false}
+          >
+            <div
+              className="tab-pane active fade"
+              data-tab="home"
+            >
+              123
+            </div>
+          </Transition>
+        </CFade>
+      </CTabPane>
+      <CTabPane
+        data-tab="profile"
+      >
+        <CFade
+          appear={true}
+          baseClass="fade"
+          baseClassActive="show"
+          className="tab-pane"
+          data-tab="profile"
+          enter={true}
+          exit={true}
+          in={false}
+          innerRef={
+            Object {
+              "current": <div
+                class="tab-pane fade"
+                data-tab="profile"
+              >
+                456
+              </div>,
+            }
+          }
+          tag="div"
+          timeout={150}
+        >
+          <Transition
+            appear={true}
+            enter={true}
+            exit={true}
+            in={false}
+            mountOnEnter={false}
+            nodeRef={
+              Object {
+                "current": <div
+                  class="tab-pane fade"
+                  data-tab="profile"
+                >
+                  456
+                </div>,
+              }
+            }
+            onEnter={[Function]}
+            onEntered={[Function]}
+            onEntering={[Function]}
+            onExit={[Function]}
+            onExited={[Function]}
+            onExiting={[Function]}
+            timeout={150}
+            unmountOnExit={false}
+          >
+            <div
+              className="tab-pane fade"
+              data-tab="profile"
+            >
+              456
+            </div>
+          </Transition>
+        </CFade>
+      </CTabPane>
+      <CTabPane
+        data-tab="messages"
+      >
+        <CFade
+          appear={true}
+          baseClass="fade"
+          baseClassActive="show"
+          className="tab-pane"
+          data-tab="messages"
+          enter={true}
+          exit={true}
+          in={false}
+          innerRef={
+            Object {
+              "current": <div
+                class="tab-pane fade"
+                data-tab="messages"
+              >
+                789
+              </div>,
+            }
+          }
+          tag="div"
+          timeout={150}
+        >
+          <Transition
+            appear={true}
+            enter={true}
+            exit={true}
+            in={false}
+            mountOnEnter={false}
+            nodeRef={
+              Object {
+                "current": <div
+                  class="tab-pane fade"
+                  data-tab="messages"
+                >
+                  789
+                </div>,
+              }
+            }
+            onEnter={[Function]}
+            onEntered={[Function]}
+            onEntering={[Function]}
+            onExit={[Function]}
+            onExited={[Function]}
+            onExiting={[Function]}
+            timeout={150}
+            unmountOnExit={false}
+          >
+            <div
+              className="tab-pane fade"
+              data-tab="messages"
+            >
+              789
+            </div>
+          </Transition>
+        </CFade>
+      </CTabPane>
+    </div>
+  </CTabContent>
+</CTabs>
+`;
diff --git a/src/template/CFooter.js b/src/template/CFooter.js
new file mode 100644
index 00000000..f51f7ed1
--- /dev/null
+++ b/src/template/CFooter.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CFooter
+const CFooter = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    fixed,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames(
+    'c-footer',
+    fixed ? 'c-footer-fixed' : null,
+    className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CFooter.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  fixed: PropTypes.bool
+};
+
+CFooter.defaultProps = {
+  tag: 'footer',
+  fixed: false
+};
+
+export default CFooter
diff --git a/src/template/CHeader.js b/src/template/CHeader.js
new file mode 100644
index 00000000..d9067810
--- /dev/null
+++ b/src/template/CHeader.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+//component - CoreUI / CHeader
+
+const CHeader = props=>{
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    fixed,
+    colorScheme,
+    withSubheader,
+    ...attributes
+  } = props;
+
+  // render
+
+  const classes = classNames(className,
+  'c-header',
+  colorScheme ? 'c-header-' + colorScheme : null,
+  fixed ? 'c-header-fixed' : null,
+  withSubheader ? 'c-header-with-subheader' : null);
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  );
+
+}
+
+CHeader.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  children: PropTypes.node,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  fixed: PropTypes.bool,
+  withSubheader: PropTypes.bool,
+  colorScheme: PropTypes.string,
+};
+
+CHeader.defaultProps = {
+  tag: 'header',
+  fixed: true,
+  colorScheme: 'light'
+};
+
+export default CHeader;
diff --git a/src/template/CHeaderBrand.js b/src/template/CHeaderBrand.js
new file mode 100644
index 00000000..b9bd2990
--- /dev/null
+++ b/src/template/CHeaderBrand.js
@@ -0,0 +1,13 @@
+/* eslint react/prop-types: 0 */
+import React from 'react'
+import CBrand from '../utils/CBrand'
+
+//component - CoreUI / CHeaderBrand
+
+const CHeaderBrand = props => {
+  return (
+    <CBrand {...props} className={['c-header-brand', props.className]}/>
+  )
+}
+
+export default CHeaderBrand
diff --git a/src/template/CHeaderNav.js b/src/template/CHeaderNav.js
new file mode 100644
index 00000000..31dfba27
--- /dev/null
+++ b/src/template/CHeaderNav.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CHeaderNav
+
+const CHeaderNav = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    'c-header-nav'
+  )
+
+  return (
+    <ul className={classes} {...attributes} ref={innerRef} />
+  )
+
+}
+
+CHeaderNav.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+
+export default CHeaderNav
diff --git a/src/template/CHeaderNavItem.js b/src/template/CHeaderNavItem.js
new file mode 100644
index 00000000..a32d918b
--- /dev/null
+++ b/src/template/CHeaderNavItem.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CHeaderNavItem
+
+const CHeaderNavItem = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    'c-header-nav-item'
+  )
+
+  return (
+    <li className={classes} {...attributes} ref={innerRef} />
+  )
+
+}
+
+CHeaderNavItem.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+
+export default CHeaderNavItem
\ No newline at end of file
diff --git a/src/template/CHeaderNavLink.js b/src/template/CHeaderNavLink.js
new file mode 100644
index 00000000..ff9f4dd2
--- /dev/null
+++ b/src/template/CHeaderNavLink.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CLink from '../link/CLink'
+
+//component - CoreUI / CHeaderNavLink
+
+const CHeaderNavLink = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...rest
+  } = props
+
+  //render
+
+  const classes = classNames(
+    className,
+    'c-header-nav-link'
+  )
+
+  return (
+    <CLink className={classes} {...rest} innerRef={innerRef} />
+  )
+
+}
+
+CHeaderNavLink.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+
+export default CHeaderNavLink
\ No newline at end of file
diff --git a/src/template/CScrollbar.js b/src/template/CScrollbar.js
new file mode 100644
index 00000000..f869c257
--- /dev/null
+++ b/src/template/CScrollbar.js
@@ -0,0 +1,72 @@
+import React, { useState, createRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import PerfectScrollbar from 'perfect-scrollbar'
+import 'perfect-scrollbar/css/perfect-scrollbar.css'
+import './scrollbar.css'
+
+//component - CoreUI / CScrollbar
+const CScrollbar = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    settings,
+    switcher,
+    ...attributes
+  } = props
+
+  const [instance, setInstance] = useState()
+  const ref = createRef()
+  innerRef && innerRef(ref)
+
+  useEffect(() => {
+    switcher ? init() : uninit()
+  }, [switcher])
+
+  useEffect(() => uninit(), [])
+
+  const init = () => {
+    if (!instance) {
+      createPerfectScrollbar()
+    }
+  }
+
+  const createPerfectScrollbar = () => {
+    setInstance(new PerfectScrollbar(ref.current, settings))
+  }
+
+  const uninit = () => {
+    if (instance) {
+      instance.destroy()
+      setInstance(null)
+    }
+  }
+
+  // render
+  return (
+    <Tag 
+      className={classNames(className)} 
+      style={{ position: 'relative' }} 
+      {...attributes} 
+      ref={ref}
+    />
+  )
+}
+
+CScrollbar.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  settings: PropTypes.object,
+  switcher: PropTypes.bool,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CScrollbar.defaultProps = {
+  tag: 'div'
+};
+
+export default CScrollbar
diff --git a/src/template/CSidebar.js b/src/template/CSidebar.js
new file mode 100644
index 00000000..cf34370b
--- /dev/null
+++ b/src/template/CSidebar.js
@@ -0,0 +1,188 @@
+import React, { useState, useRef, useMemo, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export const Context = React.createContext({})
+
+//component - CoreUI / CSidebar
+const CSidebar = props => {
+
+  const {
+    children,
+    className,
+    innerRef,
+    breakpoint,
+    show,
+    fixed,
+    unfoldable,
+    minimize,
+    size,
+    hideOnMobileClick,
+    aside,
+    colorScheme,
+    overlaid,
+    dropdownMode,
+    onShowChange,
+    onMinimizeChange,
+    ...attributes
+  } = props
+
+  const key = useState(Math.random().toString(36).substr(2))[0]
+
+  const [isOpen, setIsOpen] = useState(show)
+  const [openDropdown, setOpenDropdown] = useState()
+
+  const node = useRef({}).current
+  const reference = r => {
+    node.current = r
+    innerRef && innerRef(r)
+  }
+
+  const [minimized, setIsMinimized] = useState(minimize)
+  useMemo(() => {
+    setIsMinimized(minimize)
+  }, [minimize])
+
+  const toggleMinimize = () => {
+    setIsMinimized(!minimized)
+    onMinimizeChange && onMinimizeChange(minimized)
+  }
+
+  useMemo(() => {
+    setIsOpen(show)
+  }, [show])
+
+  useEffect(() => {
+    isOpen === true ? createBackdrop() : removeBackdrop()
+    return () => removeBackdrop()
+  }, [isOpen])
+
+  //methods
+  const sidebarCloseListener = e => {
+    if (
+      document.getElementById(key + 'backdrop') &&
+      !node.current.contains(e.target)
+    ) {
+      closeSidebar()
+    }
+  }
+
+  const onKeydown = e => {
+    e.key.includes('Esc') && isAutoclosable() && closeSidebar()
+  }
+
+  const createBackdrop = () => {
+    const backdrop = document.createElement('div')
+    if (overlaid) {
+      document.addEventListener('click', sidebarCloseListener)
+    } else {
+      backdrop.addEventListener('click', closeSidebar)
+    }
+    document.addEventListener('keydown', onKeydown)
+    backdrop.className = 'c-sidebar-backdrop c-show'
+    backdrop.id = key + 'backdrop'
+    document.body.appendChild(backdrop)
+  }
+
+  const removeBackdrop = () => {
+    const backdrop = document.getElementById(key + 'backdrop')
+    if (backdrop) {
+      document.removeEventListener('click', sidebarCloseListener)
+      backdrop.removeEventListener('click', closeSidebar)
+      document.removeEventListener('keydown', onKeydown)
+      document.body.removeChild(backdrop)
+    }
+  }
+
+  const closeSidebar = () => {
+    if (typeof onShowChange === 'function') {
+      onShowChange(overlaid ? false : 'responsive')
+    } else {
+      setIsOpen(overlaid ? false : 'responsive')
+    }
+  }
+
+  const isOnMobile = () => {
+    return Boolean(getComputedStyle(node.current).getPropertyValue('--is-mobile'))
+  }
+
+  const isAutoclosable = () => isOnMobile() || overlaid
+
+  const onSidebarClick = e => {
+    const sidebarItemClicked = String(e.target.className).includes('c-sidebar-nav-link')
+    if (
+        sidebarItemClicked && 
+        hideOnMobileClick &&
+        isAutoclosable()
+      ) {
+      closeSidebar()
+    }
+  }
+
+  // render
+  const haveResponsiveClass = breakpoint && isOpen === 'responsive'
+  const classes = classNames(
+    'c-sidebar',
+    colorScheme && `c-sidebar-${colorScheme}`,
+    isOpen === true && 'c-sidebar-show',
+    haveResponsiveClass && `c-sidebar-${breakpoint}-show`,
+    fixed && !overlaid && 'c-sidebar-fixed',
+    aside && 'c-sidebar-right',
+    minimized && !unfoldable && 'c-sidebar-minimized',
+    minimized && unfoldable && 'c-sidebar-unfoldable',
+    overlaid && 'c-sidebar-overlaid',
+    size && `c-sidebar-${size}`,
+    className
+  )
+
+  return (
+    <Context.Provider value={{
+      dropdownMode,
+      scrollbarExist: !minimized || unfoldable,
+      toggleMinimize,
+      openDropdown, 
+      setOpenDropdown
+    }}>
+      <div
+        className={classes}
+        {...attributes}
+        ref={reference}
+        onClick={onSidebarClick}
+      >
+        {children}
+      </div>
+    </Context.Provider>
+  )
+
+}
+
+CSidebar.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  fixed: PropTypes.bool,
+  unfoldable: PropTypes.bool,
+  overlaid: PropTypes.bool,
+  breakpoint: PropTypes.oneOf([false, '', 'sm', 'md', 'lg', 'xl', 'xxl']),
+  minimize: PropTypes.bool,
+  show: PropTypes.oneOf(['', true, false, 'responsive']),
+  size: PropTypes.oneOf(['', 'sm', 'lg', 'xl']),
+  hideOnMobileClick: PropTypes.bool,
+  aside: PropTypes.bool,
+  colorScheme: PropTypes.string,
+  dropdownMode: PropTypes.oneOf([
+    '', 'openActive', 'close', 'closeInactive', 'noAction'
+  ]),
+  onShowChange: PropTypes.func,
+  onMinimizeChange: PropTypes.func
+}
+
+CSidebar.defaultProps = {
+  fixed: true,
+  breakpoint: 'lg',
+  show: 'responsive',
+  hideOnMobileClick: true,
+  colorScheme: 'dark',
+}
+
+export default CSidebar
diff --git a/src/template/CSidebarBrand.js b/src/template/CSidebarBrand.js
new file mode 100644
index 00000000..61c33bf5
--- /dev/null
+++ b/src/template/CSidebarBrand.js
@@ -0,0 +1,12 @@
+/* eslint react/prop-types: 0 */
+import React from 'react'
+import CBrand from '../utils/CBrand'
+
+//component - CoreUI / CSidebarBrand
+const CSidebarBrand = props => {
+  return (
+    <CBrand {...props} className={['c-sidebar-brand', props.className]}/>
+  )
+}
+
+export default CSidebarBrand
diff --git a/src/template/CSidebarClose.js b/src/template/CSidebarClose.js
new file mode 100644
index 00000000..df530a29
--- /dev/null
+++ b/src/template/CSidebarClose.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import CButtonClose from '../button/CButtonClose'
+
+//component - CoreUI / CSidebarClose
+
+const CSidebarClose = props => {
+  return (
+    <CButtonClose {...props} buttonClass={'c-sidebar-close'}>
+      <svg className="c-icon" width="24" height="24" viewBox="0 0 24 24">
+        <title>x</title>
+        <path d="M20.030 5.030l-1.061-1.061-6.97 6.97-6.97-6.97-1.061 1.061 6.97 6.97-6.97 6.97 1.061 1.061 6.97-6.97 6.97 6.97 1.061-1.061-6.97-6.97 6.97-6.97z"></path>
+      </svg>
+    </CButtonClose>
+  )
+}
+
+export default CSidebarClose
diff --git a/src/template/CSidebarFooter.js b/src/template/CSidebarFooter.js
new file mode 100644
index 00000000..26b0ea2d
--- /dev/null
+++ b/src/template/CSidebarFooter.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CSidebarFooter
+
+const CSidebarFooter = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  // render
+  const classes = classNames('c-sidebar-footer', className)
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CSidebarFooter.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CSidebarFooter.defaultProps = {
+  tag: 'div'
+};
+
+export default CSidebarFooter
diff --git a/src/template/CSidebarForm.js b/src/template/CSidebarForm.js
new file mode 100644
index 00000000..1d69694c
--- /dev/null
+++ b/src/template/CSidebarForm.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CSidebarForm
+
+const CSidebarForm = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames('c-sidebar-form', className)
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CSidebarForm.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CSidebarForm.defaultProps = {
+  tag: 'div'
+};
+
+export default CSidebarForm
diff --git a/src/template/CSidebarHeader.js b/src/template/CSidebarHeader.js
new file mode 100644
index 00000000..f48447b9
--- /dev/null
+++ b/src/template/CSidebarHeader.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CSidebarHeader
+
+const CSidebarHeader = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames('c-sidebar-header', className)
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CSidebarHeader.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CSidebarHeader.defaultProps = {
+  tag: 'div'
+};
+
+export default CSidebarHeader
diff --git a/src/template/CSidebarMinimizer.js b/src/template/CSidebarMinimizer.js
new file mode 100644
index 00000000..a12c46ea
--- /dev/null
+++ b/src/template/CSidebarMinimizer.js
@@ -0,0 +1,38 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Context } from './CSidebar'
+
+//component - CoreUI / CSidebarMinimizer
+
+const CSidebarMinimizer = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  const { toggleMinimize } = useContext(Context)
+  //render
+
+  const classes = classNames('c-sidebar-minimizer', className)
+  return (
+    <button 
+      className={classes} 
+      type="button" 
+      {...attributes}
+      onClick={toggleMinimize}
+      ref={innerRef}
+    />
+  )
+}
+
+CSidebarMinimizer.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+export default CSidebarMinimizer
diff --git a/src/template/CSidebarNav.js b/src/template/CSidebarNav.js
new file mode 100644
index 00000000..83f695c6
--- /dev/null
+++ b/src/template/CSidebarNav.js
@@ -0,0 +1,41 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CScrollbar from './CScrollbar'
+import { Context } from './CSidebar'
+
+//component - CoreUI / CSidebarNav
+const CSidebarNav = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props;
+
+  const { scrollbarExist } = useContext(Context)
+
+  const navClasses = classNames('c-sidebar-nav', 'h-100', className)
+
+  //state
+
+  const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
+  return <CScrollbar
+    settings={{ suppressScrollX: !isRtl }} 
+    className={navClasses} 
+    innerRef={innerRef}
+    switcher={scrollbarExist}
+    tag="ul" 
+    {...attributes}
+  />
+}
+
+CSidebarNav.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  children: PropTypes.node,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+};
+
+export default CSidebarNav
diff --git a/src/template/CSidebarNavDivider.js b/src/template/CSidebarNavDivider.js
new file mode 100644
index 00000000..2db047bf
--- /dev/null
+++ b/src/template/CSidebarNavDivider.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CSidebarNavDivider
+
+const CSidebarNavDivider = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(
+    'c-sidebar-nav-divider',
+    className
+  )
+
+  return (
+    <li className={classes} {...attributes} ref={innerRef} />
+  )
+
+}
+
+CSidebarNavDivider.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+
+export default CSidebarNavDivider
diff --git a/src/template/CSidebarNavDropdown.js b/src/template/CSidebarNavDropdown.js
new file mode 100644
index 00000000..d43470ff
--- /dev/null
+++ b/src/template/CSidebarNavDropdown.js
@@ -0,0 +1,135 @@
+import React, {
+  useState,
+  useContext,
+  useEffect,
+  createRef,
+  isValidElement
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CIcon from '@coreui/icons-react'
+import { useLocation } from 'react-router-dom'
+
+import { Context } from './CSidebar'
+export const DropdownContext = React.createContext({})
+
+export const iconProps = (icon) => {
+  if (typeof icon === 'object') {
+    const key = icon.size ? 'className' : 'customClasses'
+    return {
+      ...icon,
+      [`${key}`]: icon.customClasses || `c-sidebar-nav-icon ${icon.className}`
+    }
+  } else {
+    return {
+      customClasses: 'c-sidebar-nav-icon',
+      name: icon
+    }
+  }
+}
+
+//component - CoreUI / CSidebarNavDropdown
+const CSidebarNavDropdown = props => {
+
+  const {
+    children,
+    className,
+    //
+    innerRef,
+    icon,
+    fontIcon,
+    name,
+    show,
+    route,
+    ...attributes
+  } = props
+
+  const ref = createRef()
+  innerRef && innerRef(ref)
+
+  const { dropdownMode, openDropdown, setOpenDropdown } = useContext(Context)
+
+  const [isOpen, setIsOpen] = useState(show)
+  useEffect(() => {
+    setIsOpen(show)
+  }, [show])
+
+  useEffect(() => {
+    !dropdownMode && (!openDropdown || !ref.current.contains(openDropdown)) && setIsOpen(false)
+  }, [openDropdown])
+
+  const toggle = () => {
+    !dropdownMode && setOpenDropdown(
+      isOpen ? ref.current.parentNode.closest('.c-sidebar-nav-dropdown') : ref.current
+    )
+    setIsOpen(!isOpen)
+  }
+
+  let path = ''
+  try {
+    path = useLocation().pathname
+  } catch (e) {
+    console.warn(e)
+  }
+
+  useEffect(() => {
+    if (dropdownMode === 'close') {
+      setIsOpen(false)
+    } else if (dropdownMode === 'closeInactive' && route) {
+      setIsOpen(path.includes(route))
+    } else if ((!dropdownMode || dropdownMode !== 'noAction') && !isOpen && route) {
+      setIsOpen(path.includes(route))
+    }
+  }, [path])
+
+
+  //render
+  const classes = classNames(
+    'c-sidebar-nav-dropdown',
+    isOpen && 'c-show',
+    className
+  )
+      
+  const iconClasses = classNames(
+    'c-sidebar-nav-icon',
+    fontIcon
+  )
+
+  return (
+    <li 
+      className={classes} 
+      {...attributes} 
+      ref={ref}
+    >
+      <a
+        className="c-sidebar-nav-dropdown-toggle" 
+        tabIndex="0"
+        onClick={toggle}
+        aria-label="menu dropdown"
+      >
+        { icon && (isValidElement(icon) ? icon : <CIcon {...iconProps(icon)}/>) }
+        { fontIcon && <i className={iconClasses}/> }
+        { name }
+      </a>
+      <ul className="c-sidebar-nav-dropdown-items">
+        <DropdownContext.Provider value={{ isOpen }}>
+          {children}
+        </DropdownContext.Provider>
+      </ul>
+    </li>
+  )
+}
+
+CSidebarNavDropdown.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  children: PropTypes.node,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  icon: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  fontIcon: PropTypes.string,
+  show: PropTypes.bool,
+  route: PropTypes.string
+}
+
+export default CSidebarNavDropdown
diff --git a/src/template/CSidebarNavItem.js b/src/template/CSidebarNavItem.js
new file mode 100644
index 00000000..1703a5ec
--- /dev/null
+++ b/src/template/CSidebarNavItem.js
@@ -0,0 +1,73 @@
+import React, { isValidElement, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CLink, CBadge } from '../index'
+import CIcon from '@coreui/icons-react'
+import { iconProps } from './CSidebarNavDropdown'
+
+import { DropdownContext } from './CSidebarNavDropdown'
+
+//component - CoreUI / CSidebarNavItem
+const CSidebarNavItem = props => {
+
+  const {
+    children,
+    className,
+    //
+    innerRef,
+    name,
+    icon,
+    fontIcon,
+    badge,
+    addLinkClass,
+    label,
+    color,
+    ...rest
+  } = props
+
+  const { isOpen } = useContext(DropdownContext)
+  const classes = classNames(
+    'c-sidebar-nav-item',
+    className
+  )
+
+  const linkClasses = classNames(
+    label ? 'c-sidebar-nav-label' : 'c-sidebar-nav-link',
+    color && `c-sidebar-nav-link-${color}`,
+    addLinkClass
+  )
+
+  const routerLinkProps = rest.to && { exact: true, activeClassName: 'c-active' }
+  return (
+    <li className={classes} ref={innerRef}>
+      { children || 
+        <CLink
+          className={linkClasses}
+          {...routerLinkProps}
+          {...rest}
+          tabIndex={ isOpen === false ? -1 : 0 }
+        >
+          { icon && (isValidElement(icon) ? icon : <CIcon {...iconProps(icon)}/>) }
+          { fontIcon && <i className={`c-sidebar-nav-icon ${fontIcon}`}/>}
+          {name}
+          { badge && <CBadge {...{...badge, text: null}}>{badge.text}</CBadge>}
+        </CLink>
+      }
+  </li>
+  )
+}
+
+CSidebarNavItem.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  fontIcon: PropTypes.string,
+  badge: PropTypes.object,
+  addLinkClass: PropTypes.string,
+  label: PropTypes.bool,
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  color: PropTypes.string
+}
+
+export default CSidebarNavItem
diff --git a/src/template/CSidebarNavTitle.js b/src/template/CSidebarNavTitle.js
new file mode 100644
index 00000000..b3947624
--- /dev/null
+++ b/src/template/CSidebarNavTitle.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CSidebarNavTitle
+
+const CSidebarNavTitle = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames(
+    'c-sidebar-nav-title',
+    className
+  )
+
+  return (
+    <li className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CSidebarNavTitle.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+
+export default CSidebarNavTitle
diff --git a/src/template/CSubheader.js b/src/template/CSubheader.js
new file mode 100644
index 00000000..80bab193
--- /dev/null
+++ b/src/template/CSubheader.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CSubheader
+const CSubheader = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames(
+    'c-subheader',
+    className
+  )
+
+  return (
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CSubheader.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CSubheader.defaultProps = {
+  tag: 'div'
+};
+
+export default CSubheader
diff --git a/src/template/scrollbar.css b/src/template/scrollbar.css
new file mode 100644
index 00000000..f5374cad
--- /dev/null
+++ b/src/template/scrollbar.css
@@ -0,0 +1,18 @@
+/* rtl fix */
+.ps__rtl .ps__rail-y {
+    left: 0px !important;
+    right: unset !important;
+}
+*[dir="rtl"] .ps__rail-y {
+    left: 0px !important;
+    right: unset !important;
+}
+
+.ps__rtl .ps__thumb-y {
+    left: 2px;
+    right: unset;
+}
+*[dir="rtl"] .ps__thumb-y {
+  left: 2px;
+  right: unset;
+}
diff --git a/src/template/tests/CFooter.test.js b/src/template/tests/CFooter.test.js
new file mode 100644
index 00000000..6b4de956
--- /dev/null
+++ b/src/template/tests/CFooter.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CFooter from '../CFooter'
+
+configure({ adapter: new Adapter() })
+
+describe('CFooter', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CFooter/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CFooter
+        className='class-name'
+        fixed
+      >
+        CFooter
+      </CFooter>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CHeader.test.js b/src/template/tests/CHeader.test.js
new file mode 100644
index 00000000..77ec3020
--- /dev/null
+++ b/src/template/tests/CHeader.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CHeader from '../CHeader'
+
+configure({ adapter: new Adapter() })
+
+describe('CHeader', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CHeader/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CHeader
+        className='class-name'
+        fixed
+        colorScheme='dark'
+        withSubheader
+      >
+        CHeader
+      </CHeader>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CHeaderBrand.test.js b/src/template/tests/CHeaderBrand.test.js
new file mode 100644
index 00000000..b43074b2
--- /dev/null
+++ b/src/template/tests/CHeaderBrand.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CHeaderBrand from '../CHeaderBrand'
+
+configure({ adapter: new Adapter() })
+
+describe('CHeaderBrand', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CHeaderBrand/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CHeaderBrand
+        className='class-name'
+      >
+        CHeaderBrand
+      </CHeaderBrand>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CHeaderNav.test.js b/src/template/tests/CHeaderNav.test.js
new file mode 100644
index 00000000..ecdb83bf
--- /dev/null
+++ b/src/template/tests/CHeaderNav.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CHeaderNav from '../CHeaderNav'
+
+configure({ adapter: new Adapter() })
+
+describe('CHeaderNav', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CHeaderNav/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CHeaderNav
+        className='class-name'
+      >
+        CHeaderNav
+      </CHeaderNav>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CHeaderNavItem.test.js b/src/template/tests/CHeaderNavItem.test.js
new file mode 100644
index 00000000..f5fb4e51
--- /dev/null
+++ b/src/template/tests/CHeaderNavItem.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CHeaderNavItem from '../CHeaderNavItem'
+
+configure({ adapter: new Adapter() })
+
+describe('CHeaderNavItem', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CHeaderNavItem/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CHeaderNavItem
+        className='class-name'
+      >
+        CHeaderNavItem
+      </CHeaderNavItem>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CHeaderNavLink.test.js b/src/template/tests/CHeaderNavLink.test.js
new file mode 100644
index 00000000..e0cca6fa
--- /dev/null
+++ b/src/template/tests/CHeaderNavLink.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CHeaderNavLink from '../CHeaderNavLink'
+
+configure({ adapter: new Adapter() })
+
+describe('CHeaderNavLink', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CHeaderNavLink/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CHeaderNavLink
+        className='class-name'
+      >
+        CHeaderNavLink
+      </CHeaderNavLink>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CScrollbar.test.js b/src/template/tests/CScrollbar.test.js
new file mode 100644
index 00000000..3976a3ae
--- /dev/null
+++ b/src/template/tests/CScrollbar.test.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CScrollbar from '../CScrollbar'
+
+configure({ adapter: new Adapter() })
+
+describe('CScrollbar', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CScrollbar/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly - switcher on', () => {
+    const componentCustomized = renderer.create(
+      <div>
+        <CScrollbar
+          className='class-name'
+          switcher={true}
+        >
+          CScrollbar
+        </CScrollbar>
+      </div>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  // todo
+  // it('renders customized wrapper correctly - switcher off', () => {
+  //   const componentCustomized = renderer.create(
+  //     <CScrollbar
+  //       className='class-name'
+  //       switcher={false}
+  //       settings={{}}
+  //     >
+  //       CScrollbar
+  //     </CScrollbar>
+  //   );
+  //   let tree = componentCustomized.toJSON();
+  //   expect(tree).toMatchSnapshot()
+  // })
+})
diff --git a/src/template/tests/CSidebar.test.js b/src/template/tests/CSidebar.test.js
new file mode 100644
index 00000000..b8e3ef9e
--- /dev/null
+++ b/src/template/tests/CSidebar.test.js
@@ -0,0 +1,74 @@
+import React, { Suspense } from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebar from '../CSidebar'
+
+import CSidebarMinimizer from '../CSidebarMinimizer'
+
+/*
+import CSidebarBrand from '../CSidebarBrand'
+import CSidebarNav from '../CSidebarNav'
+import CSidebarNavDivider from '../CSidebarNavDivider'
+import CSidebarNavTitle from '../CSidebarNavTitle'
+import CNavItem from '../CNavItem'
+import CSidebarMinimizer from '../CSidebarMinimizer'
+*/
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebar', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebar/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebar
+        fixed
+        unfoldable
+        overlaid
+        breakpoint='lg'
+        minimize
+        show='responsive'
+        size='lg'
+        hideOnMobileClick
+        aside
+        colorScheme='light'
+        dropdownMode='noAction'
+        
+      >
+        CSidebar
+      </CSidebar>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('minimize on sidebar-minimizer click', () => {
+    const showChange = jest.fn();
+    const minimizeChange = jest.fn();
+    const component = mount(
+      <CSidebar
+        fixed
+        unfoldable
+        overlaid
+        breakpoint='lg'
+        minimize
+        show='responsive'
+        size='lg'
+        hideOnMobileClick
+        aside
+        colorScheme='light'
+        dropdownMode='noAction'
+        onShowChange={showChange}
+        onMinimizeChange={minimizeChange}
+      >
+        <CSidebarMinimizer className="c-d-md-down-none click-on-me"/>
+      </CSidebar>
+    );
+    component.find('.click-on-me').at(0).simulate('click')
+    expect(minimizeChange).toHaveBeenCalledTimes(1);
+  })
+})
diff --git a/src/template/tests/CSidebarBrand.test.js b/src/template/tests/CSidebarBrand.test.js
new file mode 100644
index 00000000..08127978
--- /dev/null
+++ b/src/template/tests/CSidebarBrand.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarBrand from '../CSidebarBrand'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarBrand', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarBrand/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarBrand
+        className='class-name'
+      >
+        CSidebarBrand
+      </CSidebarBrand>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarClose.test.js b/src/template/tests/CSidebarClose.test.js
new file mode 100644
index 00000000..cc085f1a
--- /dev/null
+++ b/src/template/tests/CSidebarClose.test.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarClose from '../CSidebarClose'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarClose', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarClose/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarFooter.test.js b/src/template/tests/CSidebarFooter.test.js
new file mode 100644
index 00000000..32d1bb2e
--- /dev/null
+++ b/src/template/tests/CSidebarFooter.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarFooter from '../CSidebarFooter'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarFooter', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarFooter/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarFooter
+        className='class-name'
+      >
+        CSidebarFooter
+      </CSidebarFooter>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarForm.test.js b/src/template/tests/CSidebarForm.test.js
new file mode 100644
index 00000000..2af93919
--- /dev/null
+++ b/src/template/tests/CSidebarForm.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarForm from '../CSidebarForm'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarForm', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarForm/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarForm
+        className='class-name'
+      >
+        CSidebarForm
+      </CSidebarForm>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarHeader.test.js b/src/template/tests/CSidebarHeader.test.js
new file mode 100644
index 00000000..f630c67f
--- /dev/null
+++ b/src/template/tests/CSidebarHeader.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarHeader from '../CSidebarHeader'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarHeader', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarHeader/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarHeader
+        className='class-name'
+      >
+        CSidebarHeader
+      </CSidebarHeader>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarMinimizer.test.js b/src/template/tests/CSidebarMinimizer.test.js
new file mode 100644
index 00000000..08a3b8d3
--- /dev/null
+++ b/src/template/tests/CSidebarMinimizer.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarMinimizer from '../CSidebarMinimizer'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarMinimizer', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarMinimizer/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarMinimizer
+        className='class-name'
+      >
+        CSidebarMinimizer
+      </CSidebarMinimizer>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarNav.test.js b/src/template/tests/CSidebarNav.test.js
new file mode 100644
index 00000000..42812579
--- /dev/null
+++ b/src/template/tests/CSidebarNav.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarNav from '../CSidebarNav'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarNav', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarNav/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarNav
+        className='class-name'
+      >
+        CSidebarNav
+      </CSidebarNav>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarNavDivider.test.js b/src/template/tests/CSidebarNavDivider.test.js
new file mode 100644
index 00000000..d7e25beb
--- /dev/null
+++ b/src/template/tests/CSidebarNavDivider.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarNavDivider from '../CSidebarNavDivider'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarNavDivider', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarNavDivider/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarNavDivider
+        className='class-name'
+      >
+        CSidebarNavDivider
+      </CSidebarNavDivider>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarNavDropdown.test.js b/src/template/tests/CSidebarNavDropdown.test.js
new file mode 100644
index 00000000..ca57e03f
--- /dev/null
+++ b/src/template/tests/CSidebarNavDropdown.test.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarNavDropdown from '../CSidebarNavDropdown'
+import CSidebarNav from '../CSidebarNav'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarNavDropdown', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(
+      <CSidebarNav>
+        <CSidebarNavDropdown/>
+      </CSidebarNav>
+    );
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarNavDropdown
+        className='class-name'
+        icon='icon'
+        fontIcon='font-icon'
+        show
+        route='route'
+        name='name'
+      >
+        CSidebarNavDropdown
+      </CSidebarNavDropdown>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly two', () => {
+    const icon = {size: 100, customClasses: 'custom-classes'}
+    const componentCustomized = renderer.create(
+      <CSidebarNavDropdown
+        className='class-name'
+        icon={icon}
+        fontIcon='font-icon'
+        show
+        route='route'
+        name='name'
+      >
+        CSidebarNavDropdown
+      </CSidebarNavDropdown>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarNavItem.test.js b/src/template/tests/CSidebarNavItem.test.js
new file mode 100644
index 00000000..037dd3bd
--- /dev/null
+++ b/src/template/tests/CSidebarNavItem.test.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarNavItem from '../CSidebarNavItem'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarNavItem', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarNavItem/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarNavItem
+        className='class-name'
+        name='name'
+        icon='icon'
+        fontIcon='font-icon'
+        addLinkClass='link-class'
+        label
+      >
+        CSidebarNavItem
+      </CSidebarNavItem>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSidebarNavTitle.test.js b/src/template/tests/CSidebarNavTitle.test.js
new file mode 100644
index 00000000..0e618adc
--- /dev/null
+++ b/src/template/tests/CSidebarNavTitle.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSidebarNavTitle from '../CSidebarNavTitle'
+
+configure({ adapter: new Adapter() })
+
+describe('CSidebarNavTitle', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSidebarNavTitle/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSidebarNavTitle
+        className='class-name'
+      >
+        CSidebarNavTitle
+      </CSidebarNavTitle>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/CSubheader.test.js b/src/template/tests/CSubheader.test.js
new file mode 100644
index 00000000..fdc25aa2
--- /dev/null
+++ b/src/template/tests/CSubheader.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CSubheader from '../CSubheader'
+
+configure({ adapter: new Adapter() })
+
+describe('CSubheader', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CSubheader/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CSubheader
+        className='class-name'
+      >
+        CSubheader
+      </CSubheader>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/template/tests/__snapshots__/CFooter.test.js.snap b/src/template/tests/__snapshots__/CFooter.test.js.snap
new file mode 100644
index 00000000..84cd21b7
--- /dev/null
+++ b/src/template/tests/__snapshots__/CFooter.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CFooter renders basic wrapper correctly 1`] = `
+<footer
+  className="c-footer"
+/>
+`;
+
+exports[`CFooter renders customized wrapper correctly 1`] = `
+<footer
+  className="c-footer c-footer-fixed class-name"
+>
+  CFooter
+</footer>
+`;
diff --git a/src/template/tests/__snapshots__/CHeader.test.js.snap b/src/template/tests/__snapshots__/CHeader.test.js.snap
new file mode 100644
index 00000000..9037224b
--- /dev/null
+++ b/src/template/tests/__snapshots__/CHeader.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CHeader renders basic wrapper correctly 1`] = `
+<header
+  className="c-header c-header-light c-header-fixed"
+/>
+`;
+
+exports[`CHeader renders customized wrapper correctly 1`] = `
+<header
+  className="class-name c-header c-header-dark c-header-fixed c-header-with-subheader"
+>
+  CHeader
+</header>
+`;
diff --git a/src/template/tests/__snapshots__/CHeaderBrand.test.js.snap b/src/template/tests/__snapshots__/CHeaderBrand.test.js.snap
new file mode 100644
index 00000000..eb023e50
--- /dev/null
+++ b/src/template/tests/__snapshots__/CHeaderBrand.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CHeaderBrand renders basic wrapper correctly 1`] = `
+<div
+  className="c-header-brand"
+/>
+`;
+
+exports[`CHeaderBrand renders customized wrapper correctly 1`] = `
+<div
+  className="c-header-brand class-name"
+>
+  CHeaderBrand
+</div>
+`;
diff --git a/src/template/tests/__snapshots__/CHeaderNav.test.js.snap b/src/template/tests/__snapshots__/CHeaderNav.test.js.snap
new file mode 100644
index 00000000..0bb7aa2a
--- /dev/null
+++ b/src/template/tests/__snapshots__/CHeaderNav.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CHeaderNav renders basic wrapper correctly 1`] = `
+<ul
+  className="c-header-nav"
+/>
+`;
+
+exports[`CHeaderNav renders customized wrapper correctly 1`] = `
+<ul
+  className="class-name c-header-nav"
+>
+  CHeaderNav
+</ul>
+`;
diff --git a/src/template/tests/__snapshots__/CHeaderNavItem.test.js.snap b/src/template/tests/__snapshots__/CHeaderNavItem.test.js.snap
new file mode 100644
index 00000000..822f0b80
--- /dev/null
+++ b/src/template/tests/__snapshots__/CHeaderNavItem.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CHeaderNavItem renders basic wrapper correctly 1`] = `
+<li
+  className="c-header-nav-item"
+/>
+`;
+
+exports[`CHeaderNavItem renders customized wrapper correctly 1`] = `
+<li
+  className="class-name c-header-nav-item"
+>
+  CHeaderNavItem
+</li>
+`;
diff --git a/src/template/tests/__snapshots__/CHeaderNavLink.test.js.snap b/src/template/tests/__snapshots__/CHeaderNavLink.test.js.snap
new file mode 100644
index 00000000..53afe5c0
--- /dev/null
+++ b/src/template/tests/__snapshots__/CHeaderNavLink.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CHeaderNavLink renders basic wrapper correctly 1`] = `
+<a
+  className="c-header-nav-link"
+  href="#"
+  onClick={[Function]}
+  rel={null}
+/>
+`;
+
+exports[`CHeaderNavLink renders customized wrapper correctly 1`] = `
+<a
+  className="class-name c-header-nav-link"
+  href="#"
+  onClick={[Function]}
+  rel={null}
+>
+  CHeaderNavLink
+</a>
+`;
diff --git a/src/template/tests/__snapshots__/CScrollbar.test.js.snap b/src/template/tests/__snapshots__/CScrollbar.test.js.snap
new file mode 100644
index 00000000..c134c3c8
--- /dev/null
+++ b/src/template/tests/__snapshots__/CScrollbar.test.js.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CScrollbar renders basic wrapper correctly 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+/>
+`;
+
+exports[`CScrollbar renders customized wrapper correctly - switcher on 1`] = `
+<div>
+  <div
+    className="class-name"
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    CScrollbar
+  </div>
+</div>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebar.test.js.snap b/src/template/tests/__snapshots__/CSidebar.test.js.snap
new file mode 100644
index 00000000..813b0403
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebar.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebar renders basic wrapper correctly 1`] = `
+<div
+  className="c-sidebar c-sidebar-dark c-sidebar-lg-show c-sidebar-fixed"
+  onClick={[Function]}
+/>
+`;
+
+exports[`CSidebar renders customized wrapper correctly 1`] = `
+<div
+  className="c-sidebar c-sidebar-light c-sidebar-lg-show c-sidebar-right c-sidebar-unfoldable c-sidebar-overlaid c-sidebar-lg"
+  onClick={[Function]}
+>
+  CSidebar
+</div>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarBrand.test.js.snap b/src/template/tests/__snapshots__/CSidebarBrand.test.js.snap
new file mode 100644
index 00000000..ef561bcf
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarBrand.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarBrand renders basic wrapper correctly 1`] = `
+<div
+  className="c-sidebar-brand"
+/>
+`;
+
+exports[`CSidebarBrand renders customized wrapper correctly 1`] = `
+<div
+  className="c-sidebar-brand class-name"
+>
+  CSidebarBrand
+</div>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarClose.test.js.snap b/src/template/tests/__snapshots__/CSidebarClose.test.js.snap
new file mode 100644
index 00000000..010eb905
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarClose.test.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarClose renders basic wrapper correctly 1`] = `
+<button
+  aria-label="Close"
+  className="c-sidebar-close"
+>
+  <svg
+    className="c-icon"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <title>
+      x
+    </title>
+    <path
+      d="M20.030 5.030l-1.061-1.061-6.97 6.97-6.97-6.97-1.061 1.061 6.97 6.97-6.97 6.97 1.061 1.061 6.97-6.97 6.97 6.97 1.061-1.061-6.97-6.97 6.97-6.97z"
+    />
+  </svg>
+</button>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarFooter.test.js.snap b/src/template/tests/__snapshots__/CSidebarFooter.test.js.snap
new file mode 100644
index 00000000..7ae4f337
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarFooter.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarFooter renders basic wrapper correctly 1`] = `
+<div
+  className="c-sidebar-footer"
+/>
+`;
+
+exports[`CSidebarFooter renders customized wrapper correctly 1`] = `
+<div
+  className="c-sidebar-footer class-name"
+>
+  CSidebarFooter
+</div>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarForm.test.js.snap b/src/template/tests/__snapshots__/CSidebarForm.test.js.snap
new file mode 100644
index 00000000..ffc5cc08
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarForm.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarForm renders basic wrapper correctly 1`] = `
+<div
+  className="c-sidebar-form"
+/>
+`;
+
+exports[`CSidebarForm renders customized wrapper correctly 1`] = `
+<div
+  className="c-sidebar-form class-name"
+>
+  CSidebarForm
+</div>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarHeader.test.js.snap b/src/template/tests/__snapshots__/CSidebarHeader.test.js.snap
new file mode 100644
index 00000000..1a560206
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarHeader.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarHeader renders basic wrapper correctly 1`] = `
+<div
+  className="c-sidebar-header"
+/>
+`;
+
+exports[`CSidebarHeader renders customized wrapper correctly 1`] = `
+<div
+  className="c-sidebar-header class-name"
+>
+  CSidebarHeader
+</div>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarMinimizer.test.js.snap b/src/template/tests/__snapshots__/CSidebarMinimizer.test.js.snap
new file mode 100644
index 00000000..cc80007b
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarMinimizer.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarMinimizer renders basic wrapper correctly 1`] = `
+<button
+  className="c-sidebar-minimizer"
+  type="button"
+/>
+`;
+
+exports[`CSidebarMinimizer renders customized wrapper correctly 1`] = `
+<button
+  className="c-sidebar-minimizer class-name"
+  type="button"
+>
+  CSidebarMinimizer
+</button>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarNav.test.js.snap b/src/template/tests/__snapshots__/CSidebarNav.test.js.snap
new file mode 100644
index 00000000..c48b216c
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarNav.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarNav renders basic wrapper correctly 1`] = `
+<ul
+  className="c-sidebar-nav h-100"
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+/>
+`;
+
+exports[`CSidebarNav renders customized wrapper correctly 1`] = `
+<ul
+  className="c-sidebar-nav h-100 class-name"
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  CSidebarNav
+</ul>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarNavDivider.test.js.snap b/src/template/tests/__snapshots__/CSidebarNavDivider.test.js.snap
new file mode 100644
index 00000000..01079862
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarNavDivider.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarNavDivider renders basic wrapper correctly 1`] = `
+<li
+  className="c-sidebar-nav-divider"
+/>
+`;
+
+exports[`CSidebarNavDivider renders customized wrapper correctly 1`] = `
+<li
+  className="c-sidebar-nav-divider class-name"
+>
+  CSidebarNavDivider
+</li>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarNavDropdown.test.js.snap b/src/template/tests/__snapshots__/CSidebarNavDropdown.test.js.snap
new file mode 100644
index 00000000..81a75ee4
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarNavDropdown.test.js.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarNavDropdown renders basic wrapper correctly 1`] = `
+<ul
+  className="c-sidebar-nav h-100"
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  <li
+    className="c-sidebar-nav-dropdown"
+  >
+    <a
+      aria-label="menu dropdown"
+      className="c-sidebar-nav-dropdown-toggle"
+      onClick={[Function]}
+      tabIndex="0"
+    />
+    <ul
+      className="c-sidebar-nav-dropdown-items"
+    />
+  </li>
+</ul>
+`;
+
+exports[`CSidebarNavDropdown renders customized wrapper correctly 1`] = `
+<li
+  className="c-sidebar-nav-dropdown class-name"
+>
+  <a
+    aria-label="menu dropdown"
+    className="c-sidebar-nav-dropdown-toggle"
+    onClick={[Function]}
+    tabIndex="0"
+  >
+    <svg
+      className="c-sidebar-nav-icon"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "undefined",
+        }
+      }
+      role="img"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+    <i
+      className="c-sidebar-nav-icon font-icon"
+    />
+    name
+  </a>
+  <ul
+    className="c-sidebar-nav-dropdown-items"
+  >
+    CSidebarNavDropdown
+  </ul>
+</li>
+`;
+
+exports[`CSidebarNavDropdown renders customized wrapper correctly two 1`] = `
+<li
+  className="c-sidebar-nav-dropdown c-show class-name"
+>
+  <a
+    aria-label="menu dropdown"
+    className="c-sidebar-nav-dropdown-toggle"
+    onClick={[Function]}
+    tabIndex="0"
+  >
+    <svg
+      className="custom-classes"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "undefined",
+        }
+      }
+      role="img"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+    <i
+      className="c-sidebar-nav-icon font-icon"
+    />
+    name
+  </a>
+  <ul
+    className="c-sidebar-nav-dropdown-items"
+  >
+    CSidebarNavDropdown
+  </ul>
+</li>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarNavItem.test.js.snap b/src/template/tests/__snapshots__/CSidebarNavItem.test.js.snap
new file mode 100644
index 00000000..6099e0c4
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarNavItem.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarNavItem renders basic wrapper correctly 1`] = `
+<li
+  className="c-sidebar-nav-item"
+>
+  <a
+    className="c-sidebar-nav-link"
+    href="#"
+    onClick={[Function]}
+    rel={null}
+    tabIndex={0}
+  />
+</li>
+`;
+
+exports[`CSidebarNavItem renders customized wrapper correctly 1`] = `
+<li
+  className="c-sidebar-nav-item class-name"
+>
+  CSidebarNavItem
+</li>
+`;
diff --git a/src/template/tests/__snapshots__/CSidebarNavTitle.test.js.snap b/src/template/tests/__snapshots__/CSidebarNavTitle.test.js.snap
new file mode 100644
index 00000000..da6eaa25
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSidebarNavTitle.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSidebarNavTitle renders basic wrapper correctly 1`] = `
+<li
+  className="c-sidebar-nav-title"
+/>
+`;
+
+exports[`CSidebarNavTitle renders customized wrapper correctly 1`] = `
+<li
+  className="c-sidebar-nav-title class-name"
+>
+  CSidebarNavTitle
+</li>
+`;
diff --git a/src/template/tests/__snapshots__/CSubheader.test.js.snap b/src/template/tests/__snapshots__/CSubheader.test.js.snap
new file mode 100644
index 00000000..1b0edbf3
--- /dev/null
+++ b/src/template/tests/__snapshots__/CSubheader.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSubheader renders basic wrapper correctly 1`] = `
+<div
+  className="c-subheader"
+/>
+`;
+
+exports[`CSubheader renders customized wrapper correctly 1`] = `
+<div
+  className="c-subheader class-name"
+>
+  CSubheader
+</div>
+`;
diff --git a/src/toast/CToast.css b/src/toast/CToast.css
new file mode 100644
index 00000000..8482f40c
--- /dev/null
+++ b/src/toast/CToast.css
@@ -0,0 +1,6 @@
+.toast-fade {
+  transition: opacity .5s;
+}
+.toast-fade-slow {
+  transition: opacity 2s;
+}
diff --git a/src/toast/CToast.js b/src/toast/CToast.js
new file mode 100644
index 00000000..d09107c7
--- /dev/null
+++ b/src/toast/CToast.js
@@ -0,0 +1,138 @@
+import React, { useState, useRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CFade from '../fade/CFade'
+import { omitByKeys } from '@coreui/utils/src'
+import { CFadeProps } from '../utils/helper.js'
+import './CToast.css'
+
+export const Context = React.createContext({})
+
+//component - CoreUI / CToast
+const CToast = props => {
+
+  const {
+    className,
+    children,
+    //
+    innerRef,
+    show,
+    autohide,
+    fade,
+    color,
+    onStateChange,
+    ...attributes
+  } = props
+
+  const [state, setState] = useState(show)
+  const timeout = useRef()
+
+  useEffect(() => {
+    setState(show)
+  }, [show])
+
+  //triggered on mount and destroy
+  useEffect(() => () => clearTimeout(timeout.current), [])
+
+  useEffect(() => {
+    if (state === true && autohide) {
+      setAutohide()
+    }
+    onStateChange && onStateChange(state)
+  }, [state])
+
+  const setAutohide = () => {
+    clearTimeout(timeout.current)
+    timeout.current = setTimeout(() => {
+      startAutohide()
+    }, autohide)
+  }
+
+  const onMouseOver = () => {
+    if (state !== 'closing') {
+      state !== true && setState(true)
+      clearTimeout(timeout.current)
+    }
+  }
+
+  const onMouseOut = () => {
+    if (autohide && state !== 'closing') {
+      setAutohide()
+    }
+  }
+
+  const startAutohide = () => {
+    if (!fade) {
+      return setState(false)
+    }
+    setState('hiding')
+    clearTimeout(timeout.current)
+    timeout.current = setTimeout(() => {
+      setState(false)
+    }, 2000)
+  }
+
+  const close = () => {
+    if (!fade) {
+      return setState(false)
+    }
+    setState('closing')
+    clearTimeout(timeout.current)
+    timeout.current = setTimeout(() => {
+      setState(false)
+    }, 500)
+  }
+
+  // render
+  const classes = classNames(
+    {
+      toast: true,
+      [`toast-${color}`]: !!color
+    },
+    className
+  )
+
+  const fadeClasses = classNames(
+    fade && (state === 'hiding' ? 'toast-fade-slow' : 'toast-fade')
+  )
+
+  const attrs = omitByKeys(attributes, CFadeProps)
+  return (
+    <Context.Provider value={{ close }}>
+      {
+        state && <CFade
+          className={classes}   
+          role="alert"
+          aria-live="assertive"
+          aria-atomic="true"
+          in={state === true}
+          onMouseOver={onMouseOver}
+          onMouseOut={onMouseOut}
+          baseClass={fadeClasses}
+          innerRef={innerRef}
+          {...attrs}
+        >
+          {children}
+        </CFade>
+      }  
+    </Context.Provider>
+  )
+}
+
+CToast.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  children: PropTypes.node,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  show: PropTypes.bool,
+  autohide: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+  fade: PropTypes.bool,
+  color: PropTypes.string,
+  onStateChange: PropTypes.func
+};
+
+CToast.defaultProps = {
+  fade: true
+};
+
+export default CToast
diff --git a/src/toast/CToastBody.js b/src/toast/CToastBody.js
new file mode 100644
index 00000000..159eee5f
--- /dev/null
+++ b/src/toast/CToastBody.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CToastBody
+
+const CToastBody = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+  const classes = classNames(
+    'toast-body', className
+  )
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CToastBody.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+
+export default CToastBody
diff --git a/src/toast/CToastHeader.js b/src/toast/CToastHeader.js
new file mode 100644
index 00000000..db51d94d
--- /dev/null
+++ b/src/toast/CToastHeader.js
@@ -0,0 +1,48 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CButtonClose from '../button/CButtonClose'
+
+import { Context } from './CToast'
+
+//component - CoreUI / CToastHeader
+const CToastHeader = props => {
+
+  const {
+    className,
+    children,
+    //
+    innerRef,
+    closeButton,
+    ...attributes
+  } = props
+
+  const { close } = useContext(Context)
+  
+  //render
+  const classes = classNames(
+    'toast-header', className
+  )
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef}>
+      { children }
+      { closeButton && 
+        <CButtonClose className="mfs-auto" onClick={close}/>}
+    </div>
+  )
+}
+
+CToastHeader.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  children: PropTypes.node,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  closeButton: PropTypes.bool
+};
+
+CToastHeader.defaultProps = {
+  closeButton: true
+};
+
+export default CToastHeader
diff --git a/src/toast/CToaster.js b/src/toast/CToaster.js
new file mode 100644
index 00000000..a0c89bdb
--- /dev/null
+++ b/src/toast/CToaster.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CToaster
+
+const CToaster = props => {
+
+  const {
+    className,
+    //
+    innerRef,
+    position,
+    ...attributes
+  } = props
+
+  // inherit closeButton, autohide, fade??
+  // render
+  const classes = classNames(
+    'toaster',
+    position && position !== 'static' && 'toaster-' + position,
+    className
+  )
+
+  return (
+    <div className={classes} {...attributes} ref={innerRef}/>
+  )
+}
+
+CToaster.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  position: PropTypes.oneOf([
+    '', 'static', 'top-right', 'top-left', 'top-center', 'top-full',
+    'bottom-right', 'bottom-left', 'bottom-center', 'bottom-full'
+  ])
+};
+
+CToaster.defaultProps = {
+  position: 'top-right'
+};
+
+export default CToaster
diff --git a/src/toast/tests/CToast.test.js b/src/toast/tests/CToast.test.js
new file mode 100644
index 00000000..dced38ef
--- /dev/null
+++ b/src/toast/tests/CToast.test.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import { create } from 'react-test-renderer';
+import { act } from 'react-dom/test-utils';
+
+
+import CToast from '../CToast'
+import CToaster from '../CToaster'
+
+configure({ adapter: new Adapter() })
+
+describe('CToast', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = create(<CToast/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = create(
+      <CToast
+        className='class-name'
+        show
+        autohide
+        fade
+        color={'danger'}
+      >
+        CToast
+      </CToast>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('autohide', () => {
+    jest.useFakeTimers()
+    const component = mount(
+      <CToaster
+        position='bottom-full'
+      >
+        <CToast
+          className='class-name'
+          show
+          autohide={1000}
+          fade
+        >
+          CToast
+        </CToast>
+      </CToaster>
+    );
+    act(() => {
+      jest.runAllTimers()
+    })
+    console.log(component.html());
+    expect(component.find(<CToast/>)).toHaveLength(0);
+  })
+  it('autohide', () => {
+    jest.useFakeTimers()
+    const component = mount(
+      <CToaster
+        position='bottom-full'
+      >
+        <CToast
+          className='class-name'
+          show
+          autohide={1000}
+          fade={false}
+        >
+          CToast
+        </CToast>
+      </CToaster>
+    );
+    act(() => {
+      jest.runAllTimers()
+    })
+    console.log(component.html());
+    expect(component.find(<CToast/>)).toHaveLength(0);
+  })
+})
diff --git a/src/toast/tests/CToastBody.test.js b/src/toast/tests/CToastBody.test.js
new file mode 100644
index 00000000..11e82f6c
--- /dev/null
+++ b/src/toast/tests/CToastBody.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CToastBody from '../CToastBody'
+
+configure({ adapter: new Adapter() })
+
+describe('CToastBody', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CToastBody/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CToastBody
+        className='class-name'
+      >
+        CToastBody
+      </CToastBody>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/toast/tests/CToastHeader.test.js b/src/toast/tests/CToastHeader.test.js
new file mode 100644
index 00000000..f84f540d
--- /dev/null
+++ b/src/toast/tests/CToastHeader.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CToastHeader from '../CToastHeader'
+
+configure({ adapter: new Adapter() })
+
+describe('CToastHeader', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CToastHeader/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CToastHeader
+        className='class-name'
+        closeButton
+      >
+        CToastHeader
+      </CToastHeader>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/toast/tests/CToaster.test.js b/src/toast/tests/CToaster.test.js
new file mode 100644
index 00000000..779d3e92
--- /dev/null
+++ b/src/toast/tests/CToaster.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CToaster from '../CToaster'
+
+configure({ adapter: new Adapter() })
+
+describe('CToaster', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CToaster/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CToaster
+        className='class-name'
+        position='bottom-full'
+      >
+        CToaster
+      </CToaster>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/toast/tests/__snapshots__/CToast.test.js.snap b/src/toast/tests/__snapshots__/CToast.test.js.snap
new file mode 100644
index 00000000..ed87a7e0
--- /dev/null
+++ b/src/toast/tests/__snapshots__/CToast.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToast renders basic wrapper correctly 1`] = `null`;
+
+exports[`CToast renders customized wrapper correctly 1`] = `
+<div
+  aria-atomic="true"
+  aria-live="assertive"
+  className="toast toast-danger class-name toast-fade"
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  role="alert"
+>
+  CToast
+</div>
+`;
diff --git a/src/toast/tests/__snapshots__/CToastBody.test.js.snap b/src/toast/tests/__snapshots__/CToastBody.test.js.snap
new file mode 100644
index 00000000..0e04329b
--- /dev/null
+++ b/src/toast/tests/__snapshots__/CToastBody.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToastBody renders basic wrapper correctly 1`] = `
+<div
+  className="toast-body"
+/>
+`;
+
+exports[`CToastBody renders customized wrapper correctly 1`] = `
+<div
+  className="toast-body class-name"
+>
+  CToastBody
+</div>
+`;
diff --git a/src/toast/tests/__snapshots__/CToastHeader.test.js.snap b/src/toast/tests/__snapshots__/CToastHeader.test.js.snap
new file mode 100644
index 00000000..a555908d
--- /dev/null
+++ b/src/toast/tests/__snapshots__/CToastHeader.test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToastHeader renders basic wrapper correctly 1`] = `
+<div
+  className="toast-header"
+>
+  <button
+    aria-label="Close"
+    className="close mfs-auto"
+  >
+    ×
+  </button>
+</div>
+`;
+
+exports[`CToastHeader renders customized wrapper correctly 1`] = `
+<div
+  className="toast-header class-name"
+>
+  CToastHeader
+  <button
+    aria-label="Close"
+    className="close mfs-auto"
+  >
+    ×
+  </button>
+</div>
+`;
diff --git a/src/toast/tests/__snapshots__/CToaster.test.js.snap b/src/toast/tests/__snapshots__/CToaster.test.js.snap
new file mode 100644
index 00000000..978e9613
--- /dev/null
+++ b/src/toast/tests/__snapshots__/CToaster.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToaster renders basic wrapper correctly 1`] = `
+<div
+  className="toaster toaster-top-right"
+/>
+`;
+
+exports[`CToaster renders customized wrapper correctly 1`] = `
+<div
+  className="toaster toaster-bottom-full class-name"
+>
+  CToaster
+</div>
+`;
diff --git a/src/toggler/CToggler.js b/src/toggler/CToggler.js
new file mode 100644
index 00000000..a2087457
--- /dev/null
+++ b/src/toggler/CToggler.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from '../utils/helper.js'
+
+//component - CoreUI / CToggler
+
+const CToggler = props => {
+
+  const {
+    tag: Tag,
+    children,
+    className,
+    //
+    innerRef,
+    inHeader,
+    inNavbar,
+    ...attributes
+  } = props;
+
+  const typeAttr = Tag === 'button' ? { type: 'button' } : null
+  const type = inNavbar ? 'navbar' : inHeader ? 'c-header' : null 
+  const togglerClass = type ? `${type}-toggler` : ''
+  const iconClass = type ? `${togglerClass}-icon` : ''
+
+  //render
+  const classes = classNames(
+    togglerClass, className,
+  )
+
+  return (
+    <Tag className={classes} {...typeAttr} {...attributes} ref={innerRef}>
+      {children || <span className={iconClass}/>}
+    </Tag>
+  )
+
+}
+
+CToggler.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  inHeader: PropTypes.bool,
+  inNavbar: PropTypes.bool,
+};
+
+CToggler.defaultProps = {
+  tag: 'button'
+};
+
+export default CToggler
diff --git a/src/toggler/tests/CToggler.test.js b/src/toggler/tests/CToggler.test.js
new file mode 100644
index 00000000..3d11c322
--- /dev/null
+++ b/src/toggler/tests/CToggler.test.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CToggler from '../CToggler'
+
+configure({ adapter: new Adapter() })
+
+describe('CToggler', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CToggler/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CToggler
+        className='class-name'
+        inHeader
+        inNavbar
+      >
+        CToggler
+      </CToggler>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/toggler/tests/__snapshots__/CToggler.test.js.snap b/src/toggler/tests/__snapshots__/CToggler.test.js.snap
new file mode 100644
index 00000000..24dcab19
--- /dev/null
+++ b/src/toggler/tests/__snapshots__/CToggler.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToggler renders basic wrapper correctly 1`] = `
+<button
+  className=""
+  type="button"
+>
+  <span
+    className=""
+  />
+</button>
+`;
+
+exports[`CToggler renders customized wrapper correctly 1`] = `
+<button
+  className="navbar-toggler class-name"
+  type="button"
+>
+  CToggler
+</button>
+`;
diff --git a/src/tooltip/CPopover.css b/src/tooltip/CPopover.css
new file mode 100644
index 00000000..99ffc6c6
--- /dev/null
+++ b/src/tooltip/CPopover.css
@@ -0,0 +1,11 @@
+.tippy-box[data-theme~='cpopover'] {
+   background:white;
+   color: inherit;
+   border: 1px solid rgba(0, 0, 21, 0.2);
+ }
+ .tippy-box[data-theme~='cpopover'] > .tippy-content {
+   padding: 0;
+ }
+ .tippy-box[data-theme~='cpopover'] > .tippy-arrow::before {
+   color: white;
+ }
diff --git a/src/tooltip/CPopover.js b/src/tooltip/CPopover.js
new file mode 100644
index 00000000..95d0c619
--- /dev/null
+++ b/src/tooltip/CPopover.js
@@ -0,0 +1,50 @@
+import React, {useCallback} from 'react'
+import PropTypes from 'prop-types'
+import CTooltip from './CTooltip.js'
+import { renderToString } from 'react-dom/server'
+
+//component - CoreUI / CPopover
+const template = `<h3 class="popover-header">H</h3><div class="popover-body">C</div>`
+const generateContent = (content, header) => {
+  return template.replace('H', renderToString(header))
+                 .replace('C', renderToString(content))
+}
+
+const CPopover = props => {
+
+  let {
+    header,
+    children,
+    content,
+    ...config
+  } = props
+
+  const computedContent = useCallback(
+    generateContent(content, header),
+    [content, header]
+  )
+
+  const advancedOptions = {
+    ...(config ? config.advancedOptions || {}: {}),
+    theme: 'cpopover'
+  }
+
+  const computedConfig = {
+    ...config, 
+    advancedOptions
+  }
+
+  return (
+    <CTooltip content={computedContent} {...computedConfig}>
+      {children}
+    </CTooltip>
+  )
+}
+
+CPopover.propTypes = {
+  children: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  header: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+}
+
+export default CPopover
diff --git a/src/tooltip/CTooltip.js b/src/tooltip/CTooltip.js
new file mode 100644
index 00000000..e261b0ea
--- /dev/null
+++ b/src/tooltip/CTooltip.js
@@ -0,0 +1,83 @@
+import React, {useState, useEffect, useRef, useCallback} from 'react'
+import PropTypes from 'prop-types'
+import tippy from 'tippy.js'
+import 'tippy.js/dist/tippy.css'
+import { renderToString } from 'react-dom/server'
+
+//component - CoreUI / CTooltip
+const CTooltip = props=>{
+
+  let {
+    //
+    children,
+    content,
+    interactive,
+    placement,
+    trigger,
+    advancedOptions
+  } = props
+
+  const computedContent = useCallback(
+    () => typeof content === 'string' ? content : renderToString(content),
+    [content]
+  )
+
+  const config = {
+    allowHTML: true,
+    content: computedContent,
+    interactive,
+    placement,
+    trigger,
+    ...advancedOptions
+  }
+
+  const key = useState(Math.random().toString(36).substr(2))[0]
+  const instance = useRef()
+  
+  useEffect(() => {
+    if (instance.current) {
+      instance.current.setProps(config)
+    }
+  })
+
+  useEffect(() => {
+    const node = document.querySelector(`[data-tooltip="${key}"]`)
+    instance.current = tippy(node, config)
+    return () => instance.current.destroy()
+  }, [key])
+
+
+  return (
+    <React.Fragment>
+      {
+        React.cloneElement(children, {
+          'data-tooltip': key
+        })
+      }
+    </React.Fragment>
+  )
+}
+
+CTooltip.propTypes = {
+  children: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  interactive: PropTypes.bool,
+  placement: PropTypes.oneOf([
+    '', 'top-end', 'top', 'top-start',
+    'bottom-end', 'bottom', 'bottom-start',
+    'right-start', 'right', 'right-end',
+    'left-start', 'left', 'left-end'
+  ]),
+  trigger: PropTypes.string,
+  advancedOptions: PropTypes.object
+}
+
+CTooltip.defaultProps = {
+  content: '',
+  interactive: false,
+  placement: 'top',
+  trigger: 'mouseenter focus',
+  advancedOptions: {}
+}
+
+export default CTooltip
diff --git a/src/tooltip/tests/CPopover.test.js b/src/tooltip/tests/CPopover.test.js
new file mode 100644
index 00000000..a796be64
--- /dev/null
+++ b/src/tooltip/tests/CPopover.test.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import CPopover from '../CPopover'
+import CTooltip from '../CTooltip'
+
+configure({ adapter: new Adapter() })
+
+const getWrapper = () => mount(
+  <CPopover
+    header="header"
+    content="content"
+  >
+    <a href="#">Popover example</a>
+  </CPopover>,
+  { attachTo: document.getElementById('container') }
+)
+
+beforeAll(() => {
+  // Avoid `attachTo: document.body` Warning
+  const div = document.createElement('div')
+  div.setAttribute('id', 'container')
+  document.body.appendChild(div)
+})
+
+afterAll(() => {
+  const div = document.getElementById('container')
+  if (div) {
+    document.body.removeChild(div)
+  }
+})
+
+describe('CPopover', () => {
+  it('Popover is built on tooltip', () => {
+    const wrapper = getWrapper()
+    expect(wrapper.find(CTooltip)).toBeTruthy()
+  })
+})
diff --git a/src/tooltip/tests/CTooltip.test.js b/src/tooltip/tests/CTooltip.test.js
new file mode 100644
index 00000000..cd3b46f3
--- /dev/null
+++ b/src/tooltip/tests/CTooltip.test.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer'
+
+import CTooltip from '../CTooltip'
+
+configure({ adapter: new Adapter() })
+
+beforeAll(() => {
+  // Avoid `attachTo: document.body` Warning
+  const div = document.createElement('div')
+  div.setAttribute('id', 'container')
+  document.body.appendChild(div)
+})
+
+afterAll(() => {
+  const div = document.getElementById('container')
+  if (div) {
+    document.body.removeChild(div)
+  }
+})
+
+describe('CTooltip', () => {
+  it('renders basic wrapper correctly', () => {
+    const wrapper = renderer.create(
+      <CTooltip content="tooltip">
+        <div>CTooltip</div>
+      </CTooltip>,
+      { attachTo: document.getElementById('container') }
+    )
+    expect(wrapper).toBeTruthy()
+  })
+  it('renders customized wrapper correctly', () => {
+    const wrapper = mount(<CTooltip
+        className="class-name"
+        content="content"
+        interactive
+        placement="left-end"
+        trigger="trigger"
+      >
+        <div>CTooltip</div>
+      </CTooltip>,
+      { attachTo: document.getElementById('container') }
+    )
+    expect(wrapper).toBeTruthy()
+  })
+})
diff --git a/src/utils/CBrand.js b/src/utils/CBrand.js
new file mode 100644
index 00000000..ed3b596f
--- /dev/null
+++ b/src/utils/CBrand.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType } from './helper.js'
+import CLink from '../link/CLink'
+
+//component - CoreUI / CBrand
+const CBrand = props => {
+
+  const {
+    tag,
+    className,
+    //
+    innerRef,
+    ...attributes
+  } = props
+
+  //render
+
+  const classes = classNames(className)
+
+  const Tag = attributes.to || attributes.href ? CLink : tag
+  const ref = { [`${typeof Tag === 'string' ? 'ref': 'innerRef'}`]: innerRef}
+  return (
+    <Tag className={classes} {...attributes} {...ref} />
+  )
+}
+
+CBrand.propTypes = {
+  tag: tagPropType,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+};
+
+CBrand.defaultProps = {
+  tag: 'div'
+};
+
+export default CBrand
diff --git a/src/utils/helper.js b/src/utils/helper.js
new file mode 100644
index 00000000..2e9888bf
--- /dev/null
+++ b/src/utils/helper.js
@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types'
+
+// Duplicated Transition.propType keys to ensure that Reactstrap builds
+// for distribution properly exclude these keys for nested child HTML attributes
+// since `react-transition-group` removes propTypes in production builds.
+export const TransitionPropTypeKeys = [
+  'in',
+  'mountOnEnter',
+  'unmountOnExit',
+  'appear',
+  'enter',
+  'exit',
+  'timeout',
+  'onEnter',
+  'onEntering',
+  'onEntered',
+  'onExit',
+  'onExiting',
+  'onExited'
+];
+
+export const CFadeProps = [
+  ...TransitionPropTypeKeys,
+  'baseClass',
+  'baseClassActive',
+  'tag'
+]
+
+export const canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
+export const targetPropType = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.func,
+  DOMElement,
+  PropTypes.shape({ current: PropTypes.any }),
+]);
+
+export const tagPropType = PropTypes.oneOfType([
+  PropTypes.func,
+  PropTypes.string,
+  PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
+  PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+    PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
+  ]))
+]);
+
+
+export function DOMElement(props, propName, componentName) {
+  if (!(props[propName] instanceof Element)) {
+    return new Error(
+      'Invalid prop `' +
+        propName +
+        '` supplied to `' +
+        componentName +
+        '`. Expected prop to be an instance of Element. Validation failed.'
+    );
+  }
+}
+
+export function deprecated(propType, explanation) {
+  return function validate(props, propName, componentName, ...rest) {
+    if (props[propName] !== null && typeof props[propName] !== 'undefined') {
+      console.error(
+        `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`
+      )
+    }
+    return propType(props, propName, componentName, ...rest);
+  }
+}
\ No newline at end of file
diff --git a/src/utils/tests/CBrand.test.js b/src/utils/tests/CBrand.test.js
new file mode 100644
index 00000000..a06c7311
--- /dev/null
+++ b/src/utils/tests/CBrand.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CBrand from '../CBrand'
+
+configure({ adapter: new Adapter() })
+
+describe('CBrand', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CBrand/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CBrand
+        className='class-name'
+        href='href'
+      >
+        CBrand
+      </CBrand>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/utils/tests/__snapshots__/CBrand.test.js.snap b/src/utils/tests/__snapshots__/CBrand.test.js.snap
new file mode 100644
index 00000000..a4101fe7
--- /dev/null
+++ b/src/utils/tests/__snapshots__/CBrand.test.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CBrand renders basic wrapper correctly 1`] = `
+<div
+  className=""
+/>
+`;
+
+exports[`CBrand renders customized wrapper correctly 1`] = `
+<a
+  className="class-name"
+  href="href"
+  onClick={[Function]}
+  rel={null}
+>
+  CBrand
+</a>
+`;
diff --git a/src/widgets/CWidgetBrand.js b/src/widgets/CWidgetBrand.js
new file mode 100644
index 00000000..0f9932e2
--- /dev/null
+++ b/src/widgets/CWidgetBrand.js
@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CWidgetBrand
+
+const CWidgetBrand = props => {
+
+  const {
+    children,
+    className,
+    //
+    color,
+    rightHeader,
+    rightFooter,
+    leftHeader,
+    leftFooter,
+    addHeaderClasses,
+    bodySlot,
+    ...attributes
+  } = props
+
+  // render
+
+  const headerClasses = classNames(
+      'card-header content-center text-white p-0',
+      color && `bg-${color}`,
+      addHeaderClasses
+  )
+
+  return (
+    <div className={`card ${className}`} {...attributes}>
+      <div className={headerClasses}>
+        {children}
+      </div>
+      { bodySlot ||
+        <div className="card-body row text-center">
+          <div className="col">
+            {
+              rightHeader && <div className="text-value-lg">{rightHeader}</div>
+            }
+            {
+              rightFooter && 
+              <div className="text-uppercase text-muted small">
+                {rightFooter}
+              </div>
+            }
+          </div>
+          <div className="c-vr"></div>
+          <div className="col">
+            {
+              leftHeader && <div className="text-value-lg">{leftHeader}</div>
+            }
+            {
+              leftFooter && <div className="text-uppercase text-muted small">
+                {leftFooter}
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  )
+}
+
+CWidgetBrand.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  color: PropTypes.string,
+  rightHeader: PropTypes.string,
+  rightFooter: PropTypes.string,
+  leftHeader: PropTypes.string,
+  leftFooter: PropTypes.string,
+  addHeaderClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  bodySlot: PropTypes.node
+};
+
+export default CWidgetBrand
diff --git a/src/widgets/CWidgetDropdown.js b/src/widgets/CWidgetDropdown.js
new file mode 100644
index 00000000..23038c41
--- /dev/null
+++ b/src/widgets/CWidgetDropdown.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CWidgetDropdown
+
+const CWidgetDropdown = props => {
+
+  const {
+    children,
+    className,
+    //
+    header,
+    color,
+    footerSlot,
+    text,
+    ...attributes
+  } = props;
+
+  const classes = classNames(
+    'card text-white', color && `bg-${color}`, className
+  )
+
+  return (
+    <div className={classes} {...attributes}>
+      <div className="card-body pb-0 d-flex justify-content-between">
+        <div>
+          { header && <div className="text-value-lg">{header}</div>}
+          { text && <div>{text}</div>}
+        </div>
+        { children }
+      </div>
+      { footerSlot }
+    </div>
+  )
+}
+
+CWidgetDropdown.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  header: PropTypes.string,
+  color: PropTypes.string,
+  footerSlot: PropTypes.node,
+  text: PropTypes.string,
+};
+
+export default CWidgetDropdown
diff --git a/src/widgets/CWidgetIcon.js b/src/widgets/CWidgetIcon.js
new file mode 100644
index 00000000..d209144a
--- /dev/null
+++ b/src/widgets/CWidgetIcon.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CWidgetIcon
+
+const CWidgetIcon = props => {
+
+  const {
+    className,
+    children,
+    //
+    header,
+    text,
+    iconPadding,
+    color,
+    footerSlot,
+    ...attributes
+  } = props;
+
+  const classes = classNames(
+    'card', color, className
+  )
+
+  return (
+    <div className={classes} {...attributes}>
+      <div className={`card-body d-flex align-items-center ${iconPadding ? 'p-3' : 'p-0'}`}>
+        <div className={`mr-3 text-white bg-${color} ${iconPadding ? 'p-3' : 'p-4'}`}>
+          {children}
+        </div>
+        <div>
+          {header && <div className={`text-value text-${color}`}>{header}</div>}
+          {text && <div className="text-muted text-uppercase font-weight-bold small">
+            {text}</div>}
+        </div>
+      </div>
+      { footerSlot }
+    </div>
+  )
+}
+
+CWidgetIcon.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  header: PropTypes.string,
+  text: PropTypes.string,
+  iconPadding: PropTypes.bool,
+  color: PropTypes.string,
+  footerSlot: PropTypes.node
+};
+
+CWidgetIcon.defaultProps = {
+  iconPadding: true
+};
+
+export default CWidgetIcon
diff --git a/src/widgets/CWidgetProgress.js b/src/widgets/CWidgetProgress.js
new file mode 100644
index 00000000..7757e4c6
--- /dev/null
+++ b/src/widgets/CWidgetProgress.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CProgress from '../progress/CProgress'
+
+//component - CoreUI / CWidgetProgress
+const CWidgetProgress = props => {
+
+  const {
+    children,
+    className,
+    //
+    header,
+    text,
+    footer,
+    color,
+    value,
+    inverse,
+    ...attributes
+  } = props;
+
+  const classes = classNames(
+    'card', 
+    inverse ? [color && `bg-${color}`, 'text-white'] : '',
+    className
+  )
+
+  return (
+    <div className={classes} {...attributes}>
+      <div className="card-body">
+        { header && <div className="h4 m-0">{header}</div>}
+        { text && <div>{text}</div>}
+        {
+          children || <CProgress
+            color={!inverse ? color : ''}
+            value={value}
+            className={`progress-xs my-3 mb-0 ${inverse ? 'progress-white' : ''}`}
+          />
+        }
+        { footer && <small className="text-muted">{footer}</small>}
+      </div>
+    </div>
+  )
+
+}
+
+CWidgetProgress.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  header: PropTypes.string,
+  text: PropTypes.string,
+  footer: PropTypes.string,
+  color: PropTypes.string,
+  value: PropTypes.number,
+  inverse: PropTypes.bool,
+};
+
+CWidgetProgress.defaultProps = {
+  value: 25
+};
+
+export default CWidgetProgress;
diff --git a/src/widgets/CWidgetProgressIcon.js b/src/widgets/CWidgetProgressIcon.js
new file mode 100644
index 00000000..9f76b4a2
--- /dev/null
+++ b/src/widgets/CWidgetProgressIcon.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import CProgress from '../progress/CProgress'
+
+//component - CoreUI / CWidgetProgressIcon
+const CWidgetProgressIcon = props => {
+
+  const {
+    children,
+    className,
+    //
+    header,
+    text,
+    value,
+    color,
+    inverse,
+    progressSlot,
+    ...attributes
+  } = props;
+
+  const classes = classNames(
+    'card',
+    inverse ? [color && `bg-${color}`, 'text-white'] : '',
+    className
+  )
+
+  return (
+    <div className={classes} {...attributes}>
+      <div className="card-body">
+        { children && <div className="h1 text-muted text-right mb-4">{children}</div>}
+        { header && <div className="h4 m-0">{header}</div>}
+        { text && <small className="text-muted text-uppercase font-weight-bold">
+          {text}</small>}
+        {
+          progressSlot || < CProgress
+            color={!inverse ? color : ''}
+            value={value}
+            className={`progress-xs my-3 mb-0 ${inverse ? 'progress-white' : ''}`}
+          />
+        }
+      </div>
+    </div>
+  )
+}
+
+CWidgetProgressIcon.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  header: PropTypes.string,
+  text: PropTypes.string,
+  color: PropTypes.string,
+  value: PropTypes.number,
+  inverse: PropTypes.bool,
+  progressSlot: PropTypes.node
+};
+
+CWidgetProgressIcon.defaultProps = {
+  value: 25
+};
+
+export default CWidgetProgressIcon
diff --git a/src/widgets/CWidgetSimple.js b/src/widgets/CWidgetSimple.js
new file mode 100644
index 00000000..865533f7
--- /dev/null
+++ b/src/widgets/CWidgetSimple.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+//component - CoreUI / CWidgetSimple
+const CWidgetSimple = props => {
+
+  const {
+    children,
+    className,
+    //
+    header,
+    text,
+    ...attributes
+  } = props;
+
+  const classes = classNames(
+    'card', className
+  )
+
+  return (
+    <div className={classes} {...attributes}>
+      <div className="card-body text-center">
+        { header && <div className="text-muted small text-uppercase font-weight-bold">
+          {header}</div>}
+        { text && <div className="h2 py-3">{text}</div>}
+        { children }
+      </div>
+    </div>
+  )
+}
+
+CWidgetSimple.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  header: PropTypes.string,
+  text: PropTypes.string
+};
+
+export default CWidgetSimple
diff --git a/src/widgets/tests/CWidgetBrand.test.js b/src/widgets/tests/CWidgetBrand.test.js
new file mode 100644
index 00000000..7e612956
--- /dev/null
+++ b/src/widgets/tests/CWidgetBrand.test.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CWidgetBrand from '../CWidgetBrand'
+
+configure({ adapter: new Adapter() })
+
+describe('CWidgetBrand', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CWidgetBrand/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CWidgetBrand
+        className='class-name'
+        color='info'
+        rightHeader='rh'
+        rightFooter='rf'
+        leftHeader='lh'
+        leftFooter='lf'
+        addHeaderClasses='header-classes'
+      >
+        CWidgetBrand
+      </CWidgetBrand>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/widgets/tests/CWidgetDropdown.test.js b/src/widgets/tests/CWidgetDropdown.test.js
new file mode 100644
index 00000000..c5efb279
--- /dev/null
+++ b/src/widgets/tests/CWidgetDropdown.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CWidgetDropdown from '../CWidgetDropdown'
+
+configure({ adapter: new Adapter() })
+
+describe('CWidgetDropdown', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CWidgetDropdown/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CWidgetDropdown
+        className='class-name'
+        header='header'
+        color='info'
+        text='text'
+      >
+        CWidgetDropdown
+      </CWidgetDropdown>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/widgets/tests/CWidgetIcon.test.js b/src/widgets/tests/CWidgetIcon.test.js
new file mode 100644
index 00000000..00034dfd
--- /dev/null
+++ b/src/widgets/tests/CWidgetIcon.test.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CWidgetIcon from '../CWidgetIcon'
+
+configure({ adapter: new Adapter() })
+
+describe('CWidgetIcon', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CWidgetIcon/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CWidgetIcon
+        className='class-name'
+        header='header'
+        text='text'
+        iconPadding
+        color='info'
+      >
+        CWidgetIcon
+      </CWidgetIcon>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/widgets/tests/CWidgetProgress.test.js b/src/widgets/tests/CWidgetProgress.test.js
new file mode 100644
index 00000000..7915af44
--- /dev/null
+++ b/src/widgets/tests/CWidgetProgress.test.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CWidgetProgress from '../CWidgetProgress'
+
+configure({ adapter: new Adapter() })
+
+describe('CWidgetProgress', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CWidgetProgress/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CWidgetProgress
+        className='class-name'
+        header='header'
+        text='text'
+        footer='footer'
+        color='info'
+        value={45}
+        inverse
+      >
+        CWidgetProgress
+      </CWidgetProgress>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/widgets/tests/CWidgetProgressIcon.test.js b/src/widgets/tests/CWidgetProgressIcon.test.js
new file mode 100644
index 00000000..ad2edeae
--- /dev/null
+++ b/src/widgets/tests/CWidgetProgressIcon.test.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CWidgetProgressIcon from '../CWidgetProgressIcon'
+
+configure({ adapter: new Adapter() })
+
+describe('CWidgetProgressIcon', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CWidgetProgressIcon/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CWidgetProgressIcon
+        className='class-name'
+        header='header'
+        text='text'
+        value={55}
+        color='info'
+        inverse
+      >
+        CWidgetProgressIcon
+      </CWidgetProgressIcon>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/widgets/tests/CWidgetSimple.test.js b/src/widgets/tests/CWidgetSimple.test.js
new file mode 100644
index 00000000..93be7c67
--- /dev/null
+++ b/src/widgets/tests/CWidgetSimple.test.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import renderer from 'react-test-renderer';
+
+import CWidgetSimple from '../CWidgetSimple'
+
+configure({ adapter: new Adapter() })
+
+describe('CWidgetSimple', () => {
+  it('renders basic wrapper correctly', () => {
+    const component = renderer.create(<CWidgetSimple/>);
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders customized wrapper correctly', () => {
+    const componentCustomized = renderer.create(
+      <CWidgetSimple
+        className='class-name'
+        header='header'
+        text='text'
+      >
+        CWidgetSimple
+      </CWidgetSimple>
+    );
+    let tree = componentCustomized.toJSON();
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/src/widgets/tests/__snapshots__/CWidgetBrand.test.js.snap b/src/widgets/tests/__snapshots__/CWidgetBrand.test.js.snap
new file mode 100644
index 00000000..8e62280d
--- /dev/null
+++ b/src/widgets/tests/__snapshots__/CWidgetBrand.test.js.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CWidgetBrand renders basic wrapper correctly 1`] = `
+<div
+  className="card undefined"
+>
+  <div
+    className="card-header content-center text-white p-0"
+  />
+  <div
+    className="card-body row text-center"
+  >
+    <div
+      className="col"
+    />
+    <div
+      className="c-vr"
+    />
+    <div
+      className="col"
+    />
+  </div>
+</div>
+`;
+
+exports[`CWidgetBrand renders customized wrapper correctly 1`] = `
+<div
+  className="card class-name"
+>
+  <div
+    className="card-header content-center text-white p-0 bg-info header-classes"
+  >
+    CWidgetBrand
+  </div>
+  <div
+    className="card-body row text-center"
+  >
+    <div
+      className="col"
+    >
+      <div
+        className="text-value-lg"
+      >
+        rh
+      </div>
+      <div
+        className="text-uppercase text-muted small"
+      >
+        rf
+      </div>
+    </div>
+    <div
+      className="c-vr"
+    />
+    <div
+      className="col"
+    >
+      <div
+        className="text-value-lg"
+      >
+        lh
+      </div>
+      <div
+        className="text-uppercase text-muted small"
+      >
+        lf
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/widgets/tests/__snapshots__/CWidgetDropdown.test.js.snap b/src/widgets/tests/__snapshots__/CWidgetDropdown.test.js.snap
new file mode 100644
index 00000000..4cf66f5c
--- /dev/null
+++ b/src/widgets/tests/__snapshots__/CWidgetDropdown.test.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CWidgetDropdown renders basic wrapper correctly 1`] = `
+<div
+  className="card text-white"
+>
+  <div
+    className="card-body pb-0 d-flex justify-content-between"
+  >
+    <div />
+  </div>
+</div>
+`;
+
+exports[`CWidgetDropdown renders customized wrapper correctly 1`] = `
+<div
+  className="card text-white bg-info class-name"
+>
+  <div
+    className="card-body pb-0 d-flex justify-content-between"
+  >
+    <div>
+      <div
+        className="text-value-lg"
+      >
+        header
+      </div>
+      <div>
+        text
+      </div>
+    </div>
+    CWidgetDropdown
+  </div>
+</div>
+`;
diff --git a/src/widgets/tests/__snapshots__/CWidgetIcon.test.js.snap b/src/widgets/tests/__snapshots__/CWidgetIcon.test.js.snap
new file mode 100644
index 00000000..92d2e0ba
--- /dev/null
+++ b/src/widgets/tests/__snapshots__/CWidgetIcon.test.js.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CWidgetIcon renders basic wrapper correctly 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="card-body d-flex align-items-center p-3"
+  >
+    <div
+      className="mr-3 text-white bg-undefined p-3"
+    />
+    <div />
+  </div>
+</div>
+`;
+
+exports[`CWidgetIcon renders customized wrapper correctly 1`] = `
+<div
+  className="card info class-name"
+>
+  <div
+    className="card-body d-flex align-items-center p-3"
+  >
+    <div
+      className="mr-3 text-white bg-info p-3"
+    >
+      CWidgetIcon
+    </div>
+    <div>
+      <div
+        className="text-value text-info"
+      >
+        header
+      </div>
+      <div
+        className="text-muted text-uppercase font-weight-bold small"
+      >
+        text
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/widgets/tests/__snapshots__/CWidgetProgress.test.js.snap b/src/widgets/tests/__snapshots__/CWidgetProgress.test.js.snap
new file mode 100644
index 00000000..3abc9022
--- /dev/null
+++ b/src/widgets/tests/__snapshots__/CWidgetProgress.test.js.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CWidgetProgress renders basic wrapper correctly 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="card-body"
+  >
+    <div
+      className="progress progress-xs my-3 mb-0 "
+    >
+      <div
+        aria-valuemax={100}
+        aria-valuemin="0"
+        aria-valuenow={25}
+        className="progress-bar"
+        role="progressbar"
+        style={
+          Object {
+            "width": "25%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CWidgetProgress renders customized wrapper correctly 1`] = `
+<div
+  className="card bg-info text-white class-name"
+>
+  <div
+    className="card-body"
+  >
+    <div
+      className="h4 m-0"
+    >
+      header
+    </div>
+    <div>
+      text
+    </div>
+    CWidgetProgress
+    <small
+      className="text-muted"
+    >
+      footer
+    </small>
+  </div>
+</div>
+`;
diff --git a/src/widgets/tests/__snapshots__/CWidgetProgressIcon.test.js.snap b/src/widgets/tests/__snapshots__/CWidgetProgressIcon.test.js.snap
new file mode 100644
index 00000000..151954f3
--- /dev/null
+++ b/src/widgets/tests/__snapshots__/CWidgetProgressIcon.test.js.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CWidgetProgressIcon renders basic wrapper correctly 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="card-body"
+  >
+    <div
+      className="progress progress-xs my-3 mb-0 "
+    >
+      <div
+        aria-valuemax={100}
+        aria-valuemin="0"
+        aria-valuenow={25}
+        className="progress-bar"
+        role="progressbar"
+        style={
+          Object {
+            "width": "25%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CWidgetProgressIcon renders customized wrapper correctly 1`] = `
+<div
+  className="card bg-info text-white class-name"
+>
+  <div
+    className="card-body"
+  >
+    <div
+      className="h1 text-muted text-right mb-4"
+    >
+      CWidgetProgressIcon
+    </div>
+    <div
+      className="h4 m-0"
+    >
+      header
+    </div>
+    <small
+      className="text-muted text-uppercase font-weight-bold"
+    >
+      text
+    </small>
+    <div
+      className="progress progress-xs my-3 mb-0 progress-white"
+    >
+      <div
+        aria-valuemax={100}
+        aria-valuemin="0"
+        aria-valuenow={55}
+        className="progress-bar"
+        role="progressbar"
+        style={
+          Object {
+            "width": "55.00000000000001%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/widgets/tests/__snapshots__/CWidgetSimple.test.js.snap b/src/widgets/tests/__snapshots__/CWidgetSimple.test.js.snap
new file mode 100644
index 00000000..ab25b799
--- /dev/null
+++ b/src/widgets/tests/__snapshots__/CWidgetSimple.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CWidgetSimple renders basic wrapper correctly 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="card-body text-center"
+  />
+</div>
+`;
+
+exports[`CWidgetSimple renders customized wrapper correctly 1`] = `
+<div
+  className="card class-name"
+>
+  <div
+    className="card-body text-center"
+  >
+    <div
+      className="text-muted small text-uppercase font-weight-bold"
+    >
+      header
+    </div>
+    <div
+      className="h2 py-3"
+    >
+      text
+    </div>
+    CWidgetSimple
+  </div>
+</div>
+`;
diff --git a/stories/CAlert.stories.js b/stories/CAlert.stories.js
new file mode 100644
index 00000000..e5a4192f
--- /dev/null
+++ b/stories/CAlert.stories.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import CAlert from '../src/alert/CAlert'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CAlert'
+};
+
+
+export const single = () => {
+  const colorOptions = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  return <>
+    <CCol lg="12" xs="12"> 
+      <CCard> 
+        <CCardBody>
+          <CAlert color={color}>Lorem ipsum dolor cet emit. Emit cet dolor ipsum lorem.</CAlert>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
+
+
+export const all = () => 
+<CCol lg="12" xs="12"> 
+  <CCard> 
+    <CCardBody>
+      <CAlert color="primary">CAlert primary</CAlert>
+      <CAlert color="secondary">CAlert secondary</CAlert>
+      <CAlert color="success">CAlert success</CAlert>
+      <CAlert color="danger">CAlert danger</CAlert>
+      <CAlert color="warning">CAlert warning</CAlert>
+      <CAlert color="info">CAlert info</CAlert>
+      <CAlert color="light">CAlert light</CAlert>
+      <CAlert color="dark">CAlert dark</CAlert>
+    </CCardBody>
+  </CCard>
+</CCol>
diff --git a/stories/CBadge.stories.js b/stories/CBadge.stories.js
new file mode 100644
index 00000000..5a7c678c
--- /dev/null
+++ b/stories/CBadge.stories.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import CBadge from '../src/badge/CBadge'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CBadge'
+};
+
+export const single = () => {
+  const colorOptions = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  const shapeOptions = [
+    '', 'pill'
+  ]
+  const shape = select('Shape', shapeOptions, '', 'Other')
+
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CBadge 
+            color={color}
+            shape={shape}  
+          >
+            CBadge
+          </CBadge>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
+
+export const all = () => 
+<>
+  <CCol lg="12" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CBadge color="primary">CBadge primary</CBadge>
+        <CBadge color="secondary">CBadge secondary</CBadge>
+        <CBadge color="success">CBadge success</CBadge>
+        <CBadge color="danger">CBadge danger</CBadge>
+        <CBadge color="warning">CBadge warning</CBadge>
+        <CBadge color="info">CBadge info</CBadge>
+        <CBadge color="light">CBadge light</CBadge>
+        <CBadge color="dark">CBadge dark</CBadge>
+      </CCardBody>
+    </CCard>
+  </CCol>
+  <CCol lg="12" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CBadge color="primary" shape="pill">CBadge primary pill</CBadge>
+        <CBadge color="secondary" shape="pill">CBadge secondary pill</CBadge>
+        <CBadge color="success" shape="pill">CBadge success pill</CBadge>
+        <CBadge color="danger" shape="pill">CBadge danger pill</CBadge>
+        <CBadge color="warning" shape="pill">CBadge warning pill</CBadge>
+        <CBadge color="info" shape="pill">CBadge info pill</CBadge>
+        <CBadge color="light" shape="pill">CBadge light pill</CBadge>
+        <CBadge color="dark" shape="pill">CBadge dark pill</CBadge>
+      </CCardBody>
+    </CCard>
+  </CCol>
+</>
\ No newline at end of file
diff --git a/stories/CBreadcrumb.stories.js b/stories/CBreadcrumb.stories.js
new file mode 100644
index 00000000..0fce9c59
--- /dev/null
+++ b/stories/CBreadcrumb.stories.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import CBreadcrumb from '../src/breadcrumb/CBreadcrumb'
+import CBreadcrumbItem from '../src/breadcrumb/CBreadcrumbItem'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+export default {
+  title: 'CBreadcrumb'
+};
+
+export const basic = () => <>  
+  <CCol lg="12" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CBreadcrumb>
+          <CBreadcrumbItem><a href="#">Home</a></CBreadcrumbItem>
+          <CBreadcrumbItem><a href="#">Library</a></CBreadcrumbItem>
+          <CBreadcrumbItem active>Data</CBreadcrumbItem>
+        </CBreadcrumb>
+      </CCardBody>
+    </CCard>
+  </CCol>
+</>
\ No newline at end of file
diff --git a/stories/CButton.stories.js b/stories/CButton.stories.js
new file mode 100644
index 00000000..bedc3170
--- /dev/null
+++ b/stories/CButton.stories.js
@@ -0,0 +1,687 @@
+import React from 'react';
+import CButton from '../src/button/CButton'
+import CCard from '../src/card/CCard'
+import CCardHeader from '../src/card/CCardHeader'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CRow from '../src/grid/CRow'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CButton'
+};
+
+export const singleButton = () => {
+
+  const block = boolean('Block', false, 'Basic')
+  const active = boolean('Active', false, 'Basic')
+  const disabled = boolean('Disabled', false, 'Basic')
+  const pressed = boolean('Pressed', false, 'Basic')
+
+  const shapeOptions = ['', 'square', 'pill']
+  const shape = select('Shape', shapeOptions, '', 'Other')
+  const colorOptions = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+    "link",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  const variantOptions = ['', 'ghost', 'outline']
+  const variant = select('Variant', variantOptions, '', 'Other')
+  const sizeOptions = ['', 'sm', 'lg']
+  const size = select('Size', sizeOptions, '', 'Other')
+
+  return  <> 
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CButton
+            block={block}
+            active={active}
+            disabled={disabled}
+            pressed={pressed}
+            shape={shape}
+            color={color}
+            variant={variant}
+            size={size}
+          >
+            CButton
+          </CButton>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
+
+export const allInOneView = () =>     <>
+<CCol lg="12" xs="12">
+<CCard>
+  <CCardHeader>
+    Standard Buttons
+  </CCardHeader>
+  <CCardBody>
+    <CRow className="align-items-center">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Normal
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="primary">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="secondary">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="success">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="warning">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="danger">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="info">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="light">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="dark">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="link">Link</CButton>
+      </CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Active State
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="primary" aria-pressed="true">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="secondary" aria-pressed="true">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="success" aria-pressed="true">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="warning" aria-pressed="true">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="danger" aria-pressed="true">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="info" aria-pressed="true">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="light" aria-pressed="true">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="dark" aria-pressed="true">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block color="link" aria-pressed="true">Link</CButton>
+      </CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Disabled
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="primary" disabled>Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="secondary" disabled>Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="success" disabled>Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="warning" disabled>Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="danger" disabled>Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="info" disabled>Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="light" disabled>Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="dark" disabled>Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block color="link" disabled>Link</CButton>
+      </CCol>
+    </CRow>
+  </CCardBody>
+</CCard>
+<CCard>
+  <CCardHeader>
+    variant="outline" Buttons
+  </CCardHeader>
+  <CCardBody>
+    <p>
+      With <code>outline</code> prop.
+    </p>
+    <CRow className="align-items-center">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Normal
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="primary">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="secondary">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="success">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="warning">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="danger">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="info">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="light">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="dark">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Active State
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" active color="primary" aria-pressed="true">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" active color="secondary" aria-pressed="true">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" active color="success" aria-pressed="true">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" active color="warning" aria-pressed="true">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" active color="danger" aria-pressed="true">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" active color="info" aria-pressed="true">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" active color="light" aria-pressed="true">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" active color="dark" aria-pressed="true">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Disabled
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="primary" disabled>Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="success" disabled>Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="warning" disabled>Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="danger" disabled>Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="info" disabled>Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="light" disabled>Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="outline" color="dark" disabled>Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+    </CRow>
+  </CCardBody>
+</CCard>
+<CCard>
+  <CCardHeader>
+    variant="ghost" Buttons
+  </CCardHeader>
+  <CCardBody>
+    <p>
+      Use <code>.btn-ghost-*</code> class for variant="ghost" buttons.
+    </p>
+    <CRow className="align-items-center">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Normal
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="primary">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="secondary">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="success">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="warning">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="danger">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="info">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="light">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="dark">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Active State
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block active variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block active variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block active variant="ghost" color="success" aria-pressed="true">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block active variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block active variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block active variant="ghost" color="info" aria-pressed="true">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block active variant="ghost" color="light" aria-pressed="true">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block active variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Disabled
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="primary" disabled>Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="success" disabled>Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="warning" disabled>Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="danger" disabled>Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="info" disabled>Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="light" disabled>Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block variant="ghost" color="dark" disabled>Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
+    </CRow>
+  </CCardBody>
+</CCard>
+<CCard>
+  <CCardHeader>
+    Square Buttons
+  </CCardHeader>
+  <CCardBody>
+    <p>
+      Use <code>.btn-square</code> class for square buttons.
+    </p>
+    <CRow className="align-items-center">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Normal
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="primary">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="secondary">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="success">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="warning">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="danger">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="info">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="light">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="dark">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="link">Link</CButton>
+      </CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Active State
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="primary" aria-pressed="true">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="secondary" aria-pressed="true">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="success" aria-pressed="true">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="warning" aria-pressed="true">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="danger" aria-pressed="true">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="info" aria-pressed="true">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="light" aria-pressed="true">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="dark" aria-pressed="true">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="square" color="link" aria-pressed="true">Link</CButton>
+      </CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Disabled
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="primary" disabled>Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="secondary" disabled>Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="success" disabled>Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="warning" disabled>Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="danger" disabled>Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="info" disabled>Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="light" disabled>Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="dark" disabled>Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="square" color="link" disabled>Link</CButton>
+      </CCol>
+    </CRow>
+  </CCardBody>
+</CCard>
+<CCard>
+  <CCardHeader>
+    Pill Buttons
+  </CCardHeader>
+  <CCardBody>
+    <p>
+      Use <code>.btn-pill</code> class for pill buttons.
+    </p>
+    <CRow className="align-items-center">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Normal
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="primary" className="">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="secondary">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="success">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="warning">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="danger">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="info">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="light">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="dark">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="link">Link</CButton>
+      </CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Active State
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="primary" aria-pressed="true">Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="success" aria-pressed="true">Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="warning" aria-pressed="true">Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="danger" aria-pressed="true">Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="info" aria-pressed="true">Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="light" aria-pressed="true">Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="dark" aria-pressed="true">Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton active block shape="pill" color="link" aria-pressed="true">Link</CButton>
+      </CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="12" xl className="mb-3 mb-xl-0">
+        Disabled
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="primary" disabled>Primary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="secondary" disabled>Secondary</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="success" disabled>Success</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="warning" disabled>Warning</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="danger" disabled>Danger</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="info" disabled>Info</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="light" disabled>Light</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="dark" disabled>Dark</CButton>
+      </CCol>
+      <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+        <CButton block shape="pill" color="link" disabled>Link</CButton>
+      </CCol>
+    </CRow>
+  </CCardBody>
+</CCard>
+
+<CCard>
+  <CCardHeader>
+    Sizes
+  </CCardHeader>
+  <CCardBody>
+    <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
+    <CRow className="align-items-center">
+      <CCol col="2" xl className="mb-3 mb-xl-0">
+        Small
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton color="primary" size="sm">Standard Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton color="secondary" variant="outline" size="sm">Outline Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton size="sm" variant="ghost" color="ghost">Ghost Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton shape="square" color="warning" size="sm">Square Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton shape="pill" color="danger" size="sm">Pill Button</CButton>
+      </CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="2" xl className="mb-3 mb-xl-0">
+        Normal
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton color="primary">Standard Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton variant="outline" color="secondary" >Outline Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton variant="ghost" color="success">Ghost Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton shape="square" color="warning">Square Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton shape="pill" color="danger">Pill Button</CButton>
+      </CCol>
+    </CRow>
+    <CRow className="align-items-center mt-3">
+      <CCol col="2" xl className="mb-3 mb-xl-0">
+        Large
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton color="primary" size="lg">Standard Button</CButton>
+      </CCol>
+      <CCol col="2"className="mb-3 mb-xl-0 text-center">
+        <CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton shape="square" color="warning" size="lg">Square Button</CButton>
+      </CCol>
+      <CCol col="2" className="mb-3 mb-xl-0 text-center">
+        <CButton shape="pill" color="danger" size="lg">Pill Button</CButton>
+      </CCol>
+    </CRow>
+  </CCardBody>
+</CCard>
+
+<CRow>
+  <CCol xs="12" md="6">
+    <CCard>
+      <CCardHeader>
+        Block Level Buttons
+      </CCardHeader>
+      <CCardBody>
+        <p>Add prop <code>block</code></p>
+        <CButton color="secondary" size="lg" block>Block level button</CButton>
+        <CButton color="primary" size="lg" block>Block level button</CButton>
+        <CButton color="success" size="lg" block>Block level button</CButton>
+        <CButton color="info" size="lg" block>Block level button</CButton>
+        <CButton color="warning" size="lg" block>Block level button</CButton>
+        <CButton color="danger" size="lg" block>Block level button</CButton>
+        <CButton color="link" size="lg" block>Block level button</CButton>
+      </CCardBody>
+    </CCard>
+  </CCol>
+  <CCol xs="12" md="6">
+    <CCard>
+      <CCardHeader>
+        Block Level Buttons
+      </CCardHeader>
+      <CCardBody>
+        <p>Add prop <code>block</code></p>
+        <CButton variant="outline" color="secondary" size="lg" block>Block level button</CButton>
+        <CButton variant="outline" color="primary" size="lg" block>Block level button</CButton>
+        <CButton variant="outline" color="success" size="lg" block>Block level button</CButton>
+        <CButton variant="outline" color="info" size="lg" block>Block level button</CButton>
+        <CButton variant="outline" color="warning" size="lg" block>Block level button</CButton>
+        <CButton variant="outline" color="danger" size="lg" block>Block level button</CButton>
+        <CButton variant="ghost" color="info" size="lg" block>Block level button</CButton>
+      </CCardBody>
+    </CCard>
+  </CCol>
+</CRow>
+</CCol>
+</>;
diff --git a/stories/CButtonClose.stories.js b/stories/CButtonClose.stories.js
new file mode 100644
index 00000000..a5da1d94
--- /dev/null
+++ b/stories/CButtonClose.stories.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import CButtonClose from '../src/button/CButtonClose'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CButtonClose'
+};
+
+export const basic = () => {
+
+  const buttonClassOptions = [
+    '',
+    "bg-primary close",
+    "bg-secondary close",
+    "bg-success close",
+    "bg-warning close",
+    "bg-danger close",
+    "bg-info close",
+    "bg-light close",
+    "bg-dark close",
+    "text-primary close",
+    "text-secondary close",
+    "text-success close",
+    "text-warning close",
+    "text-danger close",
+    "text-info close",
+    "text-light close",
+    "text-dark close",
+  ]
+  const buttonClass = select('Button class', buttonClassOptions, '', 'Other')
+  return <>
+    <CCol lg="4" md="6" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CButtonClose
+            buttonClass={buttonClass}
+          />
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+
+}
diff --git a/stories/CButtonDropdown.stories.js b/stories/CButtonDropdown.stories.js
new file mode 100644
index 00000000..7c961114
--- /dev/null
+++ b/stories/CButtonDropdown.stories.js
@@ -0,0 +1,456 @@
+import React from 'react';
+import CButton from '../src/button/CButton'
+import CDropdown from '../src/dropdown/CDropdown'
+import CDropdownToggle from '../src/dropdown/CDropdownToggle'
+import CDropdownMenu from '../src/dropdown/CDropdownMenu'
+import CDropdownItem from '../src/dropdown/CDropdownItem'
+import CDropdownDivider from '../src/dropdown/CDropdownDivider'
+import CDropdownHeader from '../src/dropdown/CDropdownHeader'
+
+import CCard from '../src/card/CCard'
+import CCardHeader from '../src/card/CCardHeader'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CRow from '../src/grid/CRow'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CButtonDropdowns'
+};
+
+export const single = () => {
+
+  const colorOptions = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+    "link",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  const split = boolean('Split', false, 'Other')
+  const sizeOption = [
+    '',
+    'sm',
+    'lg',
+  ]
+  const size = select('Size', sizeOption, '', 'Other')
+  const placementOption = [
+    '',
+    'left',
+    'right',
+    'top',
+    'bottom',
+  ]
+  const placement = select('Placement', placementOption, 'bottom', 'Other')
+  
+  return <>
+    <CCol lg="6" xs="12">
+      <CCard>
+        <CCardBody>
+          <CDropdown className="m-1">
+            <CDropdownToggle 
+              split={split}
+              color={color}
+              size={size}
+            >
+              Primary
+            </CDropdownToggle>
+            <CDropdownMenu 
+              placement={placement}
+            >
+              <CDropdownItem header>Header</CDropdownItem>
+              <CDropdownItem disabled>Action Disabled</CDropdownItem>
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownDivider />
+              <CDropdownItem>Another Action</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
+
+export const all = () => {
+  return <>
+  <CCol lg="12" xs="12">
+    <CRow>
+      <CCol xs="12">
+        <CCard>
+          <CCardHeader>
+            Dropdowns
+          </CCardHeader>
+          <CCardBody>
+
+            <CDropdown className="m-1">
+              <CDropdownToggle>
+                Dropdown button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="primary">
+                Primary
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="secondary">
+                Secondary
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="success">
+                Success
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="info">
+                Info
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="warning">
+                Warning
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1 btn-group">
+              <CDropdownToggle color="danger">
+                Danger
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="primary">
+                Primary
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="secondary">
+                Secondary
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="success">
+                Success
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="info">
+                Info
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="warning">
+                Warning
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="danger">
+                Danger
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+
+            <CDropdown className="m-1" size="lg">
+              <CDropdownToggle color="secondary">
+                Large button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            {' '}
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="secondary" size="lg">
+                Large split button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary" size="sm">
+                Small button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            {' '}
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary" size="sm" split>
+                Small split button
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr/>
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                Dropup button
+              </CDropdownToggle>
+              <CDropdownMenu placement="top">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+            <CDropdown className="m-1">
+              <CDropdownToggle split color="secondary">
+                Split dropup
+              </CDropdownToggle>
+              <CDropdownMenu placement="top">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+          </CCardBody>
+        </CCard>
+        <CCard>
+          <CCardHeader>
+            Menus
+          </CCardHeader>
+          <CCardBody>
+
+            <CDropdown className="m-1 d-inline-block">
+              <CDropdownToggle color="secondary">
+                Direction Up
+              </CDropdownToggle>
+              <CDropdownMenu placement="top">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <CDropdown className="m-1 d-inline-block">
+              <CDropdownToggle color="secondary">
+                Direction Left
+              </CDropdownToggle>
+              <CDropdownMenu placement="left">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <CDropdown className="m-1 d-inline-block">
+              <CDropdownToggle color="secondary">
+                Direction Right
+              </CDropdownToggle>
+              <CDropdownMenu placement="right">
+                <CDropdownHeader>Header</CDropdownHeader>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <CDropdown className="m-1 d-inline-block">
+              <CDropdownToggle color="secondary">
+                Default Down
+              </CDropdownToggle>
+              <CDropdownMenu
+                placement="bottom"
+                modifiers={[{name: 'flip', enabled: false }]}
+              >
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                This dropdown{'\''}s menu is right-aligned
+              </CDropdownToggle>
+              <CDropdownMenu placement="right">
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem disabled>Action Disabled</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                Dropdown with header
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem header>Header</CDropdownItem>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                Dropdown with divider
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownDivider />
+                <CDropdownItem>Another Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+            <CDropdown className="m-1">
+              <CDropdownToggle color="secondary">
+                Dropdown with disabled item
+              </CDropdownToggle>
+              <CDropdownMenu>
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem disabled>Disabled Action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+
+            <hr />
+
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+    </CCol>
+
+
+    </>
+
+}
\ No newline at end of file
diff --git a/stories/CButtonGroup.stories.js b/stories/CButtonGroup.stories.js
new file mode 100644
index 00000000..b85c64fe
--- /dev/null
+++ b/stories/CButtonGroup.stories.js
@@ -0,0 +1,206 @@
+import React from 'react';
+import CButtonGroup from '../src/button/CButtonGroup'
+import CButton from '../src/button/CButton'
+import CButtonToolbar from '../src/button/CButtonToolbar'
+import CInputGroup from '../src/form/CInputGroup'
+import CInputGroupText from '../src/form/CInputGroupText'
+import { CInput } from '../src/form/CInput'
+import CDropdown from '../src/dropdown/CDropdown'
+import CDropdownToggle from '../src/dropdown/CDropdownToggle'
+import CDropdownMenu from '../src/dropdown/CDropdownMenu'
+import CDropdownItem from '../src/dropdown/CDropdownItem'
+
+import CCard from '../src/card/CCard'
+import CCardHeader from '../src/card/CCardHeader'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CRow from '../src/grid/CRow'
+
+import { boolean, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CButtonGroup'
+};
+
+export const single = () => {
+
+  const sizeOptions = ['', 'sm', 'lg']
+  const size = select('Size', sizeOptions, '', 'Other')
+  const vertical = boolean('Vertical', false, 'Other')
+
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard>
+        <CCardBody>
+          <CButtonGroup 
+            size={size}
+            vertical={vertical}
+          >
+            <CButton color="secondary">Left</CButton>
+            <CButton color="secondary">Middle</CButton>
+            <CButton color="secondary">Right</CButton>
+          </CButtonGroup>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
+
+
+
+export const all = () => <>
+  <CCol lg="12" xs="12">
+    <CRow>
+      <CCol md="6">
+        <CCard>
+          <CCardHeader>
+            Button Group
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup>
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> toolbar</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonToolbar className="mb-3">
+              <CButtonGroup className="mr-2">
+                <CButton color="secondary">1</CButton>
+                <CButton color="secondary">2</CButton>
+                <CButton color="secondary">3</CButton>
+                <CButton color="secondary">4</CButton>
+              </CButtonGroup>
+              <CButtonGroup className="mr-2">
+                <CButton color="secondary">5</CButton>
+                <CButton color="secondary">6</CButton>
+                <CButton color="secondary">7</CButton>
+              </CButtonGroup>
+              <CButtonGroup>
+                <CButton color="secondary">8</CButton>
+              </CButtonGroup>
+            </CButtonToolbar>
+            <CButtonToolbar className="mb-3">
+              <CButtonGroup className="mr-2">
+                <CButton color="secondary">1</CButton>
+                <CButton color="secondary">2</CButton>
+                <CButton color="secondary">3</CButton>
+                <CButton color="secondary">4</CButton>
+              </CButtonGroup>
+              <CInputGroup>
+                  <CInputGroupText>@</CInputGroupText>
+                <CInput placeholder="Input group example" />
+              </CInputGroup>
+            </CButtonToolbar>
+            <CButtonToolbar justify="between">
+              <CButtonGroup>
+                <CButton color="secondary">1</CButton>
+                <CButton color="secondary">2</CButton>
+                <CButton color="secondary">3</CButton>
+                <CButton color="secondary">4</CButton>
+              </CButtonGroup>
+              <CInputGroup>
+                  <CInputGroupText>@</CInputGroupText>
+                <CInput placeholder="Input group example" />
+              </CInputGroup>
+            </CButtonToolbar>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> vertical variation</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup vertical>
+              <CButton color="secondary">1</CButton>
+              <CButton color="secondary">2</CButton>
+              <CButton color="secondary">3</CButton>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+
+      </CCol>
+      <CCol md={6}>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> sizing</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup size="lg">
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
+            </CButtonGroup>
+            <br /><br />
+            <CButtonGroup>
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
+            </CButtonGroup>
+            <br /><br />
+            <CButtonGroup size="sm">
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> nesting</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup>
+              <CButton color="secondary">1</CButton>
+              <CButton color="secondary">2</CButton>
+              <CDropdown color="secondary">
+                <CDropdownToggle caret color="secondary">
+                  Dropdown
+                </CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem>Dropdown Link</CDropdownItem>
+                  <CDropdownItem>Dropdown Link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+
+        <CCard>
+          <CCardHeader>
+            Button Group
+            <small> vertical</small>
+          </CCardHeader>
+          <CCardBody>
+            <CButtonGroup vertical>
+              <CButton color="secondary">1</CButton>
+              <CButton color="secondary">2</CButton>
+              <CDropdown>
+                <CDropdownToggle color="secondary" caret>
+                  Dropdown
+                </CDropdownToggle>
+                <CDropdownMenu>
+                  <CDropdownItem>Dropdown Link</CDropdownItem>
+                  <CDropdownItem>Dropdown Link</CDropdownItem>
+                </CDropdownMenu>
+              </CDropdown>
+            </CButtonGroup>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  </CCol>
+</>;
diff --git a/stories/CButtonToolbar.stories.js b/stories/CButtonToolbar.stories.js
new file mode 100644
index 00000000..b7f575d1
--- /dev/null
+++ b/stories/CButtonToolbar.stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import CButtonToolbar from '../src/button/CButtonToolbar'
+import CButton from '../src/button/CButton'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CRow from '../src/grid/CRow'
+
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CButtonToolbar'
+};
+
+export const basic = () => {
+
+  const justifyOptions = ['', 'start', 'end', 'between', 'center']
+  const justify = select('justify', justifyOptions, '', 'Other')
+
+  return <>
+    <CCol lg="6" xs="12">
+      <CCard>
+        <CCardBody>
+          <CButtonToolbar justify={justify}>
+            <CButton color="success">Button</CButton>
+            <CButton color="info">Button</CButton>
+            <CButton color="primary">Button</CButton>
+          </CButtonToolbar>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CCallout.stories.js b/stories/CCallout.stories.js
new file mode 100644
index 00000000..074f4b46
--- /dev/null
+++ b/stories/CCallout.stories.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import CCallout from '../src/callout/CCallout'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CCallout'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    '',
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, '', 'Other')
+
+  return <>
+    <CCol lg="4" md="6" xs="12">
+      <CCard>
+        <CCardBody>
+          Lorem ipsum dolor cet emit. Emit cet dolor ipsum lorem. Ipsum cet Emit. 
+          Lorem ipsum dolor cet emit. Emit cet dolor ipsum lorem. Ipsum cet Emit.
+          <CCallout color={color}>
+            Lorem ipsum dolor cet emit. Emit cet dolor ipsum lorem. Ipsum cet Emit. 
+            Lorem ipsum dolor cet emit. Emit cet dolor ipsum lorem. Ipsum cet Emit. 
+            Lorem ipsum dolor cet emit. Emit cet dolor ipsum lorem. Ipsum cet Emit. 
+          </CCallout>
+          Lorem ipsum dolor cet emit. Emit cet dolor ipsum lorem. Ipsum cet Emit. 
+          Lorem ipsum dolor cet emit. Emit cet dolor ipsum lorem. Ipsum cet Emit.
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
\ No newline at end of file
diff --git a/stories/CCard.stories.js b/stories/CCard.stories.js
new file mode 100644
index 00000000..cdc95f67
--- /dev/null
+++ b/stories/CCard.stories.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CRow from '../src/grid/CRow'
+import CCardHeader from '../src/card/CCardHeader'
+import CCardFooter from '../src/card/CCardFooter'
+
+import CCardTitle from '../src/card/CCardTitle'
+import CCardSubtitle from '../src/card/CCardSubtitle'
+import CCardText from '../src/card/CCardText'
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CCard'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const colorTwoOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+    "gradient-primary",
+    "gradient-secondary",
+    "gradient-success",
+    "gradient-warning",
+    "gradient-danger",
+    "gradient-info",
+    "gradient-light",
+    "gradient-dark"
+  ]
+  const classNameOptions = [
+    '',
+    'text-white'
+  ]
+  const borderColor = select('Border color', colorOptions, '', 'Other')
+  const accentColor = select('Accent color', colorOptions, '', 'Other')
+  const color = select('Color', colorTwoOptions, '', 'Other')
+  const className = select('Class name', classNameOptions, '', 'Other')
+
+  return <>
+  <CCol lg="6" xs="12"> 
+    <CRow>
+      <CCol xs="12" sm="8" md="6">
+        <CCard 
+          borderColor={borderColor}
+          accentColor={accentColor}
+          color={color}
+          className={className}
+        >
+          <CCardHeader>
+            Header
+          </CCardHeader>
+          <CCardBody>
+            <CCardTitle>
+              Title
+            </CCardTitle>
+            <CCardSubtitle>
+              Subtitle
+            </CCardSubtitle>
+            <CCardText>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            </CCardText>
+          </CCardBody>
+          <CCardFooter>
+            Footer
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+  </CCol>
+</>
+};
diff --git a/stories/CCarousel.stories.js b/stories/CCarousel.stories.js
new file mode 100644
index 00000000..982d6e7d
--- /dev/null
+++ b/stories/CCarousel.stories.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import CCarousel from '../src/carousel/CCarousel'
+import CCarouselIndicators from '../src/carousel/CCarouselIndicators'
+import CCarouselInner from '../src/carousel/CCarouselInner'
+import CCarouselItem from '../src/carousel/CCarouselItem'
+import CCarouselCaption from '../src/carousel/CCarouselCaption'
+import CCarouselControl from '../src/carousel/CCarouselControl'
+
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CCarousel'
+};
+
+export const basic = () => {
+  const activeIndexOptions = [
+    0,1,2,
+  ]
+  const activeIndex = select('Active index', activeIndexOptions, 0, 'Other')
+  const animate = boolean('Animate', true, 'Other')
+  const autoSlide = number('Auto slide', 2500, {}, 'Other')
+
+
+  return <>
+  <CCol lg="6" xs="12"> 
+    <CCard>
+      <CCardBody>
+        <CCarousel 
+          activeIndex={activeIndex}
+          animate={animate}
+          autoSlide={autoSlide}
+        >
+          <CCarouselIndicators/>
+          <CCarouselInner>
+            <CCarouselItem>
+                <CCard color='primary' className="text-white">
+                  <CCardBody>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                  </CCardBody>
+                </CCard>
+              <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+            </CCarouselItem>
+            <CCarouselItem>
+                <CCard color='warning' className="text-white">
+                  <CCardBody>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                  </CCardBody>
+                </CCard>
+              <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+            </CCarouselItem>
+            <CCarouselItem>
+                <CCard color='dark' className="text-white">
+                  <CCardBody>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                      laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                    </p>
+                  </CCardBody>
+                </CCard>
+              <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+            </CCarouselItem>
+          </CCarouselInner>
+          <CCarouselControl direction="prev"/>
+          <CCarouselControl direction="next"/>
+        </CCarousel>
+      </CCardBody>
+    </CCard>
+  </CCol>
+  </>
+};
diff --git a/stories/CCol.stories.js b/stories/CCol.stories.js
new file mode 100644
index 00000000..7e96a990
--- /dev/null
+++ b/stories/CCol.stories.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import CCol from '../src/grid/CCol'
+
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+
+import { number } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CCol'
+};
+
+export const basic = () => {
+
+  const numberOptions = {
+    range: true,
+    min: 1,
+    max: 12,
+    step: 1,
+  }
+
+  const xs = number('XS', 12, numberOptions, 'Other')
+  const sm = number('SM', 12, numberOptions, 'Other')
+  const md = number('MD', 12, numberOptions, 'Other')
+  const lg = number('LG', 12, numberOptions, 'Other')
+  const xl = number('XL', 12, numberOptions, 'Other')
+
+return <>
+    <CCol
+      xs={xs}
+      sm={sm}
+      md={md}
+      lg={lg}
+      xl={xl}
+    >
+      <CCard color='dark' className="text-white">
+        <CCardBody>
+          <p>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+            laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+          </p> 
+        </CCardBody> 
+      </CCard>
+    </CCol>
+</>
+
+}
\ No newline at end of file
diff --git a/stories/CCollapse.stories.js b/stories/CCollapse.stories.js
new file mode 100644
index 00000000..7f91de97
--- /dev/null
+++ b/stories/CCollapse.stories.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import CCollapse from '../src/collapse/CCollapse'
+
+import CCol from '../src/grid/CCol'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCardFooter from '../src/card/CCardFooter'
+import CButton from '../src/button/CButton'
+
+export default {
+  title: 'CCollapse'
+};
+
+export const basic = () => {
+
+  const [collapse, setCollapse] = useState(false);
+
+  const toggle = (e)=>{
+    setCollapse(!collapse);
+    e.preventDefault();
+  }
+
+  return <>
+  <CCol lg="6" xs="12"> 
+    <CCard>
+      <CCollapse
+        show={collapse}
+      >
+        <CCardBody>
+          <p>
+            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.
+          </p>
+        </CCardBody>
+      </CCollapse>
+      <CCardFooter>
+        <CButton
+          color="primary"
+          onClick={toggle}
+          className={'mb-1'}
+        >
+          Toggle Collapse
+        </CButton>
+      </CCardFooter>
+    </CCard>
+  </CCol>
+</>
+
+};
diff --git a/stories/CDataTable.stories.js b/stories/CDataTable.stories.js
new file mode 100644
index 00000000..7dfccf31
--- /dev/null
+++ b/stories/CDataTable.stories.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import CDataTable from '../src/table/CDataTable'
+import CBadge from '../src/badge/CBadge'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CDataTable'
+};
+
+const fields = ['name','registered', 'role', 'status']
+const usersData = [
+  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
+  {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
+  {id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}
+]
+const getBadge = status => {
+  switch (status) {
+    case 'Active': return 'success'
+    case 'Inactive': return 'secondary'
+    case 'Pending': return 'warning'
+    case 'Banned': return 'danger'
+    default: return 'primary'
+  }
+}
+
+export const simple = () =>
+<CCol lg="6" xs="12">  
+  <CCard>   
+    <CCardBody>     
+      <CDataTable
+        items={usersData}
+        fields={fields}
+        itemsPerPage={5}
+        pagination
+        scopedSlots = {{
+          'status':
+            (item)=>(
+              <td>
+                <CBadge color={getBadge(item.status)}>
+                  {item.status}
+                </CBadge>
+              </td>
+            )
+
+        }}
+      />
+    </CCardBody>
+  </CCard>
+</CCol>
+
+export const full = () => {  
+
+  const dark = boolean('Dark', false, 'View')
+  const hover = boolean('Hover', false, 'View')
+  const striped = boolean('Striped', false, 'View')
+  const border = boolean('Bordered', false, 'View')
+  const outlined = boolean('Outlined', false, 'View')
+  const responsive = boolean('Responsive', true, 'View')
+  const footer = boolean('Footer', false, 'View')
+  const header = boolean('Header', true, 'View')
+
+  const pagination = boolean('Pagination', false, 'Pagination')
+  const itemsPerPageSelect = boolean('Items per page select', false, 'Pagination')
+  const itemsPerPage = number('Items per page', 10, {}, 'Pagination')
+  const pagActivePage = number('Pagination active page on start', 1, {}, 'Pagination')
+
+  const loading = boolean('Loading', false, 'Other')
+  const addTableClasses = text('Add table classes', '', 'Other')
+
+  const sorter = boolean('Sorter', false, 'Sort and filter')
+  //const clickableRows = boolean('Clickable rows', false, 'Sort and filter')
+  const columnFilter = boolean('Column filter', false, 'Sort and filter')
+  const tableFilter = boolean('Table filter', false, 'Sort and filter')
+  const tableFilterValue = text('Table filter value', '', 'Sort and filter')
+
+  return <CCol lg="6" xs="12">   
+      <CCard>
+        <CCardBody>
+          <CDataTable
+                    //data
+                    items={usersData}
+                    fields={fields}
+                    //view
+                    dark={dark}
+                    hover={hover}
+                    striped={striped}
+                    border={border}
+                    outlined={outlined}
+                    responsive={responsive}
+                    footer={footer}
+                    header={header}
+                    //pagination
+                    itemsPerPage={itemsPerPage}
+                    pagination={pagination}
+                    itemsPerPageSelect={itemsPerPageSelect}
+                    activePage={pagActivePage}
+                    //other
+                    loading={loading}
+                    addTableClasses={addTableClasses}
+                    //sort and filter
+                    sorter={sorter}
+                    //clickableRows={clickableRows}
+                    columnFilter={columnFilter}
+                    tableFilter={tableFilter}
+                    tableFilterValue={tableFilterValue}
+                    //scoped slots
+                    scopedSlots = {{
+                      'status':
+                        (item)=>(
+                          <td>
+                            <CBadge color={getBadge(item.status)}>
+                              {item.status}
+                            </CBadge>
+                          </td>
+                        )
+                    }}
+          />
+        </CCardBody>
+      </CCard>
+    </CCol>
+}
\ No newline at end of file
diff --git a/stories/CDropdown.stories.js b/stories/CDropdown.stories.js
new file mode 100644
index 00000000..8eaec2be
--- /dev/null
+++ b/stories/CDropdown.stories.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import CDropdown from '../src/dropdown/CDropdown'
+import CDropdownToggle from '../src/dropdown/CDropdownToggle'
+import CDropdownMenu from '../src/dropdown/CDropdownMenu'
+import CDropdownItem from '../src/dropdown/CDropdownItem'
+
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CDropdown'
+};
+
+export const basic = () => {
+
+  const block = boolean('Block', false, 'Basic')
+  const active = boolean('Active', false, 'Basic')
+  const disabled = boolean('Disabled', false, 'Basic')
+  const pressed = boolean('Pressed', false, 'Basic')
+
+  const shapeOptions = ['', 'square', 'pill']
+  const shape = select('Shape', shapeOptions, '', 'Other')
+  const colorOptions = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+    "link",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  const variantOptions = ['', 'ghost', 'outline']
+  const variant = select('Variant', variantOptions, '', 'Other')
+  const sizeOptions = ['', 'sm', 'lg']
+  const size = select('Size', sizeOptions, '', 'Other')
+  const caret = boolean('Caret', true, 'Other')
+
+
+  return <>
+    <CCol lg="6" sm="12">
+      <CCard>
+        <CCardBody>
+          <CDropdown className="mt-2">
+            <CDropdownToggle 
+              caret={caret}
+              block={block}
+              active={active}
+              disabled={disabled}
+              pressed={pressed}
+              shape={shape}
+              color={color}
+              variant={variant}
+              size={size}
+            >
+              Dropdown button
+            </CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem header>Header</CDropdownItem>
+              <CDropdownItem disabled>Action Disabled</CDropdownItem>
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem divider />
+              <CDropdownItem>Another Action</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+};
diff --git a/stories/CElementCover.stories.js b/stories/CElementCover.stories.js
new file mode 100644
index 00000000..42d50e9a
--- /dev/null
+++ b/stories/CElementCover.stories.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import CElementCover from '../src/element-cover/CElementCover'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CElementCover'
+};
+
+export const basic = () => {
+  const opacityOptions = [
+    0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0
+  ]
+  const opacity = select('Opacity', opacityOptions, 0.4, 'Other')
+  return <>
+    <CCol lg="4" md="6" sm="12">
+      <CCard>
+        <CCardBody>
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit. 
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit. 
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+          <CElementCover
+            opacity={opacity}
+          />
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CEmbed.stories.js b/stories/CEmbed.stories.js
new file mode 100644
index 00000000..ae14a3a3
--- /dev/null
+++ b/stories/CEmbed.stories.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import CEmbed from '../src/embed/CEmbed'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CEmbed'
+};
+
+export const basic = () => {
+
+  const ratioOptions = ['21by9', '16by9', '4by3', '1by1']
+  const ratio = select('Ratio', ratioOptions, '16by9', 'Other')
+
+  return <>
+    <CCol lg="4" md="6" sm="12">
+      <CCard>
+        <CCardBody>
+          <CEmbed
+            ratio={ratio}
+          >
+            <iframe src="https://www.youtube.com/embed/ctV1-yIzZzU" />
+          </CEmbed>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+};
diff --git a/stories/CEmbedItem.stories.js b/stories/CEmbedItem.stories.js
new file mode 100644
index 00000000..10756232
--- /dev/null
+++ b/stories/CEmbedItem.stories.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import CEmbedItem from '../src/embed/CEmbedItem'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CEmbedItem'
+};
+
+export const basic = () => {
+
+  const typeOptions = ['iframe', 'embed', 'video', 'object', 'img']
+  const type = select('Type', typeOptions, 'iframe', 'Other')
+
+  return <>
+    <CCol lg="4" md="6" sm="12">
+      <CCard>
+        <CCardBody>
+          <CEmbedItem>
+            Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+            Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+            Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+            Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+          </CEmbedItem>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CFade.stories.js b/stories/CFade.stories.js
new file mode 100644
index 00000000..ff544d0a
--- /dev/null
+++ b/stories/CFade.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import CFade from '../src/fade/CFade'
+
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+export default {
+  title: 'CFade'
+};
+
+export const basic = () => {
+
+return <>
+  <CCol lg="4" md="6" sm="12">
+    <CCard>
+      <CCardBody>
+        <CFade>
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+          Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+        </CFade>
+      </CCardBody>
+    </CCard>
+  </CCol>
+</>
+
+}
\ No newline at end of file
diff --git a/stories/CForm.stories.js b/stories/CForm.stories.js
new file mode 100644
index 00000000..bd8a5c24
--- /dev/null
+++ b/stories/CForm.stories.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import CForm from '../src/form/CForm'
+import CFormGroup from '../src/form/CFormGroup'
+import CLabel from '../src/form/CLabel'
+import { CInput } from '../src/form/CInput'
+import CFormText from '../src/form/CFormText'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+
+export default {
+  title: 'CForm'
+};
+
+export const basic = () => {
+
+
+
+
+
+  return <>
+    <CCol lg="4" md="6" sm="12">
+      <CCard>
+        <CCardBody>
+          <CForm action="" method="post">
+            <CFormGroup>
+              <CLabel htmlFor="nf-email">Email</CLabel>
+                <CInput
+                  type="email"
+                  id="nf-email"
+                  name="nf-email"
+                  placeholder="Enter Email.."
+                  autoComplete="email"
+                />
+              <CFormText className="help-block">Please enter your email</CFormText>
+            </CFormGroup>
+            <CFormGroup>
+              <CLabel htmlFor="nf-password">Password</CLabel>
+                <CInput
+                  type="password"
+                  id="nf-password"
+                  name="nf-password"
+                  placeholder="Enter Password.."
+                  autoComplete="current-password"
+                />
+              <CFormText className="help-block">Please enter your password</CFormText>
+            </CFormGroup>
+          </CForm>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+};
diff --git a/stories/CImg.stories.js b/stories/CImg.stories.js
new file mode 100644
index 00000000..0b52e191
--- /dev/null
+++ b/stories/CImg.stories.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import CImg from '../src/image/CImg'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select, color } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CImg'
+};
+
+export const basic = () => {
+
+  const alt = text('Alt', '', 'Basic')
+  const width = number('Width', 512, {}, 'Basic')
+  const height = number('Height', 240, {}, 'Basic')
+  const block = boolean('Block', false, 'Basic')
+  const fluid = boolean('Fluid', false, 'Basic')
+  const fluidGrow = boolean('Fluid grow', false, 'Basic')
+  const shape = select('Shape', ['', 'rounded'], '', 'Basic')
+  const thumbnail = boolean('Thumbnail', false, 'Basic')
+  const align = select('Align', ['', 'left', 'right', 'center'], '', 'Basic')
+  const placeholderColor = color('Placeholder color', 'transparent', 'Basic')
+
+  return <>
+    <CCol lg="6" md="8" sm="12">
+      <CCard>
+        <CCardBody>
+          <CImg
+            src="https://picsum.photos/1024/480/?image=54"
+            alt={alt}
+            width={width}
+            height={height}
+            block={block}
+            fluid={fluid}
+            fluidGrow={fluidGrow}
+            shape={shape}
+            thumbnail={thumbnail}
+            align={align}
+            placeholderColor={placeholderColor}
+          />
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+
+};
diff --git a/stories/CInput.stories.js b/stories/CInput.stories.js
new file mode 100644
index 00000000..b23c7dcd
--- /dev/null
+++ b/stories/CInput.stories.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { CInput } from '../src/form/CInput'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CInput'
+};
+
+export const basic = () => {
+
+  const plaintext = boolean('Plaintext', false, 'Basic')
+  const size = select('Size', ['', 'sm', 'lg'], '', 'Basic')
+  const valid = boolean('Valid', false, 'Basic')
+  const invalid = boolean('Invalid', false, 'Basic')
+
+  return <>
+    <CCol lg="4" md="6" sm="12">
+      <CCard>
+        <CCardBody>
+          <CInput
+            plaintext={plaintext}
+            size={size}
+            valid={valid}
+            invalid={invalid}
+          />
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
+
diff --git a/stories/CJumbotron.stories.js b/stories/CJumbotron.stories.js
new file mode 100644
index 00000000..481d2976
--- /dev/null
+++ b/stories/CJumbotron.stories.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import CJumbotron from '../src/jumbotron/CJumbotron'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CJumbotron'
+};
+
+export const basic = () => {
+
+  const fluid = boolean('Fluid', false, 'Basic')
+
+  return  <> 
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CJumbotron
+            fluid={fluid}
+          >
+            <h1>Lorem ipsum dolor</h1>
+            <p>
+              Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+              Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+            </p>
+            <p>
+              Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+              Lorem ipsum dolor cet emit. Lorem ipsum dolor cet emit.
+            </p>
+          </CJumbotron>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CLink.stories.js b/stories/CLink.stories.js
new file mode 100644
index 00000000..9502f96b
--- /dev/null
+++ b/stories/CLink.stories.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import CLink from '../src/link/CLink'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, select, text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CLink'
+};
+
+export const basic = () => {
+
+  const href = text('Href', '', 'Basic')
+  const target = select('Target', ['', '_blank'], '', 'Basic')
+  const disabled = boolean('Disabled', false, 'Basic')
+  const active = boolean('Active', false, 'Basic')
+
+  return  <> 
+    <CCol lg="6" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CLink
+            href={href}
+            target={target}
+            disabled={disabled}
+            active={active}
+          >
+            CLink
+          </CLink>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
\ No newline at end of file
diff --git a/stories/CListGroup.stories.js b/stories/CListGroup.stories.js
new file mode 100644
index 00000000..deb55f40
--- /dev/null
+++ b/stories/CListGroup.stories.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import CListGroup from '../src/list-group/CListGroup'
+import CListGroupItem from '../src/list-group/CListGroupItem'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CListGroup'
+};
+
+export const knobs = () => {
+
+  const colorOptions = [
+    '',
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, '', 'Item')
+  const active = boolean('Active', false, 'Item')
+  const disabled = boolean('Disabled', false, 'Item')
+  const action = boolean('Action', false, 'Item')
+  const accentOptions = [
+    '',
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const accent = select('Accent', accentOptions, '', 'Item')
+  const flush = boolean('Flush', false, 'Group')
+  const groupAccent = boolean('Accent', false, 'Group')
+
+
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CListGroup
+            flush={flush}
+            accent={groupAccent}
+          >
+            <CListGroupItem
+              color={color}
+              active={active}
+              disabled={disabled}
+              action={action}
+              accent={accent}
+            >
+              Lorem ipsum dolor cet emit
+            </CListGroupItem>
+            <CListGroupItem  
+              color={color}
+              active={active}
+              disabled={disabled}
+              action={action}
+              accent={accent}
+            >
+              Lorem ipsum dolor cet emit
+            </CListGroupItem>
+            <CListGroupItem  
+              color={color}
+              active={active}
+              disabled={disabled}
+              action={action}
+              accent={accent}
+            >
+              Lorem ipsum dolor cet emit
+            </CListGroupItem>
+          </CListGroup>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
+
+export const basic = () => {
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CListGroup>
+            <CListGroupItem href="#">
+              This is a default list group item
+            </CListGroupItem>
+            <CListGroupItem href="#" color="primary">
+              This is a primary list group item
+            </CListGroupItem>
+            <CListGroupItem href="#" color="secondary">
+              This is a secondary list group item
+            </CListGroupItem>
+            <CListGroupItem href="#" color="success">
+              This is a success list group item
+            </CListGroupItem>
+            <CListGroupItem href="#" color="danger">
+              This is a danger list group item
+            </CListGroupItem>
+            <CListGroupItem href="#" color="warning">
+              This is a warning list group item
+            </CListGroupItem>
+            <CListGroupItem href="#" color="info">
+              This is a info list group item
+            </CListGroupItem>
+            <CListGroupItem href="#" color="light">
+              This is a light list group item
+            </CListGroupItem>
+            <CListGroupItem href="#" color="dark">
+              This is a dark list group item
+            </CListGroupItem>
+          </CListGroup>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+
+};
diff --git a/stories/CMedia.stories.js b/stories/CMedia.stories.js
new file mode 100644
index 00000000..5518ff4a
--- /dev/null
+++ b/stories/CMedia.stories.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import CMedia from '../src/media/CMedia'
+import CMediaBody from '../src/media/CMediaBody'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+export default {
+  title: 'CMedia'
+};
+
+export const basic = () => {
+
+  return  <> 
+    <CCol lg="6" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CMedia>
+            <img src="https://picsum.photos/1024/480/?image=54" height="50"/>
+            <CMediaBody>
+              <h5 className="mt-0">Media Title</h5>
+              <p>
+                Lorem ipsum dolor cet emit dolor ipsum lorem.
+              </p>
+            </CMediaBody>
+          </CMedia>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CModal.stories.js b/stories/CModal.stories.js
new file mode 100644
index 00000000..0af3f89d
--- /dev/null
+++ b/stories/CModal.stories.js
@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import CModal from '../src/modal/CModal'
+import CModalHeader from '../src/modal/CModalHeader'
+import CModalBody from '../src/modal/CModalBody'
+import CModalFooter from '../src/modal/CModalFooter'
+
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CButton from '../src/button/CButton'
+
+import { boolean, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CModal'
+};
+
+export const basic = () => {
+
+  const [modal, setModal] = useState(false);
+  const toggle = ()=>{
+    setModal(!modal);
+  }
+
+  const centered = boolean('Centered', false, 'Other')
+  const size = select('Size', ['', 'sm', 'lg', 'xl'], '', 'Other')
+  const backdrop = boolean('Backdrop', true, 'Other')
+  const colorOptions = [
+    '',
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, '', 'Other')
+  const borderColorOptions = [
+    '',
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const borderColor = select('Border color', borderColorOptions, '', 'Other')
+  const fade = boolean('Fade', true, 'Other')
+  const closeOnBackdrop = boolean('Close on backdrop', true, 'Other')
+  const scrollable = boolean('Scrollable document', true, 'Other')
+
+  return <>
+    <CCol lg="6" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CButton
+            color="secondary"
+            onClick={toggle}
+          >Launch demo modal</CButton>
+          <CModal
+            show={modal}
+            onClose={toggle}
+            centered={centered}
+            size={size}
+            backdrop={backdrop}
+            color={color}
+            borderColor={borderColor}
+            fade={fade}
+            closeOnBackdrop={closeOnBackdrop}
+            scrollable={scrollable}
+          >
+            <CModalHeader closeButton>Modal title</CModalHeader>
+            <CModalBody>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus nibh eget dignissim sodales. Pellentesque a ex volutpat, vulputate augue vitae, ultricies est. Donec lacinia ullamcorper justo, ac mattis turpis tempus non. Sed a nisl quis est aliquam bibendum vitae at libero. Etiam dictum auctor lacus, at blandit libero consectetur non. Donec pulvinar ullamcorper hendrerit. Curabitur vulputate quam eu ligula viverra vestibulum. Praesent tempus ipsum eget orci consectetur, eget elementum mauris vehicula. Cras semper in ipsum et finibus. Donec eu est hendrerit, fermentum nibh ac, sagittis magna. Etiam id elit fermentum, egestas sem et, viverra metus.</p>
+              <p>Etiam a sem non massa volutpat hendrerit. Mauris condimentum sapien quis dignissim pellentesque. Quisque condimentum lacinia odio et interdum. Nam auctor tincidunt convallis. Vivamus euismod lectus eu arcu facilisis hendrerit. Mauris faucibus urna sit amet nisi volutpat, eu gravida ex elementum. Fusce sed eros vitae eros ultrices faucibus suscipit vel velit. Donec eu nunc ac nisl interdum sagittis ac a justo.</p>
+              <p>Nullam mollis pharetra sagittis. Ut porta lacus vitae sem mollis, ut venenatis dui porta. Morbi nec enim quis nibh pretium sollicitudin non ut augue. Etiam fermentum neque ligula, eu aliquam ante aliquet a. Morbi ut ultrices velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse efficitur eros in ipsum porta, id finibus odio tincidunt. Proin in consequat diam.</p>
+            </CModalBody>
+            <CModalFooter>
+              <CButton
+                color="secondary"
+                onClick={toggle}
+              >Cancel</CButton>
+            </CModalFooter>
+          </CModal>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CNav.stories.js b/stories/CNav.stories.js
new file mode 100644
index 00000000..370d4991
--- /dev/null
+++ b/stories/CNav.stories.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import CNav from '../src/nav/CNav'
+import CNavItem from '../src/nav/CNavItem'
+import CNavLink from '../src/nav/CNavLink'
+
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CNav'
+};
+
+export const basic = () => {
+
+  const variant = select('Variant', ['', 'tabs', 'pills'], '', 'Nav')
+  const vertical = boolean('Vertical', false, 'Nav')
+  const justified = boolean('Justified', false, 'Nav')
+  const fill = boolean('Fill', false, 'Nav')
+  const inCard = boolean('In card', false, 'Nav') 
+
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CNav 
+            variant={variant}
+            vertical={vertical}
+            justified={justified}
+            fill={fill}
+            inCard={inCard}
+          >
+            <CNavItem>
+              <CNavLink active>Link</CNavLink>
+            </CNavItem>
+            <CNavItem>
+              <CNavLink>Link</CNavLink>
+            </CNavItem>
+            <CNavItem>
+              <CNavLink>Link</CNavLink>
+            </CNavItem>
+            <CNavItem>
+              <CNavLink disabled>Disabled</CNavLink>
+            </CNavItem>
+          </CNav>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+};
diff --git a/stories/CNavbar.stories.js b/stories/CNavbar.stories.js
new file mode 100644
index 00000000..72d232e2
--- /dev/null
+++ b/stories/CNavbar.stories.js
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import CNavbar from '../src/navbar/CNavbar'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CToggler from '../src/toggler/CToggler'
+import CNavbarBrand from '../src/navbar/CNavbarBrand'
+import CCollapse from '../src/collapse/CCollapse'
+import CNavbarNav from '../src/navbar/CNavbarNav'
+import CForm from '../src/form/CForm'
+import { CInput } from '../src/form/CInput'
+import CButton from '../src/button/CButton'
+import CDropdown from '../src/dropdown/CDropdown'
+import CDropdownToggle from '../src/dropdown/CDropdownToggle'
+import CDropdownMenu from '../src/dropdown/CDropdownMenu'
+import CDropdownItem from '../src/dropdown/CDropdownItem'
+import CNavLink from '../src/nav/CNavLink'
+
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CNavbar'
+};
+
+export const basic = () => {
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const light = boolean('Light', false, 'Navbar')
+  const colorOptions = [
+    '',
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+    "link",
+  ]
+  const color = select('Color', colorOptions, '', 'Navbar')
+  const fixed = select('Fixed', ['', 'top', 'bottom'], '', 'Navbar')
+  const sticky = boolean('Sticky', false, 'Navbar')
+  const expandable = select('Expandable', ['', false, true, 'xs', 'sm', 'md', 'lg', 'xl'], true, 'Navbar')
+
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CNavbar 
+            expandable={expandable} 
+            color={color}
+            fixed={fixed}
+            sticky={sticky}
+            light={light}
+          >
+            <CToggler inNavbar onClick={() => setIsOpen(!isOpen)}/>
+            <CNavbarBrand>
+              NavbarBrand
+            </CNavbarBrand>
+            <CCollapse show={isOpen} navbar>
+              <CNavbarNav>
+                <CNavLink>Home</CNavLink>
+                <CNavLink>Link</CNavLink>
+              </CNavbarNav>
+              <CNavbarNav className="ml-auto">
+                <CForm inline>
+                  <CInput
+                    className="mr-sm-2"
+                    placeholder="Search"
+                    size="sm"
+                  />
+                  <CButton color="light" className="my-2 my-sm-0" type="submit">Search</CButton>
+                </CForm>
+                <CDropdown
+                  inNav
+                >
+                  <CDropdownToggle color="primary">
+                    Lang
+                  </CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem>EN</CDropdownItem>
+                    <CDropdownItem>ES</CDropdownItem>
+                    <CDropdownItem>RU</CDropdownItem>
+                    <CDropdownItem>FA</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+                <CDropdown
+                  inNav
+                >
+                  <CDropdownToggle color="primary">
+                    User
+                  </CDropdownToggle>
+                  <CDropdownMenu>
+                    <CDropdownItem>Account</CDropdownItem>
+                    <CDropdownItem>Settings</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+              </CNavbarNav>
+            </CCollapse>
+          </CNavbar>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+};
diff --git a/stories/CPagination.stories.js b/stories/CPagination.stories.js
new file mode 100644
index 00000000..42a257af
--- /dev/null
+++ b/stories/CPagination.stories.js
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import CPagination from '../src/pagination/CPagination'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CPagination'
+};
+
+export const basic = () => {
+
+  const [currentPage, setActivePage] = useState(2)
+
+  const dots = boolean('Dots', true, 'View')
+  const arrows = boolean('Arrows', true, 'View')
+  const doubleArrows = boolean('Double arrow', true, 'View')
+  const size = select('Size', ['', 'sm', 'lg'], '', 'View')
+  const align = select('Align', ['', 'start', 'center', 'end'], '', 'View')
+  const pages = number('Pages', 10, {}, 'View')
+  const limit = number('Limit', 5, {}, 'View')
+
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CPagination
+            activePage={currentPage}
+            onActivePageChange={(i) => setActivePage(i)}
+            dots={dots}
+            arrows={arrows}
+            doubleArrows={doubleArrows}
+            size={size}
+            align={align}
+            pages={pages}
+            limit={limit}
+          ></CPagination>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CPopover.stories.js b/stories/CPopover.stories.js
new file mode 100644
index 00000000..62f97339
--- /dev/null
+++ b/stories/CPopover.stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import CPopover from '../src/tooltip/CPopover'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CPopover'
+};
+
+export const basic = () => {
+
+  const header = text('Header', 'Popover header', 'Basic')
+  const content = text('Content', 'Popover text', 'Basic')
+
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CPopover 
+            header={header} 
+            content={content}
+          >
+            <a>
+              Popover example
+            </a>
+          </CPopover>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CProgress.stories.js b/stories/CProgress.stories.js
new file mode 100644
index 00000000..c18fd2d1
--- /dev/null
+++ b/stories/CProgress.stories.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import CProgress from '../src/progress/CProgress'
+import CProgressBar from '../src/progress/CProgressBar'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CProgress'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  const size = select('Size', ['', 'sm', 'xs'], '', 'Other')
+  const value = number('Value', 55, {}, 'Other')
+  const max = number('Max', 100, {}, 'Other')
+  const precision = number('Precision', 0, {}, 'Other')
+  const animated = boolean('Animated', false, 'Other')
+  const striped = boolean('Striped', false, 'Other')
+  const showPercentage = boolean('Show percentage', false, 'Other')
+  const showValue = boolean('Show value', false, 'Other')
+
+
+return <>
+  <CCol lg="6" md="8" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CProgress
+          color={color}
+          size={size}
+          value={value}
+          max={max}
+          precision={precision}
+          animated={animated}
+          striped={striped}
+          showPercentage={showPercentage}
+          showValue={showValue}
+        />
+      </CCardBody>
+    </CCard>
+  </CCol>
+</>
+}
+
+
+
+export const progressBar = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Bar one')
+  const size = select('Size', ['', 'sm', 'xs'], '', 'Bar one')
+  const value = number('Value', 30, {}, 'Bar one')
+  const max = number('Max', 100, {}, 'Bar one')
+  const precision = number('Precision', 0, {}, 'Bar one')
+  const animated = boolean('Animated', false, 'Bar one')
+  const striped = boolean('Striped', false, 'Bar one')
+  const showPercentage = boolean('Show percentage', false, 'Bar one')
+  const showValue = boolean('Show value', false, 'Bar one')
+
+  const colorTwo = select('Color', colorOptions, 'warning', 'Bar two')
+  const sizeTwo = select('Size', ['', 'sm', 'xs'], 'xs', 'Bar two')
+  const valueTwo = number('Value', 30, {}, 'Bar two')
+  const maxTwo = number('Max', 100, {}, 'Bar two')
+  const precisionTwo = number('Precision', 0, {}, 'Bar two')
+  const animatedTwo = boolean('Animated', false, 'Bar two')
+  const stripedTwo = boolean('Striped', false, 'Bar two')
+  const showPercentageTwo = boolean('Show percentage', false, 'Bar two')
+  const showValueTwo = boolean('Show value', false, 'Bar two')
+
+  const colorThree = select('Color', colorOptions, 'info', 'Bar three')
+  const sizeThree = select('Size', ['', 'sm', 'xs'], '', 'Bar three')
+  const valueThree = number('Value', 30, {}, 'Bar three')
+  const maxThree = number('Max', 100, {}, 'Bar three')
+  const precisionThree = number('Precision', 0, {}, 'Bar three')
+  const animatedThree = boolean('Animated', true, 'Bar three')
+  const stripedThree = boolean('Striped', true, 'Bar three')
+  const showPercentageThree = boolean('Show percentage', true, 'Bar three')
+  const showValueThree = boolean('Show value', true, 'Bar three')
+
+return <>
+  <CCol lg="6" md="8" xs="12">
+    <CCard> 
+      <CCardBody>
+      <CProgress>
+        <CProgressBar
+          color={color}
+          size={size}
+          value={value}
+          max={max}
+          precision={precision}
+          animated={animated}
+          striped={striped}
+          showPercentage={showPercentage}
+          showValue={showValue}
+        />
+        <CProgressBar
+          color={colorTwo}
+          size={sizeTwo}
+          value={valueTwo}
+          max={maxTwo}
+          precision={precisionTwo}
+          animated={animatedTwo}
+          striped={stripedTwo}
+          showPercentage={showPercentageTwo}
+          showValue={showValueTwo}
+        />
+        <CProgressBar
+          color={colorThree}
+          size={sizeThree}
+          value={valueThree}
+          max={maxThree}
+          precision={precisionThree}
+          animated={animatedThree}
+          striped={stripedThree}
+          showPercentage={showPercentageThree}
+          showValue={showValueThree}
+        />
+      </CProgress>
+      </CCardBody>
+    </CCard>
+  </CCol>
+</>
+}
\ No newline at end of file
diff --git a/stories/CSpinner.stories.js b/stories/CSpinner.stories.js
new file mode 100644
index 00000000..63aa196a
--- /dev/null
+++ b/stories/CSpinner.stories.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import CSpinner from '../src/spinner/CSpinner'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CSpinner'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  const grow = boolean('Grow', false, 'Other')
+  const size = select('Size', ['', 'sm'], '', 'Other')
+
+  return <>
+    <CCol lg="6" md="8" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CSpinner 
+            color={color} 
+            size={size}
+            grow={grow} 
+          />
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CSwitch.stories.js b/stories/CSwitch.stories.js
new file mode 100644
index 00000000..0a8f161b
--- /dev/null
+++ b/stories/CSwitch.stories.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import CSwitch from '../src/switch/CSwitch'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CSwitch'
+};
+
+export const basic = () => {
+
+  const size = select('Size', ['', 'lg', 'sm'], '', 'Other')
+  const shape = select('Shape', ['', 'pill', 'square'], '', 'Other')
+  const variant = select('Variant', ['', '3d', 'opposite', 'outline'], '', 'Other')
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  const labelOn = text('Label on', '', 'Other')
+  const labelOff = text('Label off', '', 'Other')
+  const checked = boolean('Checked', true, 'Other')
+
+  return <>
+    <CCol lg="6" md="8" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CSwitch
+            size={size}
+            shape={shape}
+            variant={variant}
+            color={color}
+            value={color}
+            labelOn={labelOn}
+            labelOff={labelOff}
+            checked={checked}
+          />
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
+
diff --git a/stories/CTabs.stories.js b/stories/CTabs.stories.js
new file mode 100644
index 00000000..8afb891f
--- /dev/null
+++ b/stories/CTabs.stories.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import CTabs from '../src/tabs/CTabs'
+import CTabPane from '../src/tabs/CTabPane'
+import CTabContent from '../src/tabs/CTabContent'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CNav from '../src/nav/CNav'
+import CNavItem from '../src/nav/CNavItem'
+import CNavLink from '../src/nav/CNavLink'
+
+import { boolean, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CTabs'
+};
+
+export const basic = () => {
+
+  const fade = boolean('Fade', true, 'Other')
+  const activeTab = select('Active tab', ['home', 'profile', 'messages'], 'home', 'Other')
+
+  return <>
+    <CCol lg="6" md="8" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CTabs activeTab={activeTab}>
+            <CNav variant="tabs">
+              <CNavItem>
+                <CNavLink data-tab="home">
+                  ABC
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink data-tab="profile">
+                  DEF
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink data-tab="messages">
+                  GHI
+                </CNavLink>
+              </CNavItem>
+            </CNav>
+            <CTabContent
+              fade={fade}
+            >
+              <CTabPane data-tab="home">
+                123
+              </CTabPane>
+              <CTabPane data-tab="profile">
+                456
+              </CTabPane>
+              <CTabPane data-tab="messages">
+                789
+              </CTabPane>
+            </CTabContent>
+          </CTabs>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
\ No newline at end of file
diff --git a/stories/CToast.stories.js b/stories/CToast.stories.js
new file mode 100644
index 00000000..6c9db592
--- /dev/null
+++ b/stories/CToast.stories.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import CToast from '../src/toast/CToast'
+import CToaster from '../src/toast/CToaster'
+import CToastHeader from '../src/toast/CToastHeader'
+import CToastBody from '../src/toast/CToastBody'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CToast'
+};
+
+export const basic = () => {
+
+  const positionOptions = [
+    '', 'static', 'top-right', 'top-left', 'top-center', 'top-full',
+    'bottom-right', 'bottom-left', 'bottom-center', 'bottom-full'
+  ]
+  const position = select('Position', positionOptions, 'static', 'Other')
+  const show = boolean('Show', true, 'Other')
+  const autohide = boolean('Autohide', false, 'Other')
+  const fade = boolean('Fade', true, 'Other')
+  const closeButton = boolean('Close button', true, 'Other')
+  const colorOptions = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'light',
+    'dark',
+    ''
+  ]
+  const color = select('Color', colorOptions, '', 'Other')
+
+  return <>
+    <CCol lg="6" md="8" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CToaster
+            position={position}
+          >
+            <CToast
+              show={show}
+              autohide={autohide}
+              fade={fade}
+              color={color}
+            >
+              <CToastHeader closeButton={closeButton}>
+                Toast title
+              </CToastHeader>
+              <CToastBody>
+                Toast body
+              </CToastBody>
+            </CToast>
+          </CToaster>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CTooltip.stories.js b/stories/CTooltip.stories.js
new file mode 100644
index 00000000..46da0ba4
--- /dev/null
+++ b/stories/CTooltip.stories.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import CTooltip from '../src/tooltip/CTooltip'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { text, select, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CTooltip'
+};
+
+export const basic = () => {
+
+  const content = text('Content', 'Popover text', 'Other')
+  const placementOptions = [
+    '', 'top-end', 'top', 'top-start',
+    'bottom-end', 'bottom', 'bottom-start',
+    'right-start', 'right', 'right-end',
+    'left-start', 'left', 'left-end'
+  ]
+  const placement = select('Placement', placementOptions, 'top', 'Other')
+  const interactive = boolean('Interactive', false, 'Other') 
+  const trigger = text('Trigger', 'mouseenter focus', 'Other')
+
+  return <>
+    <CCol lg="12" xs="12">
+      <CCard> 
+        <CCardBody>
+          <CTooltip 
+            content={content} 
+            placement={placement}
+            interactive={interactive}
+          >
+          <a href="#"> Tooltip example </a>
+          </CTooltip>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </>
+}
diff --git a/stories/CWidgetBrand.stories.js b/stories/CWidgetBrand.stories.js
new file mode 100644
index 00000000..463b921a
--- /dev/null
+++ b/stories/CWidgetBrand.stories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import CWidgetBrand from '../src/widgets/CWidgetBrand'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CWidgetBrand'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'primary', 'Other')
+  const rightHeader = text('Right header', 'Right header text', 'Other')
+  const rightFooter = text('Right footer', 'Right footer text', 'Other')
+  const leftHeader = text('Left header', 'Left header text', 'Other')
+  const leftFooter = text('Left footer', 'Left footer text', 'Other')
+
+return <>
+  <CCol lg="6" md="8" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CWidgetBrand
+          color={color}
+          rightHeader={rightHeader}
+          rightFooter={rightFooter}
+          leftHeader={leftHeader}
+          leftFooter={leftFooter}
+        >
+          <p className="m-4">Some brand</p>
+        </CWidgetBrand>
+      </CCardBody>
+    </CCard>
+  </CCol>
+</>
+}
diff --git a/stories/CWidgetDropdown.stories.js b/stories/CWidgetDropdown.stories.js
new file mode 100644
index 00000000..905b1913
--- /dev/null
+++ b/stories/CWidgetDropdown.stories.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import CWidgetDropdown from '../src/widgets/CWidgetDropdown'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+import CDropdown from '../src/dropdown/CDropdown'
+import CDropdownItem from '../src/dropdown/CDropdownItem'
+import CDropdownToggle from '../src/dropdown/CDropdownToggle'
+import CDropdownMenu from '../src/dropdown/CDropdownMenu'
+
+
+import { select, text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CWidgetDropdown'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'info', 'Other')
+  const header = text('Header', 'Header text', 'Other')
+  const _text = text('Text', 'Text', 'Other')
+
+return <>
+  <CCol lg="6" md="8" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CWidgetDropdown
+          color={color}
+          header={header}
+          text={_text}
+        >
+          <CDropdown
+            className="float-right"
+            color="transparent p-0"
+            placement="bottom-end"
+          >
+            <CDropdownToggle>
+              More
+            </CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CWidgetDropdown>
+      </CCardBody>
+    </CCard>
+  </CCol>
+</>
+}
diff --git a/stories/CWidgetIcon.stories.js b/stories/CWidgetIcon.stories.js
new file mode 100644
index 00000000..f431625d
--- /dev/null
+++ b/stories/CWidgetIcon.stories.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import CWidgetIcon from '../src/widgets/CWidgetIcon'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CWidgetIcon'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'info', 'Other')
+  const header = text('Header', 'Header text', 'Other')
+  const _text = text('Text', 'Text', 'Other')
+  const iconPadding = boolean('Icon padding', false, 'Other')
+
+  return <>
+  <CCol lg="6" md="8" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CWidgetIcon
+          color={color}
+          header={header}
+          text={_text}
+          iconPadding={iconPadding}
+        >
+          Icon
+        </CWidgetIcon>
+      </CCardBody>
+    </CCard>
+  </CCol>
+  </>
+}
diff --git a/stories/CWidgetProgress.stories.js b/stories/CWidgetProgress.stories.js
new file mode 100644
index 00000000..a918ff81
--- /dev/null
+++ b/stories/CWidgetProgress.stories.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import CWidgetProgress from '../src/widgets/CWidgetProgress'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CWidgetProgress'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'info', 'Other')
+  const header = text('Header', 'Header text', 'Other')
+  const footer = text('Footer', 'Footer text', 'Other')
+  const _text = text('Text', 'Text', 'Other')
+  const value = number('Value', 25, {}, 'Other')
+  const inverse = boolean('Inverse', false, 'Other')
+
+  return <>
+  <CCol lg="6" md="8" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CWidgetProgress
+          color={color}
+          header={header}
+          footer={footer}
+          text={_text}
+          value={value}
+          inverse={inverse}
+        >
+
+        </CWidgetProgress>
+      </CCardBody>
+    </CCard>
+  </CCol>
+  </>
+}
diff --git a/stories/CWidgetProgressIcon.stories.js b/stories/CWidgetProgressIcon.stories.js
new file mode 100644
index 00000000..2cecff90
--- /dev/null
+++ b/stories/CWidgetProgressIcon.stories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import CWidgetProgressIcon from '../src/widgets/CWidgetProgressIcon'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CWidgetProgressIcon'
+};
+
+export const basic = () => {
+
+  const colorOptions = [
+    "",
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "light",
+    "dark",
+  ]
+  const color = select('Color', colorOptions, 'info', 'Other')
+  const header = text('Header', 'Header text', 'Other')
+  const _text = text('Text', 'Text', 'Other')
+  const value = number('Value', 25, {}, 'Other')
+  const inverse = boolean('Inverse', false, 'Other')
+
+  return <>
+  <CCol lg="6" md="8" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CWidgetProgressIcon
+          color={color}
+          header={header}
+          text={_text}
+          value={value}
+          inverse={inverse}
+        >
+          Icon
+        </CWidgetProgressIcon>
+      </CCardBody>
+    </CCard>
+  </CCol>
+  </>
+}
diff --git a/stories/CWidgetSimple.stories.js b/stories/CWidgetSimple.stories.js
new file mode 100644
index 00000000..8e389d43
--- /dev/null
+++ b/stories/CWidgetSimple.stories.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import CWidgetSimple from '../src/widgets/CWidgetSimple'
+import CCard from '../src/card/CCard'
+import CCardBody from '../src/card/CCardBody'
+import CCol from '../src/grid/CCol'
+
+import { text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'CWidgetSimple'
+};
+
+export const basic = () => {
+
+  const header = text('Header', 'Header text', 'Other')
+  const _text = text('Text', 'Text', 'Other')
+  const innerText = text('Inner text', 'Lorem ipsum dolor cet emit', 'Other')
+
+  return <>
+  <CCol lg="6" md="8" xs="12">
+    <CCard> 
+      <CCardBody>
+        <CWidgetSimple
+          header={header}
+          text={_text}
+        >
+          {innerText}
+        </CWidgetSimple>
+      </CCardBody>
+    </CCard>
+  </CCol>
+  </>
+}
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index 940020c5..00000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react",
-    "outDir": "dist",
-    "module": "esnext",
-    "target": "es5",
-    "lib": ["dom", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "es2021"],
-    "sourceMap": true,
-    "allowJs": false,
-    "declaration": true,
-    "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "esModuleInterop": true,
-    "paths": {
-      "@coreui/icons-react": ["./packages/coreui-icons-react/src"],
-      "@coreui/icons-react/*": ["./packages/coreui-icons-react/src/*"],
-      "@coreui/react": ["./packages/coreui-react/src"],
-      "@coreui/react/*": ["./packages/coreui-react/src/*"],
-      "@coreui/react-chartjs": ["./packages/coreui-react-chartjs/src"],
-      "@coreui/react-chartjs/*": ["./packages/coreui-react-chartjs/src/*"]
-    }
-  },
-  "exclude": ["**/node_modules", "**/dist"]
-}