LobeHub UI Kit

https://ui.lobehub.com
Admin
An open-source UI component library for building AIGC web applications with Antd-compatible...
Tokens:63,435
Snippets:683
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install LobeHub UI

Source: https://ui.lobehub.com/

Command to add the LobeHub UI package to your project using pnpm.

```bash
pnpm add @lobehub/ui
```

--------------------------------

### Migrate from Ant Design Tag

Source: https://ui.lobehub.com/components/base-ui/tag

Example showing the import replacement and basic usage of the Tag component.

```tsx
import { Tag } from '@lobehub/ui/base-ui';

<Tag color="success" variant="solid">
  online
</Tag>;
```

--------------------------------

### showContextMenu

Source: https://ui.lobehub.com/components/context-menu

Opens a context menu at the latest pointer position with the provided items and configuration options.

```APIDOC
## showContextMenu(items, options?)

### Description
Opens the menu at the latest pointer position. Menu items are the same as Menu/Dropdown items.

### Parameters
- **items** (ContextMenuItem[]) - Required - The list of menu items to display.
- **options** (ShowContextMenuOptions) - Optional - Configuration options for the menu.

#### ShowContextMenuOptions
- **footer** (ReactNode) - Optional - Pinned footer slot rendered below the scrollable items area.
- **header** (ReactNode) - Optional - Pinned header slot rendered above the scrollable items area.
- **iconAlign** ('center' | 'start') - Optional - Icon vertical alignment when items have desc. Default: 'center'.
- **iconSpaceMode** ('global' | 'group') - Optional - Icon space reservation mode. Default: 'global'.
```

--------------------------------

### Content Overflow Example

Source: https://ui.lobehub.com/components/scroll-area

Example of a wide code block that triggers horizontal overflow behavior.

```javascript
const veryLongVariableName = 'This single non-breaking line is much wider than the surrounding flex container';
function example(input) {
  return input.map((item) => item.toString().padStart(40)).join(' >>> ');
}
```

--------------------------------

### showContextMenu

Source: https://ui.lobehub.com/components/base-ui/context-menu

Opens the context menu at the latest pointer position.

```APIDOC
## showContextMenu(items, options?)

### Description
Opens the context menu at the latest pointer position. Menu items are the same as Menu/Dropdown items.

### Parameters
- **items** (ContextMenuItem[]) - Required - The list of menu items to display.
- **options** (ShowContextMenuOptions) - Optional - Configuration options for the menu.

#### ShowContextMenuOptions
- **footer** (ReactNode) - Optional - Pinned footer slot rendered below the scrollable items area.
- **header** (ReactNode) - Optional - Pinned header slot rendered above the scrollable items area.
- **iconAlign** ('center' | 'start') - Optional - Icon vertical alignment when items have desc. Default: 'center'.
- **iconSpaceMode** ('global' | 'group') - Optional - Icon space reservation mode. Default: 'global'.
```

--------------------------------

### Chat Client Streaming Example

Source: https://ui.lobehub.com/

Example of initiating a streaming chat request using a client.

```javascript
const { message } = await client.chat({
  model: 'claude-fable-5',
  stream: true,
})
```

--------------------------------

### Disable Close Icon

Source: https://ui.lobehub.com/components/drawer

Example of how to disable the close icon using the closeIcon property.

```jsx
<Drawer closeIcon={false} />
```

--------------------------------

### Import ConfigProvider

Source: https://ui.lobehub.com/components/config-provider

Import the ConfigProvider component from the @lobehub/ui library.

```typescript
import { ConfigProvider } from '@lobehub/ui';
```

--------------------------------

### Import ContextMenu

Source: https://ui.lobehub.com/components/base-ui/context-menu

Import the ContextMenu component from the base-ui library.

```typescript
import { ContextMenu } from '@lobehub/ui/base-ui';
```

--------------------------------

### Importing GuideCard

Source: https://ui.lobehub.com/components/guide-card

The component is imported from the @lobehub/ui package.

```typescript
import { GuideCard } from '@lobehub/ui';
```

--------------------------------

### ThemeProvider

Source: https://ui.lobehub.com/components/theme-provider

The primary component for wrapping the application to provide theme context and global styles.

```APIDOC
## ThemeProvider

### Description
ThemeProvider is a component that provides a theme to all child components, supporting theme customization, custom stylish objects, and font loading.

### Import
`import { ThemeProvider } from '@lobehub/ui';`

### Properties
- **appearance** (string) - The display appearance theme (e.g., 'light', 'dark'). Defaults to 'light'.
- **appId** (string) - Application identifier.
- **children** (ReactNode) - The child components to be wrapped.
- **className** (string) - Custom CSS class name.
- **customFonts** (string[]) - Array of custom font names to load.
- **customStylish** (function) - Function to define custom stylish objects: `(theme: CustomStylishParams) => { [key: string]: any; }`.
- **customTheme** (object) - Custom theme configuration including `neutralColor` and `primaryColor`.
- **customToken** (function) - Function to define custom tokens: `(theme: CustomTokenParams) => { [key: string]: any; }`.
- **defaultAppearance** (string) - Default appearance setting.
- **defaultThemeMode** ('auto' | 'dark' | 'light') - Initial theme mode.
- **enableCustomFonts** (boolean) - Whether to enable custom font loading. Defaults to `true`.
- **enableGlobalStyle** (boolean) - Whether to apply global styles. Defaults to `true`.
- **getStaticInstance** (function) - Callback to retrieve static method instances: `(instances: StaticInstance) => void`.
- **onAppearanceChange** (function) - Callback triggered when appearance changes: `(appearance: ThemeAppearance) => void`.
- **onThemeModeChange** (function) - Callback triggered when theme mode changes: `(mode: ThemeMode) => void`.
- **prefixCls** (string) - Prefix for CSS classes.
- **staticInstanceConfig** (object) - Configuration for static methods like `message` or `notification`.
- **style** (CSSProperties) - Inline styles.
- **styled** (StyledConfig) - Configuration for styled components.
- **theme** (ThemeConfig | GetAntdTheme) - Ant Design theme configuration or a function returning a theme based on mode.
- **themeMode** ('auto' | 'dark' | 'light') - Theme display mode. Defaults to 'light'.
```

--------------------------------

### Import HotkeyInput

Source: https://ui.lobehub.com/components/hotkey-input

Import the component from the @lobehub/ui library to begin using it in your project.

```typescript
import { HotkeyInput } from '@lobehub/ui';
```

--------------------------------

### Import Tooltip Component

Source: https://ui.lobehub.com/components/base-ui/tooltip

Import the Tooltip component from the base-ui package.

```typescript
import { Tooltip } from '@lobehub/ui/base-ui';
```

--------------------------------

### Import Drawer Component

Source: https://ui.lobehub.com/components/base-ui/drawer

Import the Drawer component from the base-ui package to begin usage.

```typescript
import { Drawer } from '@lobehub/ui/base-ui';
```

--------------------------------

### Import HtmlPreview

Source: https://ui.lobehub.com/components/html-preview

Import the component from the @lobehub/ui library.

```typescript
import { HtmlPreview } from '@lobehub/ui';
```

--------------------------------

### Implement Markdown Alerts

Source: https://ui.lobehub.com/components/markdown

Use blockquote syntax with specific alert types to highlight critical information. Alerts cannot be nested and should be used sparingly.

```markdown
> [!NOTE] Useful information that users should know, even when skimming content.

> [!TIP] Helpful advice for doing things better or more easily.

> [!IMPORTANT] Key information users need to know to achieve their goal.

> [!WARNING] Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION] Advises about risks or negative outcomes of certain actions.
```

--------------------------------

### Import ContextMenu

Source: https://ui.lobehub.com/components/context-menu

Import the component from the @lobehub/ui package.

```typescript
import { ContextMenu } from '@lobehub/ui';
```

--------------------------------

### IconProvider

Source: https://ui.lobehub.com/components/icon

A context provider to set default properties for all Icon components within its scope.

```APIDOC
## IconProvider

### Description
Wraps components to provide default properties for all nested Icon instances.
```

--------------------------------

### Basic Alert Implementation

Source: https://ui.lobehub.com/components/base-ui/alert

Standard usage of the Alert component with title, description, and action button.

```tsx
import { Alert } from '@lobehub/ui/base-ui';

<Alert
  action={<button>Retry</button>}
  description="Confirm the endpoint and try again."
  title="Connection failed"
  type="error"
/>;
```

--------------------------------

### ImagePreviewOptions

Source: https://ui.lobehub.com/components/image

Configuration options for the image preview viewer.

```APIDOC
## ImagePreviewOptions

### Properties
- **src** (string) - Optional - Higher-resolution source swapped in after opening.
- **defaultZoom** ('auto' | 'actual' | 'fit') - Optional - Initial zoom scale, defaults to 'auto'.
- **autoZoomThreshold** (number) - Optional - Threshold for 'auto' zoom, defaults to 2.
- **maxScale** (number) - Optional - Maximum zoom scale, defaults to 8.
- **onOpenChange** ((open: boolean) => void) - Optional - Callback when preview opens or closes.
- **toolbarAddon** (ReactNode) - Optional - Additional content for the preview toolbar.
```

--------------------------------

### Select Component

Source: https://ui.lobehub.com/components/base-ui/select

The main Select component properties for configuring behavior, appearance, and event handling.

```APIDOC
## Select Component

### Properties
- **allowClear** (boolean) - Optional
- **autoFocus** (boolean) - Optional
- **behaviorVariant** ('default' | 'item-aligned') - Optional - Defaults to "default".
- **className** (string) - Optional
- **classNames** (SelectClassNames) - Optional
- **defaultOpen** (boolean) - Optional
- **defaultValue** (any) - Optional
- **disabled** (boolean) - Optional
- **id** (string) - Optional
- **labelRender** ((option: SelectOption<any>) => ReactNode) - Optional
- **listHeight** (number) - Optional - Defaults to 512.
- **listItemHeight** (number) - Optional
- **loading** (boolean) - Optional
- **mode** ('multiple' | 'tags') - Optional
- **name** (string) - Optional
- **onChange** ((value: any, option?: SelectOption<any> | SelectOption<any>[] | undefined) => void) - Optional
- **onOpenChange** ((open: boolean, eventDetails?: SelectRootChangeEventDetails) => void) - Optional
- **onSelect** ((value: any, option?: SelectOption<any> | undefined) => void) - Optional
- **open** (boolean) - Optional
- **optionRender** ((option: SelectOption<any>, info: { index: number; }) => ReactNode) - Optional
- **options** (SelectOptions<any>) - Optional
- **placeholder** (ReactNode) - Optional
- **popupClassName** (string) - Optional
- **popupMatchSelectWidth** (number | boolean) - Optional
- **prefix** (ReactNode | LucideIcon | FC<any>) - Optional
- **readOnly** (boolean) - Optional
- **required** (boolean) - Optional
- **selectedIndicatorVariant** ('bold' | 'check') - Optional - Defaults to "check".
- **shadow** (boolean) - Optional
- **showSearch** (boolean) - Optional
- **size** ('small' | 'middle' | 'large') - Optional - Defaults to "middle".
- **style** (CSSProperties) - Optional
- **suffixIcon** (ReactNode | LucideIcon | FC<any>) - Optional
- **suffixIconProps** (Omit<IconProps, 'icon'>) - Optional
- **tokenSeparators** (string[]) - Optional
- **value** (any) - Optional
- **variant** ('filled' | 'outlined' | 'borderless') - Optional
- **virtual** (boolean) - Optional
```

--------------------------------

### Skeleton.Text

Source: https://ui.lobehub.com/components/base-ui/skeleton

A helper component for rendering multiple lines of text placeholders, sized based on font metrics.

```APIDOC
## Skeleton.Text

### Properties
- **rows** (number) - Optional - Number of lines. Defaults to 1.
- **fontSize** (number) - Optional - Font size the lines stand in for.
- **lineHeight** (number) - Optional - Line height the lines stand in for. Defaults to 1.6.
- **width** (number | string | (number | string)[]) - Optional - Width of lines. Defaults to '100%', or last line '66%' when rows > 1.
- **gap** (number) - Optional - Explicit gap between lines.
- **animated** (boolean | 'fade' | 'sweep') - Optional - Motion style while loading. Defaults to 'fade'.
```

--------------------------------

### Import DropdownMenu

Source: https://ui.lobehub.com/components/dropdown-menu

Import the DropdownMenu component from the @lobehub/ui package.

```typescript
import { DropdownMenu } from '@lobehub/ui';
```

--------------------------------

### Import ChatInputArea

Source: https://ui.lobehub.com/components/chat/chat-input-area

Import the ChatInputArea component from the library to begin using it in your project.

```typescript
import { ChatInputArea } from '@lobehub/ui/chat';
```

--------------------------------

### Import Highlighter

Source: https://ui.lobehub.com/components/highlighter

Import the Highlighter component from the @lobehub/ui package.

```typescript
import { Highlighter } from '@lobehub/ui';
```

--------------------------------

### Show a confirmation modal

Source: https://ui.lobehub.com/components/base-ui/modal

Use confirmModal to trigger a pre-built confirmation dialog. Ensure ModalHost is rendered in the application tree.

```typescript
import { confirmModal, ModalHost } from '@lobehub/ui/base-ui';

// Must render <ModalHost /> somewhere in your app (shared with createModal)
const { close, destroy } = confirmModal({
  title: 'Delete item?',
  content: 'This action cannot be undone.',
  okText: 'Delete',
  okButtonProps: { danger: true },
  onOk: async () => {
    await deleteItem();
  },
  onCancel: () => {},
});
```

--------------------------------

### LayoutHeader

Source: https://ui.lobehub.com/components/layout

Header component for the layout.

```APIDOC
## LayoutHeader

### Description
Header component used within the layout.

### Properties
- **headerHeight** (number) - Height of the header.
```

--------------------------------

### Import FluentEmoji component

Source: https://ui.lobehub.com/components/fluent-emoji

Import the component from the @lobehub/ui package to begin using it in your project.

```typescript
import { FluentEmoji } from '@lobehub/ui';
```

--------------------------------

### Importing the QQ icon

Source: https://ui.lobehub.com/components/icons/qq

Use this import statement to access the QQ icon component within your project.

```typescript
import { QQ } from '@lobehub/ui/icons';
```

--------------------------------

### Basic Toast Usage

Source: https://ui.lobehub.com/components/base-ui/toast

Mount the ToastHost component once in your application and use the toast function to trigger notifications.

```typescript
import { ToastHost, toast } from '@lobehub/ui/base-ui';

// Add ToastHost to your app (only once)
function App() {
  return (
    <>
      <ToastHost />
      <YourApp />
    </>
  );
}

// Use toast anywhere in your app
toast.success('Operation successful!');
toast.error('Something went wrong!');
toast.info('Here is some information.');
toast.warning('This is a warning!');
toast.loading('Loading...');

// Custom toast
toast({
  title: 'Custom Toast',
  description: 'This is a custom toast message.',
  type: 'info',
  duration: 3000,
});
```

--------------------------------

### ToastHost

Source: https://ui.lobehub.com/components/base-ui/toast

The ToastHost component must be rendered once in your application to enable toast notifications.

```APIDOC
## ToastHost

### Description
Configures the global toast container. Must be rendered once in the application tree.

### Properties
- **position** (ToastPosition) - Optional - Toast position, default: 'bottom-right'
- **duration** (number) - Optional - Default duration in ms, default: 5000
- **limit** (number) - Optional - Maximum number of toasts, default: 5
- **swipeDirection** ('left' | 'right' | 'up' | 'down' | Array) - Optional - Swipe direction to dismiss, default: ['down', 'right']
- **root** (HTMLElement | ShadowRoot | null) - Optional - Portal container
- **className** (string) - Optional - Additional class name
```

--------------------------------

### Import ThemeSwitch component

Source: https://ui.lobehub.com/components/theme-switch

Import the component from the @lobehub/ui package to use it in your application.

```typescript
import { ThemeSwitch } from '@lobehub/ui';
```

--------------------------------

### Import Alert component

Source: https://ui.lobehub.com/components/base-ui/alert

Import the Alert component from the base-ui library.

```typescript
import { Alert } from '@lobehub/ui/base-ui';
```

--------------------------------

### Display an image

Source: https://ui.lobehub.com/components/markdown

Use standard Markdown syntax to embed images from URLs, relative paths, or data URIs.

```markdown
![Screenshot](https://myoctocat.com/assets/images/base-octocat.svg)
```

--------------------------------

### createModalSystem

Source: https://ui.lobehub.com/components/base-ui/modal

Creates an isolated modal system with its own stack, useful for micro-frontend or Shadow DOM environments.

```APIDOC
## createModalSystem

### Description
Creates an isolated modal system with its own stack, separate from the global exports.

### ModalHost Parameters
- **root** (HTMLElement | ShadowRoot | null) - Optional - Custom mount root for the portal.
```

--------------------------------

### Import Text Component

Source: https://ui.lobehub.com/components/base-ui/text

Import the Text component from the base-ui package.

```typescript
import { Text } from '@lobehub/ui/base-ui';
```

--------------------------------

### Skeleton.Paragraph

Source: https://ui.lobehub.com/components/skeleton

A specialized skeleton component for paragraph text placeholders.

```APIDOC
## Skeleton.Paragraph

### Properties
- **active** (boolean) - Show animation effect. Default: true.
- **fontSize** (number) - Font size.
- **gap** (number) - Gap between rows.
- **height** (number | string) - Height of each row.
- **lineHeight** (number) - Line height.
- **rows** (number) - Number of rows. Default: 3.
- **width** (number | string | (number | string)[]) - Width of rows.
```

--------------------------------

### Skeleton.Button

Source: https://ui.lobehub.com/components/skeleton

A specialized skeleton component for button placeholders.

```APIDOC
## Skeleton.Button

### Properties
- **active** (boolean) - Show animation effect. Default: true.
- **block** (boolean) - Fill the parent width. Default: false.
- **height** (number | string) - Height of the button.
- **shape** ('circle' | 'round' | 'default') - Shape of the button. Default: 'default'.
- **size** ('large' | 'small' | 'default') - Size of the button. Default: 'default'.
- **width** (number | string) - Width of the button.
```

--------------------------------

### createModal

Source: https://ui.lobehub.com/components/base-ui/modal

Utility to imperatively open a modal and receive an instance for programmatic control.

```APIDOC
## createModal

### Description
Imperatively open a modal and receive an instance to control it programmatically.

### Parameters
- **title** (ReactNode) - Modal title.
- **content** (ReactNode) - Modal body content.
- **children** (ReactNode) - Alias for content.
- **footer** (ReactNode) - Custom footer.
- **open** (boolean) - Controlled open state. Default: true.
- **width** (string | number) - Modal width.
- **maskClosable** (boolean) - Close on backdrop click. Default: true.
- **classNames** (BaseModalClassNames) - Semantic classNames.
- **styles** (BaseModalStyles) - Semantic styles.
- **onOpenChange** (function) - Called when open state changes.
- **onOpenChangeComplete** (function) - Called after exit animation.

### ModalInstance Methods
- **close()** - Trigger the close animation.
- **destroy()** - Remove the modal immediately without animation.
- **update(props)** - Partially update modal props.
- **setCanDismissByClickOutside(value)** - Dynamically toggle backdrop-click-to-close.
```

--------------------------------

### Import Layout Component

Source: https://ui.lobehub.com/components/layout

Import the Layout component from the @lobehub/ui library to begin building your page structure.

```typescript
import { Layout } from '@lobehub/ui';
```

--------------------------------

### Standard Item

Source: https://ui.lobehub.com/components/base-ui/dropdown-menu

Configuration properties for standard dropdown menu items.

```APIDOC
## Standard Item

### Properties
- **desc** (ReactNode) - Optional - Secondary description text displayed below the label.
- **closeOnClick** (boolean) - Optional - Close menu on click. Default: true. Set to false for items with Upload or file picker elements.
```

--------------------------------

### Import ThemeProvider

Source: https://ui.lobehub.com/components/theme-provider

The basic import statement required to use the ThemeProvider component.

```typescript
import { ThemeProvider } from '@lobehub/ui';
```

--------------------------------

### confirmModal

Source: https://ui.lobehub.com/components/base-ui/modal

Displays a pre-built confirmation dialog. Requires a ModalHost to be rendered in the application tree.

```APIDOC
## confirmModal

### Description
Shows a pre-built confirmation dialog. Returns `close` and `destroy` handles.

### Parameters
- **title** (ReactNode) - Optional - Dialog title
- **content** (ReactNode) - Optional - Dialog body content
- **okText** (ReactNode) - Optional - OK button label (Default: 'OK')
- **cancelText** (ReactNode) - Optional - Cancel button label (Default: 'Cancel')
- **okButtonProps** (ButtonHTMLAttributes & { danger?: boolean }) - Optional - OK button extra props
- **onOk** (() => void | Promise<void>) - Optional - OK callback
- **onCancel** (() => void) - Optional - Cancel callback
```

--------------------------------

### Import SearchBar Component

Source: https://ui.lobehub.com/components/search-bar

Use this statement to import the SearchBar component into your React project.

```javascript
import { SearchBar } from '@lobehub/ui';
```

--------------------------------

### Import WhatsApp Icon

Source: https://ui.lobehub.com/components/icons/whats-app

Import the WhatsApp icon component from the LobeHub UI icons package.

```typescript
import { WhatsApp } from '@lobehub/ui/icons';
```

--------------------------------

### Import Authelia Icon

Source: https://ui.lobehub.com/components/icons/authelia

Import the Authelia icon component from the @lobehub/ui/icons package.

```typescript
import { Authelia } from '@lobehub/ui/icons';
```

--------------------------------

### Import MotionProvider

Source: https://ui.lobehub.com/components/motion-provider

Import the MotionProvider component from the @lobehub/ui package.

```typescript
import { MotionProvider } from '@lobehub/ui';
```

--------------------------------

### Import Markdown Component

Source: https://ui.lobehub.com/components/markdown

Import the Markdown component from the @lobehub/ui library to begin rendering markdown content.

```typescript
import { Markdown } from '@lobehub/ui';
```

--------------------------------

### Config Object

Source: https://ui.lobehub.com/components/config-provider

Configuration settings for the application, including CDN and component overrides.

```APIDOC
## Config

### Description
Configuration object for defining CDN behavior and custom component rendering.

### Properties
- **proxy** ('jsdelivr' | 'unpkg' | 'aliyun' | 'custom') - Optional - CDN proxy to use for external resources.
- **customCdnFn** (CdnFn) - Optional - Custom function for generating CDN URLs when proxy is 'custom'.
- **aAs** (ElementType) - Optional - Custom component to use for rendering anchor tags.
- **imgAs** (ElementType) - Optional - Custom component to use for rendering image tags.
- **imgUnoptimized** (boolean) - Optional - Whether to disable image optimization.
```

--------------------------------

### Importing the Block component

Source: https://ui.lobehub.com/components/block

Use this import statement to include the Block component in your project.

```javascript
import { Block } from '@lobehub/ui';
```

--------------------------------

### Importing the Collapse component

Source: https://ui.lobehub.com/components/collapse

Use this import statement to include the Collapse component in your project.

```typescript
import { Collapse } from '@lobehub/ui';
```

--------------------------------

### Import Skeleton Component

Source: https://ui.lobehub.com/components/base-ui/skeleton

Import the Skeleton component from the base-ui package.

```typescript
import { Skeleton } from '@lobehub/ui/base-ui';
```

--------------------------------

### ContextMenuTrigger

Source: https://ui.lobehub.com/components/context-menu

A declarative wrapper that attaches open state attributes for styling and facilitates triggering the context menu.

```APIDOC
## ContextMenuTrigger

### Description
Declarative trigger wrapper that attaches open state attributes (data-popup-open, data-state, aria-expanded) for styling alignment with DropdownMenu. Use onContextMenu to call showContextMenu. When the items prop is provided, the optional header and footer props are forwarded to the menu.
```

--------------------------------

### Skeleton.Tags

Source: https://ui.lobehub.com/components/skeleton

A specialized skeleton component for tag placeholders.

```APIDOC
## Skeleton.Tags

### Properties
- **active** (boolean) - Show animation effect. Default: true.
- **count** (number) - Number of placeholder tags. Default: 3.
- **gap** (number) - Spacing between tags.
- **height** (number | string) - Tag height.
- **size** ('small' | 'middle' | 'large') - Tag size. Default: 'middle'.
- **width** (number | string | (number | string)[]) - Width(s) for each tag.
```

--------------------------------

### Importing FloatingPanel

Source: https://ui.lobehub.com/components/base-ui/floating-panel

The component is available for import from the @lobehub/ui/base-ui package.

```typescript
import { FloatingPanel } from '@lobehub/ui/base-ui';
```

--------------------------------

### Importing the Freeze component

Source: https://ui.lobehub.com/components/freeze

The component is exported from the @lobehub/ui package.

```typescript
import { Freeze } from '@lobehub/ui';
```

--------------------------------

### Import Skeleton Component

Source: https://ui.lobehub.com/components/skeleton

Import the Skeleton component from the @lobehub/ui library.

```typescript
import { Skeleton } from '@lobehub/ui';
```

--------------------------------

### Import Flex component

Source: https://ui.lobehub.com/components/flex

Import the Flex component from the @lobehub/ui package to begin using it in your project.

```typescript
import { Flex } from '@lobehub/ui';
```

--------------------------------

### Import Alert Component

Source: https://ui.lobehub.com/components/alert

Import the Alert component from the @lobehub/ui library.

```typescript
import { Alert } from '@lobehub/ui';
```

--------------------------------

### Importing the Switch component

Source: https://ui.lobehub.com/components/base-ui/switch

The Switch component is available for import from the base-ui package.

```typescript
import { Switch } from '@lobehub/ui/base-ui';
```

--------------------------------

### Import LogoFlat component

Source: https://ui.lobehub.com/components/brand/logo-flat

Import the LogoFlat component from the brand package to use it in your application.

```typescript
import { LogoFlat } from '@lobehub/ui/brand';
```

--------------------------------

### Import Accordion Component

Source: https://ui.lobehub.com/components/base-ui/accordion

Import the Accordion component from the base-ui package.

```typescript
import { Accordion } from '@lobehub/ui/base-ui';
```

--------------------------------

### Import LogoMono component

Source: https://ui.lobehub.com/components/brand/logo-mono

Import the LogoMono component from the brand package to use it in your application.

```typescript
import { LogoMono } from '@lobehub/ui/brand';
```

--------------------------------

### Import ChatList Component

Source: https://ui.lobehub.com/components/chat/chat-list

Import the ChatList component from the LobeHub UI library.

```typescript
import { ChatList } from '@lobehub/ui/chat';
```

--------------------------------

### Import ColorSwatches Component

Source: https://ui.lobehub.com/components/color-swatches

Import the component from the @lobehub/ui package to use it in your project.

```typescript
import { ColorSwatches } from '@lobehub/ui';
```

--------------------------------

### Import Logto Icon

Source: https://ui.lobehub.com/components/icons/logto

Import the Logto icon component from the LobeHub UI icons package.

```typescript
import { Logto } from '@lobehub/ui/icons';
```

--------------------------------

### Import EditorSlashMenu

Source: https://ui.lobehub.com/components/editor-slash-menu

Import the component from the @lobehub/ui package to use it in your project.

```typescript
import { EditorSlashMenu } from '@lobehub/ui';
```

--------------------------------

### Imperative Modal Usage

Source: https://ui.lobehub.com/components/base-ui/modal

Use createModal to open a modal programmatically. Ensure ModalHost is rendered in your app tree to support this functionality.

```typescript
import { createModal, ModalHost } from '@lobehub/ui/base-ui';

// Render <ModalHost /> once anywhere in your app tree
const instance = createModal({
  title: 'My Modal',
  content: <p>Hello world</p>,
  onOpenChange: (open) => console.log(open),
});

// Later:
instance.close();   // animate out
instance.destroy(); // remove immediately
instance.update({ title: 'Updated Title' });
instance.setCanDismissByClickOutside(false);
```

--------------------------------

### Import MaterialFileTypeIcon

Source: https://ui.lobehub.com/components/material-file-type-icon

Import the component from the @lobehub/ui package to use it in your project.

```typescript
import { MaterialFileTypeIcon } from '@lobehub/ui';
```

--------------------------------

### Import Radio Component

Source: https://ui.lobehub.com/components/base-ui/radio

Import the Radio component from the base-ui package.

```typescript
import { Radio } from '@lobehub/ui/base-ui';
```

--------------------------------

### useMotionComponent

Source: https://ui.lobehub.com/components/motion-provider

A hook to retrieve the currently configured motion component.

```APIDOC
## useMotionComponent()

### Description
Retrieves the motion component currently set in the provider context.

### Usage
```javascript
const Motion = useMotionComponent();
```
```
Tokens:
Raw