diff --git a/site/content/docs/standard/integrations/angular/index.html b/site/content/docs/standard/integrations/angular/index.html
index 4ba5f176d..25f2ff293 100644
--- a/site/content/docs/standard/integrations/angular/index.html
+++ b/site/content/docs/standard/integrations/angular/index.html
@@ -166,7 +166,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -189,6 +190,22 @@ <h2 class="text-lg font-bold">Step 3</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
+  <h2 class="text-lg font-bold">Step 4</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>index.html</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "index.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
   <h2 class="text-lg font-bold">Step 4</h2>
   <p>Install Tailwind Elements.</p>
 
@@ -209,15 +226,39 @@ <h2 class="text-lg font-bold">Step 5</h2>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
+    {{< twsnippet/wrapper "app.component.ts, app.component.html" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input, initTE } from "tw-elements";
-
-        ngOnInit() {
-          initTE({ Datepicker, Input });
-        }
+        import { Component } from '@angular/core';
+        import { Carousel, Dropdown, initTE } from 'tw-elements';
+        
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrls: ['./app.component.css'],
+        })
+        export class AppComponent {
+          ngOnInit() {
+            initTE({ Carousel, Dropdown });
+          }
+        }        
         {{< /twsnippet/code >}}
-        {{< /twsnippet/wrapper >}}
+        {{< twsnippet/code lang="HTML" >}}
+    <div
+      class="relative mb-3"
+      data-te-datepicker-init
+      data-te-input-wrapper-init>
+      <input
+        type="text"
+        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        for="floatingInput"
+        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+        >Select a date</label
+      >
+    </div>
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
   </div>
 </section>
 <!--/Creating and configuring Tailwind & Tailwind Elements-->
@@ -240,35 +281,52 @@ <h2 class="text-lg font-bold">Step 5</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Import components which are you intend to use.</p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize components in lifecycle hook.</p>
+  <p class="mb-5">
+    Import components which are you intend to use and initialize components in
+    lifecycle hook.
+  </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        ngOnInit() {
-          const myInput = new Input(document.getElementById("myDatepicker"));
-          const options = {
-            format: "dd-mm-yyyy",
-          };
-          const myDatepicker = new Datepicker(
-            document.getElementById("myDatepicker"),
-            options
-          );
-        };
-      {{< /twsnippet/code >}}
+    {{< twsnippet/wrapper "app.component.ts, app.component.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="JavaScript" >}}
+        import { Component } from '@angular/core';
+        import { Carousel, Dropdown, initTE } from 'tw-elements';
+        
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrls: ['./app.component.css'],
+        })
+        export class AppComponent {
+          ngOnInit() {
+            const myInput = new Input(document.getElementById("myDatepicker"));
+            const options = {
+              format: "dd-mm-yyyy",
+            };
+            const myDatepicker = new Datepicker(
+              document.getElementById("myDatepicker"),
+              options
+            );
+          }
+        }        
+        {{< /twsnippet/code >}}
+        {{< twsnippet/code lang="HTML" >}}
+    <div
+      class="relative mb-3"
+      data-te-datepicker-init
+      data-te-input-wrapper-init>
+      <input
+        type="text"
+        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        for="floatingInput"
+        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+        >Select a date</label
+      >
+    </div>
+    {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>
diff --git a/site/content/docs/standard/integrations/django/index.html b/site/content/docs/standard/integrations/django/index.html
index 21cb7d5c6..b2694c236 100644
--- a/site/content/docs/standard/integrations/django/index.html
+++ b/site/content/docs/standard/integrations/django/index.html
@@ -216,7 +216,7 @@ <h2 class="text-lg font-bold">Step 2</h2>
               extend: {},
             },
             darkMode: "class",
-            plugins: [require("tw-elements/dist/plugin")],
+            plugins: [require("tw-elements/dist/plugin.cjs")],
           };
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -292,6 +292,22 @@ <h2 class="text-lg font-bold">Step 6</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 7</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>home.html</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "home.html" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 8</h2>
   <p class="mb-5">
     Create <code>views.py</code> file in <code>mysite</code> folder and put in
     there render for your first / home page.
@@ -309,7 +325,7 @@ <h2 class="text-lg font-bold">Step 7</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 8</h2>
+  <h2 class="text-lg font-bold">Step 9</h2>
   <p class="mb-5">
     Then in <code>urls.py</code> file (located in <code>mysite</code> folder)
     add import newly created <code>views.py</code> file and attach urls for
diff --git a/site/content/docs/standard/integrations/express/index.html b/site/content/docs/standard/integrations/express/index.html
index d0de02c90..acb887afb 100644
--- a/site/content/docs/standard/integrations/express/index.html
+++ b/site/content/docs/standard/integrations/express/index.html
@@ -176,7 +176,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
             "./src/**/*.{html,js,css}",
             "./node_modules/tw-elements/dist/js/**/*.js",
           ],
-          plugins: [require("tw-elements/dist/plugin")]
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
           }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -242,6 +243,22 @@ <h2 class="text-lg font-bold">Step 6</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 7</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>index.ejs</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "index.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 8</h2>
   <p class="mb-5">
     In <code>index.ejs</code> file, at the end of <code>body</code> link script
     for Tailwind Elements JS file.
diff --git a/site/content/docs/standard/integrations/laravel/index.html b/site/content/docs/standard/integrations/laravel/index.html
index 1967db23b..2cadcc902 100644
--- a/site/content/docs/standard/integrations/laravel/index.html
+++ b/site/content/docs/standard/integrations/laravel/index.html
@@ -130,7 +130,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
           theme: {
               extend: {},
           },
-          plugins: [require("tw-elements/dist/plugin")]
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
           }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -162,8 +163,8 @@ <h2 class="text-lg font-bold">Step 4</h2>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+    {{< twsnippet/wrapper "welcome.blade.php" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
           @vite('resources/css/app.css')
           @vite('resources/js/app.js')
         {{< /twsnippet/code >}}
@@ -171,6 +172,22 @@ <h2 class="text-lg font-bold">Step 4</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 5</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>welcome.blade.php</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "welcome.blade.php" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">Install Tailwind Elements.</p>
 
   <div class="pb-4">
@@ -182,7 +199,7 @@ <h2 class="text-lg font-bold">Step 5</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 6</h2>
+  <h2 class="text-lg font-bold">Step 7</h2>
   <p class="mb-5">
     Import components which are you intend to use and necessary function
     <code>initTE</code> in <code>app.js</code> file which is located in
@@ -220,12 +237,14 @@ <h2 class="text-lg font-bold">Step 6</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Initialize components.</p>
+  <p class="mb-5">Import and initialize components.</p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "app.js" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
+          import { Datepicker, Input } from "tw-elements";
+
           const myInput = new Input(document.getElementById("myDatepicker"));
           const options = {
             format: "dd-mm-yyyy",
diff --git a/site/content/docs/standard/integrations/next/index.html b/site/content/docs/standard/integrations/next/index.html
index 475496994..7ee405d1a 100644
--- a/site/content/docs/standard/integrations/next/index.html
+++ b/site/content/docs/standard/integrations/next/index.html
@@ -134,7 +134,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -158,6 +159,36 @@ <h2 class="text-lg font-bold">Step 3</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 4</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>_app.js</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="JavaScript" >}}
+        import "@/styles/globals.css";
+        import { Roboto } from "next/font/google";
+        
+        const roboto = Roboto({ weight: "400", subsets: ["latin"] });
+        
+        export default function App({ Component, pageProps }) {
+          return (
+            <>
+              <style jsx global>{`
+                html {
+                  font-family: ${roboto.style.fontFamily};
+                }
+              `}</style>
+              <Component {...pageProps} />
+            </>
+          );
+        }        
+        {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 5</h2>
   <p class="mb-5">Install Tailwind Elements.</p>
 
   <div class="pb-4">
@@ -169,31 +200,66 @@ <h2 class="text-lg font-bold">Step 4</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 5</h2>
+  <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">
-    Create standalone file and import components which are you intend to use and
-    necessary function
-    <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
+    Import globally in <code>_app.js</code> Tailiwind Elements CSS file (you could do it also in specific component which are using TE).
   </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Component.js" "" "mobile" >}}
+    {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
-          import { useEffect } from "react";
-          import { Datepicker, Input, initTE } from "tw-elements";
+        import "tw-elements/dist/css/tw-elements.min.css";
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 7</h2>
+  <p class="mb-5">
+    Create standalone file with name of your component (for example <code>MyDatepicker.js</code> in <code>src/pages</code> directory) and import TE components which are you intend to use. Also include necessary function <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
+  </p>
 
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "MyDatepicker.js" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="JavaScript" >}}
+        import { Datepicker, Input, initTE } from "tw-elements";
+        import { useEffect } from "react";
+        
+        const MyDatepicker = () => {
           useEffect(() => {
             initTE({ Datepicker, Input });
           }, []);
+        
+          return (
+            <div
+              className="relative mb-3"
+              data-te-datepicker-init
+              data-te-input-wrapper-init
+            >
+              <input
+                type="text"
+                className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+                placeholder="Select a date"
+              />
+              <label
+                htmlFor="floatingInput"
+                className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+              >
+                Select a date
+              </label>
+            </div>
+          );
+        };
+        
+        export default MyDatepicker;        
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 6</h2>
+  <h2 class="text-lg font-bold">Step 8</h2>
   <p class="mb-5">
-    Import client-side component wrapping it into dynamic import with
-    <code>ssr</code> object set to <code>false</code>.
+    Import (for example in <code>index.js</code>) newly created component wrapping it into <code>dynamic</code> import with <code>ssr</code> object set to <code>false</code>.
   </p>
 
   <div class="pb-4">
@@ -202,9 +268,17 @@ <h2 class="text-lg font-bold">Step 6</h2>
       {{< twsnippet/code active=true lang="JavaScript" >}}
       import dynamic from "next/dynamic";
 
-      const Component = dynamic(() => import("./component"), {
-        ssr: false,
-      });
+      const DynamicDatepicker = dynamic(() => import("./MyDatepicker"), { ssr: false });
+      
+      const Home = () => {
+        return (
+          <>
+            <DynamicDatepicker />
+          </>
+        );
+      };
+
+      export default Home;
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
@@ -231,26 +305,16 @@ <h2 class="text-lg font-bold">Step 6</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Import components which are you intend to use.</p>
+  <p class="mb-5">Import components which are you intend to use and initialize components in lifecycle hook.</p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Component.js" "" "mobile" >}}
+    {{< twsnippet/wrapper "MyDatepicker.js" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input, initTE } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize components in lifecycle hook.</p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Component.js" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { useEffect } from "react";
-
+      import { Datepicker, Input } from "tw-elements";
+      import { useEffect } from "react";
+      
+      const MyDatepicker = () => {
         useEffect(() => {
           const myInput = new Input(document.getElementById("myDatepicker"));
           const options = {
@@ -261,6 +325,28 @@ <h2 class="text-lg font-bold">Step 2</h2>
             options
           );
         }, []);
+      
+        return (
+          <div
+            className="relative mb-3"
+            id="myDatepicker"
+          >
+            <input
+              type="text"
+              className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+              placeholder="Select a date"
+            />
+            <label
+              htmlFor="floatingInput"
+              className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+            >
+              Select a date
+            </label>
+          </div>
+        );
+      };
+      
+      export default MyDatepicker;
       {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
diff --git a/site/content/docs/standard/integrations/nuxt/index.html b/site/content/docs/standard/integrations/nuxt/index.html
index 034d94def..e53e6a7f9 100644
--- a/site/content/docs/standard/integrations/nuxt/index.html
+++ b/site/content/docs/standard/integrations/nuxt/index.html
@@ -159,7 +159,8 @@ <h2 class="text-lg font-bold">Step 3</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -182,6 +183,30 @@ <h2 class="text-lg font-bold">Step 4</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
+  <h2 class="text-lg font-bold">Step 5</h2>
+  <p class="mb-5">
+    Attach the Roboto font in <code>nuxt.config.js/ts</code> by creating an
+    <code>app</code> object.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "nuxt.config.js" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="JavaScript" >}}
+          app: {
+            head: {
+              link: [
+                {
+                  rel: "stylesheet",
+                  href: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap",
+                },
+              ],
+            },
+          },
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+  </div>
+
   <h2 class="text-lg font-bold">Step 5</h2>
   <p class="mb-5">Install Tailwind Elements.</p>
 
@@ -196,15 +221,50 @@ <h2 class="text-lg font-bold">Step 5</h2>
 
   <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">
-    Create standalone file and import components which are you intend to use and
-    necessary function
-    <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
+    Import globally in <code>app.vue</code> Tailiwind Elements CSS file (you
+    could do it also in specific component which are using TE).
   </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Component.vue" "" "mobile" >}}
+    {{< twsnippet/wrapper "app.vue" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
+        import "tw-elements/dist/css/tw-elements.min.css";
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 7</h2>
+  <p class="mb-5">
+    Create standalone file with name of your component (for example
+    <code>Datepicker.vue</code> in <code>src/components</code> directory) and
+    import TE components which are you intend to use. Also include necessary
+    function <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle
+    method.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "template, script" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="HTML" >}}
+    <template>
+      <div
+        class="relative mb-3"
+        data-te-datepicker-init
+        data-te-input-wrapper-init>
+        <input
+          type="text"
+          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+          placeholder="Select a date" />
+        <label
+          for="floatingInput"
+          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+          >Select a date</label
+        >
+      </div>
+    </template>
+    {{< /twsnippet/code >}}
+    {{< twsnippet/code lang="HTML" >}}
     <script setup>
       import { onMounted } from "vue";
       import { Datepicker, Input, initTE } from "tw-elements";
@@ -217,26 +277,27 @@ <h2 class="text-lg font-bold">Step 6</h2>
     {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 7</h2>
+  <h2 class="text-lg font-bold">Step 8</h2>
   <p class="mb-5">
-    Import client-side component wrapping it into
-    <code>ClientOnly</code> element.
+    Import (for example in <code>app.vue</code>) newly created component
+    wrapping it into <code>ClientOnly</code> element.
   </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "app.vue" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-    <script setup>
-      import Component from "./Component.vue";
-    </script>
-
+    {{< twsnippet/wrapper "template, script" "" "mobile" >}}
+      {{< twsnippet/code active=true lang="HTML" >}}
     <template>
       <ClientOnly>
-        <Component />
+        <Datepicker />
       </ClientOnly>
     </template>
     {{< /twsnippet/code >}}
+    {{< twsnippet/code lang="HTML" >}}
+    <script setup>
+      import Datepicker from "./components/Datepicker.vue";
+    </script>
+    {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>
@@ -262,37 +323,46 @@ <h2 class="text-lg font-bold">Step 7</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Import components which are you intend to use.</p>
+  <p class="mb-5">
+    Import components which are you intend to use and initialize them in
+    lifecycle method.
+  </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input, initTE } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize components in lifecycle hook.</p>
+    {{< twsnippet/wrapper "template, script" "" "mobile" >}}
+      {{< twsnippet/code active=true lang="HTML" >}}
+    <template>
+      <div class="relative mb-3" id="myDatepicker">
+        <input
+          type="text"
+          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+          placeholder="Select a date" />
+        <label
+          for="floatingInput"
+          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+          >Select a date</label
+        >
+      </div>
+    </template>
+    {{< /twsnippet/code >}}
+    {{< twsnippet/code lang="HTML" >}}
+    <script setup>
+      import { onMounted } from "vue";
+      import { Datepicker, Input } from "tw-elements";
 
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { onMounted } from "vue";
-
-        onMounted(() => {
-          const myInput = new Input(document.getElementById("myDatepicker"));
-          const options = {
-            format: "dd-mm-yyyy",
-          };
-          const myDatepicker = new te.Datepicker(
-            document.getElementById("myDatepicker"),
-            options
-          );
-        });
-      {{< /twsnippet/code >}}
+      onMounted(() => {
+        const myInput = new Input(document.getElementById("myDatepicker"));
+        const options = {
+          format: "dd-mm-yyyy",
+        };
+        const myDatepicker = new Datepicker(
+          document.getElementById("myDatepicker"),
+          options
+        );
+      });
+    </script>
+    {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>
diff --git a/site/content/docs/standard/integrations/react/index.html b/site/content/docs/standard/integrations/react/index.html
index 11738d49b..36bc06711 100644
--- a/site/content/docs/standard/integrations/react/index.html
+++ b/site/content/docs/standard/integrations/react/index.html
@@ -155,7 +155,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -179,6 +180,22 @@ <h2 class="text-lg font-bold">Step 3</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 4</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>index.html</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "index.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 5</h2>
   <p class="mb-5">Install Tailwind Elements.</p>
 
   <div class="pb-4">
@@ -190,7 +207,7 @@ <h2 class="text-lg font-bold">Step 4</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 5</h2>
+  <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">
     Import components which are you intend to use and necessary function
     <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
@@ -200,14 +217,32 @@ <h2 class="text-lg font-bold">Step 5</h2>
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
-          import { useEffect } from "react";
-          import { Datepicker, Input, initTE } from "tw-elements";
-
+        import React, { useEffect } from "react";
+        import { Datepicker, Input, initTE } from "tw-elements";
+        
+        const App = () => {
           useEffect(() => {
             initTE({ Datepicker, Input });
           }, []);
-        {{< /twsnippet/code >}}
-        {{< /twsnippet/wrapper >}}
+        
+          return (
+    <div
+      className="relative mb-3"
+      data-te-datepicker-init
+      data-te-input-wrapper-init>
+      <input
+        type="text"
+        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        for="floatingInput"
+        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+        >Select a date</label
+      >
+    </div>
+    ); }; export default App;
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
   </div>
 </section>
 <!--/Creating and configuring Tailwind & Tailwind Elements-->
@@ -230,26 +265,19 @@ <h2 class="text-lg font-bold">Step 5</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Import components which are you intend to use.</p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize components in lifecycle hook.</p>
+  <p class="mb-5">
+    Import components which are you intend to use and initialize components in
+    lifecycle hook.
+  </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
         import { useEffect } from "react";
+        import { Datepicker, Input } from "tw-elements";
 
+        const App = () => {
         useEffect(() => {
           const myInput = new Input(document.getElementById("myDatepicker"));
           const options = {
@@ -260,7 +288,24 @@ <h2 class="text-lg font-bold">Step 2</h2>
             options
           );
         }, []);
-      {{< /twsnippet/code >}}
+
+        return (
+    <div
+      className="relative mb-3"
+      data-te-datepicker-init
+      data-te-input-wrapper-init>
+      <input
+        type="text"
+        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        for="floatingInput"
+        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+        >Select a date</label
+      >
+    </div>
+    ); }; export default App;
+    {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>
diff --git a/site/content/docs/standard/integrations/remix/index.html b/site/content/docs/standard/integrations/remix/index.html
index 4381737ba..0b3892af3 100644
--- a/site/content/docs/standard/integrations/remix/index.html
+++ b/site/content/docs/standard/integrations/remix/index.html
@@ -147,7 +147,8 @@ <h2 class="text-lg font-bold">Step 3</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -175,6 +176,7 @@ <h2 class="text-lg font-bold">Step 4</h2>
     Import the newly-created <code>./app/tailwind.css</code> file in your
     <code>./app/root.jsx</code> file.
   </p>
+  <p class="mb-5">Also attach the <code>Roboto</code> font.</p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
@@ -184,6 +186,7 @@ <h2 class="text-lg font-bold">Step 4</h2>
 
         export const links: LinksFunction = () => [
           { rel: "stylesheet", href: stylesheet },
+          { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" }
         ];
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -203,27 +206,44 @@ <h2 class="text-lg font-bold">Step 5</h2>
 
   <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">
-    Create standalone component which will has a name with
-    <code>Component.client.jsx</code>. It shows framework that should not render
-    this component in a server-side mode.
-  </p>
-  <p class="mb-5">
-    Import components which are you intend to use and necessary function
-    <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
+    Create standalone file with name of your component (for example
+    <code>MyDatepicker.client.jsx</code> (it shows framework that should not
+    render this component in a server-side mode) in
+    <code>app/components</code> directory) and import TE components which are
+    you intend to use. Also include necessary function <code>initTE</code>.
+    Initialize <code>initTE</code> in a lifecycle method.
   </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Component.client.jsx" "" "mobile" >}}
+    {{< twsnippet/wrapper "MyDatepicker.client.jsx" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
-          import { useEffect } from "react";
-          import { Datepicker, Input, initTE } from "tw-elements";
-
+        import { useEffect } from "react";
+        import { Datepicker, Input, initTE } from "tw-elements";
+        
+        const MyDatepicker = () => {
           useEffect(() => {
             initTE({ Datepicker, Input });
           }, []);
-        {{< /twsnippet/code >}}
-        {{< /twsnippet/wrapper >}}
+        
+          return (
+    <div
+      class="relative mb-3"
+      data-te-datepicker-init
+      data-te-input-wrapper-init>
+      <input
+        type="text"
+        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        htmlFor="floatingInput"
+        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary">
+        Select a date
+      </label>
+    </div>
+    ); }; export default MyDatepicker;
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
   </div>
 
   <h2 class="text-lg font-bold">Step 7</h2>
@@ -239,20 +259,23 @@ <h2 class="text-lg font-bold">Step 7</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 8</h2>
-  <p class="mb-5">Import your client-side component.</p>
+  <p class="mb-5">
+    Import (for example in <code>index.js</code>) newly created component
+    wrapping it into <code>ClientOnly</code> element.
+  </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "root.jsx" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
       import { ClientOnly } from "remix-utils";
-      import Component from "./components/Component.client";
+      import MyDatepicker from "./components/MyDatepicker.client";
 
       ...
       export default function App() {
         return (
           ...
-    <ClientOnly fallback="{null}">{() => <Component />}</ClientOnly>
+    <ClientOnly fallback="{null}">{() => <MyDatepicker />}</ClientOnly>
     ); }
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
@@ -278,37 +301,44 @@ <h2 class="text-lg font-bold">Step 8</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Import components which are you intend to use.</p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Component.client.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize component in lifecycle hook.</p>
+  <p class="mb-5">
+    Import components which are you intend to use and iniitialize them in
+    lifecycle hook.
+  </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Component.client.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { useEffect } from "react";
-
-        useEffect(() => {
-          const myInput = new Input(document.getElementById("myDatepicker"));
-          const options = {
-            format: "dd-mm-yyyy",
-          };
-          const myDatepicker = new Datepicker(
-            document.getElementById("myDatepicker"),
-            options
-          );
-        }, []);
-      {{< /twsnippet/code >}}
+    {{< twsnippet/wrapper "MyDatepicker.client.jsx" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="JavaScript" >}}
+    import { useEffect } from "react";
+    import { Datepicker, Input } from "tw-elements";
+    
+    const MyDatepicker = () => {
+      useEffect(() => {
+        const myInput = new Input(document.getElementById("myDatepicker"));
+        const options = {
+          format: "dd-mm-yyyy",
+        };
+        const myDatepicker = new Datepicker(
+          document.getElementById("myDatepicker"),
+          options
+        );
+      }, []);
+    
+      return (
+    <div className="relative mb-3" id="myDatepicker">
+      <input
+        type="text"
+        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        htmlFor="floatingInput"
+        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary">
+        Select a date
+      </label>
+    </div>
+    ); }; export default MyDatepicker;
+    {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>
diff --git a/site/content/docs/standard/integrations/solid/index.html b/site/content/docs/standard/integrations/solid/index.html
index 7c920a98a..8bed0560b 100644
--- a/site/content/docs/standard/integrations/solid/index.html
+++ b/site/content/docs/standard/integrations/solid/index.html
@@ -136,7 +136,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -160,6 +161,22 @@ <h2 class="text-lg font-bold">Step 3</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 4</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>index.html</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "index.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 5</h2>
   <p class="mb-5">Install Tailwind Elements.</p>
 
   <div class="pb-4">
@@ -171,7 +188,7 @@ <h2 class="text-lg font-bold">Step 4</h2>
       {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 5</h2>
+  <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">
     Import components which are you intend to use and necessary function
     <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
@@ -181,12 +198,38 @@ <h2 class="text-lg font-bold">Step 5</h2>
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
-          import { onMount } from "solid-js";
-          import { Datepicker, Input, initTE } from "tw-elements";
-
+        import { onMount } from "solid-js";
+        import { Datepicker, Input, initTE } from "tw-elements";
+        
+        const App = () => {
           onMount(() => {
             initTE({ Datepicker, Input });
           });
+        
+          return (
+            <>
+              <div
+                class="relative mb-3"
+                data-te-datepicker-init
+                data-te-input-wrapper-init
+              >
+                <input
+                  type="text"
+                  class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+                  placeholder="Select a date"
+                />
+                <label
+                  for="floatingInput"
+                  class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+                >
+                  Select a date
+                </label>
+              </div>
+            </>
+          );
+        };
+        
+        export default App;        
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
   </div>
@@ -217,20 +260,10 @@ <h2 class="text-lg font-bold">Step 1</h2>
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input, initTE } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize components in lifecycle hook.</p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { onMount } from "solid-js";
-
+      import { onMount } from "solid-js";
+      import { Datepicker, Input } from "tw-elements";
+      
+      const App = () => {
         onMount(() => {
           const myInput = new Input(document.getElementById("myDatepicker"));
           const options = {
@@ -241,6 +274,30 @@ <h2 class="text-lg font-bold">Step 2</h2>
             options
           );
         });
+      
+        return (
+          <>
+            <div
+              class="relative mb-3"
+              id="myDatepicker"
+            >
+              <input
+                type="text"
+                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+                placeholder="Select a date"
+              />
+              <label
+                for="floatingInput"
+                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+              >
+                Select a date
+              </label>
+            </div>
+          </>
+        );
+      };
+      
+      export default App;      
       {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
diff --git a/site/content/docs/standard/integrations/svelte/index.html b/site/content/docs/standard/integrations/svelte/index.html
index e086dc46f..697e873f6 100644
--- a/site/content/docs/standard/integrations/svelte/index.html
+++ b/site/content/docs/standard/integrations/svelte/index.html
@@ -141,7 +141,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -192,6 +193,22 @@ <h2 class="text-lg font-bold">Step 4</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 5</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>app.html</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "app.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">
     Create a <code>./src/routes/+layout.svelte</code> file and import the
     newly-created <code>app.css</code> file.
@@ -210,7 +227,7 @@ <h2 class="text-lg font-bold">Step 5</h2>
     {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 6</h2>
+  <h2 class="text-lg font-bold">Step 7</h2>
   <p class="mb-5">Install Tailwind Elements.</p>
 
   <div class="pb-4">
@@ -222,9 +239,10 @@ <h2 class="text-lg font-bold">Step 6</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 7</h2>
+  <h2 class="text-lg font-bold">Step 8</h2>
   <p class="mb-5">
-    Import components which are you intend to use and necessary function
+    Create file <code>+page.svelte</code> in <code>src</code> directory and then
+    import components which are you intend to use and necessary function
     <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
   </p>
 
@@ -232,14 +250,31 @@ <h2 class="text-lg font-bold">Step 7</h2>
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
-          import { onMount } from "svelte";
-          import { Datepicker, Input, initTE } from "tw-elements";
+    <script>
+      import { onMount } from "svelte";
+      import { Datepicker, Input, initTE } from "tw-elements";
 
-          onMount(() => {
-            initTE({ Datepicker, Input });
-          });
-        {{< /twsnippet/code >}}
-        {{< /twsnippet/wrapper >}}
+      onMount(() => {
+        initTE({ Datepicker, Input });
+      });
+    </script>
+
+    <div
+      class="relative mb-3"
+      data-te-datepicker-init
+      data-te-input-wrapper-init>
+      <input
+        type="text"
+        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        for="floatingInput"
+        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+        >Select a date</label
+      >
+    </div>
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
   </div>
 </section>
 <!--/Creating and configuring Tailwind & Tailwind Elements-->
@@ -264,37 +299,42 @@ <h2 class="text-lg font-bold">Step 7</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Import library.</p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize components in lifecycle hook.</p>
+  <p class="mb-5">
+    Import library and initialize components in lifecycle method.
+  </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { onMount } from "svelte";
+    <script>
+      import { onMount } from "svelte";
+      import { Datepicker, Input } from "tw-elements";
+
+      onMount(() => {
+        const myInput = new Input(document.getElementById("myDatepicker"));
+        const options = {
+          format: "dd-mm-yyyy",
+        };
+        const myDatepicker = new Datepicker(
+          document.getElementById("myDatepicker"),
+          options
+        );
+      });
+    </script>
 
-        onMount(() => {
-          const myInput = new Input(document.getElementById("myDatepicker"));
-          const options = {
-            format: "dd-mm-yyyy",
-          };
-          const myDatepicker = new Datepicker(
-            document.getElementById("myDatepicker"),
-            options
-          );
-        });
-      {{< /twsnippet/code >}}
+    <div class="relative mb-3" id="myDatepicker">
+      <input
+        type="text"
+        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        for="floatingInput"
+        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+        >Select a date</label
+      >
+    </div>
+    {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>
diff --git a/site/content/docs/standard/integrations/vue/index.html b/site/content/docs/standard/integrations/vue/index.html
index f67d8034c..3e8d85d6b 100644
--- a/site/content/docs/standard/integrations/vue/index.html
+++ b/site/content/docs/standard/integrations/vue/index.html
@@ -131,7 +131,7 @@ <h2 class="mt-5 text-lg font-bold">Step 1</h2>
     {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
         {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
         npm install -D tailwindcss postcss autoprefixer
-        npx tailwindcss init
+        npx tailwindcss init -p
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
   </div>
@@ -156,7 +156,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -180,6 +181,22 @@ <h2 class="text-lg font-bold">Step 3</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 4</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>index.html</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "index.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 5</h2>
   <p class="mb-5">Install Tailwind Elements.</p>
 
   <div class="pb-4">
@@ -191,7 +208,7 @@ <h2 class="text-lg font-bold">Step 4</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 5</h2>
+  <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">
     Import components which are you intend to use and necessary function
     <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
@@ -199,16 +216,36 @@ <h2 class="text-lg font-bold">Step 5</h2>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
-          import { onMounted } from "vue";
-          import { Datepicker, Input, initTE } from "tw-elements";
+    {{< twsnippet/wrapper "script,template" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <script>
+      import { onMounted } from "vue";
+      import { Datepicker, Input, initTE } from "tw-elements";
 
-          onMounted(() => {
-            initTE({ Datepicker, Input });
-          });
-        {{< /twsnippet/code >}}
-        {{< /twsnippet/wrapper >}}
+      onMounted(() => {
+        initTE({ Datepicker, Input });
+      });
+    </script>
+    {{< /twsnippet/code >}}
+    {{< twsnippet/code lang="HTML" >}}
+    <template>
+      <div
+        class="relative mb-3"
+        data-te-datepicker-init
+        data-te-input-wrapper-init>
+        <input
+          type="text"
+          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+          placeholder="Select a date" />
+        <label
+          for="floatingInput"
+          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+          >Select a date</label
+        >
+      </div>
+    </template>
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
   </div>
 </section>
 <!--/Creating and configuring Tailwind & Tailwind Elements-->
@@ -233,37 +270,45 @@ <h2 class="text-lg font-bold">Step 5</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">mport components which are you intend to use.</p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize components in lifecycle hook.</p>
+  <p class="mb-5">
+    Import components which are you intend to use and initialize them in
+    lifecycle hook.
+  </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "App.vue" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { onMounted } from "vue";
+    {{< twsnippet/wrapper "script,template" "" "mobile" >}}
+      {{< twsnippet/code active=true lang="HTML" >}}
+    <script>
+      import { onMounted } from "vue";
 
-        onMounted(() => {
-          const myInput = new Input(document.getElementById("myDatepicker"));
-          const options = {
-            format: "dd-mm-yyyy",
-          };
-          const myDatepicker = new Datepicker(
-            document.getElementById("myDatepicker"),
-            options
-          );
-        });
-      {{< /twsnippet/code >}}
+      onMounted(() => {
+        const myInput = new Input(document.getElementById("myDatepicker"));
+        const options = {
+          format: "dd-mm-yyyy",
+        };
+        const myDatepicker = new Datepicker(
+          document.getElementById("myDatepicker"),
+          options
+        );
+      });
+    </script>
+    {{< /twsnippet/code >}}
+    {{< twsnippet/code lang="HTML" >}}
+    <template>
+      <div class="relative mb-3">
+        <input
+          type="text"
+          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+          placeholder="Select a date" />
+        <label
+          for="floatingInput"
+          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+          >Select a date</label
+        >
+      </div>
+    </template>
+    {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>