figured out design system of nuxt ui

web/app.vue

@@ -1,6 +1,9 @@
+<script setup lang="ts">
+import { UApp } from '#components';
+</script>
+
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+	<UApp>
+		<NuxtPage />
+	</UApp>
 </template>

web/assets/css/main.css

@@ -0,0 +1,45 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+:root {
+  --ui-primary: #C02942;
+--ui-text-dimmed: var(--ui-color-neutral-400);
+  --ui-text-muted: var(--ui-color-neutral-500);
+  --ui-text-toned: var(--ui-color-neutral-600);
+  --ui-text: var(--ui-color-neutral-700);
+  --ui-text-highlighted: var(--ui-color-neutral-900);
+  --ui-text-inverted: var(--color-white);
+
+  --ui-bg: var(--color-white);
+  --ui-bg-muted: var(--ui-color-neutral-50);
+  --ui-bg-elevated: var(--ui-color-neutral-100);
+  --ui-bg-accented: var(--ui-color-neutral-200);
+  --ui-bg-inverted: var(--ui-color-neutral-900);
+
+  --ui-border: var(--ui-color-neutral-200);
+  --ui-border-muted: var(--ui-color-neutral-200);
+  --ui-border-accented: var(--ui-color-neutral-300);
+  --ui-border-inverted: var(--ui-color-neutral-900);
+}
+
+.dark {
+  --ui-primary: #C02942;
+--ui-text-dimmed: var(--ui-color-neutral-400);
+  --ui-text-muted: var(--ui-color-neutral-500);
+  --ui-text-toned: var(--ui-color-neutral-600);
+  --ui-text: var(--ui-color-neutral-700);
+  --ui-text-highlighted: var(--ui-color-neutral-900);
+  --ui-text-inverted: var(--color-white);
+
+  --ui-bg: var(--color-white);
+  --ui-bg-muted: var(--ui-color-neutral-50);
+  --ui-bg-elevated: var(--ui-color-neutral-100);
+  --ui-bg-accented: var(--ui-color-neutral-200);
+  --ui-bg-inverted: var(--ui-color-neutral-900);
+
+  --ui-border: var(--ui-color-neutral-200);
+  --ui-border-muted: var(--ui-color-neutral-200);
+  --ui-border-accented: var(--ui-color-neutral-300);
+  --ui-border-inverted: var(--ui-color-neutral-900);
+}
+

web/bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "nuxt-app",
       "dependencies": {
+        "@internationalized/date": "^3.8.0",
         "@nuxt/eslint": "1.3.0",
         "@nuxt/test-utils": "3.18.0",
         "@nuxt/ui": "3.1.1",

web/nuxt.config.ts

@@ -2,8 +2,9 @@
 export default defineNuxtConfig({
 	compatibilityDate: '2024-11-01',
 	devtools: { enabled: true },
+	css: ['~/assets/css/main.css'],
 	modules: ['@nuxt/eslint', '@nuxt/test-utils', '@nuxt/ui'],
 	app: {
 		baseURL: process.env.BASE_URL,
-	},
+	}
 })

web/package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@internationalized/date": "^3.8.0",
     "@nuxt/eslint": "1.3.0",
     "@nuxt/test-utils": "3.18.0",
     "@nuxt/ui": "3.1.1",

web/pages/index.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { UButton } from '#components';
+
 
 </script>
 
 <template>
 	<div>
-		indx
+		<UButton>Click me</UButton>
 	</div>
 </template>