Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

最大的开源UI组件库，这里有 5,919 个UI元素，涵盖了CSS和Tailwind的组件！免费供个人和商业使用，复制代码到你的项目就可以。 👉

katon

8,765 subscribers

30,872 views • 1 year ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

4 Comments

大帅老猿1 year ago

精编版的codepen

SANWE1 year ago

这个录屏软件没有Windows版本😅

katon1 year ago

我用的是 Chrome 插件：Cursorful

Page to Pixel Publishing2 years ago

Boost, surf, and weave your way through The Art of Flight, an arcade game about flying multiple ships at the same time. With solo, local co-op, and a leaderboard, there are tons of ways to play. Wishlist on Steam today!

Related Videos

🤯 免费“白嫖”这套动画组件，让你的 Shadcn UI “骚”到飞起！(开源、可定制，杀死静态界面!) Animate UI，一套基于 TypeScript / Tailwind CSS / Motion 构建的免费、开源 React 动画组件库，简直是为 Shadcn UI 量身定做（当然也能单独用）！✨ 链接见评论👇

🤯 免费“白嫖”这套动画组件，让你的 Shadcn UI “骚”到飞起！(开源、可定制，杀死静态界面!) Animate UI，一套基于 TypeScript / Tailwind CSS / Motion 构建的免费、开源 React 动画组件库，简直是为 Shadcn UI 量身定做（当然也能单独用）！✨ 链接见评论👇

MapleShaw

21,269 views • 1 year ago

今年最强的前端 UI 动效组件库，没有之一，强烈推荐 - 看中的组件直接复制 - 经济实用还特么漂亮这种组件库，任何人，随便玩玩就可出道，比坤快亮点 • AI UI Builder：通过 AI 生成 UI 界面（Magic MCP / Magic Chat 等） • 组件市场：提供丰富的 UI 元素（按钮、导航栏、卡片、动画等） • 模板与组合包：整页模板、界面合集、一键打包使用 • 创作者系统：支持用户上传作品、参与挑战、查看排行榜 • 互动功能：支持点赞、收藏、复制代码、嵌入至项目中同时，这个组件库也是评论区各位前端老湿极力推荐，必须分享一波。Anthony 热烤奶官网

今年最强的前端 UI 动效组件库，没有之一，强烈推荐 - 看中的组件直接复制 - 经济实用还特么漂亮这种组件库，任何人，随便玩玩就可出道，比坤快亮点 • AI UI Builder：通过 AI 生成 UI 界面（Magic MCP / Magic Chat 等） • 组件市场：提供丰富的 UI 元素（按钮、导航栏、卡片、动画等） • 模板与组合包：整页模板、界面合集、一键打包使用 • 创作者系统：支持用户上传作品、参与挑战、查看排行榜 • 互动功能：支持点赞、收藏、复制代码、嵌入至项目中同时，这个组件库也是评论区各位前端老湿极力推荐，必须分享一波。Anthony 热烤奶官网

艾略特

18,594 views • 1 year ago

首个直接集成在 IDE 中的开源 AI 设计 Agent：SuperDesign，可直接在 IDE 中生成 UI 设计。通过自然语言提示就能生成完整的 UI 界面、可复用组件和线框图，并支持 Cursor、Windsurf、VS Code 等主流 AI 编辑器。 GitHub：主要特性： - 产品界面生成：通过单个提示即可创建完整 UI 界面 - UI 组件创建：生成可直接使用的可复用组件 - 线框图绘制：快速探索低保真度布局设计 - 设计分支和迭代：轻松复制和改进现有设计 - 提示词转代码：将设计提示直接复制到 AI IDE 中通过 Cursor/VS Code 市场安装插件即可使用，其中设计文件本地存储在 .superdesign/ 目录中。

首个直接集成在 IDE 中的开源 AI 设计 Agent：SuperDesign，可直接在 IDE 中生成 UI 设计。通过自然语言提示就能生成完整的 UI 界面、可复用组件和线框图，并支持 Cursor、Windsurf、VS Code 等主流 AI 编辑器。 GitHub：主要特性： - 产品界面生成：通过单个提示即可创建完整 UI 界面 - UI 组件创建：生成可直接使用的可复用组件 - 线框图绘制：快速探索低保真度布局设计 - 设计分支和迭代：轻松复制和改进现有设计 - 提示词转代码：将设计提示直接复制到 AI IDE 中通过 Cursor/VS Code 市场安装插件即可使用，其中设计文件本地存储在 .superdesign/ 目录中。

GitHubDaily

42,801 views • 1 year ago

视频制作的范式要被推翻了！😍 Remotion，一个能让你用 React 代码直接生成 MP4 视频的库。动效、数据可视化、甚至是个性化短视频，都可以用你最熟悉的组件化思维来开发和复用。在 AI 的加持下，Vibe Video Making 也可以出圈了！😜 源码见评论👇

视频制作的范式要被推翻了！😍 Remotion，一个能让你用 React 代码直接生成 MP4 视频的库。动效、数据可视化、甚至是个性化短视频，都可以用你最熟悉的组件化思维来开发和复用。在 AI 的加持下，Vibe Video Making 也可以出圈了！😜 源码见评论👇

MapleShaw

43,006 views • 10 months ago

如果你想让你的网站看起来有质感更高级，一定要收藏这个 UI 动效组件网站这里几乎可以找到你想要的特效，而且还免费，使用也是非常简单，直接拷贝对应的代码或者npm安装独立开发者必备！

如果你想让你的网站看起来有质感更高级，一定要收藏这个 UI 动效组件网站这里几乎可以找到你想要的特效，而且还免费，使用也是非常简单，直接拷贝对应的代码或者npm安装独立开发者必备！

开发者Hailey

22,388 views • 5 months ago

现在基于 BaseUI 的一个非常美观的组件库是 coss/ui 适合现代极简审美的组件库，看多了 shadcn/ui，那么这个绝对是一股新的风格和感觉。基于 tailwind.css V4, 也支持 shadcn 的安装方式，我感觉 cloudflare 的新设计和这个感觉非常像, 看起来很心动。

现在基于 BaseUI 的一个非常美观的组件库是 coss/ui 适合现代极简审美的组件库，看多了 shadcn/ui，那么这个绝对是一股新的风格和感觉。基于 tailwind.css V4, 也支持 shadcn 的安装方式，我感觉 cloudflare 的新设计和这个感觉非常像, 看起来很心动。

Viking

109,381 views • 6 months ago

前端开发从未变得如此简单 🤩 借助分钟开发完一个 React 组件。步骤： 1. 在上找到你要「学习」的 UI 2. 截图 -> 复制到 Devv 中实现 Prompt 需要指定输出到同一个 html file 中便于 preview（未来会优化）。预览没有问题就可以转化成 React 组件 copy 到自己的代码库中了。

前端开发从未变得如此简单 🤩 借助分钟开发完一个 React 组件。步骤： 1. 在上找到你要「学习」的 UI 2. 截图 -> 复制到 Devv 中实现 Prompt 需要指定输出到同一个 html file 中便于 preview（未来会优化）。预览没有问题就可以转化成 React 组件 copy 到自己的代码库中了。

Jiayuan (JY) Zhang

41,794 views • 1 year ago

除了千篇一律的现代UI，可以试试开源复古风RetroUI，对于有些游戏页面、社交个性化的诉求可以搭配。 ✨ 40+即插即用的复古风组件 🎨 完美集成React + TailwindCSS 💻 只需复制粘贴，极速上手

除了千篇一律的现代UI，可以试试开源复古风RetroUI，对于有些游戏页面、社交个性化的诉求可以搭配。 ✨ 40+即插即用的复古风组件 🎨 完美集成React + TailwindCSS 💻 只需复制粘贴，极速上手

katon

24,206 views • 1 year ago

🚀 香港大学刚开源了一个宝藏项目—— CLI-Anything，star 数直接飙到 3 w 它可以扫描任意软件的源代码，自动生成 AI agent 可以直接调用的 CLI 接口。像GIMP、Blender、Audacity 这类没有 API 的桌面软件，Agent 现在可以直接操控了。软件以前是给人用的，现在是给 Agent 用的

🚀 香港大学刚开源了一个宝藏项目—— CLI-Anything，star 数直接飙到 3 w 它可以扫描任意软件的源代码，自动生成 AI agent 可以直接调用的 CLI 接口。像GIMP、Blender、Audacity 这类没有 API 的桌面软件，Agent 现在可以直接操控了。软件以前是给人用的，现在是给 Agent 用的

阿西_出海

168,006 views • 1 month ago

苦于这个MagicUI 是基于React的，发现使用 Vue 的同学也有福了，现在有一个 SparkUI，几乎和 MagicUI 的组件效果一样的，完全开源的。但是是用 Vue/Typescript/VueMotion/TailwindCSS 编写的，对于我这种现在主力是 Vue 的人可以立马使用起来了。

苦于这个MagicUI 是基于React的，发现使用 Vue 的同学也有福了，现在有一个 SparkUI，几乎和 MagicUI 的组件效果一样的，完全开源的。但是是用 Vue/Typescript/VueMotion/TailwindCSS 编写的，对于我这种现在主力是 Vue 的人可以立马使用起来了。

Viking

67,635 views • 1 year ago

🥳本周课程即将发布《用开源赚钱？结合Stitch + Github开源复刻草料二维码》！作为一个纯小白，如何使用Google的Stitch做产品设计图？如何使用Github的开源项目构建自己的项目 + Github项目中要注意的点和协议规则，确保可以商业化使用？还有开源项目盈利的3种方式。这一期的课程都会讲到，见我的AI编程课：

🥳本周课程即将发布《用开源赚钱？结合Stitch + Github开源复刻草料二维码》！作为一个纯小白，如何使用Google的Stitch做产品设计图？如何使用Github的开源项目构建自己的项目 + Github项目中要注意的点和协议规则，确保可以商业化使用？还有开源项目盈利的3种方式。这一期的课程都会讲到，见我的AI编程课：

Yihui

43,181 views • 7 months ago

重磅！🎙️AI语音巨头ElevenLabs 推出 ElevenLabs UI —— 专为 AI 音频与语音代理打造的开源组件库！ ✅ 22 个组件与示例，覆盖聊天界面、语音转录、音乐等场景 🎨 完全可自定义，轻松集成 🧩 MIT 开源许可，自由使用 AI 开发者的新神器来了！🚀

重磅！🎙️AI语音巨头ElevenLabs 推出 ElevenLabs UI —— 专为 AI 音频与语音代理打造的开源组件库！ ✅ 22 个组件与示例，覆盖聊天界面、语音转录、音乐等场景 🎨 完全可自定义，轻松集成 🧩 MIT 开源许可，自由使用 AI 开发者的新神器来了！🚀

Truman

23,073 views • 8 months ago

大佬huangserva 开源的这个项目很有可玩性。只花了不到2个小时就重新搭建了一个3D汉服的网站。方法简单介绍一下： 1/ 将大佬的开源项目地址扔给CodeX或者Agent，告诉它：请先阅读一下这个Github项目，然后模仿这个项目，帮我做一个3D汉服展示的网站，功能要求与原项目一致，语言改成中文，并重新调整复合汉服审美的UI。 2/ 在混元3D网站上将图片生成3D模型GLB文件并下载。地址： 3/ 将下载的GLB文件上传到你已经开发好的网站就可以了。效果可能没有原项目好，但做项目展示够用了。

大佬huangserva 开源的这个项目很有可玩性。只花了不到2个小时就重新搭建了一个3D汉服的网站。方法简单介绍一下： 1/ 将大佬的开源项目地址扔给CodeX或者Agent，告诉它：请先阅读一下这个Github项目，然后模仿这个项目，帮我做一个3D汉服展示的网站，功能要求与原项目一致，语言改成中文，并重新调整复合汉服审美的UI。 2/ 在混元3D网站上将图片生成3D模型GLB文件并下载。地址： 3/ 将下载的GLB文件上传到你已经开发好的网站就可以了。效果可能没有原项目好，但做项目展示够用了。

李岳

51,690 views • 1 month ago

#AI开源项目推荐：photoshot 开源 AI 头像生成器 Web 应用程序，包含了完整的网站、AI的API调用、支付等功能，即使你不做同类应用，如果你想做类似的收费AI项目，可以帮你节约很多前期开发工作。技术栈： ▲ Next.js： Web 应用程序 🖼 Chakra UI ：UI 组件的 📦 Prisma：数据库 ORM 🧠 Replicate：一个运行机器学习模型的云平台 💰 Stripe：Stripe 支付 👩‍🎨 Stable Diffusion：开源文本到图像生成模型

#AI开源项目推荐：photoshot 开源 AI 头像生成器 Web 应用程序，包含了完整的网站、AI的API调用、支付等功能，即使你不做同类应用，如果你想做类似的收费AI项目，可以帮你节约很多前期开发工作。技术栈： ▲ Next.js： Web 应用程序 🖼 Chakra UI ：UI 组件的 📦 Prisma：数据库 ORM 🧠 Replicate：一个运行机器学习模型的云平台 💰 Stripe：Stripe 支付 👩‍🎨 Stable Diffusion：开源文本到图像生成模型

宝玉

128,349 views • 2 years ago

以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HTML+CSS 实现，零第三方依赖，体积极小。最爽的是自带可视化调试面板。粒子数、轨迹、速度、颜色，拖拽滑块就能实时预览。调好参数，一键复制完整代码，粘贴到项目里就能跑。以后做项目，你是更喜欢这种数学极客风，还是习惯用现成的 UI 库组件？

以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HTML+CSS 实现，零第三方依赖，体积极小。最爽的是自带可视化调试面板。粒子数、轨迹、速度、颜色，拖拽滑块就能实时预览。调好参数，一键复制完整代码，粘贴到项目里就能跑。以后做项目，你是更喜欢这种数学极客风，还是习惯用现成的 UI 库组件？

Vincent

70,505 views • 1 month ago

这几天每天都会花几分钟当作兴趣看一个组件库，好多都是大同小异，没想到这么多人在做类似的事情。但是这个还是玩出花来了。他本人应该是设计师，我很喜欢它设计的几个 Backgrounds 组件，都是非常符合现代 landing page 的 cta 部分，大家可以直接拿来用。其他一些组件也挺漂亮的，和其他组件库的风格完全不一样。

这几天每天都会花几分钟当作兴趣看一个组件库，好多都是大同小异，没想到这么多人在做类似的事情。但是这个还是玩出花来了。他本人应该是设计师，我很喜欢它设计的几个 Backgrounds 组件，都是非常符合现代 landing page 的 cta 部分，大家可以直接拿来用。其他一些组件也挺漂亮的，和其他组件库的风格完全不一样。

Viking

34,532 views • 7 months ago

uiverse + v0 Chat + Cursor + Vercel: AI辅助Web开发全流程演示，从UI设计到快速部署视频简介：这个视频展示了高效Web开发流程，从UI组件选择到最终部署的每一步。探讨了如何利用多种先进工具来简化开发过程并提高效率： uiverse：从这个开源UI组件库中选择并定制精美的界面元素。 v0 Chat：演示如何使用AI辅助开发工具来加速编码过程，解决复杂问题，并生成高质量代码。 Cursor：介绍如何使用这款AI驱动的代码编辑器进行代码优化和调试，提高代码质量。 Vercel：展示如何利用这个平台快速部署和发布Web应用。时间戳: 00:00 高效Web开发流程简介 01:53 案例展示 03:06 天气应用开发演示 13:49 收音故事页面开发演示 18:33 总结

uiverse + v0 Chat + Cursor + Vercel: AI辅助Web开发全流程演示，从UI设计到快速部署视频简介：这个视频展示了高效Web开发流程，从UI组件选择到最终部署的每一步。探讨了如何利用多种先进工具来简化开发过程并提高效率： uiverse：从这个开源UI组件库中选择并定制精美的界面元素。 v0 Chat：演示如何使用AI辅助开发工具来加速编码过程，解决复杂问题，并生成高质量代码。 Cursor：介绍如何使用这款AI驱动的代码编辑器进行代码优化和调试，提高代码质量。 Vercel：展示如何利用这个平台快速部署和发布Web应用。时间戳: 00:00 高效Web开发流程简介 01:53 案例展示 03:06 天气应用开发演示 13:49 收音故事页面开发演示 18:33 总结

nicekate

20,818 views • 1 year ago

Gemini CLI 原生集成到 VS Code 里面了，现在可以感知当前打开的文件和选中的代码，这个太好了需要通过 CLI 命令 /ide install 安装扩展为了这个扩展还优化了 UI，可以在窄宽度显示内容

Gemini CLI 原生集成到 VS Code 里面了，现在可以感知当前打开的文件和选中的代码，这个太好了需要通过 CLI 命令 /ide install 安装扩展为了这个扩展还优化了 UI，可以在窄宽度显示内容

歸藏(guizang.ai)

51,107 views • 10 months ago

一个特别优雅、冷静甚至有点“性冷淡”的 UI 库名字叫：Base UI 如果你的Vibecoding 项目 UI 设计还想突破可以试试让 AI 调用此库

一个特别优雅、冷静甚至有点“性冷淡”的 UI 库名字叫：Base UI 如果你的Vibecoding 项目 UI 设计还想突破可以试试让 AI 调用此库

Jackywine

31,595 views • 4 months ago

推荐一款开源免费的剪藏神器， chat with docs。尝试了一段时间，页面元素多选的体验做的很棒，据说后期可以将微信读书的笔记也导入进来，比较期待；另外，这个工具还自带了划词翻译功能，感觉又可以少装一个翻译插件了😄 插件的完成度比较高，正在学习如何制作 Chrome 插件的同学，可以扒一扒源码，参考下，这个项目是开源的。你也可以直接向仓库提交 PR，帮助它完善和改进。

推荐一款开源免费的剪藏神器， chat with docs。尝试了一段时间，页面元素多选的体验做的很棒，据说后期可以将微信读书的笔记也导入进来，比较期待；另外，这个工具还自带了划词翻译功能，感觉又可以少装一个翻译插件了😄 插件的完成度比较高，正在学习如何制作 Chrome 插件的同学，可以扒一扒源码，参考下，这个项目是开源的。你也可以直接向仓库提交 PR，帮助它完善和改进。

Barret李靖

106,725 views • 2 years ago