这套硅胶拟态UI库，让我第一次想伸手戳屏幕

核心优势

看腻了满大街的扁平风？毛玻璃效果又太冷冰冰？最近发现一个叫Tbe UI的组件库，第一眼就被它的硅胶拟态设计吸引了——那种软软的质感，真的让人忍不住想伸手去戳一下。

这种质感很像AirPods Pro充电盒的手感，又有点像小时候玩的橡皮糖。盯着那些按钮看，手指会不自觉地想要按下去。

特性****优势

硅胶拟态设计柔软质感，提升用户体验

优化的立体感阴影克制，对比度合理

60+组件功能完整，无需额外开发

深色模式细节打磨，微弱发光效果

性能优化GPU加速，流畅不卡顿

🌐 多平台支持 - 支持 Web、微信小程序、APP 三个平台
🎨 精美设计 - 硅胶质感视觉效果，柔和阴影创造立体感
🌓 深色模式 - 内置完善的深色模式支持
📱 响应式布局 - 全面支持移动端、平板、桌面端
⚡ 性能优化 - GPU加速动画，流畅的用户体验
♿ 无障碍支持 - 完整的ARIA属性支持
🎯 易于使用 - 现代化API设计，TypeScript类型支持
🔧 工程化 - Vite构建，ESLint代码规范，Vitest单元测试

功能特点

告别传统拟态的痛点

前两年新拟态设计火过一阵，但很快就被吐槽“对比度太低、看着累”。Tbe UI改良了这个问题，保留了立体感，但阴影更克制。每个组件边缘都有一圈极细的高光，像真实硅胶在灯光下的反光，看着就有弹性。

圆角设计也很讲究：小按钮用小圆角，大卡片用大圆角，整体很协调。

60+组件，功能完整

Tbe UI包含按钮、输入框、卡片、对话框、导航栏等60多个组件。难得的是，它没有为了美观牺牲功能——按钮有加载、禁用状态，表单有校验反馈，弹窗支持ESC关闭。这些都是开发中常用的功能。

深色模式的细节

很多组件库的深色模式只是把背景涂黑、文字涂白。Tbe UI不一样，深色模式下阴影变成微弱的发光效果，像暗光中硅胶制品边缘透出的光。这个细节能看出设计师对质感的用心。

性能优化

Tbe UI用了GPU加速、will-change等技术，滚动和点击都很流畅。这些技术用户可能不会注意，但用起来就是觉得舒服。

使用指南

Tbe UI用起来很简单，不用复杂的构建工具，有两种安装方式：

方式一：npm/yarn安装（推荐）

用包管理器安装：

npm install tbe-ui

或者用yarn：

yarn add tbe-ui

安装后在HTML中引入CSS和JS：

方式二：CDN引入

不想安装的话，直接用CDN：

使用示例

引入后就可以用了，比如创建按钮：

<button class="t-button">默认按钮</button> <button class="t-button t-button--primary">主要按钮</button>

适合谁用？

个人项目开发者——想让作品与众不同，硅胶质感能吸引用户
创意网站设计师——追求独特视觉效果
品牌官网建设者——亲切的界面能拉近和用户的距离
B端后台开发——可在内部工具中小范围试用
独立开发者——不想从零写组件库，又希望产品有特色

最后说几句

Tbe UI的在线文档以及 Github ，上面有所有组件的预览。建议你打开电脑亲自点一点那些按钮——那种软软弹弹的感觉，看截图是感受不到的。

这款组件库挺值得收藏的。如果你在找一款设计独特又功能完整的UI库，可以试试Tbe UI。