简介

什么是新粗野主义？#

新粗野主义是一种网页设计风格，于2010年代末兴起，旨在打破扁平化、极简主义设计千篇一律的局面。它汲取了粗野主义建筑的粗犷特质——真实的材质、外露的结构——并通过大胆的色彩和充满趣味的几何图形将其呈现于屏幕之上。

你可以通过以下五个特征来识别它：

• 粗边框——每个元素都带有边框，通常为实心黑色。
• 硬阴影——无模糊效果的平面偏移，使元素在页面上看起来仿佛是物理堆叠在一起的。
• 鲜艳的色彩——高对比度、高饱和度的纯色填充。不使用渐变，不采用玻璃形态风格。
• 方正的棱角与粗体字——这种几何设计毫不妥协地占据空间，而非对空间的占用感到歉疚。
• 触觉交互——点击按钮时，按钮会明显下陷，形成阴影。

没有任何元素悬浮、模糊或隐藏。Gumroad 在 2021 年的重新设计让这种风格成为主流；如今，对于那些希望呈现精心设计而非默认样式的产品而言，这已成为首选方案。

什么是Neobrutalism.com？#

Neobrutalism.com 这是一个为 React 提供样式支持的设计系统——它基于与 shadcn/ui 相同的注册表模型构建。您无需安装任何包：运行 shadcn CLI 命令会将每个组件的源代码复制到您的项目中，从那时起，这些代码就属于您了。

内容简介：

• 组件——全套组件，采用统一设计风格，确保边框、阴影和字体风格协调统一。
• 区块——现成组件：英雄图、价格表、授权页面、仪表盘。
• 模板——完整的网站和管理后台。
• 主题——一款带有可共享预设的主题构建器。
• Figma kit——面向设计师的同款系统。
• MCP 服务器 — 像 Claude Code 和 Cursor 这样的 AI 编辑器可以按名称添加组件。

两种基本元素，一种风格#

每个组件都有两种版本。请在安装时为每个组件选择一个版本——安装 URL 将决定您获得的是哪一个版本：

• Radix UI — 大多数 shadcn 项目已经运行的底层组件。
• Base UI ——来自 Radix + MUI 团队的最新基础图形。

外观相同、导出内容相同、API 相同。无障碍功能——焦点、键盘操作、屏幕阅读器——源自底层的基元。

试试看#

一条命令，无需配置：

pnpmnpmyarnbun
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
复制

然后前往“安装”页面获取字体和主题令牌，或者先浏览一下组件。