Blog

HeroUI là gì? Hướng dẫn HeroUI cho người mới bắt đầu

Mark Ponomarev

Mark Ponomarev

12 tháng 6 2025

HeroUI là gì? Hướng dẫn HeroUI cho người mới bắt đầu
💡
Bạn muốn một công cụ Kiểm thử API tuyệt vời có thể tạo Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, Tất cả trong Một để Đội ngũ Phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi nhu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!
nút

Đối với các nhà phát triển frontend, nhu cầu về giao diện người dùng đẹp mắt, hiệu năng cao và khả năng tùy chỉnh sâu sắc chưa bao giờ lớn đến thế. Các nhà phát triển không ngừng tìm kiếm các công cụ có thể tăng tốc quy trình làm việc của họ mà không phải hy sinh chất lượng hoặc quyền kiểm soát sáng tạo. Trong khi các thư viện thành phần UI nguyên khối đã phục vụ cộng đồng tốt trong nhiều năm, một mô hình mới đang nổi lên—một mô hình ưu tiên quyền sở hữu của nhà phát triển, tính mô-đun và tích hợp liền mạch với các framework hiện đại. Chính trong mô hình mới này, HeroUI đã tìm được vị trí riêng của mình.

HeroUI không chỉ là một thư viện thành phần khác; nó là một bộ sưu tập được chế tác tỉ mỉ gồm các thành phần UI có thể tái sử dụng được thiết kế để tích hợp trực tiếp vào các dự án của bạn. Nó đề cao triết lý trao cho các nhà phát triển quyền kiểm soát tối thượng đối với codebase của họ. Thay vì nhập các thành phần khó hiểu từ một node module, bạn sử dụng Giao diện dòng lệnh (CLI) của HeroUI để thêm mã nguồn thực tế của các thành phần bạn cần vào dự án của mình. Sự tiến hóa "copy-and-paste" này có nghĩa là mọi nút, thẻ và hộp thoại đều trở thành một phần của ứng dụng của riêng bạn, sẵn sàng được tinh chỉnh, định kiểu lại và điều chỉnh theo nhu cầu cụ thể của bạn.

Được xây dựng trên nền tảng của những gã khổng lồ như React, Tailwind CSS và Next.js, HeroUI cung cấp các khối xây dựng để tạo ra giao diện người dùng đẹp, dễ tiếp cận và đáp ứng. Nó được thiết kế cho nhà phát triển hiện đại, những người coi trọng cả tốc độ và tính đặc thù, cung cấp một điểm khởi đầu mạnh mẽ mà không khóa bạn vào một hệ thống thiết kế cứng nhắc. Bài viết này sẽ đóng vai trò là hướng dẫn toàn diện để hiểu các nguyên tắc cốt lõi của HeroUI, cài đặt nó vào dự án của bạn, tùy chỉnh giao diện và tận dụng CLI mạnh mẽ của nó để xây dựng thế hệ ứng dụng web tiếp theo.

Phần 1: Phân tích HeroUI - Triết lý và các Tính năng Cốt lõi

Trước khi đi sâu vào các chi tiết kỹ thuật về cài đặt và sử dụng, điều quan trọng là phải hiểu "lý do tại sao" đằng sau HeroUI. Nó giải quyết những vấn đề gì và điều gì khiến nó trở thành một lựa chọn hấp dẫn trong lĩnh vực công cụ UI đông đúc?

Triết lý: Quyền sở hữu và Tùy chỉnh không giới hạn

Sự khác biệt cơ bản giữa HeroUI và các thư viện UI truyền thống như Material-UI hoặc Ant Design nằm ở khái niệm quyền sở hữu. Khi bạn cài đặt một thư viện truyền thống, bạn đang thêm một dependency vào tệp package.json của mình. Ứng dụng của bạn sau đó nhập các thành phần đã được biên dịch sẵn từ gói này. Mặc dù điều này tiện lợi, nhưng nó đi kèm với một số nhược điểm:

  1. Khả năng tùy chỉnh hạn chế: Việc ghi đè kiểu dáng có thể phức tạp, thường yêu cầu bạn phải chống lại các kiểu mặc định của thư viện bằng các thẻ !important hoặc cấu hình nhà cung cấp chủ đề phức tạp.
  2. Các thành phần hộp đen: Logic nội bộ của các thành phần bị ẩn trong thư mục node_modules. Việc gỡ lỗi hành vi không mong muốn hoặc hiểu cách hoạt động bên trong trở nên khó khăn hơn đáng kể.
  3. Kích thước bundle phình to: Bạn thường nhập toàn bộ thư viện, hoặc ít nhất là một phần đáng kể của nó, ngay cả khi bạn chỉ sử dụng một vài thành phần, có khả năng làm tăng kích thước bundle cuối cùng của ứng dụng.
  4. Vấn đề phụ thuộc (Dependency Hell): Bạn bị ràng buộc bởi chu kỳ cập nhật của thư viện và các dependency của nó. Một thay đổi đột phá trong thư viện có thể buộc phải tái cấu trúc lớn trong ứng dụng của bạn.

HeroUI hoàn toàn né tránh những vấn đề này. Bằng cách để CLI đặt mã nguồn của thành phần trực tiếp vào thư mục dự án của bạn (ví dụ: /components/ui), nó trao quyền cho bạn theo một số cách chính:

Triết lý này hướng đến các nhà phát triển và đội ngũ muốn xây dựng một hệ thống thiết kế độc đáo cho sản phẩm của họ mà không phải bắt đầu từ đầu. Nó cung cấp các nguyên thủy cơ bản, không có kiểu dáng (hoặc có kiểu dáng nhẹ), và bạn cung cấp nhận diện thương hiệu.

Các Tính năng Chính trong Nháy mắt

HeroUI không chỉ là phương pháp cài đặt của nó. Nó đi kèm với các tính năng được thiết kế cho quy trình phát triển hiện đại.

HeroUI dành cho Ai?

HeroUI là một lựa chọn lý tưởng cho một loại nhà phát triển và dự án cụ thể:

Nó có thể ít phù hợp hơn với những người mới bắt đầu hoàn toàn, những người thích một giải pháp "out-of-the-box", tích hợp sẵn, nơi yêu cầu cấu hình tối thiểu. Sức mạnh của HeroUI nằm ở khả năng cấu hình của nó, điều này đòi hỏi sự hiểu biết cơ bản về Tailwind CSS và môi trường phát triển frontend hiện đại.

Phần 2: Bắt đầu - Hướng dẫn chi tiết về Cài đặt và Thiết lập

Bây giờ chúng ta đã hiểu triết lý, hãy bắt tay vào thực hành. Phần này cung cấp hướng dẫn tỉ mỉ, từng bước để tích hợp HeroUI vào một dự án mới hoặc hiện có. Phương pháp được khuyến nghị và hiệu quả nhất là sử dụng HeroUI CLI chính thức.

Các Yêu cầu Tiên quyết

Trước khi bắt đầu, hãy đảm bảo môi trường phát triển của bạn đáp ứng các yêu cầu sau:

npx create-next-app@latest my-heroui-app

Trong quá trình thiết lập Next.js, nên chọn TypeScript và Tailwind CSS, vì đây là nền tảng cho hệ sinh thái HeroUI.

Lệnh init của HeroUI CLI: Điểm Khởi đầu của Bạn

Lệnh init là điểm vào kỳ diệu vào thế giới HeroUI. Nó kiểm tra dự án của bạn một cách thông minh, hỏi bạn một loạt câu hỏi và sau đó tự động cấu hình mọi thứ bạn cần.

Điều hướng vào thư mục dự án của bạn:Bash

cd my-heroui-app

Bây giờ, chạy lệnh khởi tạo:Bash

npx heroui-cli@latest init

CLI bây giờ sẽ hướng dẫn bạn qua quy trình thiết lập. Hãy phân tích từng câu hỏi nó hỏi và ý nghĩa của các lựa chọn của bạn.

1. "Bạn muốn sử dụng kiểu dáng nào?"

2. "Bạn muốn sử dụng màu nào làm màu cơ bản?"

3. "Tệp CSS toàn cục của bạn ở đâu?"

4. "Bạn có muốn sử dụng biến CSS cho màu sắc không?"

5. "Tệp tailwind.config.js của bạn ở đâu?"

6. "Cấu hình bí danh nhập cho các thành phần:"

7. "Cấu hình bí danh nhập cho các tiện ích:"

8. "Bạn có đang sử dụng React Server Components không?"

Sau khi bạn đã trả lời tất cả các câu hỏi, CLI sẽ thực hiện phép thuật của nó. Nó sẽ:

Dự án của bạn giờ đã được cấu hình đầy đủ và sẵn sàng cho HeroUI.

Giải phẫu các Thay đổi

Hãy xem xét kỹ hơn các tệp chính mà CLI đã sửa đổi hoặc tạo.

components.json

Tệp này là bản kê khai cho HeroUI trong dự án của bạn. Nó lưu trữ các lựa chọn bạn đã thực hiện trong quá trình init và cho CLI biết dự án của bạn được cấu hình như thế nào.JSON

{
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components"
  }
}

Bạn hiếm khi cần chỉnh sửa tệp này theo cách thủ công, nhưng việc hiểu mục đích của nó là hữu ích. Nó là bộ não đằng sau các hoạt động của CLI.

tailwind.config.js

Cấu hình Tailwind của bạn sẽ được mở rộng để trông giống như thế này. Các bổ sung chính là phần mở rộng theme và plugin tailwindcss-animate.JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        // ... và nhiều định nghĩa màu khác liên kết với biến CSS
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ...
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        // ... keyframes cho hoạt ảnh
      },
      animation: {
        // ... tiện ích hoạt ảnh
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Hãy chú ý cách các màu như primary không được định nghĩa bằng mã hex mà bằng hsl(var(--primary)). Điều này cho Tailwind biết sử dụng biến CSS có tên --primary, được định nghĩa trong CSS toàn cục của bạn.

app/globals.css

Tệp này giờ là trái tim của chủ đề hệ thống thiết kế của bạn. Nó sẽ chứa các chỉ thị Tailwind cơ bản và một khối lớn các biến CSS.CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    /* ... nhiều biến khác cho chủ đề sáng */
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    /* ... nhiều biến khác cho chủ đề tối */
  }
}

Tại đây, bạn có thể thấy sức mạnh của thiết lập này. Tất cả màu sắc chủ đề sáng của bạn được định nghĩa trong phạm vi :root, và tất cả màu sắc chủ đề tối của bạn được định nghĩa bên trong phạm vi lớp .dark. Khi lớp .dark được thêm vào phần tử <html>, trình duyệt sẽ tự động sử dụng các biến của chủ đề tối.

Phần 3: Làm chủ Tùy chỉnh - Theming, Bố cục và Chế độ tối

Với HeroUI đã được khởi tạo, phần thú vị thực sự bắt đầu: biến nó thành của riêng bạn. Kiến trúc được thiết kế rõ ràng để tùy chỉnh sâu sắc và trực quan.

Nghệ thuật Theming với Biến CSS

Theming trong HeroUI là một sự khác biệt so với các đối tượng chủ đề dựa trên JavaScript phức tạp mà bạn có thể tìm thấy trong các thư viện khác. Nó đơn giản hơn, mạnh mẽ hơn và tận dụng các tính năng CSS hiện đại. Toàn bộ chủ đề—màu sắc, bán kính bo góc, phông chữ—được kiểm soát bởi biến CSS được định nghĩa trong tệp globals.css của bạn.

Thay đổi Màu sắc

Giả sử bạn muốn thay đổi màu thương hiệu chính của mình. Bạn không cần vào cấu hình Tailwind. Bạn chỉ cần tìm các biến CSS liên quan trong globals.css và thay đổi giá trị của chúng.

Các màu được định nghĩa bằng giá trị HSL (Hue, Saturation, Lightness), nhưng không có trình bao bọc hsl(). Ví dụ:CSS

:root {
  /* ... */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  /* ... */
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

Để thay đổi màu chính của bạn thành màu xanh lá cây rực rỡ, bạn có thể sử dụng công cụ chọn màu trực tuyến để tìm giá trị HSL cho sắc thái bạn đã chọn và cập nhật các biến:CSS

/* Trong globals.css */
:root {
  /* ... */
  --primary: 142.1 76.2% 36.3%; /* Màu chính Xanh lá cây mới */
  --primary-foreground: 355.7 100% 97.3%; /* Màu sáng tương phản cho văn bản trên màu chính */
  /* ... */
}

.dark {
  /* ... */
  --primary: 142.1 70.2% 46.3%; /* Màu xanh lá cây hơi khác cho chế độ tối */
  --primary-foreground: 355.7 100% 97.3%;
  /* ... */
}

Sau khi bạn lưu tệp này, mọi thành phần sử dụng màu "primary" (như <Button>) sẽ ngay lập tức cập nhật trên toàn bộ ứng dụng của bạn để phản ánh màu xanh lá cây mới này. Điều này cực kỳ mạnh mẽ.

Thay đổi Bán kính Bo góc

Độ tròn của các góc trên các thành phần như thẻ và input được kiểm soát bởi một biến CSS duy nhất: --radius.CSS

/* Trong globals.css */
:root {
  /* ... */
  --radius: 0.5rem; /* Giá trị mặc định */
}

Nếu bạn thích giao diện sắc nét hơn, vuông vắn hơn, bạn có thể giảm giá trị này:CSS

:root {
  --radius: 0.25rem; /* Ít bo tròn hơn */
}

Hoặc, để có thẩm mỹ rất mềm mại, bo tròn, bạn có thể tăng nó:CSS

:root {
  --radius: 1.5rem; /* Rất bo tròn */
}

Thay đổi một dòng này sẽ lan truyền qua tất cả các thành phần của bạn, đảm bảo bán kính bo góc nhất quán trên toàn bộ giao diện người dùng của bạn.

Thêm Màu sắc Mới

Bạn không bị giới hạn bởi các màu được cung cấp bởi lệnh init. Bạn có thể dễ dàng thêm các màu ngữ nghĩa của riêng mình. Ví dụ, hãy thêm một màu thương hiệu "đặc biệt".

Định nghĩa các biến CSS trong globals.css:CSS

/* Trong globals.css */
:root {
  /* ... */
  --special: 320 86% 59%;
  --special-foreground: 330 100% 98%;
}
.dark {
  /* ... */
  --special: 320 80% 69%;
  --special-foreground: 330 100% 98%;
}

Hiển thị chúng cho Tailwind trong tailwind.config.js:JavaScript

// Trong tailwind.config.js
// ...
extend: {
  colors: {
    // ...
    special: {
      DEFAULT: "hsl(var(--special))",
      foreground: "hsl(var(--special-foreground))",
    },
  },
},
// ...

Bây giờ bạn có thể sử dụng các màu này trong các thành phần của mình với các lớp tiện ích của Tailwind, chẳng hạn như bg-special và text-special-foreground.

Xây dựng Bố cục Đáp ứng

Các thành phần HeroUI được xây dựng bằng Tailwind CSS, điều này có nghĩa là chúng vốn đã đáp ứng. Bạn có thể sử dụng các tiền tố đáp ứng của Tailwind (sm:, md:, lg:, xl:) trên bất kỳ lớp tiện ích nào để thay đổi kiểu dáng của thành phần ở các kích thước màn hình khác nhau.

Hãy tưởng tượng xây dựng một bố cục trang đơn giản với một thanh bên hiển thị trên máy tính để bàn nhưng thu gọn trên thiết bị di động. Mặc dù HeroUI cung cấp các thành phần cấp thấp (Card, Button), bạn chịu trách nhiệm kết hợp chúng thành một bố cục lớn hơn.

Đây là một ví dụ về cách bạn có thể cấu trúc điều này trong một thành phần trang Next.js:TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function DashboardPage() {
  return (
    <div className="flex min-h-screen flex-col md:flex-row">
      {/* Thanh bên */}
      <aside className="w-full border-b bg-muted p-4 md:w-64 md:border-b-0 md:border-r">
        <h2 className="text-lg font-semibold">Điều hướng</h2>
        <nav className="mt-4 flex flex-row space-x-2 md:flex-col md:space-x-0 md:space-y-2">
          <Button variant="ghost" className="justify-start">Bảng điều khiển</Button>
          <Button variant="ghost" className="justify-start">Cài đặt</Button>
          <Button variant="ghost" className="justify-start">Hồ sơ</Button>
        </nav>
      </aside>

      {/* Nội dung chính */}
      <main className="flex-1 p-8">
        <h1 className="text-4xl font-bold tracking-tight">Bảng điều khiển</h1>
        <p className="mt-2 text-muted-foreground">
          Chào mừng đến với bảng điều khiển của bạn.
        </p>
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle>Doanh thu</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">$45,231.89</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Đăng ký</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+2350</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Người dùng hoạt động</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+573</p>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}

Trong ví dụ này:

Điều này thể hiện nguyên tắc cốt lõi: HeroUI cung cấp các nguyên thủy đã được định kiểu (Card, Button), và bạn sử dụng toàn bộ sức mạnh của Tailwind CSS để sắp xếp chúng thành các bố cục phức tạp, đáp ứng.

Triển khai Chế độ tối Hoàn hảo

Một trong những tính năng thanh lịch nhất của HeroUI là hỗ trợ tích hợp sẵn cho chế độ tối. Bởi vì lệnh init đã thiết lập các biến màu cho cả chủ đề sáng (:root) và tối (.dark), việc triển khai nó cực kỳ đơn giản.

Cách tiếp cận phổ biến nhất là sử dụng gói next-themes, gói này xử lý việc chuyển đổi chủ đề và duy trì lựa chọn của người dùng trong local storage.

Cài đặt next-themes:Bash

npm install next-themes

Tạo Theme Provider:

Tạo một tệp mới, ví dụ: tại components/theme-provider.tsx.TypeScript

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Bọc Root Layout của bạn bằng Provider:

Trong root layout Next.js của bạn (app/layout.tsx), nhập và sử dụng ThemeProvider.TypeScript

import { ThemeProvider } from "@/components/theme-provider";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Các prop chính ở đây là:

Tạo Nút Chuyển đổi Chủ đề:

Bây giờ, bạn chỉ cần một phần tử UI để cho phép người dùng chuyển đổi chủ đề.TypeScript

"use client";

import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";

export function ModeToggle() {
  const { setTheme, theme } = useTheme();

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <Button variant="outline" size="icon" onClick={toggleTheme}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Chuyển đổi chủ đề</span>
    </Button>
  );
}

Thành phần này1 sử dụng hook useTheme từ next-themes để kiểm tra chủ đề hiện tại và đặt chủ đề mới. Các biểu tượng mặt trời và mặt trăng xoay cung cấp một hiệu ứng chuyển đổi hình ảnh đẹp mắt. Chỉ cần đặt thành phần <ModeToggle /> này ở đâu đó trong giao diện người dùng của bạn (ví dụ: header), và bạn sẽ có một nút chuyển đổi chế độ tối hoạt động đầy đủ, duy trì trạng thái.

Phần 4: HeroUI CLI và Quy trình làm việc tập trung vào Thành phần của nó

heroui-cli không chỉ là một trình cài đặt. Nó là công cụ chính bạn sẽ sử dụng để quản lý và phát triển thư viện thành phần của mình. Mục đích chính của nó sau khi khởi tạo là thêm các thành phần mới vào dự án của bạn.

Thêm Thành phần: Quy trình làm việc Cốt lõi

Giả sử bạn cần một modal hộp thoại cho ứng dụng của mình. Thay vì viết một cái từ đầu, bạn có thể yêu cầu CLI thêm thành phần Dialog được xây dựng sẵn, dễ tiếp cận của HeroUI.

Lệnh rất đơn giản:Bash

npx heroui-cli@latest add dialog

CLI sẽ thực hiện các hành động sau:

  1. Nó đọc tệp components.json của bạn để hiểu cấu trúc dự án của bạn (bí danh đường dẫn, việc sử dụng TypeScript, v.v.).
  2. Nó tìm nạp mã nguồn mới nhất cho thành phần Dialog và bất kỳ dependency nào của nó (ví dụ: Dialog có thể phụ thuộc vào Button).
  3. Nó đặt các tệp thành phần trực tiếp vào thư mục components của bạn, ví dụ: components/ui/dialog.tsx.
  4. Nó sẽ thông báo cho bạn về bất kỳ dependency nào khác mà bạn có thể cần cài đặt.

Bây giờ, bạn có một tệp dialog.tsx trong dự án của mình. Bạn có thể kiểm tra mã của nó, học hỏi từ đó và thậm chí sửa đổi nó. Nếu Dialog mặc định có hiệu ứng chuyển đổi bạn không thích, bạn chỉ cần mở tệp và thay đổi các lớp Tailwind kiểm soát hoạt ảnh. Mức độ kiểm soát này là nền tảng của trải nghiệm HeroUI.

Bạn có thể thêm nhiều thành phần cùng một lúc:Bash

npx heroui-cli@latest add card button input label

Lệnh này sẽ thêm tất cả bốn thành phần và các dependency của chúng vào dự án của bạn cùng một lúc.

Hiểu API CLI: components.json

Tệp components.json là hợp đồng giữa dự án của bạn và HeroUI CLI. Hãy xem lại các thuộc tính của nó để hiểu cách chúng ảnh hưởng đến hành vi của CLI.

Bằng cách hiểu cấu hình này, bạn thậm chí có thể điều chỉnh thủ công hành vi của CLI nếu bạn quyết định tái cấu trúc cấu trúc dự án của mình, ví dụ: bằng cách di chuyển thư mục components của bạn từ @/components sang @/ui.

Kết luận: Xây dựng theo Cách của Bạn với HeroUI

HeroUI đại diện cho một sự thay đổi đáng kể trong cách các nhà phát triển có thể suy nghĩ và sử dụng các thư viện UI. Nó rời xa mô hình "một kích thước phù hợp cho tất cả", "hộp đen" và hướng tới trải nghiệm nhà phát triển minh bạch, trao quyền và tùy chỉnh sâu sắc. Bằng cách cung cấp các thành phần không có kiểu dáng, dễ tiếp cận trực tiếp dưới dạng mã nguồn, nó đạt được sự cân bằng hoàn hảo giữa phát triển nhanh chóng và thiết kế riêng biệt.

Các điểm mạnh cốt lõi của HeroUI rất rõ ràng:

HeroUI dành cho những người xây dựng, những người thợ thủ công và các đội ngũ tin rằng giao diện người dùng là một phần cốt lõi của nhận diện sản phẩm của họ. Nó không cung cấp cho bạn một ngôi nhà hoàn chỉnh; nó cung cấp cho bạn những vật liệu chất lượng cao nhất và một xưởng làm việc được tổ chức hoàn hảo để xây dựng ngôi nhà mơ ước của bạn. Đối với dự án tiếp theo của bạn đòi hỏi một frontend độc đáo, bóng bẩy và dễ bảo trì, không cần tìm đâu xa ngoài HeroUI. Nó có thể chính là công cụ trao quyền cho bạn để xây dựng giao diện người dùng anh hùng nhất của bạn từ trước đến nay.

💡
Bạn muốn một công cụ Kiểm thử API tuyệt vời có thể tạo Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, Tất cả trong Một để Đội ngũ Phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi nhu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!
nút

Thực hành thiết kế API trong Apidog

Khám phá cách dễ dàng hơn để xây dựng và sử dụng API

Đăng ký miễn phíTải xuống