feat: shadcn

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

nuxt.config.ts

@@ -20,7 +20,19 @@ export default defineNuxtConfig({
 		'nuxt-icon',
 		'@nuxtjs/seo',
 		'@nuxtjs/tailwindcss',
+		'shadcn-nuxt'
 	],
+	shadcn: {
+		/**
+		 * Prefix for all the imported component
+		 */
+		prefix: '',
+		/**
+		 * Directory that the component lives in.
+		 * @default "./components/ui"
+		 */
+		componentDir: './components/ui'
+	},
 	ogImage: {
 		googleFontMirror: true,
 		fonts: [

package.json

@@ -22,8 +22,15 @@
 		"@trpc/client": "^10.45.2",
 		"@trpc/server": "^10.45.2",
 		"@vitest/coverage-v8": "^1.4.0",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
 		"consola": "^3.2.3",
+		"lucide-vue-next": "^0.372.0",
+		"radix-vue": "^1.7.2",
+		"shadcn-nuxt": "^0.10.2",
 		"sharp": "^0.33.3",
+		"tailwind-merge": "^2.3.0",
+		"tailwindcss-animate": "^1.0.7",
 		"trpc-nuxt": "^0.10.21",
 		"zod": "^3.22.4"
 	},