[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-lobehub--lobe-ui":3,"tool-lobehub--lobe-ui":61},[4,18,26,36,44,52],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",147882,2,"2026-04-09T11:32:47",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108111,"2026-04-08T11:23:26",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":10,"last_commit_at":50,"category_tags":51,"status":17},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[35,15,13,14],{"id":53,"name":54,"github_repo":55,"description_zh":56,"stars":57,"difficulty_score":10,"last_commit_at":58,"category_tags":59,"status":17},4292,"Deep-Live-Cam","hacksider\u002FDeep-Live-Cam","Deep-Live-Cam 是一款专注于实时换脸与视频生成的开源工具，用户仅需一张静态照片，即可通过“一键操作”实现摄像头画面的即时变脸或制作深度伪造视频。它有效解决了传统换脸技术流程繁琐、对硬件配置要求极高以及难以实时预览的痛点，让高质量的数字内容创作变得触手可及。\n\n这款工具不仅适合开发者和技术研究人员探索算法边界，更因其极简的操作逻辑（仅需三步：选脸、选摄像头、启动），广泛适用于普通用户、内容创作者、设计师及直播主播。无论是为了动画角色定制、服装展示模特替换，还是制作趣味短视频和直播互动，Deep-Live-Cam 都能提供流畅的支持。\n\n其核心技术亮点在于强大的实时处理能力，支持口型遮罩（Mouth Mask）以保留使用者原始的嘴部动作，确保表情自然精准；同时具备“人脸映射”功能，可同时对画面中的多个主体应用不同面孔。此外，项目内置了严格的内容安全过滤机制，自动拦截涉及裸露、暴力等不当素材，并倡导用户在获得授权及明确标注的前提下合规使用，体现了技术发展与伦理责任的平衡。",88924,"2026-04-06T03:28:53",[14,15,13,60],"视频",{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":66,"readme_en":67,"readme_zh":68,"quickstart_zh":69,"use_case_zh":70,"hero_image_url":71,"owner_login":72,"owner_name":73,"owner_avatar_url":74,"owner_bio":75,"owner_company":76,"owner_location":76,"owner_email":77,"owner_twitter":72,"owner_website":78,"owner_url":79,"languages":80,"stars":96,"forks":97,"last_commit_at":98,"license":99,"difficulty_score":32,"env_os":100,"env_gpu":100,"env_ram":100,"env_deps":101,"category_tags":109,"github_topics":110,"view_count":32,"oss_zip_url":76,"oss_zip_packed_at":76,"status":17,"created_at":120,"updated_at":121,"faqs":122,"releases":153},5923,"lobehub\u002Flobe-ui","lobe-ui","🍭  Lobe UI - an open-source UI component library for building AIGC web apps","Lobe UI 是一款专为构建 AIGC（人工智能生成内容）Web 应用而设计的开源 UI 组件库。它旨在帮助开发者快速搭建具有现代感且交互流畅的 AI 产品界面，解决了在开发此类应用时重复造轮子、样式不统一以及动效实现复杂等痛点。\n\n这款工具主要面向前端开发工程师和全栈开发者，特别是那些正在使用 React 技术栈构建聊天机器人、创作平台或智能助手的团队。Lobe UI 基于成熟的 Ant Design 组件体系进行深度定制，确保了与现有 Antd 生态的完全兼容，同时提供了更贴合 AIGC 场景的专属组件。其核心技术亮点包括原生支持 ESM 模块、对 Next.js 服务端渲染（SSR）的友好配置，以及内置了基于 `motion` 库的流畅动画系统。此外，它还集成了便捷的多语言（i18n）解决方案和主题提供商，让开发者能轻松实现国际化适配与深色模式切换。通过 Lobe UI，开发者可以将精力更多地集中在业务逻辑与 AI 能力的整合上，从而高效打造出体验卓越的智能 Web 应用。","\u003Ca name=\"readme-top\">\u003C\u002Fa>\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg height=\"120\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flobehub_lobe-ui_readme_912f880098a6.webp\">\n\u003Cimg height=\"120\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fbb48d7f1-460a-4dae-a632-66d1a7ff8f70\">\n\u003Cimg height=\"120\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flobehub_lobe-ui_readme_a6a97b1626bb.webp\">\n\n\u003Ch1>Lobe UI\u003C\u002Fh1>\n\nLobe UI is an open-source UI component library for building _AIGC_ web apps\n\n[Documents](https:\u002F\u002Fui.lobehub.com) · [Changelog](.\u002FCHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]\n\n\u003C!-- SHIELD GROUP -->\n\n[![][npm-release-shield]][npm-release-link]\n[![][vercel-shield]][vercel-link]\n[![][discord-shield]][discord-link]\n[![][npm-downloads-shield]][npm-downloads-link]\n[![][github-releasedate-shield]][github-releasedate-link]\n[![][github-action-test-shield]][github-action-test-link]\n[![][github-action-release-shield]][github-action-release-link]\u003Cbr\u002F>\n[![][github-contributors-shield]][github-contributors-link]\n[![][github-forks-shield]][github-forks-link]\n[![][github-stars-shield]][github-stars-link]\n[![][github-issues-shield]][github-issues-link]\n[![][github-license-shield]][github-license-link]\n\n[![][banner]][vercel-link]\n\n\u003C\u002Fdiv>\n\n\u003Cdetails>\n\u003Csummary>\u003Ckbd>Table of contents\u003C\u002Fkbd>\u003C\u002Fsummary>\n\n#### TOC\n\n- [📦 Installation](#-installation)\n  - [Compile with NextJS](#compile-with-nextjs)\n- [🤯 Usage](#-usage)\n  - [I18n](#i18n)\n  - [ConfigProvider (Motion)](#configprovider-motion)\n- [⌨️ Local Development](#️-local-development)\n- [🤝 Contributing](#-contributing)\n- [🩷 Sponsor](#-sponsor)\n- [🔗 Links](#-links)\n  - [More Products](#more-products)\n  - [Design Resources](#design-resources)\n  - [Development Resources](#development-resources)\n\n####\n\n\u003C\u002Fdetails>\n\n## 📦 Installation\n\n> \\[!IMPORTANT]\\\n> This package is [ESM only](https:\u002F\u002Fgist.github.com\u002Fsindresorhus\u002Fa39789f98801d908bbc7ff3ecc99d99c).\n\nTo install Lobe UI, run the following command:\n\n[![][bun-shield]][bun-link]\n\n```bash\n$ bun add @lobehub\u002Fui\n```\n\n### Compile with NextJS\n\n> \\[!NOTE]\\\n> By work correct with nextjs page router SSR, add `transpilePackages: ['@lobehub\u002Fui']` to `next.config.js`. For example:\n\n```js\n\u002F\u002F next.config.js\nconst nextConfig = {\n  \u002F\u002F ...other config\n\n  transpilePackages: ['@lobehub\u002Fui'],\n};\n```\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## 🤯 Usage\n\n> \\[!NOTE]\\\n> The LobeUI components are developed based on [Antd](https:\u002F\u002Fant.design\u002Fcomponents\u002Foverview\u002F), fully compatible with Antd components,\n> and it is recommended to use [antd-style](https:\u002F\u002Fant-design.github.io\u002Fantd-style\u002F) as the default css-in-js styling solution.\n\n```tsx\nimport { ThemeProvider, Button } from '@lobehub\u002Fui';\nimport { Button } from 'antd';\n\nexport default () => (\n  \u003CThemeProvider>\n    \u003CButton>Hello AIGC\u003C\u002FButton>\n  \u003C\u002FThemeProvider>\n);\n```\n\n### I18n\n\nUse the i18n provider with resource bundles. Component `texts` props always take priority.\n\n```tsx\nimport { I18nProvider } from '@lobehub\u002Fui';\nimport formMessages from '@lobehub\u002Fui\u002Fi18n\u002Fresources\u002Fform';\nimport hotkeyMessages from '@lobehub\u002Fui\u002Fi18n\u002Fresources\u002Fhotkey';\n\n\u003CI18nProvider resources={[formMessages, hotkeyMessages]}>\n  \u003CApp \u002F>\n\u003C\u002FI18nProvider>;\n```\n\n### ConfigProvider (Motion)\n\nYou must pass a motion component via `ConfigProvider`.\nIf your app uses `LazyMotion`, pass `m`:\n\n```tsx\nimport { ConfigProvider } from '@lobehub\u002Fui';\nimport { motion } from 'motion\u002Freact';\n\nexport default () => (\n  \u003CConfigProvider motion={motion}>\n    \u003CApp \u002F>\n  \u003C\u002FConfigProvider>\n);\n```\n\nIf your app uses `LazyMotion`:\n\n```tsx\nimport { ConfigProvider } from '@lobehub\u002Fui';\nimport { LazyMotion, domAnimation } from 'motion\u002Freact';\nimport * as m from 'motion\u002Freact-m';\n\nexport default () => (\n  \u003CLazyMotion features={domAnimation}>\n    \u003CConfigProvider motion={m}>\n      \u003CApp \u002F>\n    \u003C\u002FConfigProvider>\n  \u003C\u002FLazyMotion>\n);\n```\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## ⌨️ Local Development\n\nYou can use Github Codespaces for online development:\n\n[![][codespaces-shield]][codespaces-link]\n\nOr clone it for local development:\n\n```bash\n$ git clone https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui.git\n$ cd lobe-ui\n$ bun install\n$ bun start\n```\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## 🤝 Contributing\n\nContributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] to get stuck in to show us what you’re made of.\n\n[![][pr-welcome-shield]][pr-welcome-link]\n\n[![][contributors-contrib]][contributors-link]\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## 🩷 Sponsor\n\nEvery bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Flobehub\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fgithub.com\u002Flobehub\u002F.github\u002Fblob\u002Fmain\u002Fstatic\u002Fsponsor-dark.png?raw=true\">\n    \u003Cimg  src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flobehub_lobe-ui_readme_bd98c51189b2.png\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## 🔗 Links\n\n### More Products\n\n- **[🤯 Lobe Chat](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-chat)** - An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT\u002FLLM web application.\n- **[🅰️ Lobe Theme](https:\u002F\u002Fgithub.com\u002Flobehub\u002Fsd-webui-lobe-theme)** - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.\n- **[🧸 Lobe Vidol](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-vidol)** - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.\n\n### Design Resources\n\n- **[🍭 Lobe UI](https:\u002F\u002Fui.lobehub.com)** - An open-source UI component library for building AIGC web apps.\n- **[🥨 Lobe Icons](https:\u002F\u002Flobehub.com\u002Ficons)** - Popular AI \u002F LLM Model Brand SVG Logo and Icon Collection.\n- **[📊 Lobe Charts](https:\u002F\u002Fcharts.lobehub.com)** - React modern charts components built on recharts\n\n### Development Resources\n\n- **[🎤 Lobe TTS](https:\u002F\u002Ftts.lobehub.com)** - A high-quality & reliable TTS\u002FSTT library for Server and Browser\n- **[🌏 Lobe i18n](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-cli-toolbox\u002Fblob\u002Fmaster\u002Fpackages\u002Flobe-i18n)** - Automation ai tool for the i18n (internationalization) translation process.\n\n[More Resources](https:\u002F\u002Flobehub.com\u002Fresources)\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n---\n\n\u003Cdetails>\u003Csummary>\u003Ch4>📝 License\u003C\u002Fh4>\u003C\u002Fsummary>\n\n[![][fossa-license-shield]][fossa-license-link]\n\n\u003C\u002Fdetails>\n\nCopyright © 2023 [LobeHub][profile-link]. \u003Cbr \u002F>\nThis project is [MIT](.\u002FLICENSE) licensed.\n\n\u003C!-- LINK GROUP -->\n\n[back-to-top]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-BACK_TO_TOP-151515?style=flat-square\n[banner]: https:\u002F\u002Fgithub-production-user-asset-6210df.s3.amazonaws.com\u002F17870709\u002F268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png\n[bun-link]: https:\u002F\u002Fbun.sh\n[bun-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-speedup%20with%20bun-black?logo=bun&style=for-the-badge\n[codespaces-link]: https:\u002F\u002Fcodespaces.new\u002Flobehub\u002Flobe-ui\n[codespaces-shield]: https:\u002F\u002Fgithub.com\u002Fcodespaces\u002Fbadge.svg\n[contributors-contrib]: https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=lobehub\u002Flobe-ui\n[contributors-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fgraphs\u002Fcontributors\n[discord-link]: https:\u002F\u002Fdiscord.gg\u002FAYFPHvv2jT\n[discord-shield]: https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square\n[fossa-license-link]: https:\u002F\u002Fapp.fossa.com\u002Fprojects\u002Fgit%2Bgithub.com%2Flobehub%2Flobe-ui\n[fossa-license-shield]: https:\u002F\u002Fapp.fossa.com\u002Fapi\u002Fprojects\u002Fgit%2Bgithub.com%2Flobehub%2Flobe-ui.svg?type=large\n[github-action-release-link]: https:\u002F\u002Fgithub.com\u002Factions\u002Fworkflows\u002Flobehub\u002Flobe-ui\u002Frelease.yml\n[github-action-release-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Flobehub\u002Flobe-ui\u002Frelease.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square\n[github-action-test-link]: https:\u002F\u002Fgithub.com\u002Factions\u002Fworkflows\u002Flobehub\u002Flobe-ui\u002Ftest.yml\n[github-action-test-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Flobehub\u002Flobe-ui\u002Ftest.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square\n[github-contributors-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fgraphs\u002Fcontributors\n[github-contributors-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Flobehub\u002Flobe-ui?color=c4f042&labelColor=black&style=flat-square\n[github-forks-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fnetwork\u002Fmembers\n[github-forks-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Flobehub\u002Flobe-ui?color=8ae8ff&labelColor=black&style=flat-square\n[github-issues-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\n[github-issues-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Flobehub\u002Flobe-ui?color=ff80eb&labelColor=black&style=flat-square\n[github-license-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fblob\u002Fmaster\u002FLICENSE\n[github-license-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Flobehub\u002Flobe-ui?color=white&labelColor=black&style=flat-square\n[github-releasedate-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Freleases\n[github-releasedate-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Frelease-date\u002Flobehub\u002Flobe-ui?labelColor=black&style=flat-square\n[github-stars-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fnetwork\u002Fstargazers\n[github-stars-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Flobehub\u002Flobe-ui?color=ffcb47&labelColor=black&style=flat-square\n[npm-downloads-link]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@lobehub\u002Fui\n[npm-downloads-shield]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@lobehub\u002Fui?labelColor=black&style=flat-square\n[npm-release-link]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@lobehub\u002Fui\n[npm-release-shield]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@lobehub\u002Fui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square\n[pr-welcome-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-chat\u002Fpulls\n[pr-welcome-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge\n[profile-link]: https:\u002F\u002Fgithub.com\u002Flobehub\n[vercel-link]: https:\u002F\u002Fui.lobehub.com\n[vercel-shield]: https:\u002F\u002Fimg.shields.io\u002Fwebsite?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com\n","\u003Ca name=\"readme-top\">\u003C\u002Fa>\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg height=\"120\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flobehub_lobe-ui_readme_912f880098a6.webp\">\n\u003Cimg height=\"120\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fbb48d7f1-460a-4dae-a632-66d1a7ff8f70\">\n\u003Cimg height=\"120\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flobehub_lobe-ui_readme_a6a97b1626bb.webp\">\n\n\u003Ch1>Lobe UI\u003C\u002Fh1>\n\nLobe UI 是一个用于构建 _AIGC_ Web 应用的开源 UI 组件库\n\n[文档](https:\u002F\u002Fui.lobehub.com) · [变更日志](.\u002FCHANGELOG.md) · [报告 Bug][github-issues-link] · [请求功能][github-issues-link]\n\n\u003C!-- SHIELD GROUP -->\n\n[![][npm-release-shield]][npm-release-link]\n[![][vercel-shield]][vercel-link]\n[![][discord-shield]][discord-link]\n[![][npm-downloads-shield]][npm-downloads-link]\n[![][github-releasedate-shield]][github-releasedate-link]\n[![][github-action-test-shield]][github-action-test-link]\n[![][github-action-release-shield]][github-action-release-link]\u003Cbr\u002F>\n[![][github-contributors-shield]][github-contributors-link]\n[![][github-forks-shield]][github-forks-link]\n[![][github-stars-shield]][github-stars-link]\n[![][github-issues-shield]][github-issues-link]\n[![][github-license-shield]][github-license-link]\n\n[![][banner]][vercel-link]\n\n\u003C\u002Fdiv>\n\n\u003Cdetails>\n\u003Csummary>\u003Ckbd>目录\u003C\u002Fkbd>\u003C\u002Fsummary>\n\n#### 目录\n\n- [📦 安装](#-installation)\n  - [使用 NextJS 编译](#compile-with-nextjs)\n- [🤯 使用](#-usage)\n  - [I18n](#i18n)\n  - [ConfigProvider (Motion)](#configprovider-motion)\n- [⌨️ 本地开发](#️-local-development)\n- [🤝 贡献](#-contributing)\n- [🩷 赞助](#-sponsor)\n- [🔗 链接](#-links)\n  - [更多产品](#more-products)\n  - [设计资源](#design-resources)\n  - [开发资源](#development-resources)\n\n####\n\n\u003C\u002Fdetails>\n\n## 📦 安装\n\n> \\[!IMPORTANT]\\\n> 本包仅支持 ESM 格式（https:\u002F\u002Fgist.github.com\u002Fsindresorhus\u002Fa39789f98801d908bbc7ff3ecc99d99c）。\n\n要安装 Lobe UI，请运行以下命令：\n\n[![][bun-shield]][bun-link]\n\n```bash\n$ bun add @lobehub\u002Fui\n```\n\n### 使用 NextJS 编译\n\n> \\[!NOTE]\\\n> 为了与 Next.js 页面路由的 SSR 正确配合，请在 `next.config.js` 中添加 `transpilePackages: ['@lobehub\u002Fui']`。例如：\n\n```js\n\u002F\u002F next.config.js\nconst nextConfig = {\n  \u002F\u002F ...其他配置\n\n  transpilePackages: ['@lobehub\u002Fui'],\n};\n```\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## 🤯 使用\n\n> \\[!NOTE]\\\n> LobeUI 组件基于 [Antd](https:\u002F\u002Fant.design\u002Fcomponents\u002Foverview\u002F) 开发，完全兼容 Antd 组件，\n> 建议使用 [antd-style](https:\u002F\u002Fant-design.github.io\u002Fantd-style\u002F) 作为默认的 css-in-js 样式解决方案。\n\n```tsx\nimport { ThemeProvider, Button } from '@lobehub\u002Fui';\nimport { Button } from 'antd';\n\nexport default () => (\n  \u003CThemeProvider>\n    \u003CButton>Hello AIGC\u003C\u002FButton>\n  \u003C\u002FThemeProvider>\n);\n```\n\n### I18n\n\n使用带有资源包的 i18n 提供程序。组件的 `texts` 属性始终具有最高优先级。\n\n```tsx\nimport { I18nProvider } from '@lobehub\u002Fui';\nimport formMessages from '@lobehub\u002Fui\u002Fi18n\u002Fresources\u002Fform';\nimport hotkeyMessages from '@lobehub\u002Fui\u002Fi18n\u002Fresources\u002Fhotkey;\n\n\u003CI18nProvider resources={[formMessages, hotkeyMessages]}>\n  \u003CApp \u002F>\n\u003C\u002FI18nProvider>;\n```\n\n### ConfigProvider (Motion)\n\n必须通过 `ConfigProvider` 传递一个 motion 组件。\n如果您的应用使用 `LazyMotion`，请传递 `m`：\n\n```tsx\nimport { ConfigProvider } from '@lobehub\u002Fui';\nimport { motion } from 'motion\u002Freact';\n\nexport default () => (\n  \u003CConfigProvider motion={motion}>\n    \u003CApp \u002F>\n  \u003C\u002FConfigProvider>\n);\n```\n\n如果您的应用使用 `LazyMotion`：\n\n```tsx\nimport { ConfigProvider } from '@lobehub\u002Fui';\nimport { LazyMotion、domAnimation } from 'motion\u002Freact';\nimport * as m from 'motion\u002Freact-m';\n\nexport default () => (\n  \u003CLazyMotion features={domAnimation}>\n    \u003CConfigProvider motion={m}>\n      \u003CApp \u002F>\n    \u003C\u002FConfigProvider>\n  \u003C\u002FLazyMotion>\n);\n```\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## ⌨️ 本地开发\n\n您可以使用 Github Codespaces 进行在线开发：\n\n[![][codespaces-shield]][codespaces-link]\n\n或者克隆代码进行本地开发：\n\n```bash\n$ git clone https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui.git\n$ cd lobe-ui\n$ bun install\n$ bun start\n```\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## 🤝 贡献\n\n我们非常欢迎各种形式的贡献。如果您有兴趣参与代码贡献，请随时查看我们的 GitHub [Issues][github-issues-link]，加入其中，向我们展示您的实力。\n\n[![][pr-welcome-shield]][pr-welcome-link]\n\n[![][contributors-contrib]][contributors-link]\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## 🩷 赞助\n\n每一份支持都至关重要，您的一次性捐赠将在我们的支持星空中熠熠生辉！您就像一颗流星，在我们的旅程中划出一道耀眼的光芒。感谢您对我们的信任——您的慷慨正引领我们一步步实现使命，每一次闪耀都是前进的动力。\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Flobehub\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fgithub.com\u002Flobehub\u002F.github\u002Fblob\u002Fmain\u002Fstatic\u002Fsponsor-dark.png?raw=true\">\n    \u003Cimg  src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flobehub_lobe-ui_readme_bd98c51189b2.png\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n## 🔗 链接\n\n### 更多产品\n\n- **[🤯 Lobe Chat](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-chat)** - 一个 open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT\u002FLLM web application.\n- **[🅰️ Lobe Theme](https:\u002F\u002Fgithub.com\u002Flobehub\u002Fsd-webui-lobe-theme)** - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.\n- **[🧸 Lobe Vidol](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-vidol)** - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.\n\n### 设计资源\n\n- **[🍭 Lobe UI](https:\u002F\u002Fui.lobehub.com)** - An open-source UI component library for building AIGC web apps.\n- **[🥨 Lobe Icons](https:\u002F\u002Flobehub.com\u002Ficons)** - Popular AI \u002F LLM Model Brand SVG Logo and Icon Collection.\n- **[📊 Lobe Charts](https:\u002F\u002Fcharts.lobehub.com)** - React modern charts components built on recharts\n\n### 开发资源\n\n- **[🎤 Lobe TTS](https:\u002F\u002Ftts.lobehub.com)** - 一款高质量且可靠的 TTS\u002FSTT 库，适用于服务器端和浏览器端\n- **[🌏 Lobe i18n](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-cli-toolbox\u002Fblob\u002Fmaster\u002Fpackages\u002Flobe-i18n)** - 用于国际化（i18n）翻译流程的自动化 AI 工具。\n\n[更多资源](https:\u002F\u002Flobehub.com\u002Fresources)\n\n\u003Cdiv align=\"right\">\n\n[![][back-to-top]](#readme-top)\n\n\u003C\u002Fdiv>\n\n---\n\n\u003Cdetails>\u003Csummary>\u003Ch4>📝 许可证\u003C\u002Fh4>\u003C\u002Fsummary>\n\n[![][fossa-license-shield]][fossa-license-link]\n\n\u003C\u002Fdetails>\n\n版权所有 © 2023 [LobeHub][profile-link]。\u003Cbr \u002F>\n本项目采用 [MIT](.\u002FLICENSE) 许可证。\n\n\u003C!-- 链接组 -->\n\n[back-to-top]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-BACK_TO_TOP-151515?style=flat-square\n[banner]: https:\u002F\u002Fgithub-production-user-asset-6210df.s3.amazonaws.com\u002F17870709\u002F268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png\n[bun-link]: https:\u002F\u002Fbun.sh\n[bun-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-speedup%20with%20bun-black?logo=bun&style=for-the-badge\n[codespaces-link]: https:\u002F\u002Fcodespaces.new\u002Flobehub\u002Flobe-ui\n[codespaces-shield]: https:\u002F\u002Fgithub.com\u002Fcodespaces\u002Fbadge.svg\n[contributors-contrib]: https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=lobehub\u002Flobe-ui\n[contributors-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fgraphs\u002Fcontributors\n[discord-link]: https:\u002F\u002Fdiscord.gg\u002FAYFPHvv2jT\n[discord-shield]: https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square\n[fossa-license-link]: https:\u002F\u002Fapp.fossa.com\u002Fprojects\u002Fgit%2Bgithub.com%2Flobehub%2Flobe-ui\n[fossa-license-shield]: https:\u002F\u002Fapp.fossa.com\u002Fapi\u002Fprojects\u002Fgit%2Bgithub.com%2Flobehub%2Flobe-ui.svg?type=large\n[github-action-release-link]: https:\u002F\u002Fgithub.com\u002Factions\u002Fworkflows\u002Flobehub\u002Flobe-ui\u002Frelease.yml\n[github-action-release-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Flobehub\u002Flobe-ui\u002Frelease.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square\n[github-action-test-link]: https:\u002F\u002Fgithub.com\u002Factions\u002Fworkflows\u002Flobehub\u002Flobe-ui\u002Ftest.yml\n[github-action-test-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Flobehub\u002Flobe-ui\u002Ftest.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square\n[github-contributors-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fgraphs\u002Fcontributors\n[github-contributors-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Flobehub\u002Flobe-ui?color=c4f042&labelColor=black&style=flat-square\n[github-forks-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fnetwork\u002Fmembers\n[github-forks-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Flobehub\u002Flobe-ui?color=8ae8ff&labelColor=black&style=flat-square\n[github-issues-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\n[github-issues-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Flobehub\u002Flobe-ui?color=ff80eb&labelColor=black&style=flat-square\n[github-license-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fblob\u002Fmaster\u002FLICENSE\n[github-license-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Flobehub\u002Flobe-ui?color=white&labelColor=black&style=flat-square\n[github-releasedate-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Freleases\n[github-releasedate-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Frelease-date\u002Flobehub\u002Flobe-ui?labelColor=black&style=flat-square\n[github-stars-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fnetwork\u002Fstargazers\n[github-stars-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Flobehub\u002Flobe-ui?color=ffcb47&labelColor=black&style=flat-square\n[npm-downloads-link]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@lobehub\u002Fui\n[npm-downloads-shield]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@lobehub\u002Fui?labelColor=black&style=flat-square\n[npm-release-link]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@lobehub\u002Fui\n[npm-release-shield]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@lobehub\u002Fui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square\n[pr-welcome-link]: https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-chat\u002Fpulls\n[pr-welcome-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge\n[profile-link]: https:\u002F\u002Fgithub.com\u002Flobehub\n[vercel-link]: https:\u002F\u002Fui.lobehub.com\n[vercel-shield]: https:\u002F\u002Fimg.shields.io\u002Fwebsite?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com","# Lobe UI 快速上手指南\n\nLobe UI 是一个专为构建 **AIGC Web 应用** 设计的开源 UI 组件库。它基于 Ant Design 开发，完全兼容 Antd 组件，并推荐搭配 `antd-style` 使用。\n\n## 环境准备\n\n- **包管理器**：推荐使用 [Bun](https:\u002F\u002Fbun.sh\u002F) 以获得最佳性能（也支持 npm\u002Fyarn\u002Fpnpm）。\n- **模块系统**：本包仅支持 **ESM** (ECMAScript Modules)，请确保你的项目配置为 ESM 模式。\n- **框架兼容性**：\n  - 通用 React 项目可直接使用。\n  - **Next.js 用户注意**：若使用 Page Router 且需支持 SSR，必须在 `next.config.js` 中配置转译。\n\n## 安装步骤\n\n使用 Bun 安装（推荐）：\n\n```bash\nbun add @lobehub\u002Fui\n```\n\n若使用 Next.js，请在 `next.config.js` 中添加以下配置以确保 SSR 正常工作：\n\n```js\n\u002F\u002F next.config.js\nconst nextConfig = {\n  \u002F\u002F ...其他配置\n\n  transpilePackages: ['@lobehub\u002Fui'],\n};\n\nmodule.exports = nextConfig;\n```\n\n## 基本使用\n\n### 1. 基础组件渲染\n\nLobe UI 提供了 `ThemeProvider` 来包裹应用。以下是结合 Antd 按钮的最简示例：\n\n```tsx\nimport { ThemeProvider, Button } from '@lobehub\u002Fui';\n\u002F\u002F 也可以直接使用 antd 的组件，它们是完全兼容的\nimport { Button as AntButton } from 'antd';\n\nexport default () => (\n  \u003CThemeProvider>\n    \u003CButton>Hello AIGC\u003C\u002FButton>\n  \u003C\u002FThemeProvider>\n);\n```\n\n### 2. 配置动画 (Motion)\n\n如果需要使用动效，必须通过 `ConfigProvider` 传入 motion 实例。\n\n**方案 A：标准模式**\n\n```tsx\nimport { ConfigProvider } from '@lobehub\u002Fui';\nimport { motion } from 'motion\u002Freact';\n\nexport default () => (\n  \u003CConfigProvider motion={motion}>\n    {\u002F* 你的应用内容 *\u002F}\n  \u003C\u002FConfigProvider>\n);\n```\n\n**方案 B：配合 LazyMotion (按需加载)**\n\n```tsx\nimport { ConfigProvider } from '@lobehub\u002Fui';\nimport { LazyMotion, domAnimation } from 'motion\u002Freact';\nimport * as m from 'motion\u002Freact-m';\n\nexport default () => (\n  \u003CLazyMotion features={domAnimation}>\n    \u003CConfigProvider motion={m}>\n      {\u002F* 你的应用内容 *\u002F}\n    \u003C\u002FConfigProvider>\n  \u003C\u002FLazyMotion>\n);\n```\n\n### 3. 国际化 (I18n)\n\n使用 `I18nProvider` 加载资源包。注意：组件自身的 `texts` 属性优先级高于全局配置。\n\n```tsx\nimport { I18nProvider } from '@lobehub\u002Fui';\nimport formMessages from '@lobehub\u002Fui\u002Fi18n\u002Fresources\u002Fform';\nimport hotkeyMessages from '@lobehub\u002Fui\u002Fi18n\u002Fresources\u002Fhotkey';\n\nexport default () => (\n  \u003CI18nProvider resources={[formMessages, hotkeyMessages]}>\n    {\u002F* 你的应用内容 *\u002F}\n  \u003C\u002FI18nProvider>\n);\n```","一家初创团队正在紧急开发一款面向全球用户的 AI 绘画生成平台，需要在两周内完成从原型到上线的完整前端构建。\n\n### 没有 lobe-ui 时\n- **重复造轮子**：开发者需手动封装大量基础组件（如对话气泡、模型选择器），耗费大量时间处理样式细节，导致核心业务逻辑开发滞后。\n- **动效实现困难**：为了体现 AIGC 产品的科技感，需要复杂的加载动画和过渡效果，但原生 CSS 或普通 UI 库难以快速实现流畅的 Motion 交互。\n- **国际化适配繁琐**：面对海外用户，每个组件内的硬编码文本都需要单独提取翻译，缺乏统一的资源包管理，多语言切换极易出错。\n- **风格不统一**：不同成员开发的页面模块风格割裂，缺乏专为 AI 场景设计的视觉规范，最终产品显得拼凑感强，缺乏专业度。\n\n### 使用 lobe-ui 后\n- **开箱即用**：直接调用专为 AIGC 设计的预制组件（如 Prompt 输入框、结果展示卡片），基于 Antd 深度定制，团队将开发效率提升了 50% 以上。\n- **丝滑动效集成**：通过 `ConfigProvider` 一键接入 `motion` 动画库，无需编写复杂代码即可拥有流畅的生成进度条和页面转场，显著提升用户体验。\n- **内置多语言支持**：利用 `I18nProvider` 加载官方提供的资源包，表单、快捷键等常用文案自动适配多国语言，全球化部署变得轻而易举。\n- **视觉高度统一**：整套组件库自带符合 AI 产品调性的现代设计风格，确保全站界面美观一致，让产品看起来更像成熟的商业级应用。\n\nlobe-ui 通过提供专为 AIGC 场景打造的标准化组件与动效方案，帮助团队在极短时间内构建出兼具高性能与卓越体验的 Web 应用。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flobehub_lobe-ui_fc94dd45.png","lobehub","LobeHub","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Flobehub_18745af8.png","Agent teammates that grow with you",null,"hello@lobehub.com","https:\u002F\u002Flobehub.com","https:\u002F\u002Fgithub.com\u002Flobehub",[81,85,89,92],{"name":82,"color":83,"percentage":84},"TypeScript","#3178c6",99.8,{"name":86,"color":87,"percentage":88},"JavaScript","#f1e05a",0.1,{"name":90,"color":91,"percentage":88},"CSS","#663399",{"name":93,"color":94,"percentage":95},"Shell","#89e051",0,1905,238,"2026-04-09T05:52:29","MIT","未说明",{"notes":102,"python":100,"dependencies":103},"这是一个基于 React 的前端 UI 组件库，仅支持 ESM 模块。若与 Next.js (Page Router SSR) 配合使用，需在 next.config.js 中配置 transpilePackages。推荐使用 bun 进行包管理和开发，本地开发需克隆仓库后执行 bun install 和 bun start。",[104,105,106,107,108],"@lobehub\u002Fui","antd","antd-style","motion\u002Freact","next",[35,15],[111,112,113,114,115,72,116,117,105,118,119],"react","design-system","ui","ui-components","ui-kit","aigc","chatbot","typescript","dumi","2026-03-27T02:49:30.150509","2026-04-09T23:50:18.786054",[123,128,133,138,143,148],{"id":124,"question_zh":125,"answer_zh":126,"source_url":127},26877,"遇到 'Module not found: Can't resolve @splinetool\u002Fruntime' 错误如何解决？","这是一个依赖缺失问题。通常需要在项目中手动安装缺失的运行时依赖。请运行以下命令：\nnpm install @splinetool\u002Fruntime\n或\nyarn add @splinetool\u002Fruntime\n安装后重启开发服务器即可解决。","https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F79",{"id":129,"question_zh":130,"answer_zh":131,"source_url":132},26878,"CodeEditor 组件在选中内容时出现重影且行不对齐怎么办？","该问题已在最新版本中修复。如果您仍在使用旧版本并遇到此问题，请升级 @lobehub\u002Fui 到最新版本。维护者已确认修复（fixed），官网示例已无法复现该问题。","https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F200",{"id":134,"question_zh":135,"answer_zh":136,"source_url":137},26879,"如何配置使用非中国 CDN（如 jsDelivr）以避免网络超时？","可以通过 ConfigProvider 组件自定义 CDN 配置。默认提供 'aliyun' 和 'unpkg' 两种代理，也可设置为 'custom' 并使用自定义函数。示例代码如下：\n\nimport { ConfigProvider } from '@lobehub\u002Fui';\n\n\u003CConfigProvider config={{\n  proxy: 'custom',\n  customCdnFn: (e) => `https:\u002F\u002Fyour-cdn-domain\u002F${e.pkg}\u002F${e.version}\u002F${e.path}`\n}}>\n  {\u002F* 您的应用内容 *\u002F}\n\u003C\u002FConfigProvider>\n\n将 'your-cdn-domain' 替换为您可用的 CDN 地址即可。","https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F39",{"id":139,"question_zh":140,"answer_zh":141,"source_url":142},26880,"为什么 Markdown 强调语法（粗体\u002F斜体）渲染异常或被自动添加空格？","库内部曾尝试修补 Markdown 强调语法以适配 CJK 环境，但这可能导致不符合 CommonMark 规范的渲染问题（如代码块内强调失效、多余空格等）。建议遵循标准 CommonMark 规范编写 Markdown，避免在非标准位置使用强调符号。如果必须自定义行为，可通过注入提示词引导 LLM 输出符合规范的 Markdown，或等待库后续提供更灵活的兼容配置。","https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F392",{"id":144,"question_zh":145,"answer_zh":146,"source_url":147},26881,"ChatItem 组件中长文本换行失效，内容显示在一行如何处理？","该问题是由于缺少 CSS 样式 white-space: pre-wrap 导致的。在较新版本中已修复。如果使用的是旧版本，可手动在 ChatItem 的样式文件中添加：\nwhite-space: pre-wrap;\n或者直接升级 @lobehub\u002Fui 到最新版本，默认已支持单换行和多换行的正确渲染。","https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F81",{"id":149,"question_zh":150,"answer_zh":151,"source_url":152},26882,"在 React 19 项目中使用 lobe-ui 出现 peer dependency warning 怎么办？","这是因为部分依赖（如 @emoji-mart\u002Freact）尚未正式支持 React 19。您可以暂时忽略该警告，通常不影响运行。若需消除警告，可在 package.json 中添加 overrides（npm）或 resolutions（yarn）强制指定版本，例如：\n\n\"overrides\": {\n  \"@emoji-mart\u002Freact\": {\n    \"react\": \"$react\"\n  }\n}\n\n或者等待依赖库更新以正式支持 React 19。","https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F496",[154,159,164,169,174,179,184,189,194,199,204,209,214,219,224,229,234,239,244,249],{"id":155,"version":156,"summary_zh":157,"released_at":158},172142,"v5.6.5","## [5.6.5](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.6.4...v5.6.5) (2026-04-07)\n\n\n### 🐛 修复 bug\n\n* **styles**: 从 Popover 和 Menu 样式中移除 inset box-shadow ([57756c8](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F57756c8))\n\n\n\n\n\n","2026-04-07T14:58:15",{"id":160,"version":161,"summary_zh":162,"released_at":163},172143,"v5.6.4","## [5.6.4](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.6.3...v5.6.4) (2026-04-02)\n\n\n### 🐛 修复 bug\n\n* 更新依赖，关闭 [#497](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F497) ([5e4ce39](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F5e4ce39))\n\n\n\n\n\n","2026-04-02T06:16:04",{"id":165,"version":166,"summary_zh":167,"released_at":168},172144,"v5.6.3","## [5.6.3](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.6.2...v5.6.3) (2026-03-31)\n\n\n### 🐛 修复 bug\n\n* **toast**: 改进仅包含描述的 toast 布局 ([4832ef6](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F4832ef6))\n\n\n\n\n\n","2026-03-31T14:45:17",{"id":170,"version":171,"summary_zh":172,"released_at":173},172145,"v5.6.2","## [5.6.2](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.6.1...v5.6.2) (2026-03-27)\n\n\n### ⚡ 性能优化\n\n* **markdown**: 添加流式渲染性能分析器，并减少空闲时的流式工作 ([5f9bb2c](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F5f9bb2c))\n\n\n\n\n\n","2026-03-27T14:12:05",{"id":175,"version":176,"summary_zh":177,"released_at":178},172146,"v5.6.1","## [5.6.1](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.6.0...v5.6.1) (2026-03-27)\n\n\n### 🐛 修复了 bug\n\n* **toast**: 恢复 ToastHost，并将其整合到 base-ui 中 ([b82d8c2](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002Fb82d8c2))\n\n\n\n\n\n","2026-03-27T12:17:31",{"id":180,"version":181,"summary_zh":182,"released_at":183},172147,"v5.6.0","# [5.6.0](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.5.3...v5.6.0) (2026-03-26)\n\n\n### ✨ 功能\n\n* 为 Mermaid SVG 添加后处理，并附带测试 ([33e9392](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F33e9392))\n\n\n\n\n\n","2026-03-26T16:10:41",{"id":185,"version":186,"summary_zh":187,"released_at":188},172148,"v5.5.3","## [5.5.3](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.5.2...v5.5.3) (2026-03-26)\n\n\n### 🎫 杂项\n\n* 修复类型 ([dc90517](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002Fdc90517))\n\n\n### 💄 样式\n\n* 添加已移除的 lucide v1 图标 ([10bd3b1](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F10bd3b1))\n\n\n\n\n\n","2026-03-26T07:37:44",{"id":190,"version":191,"summary_zh":192,"released_at":193},172149,"v5.5.2","## [5.5.2](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.5.1...v5.5.2) (2026-03-18)\n\n\n### 🐛 修复了 bug\n\n* **样式**: 禁用左右下拉菜单的动画样式 ([e3579f1](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002Fe3579f1))\n\n\n\n\n\n","2026-03-18T07:18:18",{"id":195,"version":196,"summary_zh":197,"released_at":198},172150,"v5.5.1","## [5.5.1](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.5.0...v5.5.1) (2026-03-13)\n\n\n### 🐛 修复了 bug\n\n* 解决 Tooltip 和 Popover 的悬停冲突，关闭 [#488](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F488) ([28eea9f](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F28eea9f))\n\n\n\n\n\n","2026-03-13T12:25:50",{"id":200,"version":201,"summary_zh":202,"released_at":203},172151,"v5.5.0","# [5.5.0](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.4.0...v5.5.0) (2026-03-10)\n\n\n### ♻ 代码重构\n\n* 将 Popover 移至 base-ui，并从 Lobe UI 中重新导出，关闭 [#486](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F486) ([1c128cc](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F1c128cc))\n\n\n### ✨ 新特性\n\n* 添加 BrainOff 和 Think 图标 ([3ff80a2](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F3ff80a2))\n* 添加 Channel 图标 ([992293e](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F992293e))\n\n\n\n\n\n","2026-03-10T15:58:59",{"id":205,"version":206,"summary_zh":207,"released_at":208},172152,"v5.4.0","# [5.4.0](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.3.0...v5.4.0) (2026-03-05)\n\n\n### ✨ Features\n\n* **hotkey-input**: Add clear button support & improve markdown streaming, closes [#483](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F483) ([8570acc](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F8570acc))\n\n\n\n\n\n","2026-03-05T12:25:32",{"id":210,"version":211,"summary_zh":212,"released_at":213},172153,"v5.3.0","# [5.3.0](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.2.2...v5.3.0) (2026-03-04)\n\n\n### ✨ Features\n\n* Add Image copy and download, closes [#482](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F482) ([58351ff](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F58351ff))\n\n\n\n\n\n","2026-03-04T09:50:49",{"id":215,"version":216,"summary_zh":217,"released_at":218},172154,"v5.2.2","## [5.2.2](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.2.1...v5.2.2) (2026-03-03)\n\n\n### 🐛 Bug Fixes\n\n* **context-menu**: Remove entrance animation for instant appearance ([3354002](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F3354002))\n\n\n\n\n\n","2026-03-03T17:36:19",{"id":220,"version":221,"summary_zh":222,"released_at":223},172155,"v5.2.1","## [5.2.1](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.2.0...v5.2.1) (2026-03-03)\n\n\n### 🐛 Bug Fixes\n\n* Refine Modal demos and styles ([d7f6058](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002Fd7f6058))\n\n\n\n\n\n","2026-03-03T10:39:35",{"id":225,"version":226,"summary_zh":227,"released_at":228},172156,"v5.2.0","# [5.2.0](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.1.1...v5.2.0) (2026-03-03)\n\n\n### ✨ Features\n\n* **markdown**: Implement streaming animation for markdown blocks, closes [#475](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fissues\u002F475) ([2b3d230](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F2b3d230))\n\n\n\n\n\n","2026-03-03T09:48:55",{"id":230,"version":231,"summary_zh":232,"released_at":233},172157,"v5.1.1","## [5.1.1](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.1.0...v5.1.1) (2026-03-03)\n\n\n### 🐛 Bug Fixes\n\n* Use color-scheme-aware backdrop color for Modal ([01e46c0](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F01e46c0))\n\n\n\n\n\n","2026-03-03T09:27:55",{"id":235,"version":236,"summary_zh":237,"released_at":238},172158,"v5.1.0","# [5.1.0](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.0.1...v5.1.0) (2026-03-03)\n\n\n### ✨ Features\n\n* Add base-ui Modal component with imperative and declarative usage ([5186720](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F5186720))\n\n\n\n\n\n","2026-03-03T08:35:50",{"id":240,"version":241,"summary_zh":242,"released_at":243},172159,"v5.0.1","## [5.0.1](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv5.0.0...v5.0.1) (2026-03-03)\n\n\n### 🐛 Bug Fixes\n\n* Update dumi-theme-lobehub and @lobehub\u002Ficons to major versions ([b5e20ac](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002Fb5e20ac))\n\n\n\n\n\n","2026-03-03T06:11:04",{"id":245,"version":246,"summary_zh":247,"released_at":248},172160,"v5.0.0","# [5.0.0](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv4.38.4...v5.0.0) (2026-03-02)\n\n\n### 🎫 Chores\n\n* **release**: Force major release ([db4c10d](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002Fdb4c10d))\n* Patch conventional-changelog-gitmoji-config to fix item.title undefined ([2916793](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F2916793))\n* Trigger 5.0 release ([b2b5ee2](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002Fb2b5ee2))\n\n\n### 💥 BREAKING CHANGES\n\n* LobeSelect\u002FLobeSwitch removed from main entry. Use `@lobehub\u002Fui\u002Fbase-ui` instead.\n\n* refactor(base-ui): move ContextMenu\u002FDropdownMenu\u002FScrollArea\u002FToast impl into base-ui, re-export from original paths\n\n\n\n\n\n","2026-03-02T10:01:55",{"id":250,"version":251,"summary_zh":252,"released_at":253},172161,"v4.38.4","## [4.38.4](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcompare\u002Fv4.38.3...v4.38.4) (2026-02-15)\n\n\n### ♻ Code Refactoring\n\n* **styles**: Extract fadeIn animation to animations.ts ([f6308aa](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002Ff6308aa))\n\n\n### 💄 Styles\n\n* Revert stream animation to fade-in ([0a0ea88](https:\u002F\u002Fgithub.com\u002Flobehub\u002Flobe-ui\u002Fcommit\u002F0a0ea88))\n\n\n\n\n\n","2026-02-15T09:11:24"]