diff --git a/docs/ui/components/countup.mdx b/docs/ui/components/countup.mdx
index 397ca3189..1d39f4a6d 100644
--- a/docs/ui/components/countup.mdx
+++ b/docs/ui/components/countup.mdx
@@ -11,9 +11,7 @@ To be able to use the countup in your application you will need to install the c
To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
-```html example
-
-
+```html example libs="countup"
30000
```
diff --git a/src/js/src/countup.js b/src/js/src/countup.js
new file mode 100644
index 000000000..edc132bda
--- /dev/null
+++ b/src/js/src/countup.js
@@ -0,0 +1,17 @@
+const elements = document.querySelectorAll('[data-countup]');
+
+if (elements.length) {
+ elements.forEach(function (element) {
+ let options = {};
+ try {
+ options = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
+ } catch (error) {}
+
+ const value = parseInt(element.innerHTML, 10);
+
+ const countUp = new window.countUp.CountUp(element, value, options);
+ if (!countUp.error) {
+ countUp.start();
+ }
+ });
+}
\ No newline at end of file
diff --git a/src/js/tabler.esm.js b/src/js/tabler.esm.js
index f32972b65..53bdbd4ad 100644
--- a/src/js/tabler.esm.js
+++ b/src/js/tabler.esm.js
@@ -1,6 +1,7 @@
//Vendor
import "./src/autosize"
+import "./src/countup"
import "./src/input-mask"
import "./src/dropdown"
import "./src/tooltip"
diff --git a/src/js/tabler.js b/src/js/tabler.js
index 25b88b8fc..99c09c9a7 100644
--- a/src/js/tabler.js
+++ b/src/js/tabler.js
@@ -1,6 +1,7 @@
//Vendor
import "./src/autosize"
+import "./src/countup"
import "./src/input-mask"
import "./src/dropdown"
import "./src/tooltip"
diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json
index 58db80519..1ec170fe5 100644
--- a/src/pages/_data/libs.json
+++ b/src/pages/_data/libs.json
@@ -9,7 +9,7 @@
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
"apexcharts": "apexcharts/dist/apexcharts.min.js",
"nouislider": "nouislider/dist/nouislider.min.js",
- "countup": "countup.js/dist/countUp.js",
+ "countup": "countup.js/dist/countUp.umd.js",
"lists": "list.js/dist/list.min.js",
"masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",