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

Tổng Quan về shadcn/ui

shadcn/ui là một collection of copy-and-paste components được xây dựng trên Radix UI và Tailwind CSS. Khác với các UI libraries truyền thống, shadcn/ui không phải là một npm package mà là một hệ thống components có thể copy và customize theo nhu cầu project.

Lợi Ích Chính

Full Control: Components được copy vào project, bạn sở hữu hoàn toàn code
Customizable: Dễ dàng modify theo design system riêng
Modern Stack: Built with Radix UI, Tailwind CSS, và TypeScript
Accessibility: Components tuân thủ WAI-ARIA guidelines
Developer Experience: Excellent TypeScript support và IntelliSense

Yêu Cầu Hệ Thống

React: 18+ với TypeScript support
Node.js: 20.19+ hoặc mới hơn
Package Manager: pnpm, npm, yarn, hoặc bun
Build Tool: Vite (khuyến nghị), Next.js, hoặc React Router

Cài Đặt shadcn/ui với Vite

Bước 2: Cài Đặt và Cấu Hình Tailwind CSS

shadcn/ui sử dụng Tailwind CSS v4 với Vite plugin mới:

Bước 3: Cấu Hình TypeScript Paths

Cần cấu hình path aliases cho TypeScript để import components dễ dàng.

Cập nhật tsconfig.json:

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

Cập nhật tsconfig.app.json:

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

Bước 4: Cấu Hình Vite Plugin

Cài đặt Node.js types và cập nhật Vite config:

pnpm add -D @types/node

Cập nhật vite.config.ts:

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"),
    },
  },
})

Bước 5: Khởi Tạo shadcn/ui

Chạy CLI command để setup shadcn/ui:

pnpm dlx shadcn@latest init

Bạn sẽ được hỏi một số câu hỏi configuration:

✔ 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

Bước 6: Verification Setup

Sau khi chạy shadcn init, một số files sẽ được tạo:

components.json - Configuration file
src/lib/utils.ts - Utility functions
tailwind.config.ts - Tailwind configuration

Kiểm tra components.json:

{
  "$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"
  }
}

Kiểm tra src/lib/utils.ts:

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

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

Sử Dụng shadcn/ui Components

Thêm Components Đầu Tiên

Thêm Button component:

pnpm dlx shadcn@latest add button

Command này sẽ tạo file src/components/ui/button.tsx và cài đặt dependencies cần thiết.

Tạo Example App

Cập nhật src/App.tsx để test components:

import { Button } from "@/components/ui/button"
import { useState } from "react"

function App() {
  const [count, setCount] = useState(0)

  return (
    <Button onClick={() => setCount((count) => count + 1)} className="mb-2">
      count is {count}
    </Button>
  )
}

export default App

Thêm Nhiều Components

# Thêm các components phổ biến
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add input
pnpm dlx shadcn@latest add label
pnpm dlx shadcn@latest add textarea
pnpm dlx shadcn@latest add select
pnpm dlx shadcn@latest add dialog
pnpm dlx shadcn@latest add badge
pnpm dlx shadcn@latest add avatar
pnpm dlx shadcn@latest add dropdown-menu

Hoặc thêm nhiều components cùng lúc:

pnpm dlx shadcn@latest add card input label textarea select dialog badge avatar dropdown-menu

So Sánh shadcn/ui với Các UI Libraries Khác

Feature	shadcn/ui	Material-UI	Ant Design	Chakra UI	Mantine
Installation	Copy components	npm install	npm install	npm install	npm install
Bundle Size	⭐⭐⭐⭐⭐ Small	⭐⭐⭐ Medium	⭐⭐ Large	⭐⭐⭐⭐ Small	⭐⭐⭐ Medium
Customization	⭐⭐⭐⭐⭐ Full control	⭐⭐⭐ Theme system	⭐⭐ Limited	⭐⭐⭐⭐ Easy	⭐⭐⭐⭐ Good
Design System	Radix + Tailwind	Material Design	Ant Design	Custom	Custom
TypeScript	⭐⭐⭐⭐⭐ Excellent	⭐⭐⭐⭐ Good	⭐⭐⭐⭐ Good	⭐⭐⭐⭐ Good	⭐⭐⭐⭐⭐ Excellent
Accessibility	⭐⭐⭐⭐⭐ WAI-ARIA	⭐⭐⭐⭐ Good	⭐⭐⭐ Basic	⭐⭐⭐⭐ Good	⭐⭐⭐⭐ Good
Learning Curve	⭐⭐⭐ Medium	⭐⭐⭐⭐ Easy	⭐⭐⭐⭐ Easy	⭐⭐⭐⭐ Easy	⭐⭐⭐⭐ Easy
Performance	⭐⭐⭐⭐⭐ Excellent	⭐⭐⭐ Good	⭐⭐⭐ Good	⭐⭐⭐⭐ Good	⭐⭐⭐⭐ Good

Kết Luận

shadcn/ui cung cấp một approach độc đáo cho việc xây dựng UI components trong React applications. Với việc combine Radix UI primitives và Tailwind CSS styling, bạn có được:

✅ Full Control: Sở hữu hoàn toàn component code
✅ Modern Stack: TypeScript, Radix UI, Tailwind CSS
✅ Accessibility: WAI-ARIA compliant out of the box
✅ Developer Experience: Excellent tooling và IntelliSense
✅ Customization: Easy để modify theo brand requirements
✅ Performance: Minimal bundle size với tree-shaking

Bây giờ bạn đã sẵn sàng build beautiful, accessible React UIs với shadcn/ui! 🚀