Add shadcn/ui

packages/frontend/components.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/style.css",
+		"baseColor": "stone",
+		"cssVariables": false,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"iconLibrary": "lucide"
+}

packages/frontend/package.json

@@ -9,6 +9,7 @@
 		"@vitejs/plugin-react": "catalog:",
 		"autoprefixer": "catalog:",
 		"backend": "workspace:^",
+		"class-variance-authority": "catalog:",
 		"elysia": "catalog:",
 		"postcss": "catalog:",
 		"tailwindcss": "catalog:",
@@ -17,10 +18,14 @@
 	},
 	"dependencies": {
 		"@elysiajs/eden": "catalog:",
+		"clsx": "catalog:",
 		"common": "workspace:^",
+		"lucide-react": "catalog:",
 		"opensheetmusicdisplay": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
-		"react-router-dom": "catalog:"
+		"react-router-dom": "catalog:",
+		"tailwind-merge": "catalog:",
+		"tailwindcss-animate": "catalog:"
 	}
 }

packages/frontend/src/lib/utils.ts

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

packages/frontend/src/style.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	:root {
+		--radius: 0.5rem;
+	}
+}

packages/frontend/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import("tailwindcss").Config} */
 export default {
+	darkMode: ["class"],
 	content: [
 		"./index.html",
 		"./src/**/*.{js,ts,jsx,tsx}",
@@ -9,5 +10,14 @@ export default {
 			sans: ["Lato", "sans-serif"],
 			mono: ["JetBrains Mono", "monospace"],
 		},
+		extend: {
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)",
+			},
+			colors: {},
+		},
 	},
+	plugins: [require("tailwindcss-animate")],
 };

packages/frontend/tsconfig.json

@@ -2,6 +2,11 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"types": ["react", "react-dom"],
+
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"],
+		},
 	},
 	"references": [
 		{ "path": "../common" },

packages/frontend/vite.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
 	plugins: [react()],
 	resolve: {
 		alias: {
+			"@": path.resolve(__dirname, "./src"),
 			"common": path.resolve(__dirname, "../common/src"),
 		},
 	},