Configuration

This section explains how to adjust the project settings — from Vite and TypeScript configs to routing and deployment.

Vite Configuration

Main configuration file: vite.config.ts

Here you can:

• Define path aliases (e.g. @/components → /src/components)
• Register plugins (e.g. React, SVG, or environment-related)
• Adjust base path, server port, or build output

Example:

// vite.config.ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
  server: {
    port: 5173,
  },
})

TypeScript

The project runs in strict mode by default for better type safety.

Files:

• tsconfig.json → base TypeScript configuration
• tsconfig.app.json → app-level settings (used by Vite)
• tsconfig.node.json → Node-specific config (for build tools)

You can safely modify compiler options if you need relaxed rules, for example:

{
  "compilerOptions": {
    "strict": false,
    "noUnusedLocals": false
  }
}

ESLint

Located at: eslint.config.js

This ensures consistent code style across components and hooks.

You can run:

npm run lint

or adjust rules to your preference:

export default {
  extends: ["eslint:recommended", "plugin:react/recommended"],
  rules: {
    "react/react-in-jsx-scope": "off",
  },
}

Routing

The app uses React Router v7 for navigation. All routes are defined in:

src/routes/index.tsx

Each route maps to a page in /src/pages/*. To add a new page:

// src/routes/index.tsx
<Route path="/new" element={<NewPage />} />

Components Registry

components.json defines UI components and categories.

You can extend this file to organize custom components or shared UI primitives.

Deployment (Optional)

For Vercel users, deployment settings are defined in:

vercel.json

Example:

{
  "buildCommand": "yarn build",
  "outputDirectory": "dist",
  "framework": "vite"
}

Styling Configuration

Global styles live in:

index.css

This includes:

• Tailwind CSS base, components, and utilities
• Custom variables and theme tokens

Edit or extend styles directly, or add your own *.css files inside /src/ or /src/styles/.

@import "tailwindcss";
@import "tw-animate-css";
 
@custom-variant dark (&:is(.dark *));
 
:root {
  --radius: 0.625rem;
  --background-elevated: rgba(255, 255, 255, 1);
  --foreground: rgba(10, 10, 10, 1);
  --foreground-light-solid: rgba(250, 250, 250, 1);
  --foreground-dark-solid: rgba(10, 10, 10, 1);
  --background: rgba(255, 255, 255, 1);
  --shadow-2: rgba(11, 12, 14, 0.019999999552965164);
  --shadow-4: rgba(11, 12, 14, 0.03999999910593033);
  --shadow-5: rgba(11, 12, 14, 0.05000000074505806);
  --shadow-6: rgba(11, 12, 14, 0.05999999865889549);
  --shadow-8: rgba(11, 12, 14, 0.07999999821186066);
  --shadow-10: rgba(11, 12, 14, 0.10000000149011612);
  --shadow-12: rgba(11, 12, 14, 0.11999999731779099);
  ...
}

Summary