{"id":13454315,"url":"https://github.com/lobehub/lobe-ui","last_synced_at":"2026-05-30T18:00:51.139Z","repository":{"id":167804406,"uuid":"643435168","full_name":"lobehub/lobe-ui","owner":"lobehub","description":"🍭  Lobe UI - an open-source UI component library for building AIGC web apps","archived":false,"fork":false,"pushed_at":"2026-05-29T15:55:44.000Z","size":6448,"stargazers_count":2022,"open_issues_count":61,"forks_count":249,"subscribers_count":11,"default_branch":"master","last_synced_at":"2026-05-29T17:22:39.366Z","etag":null,"topics":["aigc","antd","chatbot","design-system","dumi","lobehub","react","typescript","ui","ui-components","ui-kit"],"latest_commit_sha":null,"homepage":"https://ui.lobehub.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lobehub.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"lobehub","open_collective":"lobehub"}},"created_at":"2023-05-21T06:32:13.000Z","updated_at":"2026-05-29T09:40:46.000Z","dependencies_parsed_at":"2026-02-03T12:02:11.905Z","dependency_job_id":null,"html_url":"https://github.com/lobehub/lobe-ui","commit_stats":{"total_commits":1139,"total_committers":31,"mean_commits":36.74193548387097,"dds":0.6022827041264267,"last_synced_commit":"df689efbf037eb32f4bb30b28e6dc0d5dc7ff313"},"previous_names":["lobehub/lobe-ui"],"tags_count":873,"template":false,"template_full_name":null,"purl":"pkg:github/lobehub/lobe-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lobehub%2Flobe-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lobehub%2Flobe-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lobehub%2Flobe-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lobehub%2Flobe-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lobehub","download_url":"https://codeload.github.com/lobehub/lobe-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lobehub%2Flobe-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33703065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-30T02:00:06.278Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aigc","antd","chatbot","design-system","dumi","lobehub","react","typescript","ui","ui-components","ui-kit"],"created_at":"2024-07-31T08:00:52.985Z","updated_at":"2026-05-30T18:00:51.100Z","avatar_url":"https://github.com/lobehub.png","language":"TypeScript","funding_links":["https://github.com/sponsors/lobehub","https://opencollective.com/lobehub"],"categories":["chatbot","TypeScript","🌐 Web Development - Frontend"],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg height=\"120\" src=\"https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp\"\u003e\n\u003cimg height=\"120\" src=\"https://github.com/user-attachments/assets/bb48d7f1-460a-4dae-a632-66d1a7ff8f70\"\u003e\n\u003cimg height=\"120\" src=\"https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/lollipop.webp\"\u003e\n\n\u003ch1\u003eLobe UI\u003c/h1\u003e\n\nLobe UI is an open-source UI component library for building _AIGC_ web apps\n\n[Documents](https://ui.lobehub.com) · [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]\n\n\u003c!-- SHIELD GROUP --\u003e\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/\u003e\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/div\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eTable of contents\u003c/kbd\u003e\u003c/summary\u003e\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/details\u003e\n\n## 📦 Installation\n\n\u003e \\[!IMPORTANT]\\\n\u003e This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).\n\nTo install Lobe UI, run the following command:\n\n[![][bun-shield]][bun-link]\n\n```bash\n$ bun add @lobehub/ui\n```\n\n### Compile with NextJS\n\n\u003e \\[!NOTE]\\\n\u003e By work correct with nextjs page router SSR, add `transpilePackages: ['@lobehub/ui']` to `next.config.js`. For example:\n\n```js\n// next.config.js\nconst nextConfig = {\n  // ...other config\n\n  transpilePackages: ['@lobehub/ui'],\n};\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\n\n## 🤯 Usage\n\n\u003e \\[!NOTE]\\\n\u003e The LobeUI components are developed based on [Antd](https://ant.design/components/overview/), fully compatible with Antd components,\n\u003e and it is recommended to use [antd-style](https://ant-design.github.io/antd-style/) as the default css-in-js styling solution.\n\n```tsx\nimport { ThemeProvider, Button } from '@lobehub/ui';\nimport { Button } from 'antd';\n\nexport default () =\u003e (\n  \u003cThemeProvider\u003e\n    \u003cButton\u003eHello AIGC\u003c/Button\u003e\n  \u003c/ThemeProvider\u003e\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/ui';\nimport formMessages from '@lobehub/ui/i18n/resources/form';\nimport hotkeyMessages from '@lobehub/ui/i18n/resources/hotkey';\n\n\u003cI18nProvider resources={[formMessages, hotkeyMessages]}\u003e\n  \u003cApp /\u003e\n\u003c/I18nProvider\u003e;\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/ui';\nimport { motion } from 'motion/react';\n\nexport default () =\u003e (\n  \u003cConfigProvider motion={motion}\u003e\n    \u003cApp /\u003e\n  \u003c/ConfigProvider\u003e\n);\n```\n\nIf your app uses `LazyMotion`:\n\n```tsx\nimport { ConfigProvider } from '@lobehub/ui';\nimport { LazyMotion, domAnimation } from 'motion/react';\nimport * as m from 'motion/react-m';\n\nexport default () =\u003e (\n  \u003cLazyMotion features={domAnimation}\u003e\n    \u003cConfigProvider motion={m}\u003e\n      \u003cApp /\u003e\n    \u003c/ConfigProvider\u003e\n  \u003c/LazyMotion\u003e\n);\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\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://github.com/lobehub/lobe-ui.git\n$ cd lobe-ui\n$ bun install\n$ bun start\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\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\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\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://opencollective.com/lobehub\" target=\"_blank\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true\"\u003e\n    \u003cimg  src=\"https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n\u003cdiv align=\"right\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\n\n## 🔗 Links\n\n### More Products\n\n- **[🤯 Lobe Chat](https://github.com/lobehub/lobe-chat)** - An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.\n- **[🅰️ Lobe Theme](https://github.com/lobehub/sd-webui-lobe-theme)** - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.\n- **[🧸 Lobe Vidol](https://github.com/lobehub/lobe-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://ui.lobehub.com)** - An open-source UI component library for building AIGC web apps.\n- **[🥨 Lobe Icons](https://lobehub.com/icons)** - Popular AI / LLM Model Brand SVG Logo and Icon Collection.\n- **[📊 Lobe Charts](https://charts.lobehub.com)** - React modern charts components built on recharts\n\n### Development Resources\n\n- **[🎤 Lobe TTS](https://tts.lobehub.com)** - A high-quality \u0026 reliable TTS/STT library for Server and Browser\n- **[🌏 Lobe i18n](https://github.com/lobehub/lobe-cli-toolbox/blob/master/packages/lobe-i18n)** - Automation ai tool for the i18n (internationalization) translation process.\n\n[More Resources](https://lobehub.com/resources)\n\n\u003cdiv align=\"right\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\n\n---\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch4\u003e📝 License\u003c/h4\u003e\u003c/summary\u003e\n\n[![][fossa-license-shield]][fossa-license-link]\n\n\u003c/details\u003e\n\nCopyright © 2023 [LobeHub][profile-link]. \u003cbr /\u003e\nThis project is [MIT](./LICENSE) licensed.\n\n\u003c!-- LINK GROUP --\u003e\n\n[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square\n[banner]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png\n[bun-link]: https://bun.sh\n[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun\u0026style=for-the-badge\n[codespaces-link]: https://codespaces.new/lobehub/lobe-ui\n[codespaces-shield]: https://github.com/codespaces/badge.svg\n[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-ui\n[contributors-link]: https://github.com/lobehub/lobe-ui/graphs/contributors\n[discord-link]: https://discord.gg/AYFPHvv2jT\n[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2\u0026label=discord\u0026labelColor=black\u0026logo=discord\u0026logoColor=white\u0026style=flat-square\n[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-ui\n[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-ui.svg?type=large\n[github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-ui/release.yml\n[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-ui/release.yml?label=release\u0026labelColor=black\u0026logo=githubactions\u0026logoColor=white\u0026style=flat-square\n[github-action-test-link]: https://github.com/actions/workflows/lobehub/lobe-ui/test.yml\n[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-ui/test.yml?label=test\u0026labelColor=black\u0026logo=githubactions\u0026logoColor=white\u0026style=flat-square\n[github-contributors-link]: https://github.com/lobehub/lobe-ui/graphs/contributors\n[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-ui?color=c4f042\u0026labelColor=black\u0026style=flat-square\n[github-forks-link]: https://github.com/lobehub/lobe-ui/network/members\n[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-ui?color=8ae8ff\u0026labelColor=black\u0026style=flat-square\n[github-issues-link]: https://github.com/lobehub/lobe-ui/issues\n[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-ui?color=ff80eb\u0026labelColor=black\u0026style=flat-square\n[github-license-link]: https://github.com/lobehub/lobe-ui/blob/master/LICENSE\n[github-license-shield]: https://img.shields.io/github/license/lobehub/lobe-ui?color=white\u0026labelColor=black\u0026style=flat-square\n[github-releasedate-link]: https://github.com/lobehub/lobe-ui/releases\n[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-ui?labelColor=black\u0026style=flat-square\n[github-stars-link]: https://github.com/lobehub/lobe-ui/network/stargazers\n[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-ui?color=ffcb47\u0026labelColor=black\u0026style=flat-square\n[npm-downloads-link]: https://www.npmjs.com/package/@lobehub/ui\n[npm-downloads-shield]: https://img.shields.io/npm/dt/@lobehub/ui?labelColor=black\u0026style=flat-square\n[npm-release-link]: https://www.npmjs.com/package/@lobehub/ui\n[npm-release-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff\u0026labelColor=black\u0026logo=npm\u0026logoColor=white\u0026style=flat-square\n[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls\n[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black\u0026style=for-the-badge\n[profile-link]: https://github.com/lobehub\n[vercel-link]: https://ui.lobehub.com\n[vercel-shield]: https://img.shields.io/website?down_message=offline\u0026label=vercel\u0026labelColor=black\u0026logo=vercel\u0026style=flat-square\u0026up_message=online\u0026url=https%3A%2F%2Fui.lobehub.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flobehub%2Flobe-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flobehub%2Flobe-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flobehub%2Flobe-ui/lists"}