new widgets

app/assets/css/global.css

@@ -1,6 +1,20 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@theme {
+:root {
   --font-sans: 'Public Sans', sans-serif;
+  --ui-bg: rgb(220,220,220);
 }
+.dark {
+  /*--ui-bg: var(--ui-color-neutral-950);*/
+  --ui-bg: rgb(17,17,17);
+  --ui-bg-accented: rgba(189, 23, 255, 0.3);
+  --ui-bg-elevated: rgba(189, 23, 255, 0.2);
+
+  --ui-primary: rgb(189, 23, 255);
+}
+
+.dark-widget-bg {
+    --ui-bg-elevated: rgb(34, 24, 32);
+    --ui-bg-accented: rgb(22,22,22);
+  }

app/components/dashboard/sidebar.vue

@@ -3,7 +3,8 @@ import type { NavigationMenuItem } from '@nuxt/ui'
 //import Logo from '@nuxt/ui'
 
 
-const items: NavigationMenuItem[][] = [[{
+const items: NavigationMenuItem[][] = [
+[{
   label: 'Home',
   icon: 'i-lucide-house',
   active: true

app/pages/dashboard.vue

@@ -2,6 +2,27 @@
   definePageMeta({
     layout: "dashboard"
   });
+  const color = useColorMode();
+  color.preference = "dark";
+
+  const cards: any[] = [
+    {
+      title: "1",
+      icon: "meteor-icons:chevron-up",
+      desc: "pila"
+    },
+    {
+      title: "2",
+      icon: "majesticons:award",
+      desc: "bolas"
+    },
+    {
+      title: "3",
+      icon: "svg-spinners:clock",
+      desc: "espera aí um becs bro"
+    },
+
+  ];
 </script>
 
 <template>
@@ -9,16 +30,25 @@
     <div class="mt-1 mb-2 flex flex-col w-full">
       <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
       <ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
-      <UBadge variant="subtle" class="inline mx-auto">Something like that</UBadge> 
+      <UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge> 
     </div>
     
-    <div class="w-full flex flex-col">
-
+    <div class="mx-auto max-w-220">
+      <div class="row">
+          <UPageCard 
+            v-for="card in cards"
+            :title="card.title"
+            :description="card.desc"
+            :icon="card.icon"
+            variant="subtle"
+            class="dark-widget-bg col-md"
+          />
+        </div>
     </div>
   </UContainer>
 </template>
 
 <style scoped>
-
+@import "bootstrap/dist/css/bootstrap-grid.css";
 
 </style>

package.json

@@ -17,6 +17,7 @@
     "@tailwindcss/vite": "^4.1.17",
     "@vueuse/core": "^14.0.0",
     "@vueuse/head": "github:vueuse/head",
+    "bootstrap": "^5.3.8",
     "nuxt": "^4.2.1",
     "nuxt-storm": "^1.1.3",
     "tailwindcss": "^4.1.17",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@vueuse/head':
         specifier: github:vueuse/head
         version: https://codeload.github.com/vueuse/head/tar.gz/7dde2cbc097f2c8878977826f257a233289165c0(vue@3.5.24(typescript@5.9.3))
+      bootstrap:
+        specifier: ^5.3.8
+        version: 5.3.8(@popperjs/core@2.11.8)
       nuxt:
         specifier: ^4.2.1
         version: 4.2.1(@parcel/watcher@2.5.1)(@vue/compiler-sfc@3.5.24)(db0@0.3.4)(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(rollup@4.53.3)(terser@5.44.1)(typescript@5.9.3)(vite@7.2.4(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.1))(yaml@2.8.1)
@@ -1127,6 +1130,9 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
   '@poppinss/colors@4.1.5':
     resolution: {integrity: sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw==}
 
@@ -1879,6 +1885,11 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
+  bootstrap@5.3.8:
+    resolution: {integrity: sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==}
+    peerDependencies:
+      '@popperjs/core': ^2.11.8
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -6220,6 +6231,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@popperjs/core@2.11.8': {}
+
   '@poppinss/colors@4.1.5':
     dependencies:
       kleur: 4.1.5
@@ -6959,6 +6972,10 @@ snapshots:
 
   boolbase@1.0.0: {}
 
+  bootstrap@5.3.8(@popperjs/core@2.11.8):
+    dependencies:
+      '@popperjs/core': 2.11.8
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2