Opensource UI的29个iOS风格Widget清单：从番茄钟到心率监测，10分钟搭建你的小部件墙

Opensource UI 是一个免费开源的 React / Next.js 组件库，其中的29 个 iOS 风格 Widget（小部件）组件涵盖了从番茄钟到心率监测的完整场景，全部采用 TypeScript + Tailwind CSS 编写，复制即用。这篇文章为你整理全部 29 个 Widget 清单，并手把手带你在 10 分钟内搭出一面属于自己的"网页小部件墙"。

为什么值得做一面"小部件墙"？在 iOS 主屏上，一块块圆角卡片组成的 Widget 网格既美观又实用。而 Opensource UI 把这种体验搬到了 Web：每个 Widget 都是独立的小卡片（通常 176×176 像素起），自带实时状态和交互动效，拼在一起就是一面可以嵌入个人主页、仪表盘或演示页的iOS 风格小部件墙。

29个iOS风格Widget完整清单一览

下表按场景对全部 29 个 Widget 分组，文件路径均位于 components/widgets/ 目录下。

⏰ 时间与日程（8 个）

🍅 健康与专注（6 个）

🎙️ 声音与语音（4 个）

🔋 状态与开关（6 个）

✈️ 旅行与出行（4 个）

👤 其他（1 个）

10分钟上手：复制粘贴三步走

Opensource UI 的核心理念是copy-paste：没有需要学习的私有系统，也没有隐藏的付费墙。找到喜欢的 Widget，粘贴文件，改改参数就能上线（MIT 许可，个人与商用免费）。

第一步：获取仓库并本地预览

git clone https://gitcode.com/gh_mirrors/op/opensourceui cd opensourceui npm install npm run dev

要求 Node.js 22.x。启动后在浏览器打开/components路由，就能看到全部 29 个 Widget 的实时预览页。

第二步：复制组件文件与依赖

每个 Widget 就是一个独立的.tsx文件，复制时请连同它的依赖一起带入你的项目：

• 类名合并工具 lib/cn.ts，以及clsx、tailwind-merge两个包
• 源文件引用的图标（位于icons/目录）
• lucide-react（多数 Widget 的图标来源）
• 保留文件顶部的"use client"标记（Widget 都依赖浏览器状态）

第三步：排成一面墙

用 CSS Grid 或 Flex 布局把卡片排起来即可，参数通过 props 直接传入，例如：

<PomodoroWidget minutes={25} /> <HeartRateWidget bpm={72} /> <HydrationWidget glasses={5} goal={8} /> <FlightArrivalWidget arrivalMinutes={53} />

想要更多组合方式，可以查看 lib/showcase/showcase.tsx 中官方展示页的注册写法。

明星Widget详解：从番茄钟到心率监测

🍅 番茄钟：一键开启专注

PomodoroWidget 默认 25 分钟，细圆环随倒计时收缩，点击即可开始或暂停，结束后点击重开。minutes和label参数可自定义时长与文案，是学习打卡页、效率应用侧边栏的理想选择。

❤️ 健康监测：心率、睡眠、饮水、步数

• 心率监测：HeartRateWidget 的心率数值每 900 毫秒轻微跳动，圆环同步柔和脉冲，bpm参数传入真实心率即可。
• 睡眠评分：SleepScoreWidget 默认展示 87 分"Good"、7 小时 24 分，三个参数均可替换为真实数据。
• 饮水记录：HydrationWidget 点击即记一杯，水位在瓶形轮廓内真实上升，goal参数设定每日目标。
• 呼吸引导：FocusBreathWidget 每 4 秒一次吸气/呼起的脉冲节奏，适合冥想与减压场景。

这 6 个健康类 Widget 风格统一、动效克制，拼在一起就是完整的"健康仪表盘"。

✈️ 旅行与出行：航班、网约车与电动滑板车

FlightArrivalWidget 通过arrivalMinutes、departure、arrival三组参数展示倒计时与航线信息，是旅行仪表盘的最佳主角；RidePickupWidget 配合项目素材 car.png 可还原真实叫车卡片：

而 ElectricScooterWidget 则汇总骑行里程、均速与时长，自带环保叶片图标。

🔋 状态吉祥物们

Battery Face、Bluetooth Face、Dnd Face、Torch Face 这一组"表情脸"是全家最治愈的存在：电量低时小脸真的会耷拉下来，免打扰模式是紫色月亮在眨眼——把枯燥的系统状态变得有温度。

Widget目录结构与文档路径速查

常见问题（FAQ）

需要安装 npm 组件包吗？不需要。Opensource UI 刻意不发布 npm 包，复制源文件即可，零 Provider、零主题配置。

没有 Next.js，纯 React 能用吗？Widget 本质是 React + Tailwind + SVG，绝大多数只依赖clsx、tailwind-merge和lucide-react，可无缝用于纯 React 项目。

可以改深色模式吗？官方目录页保持浅色风格，方便你复制后自行适配。Widget 本身大量使用中性色，深色改造成本很低。

许可证是什么？MIT License，个人与商用均免费，无需保留署名。

29 个 iOS 风格 Widget 全部看完后，不妨先挑 4～6 个最合眼缘的（比如番茄钟 + 心率 + 步数 + 天气位）排出第一面小部件墙，再逐步补齐——毕竟，好的一面 Widget 墙，也是从一块砖开始的 🍅