lobe-ui

✨ Why Lobe UI?

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.

🚀 Getting Started

$ pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion

Lobe 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.

🤖 AI-Powered Development

Lobe UI’s docs are generated for coding agents as well as people.

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 Points

📖 Documentation

• Docs and live demos: ui.lobehub.com
• Migrating to v6: ui.lobehub.com/migration-v6
• Changelog: CHANGELOG.md

💬 Community

Questions, ideas and showcases are all welcome:

• Discord
• GitHub Discussions
• GitHub Issues

⌨️ Local Development

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 start

🤝 Contributing

Contributions 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.

🩷 Sponsor

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.

🔗 Links

• 🍭 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
• 📖 Docs Kit - Reusable documentation toolkit and lobedocs CLI for LobeHub component libraries
• 🌊 Streamdown - Headless streaming markdown engine for React

Copyright © 2023 LobeHub.
This project is MIT licensed.