🎨
精美设计
基于新拟态（多种视觉质感）设计语言，硅胶质感视觉效果，柔和阴影创造立体感
Ting UI新拟态风格组件库
一套完整的硅胶质感CSS组件库，包含60+精美组件，支持深色模式、响应式设计
Skip to content
组件预览
特性亮点
🎨 硅胶质感设计
采用新拟态设计语言，通过柔和的阴影创造立体感，给用户带来舒适的视觉体验。
🌓 智能深色模式
内置完善的深色模式支持，自动检测系统主题偏好，一键切换明暗主题。
📱 全端响应式
从移动端到桌面端，自适应各种屏幕尺寸，确保在任何设备上都有良好的体验。
⚡ 极致性能
GPU加速动画、will-change优化、减少重绘重排，打造流畅的用户交互体验。
快速开始
安装
bash
npm install ting-uibash
yarn add ting-uibash
pnpm add ting-ui使用
html
<!DOCTYPE html>
<html>
<head>
<!-- 引入 CSS -->
<link rel="stylesheet" href="node_modules/ting-ui/src/tingui.css">
</head>
<body>
<!-- 使用组件 -->
<button class="t-button">默认按钮</button>
<button class="t-button t-button--primary">主要按钮</button>
<!-- 引入 JS -->
<script src="node_modules/ting-ui/src/js/tingui.js"></script>
</body>
</html>CDN 引入
html
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/ting-ui/src/tingui.css">
<!-- JS -->
<script src="https://unpkg.com/ting-ui/src/js/tingui.js"></script>浏览器支持
| Chrome | Firefox | Safari | Edge | IE |
|---|---|---|---|---|
| ✅ 80+ | ✅ 75+ | ✅ 13+ | ✅ 80+ | ❌ 不支持 |
贡献
欢迎提交 Issue 和 Pull Request！