# Lobe UI

> A modern React component library for building LobeHub products.

Each entry links to a markdown reference page assembled from its MDX source; the Docs URL is the rendered page with live demos.

Agent skill entry point: [skills.md](https://ui.lobehub.com/skills.md).

## src

- [Button](https://ui.lobehub.com/skills/components/button.md): Category: General. Button is a powerful component that supports multiple style variants, sizes, and interaction states. It extends Ant Design's Button with enhanced styling and icon support. Outline: Introduction, Variants, API. Docs: https://ui.lobehub.com/components/button
- [Accordion](https://ui.lobehub.com/skills/components/accordion.md): Category: Data Display. A vertically stacked set of interactive headings whose items reveal titled content with controlled or uncontrolled expansion. Outline: Standalone Item, With Action, AccordionItem Props, AccordionItem classNames, AccordionItem styles, Standalone Usage, Animation. Docs: https://ui.lobehub.com/components/accordion
- [ActionIcon](https://ui.lobehub.com/skills/components/action-icon.md): Category: General. ActionIcon is a component for rendering icon buttons with background, supporting multiple style variants, sizes, and interaction states. It integrates with the Lucide icon library and provides tooltip capabilities. Outline: Introduction, Basic Usage, Preset Sizes, Custom Size, Variants, With DropdownMenu, ActionIconSizeConfig. Docs: https://ui.lobehub.com/components/action-icon
- [ActionIconGroup](https://ui.lobehub.com/skills/components/action-icon-group.md): Category: General. ActionIconGroup is a component for rendering multiple buttons with unified styling and layout control. It handles groups of ActionIcon components with consistent appearance and behavior. Outline: Introduction, ActionIconGroupEvent. Docs: https://ui.lobehub.com/components/action-icon-group
- [Alert](https://ui.lobehub.com/skills/components/alert.md): Category: Feedback. Alert is a component used to display important messages or notifications to the user. It can be customized with different types, icons, and actions. Docs: https://ui.lobehub.com/components/alert
- [AutoComplete](https://ui.lobehub.com/skills/components/auto-complete.md): Category: Data Entry. Provides a dropdown of suggestions as the user types, extending Ant Design AutoComplete with additional styling options. Outline: APIs. Docs: https://ui.lobehub.com/components/auto-complete
- [Avatar](https://ui.lobehub.com/skills/components/avatar.md): Category: Data Display. Avatar is a component that displays a user's profile picture or initials. It can be customized with props like size, shape, background color, and image source. If no image source is provided, it will display the user's initials. This component is typically used in user profile pages, comment sections, or messaging applications. Outline: Avatar.Group, AvatarGroupItemType. Docs: https://ui.lobehub.com/components/avatar
- [Block](https://ui.lobehub.com/skills/components/block.md): Category: General. A flexible container that extends Flexbox with variants, shadows, and glass effects. Outline: APIs. Docs: https://ui.lobehub.com/components/block
- [Burger](https://ui.lobehub.com/skills/components/burger.md): Category: Navigation. A responsive navigation control that opens a drawer of menu items from a hamburger button. Docs: https://ui.lobehub.com/components/burger
- [Checkbox](https://ui.lobehub.com/skills/components/checkbox.md): Category: General. Checkbox is a component for rendering checkbox inputs with customizable size, styling, and optional text labels. It supports controlled and uncontrolled modes. CheckboxGroup allows you to manage multiple checkboxes together. Outline: Introduction, Size, With Text, Indeterminate, CheckboxGroup, Using Checkbox.Group, With Options, Disabled State, CheckboxGroup, CheckboxGroupOption. Docs: https://ui.lobehub.com/components/checkbox
- [CodeDiff](https://ui.lobehub.com/skills/components/code-diff.md): Category: Data Display. The CodeDiff component is used to display code differences with syntax highlighting. It supports split and unified view modes, full-featured collapsible headers, patch rendering, custom actions, and visual variants for different display styles. Outline: Actions Render, Patch Diff, PatchDiff. Docs: https://ui.lobehub.com/components/code-diff
- [CodeEditor](https://ui.lobehub.com/skills/components/code-editor.md): Category: Data Entry. Edits code with syntax highlighting for multiple programming languages. Outline: APIs. Docs: https://ui.lobehub.com/components/code-editor
- [Collapse](https://ui.lobehub.com/skills/components/collapse.md): Category: Data Display. An expandable content container that extends Ant Design Collapse with additional styling, icons, and header descriptions. Outline: CollapseItemType. Docs: https://ui.lobehub.com/components/collapse
- [ColorSwatches](https://ui.lobehub.com/skills/components/color-swatches.md): Category: Data Entry. Displays selectable color swatches with an optional picker for custom colors. Outline: ColorSwatchesItemType. Docs: https://ui.lobehub.com/components/color-swatches
- [ConfigProvider](https://ui.lobehub.com/skills/components/config-provider.md): Category: Theme. Configures library-wide CDN resource resolution and the motion runtime for descendant components. Outline: Default, Custom CDN, Provider order, Motion, Global keyboard focus, Config, CdnFn. Docs: https://ui.lobehub.com/components/config-provider
- [ContextMenu](https://ui.lobehub.com/skills/components/context-menu.md): Category: Navigation. ContextMenu provides an imperative API to open a menu at the last pointer position. Render a host once and call showContextMenu with Menu items. Outline: Viewport Overflow, Description, Header & Footer, Icon Space Mode, showContextMenu, ContextMenuHost, ContextMenuTrigger. Docs: https://ui.lobehub.com/components/context-menu
- [CopyButton](https://ui.lobehub.com/skills/components/copy-button.md): Category: Data Entry. CopyButton is a React component used to copy text content to the clipboard. It provides a button with a copy icon that, when clicked, copies the specified content to the user's clipboard. It also displays a tooltip indicating whether the copy action was successful or not. Outline: CopyButton. Docs: https://ui.lobehub.com/components/copy-button
- [DatePicker](https://ui.lobehub.com/skills/components/date-picker.md): Category: Data Entry. A DatePicker component that extends Ant Design's DatePicker with additional styling options. It provides different visual variants and an optional shadow effect. Outline: APIs. Docs: https://ui.lobehub.com/components/date-picker
- [DownloadButton](https://ui.lobehub.com/skills/components/download-button.md): Category: Data Entry. DownloadButton is a React component used to download content from a Blob URL. It provides a button with a download icon that, when clicked, triggers a download of the specified content. It also displays a tooltip indicating the file type being downloaded. Outline: DownloadButton. Docs: https://ui.lobehub.com/components/download-button
- [DraggablePanel](https://ui.lobehub.com/skills/components/draggable-panel.md): Category: Layout. DraggablePanel is a panel that can be dragged and resized. It supports pinning, fixed or floating mode, placement in four directions, minimum width and height, expandable or not, default and customizable size, and destroy on close. It also provides a handler for expanding and collapsing the panel. Docs: https://ui.lobehub.com/components/draggable-panel
- [DraggableSideNav](https://ui.lobehub.com/skills/components/draggable-side-nav.md): Category: Navigation. A generic resizable side panel container with collapse/expand functionality. Supports custom header, body, and footer content with smart drag-to-collapse behavior. Outline: Features, Notes. Docs: https://ui.lobehub.com/components/draggable-side-nav
- [Drawer](https://ui.lobehub.com/skills/components/drawer.md): Category: Feedback. Drawer is a panel that slides in from the edge of the screen. It can be used to display additional content or provide user interaction options without navigating away from the current view. Outline: Drawer. Docs: https://ui.lobehub.com/components/drawer
- [Dropdown](https://ui.lobehub.com/skills/components/dropdown.md): Category: Navigation. Dropdown displays a list of options that appear when users click or hover over a trigger element. It's commonly used for showing context menus, additional actions, or navigation options. Outline: Dropdown, DropdownMenuItemType. Docs: https://ui.lobehub.com/components/dropdown
- [DropdownMenu](https://ui.lobehub.com/skills/components/dropdown-menu.md): Category: Navigation. DropdownMenu renders a dropdown menu based on Base UI Menu primitives, aligned with ContextMenu item layout and styling. Outline: Keep Open on Item Click, Atom Components, Header & Footer, Icon Space Mode, Description, Icon Align, Tooltip Hover Stay, DropdownMenuV2, Menu Items. Docs: https://ui.lobehub.com/components/dropdown-menu
- [EditableText](https://ui.lobehub.com/skills/components/editable-text.md): Category: Data Entry. EditableText is a component that allows users to edit text inline. It displays the text in a non-editable state by default, but when the user clicks the edit icon, it switches to an editable input field where the user can make changes. Once the user is done editing, they can click outside the input field or press the enter key to save the changes. The component uses the ControlInput component to display the input field and passes the value and onChange props to it. Docs: https://ui.lobehub.com/components/editable-text
- [EditorSlashMenu](https://ui.lobehub.com/skills/components/editor-slash-menu.md): Category: Data Entry. EditorSlashMenu is a slash-command menu built on Base UI Autocomplete primitives, styled consistently with DropdownMenu. Docs: https://ui.lobehub.com/components/editor-slash-menu
- [EmojiPicker](https://ui.lobehub.com/skills/components/emoji-picker.md): Category: Data Entry. EmojiPicker is a component that allows users to select emoji icons or upload custom avatars. It supports multiple tabs, custom emoji sets, model avatars from @lobehub/icons, and includes options for uploading and deleting avatars. Outline: EmojiPickerCustomEmoji, EmojiPickerCustomTab. Docs: https://ui.lobehub.com/components/emoji-picker
- [Empty](https://ui.lobehub.com/skills/components/empty.md): Category: Data Display. Empty component displays an empty state with customizable icon, emoji, image, title, description, and action buttons. It's commonly used to indicate that there's no data or content to display. Outline: Empty. Docs: https://ui.lobehub.com/components/empty
- [FileTypeIcon](https://ui.lobehub.com/skills/components/file-type-icon.md): Category: Data Display. FileTypeIcon is a component that displays icons based on file types. It supports different file and folder types, color schemes, custom icons, and sizing options for visual representation of files and folders. Docs: https://ui.lobehub.com/components/file-type-icon
- [Flex](https://ui.lobehub.com/skills/components/flex.md): Category: Layout. Flexible layout components based on Flexbox Outline: Flexbox, Direction, Alignment, Gap, Wrap, Center, Center, FlexBasic, ContentPosition, FlexDirection, CommonSpaceNumber. Docs: https://ui.lobehub.com/components/flex
- [FluentEmoji](https://ui.lobehub.com/skills/components/fluent-emoji.md): Category: Data Display. The FluentEmoji component is used to display an emoji with the Fluent design style. It supports different types of styles (modern, flat, high-contrast) and sizes. It also provides a loading spinner when the image is being fetched from the server, and a fallback text emoji when the image fails to load. The component is customizable with className and style props, and can receive additional props to be passed down to the underlying div element. Outline: Default, FluentEmoji. Docs: https://ui.lobehub.com/components/fluent-emoji
- [FontLoader](https://ui.lobehub.com/skills/components/font-loader.md): Category: Theme. 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 document head. This component is a memoized functional component that uses the `useEffect` hook to ensure that the link element is only created once and appended to the document head when the component mounts. Docs: https://ui.lobehub.com/components/font-loader
- [Footer](https://ui.lobehub.com/skills/components/footer.md): Category: Layout. The Footer component is used to display a website footer. It supports various customization options like column layout, bottom content, and theme selection. Outline: APIs. Docs: https://ui.lobehub.com/components/footer
- [Form](https://ui.lobehub.com/skills/components/form.md): Category: Data Entry. High performance Form component with data scope management. Including data collection, verification, and styles. Outline: Form, Form.Item, Form.SubmitFooter. Docs: https://ui.lobehub.com/components/form
- [FormModal](https://ui.lobehub.com/skills/components/form-modal.md): Category: Data Entry. FormModal combines Form and Modal components to create a modal dialog with an integrated form. It provides a convenient way to collect user input in a popup interface. Outline: FormModal. Docs: https://ui.lobehub.com/components/form-modal
- [Freeze](https://ui.lobehub.com/skills/components/freeze.md): Category: General. Prevents DOM updates in descendant content through React Suspense, primarily to keep exit animations visually stable. Outline: APIs. Docs: https://ui.lobehub.com/components/freeze
- [Grid](https://ui.lobehub.com/skills/components/grid.md): Category: Layout. Grid is a responsive layout component that arranges child elements in a grid pattern. It automatically adjusts the number of columns based on available space. Outline: Grid. Docs: https://ui.lobehub.com/components/grid
- [GroupAvatar](https://ui.lobehub.com/skills/components/group-avatar.md): Category: Data Display. GroupAvatar is a component that displays multiple user avatars in a grid layout with smooth corner styling. It supports different corner types including iOS-style superellipse shapes for modern visual appeal. The component automatically arranges up to 4 avatars in a 2x2 grid and applies smooth corner masks for enhanced visual presentation. Outline: AvatarItem, Corner Shape Types, Grid Layout. Docs: https://ui.lobehub.com/components/group-avatar
- [GuideCard](https://ui.lobehub.com/skills/components/guide-card.md): Category: Data Display. GuideCard is a component used to display visual guides, introductory content, or instructional information with an optional cover image, title, and description. It supports various visual styles, closable functionality, and customization options. Outline: APIs. Docs: https://ui.lobehub.com/components/guide-card
- [Header](https://ui.lobehub.com/skills/components/header.md): Category: Layout. The Header component is a customizable header section with a logo, navigation, and actions. It is responsive and adapts to mobile and desktop screens. Outline: APIs. Docs: https://ui.lobehub.com/components/header
- [Highlighter](https://ui.lobehub.com/skills/components/highlighter.md): Category: Data Display. The Highlighter component is used to display syntax-highlighted code blocks with powerful features like code copying, language selection, custom themes, and transformers. It supports multiple display variants, expandable views, and customizable actions. Outline: SyntaxHighlighter. Docs: https://ui.lobehub.com/components/highlighter
- [Hotkey](https://ui.lobehub.com/skills/components/hotkey.md): Category: Data Display. Hotkey component displays keyboard shortcuts or key combinations in a visually appealing way, supporting both standard and Mac keyboard styles with various visual options. Outline: Hotkey, Key Format, KeyMapEnum. Docs: https://ui.lobehub.com/components/hotkey
- [HotkeyInput](https://ui.lobehub.com/skills/components/hotkey-input.md): Category: Data Entry. HotkeyInput is a specialized input component for capturing keyboard shortcuts. It allows users to record key combinations by pressing keys, with visual feedback and validation. Outline: Features, Key Format. Docs: https://ui.lobehub.com/components/hotkey-input
- [HtmlPreview](https://ui.lobehub.com/skills/components/html-preview.md): Category: Data Display. HtmlPreview renders LLM-generated HTML inline using a hardened iframe sandbox. It mirrors how Mermaid is embedded in Markdown, but treats the content as code rather than data — scripts execute inside an isolated frame that cannot reach the host page. Outline: Full report, Head resources (CDN scripts, stylesheets, fonts), Streaming, Slow-model progress signal, Security model, Streaming, Fragments. Docs: https://ui.lobehub.com/components/html-preview
- [I18n](https://ui.lobehub.com/skills/components/i18n.md): Category: Internationalization. Internationalization (i18n) provider and hooks for managing translations across multiple languages in your application. Outline: I18nProvider, useI18n, TranslationResources, TranslationResourcesInput. Docs: https://ui.lobehub.com/components/i18n
- [Icon](https://ui.lobehub.com/skills/components/icon.md): Category: General. Icon is a component based on lucide-react that provides rich icon selection and customization options. It supports various sizes, colors, and animations. Outline: Introduction, Basic Usage, Icon, IconSizeType, IconSizeConfig, IconProvider. Docs: https://ui.lobehub.com/components/icon
- [Image](https://ui.lobehub.com/skills/components/image.md): Category: Data Display. Image is an enhanced image component with a self-contained zoom-and-pan preview viewer, custom actions, and various display styles. Preview is powered by a Base UI dialog with FLIP open/close transitions, deep zoom, and gallery navigation — it no longer wraps Ant Design's Image. Outline: Gallery, Dual Source Preview, Deep Zoom, Default Zoom, Toolbar Addon, Interaction Model, Breaking Changes, Image, PreviewGroup, ImagePreviewOptions. Docs: https://ui.lobehub.com/components/image
- [ImageSelect](https://ui.lobehub.com/skills/components/image-select.md): Category: Data Entry. ImageSelect allows users to choose an option from a list of images. It's ideal for visual selection interfaces where images better represent options than text. Outline: ImageSelect, ImageSelectItem. Docs: https://ui.lobehub.com/components/image-select
- [Input](https://ui.lobehub.com/skills/components/input.md): Category: Data Entry. A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data. Outline: Default, Input, Input.TextArea, Input.Number, Input.Password, Input.OPT. Docs: https://ui.lobehub.com/components/input
- [Layout](https://ui.lobehub.com/skills/components/layout.md): Category: Layout. The Layout component is used to create a basic layout structure with header, footer, sidebar and content areas. It provides customizable props such as headerHeight, asideWidth and tocWidth to adjust the size of each area. It also includes sub-components such as LayoutHeader, LayoutMain, LayoutSidebar, LayoutToc and LayoutFooter, which can be used independently for more flexibility. The component is responsive to different screen sizes with the help of useResponsive hook. Outline: LayoutHeader, LayoutSidebar / LayoutSidebarInner, LayoutToc. Docs: https://ui.lobehub.com/components/layout
- [List](https://ui.lobehub.com/skills/components/list.md): Category: Data Display. Renders selectable list items with titles, descriptions, avatars, actions, pin and loading states, and active-key handling. Docs: https://ui.lobehub.com/components/list
- [Markdown](https://ui.lobehub.com/skills/components/markdown.md): Category: Data Display. Markdown is a React component used to render markdown text. It supports various markdown syntax such as headings, lists, links, images, code blocks and more. It is commonly used in documentation, blogs, and other text-heavy applications. Outline: Basic, Headings, Paragraph, Styling text, Break Lines, Quoting text, Links, Tables, Images, Videos, Lists, Task lists. Docs: https://ui.lobehub.com/components/markdown
- [MaskShadow](https://ui.lobehub.com/skills/components/mask-shadow.md): Category: Layout. MaskShadow is a component that adds a gradient shadow effect to indicate content overflow in a specific direction. It's commonly used for scrollable containers to provide a visual cue that more content is available. Docs: https://ui.lobehub.com/components/mask-shadow
- [MaterialFileTypeIcon](https://ui.lobehub.com/skills/components/material-file-type-icon.md): Category: Data Display. MaterialFileTypeIcon displays file and folder icons in Material Design style based on file extensions or folder names. It supports various file types and provides different visual variants. Docs: https://ui.lobehub.com/components/material-file-type-icon
- [Menu](https://ui.lobehub.com/skills/components/menu.md): Category: Navigation. Menu is a navigation component that provides a list of options for user selection. It supports various item types including normal items, sub-menus, dividers, and item groups with customizable icons and styles. Outline: ItemType. Docs: https://ui.lobehub.com/components/menu
- [Mermaid](https://ui.lobehub.com/skills/components/mermaid.md): Category: Data Display. Mermaid is a component for rendering Mermaid diagrams in React. It supports various diagram types like flowcharts, sequence diagrams, class diagrams, and more with customizable styling and interactive features. Docs: https://ui.lobehub.com/components/mermaid
- [Modal](https://ui.lobehub.com/skills/components/modal.md): Category: Feedback. Modal component displays content in a layer that appears above the page, requiring user interaction before continuing. It provides a focused and contextual way to present information or gather input. Outline: Modal, createModal, createRawModal, useModalContext, ModalProvider. Docs: https://ui.lobehub.com/components/modal
- [MotionProvider](https://ui.lobehub.com/skills/components/motion-provider.md): Category: Theme. MotionProvider lets you choose which motion component (motion or m) Lobe UI uses. Outline: useMotionComponent. Docs: https://ui.lobehub.com/components/motion-provider
- [NeuralNetworkLoading](https://ui.lobehub.com/skills/components/neural-network-loading.md): Category: Feedback. An animated SVG loading indicator depicting a neural network — pulsing nodes connected across layers, particles flowing through the connections, and a slowly rotating outer ring. Suitable for "AI is thinking / preparing" empty states. Docs: https://ui.lobehub.com/components/neural-network-loading
- [ScrollArea](https://ui.lobehub.com/skills/components/scroll-area.md): Category: Layout. A native scroll container with custom scrollbars and gradient scroll fade. Outline: Horizontal fade, Fade in both directions, Content overflow (default `min-width: fit-content`), Usage, Anatomy (Atoms), Scroll fade (mask, scroll-driven), API Reference, ScrollArea, Root, Viewport, Content, Scrollbar. Docs: https://ui.lobehub.com/components/scroll-area
- [ScrollShadow](https://ui.lobehub.com/skills/components/scroll-shadow.md): Category: Layout. ScrollShadow is a component that adds shadow indicators to scrollable content to show overflow in different directions. It automatically detects scroll status and shows or hides shadows accordingly. Docs: https://ui.lobehub.com/components/scroll-shadow
- [SearchBar](https://ui.lobehub.com/skills/components/search-bar.md): Category: Data Entry. SearchBar that includes an input field with a search icon and clear button, allowing users to easily search for specific items or content. Outline: Default. Docs: https://ui.lobehub.com/components/search-bar
- [Segmented](https://ui.lobehub.com/skills/components/segmented.md): Category: Data Display. A deprecated styled wrapper around Ant Design Segmented with filled, outlined, or borderless variants and optional shadow, glass, and padding controls. Docs: https://ui.lobehub.com/components/segmented
- [Select](https://ui.lobehub.com/skills/components/select.md): Category: Data Entry. Select component lets users choose from a list of options in a dropdown menu. It supports various styling options and custom suffix icons. Outline: Select. Docs: https://ui.lobehub.com/components/select
- [SideNav](https://ui.lobehub.com/skills/components/side-nav.md): Category: Navigation. The SideNav component is a customizable side navigation bar. It takes in an optional avatar and top actions to be displayed at the top, and a required bottom actions prop to be displayed at the bottom. Docs: https://ui.lobehub.com/components/side-nav
- [Skeleton](https://ui.lobehub.com/skills/components/skeleton.md): Category: Data Display. Skeleton component provides a placeholder loading state for content that is being loaded. It displays animated placeholder blocks that mimic the structure of the actual content, improving user experience during data loading. Outline: Skeleton.Avatar, Skeleton.Block, Skeleton.Button, Skeleton.Title, Skeleton.Paragraph, Skeleton.Tags. Docs: https://ui.lobehub.com/components/skeleton
- [SliderWithInput](https://ui.lobehub.com/skills/components/slider-with-input.md): Category: Data Entry. SliderWithInput combines a slider with an input number field, allowing users to adjust values either by dragging the slider or entering a precise number in the input field. Docs: https://ui.lobehub.com/components/slider-with-input
- [Snippet](https://ui.lobehub.com/skills/components/snippet.md): Category: Data Display. The Snippet component is used to display a code snippet with syntax highlighting. It can be customized with a symbol before the content and a language for syntax highlighting. The component is also copyable with a CopyButton included by default. Docs: https://ui.lobehub.com/components/snippet
- [SortableList](https://ui.lobehub.com/skills/components/sortable-list.md): Category: Data Display. SortableList is a component for creating drag-and-drop sortable lists. It allows users to reorder list items through mouse or keyboard interactions with smooth animations and accessibility features. Outline: SortableListItem, SortableList.Item, SortableList.DragHandle. Docs: https://ui.lobehub.com/components/sortable-list
- [Tabs](https://ui.lobehub.com/skills/components/tabs.md): Category: Navigation. Tabs are used to display multiple sections of content within the same space on a webpage. They allow users to quickly switch between different sections of content without having to navigate away from the current page. Outline: Tabs, Tab Variants. Docs: https://ui.lobehub.com/components/tabs
- [Tag](https://ui.lobehub.com/skills/components/tag.md): Category: Data Display. Tag is used for marking and categorizing content with small colorful labels. It offers multiple styles, sizes, and color options for different scenarios. Outline: Tag, Color Presets. Docs: https://ui.lobehub.com/components/tag
- [Text](https://ui.lobehub.com/skills/components/text.md): Category: Typography. Text component is used to display text content with various styles and formatting options. It supports text decoration, colors, ellipsis, and other typography features. Outline: Text, Text Types, Text Decorations, Ellipsis. Docs: https://ui.lobehub.com/components/text
- [ThemeProvider](https://ui.lobehub.com/skills/components/theme-provider.md): Category: Theme. ThemeProvider is a component that provides a theme to all the child components. It supports theme customization, custom stylish objects, and font loading. Outline: ThemeProvider, ThemeProvider Features, Customization. Docs: https://ui.lobehub.com/components/theme-provider
- [ThemeSwitch](https://ui.lobehub.com/skills/components/theme-switch.md): Category: Data Entry. ThemeSwitch component is a dropdown menu that allows users to switch between different theme modes. Docs: https://ui.lobehub.com/components/theme-switch
- [Toc](https://ui.lobehub.com/skills/components/toc.md): Category: Navigation. 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 with a specific height and width, and can be displayed differently on mobile devices. The component utilizes the Ant Design Anchor component to create the clickable anchor links. Outline: TocItemType. Docs: https://ui.lobehub.com/components/toc
- [Video](https://ui.lobehub.com/skills/components/video.md): Category: Data Display. Video component for displaying video content with customizable controls, preview mode, and various styles. It supports standard HTML video features while providing an enhanced user interface. Docs: https://ui.lobehub.com/components/video

## awesome

- [AgentSkillCard](https://ui.lobehub.com/skills/components/awesome/agent-skill-card.md): Category: Landing. A card that hands coding agents a prompt pointing at your skills, and gives humans the matching install command, with a row of supported agent logos. Outline: Default, Custom agents and footer. Docs: https://ui.lobehub.com/components/awesome/agent-skill-card
- [AuroraBackground](https://ui.lobehub.com/skills/components/awesome/aurora-background.md): Category: Effect. AuroraBackground creates a beautiful aurora-like animated gradient background effect that can be used as a container for other content. Outline: APIs. Docs: https://ui.lobehub.com/components/awesome/aurora-background
- [BentoGrid](https://ui.lobehub.com/skills/components/awesome/bento-grid.md): Category: Landing. A responsive tile grid for showing live component renders on a landing page. Tiles can span columns and rows and link to their docs. Outline: Default. Docs: https://ui.lobehub.com/components/awesome/bento-grid
- [BottomGradientButton](https://ui.lobehub.com/skills/components/awesome/bottom-gradient-button.md): Category: General. A round filled button with a subtle gold bottom-edge gradient that appears on hover. Docs: https://ui.lobehub.com/components/awesome/bottom-gradient-button
- [CodeShowcase](https://ui.lobehub.com/skills/components/awesome/code-showcase.md): Category: Landing. Tabs that pair a short code snippet with its live render, to show what a few lines of code produce. Docs: https://ui.lobehub.com/components/awesome/code-showcase
- [FeatureGrid](https://ui.lobehub.com/skills/components/awesome/feature-grid.md): Category: Landing. A grid of short feature cards with an icon, title and description. Cards can link to a page. Docs: https://ui.lobehub.com/components/awesome/feature-grid
- [Features](https://ui.lobehub.com/skills/components/awesome/features.md): Category: Data Display. Features is a component for displaying a grid of feature items with icons, descriptions, and optional images. Outline: FeatureItemType. Docs: https://ui.lobehub.com/components/awesome/features
- [FluidGradient](https://ui.lobehub.com/skills/components/awesome/fluid-gradient.md): Category: Landing. A slow, GPU-rendered gradient texture for landing page backgrounds. It pauses off-screen and renders a still frame when reduced motion is preferred. Outline: Default. Docs: https://ui.lobehub.com/components/awesome/fluid-gradient
- [Giscus](https://ui.lobehub.com/skills/components/awesome/giscus.md): Category: Feedback. A wrapper component for giscus 💎, a comments system powered by GitHub Discussions. Outline: Default, APIs. Docs: https://ui.lobehub.com/components/awesome/giscus
- [GradientButton](https://ui.lobehub.com/skills/components/awesome/gradient-button.md): Category: General. GradientButton is a customized button with an attractive gradient background that can include an optional glow effect. Outline: APIs. Docs: https://ui.lobehub.com/components/awesome/gradient-button
- [GridBackground](https://ui.lobehub.com/skills/components/awesome/grid-background.md): Category: Effect. GridBackground creates a dynamic grid pattern background with customizable colors and animation effects. Outline: GridShowcase. Docs: https://ui.lobehub.com/components/awesome/grid-background
- [Hero](https://ui.lobehub.com/skills/components/awesome/hero.md): Category: Data Display. Hero is a component for creating attractive landing page hero sections with a title, description, and customizable action buttons. Outline: HeroAction. Docs: https://ui.lobehub.com/components/awesome/hero
- [InstallBanner](https://ui.lobehub.com/skills/components/awesome/install-banner.md): Category: Landing. The closing call to action of a landing page, with a title, a copyable install command and a footnote. Docs: https://ui.lobehub.com/components/awesome/install-banner
- [LandingHero](https://ui.lobehub.com/skills/components/awesome/landing-hero.md): Category: Landing. The opening band of a landing page, with a badge, a title with a gradient accent, a description and actions. Outline: Split layout, Routing. Docs: https://ui.lobehub.com/components/awesome/landing-hero
- [LandingSection](https://ui.lobehub.com/skills/components/awesome/landing-section.md): Category: Landing. The heading and spacing wrapper for every band of a landing page, with an optional eyebrow, title, description and top divider. Outline: Default. Docs: https://ui.lobehub.com/components/awesome/landing-section
- [LogoMarquee](https://ui.lobehub.com/skills/components/awesome/logo-marquee.md): Category: Landing. An endless, pausable strip of logos with labels, for showing integrations or supported providers. Outline: Default. Docs: https://ui.lobehub.com/components/awesome/logo-marquee
- [Spotlight](https://ui.lobehub.com/skills/components/awesome/spotlight.md): Category: Effect. The Spotlight component creates a circular spotlight effect that follows the user's mouse cursor, useful for creating interactive hover effects. Outline: APIs. Docs: https://ui.lobehub.com/components/awesome/spotlight
- [SpotlightCard](https://ui.lobehub.com/skills/components/awesome/spotlight-card.md): Category: Data Display. SpotlightCard displays a grid of items with an interactive spotlight effect that follows the mouse cursor over each card. Outline: APIs. Docs: https://ui.lobehub.com/components/awesome/spotlight-card
- [TypewriterEffect](https://ui.lobehub.com/skills/components/awesome/typewriter-effect.md): Category: General. A powerful typewriter effect component that creates realistic typing animations with automatic typing and deleting, cycling through multiple sentences with extensive customization options. Outline: Default. Docs: https://ui.lobehub.com/components/awesome/typewriter-effect

## base-ui

- [Accordion](https://ui.lobehub.com/skills/components/base-ui/accordion.md): Category: Data Display. Base UI-powered Accordion with borderless, filled-header and outlined variants. Outline: Default, Filled, Outlined, Default-open mount, AccordionItemType, Indicator placement, Variants. Docs: https://ui.lobehub.com/components/base-ui/accordion
- [ActionIcon](https://ui.lobehub.com/skills/components/base-ui/action-icon.md): Category: General. Compact icon button built on the Base UI Button with size presets, visual variants, loading state, and tooltip integration. Outline: Outdent borderless, API. Docs: https://ui.lobehub.com/components/base-ui/action-icon
- [Alert](https://ui.lobehub.com/skills/components/base-ui/alert.md): Category: Feedback. Neutral-first inline feedback with restrained semantic color, actions, dismissal, and expandable diagnostic detail. Outline: API, Migrating from antd Alert. Docs: https://ui.lobehub.com/components/base-ui/alert
- [Avatar](https://ui.lobehub.com/skills/components/base-ui/avatar.md): Category: Data Display. Avatar and AvatarGroup with emoji, image, text fallback and loading overlay support, built on Base UI-era primitives. Outline: Avatar. Docs: https://ui.lobehub.com/components/base-ui/avatar
- [Button](https://ui.lobehub.com/skills/components/base-ui/button.md): Category: General. Polished base-ui Button. API-compatible drop-in for antd Button core props. Outline: Outdent text, Split button, API, Migrating from `antd`'s `Button`. Docs: https://ui.lobehub.com/components/base-ui/button
- [Collapsible](https://ui.lobehub.com/skills/components/base-ui/collapsible.md): Category: Data Display. Controlled show / hide with the same height and fade motion as Accordion panels, for sections that render their own header. Outline: Default. Docs: https://ui.lobehub.com/components/base-ui/collapsible
- [ContextMenu](https://ui.lobehub.com/skills/components/base-ui/context-menu.md): Category: Navigation. ContextMenu provides an imperative API to open a menu at the last pointer position. Render a host once and call showContextMenu with Menu items. Outline: Viewport Overflow, Description, Header & Footer, Virtual List, Icon Space Mode, showContextMenu, ContextMenuHost, ContextMenuTrigger, Item click behavior. Docs: https://ui.lobehub.com/components/base-ui/context-menu
- [DraggablePanel](https://ui.lobehub.com/skills/components/base-ui/draggable-panel.md): Category: Layout. 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. Docs: https://ui.lobehub.com/components/base-ui/draggable-panel
- [Drawer](https://ui.lobehub.com/skills/components/base-ui/drawer.md): Category: Feedback. Edge-anchored panel built directly on Base UI dialog primitives, with four placements, an optional sidebar layout, and nested push behaviour. Outline: Notes. Docs: https://ui.lobehub.com/components/base-ui/drawer
- [DropdownMenu](https://ui.lobehub.com/skills/components/base-ui/dropdown-menu.md): Category: Navigation. DropdownMenu renders a dropdown menu based on Base UI Menu primitives, aligned with ContextMenu item layout and styling. Outline: Keep Open on Item Click, Atom Components, Header & Footer, Icon Space Mode, Description, Icon Align, Virtual List, Tooltip Hover Stay, DropdownMenuV2, Menu Items. Docs: https://ui.lobehub.com/components/base-ui/dropdown-menu
- [FloatingPanel](https://ui.lobehub.com/skills/components/base-ui/floating-panel.md): Category: Feedback. Viewport-anchored floating panel built from Base UI modal atoms for contextual side conversations, task runs, inspectors, and other non-blocking auxiliary surfaces. Outline: Notes. Docs: https://ui.lobehub.com/components/base-ui/floating-panel
- [FloatingSheet](https://ui.lobehub.com/skills/components/base-ui/floating-sheet.md): Category: Feedback. Container-embedded bottom sheet with drag-to-resize, snap points, overlay/inline layout modes, and elevated/embedded visual variants. Docs: https://ui.lobehub.com/components/base-ui/floating-sheet
- [FocusScope](https://ui.lobehub.com/skills/components/base-ui/focus-scope.md): Category: Utils. Sticky keyboard regions. Point into a scope once and ↑ ↓ keep working there without holding focus; ← → jump between scopes and restore the last focused item. Outline: Model, FocusScope, useScopeArrowNav, useScopeSwitcher, Store. Docs: https://ui.lobehub.com/components/base-ui/focus-scope
- [Modal](https://ui.lobehub.com/skills/components/base-ui/modal.md): Category: Feedback. Base UI-powered Modal with antd-compatible API, supporting declarative, imperative, and atomic usage. Outline: z-index with DropdownMenu (TDD repro), z-index — DropdownMenu inside Modal (TDD repro), ModalClassNames, ModalStyles, createModal, confirmModal, createModalSystem, Atom Components, Hooks. Docs: https://ui.lobehub.com/components/base-ui/modal
- [Popover](https://ui.lobehub.com/skills/components/base-ui/popover.md): Category: Data Display. A floating card that displays additional content when triggered by hover or click. Outline: Atom Components, Popover Group (Singleton), Header Navigation, Placement, Hover-only (no click pin), Controlled Mode, Context (Imperative), Tooltip Inside Popover, Tooltip Hover Stay, Popover wrapping Tooltip (Edge Case), Popover wrapping Tooltip in Group (Edge Case), Popover. Docs: https://ui.lobehub.com/components/base-ui/popover
- [Radio](https://ui.lobehub.com/skills/components/base-ui/radio.md): Category: Data Entry. Base UI-powered Radio and RadioGroup with lobe visual style. Outline: Radio, RadioGroup. Docs: https://ui.lobehub.com/components/base-ui/radio
- [ScrollArea](https://ui.lobehub.com/skills/components/base-ui/scroll-area.md): Category: Layout. A native scroll container with custom scrollbars and gradient scroll fade. Outline: Horizontal fade, Fade in both directions, Content overflow (default `min-width: fit-content`), Usage, Anatomy (Atoms), Scroll fade (mask, scroll-driven), API Reference, ScrollArea, Root, Viewport, Content, Scrollbar. Docs: https://ui.lobehub.com/components/base-ui/scroll-area
- [Segmented](https://ui.lobehub.com/skills/components/base-ui/segmented.md): Category: Data Entry. Base UI-powered Segmented control — toggle-group semantics with a sliding active indicator. Drops antd dependency in favor of @base-ui/react/toggle-group. Outline: SegmentedOption. Docs: https://ui.lobehub.com/components/base-ui/segmented
- [Select](https://ui.lobehub.com/skills/components/base-ui/select.md): Category: Data Entry. Base UI-powered Select component. Outline: Viewport Bounds, SelectOption, SelectOptionGroup, SelectClassNames. Docs: https://ui.lobehub.com/components/base-ui/select
- [Skeleton](https://ui.lobehub.com/skills/components/base-ui/skeleton.md): Category: Data Display. Placeholder blocks that stand in for content while it loads. One primitive block, plus text-line and avatar helpers. Outline: Skeleton, Skeleton.Text, Skeleton.Avatar, Migration. Docs: https://ui.lobehub.com/components/base-ui/skeleton
- [Slider](https://ui.lobehub.com/skills/components/base-ui/slider.md): Category: Data Entry. Base UI-powered Slider and SliderWithInput components. Docs: https://ui.lobehub.com/components/base-ui/slider
- [Switch](https://ui.lobehub.com/skills/components/base-ui/switch.md): Category: Data Entry. Base UI-powered Switch component. Docs: https://ui.lobehub.com/components/base-ui/switch
- [Tabs](https://ui.lobehub.com/skills/components/base-ui/tabs.md): Category: Navigation. Base UI-powered Tabs with iOS-flavored interactions — no hover background, tap-scale feedback, and a sliding active indicator across rounded / square / point variants. Outline: TabsItem, Variants. Docs: https://ui.lobehub.com/components/base-ui/tabs
- [Tag](https://ui.lobehub.com/skills/components/base-ui/tag.md): Category: Data Display. Standalone colored tag for statuses and categorization, with preset and hex colors, sizes, shapes, variants, and a closable affordance. Outline: APIs, Color, Variants, Migrating from antd Tag. Docs: https://ui.lobehub.com/components/base-ui/tag
- [Text](https://ui.lobehub.com/skills/components/base-ui/text.md): Category: Typography. Base UI-powered Text typography component with semantic types, formatting options, and single- or multi-line ellipsis with overflow-aware tooltip. Outline: Basic, Shiny, Text, textGroupStyles. Docs: https://ui.lobehub.com/components/base-ui/text
- [Toast](https://ui.lobehub.com/skills/components/base-ui/toast.md): Category: Feedback. A toast notification component for displaying brief messages. Outline: Basic Usage, Promise Toast, Deduplicated Toast, Dismiss Toast, ToastHost, toast, ToastOptions, ToastAction, ToastActionVariant, ToastPosition, ToastType. Docs: https://ui.lobehub.com/components/base-ui/toast
- [ToggleGroup](https://ui.lobehub.com/skills/components/base-ui/toggle-group.md): Category: Data Entry. Base UI-powered ToggleGroup — a frameless radio-style group of action buttons for toolbar mode switches. Single selection is enforced; the pressed item cannot be deselected. Outline: Default, Responsive Labels, ToggleGroupOption, Variants. Docs: https://ui.lobehub.com/components/base-ui/toggle-group
- [Tooltip](https://ui.lobehub.com/skills/components/base-ui/tooltip.md): Category: Data Display. The Tooltip component is used to provide additional information to the user when they hover over a specific element. Outline: Tooltip Group (Singleton), Trigger Removal, Children Preservation On Reset, Tooltip, TooltipGroup. Docs: https://ui.lobehub.com/components/base-ui/tooltip
- [Tree](https://ui.lobehub.com/skills/components/base-ui/tree.md): Category: Data Display. Data-driven tree with expand, single/multiple selection, linked checkboxes, keyboard navigation and rounded SVG guide lines. A drop-in for the common antd Tree props. Outline: Default, Guide lines, Checkable, Multiple selection, Keyboard, TreeDataNode. Docs: https://ui.lobehub.com/components/base-ui/tree

## brand

- [BrandLoading](https://ui.lobehub.com/skills/components/brand/brand-loading.md): Category: Components. A loading component that displays animated brand text logos, such as LobeHub or LobeChat, with a loading animation effect. Docs: https://ui.lobehub.com/components/brand/brand-loading
- [LobeChat](https://ui.lobehub.com/skills/components/brand/lobe-chat.md): Category: Combine. A versatile brand component for displaying LobeChat logo in various styles including 3D, flat, monochrome, text, and combined formats. Docs: https://ui.lobehub.com/components/brand/lobe-chat
- [LobeChatText](https://ui.lobehub.com/skills/components/brand/lobe-chat-text.md): Category: Components. Renders the LobeChat wordmark as a current-color SVG with configurable size. Docs: https://ui.lobehub.com/components/brand/lobe-chat-text
- [LobeHub](https://ui.lobehub.com/skills/components/brand/lobe-hub.md): Category: Combine. A versatile brand component for displaying LobeHub logo in various styles including 3D, flat, monochrome, text, and combined formats. Docs: https://ui.lobehub.com/components/brand/lobe-hub
- [LobeHubText](https://ui.lobehub.com/skills/components/brand/lobe-hub-text.md): Category: Components. Renders the LobeHub wordmark as a current-color SVG with configurable size. Docs: https://ui.lobehub.com/components/brand/lobe-hub-text
- [Logo3d](https://ui.lobehub.com/skills/components/brand/logo3d.md): Category: Components. A component that renders a 3D image of the LobeHub logo using a CDN-hosted asset. Outline: APIs. Docs: https://ui.lobehub.com/components/brand/logo3d
- [LogoFlat](https://ui.lobehub.com/skills/components/brand/logo-flat.md): Category: Components. Renders the full-color LobeHub logo mark from @lobehub/icons. Docs: https://ui.lobehub.com/components/brand/logo-flat
- [LogoMono](https://ui.lobehub.com/skills/components/brand/logo-mono.md): Category: Components. Renders the monochrome LobeHub logo mark from @lobehub/icons. Docs: https://ui.lobehub.com/components/brand/logo-mono
- [LogoThree](https://ui.lobehub.com/skills/components/brand/logo-three.md): Category: Spline. A 3D interactive logo component that renders a Spline-based 3D model of the LobeHub logo with a fallback image while loading. Outline: APIs. Docs: https://ui.lobehub.com/components/brand/logo-three

## chat

- [BackBottom](https://ui.lobehub.com/skills/components/chat/back-bottom.md): Category: Navigation. BackBottom is a scroll navigation button that appears when users have scrolled up in a chat interface. It monitors scroll position and automatically shows/hides based on a configurable visibility threshold. When clicked, it smoothly scrolls the target container back to the bottom, making it ideal for chat applications where new messages appear at the bottom. Docs: https://ui.lobehub.com/components/chat/back-bottom
- [ChatHeader](https://ui.lobehub.com/skills/components/chat/chat-header.md): Category: Layout. ChatHeader is a versatile navigation component for chat interfaces. It offers a three-section layout (left, center, right) with customizable content and styling. The header includes an optional back button, supports flexible content arrangement, and inherits all FlexboxProps for additional layout customization. Outline: ChatHeaderTitle. Docs: https://ui.lobehub.com/components/chat/chat-header
- [ChatInputArea](https://ui.lobehub.com/skills/components/chat/chat-input-area.md): Category: Data Entry. The ChatInputArea component is used to display a chat input area with expandable and collapsible feature, and a send button to submit the chat message. It can be customized with actions and footer, and also supports input value change and composition event for Chinese input. Outline: ChatInputActionBar, ChatSendButton. Docs: https://ui.lobehub.com/components/chat/chat-input-area
- [ChatItem](https://ui.lobehub.com/skills/components/chat/chat-item.md): Category: Data Display. ChatItem is a versatile React component that displays chat messages with support for avatars, message content, and interactive actions. It offers various styling options including bubble and docs variants, left/right placement, and responsive layouts. Features include loading states, error handling, editability, and custom rendering options. Docs: https://ui.lobehub.com/components/chat/chat-item
- [ChatList](https://ui.lobehub.com/skills/components/chat/chat-list.md): Category: Data Display. ChatList is a flexible component for rendering chat conversations with rich customization options. It displays an array of ChatMessage objects with support for loading states, custom message rendering, action handling, and error management. The component supports 'bubble' and 'docs' variants, can display history dividers, and allows for role-specific customization of messages, items, and actions. Outline: Types. Docs: https://ui.lobehub.com/components/chat/chat-list
- [EditableMessage](https://ui.lobehub.com/skills/components/chat/editable-message.md): Category: Data Entry. The EditableMessage component is used to display a message that can be edited by the user. It consists of a Markdown component and an optional modal for editing the message. When the user clicks on the message, it enters editing mode and displays an input field for editing the message. Docs: https://ui.lobehub.com/components/chat/editable-message
- [EditableMessageList](https://ui.lobehub.com/skills/components/chat/editable-message-list.md): Category: Data Entry. EditableMessageList is a React component that allows users to edit a list of chat messages, including their content and role. It is designed to be used in chatbot building applications. Outline: Types. Docs: https://ui.lobehub.com/components/chat/editable-message-list
- [LoadingDots](https://ui.lobehub.com/skills/components/chat/loading-dots.md): Category: Feedback. LoadingDots is an animated loading indicator component that displays three animated dots with various animation styles. It supports multiple variants including fade, pulse, wave, orbit, and typing effects. The component is fully customizable in terms of size and color, automatically adapting to the theme's primary color by default. Outline: Default. Docs: https://ui.lobehub.com/components/chat/loading-dots
- [MessageInput](https://ui.lobehub.com/skills/components/chat/message-input.md): Category: Data Entry. A message input component with a code editor for Markdown content, with confirm and cancel buttons. Supports keyboard shortcuts and custom button rendering. Docs: https://ui.lobehub.com/components/chat/message-input
- [MessageModal](https://ui.lobehub.com/skills/components/chat/message-modal.md): Category: Feedback. The MessageModal component is a modal window that can display either a message in Markdown format or a message input field for editing the message. It provides a seamless way to view and edit Markdown content with support for switching between viewing and editing modes. Docs: https://ui.lobehub.com/components/chat/message-modal
- [TokenTag](https://ui.lobehub.com/skills/components/chat/token-tag.md): Category: Data Display. TokenTag is a dynamic button component that visualizes token usage with emoji indicators and textual information. It displays either remaining or used tokens with visual states (normal, low, overload) based on usage percentage. The component adapts to different screen sizes and supports customizable text labels and button shapes. Outline: Default. Docs: https://ui.lobehub.com/components/chat/token-tag

## color

- [ColorScales](https://ui.lobehub.com/skills/components/color/color-scales.md): Category: General. The ColorScales component is a memoized component used to display a color scale. It receives props containing the name of the scale, the color scale items, and a number representing the index of the mid-highlight. The component renders a set of ScaleRow components, each representing a different part of the color scale. Docs: https://ui.lobehub.com/components/color/color-scales
- [CssVar](https://ui.lobehub.com/skills/components/color/css-var.md): Category: General. The CssVar component is a memoized component used to display a color scale. It receives props containing the name of the scale, the color scale items, and a number representing the index of the mid-highlight. The component renders a set of ScaleRow components, each representing a different part of the color scale. Docs: https://ui.lobehub.com/components/color/css-var

## dashboard

- [ConsoleNav](https://ui.lobehub.com/skills/components/dashboard/console-nav.md): Category: Navigation. ConsoleNav is grouped sidebar navigation for a dashboard. It collapses to an icon rail, keeps a badge as a dot, and leaves link rendering to the app so it is not tied to a router. Outline: Default, Tree. Docs: https://ui.lobehub.com/components/dashboard/console-nav
- [ConsoleShell](https://ui.lobehub.com/skills/components/dashboard/console-shell.md): Category: Layout. ConsoleShell is a dashboard frame with a collapsible sidebar, a compact navigation drawer, and an inset workspace card. Brand, navigation, and account slots stay empty so the shell can be reused without a product identity. Outline: Default. Docs: https://ui.lobehub.com/components/dashboard/console-shell
- [StatCard](https://ui.lobehub.com/skills/components/dashboard/stat-card.md): Category: Data Display. StatCard is a metric tile with a label, a figure, and a semantic delta. The wash is a neutral gray; product-specific color fields stay in the app. Docs: https://ui.lobehub.com/components/dashboard/stat-card
- [AuthLayout](https://ui.lobehub.com/skills/components/dashboard/auth-layout.md): Category: Layout. AuthLayout centers a sign-in card on the workspace canvas. The logo, corner tools, and optional side panel are slots, so the frame carries no product branding. Outline: Default. Docs: https://ui.lobehub.com/components/dashboard/auth-layout
- [Breadcrumb](https://ui.lobehub.com/skills/components/dashboard/breadcrumb.md): Category: Navigation. Breadcrumb shows where a dashboard page sits. Ancestors can link, the current page is plain text, and an optional group name drops out on narrow screens. Docs: https://ui.lobehub.com/components/dashboard/breadcrumb
- [PageSkeleton](https://ui.lobehub.com/skills/components/dashboard/page-skeleton.md): Category: Data Display. PageSkeleton is the loading shape of a dashboard page — header, metric tiles, and a table — plus the announcer that tells assistive tech the page is loading. Docs: https://ui.lobehub.com/components/dashboard/page-skeleton
- [PageTabs](https://ui.lobehub.com/skills/components/dashboard/page-tabs.md): Category: Navigation. PageTabs is in-page navigation with an optional count on each tab. The strip scrolls instead of wrapping, so the panel below does not jump. Docs: https://ui.lobehub.com/components/dashboard/page-tabs
- [Surface](https://ui.lobehub.com/skills/components/dashboard/surface.md): Category: Layout. Surface is an elevated card for dashboard panels. It steps the fill and border up from the workspace canvas so nested content stays distinct in light and dark themes. Docs: https://ui.lobehub.com/components/dashboard/surface
- [PageHeader](https://ui.lobehub.com/skills/components/dashboard/page-header.md): Category: Layout. PageHeader is the title row of a dashboard page. It pairs a heading and description with an action slot, and can place a mark beside the title. Docs: https://ui.lobehub.com/components/dashboard/page-header
- [RouteProgress](https://ui.lobehub.com/skills/components/dashboard/route-progress.md): Category: Navigation. RouteProgress is a thin loading bar fixed to the top of the viewport. Pass loading from the router; the bar creeps while work is in flight, then finishes and fades. Docs: https://ui.lobehub.com/components/dashboard/route-progress
- [FilterSidebar](https://ui.lobehub.com/skills/components/dashboard/filter-sidebar.md): Category: Layout. FilterSidebar splits a dashboard page into a resizable filter rail and a content pane. On narrow screens the same choices move into a drawer behind a summary button. Outline: Default. Docs: https://ui.lobehub.com/components/dashboard/filter-sidebar

## icons

- [Auth0](https://ui.lobehub.com/skills/components/icons/auth0.md): Category: Auth Icons. Provides the Auth0 monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/auth0
- [Authelia](https://ui.lobehub.com/skills/components/icons/authelia.md): Category: Auth Icons. Provides the Authelia monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/authelia
- [Authentik](https://ui.lobehub.com/skills/components/icons/authentik.md): Category: Auth Icons. Provides the Authentik monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/authentik
- [Casdoor](https://ui.lobehub.com/skills/components/icons/casdoor.md): Category: Auth Icons. Provides the Casdoor monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/casdoor
- [Clerk](https://ui.lobehub.com/skills/components/icons/clerk.md): Category: Auth Icons. Provides the Clerk monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/clerk
- [Cloudflare](https://ui.lobehub.com/skills/components/icons/cloudflare.md): Category: Auth Icons. Re-exports the Cloudflare icon and avatar variants from @lobehub/icons. Docs: https://ui.lobehub.com/components/icons/cloudflare
- [DingTalk](https://ui.lobehub.com/skills/components/icons/ding-talk.md): Category: Channel Icons. Provides the DingTalk monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/ding-talk
- [Discord](https://ui.lobehub.com/skills/components/icons/discord.md): Category: Channel Icons. Provides the Discord monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/discord
- [Extra Icons](https://ui.lobehub.com/skills/components/icons/lucide-extra.md): Category: Lucide Icons. Exports the extended Lucide-compatible icon set for brands, pointer actions, agents, providers, and tree controls. Docs: https://ui.lobehub.com/components/icons/lucide-extra
- [Github](https://ui.lobehub.com/skills/components/icons/github.md): Category: Auth Icons. Re-exports the GitHub icon and avatar variants from @lobehub/icons. Docs: https://ui.lobehub.com/components/icons/github
- [GoogleChat](https://ui.lobehub.com/skills/components/icons/google-chat.md): Category: Channel Icons. Provides the GoogleChat monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/google-chat
- [IMessage](https://ui.lobehub.com/skills/components/icons/i-message.md): Category: Channel Icons. Provides the IMessage monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/i-message
- [Lark](https://ui.lobehub.com/skills/components/icons/lark.md): Category: Channel Icons. Provides the Lark monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/lark
- [Line](https://ui.lobehub.com/skills/components/icons/line.md): Category: Channel Icons. Provides the Line monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/line
- [Logto](https://ui.lobehub.com/skills/components/icons/logto.md): Category: Auth Icons. Provides the Logto monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/logto
- [MicrosoftEntra](https://ui.lobehub.com/skills/components/icons/microsoft-entra.md): Category: Auth Icons. Provides the MicrosoftEntra monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/microsoft-entra
- [MicrosoftTeams](https://ui.lobehub.com/skills/components/icons/microsoft-teams.md): Category: Channel Icons. Provides the MicrosoftTeams monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/microsoft-teams
- [NextAuth](https://ui.lobehub.com/skills/components/icons/next-auth.md): Category: Auth Icons. Provides the NextAuth monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/next-auth
- [QQ](https://ui.lobehub.com/skills/components/icons/qq.md): Category: Channel Icons. Provides the QQ monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/qq
- [Slack](https://ui.lobehub.com/skills/components/icons/slack.md): Category: Channel Icons. Provides the Slack monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/slack
- [Telegram](https://ui.lobehub.com/skills/components/icons/telegram.md): Category: Channel Icons. Provides the Telegram monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/telegram
- [WeChat](https://ui.lobehub.com/skills/components/icons/we-chat.md): Category: Channel Icons. Provides the WeChat monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/we-chat
- [WhatsApp](https://ui.lobehub.com/skills/components/icons/whats-app.md): Category: Channel Icons. Provides the WhatsApp monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/whats-app
- [Zitadel](https://ui.lobehub.com/skills/components/icons/zitadel.md): Category: Auth Icons. Provides the Zitadel monochrome icon and avatar variant, together with title and primary-color metadata. Docs: https://ui.lobehub.com/components/icons/zitadel

## mdx

- [Callout](https://ui.lobehub.com/skills/components/mdx/callout.md): Category: Built-ins. A styled component to highlight important content in an MDX document with different visual styles based on the content type (info, tip, warning, error, or important). Outline: APIs. Docs: https://ui.lobehub.com/components/mdx/callout
- [Cards](https://ui.lobehub.com/skills/components/mdx/cards.md): Category: Built-ins. A container component for displaying a collection of cards in an MDX document. Docs: https://ui.lobehub.com/components/mdx/cards
- [FileTree](https://ui.lobehub.com/skills/components/mdx/file-tree.md): Category: Built-ins. A component for displaying file and folder structures in MDX documents. Docs: https://ui.lobehub.com/components/mdx/file-tree
- [Mdx](https://ui.lobehub.com/skills/components/mdx/mdx.md): Category: Components. A component that renders MDX content with enhanced features like LaTeX support, Mermaid diagrams, and customized MDX components. Outline: APIs. Docs: https://ui.lobehub.com/components/mdx/mdx
- [mdxComponents](https://ui.lobehub.com/skills/components/mdx/mdx-components.md): Category: Components. A collection of enhanced React components for rendering MDX content with improved styling and functionality. Outline: Usage, Components Included. Docs: https://ui.lobehub.com/components/mdx/mdx-components
- [Steps](https://ui.lobehub.com/skills/components/mdx/steps.md): Category: Built-ins. A component for displaying ordered steps or instructions in MDX documents. Steps are automatically styled with numbering for a clear sequential flow. Outline: APIs. Docs: https://ui.lobehub.com/components/mdx/steps
- [Tabs](https://ui.lobehub.com/skills/components/mdx/tabs.md): Category: Built-ins. A component for creating tabbed content in MDX documents that allows switching between different content sections. Docs: https://ui.lobehub.com/components/mdx/tabs

## mobile

- [ChatHeader](https://ui.lobehub.com/skills/components/mobile/chat-header.md): Category: Layout. Provides a mobile chat header with optional safe-area padding, back navigation, and left, center, and right content slots. Docs: https://ui.lobehub.com/components/mobile/chat-header
- [ChatInputArea](https://ui.lobehub.com/skills/components/mobile/chat-input-area.md): Category: Chat. The ChatInputArea component is used to display a chat input area with expandable and collapsible feature, and a send button to submit the chat message. It can be customized with actions and footer, and also supports input value change and composition event for Chinese input. Docs: https://ui.lobehub.com/components/mobile/chat-input-area
- [SafeArea](https://ui.lobehub.com/skills/components/mobile/safe-area.md): Category: Layout. Adds top or bottom spacing for mobile safe-area insets. Docs: https://ui.lobehub.com/components/mobile/safe-area
- [TabBar](https://ui.lobehub.com/skills/components/mobile/tab-bar.md): Category: Layout. Renders a controlled or uncontrolled mobile tab bar with active-state render functions and optional bottom safe-area padding. Docs: https://ui.lobehub.com/components/mobile/tab-bar

## storybook

- [StoryBook](https://ui.lobehub.com/skills/components/storybook/story-book.md): Category: Components. The StoryBook component is a customizable panel that can be used to display and edit data. It is composed of a left section, where the main content is displayed, and a right section, where a LevaPanel component is rendered. The LevaPanel is a third-party component that allows users to edit and manipulate data. Docs: https://ui.lobehub.com/components/storybook/story-book

## Optional

- [LobeHub UI Kit](https://ui.lobehub.com/): Lobe UI is an open-source UI component library for building AIGC web apps. Outline: Start building your AIGC app now, Themeable, Fast, Light and dark UI. Docs: https://ui.lobehub.com/
- [Changelog](https://ui.lobehub.com/changelog): New updates and improvements to @lobehub/ui. Docs: https://ui.lobehub.com/changelog