▶_MiniApp Toolkit

Sard UniApp

UI 库活跃维护

基于 Uniapp + Vue3 的跨端 UI 组件库，提供 60+ 高质量组件，支持微信/支付宝/百度/抖音等多端小程序及 H5。TypeScript 原生编写，支持暗黑模式、国际化、主题定制。npm 包 sard-uniapp 持续高频迭代。

★ 299🕒 最近更新 2026-05
官网文档
小程序UI框架UIVue3uni-appTypeScriptsard-uniapp跨端组件库

特性

  • 60+ 高质量组件
  • Vue 3 + TypeScript 原生
  • 暗黑模式
  • 国际化（多语言）
  • 主题定制（CSS 变量）
  • 按需引入
  • 组合式函数 API（useToast / useDialog 等）
  • uni-app 多端编译
  • Sard CLI 独立构建工具

详细文档

Sard UniApp — uni-app Vue3 跨端 UI 组件库#

Sard UniApp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库，由 sutras 维护。提供 60+ 高质量组件，覆盖表单输入、数据展示、反馈交互、导航布局等常见场景。TypeScript 原生编写，支持暗黑模式、国际化、CSS 变量主题定制。npm 包 sard-uniapp 拥有 133 个版本（截至 2026-05-23），保持高频迭代。

设计规范#

  • 组件数量：60+ 组件
  • 技术栈：Vue 3 + TypeScript + SCSS + CSS 变量
  • 设计语言：简洁现代，视觉一致性，支持暗黑模式
  • 主题系统：基于 CSS 变量的主题定制，支持动态切换
  • 国际化：内置 i18n 支持，可扩展多语言
  • 兼容平台：微信小程序 / 支付宝小程序 / 百度小程序 / 抖音小程序 / H5
  • npm 包：sard-uniapp，133 versions，v1.30.3（2026-05-23）

审核规范#

Sard UniApp 是纯前端 UI 组件库，不涉及特殊审核要求。但需注意：

  • 组件中使用了 Canvas（如二维码/签名组件），需在小程序后台勾选 Canvas 权限
  • 部分组件使用了 Position: Fixed，需适配安全区域（safe-area-inset）

开发指南#

安装#

code
# npm
npm install sard-uniapp

# pnpm（推荐）
pnpm add sard-uniapp

# yarn
yarn add sard-uniapp

基础使用#

code
<template>
  <sar-button type="primary" @click="handleClick">
    点击按钮
  </sar-button>
</template>

<script lang="ts" setup>
import { showToast } from 'sard-uniapp'

const handleClick = () => {
  showToast({ title: 'Hello Sard!' })
}
</script>

自动导入配置（可选）#

code
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { SardResolver } from 'sard-uniapp/resolver'

export default {
  plugins: [
    AutoImport({ resolvers: [SardResolver()] }),
    Components({ resolvers: [SardResolver()] }),
  ],
}

主题定制#

code
// 覆盖 CSS 变量
:root {
  --sar-primary: #4D6EFE;
  --sar-success: #34D399;
  --sar-warning: #FBBF24;
  --sar-danger: #F87171;
}

// 暗黑模式
:root[data-theme='dark'] {
  --sar-bg: #1A1A1A;
  --sar-text: #FFFFFF;
}

组件分类#

分类组件
基础Button / Icon / Image / Avatar / Badge
表单Input / Textarea / Picker / DatePicker / Switch / Radio / Checkbox / Stepper / Rate / Search
反馈Toast / Dialog / Loading / ActionSheet / PullRefresh / SwipeCell
展示Cell / Tag / Card / Empty / Skeleton / Collapse / Table
导航Tabs / Tabbar / Navbar / Sidebar / Dropdown
布局Grid / Divider / Sticky / SafeArea

常见陷阱#

  1. uni-app 版本：需要 uni-app Vue3 + Vite 项目，不支持 Vue2
  2. 组件前缀：Sard 组件统一使用 sar- 前缀（如 sar-button），与同时使用的其他 UI 库不会冲突
  3. 按需引入：不配置 unplugin 时需手动 import，配置后自动注册
  4. Canvas 组件：小程序 Canvas 2D 需基础库 >= 2.9.0

生态资源#

版本更新#

  • v1.30.3（2026-05-23）— 最新稳定版
  • npm 迭代：133 个版本，自 2023-06 持续至今
  • GitHub 活跃度：299⭐ / 45 forks，最后 push 2026-05-23
  • Sard CLI：独立工具，支持基于 Vite 快速搭建 uni-app 组件库

支持平台

微信小游戏T1微信小程序T0支付宝小程序T1百度智能小程序T2抖音小游戏T2抖音小程序T1