Components
74 pages
General7
- ButtonButton 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.
- ActionIconActionIcon 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.
- ActionIconGroupActionIconGroup is a component for rendering multiple buttons with unified styling and layout control. It handles groups of ActionIcon components with consistent appearance and behavior.
- BlockA flexible container that extends Flexbox with variants, shadows, and glass effects.
- CheckboxCheckbox 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.
- FreezePrevents DOM updates in descendant content through React Suspense, primarily to keep exit animations visually stable.
- IconIcon is a component based on lucide-react that provides rich icon selection and customization options. It supports various sizes, colors, and animations.
Data Display23
- AccordionA vertically stacked set of interactive headings whose items reveal titled content with controlled or uncontrolled expansion.
- AvatarAvatar 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.
- CodeDiffThe 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.
- CollapseAn expandable content container that extends Ant Design Collapse with additional styling, icons, and header descriptions.
- EmptyEmpty component displays an empty state with customizable icon, emoji, image, title, description, and action buttons, in default and dashed variants. It's commonly used to indicate that there's no data or content to display.
- FileTypeIconFileTypeIcon 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.
- FluentEmojiThe 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.
- GroupAvatarGroupAvatar 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.
- GuideCardGuideCard 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.
- HighlighterThe 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.
- HotkeyHotkey component displays keyboard shortcuts or key combinations in a visually appealing way, supporting both standard and Mac keyboard styles with various visual options.
- HtmlPreviewHtmlPreview 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.
- ImageImage 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.
- ListRenders selectable list items with titles, descriptions, avatars, actions, pin and loading states, and active-key handling.
- MarkdownMarkdown 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.
- MaterialFileTypeIconMaterialFileTypeIcon 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.
- MermaidMermaid 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.
- SegmentedA deprecated styled wrapper around Ant Design Segmented with filled, outlined, or borderless variants and optional shadow, glass, and padding controls.
- SkeletonSkeleton 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.
- SnippetThe 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.
- SortableListSortableList 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.
- TagTag is used for marking and categorizing content with small colorful labels. It offers multiple styles, sizes, and color options for different scenarios.
- VideoVideo 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.
Data Entry18
- AutoCompleteProvides a dropdown of suggestions as the user types, extending Ant Design AutoComplete with additional styling options.
- CodeEditorEdits code with syntax highlighting for multiple programming languages.
- ColorSwatchesDisplays selectable color swatches with an optional picker for custom colors.
- CopyButtonCopyButton 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.
- DatePickerA DatePicker component that extends Ant Design's DatePicker with additional styling options. It provides different visual variants and an optional shadow effect.
- DownloadButtonDownloadButton 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.
- EditableTextEditableText 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.
- EditorSlashMenuEditorSlashMenu is a slash-command menu built on Base UI Autocomplete primitives, styled consistently with DropdownMenu.
- EmojiPickerEmojiPicker 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.
- FormHigh performance Form component with data scope management. Including data collection, verification, and styles.
- FormModalFormModal 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.
- HotkeyInputHotkeyInput is a specialized input component for capturing keyboard shortcuts. It allows users to record key combinations by pressing keys, with visual feedback and validation.
- ImageSelectImageSelect 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.
- InputA basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
- SearchBarSearchBar that includes an input field with a search icon and clear button, allowing users to easily search for specific items or content.
- SelectSelect component lets users choose from a list of options in a dropdown menu. It supports various styling options and custom suffix icons.
- SliderWithInputSliderWithInput 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.
- ThemeSwitchThemeSwitch component is a dropdown menu that allows users to switch between different theme modes.
Feedback3
- AlertAlert is a component used to display important messages or notifications to the user. It can be customized with different types, icons, and actions.
- DrawerDrawer 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.
- ModalModal 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.
Layout9
- DraggablePanelDraggablePanel 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.
- FlexFlexible layout components based on Flexbox
- FooterThe Footer component is used to display a website footer. It supports various customization options like column layout, bottom content, and theme selection.
- GridGrid is a responsive layout component that arranges child elements in a grid pattern. It automatically adjusts the number of columns based on available space.
- HeaderThe Header component is a customizable header section with a logo, navigation, and actions. It is responsive and adapts to mobile and desktop screens.
- LayoutThe 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.
- MaskShadowMaskShadow 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.
- ScrollAreaA native scroll container with custom scrollbars and gradient scroll fade.
- ScrollShadowScrollShadow 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.
Navigation9
- BurgerA responsive navigation control that opens a drawer of menu items from a hamburger button.
- ContextMenuContextMenu provides an imperative API to open a menu at the last pointer position. Render a host once and call showContextMenu with Menu items.
- DraggableSideNavA generic resizable side panel container with collapse/expand functionality. Supports custom header, body, and footer content with smart drag-to-collapse behavior.
- DropdownDropdown 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.
- DropdownMenuDropdownMenu renders a dropdown menu based on Base UI Menu primitives, aligned with ContextMenu item layout and styling.
- MenuMenu 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.
- SideNavThe 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.
- TabsTabs 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.
- TocThe 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.
Theme4
- ConfigProviderConfigures library-wide CDN resource resolution and the motion runtime for descendant components.
- FontLoaderThe 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.
- MotionProviderMotionProvider lets you choose which motion component (motion or m) Lobe UI uses.
- ThemeProviderThemeProvider is a component that provides a theme to all the child components. It supports theme customization, custom stylish objects, and font loading.