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

Next.js

Thiết lập Neobrutalism trong một dự án Next.js.

1. Tạo dự án của bạn

Tạo một ứng dụng Next.js mới, hoặc bỏ qua bước này để dùng một ứng dụng có sẵn:

pnpm create next-app@latest my-app --typescript --tailwind --app
npx create-next-app@latest my-app --typescript --tailwind --app
yarn create next-app@latest my-app --typescript --tailwind --app
bunx --bun create-next-app@latest my-app --typescript --tailwind --app

2. Chạy lệnh init

Khởi tạo shadcn trong dự án của bạn. Việc này tạo ra một components.json và thiết lập các đường dẫn cùng Tailwind cho bạn:

pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

3. Thêm registry của Neobrutalism

Thêm các registry của Neobrutalism vào 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"
  }
}

4. Thêm font & theme

Làm theo các bước trong Font & Theme để có được diện mạo đặc trưng của Neobrutalism — tiêu đề Archivo Black, phần thân văn bản Space Grotesk, cùng các token màu và bóng đổ theo phong cách neo-brutalist.

5. Thêm một component

pnpm dlx shadcn@latest add @neobrutalism/button
npx shadcn@latest add @neobrutalism/button
yarn dlx shadcn@latest add @neobrutalism/button
bunx --bun shadcn@latest add @neobrutalism/button

Sau đó import và dùng nó:

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

Vậy là xong 🚀 — thêm biến thể Radix hoặc Base UI của bất kỳ component nào theo cùng cách.