做产品级设计系统：Reshaped 给 React 与 React Native 一套统一组件与令牌
很多组件库只管 Web，到了 React Native 又要另找一套，视觉很难统一。Reshaped 想解决的就是这个：它是一套面向产品的设计系统，Web 端用 React、移动端用 React Native，共享同一套设计令牌，做到两端体验与观感一致。
它解决什么问题
Web 与 React Native 用不同组件库，视觉与交互对不齐。
缺一套贯穿产品的设计令牌，各页面各写各的。
想要成熟设计系统又不想从零搭主题与规范。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 跨端一致 | Web 与 React Native 共享设计令牌与组件逻辑 |
| 设计系统 | 自带主题、间距、颜色等规范，省去自建 |
| React 生态 | Web 端基于 React，移动端基于 React Native |
| 主题灵活 | 支持多主题与暗色模式，统一切换 |
| 无障碍关注 | 组件按规范处理键盘与 aria 表现 |
| 开源可查 | 源码公开，定制与排查都更方便 |
它卖的是「系统」而不只是「组件」
Reshaped 的重点不只是几个按钮下拉，而是把设计令牌（颜色、间距、圆角、字体层级）做成贯穿两端的单一来源。Web 与 React Native 两端读取同一套令牌，组件外观由令牌驱动，所以你改一处主题，两端一起变——这对要维护多端一致体验的产品很关键。
它是通过 npm 安装的库，不是复制源码；Web 端面向 React，移动端面向 React Native，并不跨到 Vue 或 Svelte。选用前确认团队确实在 React 生态内。它的样式由自身设计系统驱动，想深度改动要走令牌体系，而不是简单覆盖别人的类名。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| MUI | 开源免费 | React 组件库标杆，生态极大，但移动端要另配。 |
| Tamagui | 开源免费 | 同样主打 Web 与 RN 一致，样式方案不同。 |
| Ark UI | 开源免费 | 多框架 headless，跨端一致性需自己搭。 |
谁适合用
- 同时维护 Web 与 React Native 的产品团队
- 想要现成设计系统、少自建规范的前端
- 对主题一致性与无障碍有要求的项目
怎么开始
- 用包管理器安装 reshaped 及对应平台依赖。
- 在应用根部引入主题提供者（Theme Provider）。
- 从设计令牌入手配置品牌色与间距规范。
- 在 Web 与 RN 两端复用同一套组件与令牌。
- 按文档启用暗色模式并走查两端表现。
常见问题
依赖 Tailwind 吗？
不依赖 Tailwind，它用自己的设计令牌体系驱动样式。
是装库还是复制源码？
是装库，通过 npm 引入，跟随依赖升级。
支持 Vue 或 Svelte 吗？
不支持，它聚焦 React 与 React Native 两端。
能商用吗？
能。以开源协议发布，可自由用于商业项目。
授权与合规
Reshaped 以开源协议发布，源码公开，可自由用于商业与个人项目。 官网：reshaped.so。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
资源信息
界面语言
英文
授权方式
开源免费
适用平台
Web
获取方式
直链下载
资源更新
2026-09-20
页面更新
2026-09-20
↓ 获取资源
点击按钮直接前往资源页面。
