介绍
通过柔和的表面和清晰的交互状态，构建一致的 React 界面。
Neumorphism UI 是一组通过光影表达深度的 React 组件。使用 shadcn CLI 将所需源码安装到项目中，然后直接查看和修改。
从这里开始
- 按照安装指南添加共享样式和一个 Button。
- 确认第一个按钮在应用中正确显示。
- 浏览组件目录，只添加需要的组件。
开始使用组件之前，无需先掌握所有设计令牌或 Registry 内部结构。
试用完整界面
打开本地 CMS，选择草稿，修改标题和正文，再尝试预览与保存。查看选择、输入和反馈如何在同一界面协作。
演示更改仅保存在内存中，刷新后重置。在应用中，将 initialPosts 和 onSave 连接到数据，并处理认证、持久化和发布权限。
界面构建原则
让深度承担明确作用
凸起的表面表示操作；内凹的表面表示输入或按下状态。将相关内容放在同一表面上，避免为每层容器添加阴影。
持续显示选中状态
选中的标签页或筛选项在指针离开后仍应清晰可辨。用颜色和形状表达选择，并保留独立的键盘焦点指示。
统一光源与形状
同一界面应共享光源方向和表面圆角。使用 Theme Studio 一起调整颜色、深度、光源和形状，保持组件一致。
保持输入与反馈清晰
保持字段标签可见，在对应输入附近解释错误。说明保存状态；减少动画时，也应保留选择、焦点和错误反馈。
包含的内容
- 根据需要使用 Base UI 键盘与焦点行为的 React 19 组件
- 管理明暗颜色、深度、光源方向和形状的 Tailwind CSS v4 令牌
- 直接安装到应用中、可编辑的组件源码
- 展示实用组合的图表和界面模板
安装与定制
shadcn CLI 将所选源码与必要依赖添加到项目。安装后的文件属于应用代码，不会自动更新。之后应用更新前，请比较已有定制。
完成安装后，使用设计令牌调整界面。需要时再查看 Registry 结构和验证范围。