app/components/ui/button/index.ts

@@ -16,6 +16,8 @@ export const buttonVariants = cva(
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
+        outlined:
+          "border border-primary/80 hover:border-primary text-primary/80 bg-background shadow-xs hover:bg-accent hover:text-primary dark:bg-input/30 dark:hover:bg-input/50",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",

app/pages/index.vue

@@ -26,20 +26,19 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-    <div class="bg-muted/50 aspect-video rounded-xl" />
-    <div class="bg-muted/50 aspect-video rounded-xl flex items-center justify-center gap-2">
-      <span class="text-primary">Last clicked button:</span>
-      <span class="font-bold text-lime-500">{{ lastClicked }}</span>
-    </div>
-    <div class="bg-muted/50 aspect-video rounded-xl" />
+  <div class="bg-muted/50 rounded-xl flex py-4 items-center justify-center gap-2">
+    <span class="text-primary">Last clicked button:</span>
+    <span class="font-bold text-lime-500">{{ lastClicked }}</span>
   </div>
-  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-center justify-center gap-2">
-    <Button variant="default" @click="buttonClicked('default')">Default</Button>
-    <Button variant="outline" @click="buttonClicked('outline')">Outline</Button>
-    <Button variant="ghost" @click="buttonClicked('ghost')">Ghost</Button>
-    <Button variant="link" @click="buttonClicked('link')">Link</Button>
-    <Button variant="secondary" @click="buttonClicked('secondary')">Secondary</Button>
-    <Button variant="destructive" @click="buttonClicked('destructive')">Destructive</Button>
+  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-start justify-center">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 py-4">
+      <Button variant="default" @click="buttonClicked('default')">Default</Button>
+      <Button variant="secondary" @click="buttonClicked('secondary')">Secondary</Button>
+      <Button variant="destructive" @click="buttonClicked('destructive')">Destructive</Button>
+      <Button variant="outline" @click="buttonClicked('outline')">Outline</Button>
+      <Button variant="outlined" @click="buttonClicked('outlined')">Outlined</Button>
+      <Button variant="ghost" @click="buttonClicked('ghost')">Ghost</Button>
+      <Button variant="link" @click="buttonClicked('link')">Link</Button>
+    </div>
   </div>
 </template>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "glowing-fiesta",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "glowing-fiesta",
-      "version": "0.0.2",
+      "version": "0.0.3",
       "hasInstallScript": true,
       "dependencies": {
         "@pinia/nuxt": "^0.11.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "glowing-fiesta",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "private": true,
   "scripts": {