docs: draft installation guide

docs/app.config.ts

@@ -0,0 +1,15 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'teal',
+      accent: 'yellow',
+      neutral: 'zinc',
+    },
+    card: {
+      slots: {
+        root: 'hover:bg-linear-[115deg,#272727 .06%,#171717]',
+        body: 'p-2 sm:p-3',
+      },
+    },
+  },
+})

docs/components/AppHeaderCenter.vue

@@ -0,0 +1,7 @@
+<template>
+  <UContentSearchButton
+    :collapsed="false"
+    class="w-full"
+    variant="subtle"
+  />
+</template>

docs/components/HeroScene.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  TresCanvas,
+} from '@tresjs/core'
+</script>
+
+<template>
+  <ClientOnly>
+    <div class="w-full aspect-video">
+      <TresCanvas>
+        <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+        <TresMesh>
+          <TresBoxGeometry />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </TresCanvas>
+    </div>
+  </ClientOnly>
+</template>

docs/content/.navigation.yml

@@ -0,0 +1,2 @@
+title: Getting Started
+icon: false

docs/content/1.getting-started/.navigation.yml

@@ -0,0 +1,2 @@
+title: Getting Started
+icon: false

docs/content/1.getting-started/2.introduction.md

@@ -0,0 +1,54 @@
+---
+title: Introduction
+description: Welcome to Docus theme documentation.
+navigation:
+  icon: i-lucide-house
+seo:
+  title: Introduction
+  description: Discover how to create, manage, and publish documentation
+    effortlessly with Docus.
+---
+
+Welcome to **Docus**, a fully integrated documentation solution built with [Nuxt UI Pro](https://ui.nuxt.com/pro).
+
+## What is Docus?
+
+Docus is a theme based on the [UI Pro documentation template](https://docs-template.nuxt.dev/). While the visual style comes ready out of the box, your focus should be on writing content using the Markdown and [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by [Nuxt Content](https://content.nuxt.com).
+
+We use this theme across all our Nuxt module documentations, including:
+
+::card-group
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Image
+  to: https://image.nuxt.com
+  ---
+  The documentation of `@nuxt/image`
+  :::
+
+  :::card
+  ---
+  icon: i-simple-icons-nuxtdotjs
+  target: _blank
+  title: Nuxt Supabase
+  to: https://supabase.nuxtjs.org
+  ---
+  The documentation of `@nuxt/supabase`
+  :::
+::
+
+## Key Features
+
+This theme includes a range of features designed to improve documentation management:
+
+- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
+- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
+- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
+- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Write and edit your content visually. No Markdown knowledge is required!
+- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
+- **Full-Text Search**: Includes built-in search functionality for content discovery.
+- **Optimized Typography**: Features refined typography for enhanced readability.
+- **Dark Mode**: Offers dark mode support for user preference.
+- **Extensive Functionality**: Explore the theme to fully appreciate its capabilities.

docs/content/1.getting-started/3.installation.md

@@ -0,0 +1,143 @@
+---
+title: Installation
+description: Get started with TresJS.
+navigation:
+  icon: i-lucide-download
+seo:
+  description: Learn how to install and set up TresJS in your Vue project.
+---
+
+## Vue project
+
+::steps
+### Install TresJS and Three.js
+
+Install the core TresJS package and Three.js dependency:
+
+::code-group
+```bash [npm]
+npm install @tresjs/core three
+```
+
+```bash [yarn]
+yarn add @tresjs/core three
+```
+
+```bash [pnpm]
+pnpm add @tresjs/core three
+```
+::
+
+### Install TypeScript types (Optional)
+
+If you're using TypeScript, install the Three.js type definitions:
+
+::code-group
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+::
+
+### Configure Vite
+
+Add the TresJS template compiler options to your `vite.config.ts`:
+
+```typescript [vite.config.ts]
+import { templateCompilerOptions } from '@tresjs/core'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ],
+})
+```
+::prose-warning
+This configuration is required to make the template compiler work with TresJS custom renderer and prevent console warnings.
+::
+::
+
+### Ecosystem packages (Optional)
+
+Install additional TresJS ecosystem packages for extended functionality:
+
+::code-group 
+```bash [npm]
+npm install @tresjs/cientos @tresjs/post-processing
+```
+
+```bash [yarn]
+yarn add @tresjs/cientos @tresjs/post-processing
+```
+
+```bash [pnpm]
+pnpm add @tresjs/cientos @tresjs/post-processing
+```
+::
+
+::prose-note
+These packages will be automatically imported by the [Nuxt module](/getting-started/installation#nuxt-project):
+- **Cientos**: A collection of useful helpers and components
+- **Post-processing**: Post-processing effects for enhanced visuals
+::
+
+
+
+
+## Nuxt project <UIcon name="i-simple-icons-nuxt" />
+
+If you're using Nuxt, you can use the official TresJS Nuxt module for a seamless integration experience.
+
+::steps
+### Install the Nuxt module
+
+Install the TresJS Nuxt module and Three.js:
+
+::code-group
+```bash [npm]
+npm install three @tresjs/nuxt
+```
+
+```bash [yarn]
+yarn add three @tresjs/nuxt
+```
+
+```bash [pnpm]
+pnpm add three @tresjs/nuxt
+```
+::
+
+### Configure the module
+
+Add `@tresjs/nuxt` to the `modules` section of your `nuxt.config.ts`:
+
+```typescript [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@tresjs/nuxt'],
+})
+```
+
+### Start using TresJS
+
+That's it! The module provides several benefits:
+
+::prose-list
+- 🤓 **Auto-import** components and composables from the TresJS ecosystem
+- 🖥️ **Client-only rendering** for `TresCanvas` (no need for `.client` suffix or `<ClientOnly />`)
+- ⚙️ **Automatic configuration** of Vue compiler for TresJS components
+- ✨ **DX Magic** that comes with Nuxt
+::
+
+

docs/content/1.getting-started/4.project-structure.md

@@ -0,0 +1,52 @@
+---
+navigation:
+  icon: i-lucide-folder-tree
+title: Project Structure
+---
+
+Docus provides a ready-to-use [documentation website starter](https://github.com/nuxtlabs/docus/tree/.starter).
+
+This is the minimal directory structure to get an up and running Docus website.
+
+```bash
+content/
+  index.md
+public/
+  favicon.ico
+package.json
+```
+
+### `content/` directory
+
+This is where you [write pages](/concepts/edition) in Markdown.
+
+### `public/` directory
+
+Files contained within the `public/` directory are served at the root and are not modified by the build process of your documentation. This is where you can locate your medias.
+
+### `package.json`
+
+This file contains all the dependencies and scripts for your application. The `package.json` of a Docus application si really minimal and looks like:
+
+```json [package.json]
+{
+  "name": "docus-starter",
+  "scripts": {
+    "dev": "docus dev",
+    "build": "docus build"
+  },
+  "devDependencies": {
+    "docus": "latest"
+  }
+}
+```
+
+### `app.config.ts`
+
+*This file is not mandatory to start a Docus application.*
+
+This is where you can [configure Docus](/concepts/configuration) to fit your branding, handle SEO and adapt links and socials.
+
+::prose-tip{to="/concepts/nuxt"}
+Docus uses a layer system, you can go further and use any feature or file of a classical Nuxt project from `nuxt.config.ts` to `app/components` or `server/` directory.
+::

docs/content/1.getting-started/5.studio.md

@@ -0,0 +1,129 @@
+---
+title: Web Editor
+description: Build your documentation using Nuxt Studio web editor
+navigation:
+  icon: i-lucide-mouse-pointer-2
+---
+
+## **Introduction**
+
+The [Nuxt Studio](https://nuxt.studio) **web editor** is a browser-based visual interface for creating, editing, and reviewing your documentation. It provides a preview experience while keeping your work in sync with your Git repository.
+
+:video{controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
+
+::prose-tip{to="https://content.nuxt.com/studio"}
+Learn more about Nuxt Studio in the Nuxt Content documentation.
+::
+
+## **Web Editor vs. CLI**
+
+The **web editor** of [Nuxt Studio](https://nuxt.studio) allows you to manage your documentation entirely from your browser. There is no need for local development tools or terminal commands. It’s ideal for maintaining your docs in one centralised place, with an easy tool without any Markdown skills required.
+
+The **CLI (Command Line Interface)**, on the other hand, is a local tool designed for developers who prefer working in their own IDE.
+
+::prose-note
+Both tools are fully integrated with Git, so you can switch between them as needed. Team members can choose whichever method suits their workflow best.
+::
+
+## **Two distinct editors**
+
+Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between two distinct editors for content creation and management: the **Markdown editor** and the **Visual editor**.
+
+You can select your favorite editor from the settings page of your project.
+
+::prose-note
+Each editor serves its own purpose, some users are used to Markdown edition, while others prefer a non-technical, visual approach. At the end, **Markdown syntax is the final output** for both editors.
+::
+
+## **Markdown editor**
+
+![Markdown editor for developers](/documentation/markdown-editor-studio.png)
+
+The Markdown editor in Nuxt Studio provides full control over your content, allowing you to write directly you documentation in **Markdown** and integrate Vue components with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
+
+When your file is saved with the Markdown editor, the content is stored exactly as you've written it, preserving all specific syntax and formatting. This editor is ideal for users comfortable with Markdown who want precise control over the layout and structure of their content.
+
+## **Visual editor**
+
+![Visual editor for non technical users](/documentation/visual-editor-studio.png)
+
+The Nuxt Studio editor is heavily inspired by Notion, well known for its intuitive design and flexibility. Much like a standard text editor, the Studio editor is designed to be familiar and easy to use.
+
+However, it stands out with its additional features that improve the writing experience:
+
+### **Toolbar**
+
+Highlight your text to reveal the toolbar, giving you access to all the standard text editing features provided by the [Markdown syntax](/essentials/markdown-syntax):
+
+- Title formatting
+- Bold
+- Italic
+- Strike-through
+- Code
+- Link
+- Class
+- Bullet list
+- Numerated list
+
+### **The** `/` **shortcut**
+
+Simply type `/` anywhere in the editor to access all Studio features.
+
+#### **Formatting features**
+
+- Title formatting
+- Line break
+- Horizontal rule
+- Code-block
+- Paragraph
+- Bold & italic
+
+#### **Components**
+
+One of Studio's standout features is its ability to integrate and customize any complex component directly within the editor.
+
+In other terms, all [Nuxt UI components](/essentials/components) are usable and can be integrated directly from the editor. An editor can also tweak the component properties, slots and styles.
+
+::prose-note
+You can also create custom components and let the user integrate them from the visual editor.
+::
+
+Just type `/` to access the list of all the components available.
+
+#### **Images**
+
+Using the `/`shortcut, you can quickly insert an image by selecting the `Image` option. A modal will open to let you choose the media you want to insert.
+
+From the media modal, you can set the **alt attribute** for SEO and accessibility purpose.
+
+#### **Videos**
+
+Using the `/` shortcut, you can quickly insert a video by selecting the `Video` choice and filling up the Video URL.
+
+As soon as a video is added, a tab will automatically open with all the props field **available by default**, for you to fill out the URL and customize your media.
+
+## **Live Preview**
+
+![preview.png](/documentation/preview-studio.png)
+
+Once your documentation is deployed, it provides a live preview feature that lets you instantly see updates to your project.
+
+We're using your production website to override contents and display the new visual. This is why we need the URL to be set in the **deploy** section.
+
+When you are editing your website with Studio, the live preview can be displayed on the right part of your screen. You get an instant feedback when typing. It syncs the preview based on your draft updates.
+
+## **Making Changes**
+
+To edit your documentation:
+
+1. **Browse files** using the file explorer.
+2. **Open a file** by clicking on it.
+3. **Edit content** in either visual or Markdown mode. All edits are automatically saved as drafts.
+4. **Preview your changes** to see how they’ll appear when published.
+
+## **Publishing Changes**
+
+When you’re ready to publish:
+
+- Click the **Publish** button in the top-right corner of the editor.
+- Your changes will be pushed directly to your deployment branch and go live immediately.

docs/content/1.getting-started/6.migration.md

@@ -0,0 +1,24 @@
+---
+title: Migration
+description: " How to migrate your documentation from an existing Markdown
+  solution to Docus"
+navigation:
+  icon: i-lucide-replace
+---
+
+## **Migrating to Docus**
+
+Already using a Markdown-based solution for your documentation? Whether it’s **Docus v1**, the **Nuxt UI Pro docs template**, or another static site setup, migrating to Docus is simple and straightforward.
+
+Docus offers a clean and maintainable solution with a single dependency: the Docus library itself. There’s no need to manage multiple .dependencies With everything built-in and maintained together, keeping your documentation up to date is easier than ever.
+
+To migrate, just move your existing Markdown files into the `content/` directory of the Docus starter.
+
+From there, you have two scenarios:
+
+- **If your current docs already use Nuxt Content and the MDC syntax**, make sure the components used in your content exist in Nuxt UI. If any components are missing, you can easily create your own custom ones.
+- **If you’re using standard Markdown**, you can copy your files as is. Then, enhance your documentation progressively using the [built-in components](/essentials/components) provided by Nuxt UI.
+
+Once your content has been moved to the `content/` folder, you can go through the [configuration section](/concepts/configuration) to easily customize your app.
+
+Docus is designed to focus on writing content, so if you're already using Markdown, you can easily switch to it.

docs/content/2.essentials/.navigation.yml

@@ -0,0 +1 @@
+title: Essentials

docs/content/2.essentials/1.markdown-syntax.md

@@ -0,0 +1,223 @@
+---
+title: Markdown Syntax
+description: Text, title, and styling in standard markdown.
+navigation:
+  icon: i-lucide-heading-1
+---
+
+## Titles
+
+Use titles to introduce main sections. They structure your documentation and help users navigate content.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+## Titles
+
+#code
+```mdc
+## Titles
+```
+::
+
+### Subtitles
+
+Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+### Subtitles
+
+#code
+```mdc
+### Subtitles
+```
+::
+
+::tip
+Each title and subtitle creates an anchor and shows up automatically in the table of contents.
+::
+
+## Text Formatting
+
+Docus supports most Markdown formatting options.
+
+| Style  | How to use   | Result     |
+| ------ | ------------ | ---------- |
+| Bold   | `**bold**`   | **Bold**   |
+| Italic | `*italic*`   | *Italic*   |
+| Strike | `~~strike~~` | ~~Strike~~ |
+
+Combine formatting for richer text styles and visual emphasis.
+
+| Style         | How to use          | Result            |
+| ------------- | ------------------- | ----------------- |
+| Bold Italic   | `**_bold italic_**` | ***Bold Italic*** |
+| Bold Strike   | `~~**bold**~~`      | ~~**Bold**~~      |
+| Italic Strike | `~~*italic*~~`      | ~~*Italic*~~      |
+
+## Links
+
+Links connect different parts of your documentation and external resources, essential for user navigation and providing references.
+To create a link, wrap the link text in brackets `[]()`.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
+
+#code
+```mdc
+[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
+```
+::
+
+### Internal links
+
+For linking within your documentation, use root-relative paths like `/getting-started/installation`.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+[Installation](/getting-started/installation)
+
+#code
+```mdc
+[Installation](/getting-started/installation)
+```
+::
+
+## Lists
+
+Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs.
+
+### Unordered
+
+Use unordered lists for items without a specific sequence. Start each item with a `-` symbol.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+- I'm a list item.
+- I'm another list item.
+- I'm the last list item.
+
+#code
+```mdc
+- I'm a list item.
+- I'm another list item.
+- I'm the last list item.
+```
+::
+
+### Ordered
+
+Use ordered lists when item order matters, like steps in a process. Start each item with a number.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+1. I'm a list item.
+2. I'm another list item.
+3. I'm the last list item.
+
+#code
+```mdc
+1. I'm a list item.
+2. I'm another list item.
+3. I'm the last list item.
+```
+::
+
+### Nested
+
+Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+- I'm a list item.
+  - I'm a nested list item.
+  - I'm another nested list item.
+- I'm another list item.
+
+#code
+```mdc
+- I'm a list item.
+  - I'm a nested list item.
+  - I'm another nested list item.
+- I'm another list item.
+```
+::
+
+## Tables
+
+Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+| Prop    | Default   | Type     |
+| ------- | --------- | -------- |
+| `name`  |           | `string` |
+| `size`  | `md`      | `string` |
+| `color` | `neutral` | `string` |
+
+#code
+```mdc
+| Prop    | Default   | Type                     |
+|---------|-----------|--------------------------|
+| `name`  |           | `string`{lang="ts-type"} |
+| `size`  | `md`      | `string`{lang="ts-type"} |
+| `color` | `neutral` | `string`{lang="ts-type"} |
+```
+::
+
+## Blockquotes
+
+Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content.
+
+### Singleline
+
+Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+
+#code
+```mdc
+> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+```
+::
+
+### Multiline
+
+Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+>
+> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
+
+#code
+```mdc
+> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+>
+> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
+```
+::

docs/content/2.essentials/2.code-blocks.md

@@ -0,0 +1,396 @@
+---
+title: Code Blocks
+description: Display inline code and code blocks in your documentation.
+navigation:
+  icon: i-lucide-code-xml
+---
+
+## Basic
+
+### Inline Code
+
+Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+`inline code`
+
+#code
+```mdc
+`inline code`
+```
+::
+
+### Code Blocks
+
+Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+```ts
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro']
+})
+```
+
+#code
+````mdc
+```ts
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro']
+})
+```
+````
+::
+
+When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name.
+Filenames help users understand the code's location and purpose within a project.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro']
+})
+```
+
+#code
+````mdc
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro']
+})
+```
+````
+::
+
+Every code-block has a built-in copy button that will copy the code to your clipboard.
+
+::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"}
+Icons are already defined by default, but you can customize them in your `app.config.ts`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  uiPro: {
+    prose: {
+      codeIcon: {
+        terminal: 'i-ph-terminal-window-duotone'
+      }
+    }
+  }
+})
+```
+::
+
+## Advanced
+
+### CodeGroup
+
+Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+  :::code-group{.w-full}
+  ```bash [pnpm]
+  pnpm add @nuxt/ui-pro@next
+  ```
+  
+  ```bash [yarn]
+  yarn add @nuxt/ui-pro@next
+  ```
+  
+  ```bash [npm]
+  npm install @nuxt/ui-pro@next
+  ```
+  
+  ```bash [bun]
+  bun add @nuxt/ui-pro@next
+  ```
+  :::
+
+#code
+````mdc
+:::code-group
+
+```bash [pnpm]
+pnpm add @nuxt/ui-pro@next
+```
+
+```bash [yarn]
+yarn add @nuxt/ui-pro@next
+```
+
+```bash [npm]
+npm install @nuxt/ui-pro@next
+```
+
+```bash [bun]
+bun add @nuxt/ui-pro@next
+```
+
+::
+````
+::
+
+### CodeTree
+
+Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships.
+
+::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
+  :::code-tree{default-value="app/app.config.ts"}
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    modules: ['@nuxt/ui-pro'],
+  
+    future: {
+      compatibilityVersion: 4
+    },
+  
+    css: ['~/assets/css/main.css']
+  })
+  
+  ```
+  
+  ```css [app/assets/css/main.css]
+  @import "tailwindcss";
+  @import "@nuxt/ui-pro";
+  ```
+  
+  ```ts [app/app.config.ts]
+  export default defineAppConfig({
+    ui: {
+      colors: {
+        primary: 'sky',
+        colors: 'slate'
+      }
+    }
+  })
+  ```
+  
+  ```vue [app/app.vue]
+  <template>
+    <UApp>
+      <NuxtPage />
+    </UApp>
+  </template>
+  ```
+  
+  ```json [package.json]
+  {
+    "name": "nuxt-app",
+    "private": true,
+    "type": "module",
+    "scripts": {
+      "build": "nuxt build",
+      "dev": "nuxt dev",
+      "generate": "nuxt generate",
+      "preview": "nuxt preview",
+      "postinstall": "nuxt prepare",
+      "lint": "eslint .",
+      "lint:fix": "eslint --fix ."
+    },
+    "dependencies": {
+      "@iconify-json/lucide": "^1.2.18",
+      "@nuxt/ui-pro": "3.0.0-alpha.10",
+      "nuxt": "^3.15.1"
+    },
+    "devDependencies": {
+      "eslint": "9.20.1",
+      "typescript": "^5.7.2",
+      "vue-tsc": "^2.2.0"
+    }
+  }
+  ```
+  
+  ```json [tsconfig.json]
+  {
+    "extends": "./.nuxt/tsconfig.json"
+  }
+  ```
+  
+  ````md [README.md]
+  # 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
+  
+  # bun
+  bun install
+  ```
+  
+  ## Development Server
+  
+  Start the development server on `http://localhost:3000`:
+  
+  ```bash
+  # npm
+  npm run dev
+  
+  # pnpm
+  pnpm run dev
+  
+  # yarn
+  yarn dev
+  
+  # bun
+  bun run dev
+  ```
+  
+  ## Production
+  
+  Build the application for production:
+  
+  ```bash
+  # npm
+  npm run build
+  
+  # pnpm
+  pnpm run build
+  
+  # yarn
+  yarn build
+  
+  # bun
+  bun run build
+  ```
+  
+  Locally preview production build:
+  
+  ```bash
+  # npm
+  npm run preview
+  
+  # pnpm
+  pnpm run preview
+  
+  # yarn
+  yarn preview
+  
+  # bun
+  bun run preview
+  ```
+  
+  Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+  ````
+  :::
+::
+
+### `CodePreview`
+
+Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results.
+Write the code to be previewed in a the `default` slot and the actual code in the `code` slot.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+label: Preview
+---
+  :::code-preview
+  ---
+  class: "[&>div]:*:my-0"
+  ---
+  `inline code`
+  
+  #code
+  ```mdc
+  `inline code`
+  ```
+  :::
+
+#code
+````mdc
+::code-preview
+`inline code`
+
+#code
+```mdc
+`inline code`
+```
+::
+````
+::
+
+### `CodeCollapse`
+
+Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+  :::code-collapse{class="[&>div]:my-0"}
+  ```css [main.css]
+  @import "tailwindcss";
+  @import "@nuxt/ui-pro";
+  
+  @theme {
+    --font-sans: 'Public Sans', sans-serif;
+  
+    --breakpoint-3xl: 1920px;
+  
+    --color-green-50: #EFFDF5;
+    --color-green-100: #D9FBE8;
+    --color-green-200: #B3F5D1;
+    --color-green-300: #75EDAE;
+    --color-green-400: #00DC82;
+    --color-green-500: #00C16A;
+    --color-green-600: #00A155;
+    --color-green-700: #007F45;
+    --color-green-800: #016538;
+    --color-green-900: #0A5331;
+    --color-green-950: #052E16;
+  }
+  ```
+  :::
+
+#code
+````mdc
+::code-collapse
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --breakpoint-3xl: 1920px;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052E16;
+}
+```
+
+::
+````
+::

docs/content/2.essentials/3.components.md

@@ -0,0 +1,424 @@
+---
+title: Markdown Components
+description: Use Markdown components to help you structure your content, with
+  the help of Nuxt UI Pro.
+navigation:
+  icon: i-lucide-component
+  title: Components
+---
+
+Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.
+
+**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
+
+::prose-note{to="https://ui.nuxt.com/getting-started"}
+This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation.
+::
+
+### `Accordion`
+
+Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui.nuxt.com/components/accordion) in your content.
+
+::tabs
+  :::tabs-item{icon="i-lucide-eye" label="Preview"}
+    ::::accordion
+      :::::accordion-item
+      ---
+      icon: i-lucide-circle-help
+      label: What is Docus and what are its key features??
+      ---
+      Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
+      :::::
+    
+      :::::accordion-item
+      ---
+      icon: i-lucide-circle-help
+      label: How do I get started with Docus?
+      ---
+      The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
+      :::::
+    
+      :::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
+      Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
+      :::::
+    ::::
+  :::
+
+  :::tabs-item{icon="i-lucide-code" label="Code"}
+  ```mdc
+  ::accordion
+  
+    :::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
+    Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
+    :::
+  
+    :::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
+    The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
+    :::
+  
+    :::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
+    Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
+    :::
+  ::
+  ```
+  :::
+::
+
+### `Badge`
+
+Use markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content.
+
+::tabs
+  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
+    ::::badge
+    **v3.0.0**
+    ::::
+  :::
+
+  :::tabs-item{icon="i-lucide-code" label="Code"}
+  ```mdc
+  ::badge
+  **v3.0.0**
+  ::
+  ```
+  :::
+::
+
+### `Callout`
+
+Use markdown in the default slot of the `callout` component to add eye-catching context to your content.
+
+Use the `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.
+
+You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.
+
+::tabs
+  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
+    ::::div{.flex.flex-col.gap-4.w-full}
+      :::::note{.w-full.my-0}
+      Here's some additional information for you.
+      :::::
+    
+      :::::tip{.w-full.my-0}
+      Here's a helpful suggestion.
+      :::::
+    
+      :::::warning{.w-full.my-0}
+      Be careful with this action as it might have unexpected results.
+      :::::
+    
+      :::::caution{.w-full.my-0}
+      This action cannot be undone.
+      :::::
+    ::::
+  :::
+
+  :::tabs-item{icon="i-lucide-code" label="Code"}
+  ```mdc
+  ::note
+  Here's some additional information.
+  ::
+  
+  ::tip
+  Here's a helpful suggestion.
+  ::
+  
+  ::warning
+  Be careful with this action as it might have unexpected results.
+  ::
+  
+  ::caution
+  This action cannot be undone.
+  ::
+  ```
+  :::
+::
+
+### `Card` and `CardGroup`
+
+Use markdown in the default slot of the `card` component to highlight your content.
+
+Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).
+
+Wrap your `card` components with the `card-group` component to group them together in a grid layout.
+
+::tabs
+  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
+    ::::card-group{.w-full.my-0}
+      :::::card
+      ---
+      icon: i-simple-icons-github
+      target: _blank
+      title: Dashboard
+      to: https://github.com/nuxt-ui-pro/dashboard
+      ---
+      A dashboard with multi-column layout.
+      :::::
+    
+      :::::card
+      ---
+      icon: i-simple-icons-github
+      target: _blank
+      title: SaaS
+      to: https://github.com/nuxt-ui-pro/saas
+      ---
+      A template with landing, pricing, docs and blog.
+      :::::
+    
+      :::::card
+      ---
+      icon: i-simple-icons-github
+      target: _blank
+      title: Docs
+      to: https://github.com/nuxt-ui-pro/docs
+      ---
+      A documentation with `@nuxt/content`.
+      :::::
+    
+      :::::card
+      ---
+      icon: i-simple-icons-github
+      target: _blank
+      title: Landing
+      to: https://github.com/nuxt-ui-pro/landing
+      ---
+      A landing page you can use as starting point.
+      :::::
+    ::::
+  :::
+
+  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
+  ```mdc
+  :::card-group
+  
+    ::card
+    ---
+    title: Dashboard
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt-ui-pro/dashboard
+    target: _blank
+    ---
+    A dashboard with multi-column layout.
+    ::
+  
+    ::card
+    ---
+    title: SaaS
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt-ui-pro/saas
+    target: _blank
+    ---
+    A template with landing, pricing, docs and blog.
+    ::
+  
+    ::card
+    ---
+    title: Docs
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt-ui-pro/docs
+    target: _blank
+    ---
+    A documentation with `@nuxt/content`.
+    ::
+  
+    ::card
+    ---
+    title: Landing
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt-ui-pro/landing
+    target: _blank
+    ---
+    A landing page you can use as starting point.
+    ::
+  
+  :::
+  ```
+  :::
+::
+
+### `Collapsible`
+
+Wrap your content with the `collapsible` component to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content.
+
+::tabs
+  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
+    ::::collapsible
+    | Prop    | Default   | Type     |
+    | ------- | --------- | -------- |
+    | `name`  |           | `string` |
+    | `size`  | `md`      | `string` |
+    | `color` | `neutral` | `string` |
+    ::::
+  :::
+
+  :::tabs-item{icon="i-lucide-code" label="Code"}
+  ```mdc
+  ::collapsible
+  
+  | Prop    | Default   | Type                     |
+  |---------|-----------|--------------------------|
+  | `name`  |           | `string`{lang="ts-type"} |
+  | `size`  | `md`      | `string`{lang="ts-type"} |
+  | `color` | `neutral` | `string`{lang="ts-type"} |
+  
+  ::
+  ```
+  :::
+::
+
+### `Field` and `FieldGroup`
+
+A `field`is a prop or parameter to display in your content. You can group them by `field-group` in a list.
+
+::tabs
+  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
+    ::::field-group{.my-0}
+      :::::field{name="analytics" type="boolean"}
+      Default to `false` - Enables analytics for your project (coming soon).
+      :::::
+    
+      :::::field{name="blob" type="boolean"}
+      Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
+      :::::
+    
+      :::::field{name="cache" type="boolean"}
+      Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
+      :::::
+    
+      :::::field{name="database" type="boolean"}
+      Default to `false` - Enables SQL database to store your application's data.
+      :::::
+    ::::
+  :::
+
+  :::tabs-item{icon="i-lucide-code" label="Code"}
+  ```mdc
+  ::field-group
+    ::field{name="analytics" type="boolean"}
+      Default to `false` - Enables analytics for your project (coming soon).
+    ::
+  
+    ::field{name="blob" type="boolean"}
+      Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
+    ::
+  
+    ::field{name="cache" type="boolean"}
+      Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
+    ::
+  
+    ::field{name="database" type="boolean"}
+      Default to `false` - Enables SQL database to store your application's data.
+    ::
+  ::
+  ```
+  :::
+::
+
+### `Icon`
+
+Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content.
+
+::code-preview
+:icon{name="i-simple-icons-nuxtdotjs"}
+
+ 
+
+#code
+```mdc
+:icon{name="i-simple-icons-nuxtdotjs"}
+```
+::
+
+### `Kbd`
+
+Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.
+
+::code-preview
+#code
+```mdc
+:kbd{value="meta"} :kbd{value="K"}
+```
+::
+
+### `Tabs`
+
+Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content.
+
+::code-preview
+  :::tabs{.w-full}
+    ::::tabs-item{icon="i-lucide-code" label="Code"}
+    ```mdc
+    ::callout
+    Lorem velit voluptate ex reprehenderit ullamco et culpa.
+    ::
+    ```
+    ::::
+  
+    ::::tabs-item{icon="i-lucide-eye" label="Preview"}
+      :::::callout
+      Lorem velit voluptate ex reprehenderit ullamco et culpa.
+      :::::
+    ::::
+  :::
+
+#code
+````mdc
+::tabs{.w-full}
+  :::tabs-item{icon="i-lucide-code" label="Code"}
+    ```mdc
+    ::::callout
+    Lorem velit voluptate ex reprehenderit ullamco et culpa.
+    ::::
+    ```
+  ::::
+
+  :::tabs-item{icon="i-lucide-eye" label="Preview"}
+    :::::callout
+    Lorem velit voluptate ex reprehenderit ullamco et culpa.
+    :::::
+  :::
+::
+````
+::
+
+### `Steps`
+
+Wrap your headings with the Steps component to display a list of steps.
+
+Use the `level` prop to define which heading will be used for the steps.
+
+::tabs
+  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
+    ::::steps{level="4"}
+    #### Start a fresh new project
+    
+    ```bash [Terminal]
+    npx nuxi init -t github:nuxt-ui-pro/docus
+    ```
+    
+    #### Run docus CLI to run your dev server
+    
+    ```bash [Terminal]
+    docus dev
+    ```
+    ::::
+  :::
+
+  :::tabs-item{icon="i-lucide-code" label="Code"}
+  ````mdc
+  ::steps{level="4"}
+    #### Start a fresh new project
+    
+    ```bash [Terminal]
+    npx nuxi init -t github:nuxt-ui-pro/docus
+    ```
+    
+    #### Run docus CLI to run your dev server
+    
+    ```bash [Terminal]
+    docus dev
+    ```
+  ::
+  ````
+  :::
+::

docs/content/2.essentials/4.images-embeds.md

@@ -0,0 +1,53 @@
+---
+title: Images and Embeds
+description: Add image, video, and other HTML elements
+navigation:
+  icon: i-lucide-image
+seo:
+  description: Add image, video, and other HTML elements using Docus theme
+---
+
+## Markdown
+
+Display images or videos using standard Markdown syntax.
+
+### Images
+
+::code-preview
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+
+#code
+```mdc
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+```
+::
+
+Or with your local images
+
+::code-preview
+![Snow-capped mountains in a sea of clouds at sunset](/mountains.webp)
+
+#code
+```mdc
+![Snow-capped mountains in a sea of clouds at sunset](/mountains.webp)
+```
+::
+
+::note{to="https://image.nuxt.com/"}
+Docus will use `<NuxtImg>` component under the hood instead of the native `img` tag.
+::
+
+### Videos
+
+::prose-code-preview
+:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
+
+ 
+
+#code
+```mdc
+:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
+```
+::
+
+###

docs/content/index.md

@@ -1,19 +1,25 @@
 ---
 seo:
-  title: Write beautiful docs with Markdown
+  title: TresJS - Bring Three to the Vue ecosystem
+
   description: Ship fast, flexible, and SEO-optimized documentation with beautiful
     design out of the box. Docus brings together the best of the Nuxt ecosystem.
     Powered by Nuxt UI Pro.
 ---
 
 ::u-page-hero
+---
+orientation: horizontal
+---
+#default
+::hero-scene
+::
 #title
-Write beautiful docs with Markdown
+<span><span class="text-primary-400">TresJS</span> \
+Declarative 3D for Vue
 
 #description
-Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box.
-
-Docus brings the best of the Nuxt ecosystem into one CLI.
+Create awesome Three based experiences with the framework you love.
 
 #links
   :::u-button
@@ -36,6 +42,7 @@ Docus brings the best of the Nuxt ecosystem into one CLI.
   ---
   Star on GitHub
   :::
+ 
 ::
 
 ::u-page-section

docs/nuxt.config.ts

@@ -1,4 +1,17 @@
+import { templateCompilerOptions } from '@tresjs/core'
+
 export default defineNuxtConfig({
   modules: ['@nuxt/ui-pro'],
   css: ['~/assets/css/main.css'],
+  fonts: {
+    families: [
+      { name: 'Manrope', provider: 'google', weights: ['500', '600', '800'] },
+      { name: 'Inter', provider: 'google' },
+    ],
+  },
+  vue: {
+    compilerOptions: {
+      isCustomElement: templateCompilerOptions.template.compilerOptions.isCustomElement,
+    },
+  },
 })

docs/package.json

@@ -6,9 +6,11 @@
   },
   "dependencies": {
     "@nuxt/eslint": "1.4.1",
+    "@tresjs/cientos": "5.0.0-next.0",
+    "@tresjs/core": "workspace:^",
     "better-sqlite3": "^11.10.0",
     "docus": "latest",
     "eslint": "^9.0.0",
     "nuxt": "^3.17.3"
   }
-}
+}

package.json

@@ -94,7 +94,6 @@
     "gsap": "^3.12.7",
     "jsdom": "^26.0.0",
     "kolorist": "^1.8.0",
-    "ohmyfetch": "^0.4.21",
     "pathe": "^2.0.2",
     "release-it": "^18.1.2",
     "rollup-plugin-analyzer": "^4.0.0",
@@ -120,6 +119,10 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "better-sqlite3"
-    ]
+    ],
+    "overrides": {
+      "vue": "^3.5.16",
+      "vue-router": "^4.5.1"
+    }
   }
 }