Init

app/app.config.ts

@@ -0,0 +1,15 @@
+export default defineAppConfig({
+  // https://ui.nuxt.com/getting-started/theme#design-system
+  ui: {
+    colors: {
+      primary: 'emerald',
+      neutral: 'slate',
+    },
+    button: {
+      defaultVariants: {
+        // Set default button color to neutral
+        // color: 'neutral'
+      }
+    }
+  }
+})

app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <UApp>
+    <NuxtPage />
+  </UApp>
+</template>

app/assets/css/main.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme static {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --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;
+}

app/pages/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex flex-col items-center justify-center gap-4 h-screen">
+    <h1 class="font-bold text-2xl text-(--ui-primary)">
+      Nuxt UI - Starter
+    </h1>
+
+    <div class="flex items-center gap-2">
+      <UButton
+        label="Documentation"
+        icon="i-lucide-square-play"
+        to="https://ui.nuxt.com/getting-started/installation/nuxt"
+        target="_blank"
+      />
+
+      <UButton
+        label="GitHub"
+        color="neutral"
+        variant="outline"
+        icon="i-simple-icons-github"
+        to="https://github.com/nuxt/ui"
+        target="_blank"
+      />
+    </div>
+  </div>
+</template>