diff --git a/package.json b/package.json
index 1dfaeb2..b23b8e9 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "gsap": "^3.5.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0-beta.11",
+    "stats.js": "0.17.0",
     "three": "^0.127",
     "vite": "^2.1.5",
     "vue": "^3.0.11"
diff --git a/src/components/misc/Stats.js b/src/components/misc/Stats.js
new file mode 100644
index 0000000..b71ca3e
--- /dev/null
+++ b/src/components/misc/Stats.js
@@ -0,0 +1,46 @@
+import Stats from 'stats.js';
+
+export default {
+  props: {
+    noSetup: { type: Boolean, default: false }
+  },
+  emits: ['created'],
+  inject: ['rendererComponent'],
+  setup({ noSetup }) {
+    const stats = new Stats();
+    if (!noSetup) {
+      stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+      document.body.appendChild(stats.dom);
+    }
+    return { stats };
+  },
+  mounted() {
+    if (!this.noSetup) {
+      this.rendererComponent.onBeforeRender(this.begin);
+      this.rendererComponent.onAfterRender(this.end);
+    }
+    this.$emit('created', { stats: this.stats });
+  },
+  methods: {
+    begin() {
+      if (this.stats) {
+        this.stats.begin();
+      }
+    },
+    end() {
+      if (this.stats) {
+        this.stats.end();
+      }
+    }
+  },
+  unmounted() {
+    if (this.stats && this.stats.dom) {
+      this.stats.dom.parentElement.removeChild(this.stats.dom);
+    }
+    this.rendererComponent.offBeforeRender(this.begin);
+    this.rendererComponent.offAfterRender(this.end);
+  },
+  render() {
+    return this.$slots.default ? this.$slots.default() : [];
+  },
+};
\ No newline at end of file