Lobe UI components

🍭 Lobe UI - an open-source UI component library for building AIGC web apps

Components: 245
Framework: React
Stack: React, TypeScript, CSS-in-JS, CSS
License: MIT
GitHub stars: 2,212
Source: https://github.com/lobehub/lobe-ui
Website: https://ui.lobehub.com
Install: pnpm add @lobehub/ui

All Lobe UI components

Accordion: A vertically stacked set of interactive headings whose items reveal titled content with controlled or uncontrolled expansion.
Action Icon: ActionIcon is a component for rendering icon buttons with background, supporting multiple style variants, sizes, and interaction states…
Action Icon Group: ActionIconGroup is a component for rendering multiple buttons with unified styling and layout control. It handles groups of ActionIcon…
Agent Avatar
Alert: Alert is a component used to display important messages or notifications to the user. It can be customized with different types, icons…
Anchor
Auto Complete: Provides a dropdown of suggestions as the user types, extending Ant Design AutoComplete with additional styling options.
Avatar: Avatar is a component that displays a user's profile picture or initials. It can be customized with props like size, shape, background…
Badge
Block: A flexible container that extends Flexbox with variants, shadows, and glass effects.
Breadcrumb
Burger: A responsive navigation control that opens a drawer of menu items from a hamburger button.
Button
Carousel
Checkbox: Base UI-powered Checkbox and CheckboxGroup with lobe visual style.
Code Diff: The CodeDiff component is used to display code differences with syntax highlighting. It supports split and unified view modes…
Code Editor: Edits code with syntax highlighting for multiple programming languages.
Collapse: An expandable content container that extends Ant Design Collapse with additional styling, icons, and header descriptions.
Collapsible
Color Picker
Color Swatches: Displays selectable color swatches with an optional picker for custom colors.
Config Provider: Configures library-wide CDN resource resolution and the motion runtime for descendant components.
Context Menu: ContextMenu provides an imperative API to open a menu at the last pointer position. Render a host once and call showContextMenu with Menu…
Copy Button: CopyButton is a React component used to copy text content to the clipboard. It provides a button with a copy icon that, when clicked…
Date Picker: A DatePicker component that extends Ant Design's DatePicker with additional styling options. It provides different visual variants and an…
Descriptions
Divider
Download Button: DownloadButton is a React component used to download content from a Blob URL. It provides a button with a download icon that, when…
Draggable Panel: An edge-anchored panel that can be resized by dragging, by keyboard, or collapsed. Built on motion values, so a drag never re-renders React.
Draggable Side Nav: A generic resizable side panel container with collapse/expand functionality. Supports custom header, body, and footer content with smart…
Drawer: Edge-anchored panel built directly on Base UI dialog primitives, with four placements, an optional sidebar layout, and nested push…
Dropdown: Dropdown displays a list of options that appear when users click or hover over a trigger element. It's commonly used for showing context…
Dropdown Menu: DropdownMenu renders a dropdown menu based on Base UI Menu primitives, aligned with ContextMenu item layout and styling.
Editable Text
Editor Slash Menu: EditorSlashMenu is a slash-command menu built on Base UI Autocomplete primitives, styled consistently with DropdownMenu.
Emoji Picker: EmojiPicker is a component that allows users to select emoji icons or upload custom avatars. It supports multiple tabs, custom emoji sets…
Empty: Empty component displays an empty state with customizable icon, emoji, image, title, description, and action buttons, in default and…
File Type Icon: FileTypeIcon is a component that displays icons based on file types. It supports different file and folder types, color schemes, custom…
Flex: Flexible layout components based on Flexbox
Floating Panel
Floating Sheet
Fluent Emoji
Focus Scope
Font Loader: The FontLoader component is used to load fonts from a provided URL. It creates a link element with the given URL and appends it to the…
Footer: The Footer component is used to display a website footer. It supports various customization options like column layout, bottom content…
Form: Base UI-powered Form with settings-style groups, fields and submit footer.
Form Kit
Form Modal: FormModal combines Form and Modal components to create a modal dialog with an integrated form. It provides a convenient way to collect…
Freeze: Prevents DOM updates in descendant content through React Suspense, primarily to keep exit animations visually stable.
Grid: Grid is a responsive layout component that arranges child elements in a grid pattern. It automatically adjusts the number of columns based…
Group Avatar: GroupAvatar is a component that displays multiple user avatars in a grid layout with smooth corner styling. It supports different corner…
Guide Card: GuideCard is a component used to display visual guides, introductory content, or instructional information with an optional cover image…
Header: The Header component is a customizable header section with a logo, navigation, and actions. It is responsive and adapts to mobile and…
Highlighter: The Highlighter component is used to display syntax-highlighted code blocks with powerful features like code copying, language selection…
Hotkey: Hotkey component displays keyboard shortcuts or key combinations in a visually appealing way, supporting both standard and Mac keyboard…
Hotkey Input: HotkeyInput is a specialized input component for capturing keyboard shortcuts. It allows users to record key combinations by pressing…
Html Preview: HtmlPreview renders LLM-generated HTML inline using a hardened iframe sandbox. It mirrors how Mermaid is embedded in Markdown, but treats…
Icon: Icon is a component based on lucide-react that provides rich icon selection and customization options. It supports various sizes, colors…
Image: Image is an enhanced image component with a self-contained zoom-and-pan preview viewer, custom actions, and various display styles…
Image Select: ImageSelect allows users to choose an option from a list of images. It's ideal for visual selection interfaces where images better…
Input: Base UI-powered Input and TextArea components.
Layout
List: Renders selectable list items with titles, descriptions, avatars, actions, pin and loading states, and active-key handling.
Markdown: Markdown is a React component used to render markdown text. It supports various markdown syntax such as headings, lists, links, images…
Mask Shadow: MaskShadow is a component that adds a gradient shadow effect to indicate content overflow in a specific direction. It's commonly used for…
Material File Type Icon: MaterialFileTypeIcon displays file and folder icons in Material Design style based on file extensions or folder names. It supports various…
Menu: Menu is a navigation component that provides a list of options for user selection. It supports various item types including normal items…
Mermaid: Mermaid is a component for rendering Mermaid diagrams in React. It supports various diagram types like flowcharts, sequence diagrams…
Meta
Modal: Base UI-powered Modal with antd-compatible API, supporting declarative, imperative, and atomic usage.
Motion Provider: MotionProvider lets you choose which motion component (motion or m) Lobe UI uses.
Pagination
Pro Table
Progress
Progressive Blur
Qrcode
Radio
Rate
Result
Scroll Area: A native scroll container with custom scrollbars and gradient scroll fade.
Scroll Shadow: ScrollShadow is a component that adds shadow indicators to scrollable content to show overflow in different directions. It automatically…
Search Bar: SearchBar that includes an input field with a search icon and clear button, allowing users to easily search for specific items or content.
Segmented: Base UI-powered Segmented control — toggle-group semantics with a sliding active indicator. Drops antd dependency in favor of…
Select: Base UI-powered Select component.
Side Nav: The SideNav component is a customizable side navigation bar. It takes in an optional avatar and top actions to be displayed at the top…
Skeleton: Placeholder blocks that stand in for content while it loads. One primitive block, plus text-line and avatar helpers.
Slider
Slider With Input: SliderWithInput combines a slider with an input number field, allowing users to adjust values either by dragging the slider or entering a…
Snippet: The Snippet component is used to display a code snippet with syntax highlighting. It can be customized with a symbol before the content…
Sortable List: SortableList is a component for creating drag-and-drop sortable lists. It allows users to reorder list items through mouse or keyboard…
Spin
Statistic
Steps
Switch
Table
Tabs: Base UI-powered Tabs with iOS-flavored interactions — no hover background, tap-scale feedback, and a sliding active indicator across…
Tag: Standalone colored tag for statuses and categorization, with preset and hex colors, sizes, shapes, variants, and a closable affordance.
Text: Base UI-powered Text typography component with semantic types, formatting options, and single- or multi-line ellipsis with overflow-aware…
Theme Provider: ThemeProvider is a component that provides a theme to all the child components. It supports theme customization, custom stylish objects…
Theme Switch: ThemeSwitch component is a dropdown menu that allows users to switch between different theme modes.
Toc: The Toc component is used to display a table of contents with clickable anchor links to different sections of a page. It can be customized…
Toggle Group
Tree
Upload
Video: Video component for displaying video content with customizable controls, preview mode, and various styles. It supports standard HTML video…
Awesome Agent Skill Card
Awesome Aurora Background
Awesome Bento Grid
Awesome Bottom Gradient Button
Awesome Code Showcase
Awesome Feature Grid
Awesome Features
Awesome Fluid Gradient: Animated background of soft colour gradients flowing slowly.
Awesome Giscus
Awesome Gradient Button
Awesome Grainient
Awesome Grid Background
Awesome Hero
Awesome Install Banner
Awesome Landing Hero
Awesome Landing Section
Awesome Logo Marquee
Awesome Spline
Awesome Spotlight
Awesome Spotlight Card
Awesome Typewriter Effect: Text typed out one character at a time, cycling through several sentences, with a cursor.
Base Ui Accordion
Base Ui Action Icon
Base Ui Alert
Base Ui Auto Complete
Base Ui Avatar
Base Ui Badge
Base Ui Button
Base Ui Checkbox
Base Ui Collapsible
Base Ui Context Menu
Base Ui Draggable Panel
Base Ui Drawer
Base Ui Dropdown Menu
Base Ui Floating Panel
Base Ui Floating Sheet
Base Ui Focus Scope
Base Ui Form
Base Ui Input
Base Ui Modal
Base Ui Pagination
Base Ui Popover
Base Ui Progress
Base Ui Radio
Base Ui Result
Base Ui Scroll Area
Base Ui Segmented
Base Ui Select
Base Ui Skeleton
Base Ui Slider
Base Ui Spin: Spinning loading indicator that can wrap content while it loads.
Base Ui Switch
Base Ui Tabs
Base Ui Tag
Base Ui Text
Base Ui Toast
Base Ui Toggle Group
Base Ui Tooltip
Base Ui Tree
Base Ui Upload
Brand Brand Loading
Brand Lobe Chat
Brand Lobe Chat Text
Brand Lobe Hub
Brand Lobe Hub Text
Brand Logo3D
Brand Logo Flat
Brand Logo Mono
Brand Logo Three
Chat Back Bottom
Chat Chat Header
Chat Chat Input Area
Chat Chat Item
Chat Chat List
Chat Editable Message
Chat Editable Message List
Chat Loading Dots
Chat Message Input
Chat Message Modal
Chat Token Tag
Color Color Scales
Color Css Var
Color Status
Dashboard Auth Layout
Dashboard Auth Tools
Dashboard Breadcrumb
Dashboard Chart Grid
Dashboard Console Nav
Dashboard Console Shell
Dashboard Filter Sidebar
Dashboard Filter Strip
Dashboard Label With Key
Dashboard Metric Strip
Dashboard Page Header
Dashboard Page Skeleton
Dashboard Page Tabs
Dashboard Page Toolbar
Dashboard Panel Surface
Dashboard Route Progress
Dashboard Section
Dashboard Stat Card
Dashboard Surface
Dashboard Table Icon Actions
Dashboard Title With Tips
Icon Auth0
Icon Authelia
Icon Authentik
Icon Casdoor
Icon Clerk
Icon Ding Talk
Icon Discord
Icon Google Chat
Icon Imessage
Icon Lark
Icon Line
Icon Logto
Icon Microsoft Entra
Icon Microsoft Teams
Icon Next Auth
Icon Qq
Icon Slack
Icon Telegram
Icon We Chat
Icon Whats App
Icon Zitadel
Icon Lucide Extra
Internal
Mdx Callout
Mdx Cards
Mdx File Tree
Mdx Mdx
Mdx Steps
Mdx Tabs
Mdx Mdx Components
Mobile Chat Header
Mobile Chat Input Area
Mobile Safe Area
Mobile Tab Bar
Spline
Storybook Story Book

Lobe UI components

All Lobe UI components

Browse by category