DOCSEARCHbyAlgolia
Submit Docs

Lobe UI Documentation

repository·master·Indexed 24 days ago

https://github.com/lobehub/lobe-ui

An open-source UI component library built on Ant Design, specifically designed for building AIGC (AI-Generated Content) web applications. The library provides specialized components and providers for AI-centric interfaces, supports React 19 (from v1.158.0), and includes a dedicated color system package (@lobehub/ui/color). It also features @lobehub/docs-kit, a reusable documentation-site toolkit for LobeHub component libraries using React Router and Vite.

Tokens
138.9K
Snippets
201
Records
1.1K
Agent score
84%

What's inside Lobe UI

  1. Overview of @lobehub/docs-kit

    master
    @lobehub/docs-kit is a reusable documentation-site toolkit designed for LobeHub component libraries. It uses a React Router + Vite static-site stack. Unlike traditional setups where you manage all build tools, this kit owns the build tool configuration internally. A consumer repository only needs to provide content and a docs.config.ts file. It is capable of compiling component documentation, standalone demos, a search index, and changelog pages into a static build.

  2. Use the Highlighter component

    master
    The Highlighter component is used to display syntax-highlighted code blocks. It supports features such as code copying, language selection, custom themes, and content transformers. It can be rendered in different visual variants and supports expandable views and customizable actions.

  3. Use the Skeleton component for loading states

    master
    The Skeleton component provides animated placeholder blocks that mimic the structure of content while it is being loaded. It is used to improve user experience by reducing perceived loading time. You can use specialized sub-components like Skeleton.Avatar, Skeleton.Block, Skeleton.Button, Skeleton.Title, Skeleton.Paragraph, and Skeleton.Tags to match specific UI elements.

  6. Use DropdownMenu for navigation and actions

    master
    The DropdownMenu component renders a dropdown menu based on Base UI Menu primitives, styled to align with ContextMenu item layouts. It can be used with standard items, submenus, groups, and specialized item types like checkboxes and switches. You can compose the exported atom components to build custom menu structures.

  7. Use the Form component

    master

    The Form component is a high-performance data entry solution that manages data scope, collection, and verification. It is built on top of Ant Design's Form component, meaning it inherits all standard Ant Design Form properties while adding enhanced data management capabilities.

    Common usage patterns include:

    • Default: Standard form behavior with automatic data collection.
    • Flat Type: A flattened layout style for form items.
    • State Control: Manual control over the form state.
    • Submit Footer: Using a specialized footer for submission and reset actions.

  8. Use the Markdown component

    master
    The Markdown component is a React component used to render markdown text. It supports GitHub-flavored markdown (GFM), syntax highlighting, mathematical expressions (LaTeX), Mermaid diagrams, and interactive features like HTML previews and alerts.

  9. Use the Image component

    master
    The Image component is an enhanced version of Ant Design's Image component. It provides advanced features such as size control, loading states, preview capabilities, and custom toolbar addons. It is designed for data display and can be used in various layouts like galleries or with fallback states.

  11. Use the DraggablePanel component

    master

    The DraggablePanel is a versatile layout component that allows users to drag and resize panels. It supports several advanced interaction modes including:

    • Pinning: Locking the panel in place.
    • Modes: Fixed or floating positioning.
    • Placement: Positioning in any of the four directions (top, bottom, left, right).
    • Sizing: Configurable minimum width/height, default size, and customizable resizing.
    • Expansion: Support for expandable/collapsible states with a dedicated handler.
    • Lifecycle: Option to destroy the component instance upon closing.

    Common layout patterns include:

    • Default: Standard draggable/resizable behavior.
    • Stable Layout: A layout configuration that maintains stability during interaction.
    • Drag to Collapse: A pattern where dragging the panel edge or handle triggers a collapse action.

  12. Use the Text component for typography

    master
    The Text component is used to display text content with various styles and formatting options. It supports text decoration, colors, ellipsis, and other typography features. It also inherits all properties from Ant Design's Typography.Text component.