lobehub/lobe-ui

ローブUI

AIネイティブWebアプリ用のReact UIキット

LobeHubのオープンソースの React コンポーネントライブラリは、AI チャットと AIGC Web アプリをビルドします。

ドキュメント・変更ログ・[バグ報告][github-issues-link]・[リクエスト機能][github-issues-link]

コンテンツの表

#####TOC の一覧

• ✨ なぜLobe UI?
• OST 始める ・AIパワー開発
• エントリーポイント
• ドキュメント
• コミュニティ
• ローカル開発
• 社会貢献 ・スポンサー お問い合わせ

################################################################################################################################################################################################################################################################

✨ なぜLobe UI?

Lobe UIは、AIチャットとAIGC Webアプリの構築のために作られたLobeHubの背後にあるReactコンポーネントライブラリです。

-AIアプリ用のBuilt:LLM出力(Markdown、コード、マーメイドダイアグラム、diffs、HTMLプレビュー)をレンダリングし、それらをゼロから構築せずにチャットインターフェイスを出荷します。

• ランディングページから管理者コンソールへ:チャット、ダッシュボード、データテーブル、フォーム、マーケティングページを横断する1つのデザイン言語。
• 1行のテーマ:ライトとダークモードと1つの属性でプライマリとニュートラルカラースイッチ、最初の負荷にフラッシュなし。 -Restyleに簡単:安定したクラス名で、任意のコンポーネントをプレーンCSSまたはテールウィンドで上書きできます。 -グローバルユーザーのための準備: 英語と簡体字中国語のテキストが含まれています.

✨ 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-shield]][pnpm-link]

$ 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 () => (