로브 UI

React UI Kit for AI-Native 웹 앱

LobeHub의 오픈 소스 React 구성 요소 라이브러리 AI 채팅 및 AIGC 웹 앱 구축.

문서 · Changelog · [Report Bug][github-issues-link] · [Request Feature]github-issues-link]

본문 바로가기

# # # # # # 카테고리

• ✨ 왜 Lobe UI?
• 시작하기
• AI-Powered 개발
• ☸ 엔트리 포인트
• 한국어
• 커뮤니티
• -️ 지역 개발
• 기여 · -
• 12.1 링크

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

✨ 왜 Lobe UI?

Lobe UI는 LobeHub 뒤에 React 구성 요소 라이브러리이며 AI 채팅 및 AIGC 웹 앱을 구축했습니다.

• **AI 앱용 내장 **: LLM 출력(Markdown, code, Mermaid 다이어그램, diffs, HTML 미리보기) 및 스크래치에서 구축하지 않고 배 채팅 인터페이스를 렌더링합니다.
• 대륙 페이지에서 관리자 콘솔: 채팅, 대시보드, 데이터 테이블, 양식 및 마케팅 페이지에 대한 하나의 디자인 언어.
• **하나의 라인에서 아래 **: 빛과 어두운 모드 플러스 기본 및 중립 색상 스위치 단일 속성, 첫 번째 부하에 플래시 없음.
• ** restyle에 쉬운 **: 안정되어 있는 종류 이름은 당신은 일반 CSS 또는 Tailwind를 가진 어떤 성분든지 override 할 수 있습니다.
• 글로벌 사용자를 위한Ready: 영어 및 중국어 간체 포함.

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