Lobe Ui
🍭 Lobe UI - an open-source UI component library for building AIGC web apps
Last verified:
What is Lobe Ui?
Lobe UI is an open-source UI component library specifically designed for building AIGC (AI-Generated Content) web applications. It provides a comprehensive collection of pre-built React components developed based on Ant Design (Antd), ensuring full compatibility with existing Antd components while offering enhanced functionality tailored for AI Chatbot and AIGC applications.
Key features include specialized components for chat interfaces like ChatList with bubble and docs variants, Form components with data scope management and validation, and a wide range of UI elements including ActionIcon, Button, Avatar, Markdown, CodeEditor, Input, Select, Modal, Drawer, Tabs, Menu, and more. The library uses antd-style as its default css-in-js styling solution and supports modern React patterns including Next.js SSR with proper transpilation configuration.
Lobe UI is ideal for developers building AI chatbot applications, AIGC web apps, LLM interfaces, and modern React applications that require beautiful, consistent UI components. It's part of the broader LobeHub ecosystem which includes Lobe Chat (an open-source chatbot framework), Lobe Theme for Stable Diffusion, Lobe Icons (AI/LLM brand SVG collection), Lobe Charts, and Lobe TTS/STT libraries.
The library follows MIT licensing, making it completely free for personal, commercial, and private use. It supports ESM-only modules and can be installed via bun, npm, or yarn, with dedicated support for Next.js page router SSR through transpilePackages configuration.
Lobe Ui pricing
Pricing model: Freemium
Lobe UI is completely free and open-source under the MIT license. There are no paid tiers, subscriptions, or enterprise plans. The library can be used freely for personal projects, commercial applications, private deployments, and modifications. Installation is free via bun add @lobehub/ui, npm, or yarn. No credits, usage limits, or premium features exist - all components and functionality are available to everyone at no cost.
Lobe Ui pros
- Open-source with MIT license - completely free for any use
- Built specifically for AIGC and AI chatbot applications
- Fully compatible with Ant Design (Antd) components
- Comes with specialized ChatList component for chat interfaces
- High-performance Form component with data scope management
- Includes Markdown rendering component for AI responses
- CodeEditor component for code display and editing
- Responsive design with modern styling out of the box
- Easy installation via bun add @lobehub/ui
- Full Next.js SSR support with simple transpilePackages config
- Rich component library covering all common UI needs
- Uses antd-style as recommended css-in-js solution
- Part of larger LobeHub ecosystem with integrated tools
- Active GitHub repository with community contributions
- ESM-only for modern JavaScript workflow
Lobe Ui cons
- ESM-only package limits compatibility with CommonJS projects
- Heavy dependency on Ant Design increases bundle size
- Documentation primarily on GitHub rather than dedicated docs site
- Specialized for AIGC apps may be overkill for simple projects
- Requires antd-style for optimal styling experience
- Fewer pre-built templates compared to commercial UI kits
- Next.js page router requires manual transpilePackages configuration
- Limited enterprise support compared to paid UI libraries
Frequently asked questions about Lobe Ui
What is Lobe UI?
Lobe UI is an open-source UI component library specifically designed for building AIGC (AI-Generated Content) web applications. It provides a collection of React components developed based on Ant Design, fully compatible with Antd components, with enhanced features tailored for AI chatbot and AIGC applications.
How do I install Lobe UI?
Install Lobe UI by running the command 'bun add @lobehub/ui'. The package is ESM-only and can also be installed via npm or yarn. For Next.js projects, you need to add transpilePackages: ['@lobehub/ui'] to next.config.js for proper SSR support.
Is Lobe UI free to use?
Yes, Lobe UI is completely free and open-source under the MIT license. You can use it for personal projects, commercial applications, private deployments, and modifications without any cost or restrictions.
What components does Lobe UI include?
Lobe UI includes components like ActionIcon, Button, Avatar, Markdown, CodeEditor, Form, Input, Select, Modal, Drawer, Tabs, Menu, SideNav, ChatList, Collapse, Tag, Tooltip, Alert, Center, Flexbox, Grid, Header, and many more across categories like General, Data Display, Data Entry, Feedback, Layout, and Navigation.
Does Lobe UI work with Next.js?
Yes, Lobe UI fully supports Next.js including SSR. For the page router, add transpilePackages: ['@lobehub/ui'] to your next.config.js file. The library is specifically tested and optimized for Next.js applications.
Is Lobe UI compatible with Ant Design?
Yes, Lobe UI components are developed based on Ant Design (Antd) and are fully compatible with Antd components. Most components extend antd with additional props, and you can use Antd components alongside Lobe UI components seamlessly.
What styling solution does Lobe UI use?
Lobe UI recommends antd-style as the default css-in-js styling solution. This provides modern, performant styling that integrates well with both Lobe UI and Ant Design components.
Can I use Lobe UI for commercial projects?
Absolutely. The MIT license explicitly allows commercial use. You can use Lobe UI in commercial applications, sell products that include it, and use it in client work without any restrictions or requiring special permission.
What other products does LobeHub offer?
LobeHub offers Lobe Chat (open-source chatbot framework), Lobe Theme (for Stable Diffusion webui), Lobe Vidol (virtual idol creation), Lobe Icons (AI/LLM brand SVG collection), Lobe Charts (React chart components), Lobe TTS (text-to-speech library), and Lobe i18n (translation automation tool).
How do I contribute to Lobe UI?
Contributions are welcome. You can contribute by checking out GitHub Issues to find tasks, reporting bugs, requesting features, or submitting code contributions. The project welcomes all types of contributions from the community.