diff --git a/docs/package.json b/docs/package.json
index f6e866a..4124090 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -16,6 +16,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^2.7.0",
+    "driver.js": "1.1.1-next.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-fast-marquee": "^1.6.0",
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index 57a873a..e785e94 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   astro:
     specifier: ^2.7.0
     version: 2.7.0
+  driver.js:
+    specifier: 1.1.1-next.0
+    version: 1.1.1-next.0
   react:
     specifier: ^18.0.0
     version: 18.2.0
@@ -1373,6 +1376,10 @@ packages:
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
+  /driver.js@1.1.1-next.0:
+    resolution: {integrity: sha512-hXBZzvcVsU0MlNozeQbp3S49fUuPaKTDVNQe2hKK57nQCmr5WgCE3QVi2IgDMeEI6a+z7UDpbRnCHJt+Lt/NkQ==}
+    dev: false
+
   /dset@3.1.2:
     resolution: {integrity: sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==}
     engines: {node: '>=4'}
diff --git a/docs/src/components/examples/SimpleHighlight.tsx b/docs/src/components/examples/SimpleHighlight.tsx
new file mode 100644
index 0000000..94429b6
--- /dev/null
+++ b/docs/src/components/examples/SimpleHighlight.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import type { DriveStep } from "driver.js";
+
+type SimpleHighlightProps = {
+  popover: DriveStep.Popover;
+}
+
+export function SimpleHighlight() {
+  useEffect(() => {
+    console.log('in browser');
+  }, []);
+  return (
+    <button onClick={() => alert('sup')} className='w-full rounded-md bg-black p-2 text-white'>Highlight Something</button>
+  );
+}
\ No newline at end of file
diff --git a/docs/src/content/guides/basic-usage.mdx b/docs/src/content/guides/basic-usage.mdx
index 76f677f..5d97d8a 100644
--- a/docs/src/content/guides/basic-usage.mdx
+++ b/docs/src/content/guides/basic-usage.mdx
@@ -4,8 +4,11 @@ groupTitle: "Introduction"
 sort: 2
 ---
 
+import { SimpleHighlight } from "../../components/examples/SimpleHighlight.tsx";
+
 Once installed, you can import and start using the library. Given below is a simple example of how to highlight a single element.
 
+<div>
 ```js
 import Driver from 'driver.js';
 import 'driver.js/dist/driver.min.css';
@@ -19,6 +22,5 @@ driver.highlight({
   },
 });
 ```
-
-<script src="https://cdn.jsdelivr.net/npm/driver.js@1.1.0-next.0/dist/driver.iife.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.1.0-next.0/dist/style.css"/>
\ No newline at end of file
+<SimpleHighlight client:load />
+</div>
\ No newline at end of file
diff --git a/docs/src/content/guides/installation.mdx b/docs/src/content/guides/installation.mdx
index 2f8fbee..a3e540e 100644
--- a/docs/src/content/guides/installation.mdx
+++ b/docs/src/content/guides/installation.mdx
@@ -4,6 +4,8 @@ groupTitle: "Introduction"
 sort: 1
 ---
 
+import { SimpleHighlight } from "../../components/examples/SimpleHighlight.js";
+
 Run one of the following commands to install the package:
 
 ```bash
@@ -20,11 +22,10 @@ yarn add driver.js
 Alternatively, you can use CDN and include the script in your HTML file:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.0-next.0/dist/driver.js.iife.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.0-next.0/dist/style.css"/>
+<script src="https://cdn.jsdelivr.net/npm/driver.js@1.1.1-next.0/dist/driver.js.iife.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.1.1-next.0/dist/style.css"/>
 ```
 
-
 ## Start Using
 Once installed, you can import the package in your project. The following example shows how to highlight an element:
 
@@ -42,4 +43,21 @@ driver.highlight({
 });
 ```
 
+### Note on CDN
+
+If you are using the CDN, you will have to use the package from the `window` object:
+
+```js
+const Driver = window.driver.js.driver;
+
+const driver = new Driver();
+driver.highlight({
+  element: "#some-element",
+  popover: {
+    title: "Title",
+    description: "Description"
+  }
+});
+```
+
 Continue reading the [Getting Started](/docs/basic-usage) guide to learn more about the package.
\ No newline at end of file
diff --git a/docs/src/layouts/DocsLayout.astro b/docs/src/layouts/DocsLayout.astro
index 3d52212..b2d1712 100644
--- a/docs/src/layouts/DocsLayout.astro
+++ b/docs/src/layouts/DocsLayout.astro
@@ -22,7 +22,7 @@ const { groupTitle, sort, title } = guide.data;
     <Sidebar activePath={`/docs/${guide.slug}`} />
     <div class="flex-1 px-2 py-6">
       <Container>
-        <div class="prose lg:proxe-xl mb-24">
+        <div class="prose lg:proxe-xl mb-24 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-500 prose-p:before:content-['']">
           <slot />
         </div>
       </Container>
diff --git a/package.json b/package.json
index 23638bb..dbcde2c 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "version": "1.1.1-next.0",
   "main": "./dist/driver.js.cjs",
   "module": "./dist/driver.js.mjs",
+  "types": "./dist/driver.js.d.ts",
   "exports": {
     ".": {
       "require": "./dist/driver.js.cjs",