From 7286e6d51396ba255bfc0bca5a157bb65bf651ec Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 22:16:32 +0100 Subject: [PATCH 01/10] Added path handling --- package-lock.json | 2 +- package.json | 2 +- vite.config.ts | 16 +++++++++++----- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index caac8b0..e854df5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "vue": "^3.5.24" }, "devDependencies": { - "@types/node": "^24.10.1", + "@types/node": "^24.10.9", "@vitejs/plugin-vue": "^6.0.1", "@vue/tsconfig": "^0.8.1", "typescript": "~5.9.3", diff --git a/package.json b/package.json index e8db0d3..9570a41 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "vue": "^3.5.24" }, "devDependencies": { - "@types/node": "^24.10.1", + "@types/node": "^24.10.9", "@vitejs/plugin-vue": "^6.0.1", "@vue/tsconfig": "^0.8.1", "typescript": "~5.9.3", diff --git a/vite.config.ts b/vite.config.ts index bbcf80c..d8a1825 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,13 @@ -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' +import path from "node:path"; +import { defineConfig } from "vite"; +import tailwindcss from "@tailwindcss/vite"; +import vue from "@vitejs/plugin-vue"; -// https://vite.dev/config/ export default defineConfig({ - plugins: [vue()], -}) + plugins: [vue(), tailwindcss()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src"), + }, + }, +}); From 390815577a7a0375bdf3d104a5fd4171ab21c5fd Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 22:17:17 +0100 Subject: [PATCH 02/10] Initialized ShadCN --- components.json | 21 ++++++++ package-lock.json | 55 +++++++++++++++++++++ package.json | 5 ++ src/lib/utils.ts | 7 +++ src/style.css | 119 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 207 insertions(+) create mode 100644 components.json create mode 100644 src/lib/utils.ts diff --git a/components.json b/components.json new file mode 100644 index 0000000..09b9b8c --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://shadcn-vue.com/schema.json", + "style": "new-york", + "typescript": true, + "tailwind": { + "config": "", + "css": "src/style.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "composables": "@/composables" + }, + "registries": {} +} diff --git a/package-lock.json b/package-lock.json index e854df5..57041a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,10 @@ "version": "0.0.0", "dependencies": { "@tailwindcss/vite": "^4.1.18", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-vue-next": "^0.563.0", + "tailwind-merge": "^3.4.0", "tailwindcss": "^4.1.18", "vue": "^3.5.24" }, @@ -16,6 +20,7 @@ "@types/node": "^24.10.9", "@vitejs/plugin-vue": "^6.0.1", "@vue/tsconfig": "^0.8.1", + "tw-animate-css": "^1.4.0", "typescript": "~5.9.3", "vite": "^7.2.4", "vue-tsc": "^3.1.4" @@ -1321,6 +1326,27 @@ "dev": true, "license": "MIT" }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", @@ -1703,6 +1729,15 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/lucide-vue-next": { + "version": "0.563.0", + "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.563.0.tgz", + "integrity": "sha512-zsE/lCKtmaa7bGfhSpN84br1K9YoQ5pCN+2oKWjQQG3Lo6ufUUKBuHSjNFI6RvUevxaajNXb8XwFUKeTXG3sIA==", + "license": "ISC", + "peerDependencies": { + "vue": ">=3.0.1" + } + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", @@ -1843,6 +1878,16 @@ "node": ">=0.10.0" } }, + "node_modules/tailwind-merge": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz", + "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "4.1.18", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz", @@ -1878,6 +1923,16 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/tw-animate-css": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz", + "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Wombosvideo" + } + }, "node_modules/typescript": { "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", diff --git a/package.json b/package.json index 9570a41..4ef2e76 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,10 @@ }, "dependencies": { "@tailwindcss/vite": "^4.1.18", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-vue-next": "^0.563.0", + "tailwind-merge": "^3.4.0", "tailwindcss": "^4.1.18", "vue": "^3.5.24" }, @@ -17,6 +21,7 @@ "@types/node": "^24.10.9", "@vitejs/plugin-vue": "^6.0.1", "@vue/tsconfig": "^0.8.1", + "tw-animate-css": "^1.4.0", "typescript": "~5.9.3", "vite": "^7.2.4", "vue-tsc": "^3.1.4" diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..c66a9d9 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,7 @@ +import type { ClassValue } from "clsx" +import { clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/src/style.css b/src/style.css index f1d8c73..f4c1e9b 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,120 @@ @import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} From 0961b1f561890582551ab8bd2b730c0e29fa9107 Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 22:20:41 +0100 Subject: [PATCH 03/10] Set theme to dark --- index.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 94bdc05..8c8859b 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - - - shadcn-vue-template - - -
- - + + + + + + shadcn-vue-template + + +
+ + From 3b68d3376b636ba94c1372ec420c52ef274226ca Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 22:21:54 +0100 Subject: [PATCH 04/10] Added custom.css --- src/custom.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/main.ts | 9 +++--- 2 files changed, 86 insertions(+), 4 deletions(-) create mode 100644 src/custom.css diff --git a/src/custom.css b/src/custom.css new file mode 100644 index 0000000..6971c75 --- /dev/null +++ b/src/custom.css @@ -0,0 +1,81 @@ +h1 { + scroll-margin-top: 5rem; + text-align: center; + font-size: 2.25rem; + line-height: 2.5rem; + font-weight: 800; + letter-spacing: -0.025em; + text-wrap: balance; +} + +h2 { + scroll-margin-top: 5rem; + margin-top: 2.5rem; + border-bottom: 1px solid var(--border); + padding-bottom: 0.5rem; + font-size: 1.875rem; + line-height: 2.25rem; + font-weight: 600; + letter-spacing: -0.025em; + transition: color 0.2s ease; +} + +h2:first-child { + margin-top: 0; +} + +h3 { + scroll-margin-top: 5rem; + margin-top: 2rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 600; + letter-spacing: -0.025em; +} + +h4 { + scroll-margin-top: 5rem; + margin-top: 1.5rem; + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 600; + letter-spacing: -0.025em; +} + +p { + line-height: 1.75rem; +} + +p:not(:first-child) { + margin-top: 1.5rem; +} + +blockquote { + margin-top: 1.5rem; + border-left: 2px solid var(--border); + padding-left: 1.5rem; + font-style: italic; +} + +ul { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + margin-left: 1.5rem; + list-style-type: disc; +} + +ul > li { + margin-top: 0.5rem; +} + +code { + position: relative; + border-radius: var(--radius-sm); + background-color: var(--muted); + padding: 0.2rem 0.3rem; + font-family: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + font-size: 0.875rem; + font-weight: 600; +} diff --git a/src/main.ts b/src/main.ts index 2425c0f..3c841de 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,6 @@ -import { createApp } from 'vue' -import './style.css' -import App from './App.vue' +import { createApp } from "vue"; +import "./style.css"; +import "./custom.css"; +import App from "./App.vue"; -createApp(App).mount('#app') +createApp(App).mount("#app"); From ade7f223b9a5bf25defecbb3f90f24e814b36720 Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 22:28:49 +0100 Subject: [PATCH 05/10] Added Card component --- src/components/HelloWorld.vue | 41 ---------------------- src/components/ui/card/Card.vue | 22 ++++++++++++ src/components/ui/card/CardAction.vue | 17 +++++++++ src/components/ui/card/CardContent.vue | 17 +++++++++ src/components/ui/card/CardDescription.vue | 17 +++++++++ src/components/ui/card/CardFooter.vue | 17 +++++++++ src/components/ui/card/CardHeader.vue | 17 +++++++++ src/components/ui/card/CardTitle.vue | 17 +++++++++ src/components/ui/card/index.ts | 7 ++++ 9 files changed, 131 insertions(+), 41 deletions(-) delete mode 100644 src/components/HelloWorld.vue create mode 100644 src/components/ui/card/Card.vue create mode 100644 src/components/ui/card/CardAction.vue create mode 100644 src/components/ui/card/CardContent.vue create mode 100644 src/components/ui/card/CardDescription.vue create mode 100644 src/components/ui/card/CardFooter.vue create mode 100644 src/components/ui/card/CardHeader.vue create mode 100644 src/components/ui/card/CardTitle.vue create mode 100644 src/components/ui/card/index.ts diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index b58e52b..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/ui/card/Card.vue b/src/components/ui/card/Card.vue new file mode 100644 index 0000000..f5a0707 --- /dev/null +++ b/src/components/ui/card/Card.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/components/ui/card/CardAction.vue b/src/components/ui/card/CardAction.vue new file mode 100644 index 0000000..c91638b --- /dev/null +++ b/src/components/ui/card/CardAction.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/components/ui/card/CardContent.vue b/src/components/ui/card/CardContent.vue new file mode 100644 index 0000000..dfbc552 --- /dev/null +++ b/src/components/ui/card/CardContent.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/components/ui/card/CardDescription.vue b/src/components/ui/card/CardDescription.vue new file mode 100644 index 0000000..71c1b8d --- /dev/null +++ b/src/components/ui/card/CardDescription.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/components/ui/card/CardFooter.vue b/src/components/ui/card/CardFooter.vue new file mode 100644 index 0000000..9e3739e --- /dev/null +++ b/src/components/ui/card/CardFooter.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/components/ui/card/CardHeader.vue b/src/components/ui/card/CardHeader.vue new file mode 100644 index 0000000..4fe4da4 --- /dev/null +++ b/src/components/ui/card/CardHeader.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/components/ui/card/CardTitle.vue b/src/components/ui/card/CardTitle.vue new file mode 100644 index 0000000..5f479e7 --- /dev/null +++ b/src/components/ui/card/CardTitle.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/components/ui/card/index.ts b/src/components/ui/card/index.ts new file mode 100644 index 0000000..1627758 --- /dev/null +++ b/src/components/ui/card/index.ts @@ -0,0 +1,7 @@ +export { default as Card } from "./Card.vue" +export { default as CardAction } from "./CardAction.vue" +export { default as CardContent } from "./CardContent.vue" +export { default as CardDescription } from "./CardDescription.vue" +export { default as CardFooter } from "./CardFooter.vue" +export { default as CardHeader } from "./CardHeader.vue" +export { default as CardTitle } from "./CardTitle.vue" From 96cd49d16613548f3078c06f30430b2c962d9b91 Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 22:42:00 +0100 Subject: [PATCH 06/10] Set custom.css to use classes --- src/custom.css | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/custom.css b/src/custom.css index 6971c75..ea74e35 100644 --- a/src/custom.css +++ b/src/custom.css @@ -1,4 +1,4 @@ -h1 { +.h1 { scroll-margin-top: 5rem; text-align: center; font-size: 2.25rem; @@ -8,7 +8,7 @@ h1 { text-wrap: balance; } -h2 { +.h2 { scroll-margin-top: 5rem; margin-top: 2.5rem; border-bottom: 1px solid var(--border); @@ -20,11 +20,11 @@ h2 { transition: color 0.2s ease; } -h2:first-child { +.h2:first-child { margin-top: 0; } -h3 { +.h3 { scroll-margin-top: 5rem; margin-top: 2rem; font-size: 1.5rem; @@ -33,7 +33,7 @@ h3 { letter-spacing: -0.025em; } -h4 { +.h4 { scroll-margin-top: 5rem; margin-top: 1.5rem; font-size: 1.25rem; @@ -42,33 +42,33 @@ h4 { letter-spacing: -0.025em; } -p { +.p { line-height: 1.75rem; } -p:not(:first-child) { +.p:not(:first-child) { margin-top: 1.5rem; } -blockquote { +.blockquote { margin-top: 1.5rem; border-left: 2px solid var(--border); padding-left: 1.5rem; font-style: italic; } -ul { +.ul { margin-top: 1.5rem; margin-bottom: 1.5rem; margin-left: 1.5rem; list-style-type: disc; } -ul > li { +.ul > li { margin-top: 0.5rem; } -code { +.code { position: relative; border-radius: var(--radius-sm); background-color: var(--muted); From 7deec188d1d02d77dd1e410495048c644c837513 Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 22:42:12 +0100 Subject: [PATCH 07/10] Added Button component --- src/components/ui/button/Button.vue | 29 ++++++++++++++++++++++ src/components/ui/button/index.ts | 38 +++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 src/components/ui/button/Button.vue create mode 100644 src/components/ui/button/index.ts diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue new file mode 100644 index 0000000..374320b --- /dev/null +++ b/src/components/ui/button/Button.vue @@ -0,0 +1,29 @@ + + + diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts new file mode 100644 index 0000000..26e2c55 --- /dev/null +++ b/src/components/ui/button/index.ts @@ -0,0 +1,38 @@ +import type { VariantProps } from "class-variance-authority" +import { cva } from "class-variance-authority" + +export { default as Button } from "./Button.vue" + +export const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", + 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", + }, + size: { + "default": "h-9 px-4 py-2 has-[>svg]:px-3", + "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", + "lg": "h-10 rounded-md px-6 has-[>svg]:px-4", + "icon": "size-9", + "icon-sm": "size-8", + "icon-lg": "size-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + }, +) +export type ButtonVariants = VariantProps From 3118e4e1a5af92b74e76e5e2bf70a209af75f20f Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 23:11:36 +0100 Subject: [PATCH 08/10] Added Button cursor to custom.css --- src/custom.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/custom.css b/src/custom.css index ea74e35..7ecbb1f 100644 --- a/src/custom.css +++ b/src/custom.css @@ -79,3 +79,10 @@ font-size: 0.875rem; font-weight: 600; } + +@layer base { + button:not(:disabled), + [role="button"]:not(:disabled) { + cursor: pointer; + } +} From 33bd7995eecf34fceedd0937a291da01bbc4c719 Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 23:12:04 +0100 Subject: [PATCH 09/10] Tweaked default layout --- src/App.vue | 55 +++++++++++++++++++--------------- src/assets/vue.svg | 1 - src/components/FeatureCard.vue | 35 ++++++++++++++++++++++ 3 files changed, 66 insertions(+), 25 deletions(-) delete mode 100644 src/assets/vue.svg create mode 100644 src/components/FeatureCard.vue diff --git a/src/App.vue b/src/App.vue index 58b0f21..e080a6a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,30 +1,37 @@ - + diff --git a/src/assets/vue.svg b/src/assets/vue.svg deleted file mode 100644 index 770e9d3..0000000 --- a/src/assets/vue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/FeatureCard.vue b/src/components/FeatureCard.vue new file mode 100644 index 0000000..f2e72d6 --- /dev/null +++ b/src/components/FeatureCard.vue @@ -0,0 +1,35 @@ + + + From c0019ce0205994732f179c4d2640549f085632c3 Mon Sep 17 00:00:00 2001 From: Malasaur Date: Mon, 2 Feb 2026 23:12:21 +0100 Subject: [PATCH 10/10] Added package.json and package-lock.json --- package-lock.json | 211 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + public/vite.svg | 1 - 3 files changed, 212 insertions(+), 1 deletion(-) delete mode 100644 public/vite.svg diff --git a/package-lock.json b/package-lock.json index 57041a9..cbd9072 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-vue-next": "^0.563.0", + "reka-ui": "^2.8.0", "tailwind-merge": "^3.4.0", "tailwindcss": "^4.1.18", "vue": "^3.5.24" @@ -488,6 +489,86 @@ "node": ">=18" } }, + "node_modules/@floating-ui/core": { + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz", + "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz", + "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.7.4", + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", + "license": "MIT" + }, + "node_modules/@floating-ui/vue": { + "version": "1.1.10", + "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.10.tgz", + "integrity": "sha512-vdf8f6rHnFPPLRsmL4p12wYl+Ux4mOJOkjzKEMYVnwdf7UFdvBtHlLvQyx8iKG5vhPRbDRgZxdtpmyigDPjzYg==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.5", + "@floating-ui/utils": "^0.2.10", + "vue-demi": ">=0.13.0" + } + }, + "node_modules/@floating-ui/vue/node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "license": "MIT", + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/@internationalized/date": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz", + "integrity": "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, + "node_modules/@internationalized/number": { + "version": "3.6.5", + "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.5.tgz", + "integrity": "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", @@ -865,6 +946,15 @@ "win32" ] }, + "node_modules/@swc/helpers": { + "version": "0.5.18", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz", + "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.8.0" + } + }, "node_modules/@tailwindcss/node": { "version": "4.1.18", "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz", @@ -1122,6 +1212,32 @@ "vite": "^5.2.0 || ^6 || ^7" } }, + "node_modules/@tanstack/virtual-core": { + "version": "3.13.18", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.18.tgz", + "integrity": "sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/vue-virtual": { + "version": "3.13.18", + "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.18.tgz", + "integrity": "sha512-6pT8HdHtTU5Z+t906cGdCroUNA5wHjFXsNss9gwk7QAr1VNZtz9IQCs2Nhx0gABK48c+OocHl2As+TMg8+Hy4A==", + "license": "MIT", + "dependencies": { + "@tanstack/virtual-core": "3.13.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "vue": "^2.7.0 || ^3.0.0" + } + }, "node_modules/@types/estree": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", @@ -1138,6 +1254,12 @@ "undici-types": "~7.16.0" } }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz", + "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==", + "license": "MIT" + }, "node_modules/@vitejs/plugin-vue": { "version": "6.0.4", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz", @@ -1319,6 +1441,44 @@ } } }, + "node_modules/@vueuse/core": { + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.0.tgz", + "integrity": "sha512-tpjzVl7KCQNVd/qcaCE9XbejL38V6KJAEq/tVXj7mDPtl6JtzmUdnXelSS+ULRkkrDgzYVK7EerQJvd2jR794Q==", + "license": "MIT", + "dependencies": { + "@types/web-bluetooth": "^0.0.21", + "@vueuse/metadata": "14.2.0", + "@vueuse/shared": "14.2.0" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, + "node_modules/@vueuse/metadata": { + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.0.tgz", + "integrity": "sha512-i3axTGjU8b13FtyR4Keeama+43iD+BwX9C2TmzBVKqjSHArF03hjkp2SBZ1m72Jk2UtrX0aYCugBq2R1fhkuAQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.0.tgz", + "integrity": "sha512-Z0bmluZTlAXgUcJ4uAFaML16JcD8V0QG00Db3quR642I99JXIDRa2MI2LGxiLVhcBjVnL1jOzIvT5TT2lqJlkA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, "node_modules/alien-signals": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.1.2.tgz", @@ -1326,6 +1486,18 @@ "dev": true, "license": "MIT" }, + "node_modules/aria-hidden": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz", + "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/class-variance-authority": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", @@ -1353,6 +1525,12 @@ "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", "license": "MIT" }, + "node_modules/defu": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz", + "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==", + "license": "MIT" + }, "node_modules/detect-libc": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", @@ -1772,6 +1950,12 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/ohash": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz", + "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==", + "license": "MIT" + }, "node_modules/path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", @@ -1825,6 +2009,27 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/reka-ui": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.8.0.tgz", + "integrity": "sha512-N4JOyIrmDE7w2i06WytqcV2QICubtS2PsK5Uo8FIMAgmO13KhUAgAByP26cXjjm2oF/w7rTyRs8YaqtvaBT+SA==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.6.13", + "@floating-ui/vue": "^1.1.6", + "@internationalized/date": "^3.5.0", + "@internationalized/number": "^3.5.0", + "@tanstack/vue-virtual": "^3.12.0", + "@vueuse/core": "^14.1.0", + "@vueuse/shared": "^14.1.0", + "aria-hidden": "^1.2.4", + "defu": "^6.1.4", + "ohash": "^2.0.11" + }, + "peerDependencies": { + "vue": ">= 3.2.0" + } + }, "node_modules/rollup": { "version": "4.57.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz", @@ -1923,6 +2128,12 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/tw-animate-css": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz", diff --git a/package.json b/package.json index 4ef2e76..adc356c 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-vue-next": "^0.563.0", + "reka-ui": "^2.8.0", "tailwind-merge": "^3.4.0", "tailwindcss": "^4.1.18", "vue": "^3.5.24" diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file