RetroUI 2.0 登场——更大、更大胆、更好用
历经数月打磨，RetroUI 2.0 来了。Base UI 支持、统一的新网站、焕新的文档、100 多个新 block，还有一套全新的 template。这是我们迄今最大的一次更新。
Dov Azencot
@DovAzencot数月来，我们一直在暗处埋头开发。今天，我们把灯打开了。
RetroUI 2.0 来了，这是我们发布过的最大一次更新。它不只是版本号的跳动——而是 RetroUI 的能力，以及你与它交互方式的一次彻底进化。
当初推出 RetroUI 时，目标很简单：给开发者一个不和别人撞脸的 UI 库。大胆的设计、新粗野主义的美学，还有能让你的项目脱颖而出的组件。这个愿景没有变。但我们兑现它的方式呢？已经大不相同了。
一起来看看有哪些新东西。
🎨 Base UI 支持 - 你们期待已久的那块基石
从第一天起，呼声最高的功能之一就是 Base UI 支持，如今它终于来了。
Base UI 是什么？
Base UI 是由 MUI 团队打造的一套无样式、可无障碍访问的 React 组件库。你可以把它看作 Material UI 的无头、与框架无关的替代品——你能拿到全部的行为逻辑和无障碍逻辑，却不带任何样式上的主张。
这对 RetroUI 为什么重要
在此之前，RetroUI 的组件是构建在 Radix UI 的基础组件之上的（Radix 很优秀，这点别误会）。但 Base UI 打开了新的可能性：
- 框架的灵活性： Base UI 能在 React、Next.js 以及其他现代框架里无缝运行
- 更好的 tree-shaking： 优化更到位，打包体积更小
- 更强的无障碍性： Base UI 的无障碍基础组件久经实战，开箱即符合 WCAG
- 面向未来的架构： 为 React Server Components 和现代 React 生态而生
这对你意味着什么？RetroUI 的组件如今性能更好、更无障碍、也比以往更灵活。而且始终保留着你喜爱的那套大胆、有辨识度的设计语言。
// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
<Button variant="primary">
Still bold. Still RetroUI. Now even better.
</Button>🌐 一个网站，一个愿景 - OS 与 Pro 合二为一
有件事一直让我们别扭：给 RetroUI OS（免费版）和 RetroUI Pro 分别做两个网站，感觉……很割裂。就像我们不是在把社区聚到一起，而是在把它拆开。
现在不会了。
彻底重做的网站
我们把整个 RetroUI 网站从头重建，把 OS 和 Pro 统一成一套连贯的体验。新变化如下：
统一的组件库
在一个地方浏览所有组件——免费的和 Pro 的都在。再也不用在多个站点之间来回跳，才知道有哪些可用。一切都清清楚楚地标好了，哪些免费、哪些付费，一目了然。
更清爽的导航
找到你要的东西，更快、更直观。组件、block、template、文档——一切都有它合乎逻辑的归处。
更精致的设计
我们说到做到。新站点更大胆、更快、也更精致。它展示了当你全情投入这套美学时，RetroUI 能做到什么。
更好的移动端体验
旧站点在移动端能用。新站点在移动端出彩。这是把响应式设计做对了，触摸交互如原生一般。
最棒的一点？这一切都由 RetroUI 的组件驱动。我们在吃自己的狗粮，也就是说，你在站点上看到的每一个组件，都能用在你自己的项目里。
📚 真正帮得上忙的文档
说句实话：文档常常是被事后补上的东西。但这次不一样。
我们把 RetroUI 的文档彻底翻修了一遍，加进了一些让你更省心的功能：
以 Markdown 复制
在给自己的项目写文档？还是在写一篇关于 RetroUI 的博客？现在，你只需一键就能把组件代码以 Markdown 复制下来。
非常适合：
- 编写你自己的组件文档
- 撰写教程和指南
- 在基于 Markdown 的工具里分享代码示例（Notion、GitHub 等）
AI 驱动的文档
我们把 AI 助手直接集成进了文档。想知道怎么定制某个组件？需要理解某个 API？比起翻遍一页页文档，AI 能更快地帮你找到答案。
你可以这样问：
- 「怎么让 Button 组件使用自定义颜色？」
- 「Card 组件能接收哪些 props？」
- 「给我看看把 Modal 和表单一起用的例子」
这就像有一位 RetroUI 专家 7×24 小时随时待命。
改进后的代码示例
现在每个组件都有：
- 可以交互的实时预览
- 展示不同用例的多种变体
- 带正确 import、可直接复制粘贴的代码
- 提升类型安全的 TypeScript 示例
- 说明每个组件如何处理无障碍（a11y）的无障碍注记
不用再靠猜。不用再翻源码。只有清晰、实用的示例，帮你更快地动手开发。
🧱 100 多个新 UI block - 以前所未有的速度开发
组件很棒。但有时候你需要的是完整的板块，而不只是按钮和卡片。
这时候 block 就派上用场了。
block 是什么？
block 是可以直接放进项目里的预制板块：hero 区、价格表、功能网格、用户评价、CTA 等等。它们完全响应式、可无障碍访问，随时可以定制。
2.0 里有什么新东西？
我们在你能想到的每一个类别里，都加了 100 多个新 block：
Hero 区
- 从极简到全出血，15 种以上新的 hero 变体
- 包含动态背景、分屏布局，以及视频 hero
功能与卖点
- 基于图标的功能网格
- 截图展示
- 分步指南
- 对比表格
价格表
- 从简单的两列布局，到复杂的四档定价
- 计费切换（月付／年付）
- 功能对比矩阵
用户评价
- 网格布局、轮播，以及瀑布流设计
- 视频评价
- 用作社会证明的 logo 墙
CTA 与转化
- 邮件订阅
- 候补名单表单
- 应用下载区
- 有个性的联系表单
页头与导航
- 巨型菜单
- 移动优先的导航模式
- 带滚动效果的吸顶页头
页脚
- 多列页脚
- 极简的单行页脚
- 集成邮件订阅的页脚
每个 block 都以同一套大胆的 RetroUI 美学打造——粗边框、硬投影、鲜亮的色彩，还有非对称的布局。它们的设计初衷是脱颖而出，而不是融入背景。
// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
<HeroBold
title="Your Product Name"
subtitle="Ship faster with bold design"
cta="Get Started"
/>🌙 新 template：暗色模式的开发者工具仪表盘
template 是一切汇聚的地方——组件、block，以及设计哲学，统一成一个完整的应用。
为你介绍我们最新的 template：暗色模式开发者工具仪表盘。
这是什么？
这是一个功能齐全、以暗色模式为先的仪表盘，专为开发者工具、SaaS 平台和管理后台而生。用 RetroUI 大胆的美学构建一个可上线的应用，你需要的一切都在这里。
里面包含什么？
完整的仪表盘布局
- 带可折叠菜单的侧边栏导航
- 带搜索和用户资料的顶部页头
- 在手机、平板和桌面都能用的响应式设计
预制页面
- 带指标和图表的仪表盘概览
- 用户管理（列表、详情、编辑）
- 带表单示例的设置页
- API 文档页
- 计费与订阅管理
做对了的暗色模式
- 不只是把颜色反转——而是专为暗色背景精心设计
- 为可读性而生的高对比
- 在暗色背景上格外跳眼的鲜亮点缀色
可上线的功能
- 认证页面（登录、注册、忘记密码）
- 错误状态与空状态
- 加载骨架屏
- Toast 通知
- 模态对话框与确认弹窗
对开发者友好
- 用 TypeScript 构建
- 有文档说明的组件结构
- 易于定制和扩展
- 遵循 Next.js App Router 的约定
这不是一个玩具 template。它是一块你可以在上面构建真实产品的基石。无论你是在推出新的 SaaS、搭建内部工具，还是打造开发者平台，这个 template 都能让你抢先一步。
而且没错，它和外面那些千篇一律的仪表盘 template 长得完全不一样。这正是重点所在。
这为什么重要
RetroUI 2.0 不只是关于增加功能。它的目标，是让 RetroUI 对真实项目而言更强大、更灵活、也更有用。
Base UI 支持意味着更好的性能和无障碍性。
统一的网站意味着更容易发现内容，也意味着对每个人都更好的体验。
改进的文档意味着更少的时间用来找，更多的时间用来做。
100 多个新 block 意味着你能在几分钟、而不是几天内交付完整的页面。
暗色模式 template 意味着你的下一个项目已经有了一块扎实的基石。
把这些更新加在一起，RetroUI 2.0 就成了那些拒绝做无聊界面的开发者手里，最完整、最能直接上线的 UI 库。
接下来是什么？
这是一次大版本发布，但我们不会就此止步。路线图上还有这些：
- 更多 template（亮色模式变体、落地页、电商）
- 让设计到开发的流程更快的 Figma to Code 集成
- 随着库的扩充而来的更多 Base UI 组件
- 展示用 RetroUI 构建的项目的社区展示区
- 讲解常见模式和用例的视频教程
我们也在倾听。如果有你需要的组件、想要的功能，或者正遇到的问题，尽管告诉我们。RetroUI 是由开发者、为开发者打造的。你的反馈，塑造着我们接下来要做的东西。
今天就试试 RetroUI 2.0
准备好上手了吗？下面是入门方式：
新用户
# Install RetroUI
npx retroui-cli init
# Or install via npm
npm install @retroui/react浏览组件，探索这些 block，把新 template 拿走。一切都已经准备好，可以在你的 Next.js、React 或 Vite 项目里直接使用。
老用户
如果你已经在用 RetroUI，升级到 2.0 很简单：
去 changelog 看看有没有破坏性变更（只有极少数几处，而且我们为每一处都写了应对办法）。
谢谢你
RetroUI 之所以存在，是因为像你这样的开发者，已经厌倦了千篇一律的设计。你想做出脱颖而出、有个性、让人感觉与众不同的东西。
我们就是来把这件事变简单的。
2.0 版本，是数月的开发、数百次提交、无数次设计迭代，以及一个了不起的社区所给出的反馈，共同结出的果实。谢谢你成为这段旅程的一部分。
现在，去做点大胆的东西吧。🚀
探索 RetroUI 2.0：
有问题？有反馈？发现了 bug？在 GitHub 上提个 issue，或者在 Twitter/X 上找我们。