# 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 class="d-flex flex-column align-items-center justify-content-center vh-100">
      <h1 class="fs-3 fw-bold mb-4">Shadcn UI Demo</h1>

      <div class="d-flex flex-column gap-3">
        <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";
// Original imports from shadcn
// 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 (
    <div class="card mx-auto card-custom" style="width: 350px;"> {/* Use Bootstrap card */}
      <div class="card-header card-header-custom"> {/* Use Bootstrap card-header */}
        <h5 class="card-title mb-0">Đăng nhập</h5> {/* Use Bootstrap card-title */}
        <p class="card-text text-muted">Đăng nhập để tiếp tục sử dụng ứng dụng.</p> {/* Use Bootstrap card-text */}
      </div>
      <form onSubmit={handleSubmit}>
        <div class="card-body space-y-4"> {/* Use Bootstrap card-body and spacing utilities */}
          <div class="mb-3"> {/* Use Bootstrap margin-bottom */}
            <label for="email" class="form-label">Email</label> {/* Use Bootstrap form-label */}
            <input
              id="email"
              type="email"
              placeholder="[email protected]"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              class="form-control form-control-custom"> {/* Use Bootstrap form-control */}
            </input>
          </div>
          <div class="mb-3"> {/* Use Bootstrap margin-bottom */}
            <label for="password" class="form-label">Mật khẩu</label> {/* Use Bootstrap form-label */}
            <input
              id="password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              class="form-control form-control-custom"> {/* Use Bootstrap form-control */}
            </input>
          </div>
        </div>
        <div class="card-footer"> {/* Use Bootstrap card-footer */}
          <button type="submit" class="btn btn-primary-custom w-100">Đăng nhập</button> {/* Use Bootstrap btn-primary */}
        </div>
      </form>
    </div>
  );
}

// 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
// Note: When converting to pure Bootstrap, you'd apply classes directly
/*
<Button type="submit" variant="login-button" className="w-full">
  Đăng nhập
</Button>
*/
// In Bootstrap, this would be something like:
/*
<button type="submit" class="btn" style="background-color: #2563eb; color: white;">
    Đăng nhập
</button>
*/
// Or if you define a custom btn variant in CSS:
<button type="submit" class="btn btn-login-button w-100">
  Đăng nhập
</button>
// With CSS like:
/*
.btn-login-button {
    background-color: #2563eb;
    color: white;
    transition: background-color 0.3s ease;
}
.btn-login-button:hover {
    background-color: #1e40af;
}
*/