【免费下载链接】opensourceuiOpensource UI: Free, open-source, and production-ready components for React and Next.js. Powered by TypeScript, Tailwind CSS, and lucide icons项目地址https://gitcode.com/gh_mirrors/op/opensourceui点击查看免费下载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 个Widget功能亮点源文件Analog ClockMinimal / Numeric / Roman同一文件提供 3 种表盘变体指针实时走动analog-clock-widget.tsxIos Digital Clock锁屏风格的 HH:MM 圆角方砖边缘带刻度ios-digital-clock-widget.tsxIos Calender经典 iOS 日历砖红色星期、大号日期实时刷新ios-calender-widget.tsxStopwatch秒表小部件stopwatch-widget.tsxMinimal Agenda今日待办列表点击打勾划线minimal-agenda-widget.tsxDaily Activity Calendar当月活动网格高亮今日与连续记录daily-activity-calendar-widget.tsx 健康与专注6 个Widget功能亮点源文件Pomodoro 番茄钟环形进度 点击开始/暂停/重开pomodoro-widget.tsxHeart Rate 心率监测柔和脉冲圆环BPM 数字轻微跳动heart-rate-widget.tsxSleep Score 睡眠评分分数、质量、时长一目了然sleep-score-widget.tsxHydration 饮水记录水瓶卡片点击加一杯水位上升hydration-widget.tsxStep Count 步数今日步数统计卡片step-count-widget.tsxFocus Breath 专注呼吸每 4 秒引导一次吸气/呼气focus-breath-widget.tsx️ 声音与语音4 个Widget功能亮点源文件Audio Recorder暗色录音卡红色波形动画 计时audio-recorder-widget.tsxVoice Assistant语音助手交互卡片voice-assistant-widget.tsxIos EarbudsAirPods 风格设备名与连接状态ios-earbuds-widget.tsxRecorder Face录音表情小部件recorder-face-widget.tsx 状态与开关6 个Widget功能亮点源文件Battery Face电量变少时表情真的会难过battery-face-widget.tsxBluetooth Face连接/断开时表情切换bluetooth-face-widget.tsxDnd Face免打扰月亮吉祥物点击切换dnd-face-widget.tsxTorch Face手电筒开关表情卡torch-face-widget.tsxWifi ToggleWi-Fi 开关状态卡wifi-toggle-widget.tsxCompass 指南针指针跟随设备倾斜或 heading 参数compass-widget.tsx✈️ 旅行与出行4 个Widget功能亮点源文件Flight Arrival起降机场 倒计时飞机沿进度条移动flight-arrival-widget.tsxRide Pickup网约车叫车状态卡ride-pickup-widget.tsxElectric Scooter骑行摘要里程、均速、时长electric-scooter-widget.tsxIos Map Location地图定位卡展示城市名ios-map-location-widget.tsx 其他1 个Widget功能亮点源文件Blob Profile有机形状照片框的个人资料卡带认证标识blob-profile.tsx10分钟上手复制粘贴三步走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目录结构与文档路径速查路径说明components/widgets/29 个 Widget 的全部 27 个源文件模拟时钟 1 文件含 3 个变体lib/showcase/showcase.tsx官方展示页注册表含每个 Widget 的预览与用法skills/opensource-ui/SKILL.mdAI 编码助手的技能入口可让 AI 直接帮你装配组件skills/opensource-ui/references/catalog.md全部 200 组件的分类目录与功能摘要AGENTS.md面向 AI 代理的协作说明README.md项目总览、命令说明与使用规范常见问题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 全部看完后不妨先挑 46 个最合眼缘的比如番茄钟 心率 步数 天气位排出第一面小部件墙再逐步补齐——毕竟好的一面 Widget 墙也是从一块砖开始的 赞分享【免费下载链接】opensourceuiOpensource UI: Free, open-source, and production-ready components for React and Next.js. Powered by TypeScript, Tailwind CSS, and lucide icons项目地址https://gitcode.com/gh_mirrors/op/opensourceui点击查看免费下载相关推荐番茄小说本地下载器5分钟快速搭建个人小说库番茄小说本地下载器5分钟快速搭建个人小说库 还在为网络信号不好而无法畅享小说阅读体验吗番茄小说下载器正是你需要的完美解决方案这款开源工具能够将番茄小说平台网页爬虫后端CLIElemental UI入门指南10分钟搭建你的第一个React组件Elemental UI入门指南10分钟搭建你的第一个React组件 Elemental UI是一个灵活且美观的React.js UI框架能够帮助开发者快速EarlGrey快速开始指南10分钟内搭建你的第一个iOS UI自动化测试EarlGrey快速开始指南10分钟内搭建你的第一个iOS UI自动化测试 EarlGrey是Google开发的一款强大的原生iOS UI自动化测试框架专门测试上一篇安装速度快2倍是什么概念aube vs pnpm、Bun性能基准测试全解析下一篇YimMenuV2 GTA5菜单注入五步跑通增强菜单创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考