diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index e3a402a..8cfc01d 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -3,9 +3,7 @@
     class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 overflow-hidden"
   >
     <!--  Logo  -->
-    <div
-      class="flex-shrink-0 p-4  border-gray-200 dark:border-gray-700"
-    >
+    <div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
       <!-- Logo and Site Name -->
       <div class="h-8">
         <NuxtLink to="/" class="flex items-center space-x-3">
@@ -23,7 +21,7 @@
     </div>
 
     <!-- Search Box -->
-    <div class="p-4  border-gray-200 dark:border-gray-700">
+    <div class="p-4 border-gray-200 dark:border-gray-700">
       <ClientOnly>
         <UContentSearchButton
           v-if="header?.search"
@@ -39,62 +37,50 @@
 
     <!-- 可滚动的导航区域 -->
     <div
-      class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500"
+      class="flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500"
       style="max-height: calc(100vh - 200px)"
     >
 
         <!-- 导航 Section -->
 
-          <div>
-            <NuxtLink
-              to="/"
-              class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
-              :class="{
-                'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
-                  $route.path === '/',
-              }"
-            >
-              <Icon name="lucide-home" class="text-primary mr-2" size="20" />
-              站点首页
-            </NuxtLink>
-          </div>
+        <div>
+          <NuxtLink
+            to="/"
+            class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
+            :class="{
+              'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
+                $route.path === '/',
+            }"
+          >
+            <Icon name="lucide-home" class="text-primary mr-2" size="20" />
+            站点首页
+          </NuxtLink>
+        </div>
 
-
-        <!-- 分隔线 -->
-        <div class="flex items-center px-8 p-1 ">
+        <!-- 总目录及展示页导航 -->
+        <div class="flex items-center px-8 p-1">
           <ContentDirectory />
         </div>
 
-
-
-        <div class="mt-4 border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
-        <!-- root: 'space-y-1',
-                  list: 'space-y-1',
-                  item: '',
-                  listWithChildren: 'ms-4 border-s border-gray-200 dark:border-gray-700',
-                  itemWithChildren: 'flex flex-col',
-                  trigger: 'font-medium text-sm',
-                  link: 'group relative w-full px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200 flex items-center gap-2',
-                  linkLeadingIcon: 'shrink-0 size-5',
-                  linkTrailingIcon: 'size-4 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
-                  linkTitle: 'truncate'
-                   -->
         <!-- 分隔线 -->
+        <div
+          class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5"
+        />
 
-          <!-- Document Navigation -->
+        <!-- 文档目录导航 -->
+        <div class="overflow-y-auto" style="max-height: 80%">
           <UContainer>
             <UPageAside>
-              <UContentNavigation 
-                highlight 
+              <UContentNavigation
+                highlight
                 :navigation="navigation"
                 color="primary"
                 variant="pill"
-                :ui="{
-                }"
+                :ui="{}"
               />
             </UPageAside>
           </UContainer>
-
+        </div>
 
     </div>
   </aside>
diff --git a/content/2.essentials/1.index copy 2.md b/content/2.essentials/1.index copy 2.md
new file mode 100644
index 0000000..f1aec01
--- /dev/null
+++ b/content/2.essentials/1.index copy 2.md	
@@ -0,0 +1,230 @@
+---
+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
+
+Nuxt UI Pro 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*~~      |
+
+For exponents, indices, or mathematical notations, use HTML `<sup>` and `<sub>` tags.
+
+| Style       | How to use               | Result      |
+| ----------- | ------------------------ | ----------- |
+| Superscript | `<sup>superscript</sup>` | superscript |
+| Subscript   | `<sub>subscript</sub>`   | subscript   |
+
+## 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.
+```
+::
diff --git a/content/2.essentials/1.index copy 3.md b/content/2.essentials/1.index copy 3.md
new file mode 100644
index 0000000..f1aec01
--- /dev/null
+++ b/content/2.essentials/1.index copy 3.md	
@@ -0,0 +1,230 @@
+---
+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
+
+Nuxt UI Pro 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*~~      |
+
+For exponents, indices, or mathematical notations, use HTML `<sup>` and `<sub>` tags.
+
+| Style       | How to use               | Result      |
+| ----------- | ------------------------ | ----------- |
+| Superscript | `<sup>superscript</sup>` | superscript |
+| Subscript   | `<sub>subscript</sub>`   | subscript   |
+
+## 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.
+```
+::
diff --git a/content/2.essentials/1.index copy.md b/content/2.essentials/1.index copy.md
new file mode 100644
index 0000000..f1aec01
--- /dev/null
+++ b/content/2.essentials/1.index copy.md	
@@ -0,0 +1,230 @@
+---
+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
+
+Nuxt UI Pro 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*~~      |
+
+For exponents, indices, or mathematical notations, use HTML `<sup>` and `<sub>` tags.
+
+| Style       | How to use               | Result      |
+| ----------- | ------------------------ | ----------- |
+| Superscript | `<sup>superscript</sup>` | superscript |
+| Subscript   | `<sub>subscript</sub>`   | subscript   |
+
+## 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.
+```
+::
diff --git a/content/2.essentials/2.code-blocks copy 2.md b/content/2.essentials/2.code-blocks copy 2.md
new file mode 100644
index 0000000..79a604d
--- /dev/null
+++ b/content/2.essentials/2.code-blocks copy 2.md	
@@ -0,0 +1,458 @@
+---
+title: Code Blocks
+description: Display inline code and code blocks
+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']
+})
+```
+````
+::
+
+::tip
+Some icons are already defined by default, but you can add more in your `app.config.ts` through the `uiPro.prose.codeIcon` key:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  uiPro: {
+    prose: {
+      codeIcon: {
+        terminal: 'i-ph-terminal-window-duotone'
+      }
+    }
+  }
+})
+```
+::
+
+Every code-block has a built-in copy button that will copy the code to your clipboard.
+
+::tip
+You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+::
+
+#### Highlight Line
+
+To highlight lines of code, add `{}` around the line numbers you want to highlight.
+Line highlighting is useful for focusing users on important parts of code examples.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+```ts [nuxt.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+
+#code
+````mdc
+```ts [nuxt.config.ts]{4-5}
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+````
+::
+
+## 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
+```
+
+::
+````
+::
+
+::note{to="#pre"}
+Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.
+::
+
+### 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.
+  ````
+  :::
+::
+
+::note
+---
+target: _blank
+to: https://ui.nuxt.com/getting-started/typography#codetree
+---
+Learn more about the `code-tree` component.
+::
+
+### `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;
+}
+```
+
+::
+````
+::
diff --git a/content/2.essentials/2.code-blocks copy 3.md b/content/2.essentials/2.code-blocks copy 3.md
new file mode 100644
index 0000000..79a604d
--- /dev/null
+++ b/content/2.essentials/2.code-blocks copy 3.md	
@@ -0,0 +1,458 @@
+---
+title: Code Blocks
+description: Display inline code and code blocks
+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']
+})
+```
+````
+::
+
+::tip
+Some icons are already defined by default, but you can add more in your `app.config.ts` through the `uiPro.prose.codeIcon` key:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  uiPro: {
+    prose: {
+      codeIcon: {
+        terminal: 'i-ph-terminal-window-duotone'
+      }
+    }
+  }
+})
+```
+::
+
+Every code-block has a built-in copy button that will copy the code to your clipboard.
+
+::tip
+You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+::
+
+#### Highlight Line
+
+To highlight lines of code, add `{}` around the line numbers you want to highlight.
+Line highlighting is useful for focusing users on important parts of code examples.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+```ts [nuxt.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+
+#code
+````mdc
+```ts [nuxt.config.ts]{4-5}
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+````
+::
+
+## 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
+```
+
+::
+````
+::
+
+::note{to="#pre"}
+Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.
+::
+
+### 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.
+  ````
+  :::
+::
+
+::note
+---
+target: _blank
+to: https://ui.nuxt.com/getting-started/typography#codetree
+---
+Learn more about the `code-tree` component.
+::
+
+### `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;
+}
+```
+
+::
+````
+::
diff --git a/content/2.essentials/2.code-blocks copy.md b/content/2.essentials/2.code-blocks copy.md
new file mode 100644
index 0000000..79a604d
--- /dev/null
+++ b/content/2.essentials/2.code-blocks copy.md	
@@ -0,0 +1,458 @@
+---
+title: Code Blocks
+description: Display inline code and code blocks
+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']
+})
+```
+````
+::
+
+::tip
+Some icons are already defined by default, but you can add more in your `app.config.ts` through the `uiPro.prose.codeIcon` key:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  uiPro: {
+    prose: {
+      codeIcon: {
+        terminal: 'i-ph-terminal-window-duotone'
+      }
+    }
+  }
+})
+```
+::
+
+Every code-block has a built-in copy button that will copy the code to your clipboard.
+
+::tip
+You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+::
+
+#### Highlight Line
+
+To highlight lines of code, add `{}` around the line numbers you want to highlight.
+Line highlighting is useful for focusing users on important parts of code examples.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+```ts [nuxt.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+
+#code
+````mdc
+```ts [nuxt.config.ts]{4-5}
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+````
+::
+
+## 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
+```
+
+::
+````
+::
+
+::note{to="#pre"}
+Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.
+::
+
+### 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.
+  ````
+  :::
+::
+
+::note
+---
+target: _blank
+to: https://ui.nuxt.com/getting-started/typography#codetree
+---
+Learn more about the `code-tree` component.
+::
+
+### `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;
+}
+```
+
+::
+````
+::
diff --git a/content/2.essentials/3.prose-components copy 2.md b/content/2.essentials/3.prose-components copy 2.md
new file mode 100644
index 0000000..20fddb5
--- /dev/null
+++ b/content/2.essentials/3.prose-components copy 2.md	
@@ -0,0 +1,489 @@
+---
+title: Prose Components
+description: Components to help you structure your content.
+navigation:
+  icon: i-lucide-component
+---
+
+### Accordion
+
+Use `accordion` and `accordion-item` to create collapsible content sections. Accordions are useful for organizing FAQs, expandable details, or grouped information in an interactive way.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+  :::accordion
+    ::::accordion-item
+    ---
+    icon: i-lucide-circle-help
+    label: What are the main considerations when upgrading to Nuxt UI v3?
+    ---
+    The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
+    ::::
+  
+    ::::accordion-item
+    ---
+    icon: i-lucide-circle-help
+    label: Is Nuxt UI v3 compatible with standalone Vue projects?
+    ---
+    Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
+    ::::
+  
+    ::::accordion-item{icon="i-lucide-circle-help" label="What about Nuxt UI Pro?"}
+    We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
+    ::::
+  :::
+
+#code
+```mdc
+::accordion
+
+:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
+The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
+:::
+
+:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
+Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
+:::
+
+:::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
+We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
+:::
+
+::
+```
+::
+
+### Badge
+
+Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content.
+
+::code-preview
+---
+label: Preview
+---
+  :::badge
+  **v3.0.0-alpha.10**
+  :::
+
+#code
+```mdc
+::badge
+**v3.0.0-alpha.10**
+::
+```
+::
+
+### Callout
+
+Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out.
+
+Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+  :::callout
+  This is a `callout` with full **markdown** support.
+  :::
+
+#code
+```mdc
+::callout
+This is a `callout` with full **markdown** support.
+::
+```
+::
+
+::code-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.
+    ::::
+  :::
+
+#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
+
+Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers.
+
+Customize with `title`, `icon`, and `color` props. Cards can also act as links using `<NuxtLink>` properties for navigation.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+  :::card
+  ---
+  icon: i-simple-icons-github
+  target: _blank
+  title: Dashboard
+  to: https://github.com/nuxt-ui-pro/dashboard
+  ---
+  A dashboard with multi-column layout.
+  :::
+
+#code
+```mdc
+::card
+---
+title: Dashboard
+icon: i-simple-icons-github
+to: https://github.com/nuxt-ui-pro/dashboard
+target: _blank
+---
+A dashboard with multi-column layout.
+::
+```
+::
+
+### CardGroup
+
+Use `card-group` to arrange cards in a grid layout. `card-group` is ideal for displaying collections of cards in a structured, visually appealing, and responsive grid.
+
+::code-preview
+  :::card-group{.w-full}
+    ::::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.
+    ::::
+  :::
+
+#code
+```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
+
+Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+  :::collapsible
+  | Prop    | Default   | Type     |
+  | ------- | --------- | -------- |
+  | `name`  |           | `string` |
+  | `size`  | `md`      | `string` |
+  | `color` | `neutral` | `string` |
+  :::
+
+#code
+```mdc
+::collapsible
+
+| Prop    | Default   | Type                     |
+|---------|-----------|--------------------------|
+| `name`  |           | `string`{lang="ts-type"} |
+| `size`  | `md`      | `string`{lang="ts-type"} |
+| `color` | `neutral` | `string`{lang="ts-type"} |
+
+::
+```
+::
+
+### Field
+
+Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options.
+
+::code-preview
+  :::field{.w-full required name="name" type="string"}
+  The `description` can be set as prop or in the default slot with full **markdown** support.
+  :::
+
+#code
+```mdc
+::field{name="name" type="string" required}
+The `description` can be set as prop or in the default slot with full **markdown** support.
+::
+```
+::
+
+### FieldGroup
+
+Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties.
+
+::code-preview
+  :::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.
+    ::::
+  :::
+
+#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 `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation.
+
+::code-preview
+:icon{name="i-simple-icons-nuxtdotjs"}
+
+ 
+
+#code
+```mdc
+:icon{name="i-simple-icons-nuxtdotjs"}
+```
+::
+
+### Kbd
+
+Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+`` ``
+
+#code
+```mdc
+:kbd{value="meta"} :kbd{value="K"}
+```
+::
+
+### Tabs
+
+Use `tabs` and `tabs-item` to organize content into tabbed interfaces. Tabs are effective for separating content into logical sections, improving content discoverability and organization.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+  :::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
+
+:::tabs-item{label="Code" icon="i-lucide-code"}
+
+```mdc
+::callout
+Lorem velit voluptate ex reprehenderit ullamco et culpa.
+::
+```
+
+:::
+
+:::tabs-item{label="Preview" icon="i-lucide-eye"}
+
+::::callout
+Lorem velit voluptate ex reprehenderit ullamco et culpa.
+::::
+
+:::
+
+::
+````
+::
+
+### Steps
+
+Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials.
+
+Set the `level` prop to define the heading level to include in the step-by-step guide.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+  :::steps{level="4"}
+  #### Add the Nuxt UI Pro module in your `nuxt.config.ts`
+  
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    modules: ['@nuxt/ui-pro']
+  })
+  ```
+  
+  #### Import Tailwind CSS and Nuxt UI Pro in your CSS
+  
+  ```css [assets/css/main.css]
+  @import "tailwindcss";
+  @import "@nuxt/ui-pro";
+  ```
+  :::
+
+#code
+````mdc
+::steps{level="4"}
+
+#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro']
+})
+```
+
+#### Import Tailwind CSS and Nuxt UI Pro in your CSS
+
+```css [assets/css/main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+```
+
+::
+````
+::
diff --git a/content/2.essentials/3.prose-components copy 3.md b/content/2.essentials/3.prose-components copy 3.md
new file mode 100644
index 0000000..20fddb5
--- /dev/null
+++ b/content/2.essentials/3.prose-components copy 3.md	
@@ -0,0 +1,489 @@
+---
+title: Prose Components
+description: Components to help you structure your content.
+navigation:
+  icon: i-lucide-component
+---
+
+### Accordion
+
+Use `accordion` and `accordion-item` to create collapsible content sections. Accordions are useful for organizing FAQs, expandable details, or grouped information in an interactive way.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+  :::accordion
+    ::::accordion-item
+    ---
+    icon: i-lucide-circle-help
+    label: What are the main considerations when upgrading to Nuxt UI v3?
+    ---
+    The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
+    ::::
+  
+    ::::accordion-item
+    ---
+    icon: i-lucide-circle-help
+    label: Is Nuxt UI v3 compatible with standalone Vue projects?
+    ---
+    Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
+    ::::
+  
+    ::::accordion-item{icon="i-lucide-circle-help" label="What about Nuxt UI Pro?"}
+    We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
+    ::::
+  :::
+
+#code
+```mdc
+::accordion
+
+:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
+The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
+:::
+
+:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
+Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
+:::
+
+:::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
+We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
+:::
+
+::
+```
+::
+
+### Badge
+
+Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content.
+
+::code-preview
+---
+label: Preview
+---
+  :::badge
+  **v3.0.0-alpha.10**
+  :::
+
+#code
+```mdc
+::badge
+**v3.0.0-alpha.10**
+::
+```
+::
+
+### Callout
+
+Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out.
+
+Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+  :::callout
+  This is a `callout` with full **markdown** support.
+  :::
+
+#code
+```mdc
+::callout
+This is a `callout` with full **markdown** support.
+::
+```
+::
+
+::code-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.
+    ::::
+  :::
+
+#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
+
+Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers.
+
+Customize with `title`, `icon`, and `color` props. Cards can also act as links using `<NuxtLink>` properties for navigation.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+  :::card
+  ---
+  icon: i-simple-icons-github
+  target: _blank
+  title: Dashboard
+  to: https://github.com/nuxt-ui-pro/dashboard
+  ---
+  A dashboard with multi-column layout.
+  :::
+
+#code
+```mdc
+::card
+---
+title: Dashboard
+icon: i-simple-icons-github
+to: https://github.com/nuxt-ui-pro/dashboard
+target: _blank
+---
+A dashboard with multi-column layout.
+::
+```
+::
+
+### CardGroup
+
+Use `card-group` to arrange cards in a grid layout. `card-group` is ideal for displaying collections of cards in a structured, visually appealing, and responsive grid.
+
+::code-preview
+  :::card-group{.w-full}
+    ::::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.
+    ::::
+  :::
+
+#code
+```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
+
+Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+  :::collapsible
+  | Prop    | Default   | Type     |
+  | ------- | --------- | -------- |
+  | `name`  |           | `string` |
+  | `size`  | `md`      | `string` |
+  | `color` | `neutral` | `string` |
+  :::
+
+#code
+```mdc
+::collapsible
+
+| Prop    | Default   | Type                     |
+|---------|-----------|--------------------------|
+| `name`  |           | `string`{lang="ts-type"} |
+| `size`  | `md`      | `string`{lang="ts-type"} |
+| `color` | `neutral` | `string`{lang="ts-type"} |
+
+::
+```
+::
+
+### Field
+
+Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options.
+
+::code-preview
+  :::field{.w-full required name="name" type="string"}
+  The `description` can be set as prop or in the default slot with full **markdown** support.
+  :::
+
+#code
+```mdc
+::field{name="name" type="string" required}
+The `description` can be set as prop or in the default slot with full **markdown** support.
+::
+```
+::
+
+### FieldGroup
+
+Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties.
+
+::code-preview
+  :::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.
+    ::::
+  :::
+
+#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 `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation.
+
+::code-preview
+:icon{name="i-simple-icons-nuxtdotjs"}
+
+ 
+
+#code
+```mdc
+:icon{name="i-simple-icons-nuxtdotjs"}
+```
+::
+
+### Kbd
+
+Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+`` ``
+
+#code
+```mdc
+:kbd{value="meta"} :kbd{value="K"}
+```
+::
+
+### Tabs
+
+Use `tabs` and `tabs-item` to organize content into tabbed interfaces. Tabs are effective for separating content into logical sections, improving content discoverability and organization.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+  :::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
+
+:::tabs-item{label="Code" icon="i-lucide-code"}
+
+```mdc
+::callout
+Lorem velit voluptate ex reprehenderit ullamco et culpa.
+::
+```
+
+:::
+
+:::tabs-item{label="Preview" icon="i-lucide-eye"}
+
+::::callout
+Lorem velit voluptate ex reprehenderit ullamco et culpa.
+::::
+
+:::
+
+::
+````
+::
+
+### Steps
+
+Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials.
+
+Set the `level` prop to define the heading level to include in the step-by-step guide.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+  :::steps{level="4"}
+  #### Add the Nuxt UI Pro module in your `nuxt.config.ts`
+  
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    modules: ['@nuxt/ui-pro']
+  })
+  ```
+  
+  #### Import Tailwind CSS and Nuxt UI Pro in your CSS
+  
+  ```css [assets/css/main.css]
+  @import "tailwindcss";
+  @import "@nuxt/ui-pro";
+  ```
+  :::
+
+#code
+````mdc
+::steps{level="4"}
+
+#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro']
+})
+```
+
+#### Import Tailwind CSS and Nuxt UI Pro in your CSS
+
+```css [assets/css/main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+```
+
+::
+````
+::
diff --git a/content/2.essentials/3.prose-components copy.md b/content/2.essentials/3.prose-components copy.md
new file mode 100644
index 0000000..20fddb5
--- /dev/null
+++ b/content/2.essentials/3.prose-components copy.md	
@@ -0,0 +1,489 @@
+---
+title: Prose Components
+description: Components to help you structure your content.
+navigation:
+  icon: i-lucide-component
+---
+
+### Accordion
+
+Use `accordion` and `accordion-item` to create collapsible content sections. Accordions are useful for organizing FAQs, expandable details, or grouped information in an interactive way.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+  :::accordion
+    ::::accordion-item
+    ---
+    icon: i-lucide-circle-help
+    label: What are the main considerations when upgrading to Nuxt UI v3?
+    ---
+    The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
+    ::::
+  
+    ::::accordion-item
+    ---
+    icon: i-lucide-circle-help
+    label: Is Nuxt UI v3 compatible with standalone Vue projects?
+    ---
+    Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
+    ::::
+  
+    ::::accordion-item{icon="i-lucide-circle-help" label="What about Nuxt UI Pro?"}
+    We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
+    ::::
+  :::
+
+#code
+```mdc
+::accordion
+
+:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
+The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
+:::
+
+:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
+Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
+:::
+
+:::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
+We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
+:::
+
+::
+```
+::
+
+### Badge
+
+Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content.
+
+::code-preview
+---
+label: Preview
+---
+  :::badge
+  **v3.0.0-alpha.10**
+  :::
+
+#code
+```mdc
+::badge
+**v3.0.0-alpha.10**
+::
+```
+::
+
+### Callout
+
+Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out.
+
+Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+  :::callout
+  This is a `callout` with full **markdown** support.
+  :::
+
+#code
+```mdc
+::callout
+This is a `callout` with full **markdown** support.
+::
+```
+::
+
+::code-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.
+    ::::
+  :::
+
+#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
+
+Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers.
+
+Customize with `title`, `icon`, and `color` props. Cards can also act as links using `<NuxtLink>` properties for navigation.
+
+::code-preview
+---
+class: "[&>div]:*:my-0 [&>div]:*:w-full"
+---
+  :::card
+  ---
+  icon: i-simple-icons-github
+  target: _blank
+  title: Dashboard
+  to: https://github.com/nuxt-ui-pro/dashboard
+  ---
+  A dashboard with multi-column layout.
+  :::
+
+#code
+```mdc
+::card
+---
+title: Dashboard
+icon: i-simple-icons-github
+to: https://github.com/nuxt-ui-pro/dashboard
+target: _blank
+---
+A dashboard with multi-column layout.
+::
+```
+::
+
+### CardGroup
+
+Use `card-group` to arrange cards in a grid layout. `card-group` is ideal for displaying collections of cards in a structured, visually appealing, and responsive grid.
+
+::code-preview
+  :::card-group{.w-full}
+    ::::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.
+    ::::
+  :::
+
+#code
+```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
+
+Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+  :::collapsible
+  | Prop    | Default   | Type     |
+  | ------- | --------- | -------- |
+  | `name`  |           | `string` |
+  | `size`  | `md`      | `string` |
+  | `color` | `neutral` | `string` |
+  :::
+
+#code
+```mdc
+::collapsible
+
+| Prop    | Default   | Type                     |
+|---------|-----------|--------------------------|
+| `name`  |           | `string`{lang="ts-type"} |
+| `size`  | `md`      | `string`{lang="ts-type"} |
+| `color` | `neutral` | `string`{lang="ts-type"} |
+
+::
+```
+::
+
+### Field
+
+Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options.
+
+::code-preview
+  :::field{.w-full required name="name" type="string"}
+  The `description` can be set as prop or in the default slot with full **markdown** support.
+  :::
+
+#code
+```mdc
+::field{name="name" type="string" required}
+The `description` can be set as prop or in the default slot with full **markdown** support.
+::
+```
+::
+
+### FieldGroup
+
+Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties.
+
+::code-preview
+  :::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.
+    ::::
+  :::
+
+#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 `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation.
+
+::code-preview
+:icon{name="i-simple-icons-nuxtdotjs"}
+
+ 
+
+#code
+```mdc
+:icon{name="i-simple-icons-nuxtdotjs"}
+```
+::
+
+### Kbd
+
+Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+`` ``
+
+#code
+```mdc
+:kbd{value="meta"} :kbd{value="K"}
+```
+::
+
+### Tabs
+
+Use `tabs` and `tabs-item` to organize content into tabbed interfaces. Tabs are effective for separating content into logical sections, improving content discoverability and organization.
+
+::code-preview
+---
+class: "[&>div]:*:my-0"
+---
+  :::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
+
+:::tabs-item{label="Code" icon="i-lucide-code"}
+
+```mdc
+::callout
+Lorem velit voluptate ex reprehenderit ullamco et culpa.
+::
+```
+
+:::
+
+:::tabs-item{label="Preview" icon="i-lucide-eye"}
+
+::::callout
+Lorem velit voluptate ex reprehenderit ullamco et culpa.
+::::
+
+:::
+
+::
+````
+::
+
+### Steps
+
+Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials.
+
+Set the `level` prop to define the heading level to include in the step-by-step guide.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+  :::steps{level="4"}
+  #### Add the Nuxt UI Pro module in your `nuxt.config.ts`
+  
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    modules: ['@nuxt/ui-pro']
+  })
+  ```
+  
+  #### Import Tailwind CSS and Nuxt UI Pro in your CSS
+  
+  ```css [assets/css/main.css]
+  @import "tailwindcss";
+  @import "@nuxt/ui-pro";
+  ```
+  :::
+
+#code
+````mdc
+::steps{level="4"}
+
+#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui-pro']
+})
+```
+
+#### Import Tailwind CSS and Nuxt UI Pro in your CSS
+
+```css [assets/css/main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+```
+
+::
+````
+::
diff --git a/content/2.essentials/4.images-embeds copy 2.md b/content/2.essentials/4.images-embeds copy 2.md
new file mode 100644
index 0000000..4df024b
--- /dev/null
+++ b/content/2.essentials/4.images-embeds copy 2.md	
@@ -0,0 +1,57 @@
+---
+title: Images and Embeds
+description: Add image, video, and other HTML elements
+navigation:
+  icon: i-lucide-image
+---
+
+## Image
+
+### Using Markdown
+
+Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display.
+
+::code-preview
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+
+#code
+```mdc
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+```
+::
+
+::note
+If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `<NuxtImg>` component will be used instead of the native `img` tag.
+::
+
+### Using Embeds
+
+Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling.
+
+::code-preview
+![Nuxt Social Image](https://nuxt.com/new-social.jpg){height="150"}
+
+
+
+#code
+```mdc
+:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"}
+```
+::
+
+## Embeds and HTML elements
+
+Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
+
+
+#code
+```mdc
+:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
+```
+::
diff --git a/content/2.essentials/4.images-embeds copy 3.md b/content/2.essentials/4.images-embeds copy 3.md
new file mode 100644
index 0000000..4df024b
--- /dev/null
+++ b/content/2.essentials/4.images-embeds copy 3.md	
@@ -0,0 +1,57 @@
+---
+title: Images and Embeds
+description: Add image, video, and other HTML elements
+navigation:
+  icon: i-lucide-image
+---
+
+## Image
+
+### Using Markdown
+
+Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display.
+
+::code-preview
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+
+#code
+```mdc
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+```
+::
+
+::note
+If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `<NuxtImg>` component will be used instead of the native `img` tag.
+::
+
+### Using Embeds
+
+Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling.
+
+::code-preview
+![Nuxt Social Image](https://nuxt.com/new-social.jpg){height="150"}
+
+
+
+#code
+```mdc
+:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"}
+```
+::
+
+## Embeds and HTML elements
+
+Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
+
+
+#code
+```mdc
+:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
+```
+::
diff --git a/content/2.essentials/4.images-embeds copy.md b/content/2.essentials/4.images-embeds copy.md
new file mode 100644
index 0000000..4df024b
--- /dev/null
+++ b/content/2.essentials/4.images-embeds copy.md	
@@ -0,0 +1,57 @@
+---
+title: Images and Embeds
+description: Add image, video, and other HTML elements
+navigation:
+  icon: i-lucide-image
+---
+
+## Image
+
+### Using Markdown
+
+Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display.
+
+::code-preview
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+
+#code
+```mdc
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+```
+::
+
+::note
+If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `<NuxtImg>` component will be used instead of the native `img` tag.
+::
+
+### Using Embeds
+
+Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling.
+
+::code-preview
+![Nuxt Social Image](https://nuxt.com/new-social.jpg){height="150"}
+
+
+
+#code
+```mdc
+:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"}
+```
+::
+
+## Embeds and HTML elements
+
+Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content.
+
+::code-preview
+---
+class: "[&>div]:*:w-full"
+---
+:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
+
+
+#code
+```mdc
+:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
+```
+::