TL;DR: shadcn/ui là một tập hợp các thành phần được thiết kế đẹp mắt, dễ tiếp cận mà bạn có thể sao chép và tùy chỉnh. Với hơn 118K sao GitHub, đây là khung thành phần giao diện người dùng phổ biến nhất. Được xây dựng trên các nguyên hàm Radix và CSS Tailwind, nó hoạt động với React, Vue, Svelte và Angular.

#

shadcn/ui KHÔNG phải là thư viện thành phần truyền thống. Không giống như Material-UI, Ant Design hoặc Bootstrap, bạn không cài đặt nó dưới dạng phần phụ thuộc. Thay vào đó, bạn sao chép và dán các thành phần trực tiếp vào dự án của mình. Điều này cung cấp cho bạn toàn quyền sở hữu và kiểm soát tùy chỉnh.

The project was created by shadcn and has grown to become the most-starred UI component project on GitHub. Its unique approach has fundamentally changed how developers think about UI libraries.

#

Traditional Library:    Install → Configure → Override → Fight
shadcn/ui Approach:     Copy → Customize → Own → Ship

Triết lý cốt lõi rất đơn giản: giao diện người dùng của bạn phải là của bạn. Khi bạn sao chép các thành phần vào cơ sở mã của mình, chúng sẽ trở thành một phần của dự án của bạn. Không có phiên bản nâng cấp nào phá vỡ thiết kế của bạn. Không có ràng buộc về chủ đề. Không có nhà cung cấp khóa.

#

#

shadcn/ui is built on top of Radix UI, a suite of unstyled, accessible primitives. Radix handles the complex accessibility concerns:

• Điều hướng bàn phím
• Hỗ trợ trình đọc màn hình
• Quản lý tập trung
• Thuộc tính ARIA
• Bẫy phương thức

import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
    </DialogHeader>
  </DialogContent>
</Dialog>

#

Mọi thành phần đều sử dụng các lớp tiện ích CSS của Tailwind để tạo kiểu. Điều này có nghĩa là:

• Khoảng cách và kích thước nhất quán
• Tích hợp hỗ trợ chế độ tối
• Thiết kế đáp ứng ngay lập tức
• Tùy chỉnh chủ đề thông qua các biến CSS

/* themes.css - Customize your entire design system */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --radius: 0.5rem;
}

[data-theme="dark"] {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

#

#

# Initialize shadcn/ui in your project
npx shadcn@latest init

# You'll be prompted to configure:
# - Style (default or new)
# - Base color (slate, zinc, stone, neutral, stone)
# - CSS variables (recommended) or global CSS

# Then add any component
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
npx shadcn@latest add toast

#

shadcn/ui cung cấp một công cụ CLI giúp việc thêm các thành phần trở nên dễ dàng:

# Add a complete data table with sorting and filtering
npx shadcn@latest add data-table

# Add form components with validation
npx shadcn@latest add form
npx shadcn@latest add checkbox
npx shadcn@latest add radio-group

# Add navigation components
npx shadcn@latest add sidebar
npx shadcn@latest add breadcrumb

#

shadcn/ui có hơn 80 thành phần đáp ứng mọi nhu cầu về giao diện người dùng:

#

#

Thành phần bảng dữ liệu là một trong những thành phần phổ biến nhất, bao gồm:

import { DataTable } from "@/components/data-table"
import { columns } from "./columns"
import { DataTableToolbar } from "./data-table-toolbar"

function Page() {
  const data = useSWRQueryOptions(useGetUsersQuery())

  return (
    <DataTable
      columns={columns}
      data={data}
      toolbar={<DataTableToolbar />}
      searchKey="name"
    />
  )
}

Các tính năng bao gồm sắp xếp, lọc, ẩn cột, chọn hàng và phân trang — tất cả đều có thể truy cập và điều hướng bằng bàn phím.

#

Được xây dựng dựa trên xác thực React Hook Form và Zod:

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
})

function SignupForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    // Handle submission
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField control={form.register("email")} />
        <FormField control={form.register("name")} />
        <Button type="submit">Sign Up</Button>
      </form>
    </Form>
  )
}

#

Mặc dù ban đầu được xây dựng cho React, shadcn/ui hiện hỗ trợ nhiều khung:

#

# Install shadcn/vue
npx shadcn-vue@latest init
npx shadcn-vue@latest add button

#

# Install shadcn/svelte
npx shadcn-svelte@latest init
npx shadcn-svelte@latest add button

#

# Works with Astro via the React integration
npm install @astrojs/react

#

#

shadcn/ui sử dụng các thuộc tính tùy chỉnh CSS để tạo chủ đề, giúp dễ dàng tạo nhiều chủ đề:

/* Light theme */
:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
}

/* Dark theme */
.dark {
  --primary: 217.2 32.6% 17.5%;
  --primary-foreground: 210 40% 98%;
}

/* Custom brand theme */
.brand-blue {
  --primary: 217.7 91% 56.3%;
  --primary-foreground: 0 0% 98%;
}

#

# Export your design tokens
npx shadcn@latest tokens

# Generates:
# - tokens.json
# - tokens.css
# - tailwind.config.js

#

#

Vì bạn sao chép các thành phần vào dự án của mình nên chỉ những thành phần bạn sử dụng mới được nhóm lại:

Component        | Size (gzipped)
-----------------+---------------
Button           | ~1.2 KB
Dialog           | ~4.8 KB
Data Table       | ~12.3 KB
Form (full)      | ~8.5 KB
Sidebar          | ~15.2 KB

So sánh điều này với các thư viện truyền thống gói gọn mọi thứ:

Library          | Total Size (gzipped)
-----------------+-------------------
Material-UI      | ~180 KB
Ant Design       | ~150 KB
Chakra UI        | ~95 KB
shadcn/ui (used) | ~25 KB

#

Các thành phần shadcn/ui đạt được điểm truy cập gần như hoàn hảo:

#

#

shadcn/ui kết hợp hoàn hảo với trợ lý mã hóa AI:

# Using AI to generate shadcn/ui components
from ai_coding import generate_component

component = generate_component(
    description="A responsive pricing card with 3 tiers",
    framework="react",
    library="shadcn/ui",
    styling="tailwind"
)

#

# Generate a complete design system from a Figma file
npx shadcn@latest figma-import \
  --url "https://figma.com/file/..." \
  --output ./components/design-system

#

#

Cộng đồng đã mở rộng shadcn/ui với các thành phần bổ sung:

#

# Official templates
npx create-shadcn-app my-project

# Popular community templates
# - shadcn-todo: Todo app with full CRUD
# - shadcn-ecommerce: E-commerce storefront
# - shadcn-blog: Blog with MDX support
# - shadcn-dashboard: Admin dashboard with sidebar

#

#

src/
├── components/
│   ├── ui/           # shadcn/ui components (copy here)
│   ├── forms/        # Form components
│   ├── layout/       # Layout components
│   └── features/     # Feature-specific components
├── lib/
│   ├── utils.ts      # cn() utility
│   └── constants.ts  # Design tokens
└── hooks/            # Custom hooks

#

// Override default styles with your own
import { buttonVariants } from "@/components/ui/button"

const customButton = cn(
  buttonVariants({ variant: "outline" }),
  "border-primary/20 hover:bg-primary/5"
)

#

#

shadcn/ui thể hiện sự thay đổi cơ bản trong cách chúng ta nghĩ về các thư viện thành phần giao diện người dùng. Bằng cách trao cho các nhà phát triển toàn quyền sở hữu mã giao diện người dùng của họ, nó giúp loại bỏ sự đánh đổi giữa sự thuận tiện và khả năng kiểm soát đã gây khó khăn cho các thư viện thành phần trong nhiều thập kỷ.

Các ngôi sao 118K+ GitHub không chỉ phản ánh mức độ phổ biến mà còn phản ánh một phong trào thực sự hướng tới việc phát triển giao diện người dùng do nhà phát triển kiểm soát. Cho dù bạn đang xây dựng một nguyên mẫu nhanh hay một ứng dụng sản xuất, shadcn/ui đều cung cấp các khối xây dựng mà bạn cần với sự linh hoạt mà bạn xứng đáng có được.

#

Stay updated on the latest AI tools and open-source projects. Join our Telegram Group for daily AI tool recommendations, community discussions, and exclusive content.

#

#

1. shadcn/ui GitHub Repository — Official source code and documentation
2. Radix UI — Accessible primitive components
3. Tailwind CSS — Utility-first CSS framework
4. shadcn/ui Documentation — Official docs and examples

Tiết lộ: Bài viết này không chứa liên kết liên kết. Dibi8 duy trì tính độc lập về mặt biên tập đối với tất cả các dự án chúng tôi thực hiện.

#

#

Trả lời: Có, shadcn/ui hoàn toàn miễn phí và là nguồn mở theo giấy phép MIT. Bạn có thể sử dụng nó cho các dự án cá nhân và thương mại mà không mất bất kỳ khoản phí nào.

#

Trả lời: Không giống như Material-UI mà bạn cài đặt làm phần phụ thuộc, các thành phần shadcn/ui được sao chép vào dự án của bạn. Điều này cung cấp cho bạn toàn quyền sở hữu và kiểm soát tùy chỉnh, trong khi Material-UI khóa bạn vào hệ thống phân cấp thành phần của chúng.

#

Trả lời: Có, tất cả các thành phần đều hỗ trợ chế độ tối ngay lập tức thông qua các thuộc tính tùy chỉnh CSS. Chỉ cần chuyển đổi thuộc tính data-theme hoặc sử dụng lớp CSS để chuyển đổi chủ đề.

#

Đ: Chắc chắn rồi. shadcn/ui hoạt động liền mạch với Next.js, bao gồm Bộ định tuyến ứng dụng, Thành phần máy chủ và Thành phần máy khách. Các mẫu chính thức bao gồm các ví dụ Next.js.

#

Đáp: Vì bạn sở hữu mã thành phần nên các bản cập nhật được thực hiện thủ công. Chạy npx shadcn@latest add <comComponent> để cập nhật hoặc sao chép thủ công phiên bản mới nhất từ ​​kho GitHub.

#

#

Thiết lập hệ thống thiết kế hoàn chỉnh với shadcn/ui:

# Initialize with custom configuration
npx shadcn@latest init --style new --colors modern

# Add all essential components
npx shadcn@latest add button input textarea select checkbox radio-group switch
npx shadcn@latest add dialog dropdown-menu popover tooltip accordion
npx shadcn@latest add table badge card avatar progress skeleton
npx shadcn@latest add breadcrumb tabs pagination alert toast

#

// Memoize expensive components
import { memo } from 'react'
import { DataTable } from '@/components/data-table'

const MemoizedTable = memo(DataTable)

function Page() {
  return <MemoizedTable data={largeDataset} />
}

#

Dự án shadcn/ui tiếp tục phát triển nhanh chóng. Các tính năng sắp tới bao gồm hỗ trợ Svelte 5 gốc, hoạt ảnh gốc nâng cao được xây dựng trên Framer Motion và thị trường thành phần chính thức cho các tiện ích mở rộng do cộng đồng đóng góp. Nhóm cũng đang khám phá việc tạo thành phần được hỗ trợ bởi AI, trong đó các mô tả bằng ngôn ngữ tự nhiên tạo ra các thành phần được tùy chỉnh hoàn toàn, sẵn sàng sản xuất.

#

Dự án shadcn/ui tiếp tục phát triển nhanh chóng với các tính năng sắp tới bao gồm hỗ trợ Svelte 5 gốc, hoạt ảnh gốc nâng cao và thị trường thành phần chính thức. Nhóm đang khám phá việc tạo thành phần được AI hỗ trợ, trong đó các mô tả bằng ngôn ngữ tự nhiên tạo ra các thành phần sẵn sàng sản xuất được tùy chỉnh hoàn toàn.

#

Nhiều công ty Fortune 500 đã áp dụng shadcn/ui cho các công cụ nội bộ và ứng dụng hướng tới khách hàng của họ. Phương pháp sao chép-dán giúp loại bỏ chi phí quản lý phụ thuộc trong các tổ chức lớn, nơi nhiều nhóm cần các mẫu giao diện người dùng nhất quán mà không gặp rủi ro làm gián đoạn các thay đổi từ bản cập nhật thư viện. Các công ty báo cáo rằng tốc độ phát triển giao diện người dùng nhanh hơn 40% và giảm đáng kể gánh nặng bảo trì so với các thư viện thành phần truyền thống.

#

Dự án chấp nhận đóng góp thông qua các vấn đề GitHub và yêu cầu kéo. Những người đóng góp mới có thể bắt đầu bằng cách thêm bản dịch, cải thiện tài liệu hoặc gửi các cải tiến thành phần. Dự án duy trì hướng dẫn cộng tác viên và quy tắc ứng xử để đảm bảo một môi trường thân thiện cho tất cả những người tham gia.

#

Thư viện thành phần tiếp tục phát triển với sự đóng góp của cộng đồng và thường xuyên bổ sung các thành phần mới. Sự phát triển tích cực đảm bảo khả năng tương thích với các khung giao diện người dùng và tiêu chuẩn trợ năng mới nhất. Các bản cập nhật thường xuyên bao gồm tối ưu hóa hiệu suất, sửa lỗi và các tùy chọn kiểu dáng mới.