diff --git a/content/2.components/1.prose.md b/content/2.components/1.prose.md
index a11c1103..3b64c597 100644
--- a/content/2.components/1.prose.md
+++ b/content/2.components/1.prose.md
@@ -4,10 +4,10 @@ description: A showcase of all shadcn-docs prose components.
 icon: lucide:letter-text
 ---
 
-### Heading
+## Heading
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4 md:p-8"}
   # Heading 1
   ## Heading 2
   ### Heading 3
@@ -16,7 +16,7 @@ icon: lucide:letter-text
   ###### Heading 6
   ::
 
-  ```md [Code]
+  ```md
   # Heading 1
   ## Heading 2
   ### Heading 3
@@ -26,63 +26,108 @@ icon: lucide:letter-text
   ```
 ::
 
-### Link
+## Link
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   [Link](/getting-started/introduction)
   ::
 
-  ```md [Code]
+  ```md
   [Link](/getting-started/introduction)
   ```
 ::
 
-### Blockquote
+## Blockquote
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   ::
 
-  ```md [Code]
+  ```md
   > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   ```
 ::
 
-### Code Block
+## Code Block
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
-  #### Code Block
+::stack
+  ::div{class="p-4"}
   ```ts
   export default () => {
     console.log('Code block');
   };
   ```
+  ::
+  ````md
+  ```ts
+  export default () => {
+    console.log('Code block');
+  };
+  ```
+  ````
+::
 
-  #### With Title
+### With Title
+
+::stack
+  ::div{class="p-4"}
   ```ts [nuxt.config.ts]
   export default defineNuxtConfig({
     // My Nuxt config
   });
   ```
+  ::
+  ````md
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
+    // My Nuxt config
+  });
+  ```
+  ````
+::
 
-  #### Highlight Lines
+### Highlight Lines
+
+::stack
+  ::div{class="p-4"}
   ```ts{2}
   export default () => {
     console.log('Code block');
   };
   ```
+  ::
+  ````md
+  ```ts{2}
+  export default () => {
+    console.log('Code block');
+  };
+  ```
+  ````
+::
 
-  #### Line Numbers
+### Line Numbers
+::stack
+  ::div{class="p-4"}
+  ```ts{1} line-numbers
+  // line-numbers is enabled
+  const line2 = 'This is line 2';
+  const line3 = 'This is line 3';
+  ```
+  ::
+  ````md
   ```ts{1} line-numbers
   // line-numbers is enabled
   const line2 = 'This is line 2';
   const line3 = 'This is line 3';
   ```
+  ````
+::
 
-  #### Fixed Height
+### Fixed Height
+::stack
+  ::div{class="p-4"}
   ```ts height=150
   const parsedMeta = computed(() => {
     const split = meta?.split(' ') ?? [];
@@ -96,45 +141,8 @@ icon: lucide:letter-text
     return params;
   });
   ```
-
-  #### Custom Icon
-  ```ts [Custom Icon] icon=lucide:code-xml line-numbers
-  // line-numbers is enabled
-  const line2 = 'This is line 2';
-  const line3 = 'This is line 3';
-  ```
   ::
-
-  ````md [Code]
-  #### Code Block
-  ```ts
-  export default () => {
-    console.log('Code block');
-  };
-  ```
-
-  #### With Title
-  ```ts [nuxt.config.ts]
-  export default defineNuxtConfig({
-    // My Nuxt config
-  });
-  ```
-
-  #### Highlight Lines
-  ```ts{2}
-  export default () => {
-    console.log('Code block');
-  };
-  ```
-
-  #### Line Numbers
-  ```ts{1} line-numbers
-  // line-numbers is enabled
-  const line2 = 'This is line 2';
-  const line3 = 'This is line 3';
-  ```
-
-  #### Fixed Height
+  ````md
   ```ts height=150
   const parsedMeta = computed(() => {
     const split = meta?.split(' ') ?? [];
@@ -148,8 +156,19 @@ icon: lucide:letter-text
     return params;
   });
   ```
+  ````
+::
 
-  #### Custom Icon
+### Custom Icon
+::stack
+  ::div{class="p-4"}
+  ```ts [Custom Icon] icon=lucide:code-xml line-numbers
+  // line-numbers is enabled
+  const line2 = 'This is line 2';
+  const line3 = 'This is line 3';
+  ```
+  ::
+  ````md
   ```ts [Custom Icon] icon=lucide:code-xml line-numbers
   // line-numbers is enabled
   const line2 = 'This is line 2';
@@ -158,26 +177,26 @@ icon: lucide:letter-text
   ````
 ::
 
-### Inline Code
+## Inline Code
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   `code inline`
 
   `const codeInline: string = 'highlighted code inline'`{lang="ts"}
   ::
 
-  ```md [Code]
+  ```md
   `code inline`
 
   `const codeInline: string = 'highlighted code inline'`{lang="ts"}
   ```
 ::
 
-### Horizontal Rule
+## Horizontal Rule
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   Before
 
   ---
@@ -185,7 +204,7 @@ icon: lucide:letter-text
   After
   ::
 
-  ```md [Code]
+  ```md
   Before
 
   ---
@@ -194,90 +213,90 @@ icon: lucide:letter-text
   ```
 ::
 
-### Image
+## Image
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   ![Photo by Drew Beamer](https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80)
   ::
 
-  ```md [Code]
+  ```md
   ![Photo by Drew Beamer](https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80)
   ```
 ::
 
-### Unordered List
+## Unordered List
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   - Foo
   - Bar
   - Baz
   ::
 
-  ```md [Code]
+  ```md
   - Foo
   - Bar
   - Baz
   ```
 ::
 
-### Ordered List
+## Ordered List
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   1. Foo
   2. Bar
   3. Baz
   ::
 
-  ```md [Code]
+  ```md
   1. Foo
   2. Bar
   3. Baz
   ```
 ::
 
-### Paragraph
+## Paragraph
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   ::
 
-  ```md [Code]
+  ```md
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   ```
 ::
 
-### Strong
+## Strong
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   **Just a strong paragraph.**
   ::
 
-  ```md [Code]
+  ```md
   **Just a strong paragraph.**
   ```
 ::
 
-### Italic
+## Italic
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   _Just an italic paragraph._
   ::
 
-  ```md [Code]
+  ```md
   _Just an italic paragraph._
   ```
 ::
 
-### Table
+## Table
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
   | Key | Type      | Description                                 |
   | --- | --------- | ------------------------------------------- |
   | 1   | Wonderful | Table with `some long code snippet example` |
@@ -285,7 +304,7 @@ icon: lucide:letter-text
   | 3   | Wonderful | Website                                     |
   ::
 
-  ```md [Code]
+  ```md
   | Key | Type      | Description                                 |
   | --- | --------- | ------------------------------------------- |
   | 1   | Wonderful | Table with `some long code snippet example` |
@@ -294,10 +313,10 @@ icon: lucide:letter-text
   ```
 ::
 
-### Overview
+## Overview
 
-::code-group
-  ::div{label="Preview" class="p-4"}
+::stack
+  ::div{class="p-8"}
   # The Joke Tax Chronicles
 
   Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
@@ -339,7 +358,7 @@ icon: lucide:letter-text
   The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
   ::
 
-  ```md [Code]
+  ```md height=400
   # The Joke Tax Chronicles
 
   Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
diff --git a/content/2.components/2.docs/alert.md b/content/2.components/2.docs/alert.md
index 5c922e15..ff7ac5f7 100644
--- a/content/2.components/2.docs/alert.md
+++ b/content/2.components/2.docs/alert.md
@@ -10,88 +10,149 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
-    ::alert{icon="lucide:info"}
-      A **default** alert with `code` and a [link](/).
-    ::
+## Usage
 
-    ::alert{type="secondary" icon="lucide:info"}
-      A **secondary** alert with `code` and a [link](/).
-    ::
+::stack
+  ::div{class="p-4"}
+  ::alert{icon="lucide:info"}
+    A **default** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="secondary" icon="lucide:info"}
+    A **secondary** alert with `code` and a [link](/).
+  ::
+  ::
+  ```mdc
+  ::alert{icon="lucide:info"}
+    A **default** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="secondary" icon="lucide:info"}
+    A **secondary** alert with `code` and a [link](/).
+  ::
+  ```
+::
+
+### Link
+
+::stack
+  ::div{class="p-4"}
+  ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
+    A **link** alert.
+  ::
+  ::
+  ```mdc
+  ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
+    A **link** alert.
+  ::
+  ```
+::
+
+### Variants
 
+::tabs{variant="line"}
+  ::stack{label="info" icon="lucide:info"}
+    ::div{class="p-3"}
+    ::alert{type="info" icon="lucide:info"}
+      An **info** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
     ::alert{type="info" icon="lucide:info"}
       An **info** alert with `code` and a [link](/).
     ::
+    ```
+  ::
 
+  ::stack{label="note" icon="lucide:pencil"}
+    ::div{class="p-3"}
     ::alert{type="note" icon="lucide:pencil"}
       A **note** alert with `code` and a [link](/).
     ::
+    ::
+    ```mdc
+    ::alert{type="note" icon="lucide:pencil"}
+      A **note** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
 
+  ::stack{label="success" icon="lucide:lightbulb"}
+    ::div{class="p-3"}
     ::alert{type="success" icon="lucide:lightbulb"}
       A **success** alert with `code` and a [link](/).
     ::
+    ::
+    ```mdc
+    ::alert{type="success" icon="lucide:lightbulb"}
+      A **success** alert with `code` and a [link](/).
+    ::
+    ```
+  ::
 
+  ::stack{label="example" icon="lucide:test-tube"}
+    ::div{class="p-3"}
+    ::alert{type="example" icon="lucide:test-tube"}
+      An **example** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
     ::alert{type="example" icon="lucide:test-tube"}
       An **example** alert with `code` and a [link](/).
     ::
+    ```
+  ::
 
+  ::stack{label="warning" icon="lucide:triangle-alert"}
+    ::div{class="p-3"}
+    ::alert{type="warning" icon="lucide:triangle-alert"}
+      A **warning** alert with `code` and a [link](/).
+    ::
+    ::
+    ```mdc
     ::alert{type="warning" icon="lucide:triangle-alert"}
       A **warning** alert with `code` and a [link](/).
     ::
+    ```
+  ::
 
+  ::stack{label="danger" icon="lucide:circle-x"}
+    ::div{class="p-3"}
     ::alert{type="danger" icon="lucide:circle-x"}
       A **danger** alert with `code` and a [link](/).
     ::
-
-    ::alert{title="Title" icon="lucide:layout-list"}
-      An alert with a title.
     ::
-
-    ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
-      A **link** alert.
+    ```mdc
+    ::alert{type="danger" icon="lucide:circle-x"}
+      A **danger** alert with `code` and a [link](/).
     ::
+    ```
   ::
+::
 
-  ```mdc [Code]
-  ::alert{icon="lucide:info"}
-    A **default** alert with `code` and a [link](/).
-  ::
-
-  ::alert{type="secondary" icon="lucide:info"}
-    A **secondary** alert with `code` and a [link](/).
-  ::
-
-  ::alert{type="info" icon="lucide:info"}
-    An **info** alert with `code` and a [link](/).
-  ::
-
-  ::alert{type="note" icon="lucide:pencil"}
-    A **note** alert with `code` and a [link](/).
-  ::
-
-  ::alert{type="success" icon="lucide:lightbulb"}
-    A **success** alert with `code` and a [link](/).
-  ::
+### Title
 
-  ::alert{type="example" icon="lucide:test-tube"}
-    An **example** alert with `code` and a [link](/).
-  ::
-
-  ::alert{type="warning" icon="lucide:triangle-alert"}
-    A **warning** alert with `code` and a [link](/).
+::stack
+  ::div{class="p-4"}
+  ::alert{title="Title" icon="lucide:layout-list"}
+    An alert with a title.
   ::
-
-  ::alert{type="danger" icon="lucide:circle-x"}
-    A **danger** alert with `code` and a [link](/).
   ::
-
+  ```mdc
   ::alert{title="Title" icon="lucide:layout-list"}
     An alert with a title.
   ::
-
-  ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
-    A **link** alert.
-  ::
   ```
 ::
+
+## Props
+
+::field-group
+  :field{name="title" type="string"}[Alert title]
+  :field{name="icon" type="string"}[Alert icon]
+  :field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'secondary'" default-value="'default'"}
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+  :field{name="external" type="boolean"}[Alias to `target='_blank'`]
+  :field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
+::
diff --git a/content/2.components/2.docs/badge.md b/content/2.components/2.docs/badge.md
index 49256944..f4082fa6 100644
--- a/content/2.components/2.docs/badge.md
+++ b/content/2.components/2.docs/badge.md
@@ -11,46 +11,115 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
-    ::badge
-      Default
+## Usage
+
+::stack
+  ::div{class="p-3"}
+  ::badge
+    Default
+  ::
+  ::badge{size="sm"}
+    Small
+  ::
+  ::
+  ```mdc
+  ::badge
+    Default
+  ::
+  ::badge{size="sm"}
+    Small
+  ::
+  ```
+::
+
+### Variants
+
+::tabs{variant="line"}
+  ::stack{label="outline"}
+    ::div{class="p-3"}
+    :badge[Outline]{variant="outline"}
     ::
-    ::badge{size="sm"}
-      Small
+    ```mdc
+    :badge[Outline]{variant="outline"}
+    ```
+  ::
+
+  ::stack{label="secondary"}
+    ::div{class="p-3"}
+    :badge[Secondary]{variant="secondary"}
+    ::
+    ```mdc
+    :badge[Secondary]{variant="secondary"}
+    ```
+  ::
+
+  ::stack{label="info"}
+    ::div{class="p-3"}
+    :badge[Info]{type="info"}
     ::
-    ::badge{type="info"}
-      Info
+    ```mdc
+    :badge[Info]{type="info"}
+    ```
+  ::
+
+  ::stack{label="warning"}
+    ::div{class="p-3"}
+    :badge[Warning]{type="warning"}
     ::
+    ```mdc
     :badge[Warning]{type="warning"}
+    ```
+  ::
+
+  ::stack{label="success"}
+    ::div{class="p-3"}
+    :badge[Success]{type="success"}
+    ::
+    ```mdc
     :badge[Success]{type="success"}
+    ```
+  ::
+
+  ::stack{label="lime"}
+    ::div{class="p-3"}
     :badge[lime]{type="lime"}
-    :badge[Danger]{type="danger"}
-    :badge[Outline]{variant="outline"}
-    :badge[Secondary]{variant="secondary"}
-    ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
-      Link
     ::
+    ```mdc
+    :badge[lime]{type="lime"}
+    ```
   ::
 
-  ```mdc [Code]
-  ::badge
-    Default
+  ::stack{label="danger"}
+    ::div{class="p-3"}
+    :badge[Danger]{type="danger"}
+    ::
+    ```mdc
+    :badge[Danger]{type="danger"}
+    ```
   ::
-  ::badge{size="sm"}
-    Small
+::
+
+### Link
+
+::stack
+  ::div{class="p-3"}
+  ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+  Link
   ::
-  ::badge{type="info"}
-    Info
   ::
-  :badge[Warning]{type="warning"}
-  :badge[Success]{type="success"}
-  :badge[lime]{type="lime"}
-  :badge[Danger]{type="danger"}
-  :badge[Outline]{variant="outline"}
-  :badge[Secondary]{variant="secondary"}
+  ```mdc
   ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
-    Link
+  Link
   ::
   ```
 ::
+
+## Props
+
+::field-group
+  :field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'" default-value="'default'"}
+  :field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline'" default-value="'default'"}
+  :field{name="size" type="'md' | 'sm'" default-value="'md'"}
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+::
diff --git a/content/2.components/2.docs/button-link.md b/content/2.components/2.docs/button-link.md
index 40053d2c..ca3e5549 100644
--- a/content/2.components/2.docs/button-link.md
+++ b/content/2.components/2.docs/button-link.md
@@ -12,15 +12,42 @@ badges:
   - value: 0.6.5
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4 flex gap-4"}
-    :button-link[Get Started]{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
-    :button-link[GitHub]{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
-    :button-link[Ghost]{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+## Usage
+
+::stack
+  ::div{class="p-3 flex gap-4"}
+  ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+    Get Started
+  ::
+  ::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+    GitHub
+  ::
+  ::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+    Ghost
+  ::
+  ::
+  ```mdc
+  ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+    Get Started
+  ::
+  ::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+    GitHub
+  ::
+  ::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
+    Ghost
   ::
-  ```mdc [Code]
-  :button-link[Get Started]{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
-  :button-link[GitHub]{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
-  :button-link[Ghost]{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
   ```
 ::
+
+## Props
+
+::field-group
+  :field{name="variant" type="'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'" default-value="'default'"}
+  :field{name="size" type="'default' | 'icon' | 'sm' | 'xs' | 'lg'" default-value="'default'"}
+  :field{name="leftIcon" type="string"}[Icon on the left]
+  :field{name="rightIcon" type="string"}[Icon on the right]
+  :field{name="to" type="string"}[Link URL]
+  :field{name="href" type="string"}[Alias to `to`]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+  :field{name="blank" type="boolean"}[Alias to `target='_blank'`]
+::
diff --git a/content/2.components/2.docs/card-group.md b/content/2.components/2.docs/card-group.md
index 156661bd..4e6fee0b 100644
--- a/content/2.components/2.docs/card-group.md
+++ b/content/2.components/2.docs/card-group.md
@@ -11,8 +11,10 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     ::card-group
       ::card
       ---
@@ -52,7 +54,7 @@ badges:
       ::
     ::
   ::
-  ```mdc [Code]
+  ```mdc
   ::card-group
     ::card
     ---
@@ -63,6 +65,7 @@ badges:
     ---
     Explore Nuxt built-in components for pages, layouts, head, and more.
     ::
+
     ::card
     ---
     title: Composables
@@ -72,6 +75,7 @@ badges:
     ---
     Discover Nuxt composable functions for data-fetching, head management and more.
     ::
+
     ::card
     ---
     title: Utils
@@ -81,6 +85,7 @@ badges:
     ---
     Learn about Nuxt utility functions for navigation, error handling and more.
     ::
+
     ::card
     ---
     title: Commands
diff --git a/content/2.components/2.docs/card.md b/content/2.components/2.docs/card.md
index de644a6f..ecb18e77 100644
--- a/content/2.components/2.docs/card.md
+++ b/content/2.components/2.docs/card.md
@@ -14,129 +14,123 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
-    ::card
-    #title
-    Card with slots
-
-    #description
-    Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-
-    #content
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
-
-    #footer
-    `Card Footer`
-    ::
-
-    ::card
-    ---
-    title: Card with props
-    description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-    footer: Card Footer
-    icon: 'lucide:box'
-    ---
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
-    ::
-
-    ::card
-    ---
-    title: Horizontal Card
-    description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-    icon: 'lucide:fold-horizontal'
-    icon-size: 26
-    horizontal: true
-    ---
-    ::
-
-    ::card
-    ---
-    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
-    target: _blank
-    ---
-    #title
-    Card with link
-
-    #content
-    Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-    ::
-
-    ::card
-    ---
-    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
-    target: _blank
-    showLinkIcon: false
-    ---
-    #title
-    Disable link icon
-
-    #content
-    Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-    ::
-
-    ::card
-    ---
-    img: /og-nuxt.png
-    ---
-    #title
-    Image Card
-
-    #content
-    Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-    ::
-  ::
+## Usage
 
-  ```mdc [Code]
+::stack
+  ::div{class="p-4"}
   ::card
+  ---
+  icon: lucide:box
+  ---
+
   #title
-  Card with slots
+  Card Title
 
   #description
-  Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+  Description
 
   #content
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
 
   #footer
-  `Card Footer`
+  Footer
   ::
-
+  ::
+  ```mdc
   ::card
   ---
-  title: Card with props
-  description: Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
-  footer: Card Footer
-  icon: 'lucide:box'
+  icon: lucide:box
   ---
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+
+  #title
+  Card Title
+
+  #description
+  Description
+
+  #content
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+
+  #footer
+  Footer
   ::
+  ```
+::
 
+### Link
+
+::stack
+  ::div{class="p-4"}
   ::card
   ---
   to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
   target: _blank
+  # showLinkIcon: false
   ---
+
   #title
-  Card with link
+  Link Card
 
   #content
-  Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
   ::
-
+  ::
+  ```mdc
   ::card
   ---
   to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
   target: _blank
-  showLinkIcon: false
+  # showLinkIcon: false
   ---
+
   #title
-  Disable link icon
+  Link Card
 
   #content
-  Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
   ::
+  ```
+::
+
+### Horizontal
 
+::stack
+  ::div{class="p-4"}
+  ::card
+  ---
+  icon: 'lucide:fold-horizontal'
+  icon-size: 26
+  horizontal: true
+  ---
+
+  #title
+  Horizontal Card
+
+  #description
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ::
+  ```mdc
+  ::card
+  ---
+  icon: 'lucide:fold-horizontal'
+  icon-size: 26
+  horizontal: true
+  ---
+
+  #title
+  Horizontal Card
+
+  #description
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ```
+::
+
+### Image
+
+::stack
+  ::div{class="p-4"}
   ::card
   ---
   img: /og-nuxt.png
@@ -145,7 +139,35 @@ badges:
   Image Card
 
   #content
-  Beautifully designed Nuxt Content template with shadcn-vue. Customizable. Compatible. Open Source.
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+  ::
+  ::
+  ```mdc
+  ::card
+  ---
+  img: /og-nuxt.png
+  ---
+  #title
+  Image Card
+
+  #content
+  Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
   ::
   ```
 ::
+
+## Props
+
+::field-group
+  :field{name="title" type="string"}[Card title]
+  :field{name="description" type="string"}[Card description]
+  :field{name="content" type="string"}[Card content]
+  :field{name="footer" type="string"}[Card footer]
+  :field{name="icon" type="string"}[Card icon]
+  :field{name="horizontal" type="boolean" default-value="false"}
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+  :field{name="iconSize" type="number" default-value="24"}
+  :field{name="img" type="string"}[Image URL]
+  :field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
+::
diff --git a/content/2.components/2.docs/code-group.md b/content/2.components/2.docs/code-group.md
index c8985bb9..4273a7ee 100644
--- a/content/2.components/2.docs/code-group.md
+++ b/content/2.components/2.docs/code-group.md
@@ -14,8 +14,10 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     ::code-group
       ```vue [app.vue]
       <template>
@@ -26,6 +28,7 @@ badges:
         </div>
       </template>
       ```
+
       ```vue [pages/index.vue]
       <template>
         <div>
@@ -39,7 +42,7 @@ badges:
     ::
   ::
 
-  ```mdc [Code]
+  ```mdc
   ::code-group
     ```vue [app.vue]
     <template>
@@ -50,6 +53,7 @@ badges:
       </div>
     </template>
     ```
+
     ```vue [pages/index.vue]
     <template>
       <div>
@@ -67,3 +71,7 @@ badges:
 ::alert{to="/components/docs/tabs"}
 `::code-group`{lang="mdc"} is a wrapper around `::tabs{variant="card"}`{lang="mdc"}.
 ::
+
+## Props
+
+:field{name="sync" type="string"}[Sync scope for `::tabs`]
diff --git a/content/2.components/2.docs/field-group.md b/content/2.components/2.docs/field-group.md
index a0f217f3..15367bdf 100644
--- a/content/2.components/2.docs/field-group.md
+++ b/content/2.components/2.docs/field-group.md
@@ -11,8 +11,10 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     ::field-group
       ::field{name="withDefault" type="boolean" defaultValue="true"}
       A field with a default value.
@@ -35,7 +37,7 @@ badges:
     ::
   ::
 
-  ```mdc [Code]
+  ```mdc
   ::field-group
     ::field{name="withDefault" type="boolean" defaultValue="true"}
     A field with a default value.
diff --git a/content/2.components/2.docs/field.md b/content/2.components/2.docs/field.md
index 5ce177a6..54e05d84 100644
--- a/content/2.components/2.docs/field.md
+++ b/content/2.components/2.docs/field.md
@@ -11,13 +11,15 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     ::field{name="Field" type="string" defaultValue="'default'" required}
     The _description_ can be set as prop or in the default slot with full **markdown** support.
     ::
   ::
-  ```mdc [Code]
+  ```mdc
   ::field{name="Field" type="string" defaultValue="'default'" required}
   The _description_ can be set as prop or in the default slot with full **markdown** support.
   ::
@@ -25,3 +27,13 @@ badges:
 ::
 
 The text `required` is configurable in [`main.fieldRequiredText`](/api/configuration/shadcn-docs#main).
+
+## Props
+
+::field-group
+  :field{name="name" type="string"}[Field name]
+  :field{name="type" type="string"}[Field type]
+  :field{name="description" type="string"}[Field description]
+  :field{name="defaultValue" type="string"}[Field default value]
+  :field{name="required" type="boolean"}[Whether the field is required]
+::
diff --git a/content/2.components/2.docs/icon.md b/content/2.components/2.docs/icon.md
index 22024189..ffe8fbd4 100644
--- a/content/2.components/2.docs/icon.md
+++ b/content/2.components/2.docs/icon.md
@@ -15,19 +15,17 @@ badges:
 The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
 ::
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
-    <div class="space-x-2">
+## Usage
 
+::stack
+  ::div{class="p-4 space-x-2"}
     :icon{name="lucide:box"}
     :icon{name="vscode-icons:file-type-js-official"}
     :icon{name="vscode-icons:file-type-vue"}
     :icon{name="vscode-icons:file-type-nuxt" size="30"}
-
-    </div>
   ::
 
-  ```mdc [Code]
+  ```mdc
   :icon{name="lucide:box"}
   :icon{name="vscode-icons:file-type-js-official"}
   :icon{name="vscode-icons:file-type-vue"}
@@ -43,14 +41,14 @@ npm i -D @iconify-json/collection-name
 
 `@iconify-json/lucide` and `@iconify-json/vscode-icons` are installed by default.
 
-#### Smart Icon
+### Smart Icon
 
 :badge[0.5.3]{variant="outline"}
 
 You can put iconify icons, emojis and urls in `smart-icon`. Smart icon will render them automatically.
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
     **Iconify**
     <div class="space-x-2">
 
@@ -78,15 +76,18 @@ You can put iconify icons, emojis and urls in `smart-icon`. Smart icon will rend
     </div>
   ::
 
-  ```mdc [Code]
+  ```mdc
+  **Iconify**
   :smart-icon{name="lucide:box"}
   :smart-icon{name="vscode-icons:file-type-js-official"}
   :smart-icon{name="vscode-icons:file-type-vue"}
 
+  **Emojis**
   :smart-icon{name="😍"}
   :smart-icon{name="🚀"}
   :smart-icon{name="🎉" size=30}
 
+  **URL**
   :smart-icon{name="/logo.svg"}
   :smart-icon{name="https://vueuse.org/favicon.svg" size=40}
   ```
diff --git a/content/2.components/2.docs/pm.md b/content/2.components/2.docs/pm.md
index d65358c9..afa6eff8 100644
--- a/content/2.components/2.docs/pm.md
+++ b/content/2.components/2.docs/pm.md
@@ -10,41 +10,58 @@ badges:
   - value: 0.8.0
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
-    #### Install
+## Usage
+
+The package managers shown can be configured in [`main.pm`](/api/configuration/shadcn-docs#main).
+
+### Install
+
+::stack
+  ::div{class="p-4"}
     :pm-install{name="shadcn-docs-nuxt"}
     :pm-install{name="shadcn-docs-nuxt" save-dev}
     :pm-install
     :pm-install{name="-g nuxi@latest"}
-
-    #### Run
-    :pm-run{script="dev"}
-    :pm-run{script="build --watch -o"}
-
-    #### X
-    :pm-x{command="nuxi@latest init <project-name>"}
-
-    #### No Sync
-    :pm-x{command="nuxi@latest init <project-name>" no-sync}
   ::
-  ```mdc [Code]
-  #### Install
+  ```mdc
   :pm-install{name="shadcn-docs-nuxt"}
   :pm-install{name="shadcn-docs-nuxt" save-dev}
   :pm-install
   :pm-install{name="-g nuxi@latest"}
+  ```
+::
+
+### Run
 
-  #### Run
+::stack
+  ::div{class="p-4"}
+    :pm-run{script="dev"}
+    :pm-run{script="build --watch -o"}
+  ::
+  ```mdc
   :pm-run{script="dev"}
   :pm-run{script="build --watch -o"}
+  ```
+::
 
-  #### X
+### X
+
+::stack
+  ::div{class="p-4"}
+  :pm-x{command="nuxi@latest init <project-name>"}
+  ::
+  ```mdc
   :pm-x{command="nuxi@latest init <project-name>"}
+  ```
+::
 
-  #### No Sync
+### No Sync
+
+::stack
+  ::div{class="p-4"}
+    :pm-x{command="nuxi@latest init <project-name>" no-sync}
+  ::
+  ```mdc
   :pm-x{command="nuxi@latest init <project-name>" no-sync}
   ```
 ::
-
-The package managers shown can be configured in [`main.pm`](/api/configuration/shadcn-docs#main).
diff --git a/content/2.components/2.docs/read-more.md b/content/2.components/2.docs/read-more.md
index dcb103c4..150030fc 100644
--- a/content/2.components/2.docs/read-more.md
+++ b/content/2.components/2.docs/read-more.md
@@ -11,18 +11,29 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     :read-more{to="/getting-started/writing/markdown"}
     :read-more{title="Nuxt website" to="https://nuxt.com/"}
     :read-more{to="https://nuxt.com/"}
     :read-more{icon="lucide:link" to="https://nuxt.com/"}
   ::
 
-  ```mdc [Code]
+  ```mdc
   :read-more{to="/getting-started/writing/markdown"}
   :read-more{title="Nuxt website" to="https://nuxt.com/"}
   :read-more{to="https://nuxt.com/"}
   :read-more{icon="lucide:link" to="https://nuxt.com/"}
   ```
 ::
+
+## Props
+
+::field-group
+  :field{name="title" type="string"}[Read More title]
+  :field{name="icon" type="string"}[Read More icon]
+  :field{name="to" type="string"}[Link URL]
+  :field{name="target" type="Target"}[A `target` attribute value to apply on the link]
+::
diff --git a/content/2.components/2.docs/shortcut.md b/content/2.components/2.docs/shortcut.md
index 9d1114ba..f5450988 100644
--- a/content/2.components/2.docs/shortcut.md
+++ b/content/2.components/2.docs/shortcut.md
@@ -12,15 +12,25 @@ badges:
   - value: 0.6.3
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     :shortcut{value="meta"} :shortcut{value="K"} :br
     :shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
   ::
-  ```mdc [Code]
-  :shortcut{value="meta"} :shortcut{value="K"} :br
+  ```mdc
+  :shortcut{value="meta"} :shortcut{value="K"}
+
   :shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
   ```
 ::
 
 You can put `meta` in the `value` field to automatically display either :shortcut{value="⌘"} or :shortcut{value="Ctrl"} based on the platform.
+
+## Props
+
+::field-group
+  :field{name="value" type="string"}[Text in the shortcut]
+  :field{name="size" type="'xs' | 'sm' | 'md'" default-value="'sm'"}
+::
diff --git a/content/2.components/2.docs/stack.md b/content/2.components/2.docs/stack.md
index 877e8148..81b57ba2 100644
--- a/content/2.components/2.docs/stack.md
+++ b/content/2.components/2.docs/stack.md
@@ -9,8 +9,10 @@ badges:
   - value: 0.6.2
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4 md:p-8"}
     ::stack
       ::div{class="p-6 text-3xl font-bold"}
       ✨ Introducing Inspira UI
@@ -36,7 +38,7 @@ badges:
       ::
     ::
   ::
-  ```mdc [Code]
+  ```mdc
   ::stack
     ::div{class="p-6 text-3xl font-bold"}
     ✨ Introducing Inspira UI
diff --git a/content/2.components/2.docs/steps.md b/content/2.components/2.docs/steps.md
index 649f225c..e67ed693 100644
--- a/content/2.components/2.docs/steps.md
+++ b/content/2.components/2.docs/steps.md
@@ -8,8 +8,10 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4 md:p-6"}
     ::steps
       ### Get Starter Template
 
@@ -58,7 +60,7 @@ badges:
       ::
     ::
   ::
-  ```mdc [Code]
+  ```mdc height=400
   ::steps
     ### Get Starter Template
 
@@ -109,11 +111,11 @@ badges:
   ```
 ::
 
-#### Multi-level headings
+### Multi-level headings
 :badge[0.4.6]{variant="outline"}
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4 md:p-6"}
     ::steps{level=5}
       ##### Specify the level of headings to use
 
@@ -126,7 +128,7 @@ badges:
       `h1` through `h6`. Defaults to `h3`.
     ::
   ::
-  ```mdc[Code]
+  ```mdc
   ::steps{level=5}
     ##### Multi-level headings
 
@@ -140,3 +142,7 @@ badges:
   ::
   ```
 ::
+
+## Props
+
+:field{name="level" type="number"}[Specify the level of headings to use]
diff --git a/content/2.components/2.docs/tabs.md b/content/2.components/2.docs/tabs.md
index 5384d6d7..351f9453 100644
--- a/content/2.components/2.docs/tabs.md
+++ b/content/2.components/2.docs/tabs.md
@@ -11,10 +11,10 @@ badges:
     target: _blank
 ---
 
-#### Default Style
+## Usage
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
     ::tabs
       ::div{label="PostgreSQL" icon="lucide:database"}
       ### PostgreSQL column types
@@ -57,7 +57,7 @@ badges:
       ::
     ::
   ::
-  ```mdc [Code]
+  ```mdc height=300
   ::tabs
     ::div{label="PostgreSQL" icon="lucide:database"}
     ### PostgreSQL column types
@@ -102,10 +102,10 @@ badges:
   ```
 ::
 
-#### Card Style
+### Card Style
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
     ::tabs{variant="card"}
       ::div{label="Card Tab"}
       ### This is a card-style tab
@@ -118,7 +118,7 @@ badges:
       ```
     ::
   ::
-  ```mdc [Code]
+  ```mdc
   ::tabs{variant="card"}
     ::div{label="Card Tab"}
     ### This is a card-style tab
@@ -133,11 +133,11 @@ badges:
   ```
 ::
 
-#### Line Style
+### Line Style
 :badge[0.6.4]{variant="outline"}
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
     ::tabs{variant="line"}
       ::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-sm"}
         :badge[Badge]
@@ -153,7 +153,7 @@ badges:
       ::
     ::
   ::
-  ```mdc [Code]
+  ```mdc
   ::tabs{variant="line"}
     ::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-sm"}
       :badge[Badge]
@@ -171,11 +171,11 @@ badges:
   ```
 ::
 
-#### Combobox Style
+### Combobox Style
 :badge[0.7.5]{variant="outline"}
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
     ::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
       ::div{label="PostgreSQL"}
       ### PostgreSQL column types
@@ -218,7 +218,7 @@ badges:
       ::
     ::
   ::
-  ```mdc [Code]
+  ```mdc height=300
   ::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
     ::div{label="PostgreSQL"}
     ### PostgreSQL column types
@@ -268,8 +268,8 @@ badges:
 
 :read-more{to="/components/docs/pm"}
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4 md:p-8"}
     #### Scope 1
     ::tabs{variant="card" sync="your-scope-name"}
       ::div{label="Card Tab"}
@@ -315,7 +315,7 @@ badges:
       ```
     ::
   ::
-  ```mdc [Code]
+  ```mdc height=400
   #### Scope 1
   ::tabs{variant="card" sync="your-scope-name"}
     ::div{label="Card Tab"}
@@ -362,3 +362,14 @@ badges:
   ::
   ```
 ::
+
+## Props
+
+::field-group
+  :field{name="variant" type="'separate' | 'card' | 'line' | 'combobox'" default-value="'separate'"}
+  :field{name="padded" type="boolean" default-value="true"}
+  :field{name="disableSearch" type="boolean" default-value="false"}[For combobox variant]
+  :field{name="searchPlaceholder" type="string" default-value="'Search Tab...'"}[For combobox variant]
+  :field{name="searchEmpty" type="string" default-value="'No tab found.'"}[For combobox variant]
+  :field{name="sync" type="string"}[Sync scope]
+::
diff --git a/content/2.components/3.page/accordion.md b/content/2.components/3.page/accordion.md
index 8ee091b3..3733160d 100644
--- a/content/2.components/3.page/accordion.md
+++ b/content/2.components/3.page/accordion.md
@@ -9,8 +9,10 @@ badges:
   - value: 0.5.0
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     ::accordion{default-value="first-item" collapsible}
       ::accordion-item{value="first-item"}
       #title
@@ -29,7 +31,7 @@ badges:
       :accordion-item{title="Can it be animated?" content="Yes! You can use the transition prop to configure the animation."}
     ::
   ::
-  ```mdc[Code]
+  ```mdc
   ::accordion{default-value="first-item" collapsible}
     ::accordion-item{value="first-item"}
     #title
@@ -38,6 +40,7 @@ badges:
     #content
     Yes. It adheres to the WAI-ARIA design pattern.
     ::
+
     ::accordion-item
     #title
     Is it unstyled?
@@ -51,3 +54,21 @@ badges:
 ::
 
 The `value` prop in `::accordion-item`{lang="mdc"} is auto-generated by default. You can set them to other _unique_ values and put them in the `default-value` prop of `::accordion`{lang="mdc"}.
+
+## Props
+
+#### `::accordion-item`{lang="mdc"}
+
+::field-group
+  :field{name="type" type="'single' | 'multiple'" default-value="'single'"}
+  :field{name="collapsible" type="boolean" default-value="undefined"}[Whether the items can be collapsed]
+  :field{name="defaultValue" type="string | string[]"}[Default open item]
+::
+
+#### `::accordion`{lang="mdc"}
+
+::field-group
+  :field{name="value" type="string"}[Item value]
+  :field{name="title" type="string"}[Item title]
+  :field{name="content" type="string"}[Item content]
+::
diff --git a/content/2.components/3.page/collapsible.md b/content/2.components/3.page/collapsible.md
index b4bed476..ab81de1e 100644
--- a/content/2.components/3.page/collapsible.md
+++ b/content/2.components/3.page/collapsible.md
@@ -12,10 +12,12 @@ badges:
   - value: 0.5.8
 ---
 
-#### Simple
+## Usage
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+### Simple
+
+::stack
+  ::div{class="p-4 md:p-6"}
     ::collapsible
     #title
     Show properties
@@ -24,7 +26,7 @@ badges:
     This is a **Simple** style collapsible.
     ::
   ::
-  ```mdc[Code]
+  ```mdc
   ::collapsible
   #title
   Show properties
@@ -35,17 +37,25 @@ badges:
   ```
 ::
 
-#### Card
+### Card
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4 md:p-6"}
     ::collapsible{variant="card" title="@peduarte starred 3 repositories"}
     @radix-ui/primitives
     ::
   ::
-  ```mdc[Code]
+  ```mdc
   ::collapsible{variant="card" title="@peduarte starred 3 repositories"}
   @radix-ui/primitives
   ::
   ```
 ::
+
+## Props
+
+::field-group
+  :field{name="variant" type="'simple' | 'card'" default-value="'simple'"}
+  :field{name="title" type="string"}[Collapsible title]
+  :field{name="defaultOpen" type="boolean" default-value="false"}
+::
diff --git a/content/2.components/3.page/hero-alt.md b/content/2.components/3.page/hero-alt.md
index 37f5757c..03481c48 100644
--- a/content/2.components/3.page/hero-alt.md
+++ b/content/2.components/3.page/hero-alt.md
@@ -10,8 +10,10 @@ badges:
 toc: false
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     ::hero-alt
     ---
     announcement:
@@ -32,7 +34,36 @@ toc: false
     #description
     Beautifully designed components that you can copy and paste into your apps.
     ::
+  ::
+  ```mdc
+  ::hero-alt
+  ---
+  announcement:
+    title: 'Introducing Charts'
+    icon: 'lucide:pie-chart'
+    to: /getting-started
+  actions:
+    - name: Get Started
+      to: /getting-started
+    - name: GitHub
+      variant: outline
+      to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+      leftIcon: 'lucide:github'
+  ---
+
+  #title
+  Build your component library
+
+  #description
+  Beautifully designed components that you can copy and paste into your apps.
+  ::
+  ```
+::
+
+### Right
 
+::stack
+  ::div{class="p-4"}
     ::hero-alt
     ---
     announcement:
@@ -58,29 +89,7 @@ toc: false
     ![logo](/logo.svg)
     ::
   ::
-  ```mdc[Code]
-  ::hero-alt
-  ---
-  announcement:
-    title: 'Introducing Charts'
-    icon: 'lucide:pie-chart'
-    to: /getting-started
-  actions:
-    - name: Get Started
-      to: /getting-started
-    - name: GitHub
-      variant: outline
-      to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
-      leftIcon: 'lucide:github'
-  ---
-
-  #title
-  Build your component library
-
-  #description
-  Beautifully designed components that you can copy and paste into your apps.
-  ::
-
+  ```mdc
   ::hero-alt
   ---
   announcement:
diff --git a/content/2.components/3.page/hero.md b/content/2.components/3.page/hero.md
index d9898b52..3ec67a13 100644
--- a/content/2.components/3.page/hero.md
+++ b/content/2.components/3.page/hero.md
@@ -8,8 +8,10 @@ badges:
     target: _blank
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+## Usage
+
+::stack
+  ::div{class="p-4"}
     ::hero
     ---
     announcement:
@@ -32,7 +34,7 @@ badges:
     Beautifully designed Nuxt Content template with shadcn-vue. :br Customizable. Compatible. Open Source.
     ::
   ::
-  ```mdc[Code]
+  ```mdc
   ::hero
   ---
   announcement:
diff --git a/content/2.components/3.page/team-card.md b/content/2.components/3.page/team-card.md
index 98c89e9d..adf5a045 100644
--- a/content/2.components/3.page/team-card.md
+++ b/content/2.components/3.page/team-card.md
@@ -10,8 +10,8 @@ badges:
   - value: 0.7.7
 ---
 
-::code-group
-  ::div{label="Preview" class="md:p-4"}
+::stack
+  ::div{class="p-4"}
     ::team-card-group
       ::team-card
       ---
@@ -45,7 +45,7 @@ badges:
       ::
     ::
   ::
-  ```mdc [Code]
+  ```mdc
   ::team-card-group
     ::team-card
     ---