Bỏ qua đến nội dung
1.6k

Introduction

Neobrutalism là gì, và hệ thống thiết kế Neobrutalism.com đã áp dụng phong cách này vào React như thế nào — các thành phần mã nguồn mở, khối và mẫu dành cho shadcn CLI.

Neobrutalism là gì?

Neobrutalism là một phong cách thiết kế web xuất hiện vào cuối thập niên 2010 như một phản ứng trước sự đơn điệu của phong cách thiết kế phẳng và tối giản. Phong cách này lấy cảm hứng từ nét thô mộc của kiến trúc brutalist — vật liệu chân thực, kết cấu lộ rõ — và chuyển thể nó lên màn hình thông qua màu sắc táo bạo cùng các hình khối hình học đầy tính sáng tạo.

Bạn có thể nhận ra nó qua năm đặc điểm sau:

  • Đường viền dày — mỗi thành phần đều được viền, thường là màu đen đậm.
  • Bóng cứng — các hiệu ứng dịch chuyển phẳng không có hiệu ứng mờ, khiến các yếu tố trông như được xếp chồng lên nhau một cách thực tế trên trang.
  • Màu sắc rực rỡ — các vùng tô màu có độ tương phản cao và độ bão hòa cao. Không sử dụng hiệu ứng chuyển màu, không sử dụng hiệu ứng “glassmorphism”.
  • Các góc vuông và kiểu chữ đậm — một bố cục hình học chiếm trọn không gian thay vì e dè trước nó.
  • Tương tác xúc giác — các nút sẽ lõm xuống rõ ràng vào vùng bóng của chúng khi được nhấn.

Không có gì nổi bật, không có gì mờ nhạt, không có gì bị che khuất. Thiết kế lại năm 2021 của Gumroad đã đưa phong cách này trở thành xu hướng chủ đạo; ngày nay, đây là lựa chọn hàng đầu cho những sản phẩm muốn thể hiện sự tinh tế có chủ đích thay vì chỉ đơn thuần là thiết kế mặc định.

Neobrutalism.com là gì?

Neobrutalism.com là một hệ thống thiết kế mang phong cách đến React — được xây dựng dựa trên cùng mô hình đăng ký như shadcn/ui. Bạn không cần cài đặt gói nào cả: lệnh shadcn CLI sẽ sao chép mã nguồn của từng thành phần vào dự án của bạn, và từ thời điểm đó, đó chính là mã nguồn của bạn.

Nội dung bao gồm:

  • Các thành phần — bộ đầy đủ, được thiết kế theo một phong cách nhất quán để các đường viền, hiệu ứng bóng và kiểu chữ hài hòa với nhau.
  • Các khối — các phần có sẵn: phần giới thiệu nhân vật, bảng giá, màn hình đăng nhập, bảng điều khiển.
  • Mẫu — các trang web hoàn chỉnh và bảng điều khiển quản trị.
  • Chủ đề — công cụ tạo chủ đề với các mẫu cài đặt sẵn có thể chia sẻ.
  • Figma kit — cùng một hệ thống dành cho các nhà thiết kế.
  • MCP máy chủ — Các trình chỉnh sửa AI như Claude Code và Cursor có thể thêm các thành phần theo tên.

Hai yếu tố cơ bản, một phong cách

Mỗi thành phần đều có hai phiên bản. Hãy chọn phiên bản cho từng thành phần tại thời điểm cài đặt — URL cài đặt sẽ quyết định bạn sẽ nhận được phiên bản nào:

  • Radix UI — các kiểu dữ liệu cơ bản mà hầu hết các dự án shadcn hiện đang sử dụng.
  • Base UI — các hàm cơ bản mới nhất từ nhóm Radix + MUI.

Giao diện giống nhau, các hàm xuất giống nhau, API giống nhau. Khả năng truy cập — chế độ tập trung, điều khiển bằng bàn phím, trình đọc màn hình — xuất phát từ các thành phần cơ bản bên dưới.

Hãy thử xem

Chỉ một lệnh, không cần cấu hình:

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json

Sau đó, hãy chuyển đến phần Cài đặt để tải các phông chữ và mã chủ đề, hoặc bạn có thể duyệt qua các thành phần trước.