Hướng Dẫn Setup shadcn/ui trong React App: Từ Cài Đặt Đến Sử Dụng Components

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src"
  ]
}

pnpm add -D @types/node

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    tailwindcss()
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

pnpm dlx shadcn@latest init

✔ Which color would you like to use as base color? › Neutral
✔ Where is your global CSS file? › src/index.css
✔ Do you want to use CSS variables for colors? › yes
✔ Are you using a custom tailwind prefix? › (leave empty)
✔ Where is your tailwind.config.js located? › tailwind.config.ts
✔ Configure the import alias for components? › @/components
✔ Configure the import alias for utils? ›. @/lib/utils
✔ Are you using React Server Components? › no

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}