diff --git a/docs/.env.example b/docs/.env.example
deleted file mode 100644
index f90dd4d65..000000000
--- a/docs/.env.example
+++ /dev/null
@@ -1,4 +0,0 @@
-# To use Nuxt UI Pro in production
-NUXT_UI_PRO_LICENSE=
-# Used when pre-rendering the docs for dynamic OG images
-NUXT_PUBLIC_SITE_URL=
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index 595dda927..000000000
--- a/docs/README.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# Nuxt 3 Minimal Starter
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/docs/app.config.ts b/docs/app.config.ts
deleted file mode 100644
index f4d1fec09..000000000
--- a/docs/app.config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default defineAppConfig({
- ui: {
- primary: 'green',
- gray: 'slate',
- },
-})
diff --git a/docs/app.vue b/docs/app.vue
deleted file mode 100644
index 40056ef86..000000000
--- a/docs/app.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Published under
- MIT License
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
new file mode 100644
index 000000000..6c1d83fe8
--- /dev/null
+++ b/docs/app/app.config.ts
@@ -0,0 +1,55 @@
+export default defineAppConfig({
+ header: {
+ title: 'Nuxt Image',
+ },
+ ui: {
+ colors: {
+ primary: 'green',
+ neutral: 'slate',
+ },
+ },
+ uiPro: {
+ pageHero: {
+ slots: {
+ container: 'lg:!grid-cols-3',
+ wrapper: 'col-span-2',
+ },
+ },
+ },
+ socials: {
+ nuxt: 'https://nuxt.com',
+ x: 'https://x.com/nuxt_js',
+ },
+ toc: {
+ title: 'Table of Contents',
+ bottom: {
+ title: 'Community',
+ links: [
+ {
+ icon: 'i-ph-shooting-star-duotone',
+ label: 'Star on GitHub',
+ to: 'https://github.com/nuxt/image',
+ target: '_blank',
+ },
+ {
+ icon: 'i-ph-chat-centered-text-duotone',
+ label: 'Chat on Discord',
+ to: 'https://chat.nuxt.dev',
+ target: '_blank',
+ },
+ {
+ icon: 'i-ph-hand-heart-duotone',
+ label: 'Become a Sponsor',
+ to: 'https://github.com/sponsors/nuxt',
+ target: '_blank',
+ },
+ {
+ icon: 'i-simple-icons-nuxtdotjs',
+ label: 'Nuxt docs',
+ to: 'https://nuxt.com',
+ target: '_blank',
+ },
+ ],
+ },
+ },
+})
diff --git a/docs/app/assets/css/main.css b/docs/app/assets/css/main.css
new file mode 100644
index 000000000..51157fd99
--- /dev/null
+++ b/docs/app/assets/css/main.css
@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../../../content/**/*";
+@source "../../../node_modules/docus/app/**/*";
+@theme static {
+ --font-sans: 'Public Sans', sans-serif;
+}
\ No newline at end of file
diff --git a/docs/app/components/AppHeaderBody.vue b/docs/app/components/AppHeaderBody.vue
new file mode 100644
index 000000000..67091da9e
--- /dev/null
+++ b/docs/app/components/AppHeaderBody.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
diff --git a/docs/app/components/AppHeaderCenter.vue b/docs/app/components/AppHeaderCenter.vue
new file mode 100644
index 000000000..4f6f9d9bc
--- /dev/null
+++ b/docs/app/components/AppHeaderCenter.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
diff --git a/docs/components/TheLogo.vue b/docs/app/components/AppHeaderLogo.vue
similarity index 100%
rename from docs/components/TheLogo.vue
rename to docs/app/components/AppHeaderLogo.vue
diff --git a/docs/app/components/DocsAsideLeftTop.vue b/docs/app/components/DocsAsideLeftTop.vue
new file mode 100644
index 000000000..0e660939c
--- /dev/null
+++ b/docs/app/components/DocsAsideLeftTop.vue
@@ -0,0 +1,6 @@
+
+
+
diff --git a/docs/app/components/content/CopyCodeInput.vue b/docs/app/components/content/CopyCodeInput.vue
new file mode 100644
index 000000000..bd1c3c97a
--- /dev/null
+++ b/docs/app/components/content/CopyCodeInput.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/app/components/content/ProviderList.vue b/docs/app/components/content/ProviderList.vue
new file mode 100644
index 000000000..d182d136b
--- /dev/null
+++ b/docs/app/components/content/ProviderList.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/docs/app/components/content/TheGradient.vue b/docs/app/components/content/TheGradient.vue
new file mode 100644
index 000000000..c5448db88
--- /dev/null
+++ b/docs/app/components/content/TheGradient.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/docs/app/components/content/TheIllustration.vue b/docs/app/components/content/TheIllustration.vue
new file mode 100644
index 000000000..7bad7217a
--- /dev/null
+++ b/docs/app/components/content/TheIllustration.vue
@@ -0,0 +1,250 @@
+
+
+
+
+
diff --git a/docs/pages/playground.vue b/docs/app/pages/playground.vue
similarity index 80%
rename from docs/pages/playground.vue
rename to docs/app/pages/playground.vue
index f2f9b8e03..16d4194be 100644
--- a/docs/pages/playground.vue
+++ b/docs/app/pages/playground.vue
@@ -1,11 +1,13 @@
-
-