feat(ui): integrate Shadcn UI

This commit integrates the Shadcn UI component library to provide a foundational set of components for the application's
user interface.

Key changes include:
- Added necessary dependencies like `class-variance-authority`, `clsx`, and `tailwind-merge`.
- Initialized Shadcn via its CLI, creating the `components.json` configuration file.
- Configured TypeScript path aliases in `tsconfig.json` and `tsconfig.app.json` to support `@/*` imports.
- Implemented CSS variables for theming, supporting both light and dark modes, in `main.css`.
- Added the standard `cn` utility function for merging Tailwind CSS classes.
- Updated `README.md` with detailed setup instructions for Shadcn UI.

README.md

@@ -4,6 +4,7 @@ This is a learning project that combines multiple frameworks to create a demo ap
 
 - **Base framework:** Vue 3 + Vite 7
 - **CSS framework:** Tailwind CSS 4
+- **UI framework:** Shadcn UI
 - **Package manager:** pnpm
 
 ---
@@ -114,7 +115,7 @@ Now you can use Tailwind CSS atomic classes in your project.
 
 ---
 
-## Example Usage
+#### Example Usage for Tailwind CSS v4
 
 ```vue
 <script setup lang="ts"></script>
@@ -144,3 +145,63 @@ Now you can use Tailwind CSS atomic classes in your project.
   </div>
 </template>
 ```
+
+### Shadcn UI
+
+> Installation guide adapted from the [official Shadcn UI Vite documentation](https://ui.shadcn.com/docs/installation/vite).
+
+#### 1. Configure TypeScript Paths
+
+Add the `baseUrl` and `paths` properties to the `compilerOptions` section in both `tsconfig.json` and `tsconfig.app.json` to enable absolute imports:
+
+**tsconfig.json**
+
+```json
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.app.json" }],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+**tsconfig.app.json**
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+This allows you to import files from `src` using `@/` instead of relative paths like `../../`.
+
+---
+
+#### 2. Install Node Type Definitions
+
+Shadcn UI requires Node type definitions for TypeScript. Install them as a development dependency:
+
+```sh
+pnpm add -D @types/node
+```
+
+---
+
+#### 3. Initialize Shadcn CLI
+
+Run the Shadcn CLI to set up the UI components and folder structure:
+
+```sh
+pnpm dlx shadcn@latest init
+```
+
+Follow the prompts to choose which components to include. After initialization, you can start using Shadcn UI components in your Vue project.