v1.0.0 正式发布

TusongUI
暖色调前端 UI 框架

基于琥珀色/橙色设计的前端框架,专为宠物、生活、温馨类应用打造。 组件丰富、响应式、零依赖,开箱即用。

快速开始 查看演示
MIT 许可证 · 由 TUSONG.CN 提供

为什么选择 TusongUI?

专为温馨场景设计的 UI 框架,让你的应用拥有独特的气质

暖色调设计

基于琥珀色/橙色的温馨配色,营造温暖、友好的视觉体验,非常适合宠物、生活类应用。

响应式布局

完美适配桌面端、平板和移动端,自动切换表格和卡片视图,提供最佳的移动体验。

组件丰富

包含按钮、卡片、表格、模态框、表单、Toast 提示等常用组件,开箱即用。

轻量高效

纯 CSS + JavaScript 实现,无任何第三方依赖。CSS 仅 20KB,JS 仅 10KB。

易于定制

基于 CSS 变量构建,可以轻松自定义主题颜色和样式,满足个性化需求。

易于使用

简洁的 API 设计,清晰的文档说明,让你快速上手,无需复杂配置。

丰富的 UI 组件

开箱即用的高质量组件,让开发更高效

按钮
卡片
徽章
表单
表格
开关
模态框
Toast
确认框
照片网格
数据卡片
布局

简单几步,快速上手

<!-- 1. 引入 CSS 和 JS 文件 -->
<link rel="stylesheet" href="tusong-ui.css">
<script src="tusong-ui.js"></script>
<!-- 2. 使用按钮组件 -->
<button class="ts-btn ts-btn-primary">
  主要按钮
</button>
// 3. 使用 JavaScript API -->
TusongUI.success('操作成功!');
await TusongUI.confirm('确认删除?', '此操作不可撤销', 'danger');
查看完整文档