想要现成好看又不锁死样式：Park UI 基于 Ark UI 与 Panda CSS，组件复制进项目
纯 headless 库虽自由，但每次都得从零拼样式，节奏慢。Park UI 折中了一下：它建在 Ark UI 的行为层之上、用 Panda CSS 写样式，给你一套可以直接复制进项目的成品组件。你拿到的就是源码，改起来没有「覆盖别人样式」的阻力。
它解决什么问题
headless 库太自由，每个项目都要从空白样式做起，起步慢。
现成组件库好看但改不动，品牌色与圆角一调就崩。
想用原子化 CSS 又不想自己搭一整套设计令牌。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 可复制组件 | 组件代码直接拷进项目，改哪里一目了然 |
| 基于 Ark UI | 复用成熟的无障碍与交互逻辑，底座稳 |
| Panda CSS 驱动 | 样式用原子化 CSS 方案，按需生成不冗余 |
| 设计令牌 | 内置颜色、间距等令牌，统一全站视觉语言 |
| React 优先 | 主推 React 版本，也有 Solid 适配在跟进 |
| 源码在手 | 不是黑盒库，升级与定制都由你掌控 |
它处在「库」和「复制源码」之间的中间地带
Park UI 不像传统组件库那样让你 import 一个黑盒再覆盖样式，它的做法是把组件源码摊开给你：你在文档里挑好对话框、下拉等组件，把那段带 Panda CSS 样式的代码复制到自己项目里。这意味着样式不是「别人的默认皮肤的覆盖层」，而是你项目里真正的源码，改起来毫无心理负担。
代价是升级得手动同步——官方出新版本时，你要自己把改动合并进已有的复制代码。它强依赖 Panda CSS 来产出样式，所以选用前最好已经接受原子化 CSS 的思路；另外目前主推 React，其他框架的组件覆盖度不如 React 完整。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| shadcn/ui | 开源免费 | 同样复制源码进项目，但基于 Radix 与 Tailwind，React 为主。 |
| Ark UI | 开源免费 | Park UI 的底层，更纯粹 headless，样式完全自定。 |
| Chakra UI | 开源免费 | 开箱即用的组件库，省事但定制要覆盖默认样式。 |
谁适合用
- 想要现成组件又坚持源码可控的 React 团队
- 已采用 Panda CSS、想配套一套组件的前端
- 做内部后台、需要统一但可改的设计系统的开发者
怎么开始
- 先装好 Panda CSS 并完成基础配置。
- 在 Park UI 文档里挑需要的组件，复制对应代码。
- 把组件粘进项目，按品牌改设计令牌与样式。
- 用 Ark UI 的状态回调接好交互逻辑。
- 对照文档核对无障碍与键盘操作表现。
常见问题
是装库还是复制源码？
主要是复制源码：组件代码直接拷进项目，由你维护与升级。
必须依赖 Panda CSS 吗？
是的，它的样式基于 Panda CSS，选用前建议已接受原子化 CSS。
只支持 React 吗？
目前主推 React，Solid 等框架的适配在跟进，覆盖度不如 React。
能商用吗？
能。组件以开源协议发布，可自由用于商业项目。
授权与合规
Park UI 以开源协议发布，组件代码可自由复制使用，Panda CSS 相关依赖均为开源。 官网：park-ui.com。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
↓ 获取资源
点击按钮直接前往资源页面。
