diff --git a/apps/www/.vitepress/theme/components/TabMarkdown.vue b/apps/www/.vitepress/theme/components/TabMarkdown.vue
new file mode 100644
index 00000000..e4562047
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/TabMarkdown.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useSlots } from 'vue'
+import { TabsContent, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+
+withDefaults(defineProps<{
+  title?: string
+}>(), {
+  title: '',
+})
+</script>
+
+<template>
+  <TabsContent :value="title" class="relative space-y-10">
+    <slot />
+  </TabsContent>
+</template>
diff --git a/apps/www/.vitepress/theme/components/TabsMarkdown.vue b/apps/www/.vitepress/theme/components/TabsMarkdown.vue
new file mode 100644
index 00000000..0bea2bcc
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/TabsMarkdown.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+
+const slots = useSlots()
+
+const tabs = computed(() => slots.default?.()?.map(i => i?.props?.title as string) ?? [])
+</script>
+
+<template>
+  <Tabs :default-value="tabs[0]" class="relative mr-auto w-full">
+    <div class="flex items-center justify-between">
+      <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
+        <TabsTrigger v-for="tab in tabs" :key="tab" :value="tab" class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none">
+          {{ tab }}
+        </TabsTrigger>
+      </TabsList>
+    </div>
+
+    <slot />
+  </Tabs>
+</template>
diff --git a/apps/www/.vitepress/theme/components/index.ts b/apps/www/.vitepress/theme/components/index.ts
index bf7a4b3a..b254f15f 100644
--- a/apps/www/.vitepress/theme/components/index.ts
+++ b/apps/www/.vitepress/theme/components/index.ts
@@ -1,5 +1,7 @@
 export { default as ComponentPreview } from './ComponentPreview.vue'
 export { default as TabPreview } from './TabPreview.vue'
+export { default as TabMarkdown } from './TabMarkdown.vue'
+export { default as TabsMarkdown } from './TabsMarkdown.vue'
 export { default as Callout } from './Callout.vue'
 export { default as LinkedCard } from './LinkedCard.vue'
 export { default as ManualInstall } from './ManualInstall.vue'
diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md
index 68b7278d..f90521b3 100644
--- a/apps/www/src/content/docs/installation/nuxt.md
+++ b/apps/www/src/content/docs/installation/nuxt.md
@@ -26,12 +26,128 @@ npm install -D typescript
 npm install -D @nuxtjs/tailwindcss
 ```
 
-### Install `shadcn-nuxt` module (New ✨)
+### Add `Nuxt` module
+
+<br>
+
+<TabsMarkdown>
+  <TabMarkdown title="shadcn-nuxt">
+
+  Install the package below.
+
+  ```bash
+  npm install -D shadcn-nuxt
+  ```
+
+  </TabMarkdown>
+
+
+  <TabMarkdown title="manual">
+
+  Add the following code to `modules/shadcn.ts`.
 
 ```bash
-npm install -D shadcn-nuxt
+import {
+  defineNuxtModule,
+  addComponent,
+  addComponentsDir,
+  tryResolveModule,
+} from 'nuxt/kit';
+
+export interface ShadcnVueOptions {
+  /**
+   * Prefix for all the imported component
+   */
+  prefix: string;
+
+  /**
+   * Directory that the component lives in.
+   * @default "~/components/ui"
+   */
+  componentDir: string;
+}
+
+export default defineNuxtModule<ShadcnVueOptions>({
+  defaults: {
+    prefix: 'Ui',
+    componentDir: '~/components/ui',
+  },
+  meta: {
+    name: 'ShadcnVue',
+    configKey: 'shadcn',
+    version: '0.0.1',
+    compatibility: {
+      nuxt: '^3.9.0',
+      bridge: false,
+    },
+  },
+  async setup({ componentDir, prefix }) {
+    const isVeeValidateExist = await tryResolveModule('vee-validate');
+
+    addComponentsDir(
+      {
+        path: componentDir,
+        extensions: ['.vue'],
+        prefix,
+        pathPrefix: false,
+      },
+      {
+        prepend: true,
+      }
+    );
+
+    if (isVeeValidateExist !== undefined) {
+      addComponent({
+        filePath: 'vee-validate',
+        export: 'Form',
+        name: `${prefix}Form`,
+        priority: 999,
+      });
+
+      addComponent({
+        filePath: 'vee-validate',
+        export: 'Field',
+        name: `${prefix}FormField`,
+        priority: 999,
+      });
+    }
+
+    addComponent({
+      filePath: 'radix-vue',
+      export: 'PaginationRoot',
+      name: `${prefix}Pagination`,
+      priority: 999,
+    });
+
+    addComponent({
+      filePath: 'radix-vue',
+      export: 'PaginationList',
+      name: `${prefix}PaginationList`,
+      priority: 999,
+    });
+
+    addComponent({
+      filePath: 'radix-vue',
+      export: 'PaginationListItem',
+      name: `${prefix}PaginationListItem`,
+      priority: 999,
+    });
+  },
+});
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig {
+    shadcn?: ShadcnVueOptions;
+  }
+  interface NuxtOptions {
+    shadcn?: ShadcnVueOptions;
+  }
+}
 ```
 
+  </TabMarkdown>
+</TabsMarkdown>
+
 
 ### Configure `nuxt.config.ts`