diff --git a/docs/components/compile/compile.mdx b/docs/components/compile/compile.mdx
index b38a231..6414cb2 100644
--- a/docs/components/compile/compile.mdx
+++ b/docs/components/compile/compile.mdx
@@ -19,7 +19,7 @@ A simple function to compile a React component to an HTML string with the Onedoc
           const html = await compile(<Component />);
           ```
 
-<Frame background="subtle"><img src="../../images/previews/compile-56b466a8/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/compile-2e394416/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -27,7 +27,7 @@ A simple function to compile a React component to an HTML string with the Onedoc
 import { compile } from "@fileforge/react-print";
 
 <Tailwind>
-  <div className="bg-red"></div>
+  <div className="bg-red-400">Hello World!</div>
 </Tailwind>;
 
 ```
diff --git a/docs/components/css.mdx b/docs/components/css.mdx
deleted file mode 100644
index 130cab9..0000000
--- a/docs/components/css.mdx
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: CSS
-icon: css3-alt
-description: "Allows adding CSS to the document while securely parsing and escaping it.
-
-NB: While you can add regular CSS with the `<style>` tag, it's recommended to use the `CSS` component to ensure that the CSS is properly escaped, most notably when using URLs or other potentially unsafe content."
----
-
-## CSS
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-### Examples
-
-#### Preview
-
-Use a simple CSS print property to set the page size.
-
-<Frame type="glass"><img src="../images/previews/css-b26814a3/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { CSS } from "@fileforge/react-print";
-
-<CSS>{`@page { size: a4 landscape; }`}</CSS>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-#### Load a Google Font
-
-Load a Google Font using the `@import` rule.
-
-<Frame type="glass"><img src="../images/previews/css-393a92da/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { CSS } from "@fileforge/react-print";
-
-<React.Fragment>
-  <CSS>
-    {`@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');`}
-  </CSS>
-  <p style={{ fontFamily: "Roboto, sans-serif" }}>
-    This text uses the Roboto Light font.
-  </p>
-</React.Fragment>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-#### Layout
-
-You can use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page).
-
-<Frame type="glass"><img src="../images/previews/css-83e5c15a/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { CSS } from "@fileforge/react-print";
-
-<React.Fragment>
-  <CSS>{`@page {size: A4;margin-top:1cm;margin-right:1cm;margin-left:1cm;margin-bottom:1cm;`}</CSS>
-  <div>Hello world!</div>
-</React.Fragment>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
diff --git a/docs/components/latex/latex.mdx b/docs/components/latex/latex.mdx
index d97dedb..002fcd8 100644
--- a/docs/components/latex/latex.mdx
+++ b/docs/components/latex/latex.mdx
@@ -51,16 +51,11 @@ body {
 
 Write complex LaTeX formulas in your document.
 
-<<<<<<< HEAD:docs/components/latex/latex.mdx
 <Frame background="subtle"><img src="../../images/previews/latex-7a00ed36/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
 ```jsx
-=======
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
->>>>>>> main:docs/components/latex.mdx
 import { Latex } from "@fileforge/react-print";
 
 <Latex>{String.raw`% \f is defined as #1f(#2) using the macro
diff --git a/docs/components/markdown/markdown.mdx b/docs/components/markdown/markdown.mdx
index fbe4c6f..fba4d57 100644
--- a/docs/components/markdown/markdown.mdx
+++ b/docs/components/markdown/markdown.mdx
@@ -59,14 +59,9 @@ You can leverage the `overrides` prop to replace Markdown components with your o
 
 <Frame background="subtle"><img src="../../images/previews/markdown-882cc486/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
-<<<<<<< HEAD:docs/components/markdown/markdown.mdx
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
 ```jsx
-=======
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
->>>>>>> main:docs/components/markdown.mdx
 import { Markdown } from "@fileforge/react-print";
 
 <Markdown
diff --git a/docs/components/shell.mdx b/docs/components/shell.mdx
deleted file mode 100644
index a380428..0000000
--- a/docs/components/shell.mdx
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: Shell
-icon: border-all
-description: "Display content in other page regions."
----
-
-## PageTop
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Displays content in the top of all the pages.
-
-This component should be placed as early as possible in the document and will apply to all subsequent pages.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/pagetop-9dd97ef3/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PageTop } from "@fileforge/react-print";
-
-<PageTop style={{ backgroundColor: "#bfdbfe" }} />;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-## CurrentPageTop
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Displays content in the top of the current page.
-
-This component will override the content of the `PageTop` component for the current page.
-
-```jsx
-import { CurrentPageTop } from "@fileforge/react-print";
-```
-
-## PageBottom
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Displays content in the bottom of all the pages.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/pagebottom-206d811e/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PageBottom } from "@fileforge/react-print";
-
-<PageBottom style={{ backgroundColor: "#bfdbfe" }} />;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-## PageBreak
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Forces a page break.
-
-```jsx
-import { PageBreak } from "@fileforge/react-print";
-```
-
-## NoBreak
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Prevents a page break. Wrap this component around content that should not be broken across pages.
-
-```jsx
-import { NoBreak } from "@fileforge/react-print";
-```
-
-## FloatBottom
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Floats the content to the bottom of the page.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/floatbottom-9a3986d7/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { FloatBottom } from "@fileforge/react-print";
-
-<FloatBottom>Here are some floated contents</FloatBottom>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
diff --git a/docs/components/tailwind/tailwind.mdx b/docs/components/tailwind/tailwind.mdx
index fe3ca3e..4e55f44 100644
--- a/docs/components/tailwind/tailwind.mdx
+++ b/docs/components/tailwind/tailwind.mdx
@@ -59,14 +59,9 @@ You can also pass a custom Tailwind config to the Tailwind component.
 
 <Frame background="subtle"><img src="../../images/previews/tailwind-841def4d/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
-<<<<<<< HEAD:docs/components/tailwind/tailwind.mdx
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
 ```jsx
-=======
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
->>>>>>> main:docs/components/tailwind.mdx
 import { Tailwind } from "@fileforge/react-print";
 
 <Tailwind
diff --git a/docs/components/variables.mdx b/docs/components/variables.mdx
deleted file mode 100644
index 08cd3d7..0000000
--- a/docs/components/variables.mdx
+++ /dev/null
@@ -1,273 +0,0 @@
----
-title: Variables
-icon: subscript
-description: "Display dynamic values based on your document, such as page numbers and running headers."
----
-
-## PageNumber
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Returns the current page number.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/pagenumber-cc94f6f7/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PageNumber } from "@fileforge/react-print";
-
-<PageNumber counterStyle="decimal" />;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-#### Custom Style
-
-You can use a custom CSS counter-style, by passing a known name or a custom counter style.
-
-<Frame type="glass"><img src="../images/previews/pagenumber-7e3be4c3/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PageNumber } from "@fileforge/react-print";
-
-<PageNumber counterStyle="lower-roman" />;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-### API
-
-<ResponseField name="Props">
-<Expandable defaultOpen={true} title="Show available props">
-<ResponseField name="counterStyle" type="string" required={false}>
-
-The style of the counter.
-
-Default: `"decimal"`
-
-</ResponseField>
-</Expandable></ResponseField>
-## PagesNumber
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Returns the total number of pages.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/pagesnumber-a7d845b5/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PagesNumber, PageNumber } from "@fileforge/react-print";
-
-<>
-  <PageNumber counterStyle="decimal" />
-  {" of "}
-  <PagesNumber counterStyle="decimal" />
-</>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-### API
-
-<ResponseField name="Props">
-<Expandable defaultOpen={true} title="Show available props">
-<ResponseField name="counterStyle" type="string" required={false}>
-
-The style of the counter.
-
-Default: `"decimal"`
-
-</ResponseField>
-</Expandable></ResponseField>
-## RunningH1
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Returns the current page's running header of level 1.
-
-### Examples
-
-#### Preview
-
-Show the current running header of level 1 in the page header. All running headers are reset when any of their parent headings are encountered (e.g. a level 2 heading resets the level 3, 4, 5 and 6 headings).
-
-<Frame type="glass"><img src="../images/previews/runningh1-b41bbc29/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { RunningH1 } from "@fileforge/react-print";
-
-<React.Fragment>
-  <PageTop style={{ paddingTop: "1rem" }}>
-    <RunningH1 />
-  </PageTop>
-  <h1>Heading of level 1</h1>
-</React.Fragment>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-## RunningH2
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Returns the current page's running header of level 2.
-
-```jsx
-import { RunningH2 } from "@fileforge/react-print";
-```
-
-## RunningH3
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Returns the current page's running header of level 3.
-
-```jsx
-import { RunningH3 } from "@fileforge/react-print";
-```
-
-## RunningH4
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Returns the current page's running header of level 4.
-
-```jsx
-import { RunningH4 } from "@fileforge/react-print";
-```
-
-## RunningH5
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Returns the current page's running header of level 5.
-
-```jsx
-import { RunningH5 } from "@fileforge/react-print";
-```
-
-## RunningH6
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
-
-Returns the current page's running header of level 6.
-
-```jsx
-import { RunningH6 } from "@fileforge/react-print";
-```
-
diff --git a/docs/images/previews/compile-2e394416/document.1.jpg b/docs/images/previews/compile-2e394416/document.1.jpg
new file mode 100644
index 0000000..4143aa9
Binary files /dev/null and b/docs/images/previews/compile-2e394416/document.1.jpg differ
diff --git a/docs/images/previews/compile-2e394416/document.pdf b/docs/images/previews/compile-2e394416/document.pdf
new file mode 100644
index 0000000..d772d27
Binary files /dev/null and b/docs/images/previews/compile-2e394416/document.pdf differ
diff --git a/docs/ui/templates/nda-markdown.mdx b/docs/ui/templates/nda-markdown.mdx
index 95cb630..ed0a60a 100644
--- a/docs/ui/templates/nda-markdown.mdx
+++ b/docs/ui/templates/nda-markdown.mdx
@@ -4,7 +4,7 @@ icon: file-contract
 category: NDA
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-nda-markdown-555147ca/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-nda-markdown-0c872119/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import React from "react";
diff --git a/docs/ui/templates/scientific-report.mdx b/docs/ui/templates/scientific-report.mdx
index b1b4a78..fa43275 100644
--- a/docs/ui/templates/scientific-report.mdx
+++ b/docs/ui/templates/scientific-report.mdx
@@ -4,7 +4,7 @@ icon: flask
 category: Reports
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-scientific-report-01382231/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-scientific-report-d26af32f/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import React, { createContext, useEffect, useState } from "react";
diff --git a/src/compile/compile.tsx b/src/compile/compile.tsx
index 58dd5f6..16bbd79 100644
--- a/src/compile/compile.tsx
+++ b/src/compile/compile.tsx
@@ -90,7 +90,7 @@ export const __docConfig: DocConfig = {
           \`\`\`jsx
           const html = await compile(<Component />);
           \`\`\``,
-          template: <Tailwind><div className="bg-red"></div></Tailwind>,
+          template: <Tailwind><div className="bg-red-400">Hello World!</div></Tailwind>,
 
         },
         emotion: {