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

Installation

Cài đặt các thành phần React theo phong cách neo-brutalism chỉ với một lệnh shadcn CLI — không cần gói, không cần cấu hình. Kèm phông chữ và token Tailwind v4 tạo nên phong cách đặc trưng.

Neobrutalism.com là kho lưu trữ dành cho dự án “shadcn” (CLI). Bạn không cần cài đặt bất kỳ gói phần mềm nào cũng như không cần sử dụng bất kỳ nhà cung cấp nào để bao bọc ứng dụng của mình — công cụ CLI sẽ sao chép mã nguồn của từng thành phần từ neobrutalism.com vào dự án của bạn, và từ thời điểm đó, đó chính là mã nguồn của bạn.

Quá trình cài đặt gồm ba bước, mất khoảng năm phút:

  1. Cài đặt một thành phần — chỉ cần một lệnh, không cần cấu hình.
  2. Thêm các phông chữ — Archivo Black cho tiêu đề, Space Grotesk cho nội dung chính.
  3. Thêm các yếu tố đặc trưng của chủ đề — đường viền, bóng đổ và bảng màu tạo nên phong cách tân thô mộc.

Cài đặt một thành phần

Mỗi thành phần đều được cung cấp dưới hai phiên bản: Base UI và Radix UI. URL cài đặt sẽ quyết định bạn sẽ nhận được phiên bản nào:

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
pnpm dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
npx shadcn@latest add https://neobrutalism.com/r/radix/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/radix/button.json

Đó là toàn bộ quy trình cài đặt. Bạn có thể thay thế button bằng bất kỳ thành phần nào — mẫu lệnh luôn là https://neobrutalism.com/r/<base|radix>/<component>.json, và mỗi trang thành phần đều hiển thị lệnh chính xác cho cả hai biến thể.

Thêm phông chữ

Tiêu đề được định dạng bằng phông chữ Archivo Black, còn nội dung chính bằng phông chữ Space Grotesk. Với Next.js, hãy tải chúng từ next/font/google:

app/layout.tsx
import { Archivo_Black, Space_Grotesk } from "next/font/google"
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
})
 
const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  )
}

Thêm chủ đề

Hãy chèn các mã này vào tệp globals.css của bạn. Các hiệu ứng bóng có độ lệch cố định (hard offset shadows) và hiệu ứng chuyển tiếp mờ dần khi cuộn (--radius: 0) đã đảm nhận phần lớn công việc — phần còn lại là bảng màu, và tất cả đều là các thiết lập giao diện Tailwind v4 cơ bản mà bạn có thể thay đổi sau này:

globals.css
@import "tailwindcss";
 
@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
 
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --radius: 0;
  --background: #fff7e8;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #efe7d6;
  --muted-foreground: #6b6355;
  --accent: #ffe7a3;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
  --input: #fff;
  --ring: #000;
}
 
.dark {
  --background: #1a1815;
  --foreground: #f5f0e6;
  --card: #262320;
  --card-foreground: #f5f0e6;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #3a352f;
  --secondary-foreground: #f5f0e6;
  --muted: #2e2a24;
  --muted-foreground: #b3ac9e;
  --accent: #38342b;
  --accent-foreground: #f5f0e6;
  --destructive: #ff6b6b;
  --destructive-foreground: #1a1815;
  --border: #000;
  --input: #262320;
  --ring: #ffdc58;
}

Bạn đang bắt đầu một dự án mới?

Các hướng dẫn về khung công tác sẽ hướng dẫn bạn từng bước từ lệnh đầu tiên:

  • Next.js — create-next-app, khởi tạo, phông chữ, chủ đề, thành phần đầu tiên.
  • Vite — Tailwind, tên gọi tắt cho đường dẫn, khởi tạo, thành phần đầu tiên.

Xem trước trước khi cài đặt

Kiểm tra mã nguồn của bất kỳ thành phần nào từ terminal:

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

Không gian tên đăng ký (tùy chọn)

Bạn chỉ cần các URL đầy đủ là đủ. Tuy nhiên, nếu bạn đang thiết lập máy chủ MCP — vốn giải quyết các thành phần thông qua các kho lưu trữ có tên — hoặc bạn muốn sử dụng các lệnh search và list của CLI, hãy tạo bí danh cho kho lưu trữ đó trong tệp components.json của bạn:

components.json
{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

Khi đã thiết lập biệt danh, lệnh CLI có thể quét toàn bộ sổ đăng ký:

pnpm dlx shadcn@latest search @neobrutalism
npx shadcn@latest search @neobrutalism
yarn dlx shadcn@latest search @neobrutalism
bunx --bun shadcn@latest search @neobrutalism
pnpm dlx shadcn@latest list @neobrutalism
npx shadcn@latest list @neobrutalism
yarn dlx shadcn@latest list @neobrutalism
bunx --bun shadcn@latest list @neobrutalism

Monorepo

Hãy định hướng máy chủ CLI đến không gian làm việc phù hợp thông qua các liên kết -c / --cwd:

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

Cần trợ giúp?

Bạn đang gặp khó khăn với điều gì đó? Kênh Discord đang rất sôi nổi — hãy ghé qua và chào hỏi nhé.