跳到内容
1.6k

Next.js

在 Next.js 项目中搭建 Neobrutalism。

1. 创建项目

创建一个新的 Next.js 应用，或者跳过这一步，直接使用现有项目：

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. 运行初始化

在项目中初始化 shadcn。这会创建一个 components.json，并配置好您的路径和 Tailwind：

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

3. 添加 Neobrutalism 注册表

将 Neobrutalism 注册表添加到您的 components.json：

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

4. 添加字体与主题

参照字体与主题的步骤，获得 Neobrutalism 的标志性外观——Archivo Black 标题、Space Grotesk 正文，以及新野兽主义的色彩与阴影 token。

5. 添加组件

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

然后导入并使用它：

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

大功告成 🚀——以同样的方式添加任意组件的 Radix 或 Base UI 变体即可。