LobeHub's open-source React component library for building AI chat and AIGC web apps.
Documents · Changelog · Report Bug · Request Feature
Table of contents
Lobe UI is the React component library behind LobeHub, made for building AI chat and AIGC web apps.
- Built for AI apps: render LLM output (Markdown, code, Mermaid diagrams, diffs, HTML previews) and ship chat interfaces without building them from scratch.
- From landing page to admin console: one design language across chat, dashboards, data tables, forms and marketing pages.
- Theme in one line: light and dark modes plus primary and neutral colors switch with a single attribute, with no flash on first load.
- Easy to restyle: stable class names let you override any component with plain CSS or Tailwind.
- Ready for global users: English and Simplified Chinese texts included.
- AI-native docs: coding agents read every component's usage and props through skills.md and llms.txt.
$ pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motionLobe UI is ESM only and needs React 19, motion 13 or 14, @lobehub/icons 6 and @lobehub/fluent-emoji 5 as peer dependencies.
import '@lobehub/ui/theme.css';
import '@lobehub/ui/style.css';
import { Button, ConfigProvider } from '@lobehub/ui';
import { motion } from 'motion/react';
export default () => (
<ConfigProvider motion={motion}>
<Button type="primary">Hello AIGC</Button>
</ConfigProvider>
);Theming, i18n, CSS layers and framework setup are covered in the documentation. Upgrading from 5.x? v6 drops Ant Design; follow the v6 migration guide.
Lobe UI's docs are generated for coding agents as well as people.
| Resource | What it does |
|---|---|
| skills.md | Agent skill entry point with a Markdown reference (usage, props, API) for every component |
| llms.txt | Page index with outlines for llms.txt-aware tools |
| v6 migration skill | npx skills add lobehub/lobe-ui: lets your agent upgrade a 5.x app |
| Codemod | npx @lobehub/ui-codemod@latest v6 . --dry: rewrites v5 code and writes a JSON report agents can work through |
Paste this into Cursor, Claude Code, Codex or any other coding agent:
Read https://ui.lobehub.com/skills.md, then use @lobehub/ui to build a chat page with a message list and an input box. Only use components, props and imports documented there.
Works with Cursor, Claude Code, Windsurf, GitHub Copilot and other llms.txt-aware tools.
| Entry | Purpose |
|---|---|
@lobehub/ui |
Core components, ConfigProvider, theming |
@lobehub/ui/chat, @lobehub/ui/mobile |
Chat and mobile UI |
@lobehub/ui/dashboard, @lobehub/ui/pro-table, @lobehub/ui/form |
Admin consoles, data tables, forms |
@lobehub/ui/awesome, @lobehub/ui/brand, @lobehub/ui/mdx |
Landing pages, LobeHub brand, MDX docs |
@lobehub/ui/icons, @lobehub/ui/i18n |
Platform icons, locale bundles |
- Docs and live demos: ui.lobehub.com
- Migrating to v6: ui.lobehub.com/migration-v6
- Changelog: CHANGELOG.md
Questions, ideas and showcases are all welcome:
You can use Github Codespaces for online development:
Or clone it for local development (Node.js >= 22.22 and pnpm):
$ git clone https://github.com/lobehub/lobe-ui.git
$ cd lobe-ui
$ pnpm install
$ pnpm startContributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.
Every 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.
- 🍭 Lobe UI - React component library for AI apps
- 🥨 Lobe Icons - AI / LLM brand logos and icons
- 📊 Lobe Charts - React chart components
- ✒️ Lobe Editor - Lexical-based rich text editor for React, with Markdown, plugins and a chat composer
- 🎤 Lobe TTS - TTS / STT speech library
- 📐 Lobe Lint - ESLint, Prettier, Stylelint, Commitlint and more lint configs
- 😀 Fluent Emoji - Fluent Emoji assets
