# Thay vì cài đặt thư viện như thông thường
npm install some-ui-library

# Với Shadcn UI, bạn thêm từng component vào dự án
npx shadcn-ui@latest add button

// Cách 1: Dùng thư viện UI (phát triển nhanh, ít kiểm soát)
import { Button } from 'ui-library';

function App() {
  return <Button color="primary">Click me</Button>;
  // Nhưng khi cần tùy biến đặc biệt? Phải override CSS hoặc hack!
}

// Cách 2: Tự xây dựng mọi thứ (kiểm soát tối đa, nhưng chậm)
function CustomButton({ children, ...props }) {
  return (
    <button 
      className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" 
      {...props}
    >
      {children}
    </button>
  );
}

// components/ui/button.tsx - File này được tạo bởi Shadcn UI CLI
// Nhưng bạn có thể chỉnh sửa nó theo ý muốn!
import * as React from "react";
import { cva } from "class-variance-authority";

// Định nghĩa variants và styles
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        // Thêm một variant mới? Dễ dàng!
        custom: "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
      },
      // ...còn nhiều tùy chọn khác
    },
  }
);

// Sử dụng trong ứng dụng
import { Button } from "@/components/ui/button";

function App() {
  return <Button variant="custom">Beautiful Button</Button>;
}

# Khi bạn chạy lệnh này
npx shadcn-ui@latest add dialog

# CLI sẽ tạo các file trong thư mục components/ui của dự án
# - dialog.tsx
# - dialog-content.tsx
# - dialog-description.tsx
# Và bạn hoàn toàn sở hữu những file này!

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    /* Light theme colors */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    /* ...các biến khác */
  }
 
  .dark {
    /* Dark theme colors */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    /* ...các biến khác */
  }
}

# Tạo dự án Next.js mới (nếu chưa có)
npx create-next-app@latest my-app

# Di chuyển vào thư mục dự án
cd my-app

# Khởi tạo Shadcn UI
npx shadcn-ui@latest init

Would you like to use TypeScript? Yes
Which style would you like to use? Default
Which color would you like to use as base color? Slate
Where is your global CSS file? app/globals.css
Would you like to use CSS variables? Yes
Where would you like to install the components? components/ui
Configure the import alias for components? Yes

# Thêm một component
npx shadcn-ui@latest add button

# Thêm nhiều components cùng lúc
npx shadcn-ui@latest add card form input label

// app/page.tsx
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <h1 className="text-3xl font-bold mb-4">Shadcn UI Demo</h1>
      
      <div className="space-y-4">
        <Button variant="default">Default Button</Button>
        <Button variant="destructive">Destructive Button</Button>
        <Button variant="outline">Outline Button</Button>
        <Button variant="ghost">Ghost Button</Button>
        <Button variant="link">Link Button</Button>
      </div>
    </div>
  );
}

npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
npx shadcn-ui@latest add label
npx shadcn-ui@latest add button

// components/LoginForm.tsx
"use client";

import { useState } from "react";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Login attempted with:", { email, password });
    // Xử lý đăng nhập ở đây
  };

  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Đăng nhập</CardTitle>
        <CardDescription>Đăng nhập để tiếp tục sử dụng ứng dụng.</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input 
              id="email" 
              type="email" 
              placeholder="[email protected]"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password">Mật khẩu</Label>
            <Input 
              id="password" 
              type="password" 
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
        </CardContent>
        <CardFooter>
          <Button type="submit" className="w-full">Đăng nhập</Button>
        </CardFooter>
      </form>
    </Card>
  );
}

// components/ui/button.tsx (chỉnh sửa file đã được tạo bởi CLI)
import * as React from "react";
import { cva } from "class-variance-authority";

// Thêm variant login-button vào buttonVariants
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
        // Thêm variant mới
        "login-button": "bg-blue-600 text-white hover:bg-blue-700 transition-colors",
      },
      // ...các variants khác
    },
  }
);

// Sử dụng variant mới trong LoginForm.tsx
<Button type="submit" variant="login-button" className="w-full">
  Đăng nhập
</Button>