[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10743":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":39,"discoverSource":40},10743,"lobe-ui","lobehub\u002Flobe-ui","lobehub","🍭  Lobe UI - an open-source UI component library for building AIGC web apps","https:\u002F\u002Fui.lobehub.com",null,"TypeScript",2041,251,11,23,0,2,9,63,10,29.2,"MIT License",false,"master",[26,27,28,29,30,7,31,32,33,34,35],"aigc","antd","chatbot","design-system","dumi","react","typescript","ui","ui-components","ui-kit","2026-06-12 02:02:26","\u003Ca name=\"readme-top\">\u003C\u002Fa>\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg height=\"120\" src=\"https:\u002F\u002Fregistry.npmmirror.com\u002F@lobehub\u002Fassets-logo\u002F1.0.0\u002Ffiles\u002Fassets\u002Flogo-3d.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\u002Fregistry.npmmirror.com\u002F@lobehub\u002Fassets-emoji\u002F1.3.0\u002Ffiles\u002Fassets\u002Flollipop.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\u002Fgithub.com\u002Flobehub\u002F.github\u002Fblob\u002Fmain\u002Fstatic\u002Fsponsor-light.png?raw=true\">\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","Lobe UI 是一个开源的UI组件库，专为构建AIGC（人工智能生成内容）网页应用而设计。它基于Ant Design开发，提供了丰富的React组件，并且支持TypeScript，使得开发者能够轻松地创建美观且功能强大的AIGC应用程序。Lobe UI 引入了`ThemeProvider`等特性来增强样式管理能力，并通过集成i18n支持实现国际化。此外，该项目还提供了详尽的文档和示例代码以帮助快速上手。非常适合需要快速搭建具备良好用户体验的AIGC平台或工具的应用场景。","2026-06-11 03:29:58","top_topic"]