diff --git a/packages/ui/.editorconfig b/packages/ui/.editorconfig
new file mode 100644
index 0000000..007463b
--- /dev/null
+++ b/packages/ui/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/ui/.github/workflows/ci.yml b/packages/ui/.github/workflows/ci.yml
new file mode 100644
index 0000000..4425eb0
--- /dev/null
+++ b/packages/ui/.github/workflows/ci.yml
@@ -0,0 +1,49 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: npm i -g --force corepack@latest && corepack enable
+
+      - name: Install dependencies
+        run: npx nypm@latest i
+
+      - name: Lint
+        run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: npm i -g --force corepack@latest && corepack enable
+
+      - name: Install dependencies
+        run: npx nypm@latest i
+
+      - name: Playground prepare
+        run: npm run dev:prepare
+
+      - name: Test
+        run: npm run test
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
new file mode 100644
index 0000000..7a3eb22
--- /dev/null
+++ b/packages/ui/.gitignore
@@ -0,0 +1,56 @@
+# Dependencies
+node_modules
+
+# Logs
+*.log*
+
+# Temp directories
+.temp
+.tmp
+.cache
+
+# Yarn
+**/.yarn/cache
+**/.yarn/*state*
+
+# Generated dirs
+dist
+
+# Nuxt
+.nuxt
+.output
+.data
+.vercel_build_output
+.build-*
+.netlify
+
+# Env
+.env
+
+# Testing
+reports
+coverage
+*.lcov
+.nyc_output
+
+# VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Intellij idea
+*.iml
+.idea
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
diff --git a/packages/ui/.npmrc b/packages/ui/.npmrc
new file mode 100644
index 0000000..cf04042
--- /dev/null
+++ b/packages/ui/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/packages/ui/.vscode/settings.json b/packages/ui/.vscode/settings.json
new file mode 100644
index 0000000..eb8204b
--- /dev/null
+++ b/packages/ui/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": true
+}
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 0000000..b168aa1
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1,84 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# My Module
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+My new Nuxt module for doing amazing things.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add my-module
+```
+
+That's it! You can now use My Module in your Nuxt app ✨
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com
diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs
new file mode 100644
index 0000000..27b2e71
--- /dev/null
+++ b/packages/ui/eslint.config.mjs
@@ -0,0 +1,20 @@
+// @ts-check
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
+export default createConfigForNuxt({
+  features: {
+    // Rules for module authors
+    tooling: true,
+    // Rules for formatting
+    stylistic: true,
+  },
+  dirs: {
+    src: [
+      './playground',
+    ],
+  },
+})
+  .append(
+    // your custom flat config here...
+  )
diff --git a/packages/ui/nuxt.config.ts b/packages/ui/nuxt.config.ts
new file mode 100644
index 0000000..c9cee63
--- /dev/null
+++ b/packages/ui/nuxt.config.ts
@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ["@nuxt/fonts", "@nuxt/icon", "@nuxt/image", "@nuxt/ui"]
+})
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 37f7cab..ab1549a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,15 +1,57 @@
 {
-  "name": "ui",
+  "name": "@websites/ui",
   "version": "0.0.0",
-  "private": true,
-  "main": "./index.ts",
-  "types": "./index.ts",
+  "description": "My new Nuxt module",
+  "repository": "your-org/my-module",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "lint": "eslint ."
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.17.5"
   },
   "devDependencies": {
-    "eslint-config-custom": "workspace:*",
-    "tsconfig": "workspace:*",
-    "vue": "^3.4.21"
+    "@nuxt/devtools": "^2.5.0",
+    "@nuxt/eslint-config": "^1.4.1",
+    "@nuxt/fonts": "0.11.4",
+    "@nuxt/icon": "1.13.0",
+    "@nuxt/image": "1.10.0",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/schema": "^3.17.5",
+    "@nuxt/test-utils": "^3.19.1",
+    "@nuxt/ui": "3.1.3",
+    "@types/node": "latest",
+    "changelogen": "^0.6.1",
+    "eslint": "^9.28.0",
+    "nuxt": "^3.17.5",
+    "typescript": "~5.8.3",
+    "vitest": "^3.2.3",
+    "vue-tsc": "^2.2.10"
   }
 }
diff --git a/packages/ui/playground/app.vue b/packages/ui/playground/app.vue
new file mode 100644
index 0000000..58db5ce
--- /dev/null
+++ b/packages/ui/playground/app.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    Nuxt module playground!
+  </div>
+</template>
+
+<script setup>
+</script>
diff --git a/packages/ui/playground/nuxt.config.ts b/packages/ui/playground/nuxt.config.ts
new file mode 100644
index 0000000..4c483e3
--- /dev/null
+++ b/packages/ui/playground/nuxt.config.ts
@@ -0,0 +1,5 @@
+export default defineNuxtConfig({
+  modules: ['../src/module'],
+  myModule: {},
+  devtools: { enabled: true },
+})
diff --git a/packages/ui/playground/package.json b/packages/ui/playground/package.json
new file mode 100644
index 0000000..cf45ca0
--- /dev/null
+++ b/packages/ui/playground/package.json
@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "my-module-playground",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "generate": "nuxi generate"
+  },
+  "dependencies": {
+    "nuxt": "^3.17.5"
+  }
+}
diff --git a/packages/ui/playground/server/tsconfig.json b/packages/ui/playground/server/tsconfig.json
new file mode 100644
index 0000000..b9ed69c
--- /dev/null
+++ b/packages/ui/playground/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/packages/ui/playground/tsconfig.json b/packages/ui/playground/tsconfig.json
new file mode 100644
index 0000000..4b34df1
--- /dev/null
+++ b/packages/ui/playground/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/packages/ui/src/module.ts b/packages/ui/src/module.ts
new file mode 100644
index 0000000..7d9c192
--- /dev/null
+++ b/packages/ui/src/module.ts
@@ -0,0 +1,19 @@
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+
+// Module options TypeScript interface definition
+export interface ModuleOptions {}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'my-module',
+    configKey: 'myModule',
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url)
+
+    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
+    addPlugin(resolver.resolve('./runtime/plugin'))
+  },
+})
diff --git a/packages/ui/src/runtime/plugin.ts b/packages/ui/src/runtime/plugin.ts
new file mode 100644
index 0000000..df7fd87
--- /dev/null
+++ b/packages/ui/src/runtime/plugin.ts
@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((_nuxtApp) => {
+  console.log('Plugin injected by my-module!')
+})
diff --git a/packages/ui/src/runtime/server/tsconfig.json b/packages/ui/src/runtime/server/tsconfig.json
new file mode 100644
index 0000000..e95a776
--- /dev/null
+++ b/packages/ui/src/runtime/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}
diff --git a/packages/ui/test/basic.test.ts b/packages/ui/test/basic.test.ts
new file mode 100644
index 0000000..5167cad
--- /dev/null
+++ b/packages/ui/test/basic.test.ts
@@ -0,0 +1,15 @@
+import { fileURLToPath } from 'node:url'
+import { describe, it, expect } from 'vitest'
+import { setup, $fetch } from '@nuxt/test-utils/e2e'
+
+describe('ssr', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
+  })
+
+  it('renders the index page', async () => {
+    // Get response to a server-rendered page with `$fetch`.
+    const html = await $fetch('/')
+    expect(html).toContain('<div>basic</div>')
+  })
+})
diff --git a/packages/ui/test/fixtures/basic/app.vue b/packages/ui/test/fixtures/basic/app.vue
new file mode 100644
index 0000000..29a9c81
--- /dev/null
+++ b/packages/ui/test/fixtures/basic/app.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>basic</div>
+</template>
+
+<script setup>
+</script>
diff --git a/packages/ui/test/fixtures/basic/nuxt.config.ts b/packages/ui/test/fixtures/basic/nuxt.config.ts
new file mode 100644
index 0000000..ed0c53f
--- /dev/null
+++ b/packages/ui/test/fixtures/basic/nuxt.config.ts
@@ -0,0 +1,7 @@
+import MyModule from '../../../src/module'
+
+export default defineNuxtConfig({
+  modules: [
+    MyModule,
+  ],
+})
diff --git a/packages/ui/test/fixtures/basic/package.json b/packages/ui/test/fixtures/basic/package.json
new file mode 100644
index 0000000..decd433
--- /dev/null
+++ b/packages/ui/test/fixtures/basic/package.json
@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "basic",
+  "type": "module"
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index e1e7a92..59ad4a8 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,5 +1,8 @@
 {
-  "extends": "tsconfig/vue.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": [
+    "dist",
+    "node_modules",
+    "playground",
+  ]
 }
diff --git a/packages/ui/.eslintrc.js b/packages/ui1/.eslintrc.js
similarity index 100%
rename from packages/ui/.eslintrc.js
rename to packages/ui1/.eslintrc.js
diff --git a/packages/ui/index.ts b/packages/ui1/index.ts
similarity index 100%
rename from packages/ui/index.ts
rename to packages/ui1/index.ts
diff --git a/packages/ui1/package.json b/packages/ui1/package.json
new file mode 100644
index 0000000..37f7cab
--- /dev/null
+++ b/packages/ui1/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "ui",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "eslint-config-custom": "workspace:*",
+    "tsconfig": "workspace:*",
+    "vue": "^3.4.21"
+  }
+}
diff --git a/packages/ui/src/assets/circles.svg b/packages/ui1/src/assets/circles.svg
similarity index 100%
rename from packages/ui/src/assets/circles.svg
rename to packages/ui1/src/assets/circles.svg
diff --git a/packages/ui/src/assets/next.svg b/packages/ui1/src/assets/next.svg
similarity index 100%
rename from packages/ui/src/assets/next.svg
rename to packages/ui1/src/assets/next.svg
diff --git a/packages/ui/src/assets/turborepo.svg b/packages/ui1/src/assets/turborepo.svg
similarity index 100%
rename from packages/ui/src/assets/turborepo.svg
rename to packages/ui1/src/assets/turborepo.svg
diff --git a/packages/ui/src/assets/vercel.svg b/packages/ui1/src/assets/vercel.svg
similarity index 100%
rename from packages/ui/src/assets/vercel.svg
rename to packages/ui1/src/assets/vercel.svg
diff --git a/packages/ui/src/card.vue b/packages/ui1/src/card.vue
similarity index 100%
rename from packages/ui/src/card.vue
rename to packages/ui1/src/card.vue
diff --git a/packages/ui/src/gradient.vue b/packages/ui1/src/gradient.vue
similarity index 100%
rename from packages/ui/src/gradient.vue
rename to packages/ui1/src/gradient.vue
diff --git a/packages/ui/src/page.vue b/packages/ui1/src/page.vue
similarity index 100%
rename from packages/ui/src/page.vue
rename to packages/ui1/src/page.vue
diff --git a/packages/ui1/tsconfig.json b/packages/ui1/tsconfig.json
new file mode 100644
index 0000000..e1e7a92
--- /dev/null
+++ b/packages/ui1/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/vue.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}