mui

package.json

@@ -10,12 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.12",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/material": "^5.15.12",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.17",
     "@tanstack/react-router": "^1.18.3",
     "@tanstack/router-vite-plugin": "^1.18.1",
     "autoprefixer": "^10.4.18",
+    "install": "^0.13.0",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {

src/app/App.tsx

@@ -1,6 +1,12 @@
 import { routeTree } from "@/routeTree.gen";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 
+import "./globals.css";
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+
 const router = createRouter({ routeTree });
 
 declare module "@tanstack/react-router" {

src/main.tsx

@@ -1,4 +1,3 @@
-import "./index.css";
 import App from "./app/App.tsx";
 
 import React from "react";