### Start Development Server Command

Source: https://ui.lobehub.com/~demos/src-markdown-demo-codeblocks

Use this command to start the development server.

```bash
npm run dev
```

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

### Bash Command Example

Source: https://ui.lobehub.com/components/code-editor

A common bash command for installing dependencies using pnpm. This is useful for setting up projects or managing packages.

```bash
$ pnpm install

```

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

### Install Dependencies Command

Source: https://ui.lobehub.com/~demos/src-markdown-demo-codeblocks

Use this command to install project dependencies.

```bash
npm install
```

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

### Hotkey Support Example

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

Example demonstrating how to use the `hotkey` prop to display keyboard shortcuts within a tooltip.

```APIDOC
## Hotkey Support

The Tooltip component includes special integration with the Hotkey component. When you provide a `hotkey` prop, the tooltip will display the specified keyboard shortcut alongside the tooltip text. This is useful for displaying shortcuts for actions.

### Example

```jsx
import { Tooltip, Hotkey } from '@lobehub/ui';

<Tooltip title="Search" hotkey="⌘ + K">
  <Hotkey keys="⌘ + K" />
</Tooltip>
```

This will display "Search" along with the keyboard shortcut in the tooltip.
```

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

### Default Drawer Example

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

A basic example of the Drawer component with content. This demonstrates the default appearance and behavior.

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

// Example Usage:
<Drawer>
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
  content
</Drawer>
```

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

### Default Tabs Example

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

A basic example demonstrating the default appearance and functionality of the Tabs component.

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

const App = () => {
  const items = [
    {
      key: '1',
      label: 'Home',
      children: 'Content of Tab Pane 1',
    },
    {
      key: '2',
      label: 'Components',
      children: 'Content of Tab Pane 2',
    },
    {
      key: '3',
      label: 'Color',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '4',
      label: 'Changelog',
      children: 'Content of Tab Pane 4',
    },
  ];

  return <Tabs items={items} />;
};

```

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

### Default Collapse Example

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

A basic example of the Collapse component with default panel headers and content.

```javascript
const App = () => (
  <Collapse defaultActiveKey={['1']}>
    <Collapse.Panel header="This is panel header 1" key="1">
      <p>This is a description</p>
    </Collapse.Panel>
    <Collapse.Panel header="This is panel header 2" key="2">
      <p>This is panel header 2</p>
    </Collapse.Panel>
    <Collapse.Panel header="This is panel header 3" key="3">
      <p>This is panel header 3</p>
    </Collapse.Panel>
  </Collapse>
);

```

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

### Default Select Example

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

A basic example of the Select component with predefined options. This demonstrates the default appearance and functionality.

```javascript
<Select options={[
  { label: 'Orange', value: 'orange' },
  { label: 'Lemon', value: 'lemon' },
  { label: 'Blueberry', value: 'blueberry', disabled: true },
  { label: 'Strawberry', value: 'strawberry' },
]} placeholder="Type tags..." />
```

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

### Install Lobe UI Kit

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

Install the Lobe UI Kit using bun. This command adds the necessary package to your project.

```bash
$ bun add @lobehub/ui
```

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

### LaTeX Math with Quaternions Example

Source: https://ui.lobehub.com/components/code-editor

An example of using LaTeX to represent quaternion multiplication.

```latex
$$ q_1 q_2 = (w_1 w_2 - \vec{v}_1^T \vec{v}_2, \, w_1 \vec{v}_2 + w_2 \vec{v}_1 + \vec{v}_1 \times \vec{v}_2) $$
```

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

### Display LaTeX Math Example

Source: https://ui.lobehub.com/components/code-editor

Shows how to render standalone LaTeX mathematical formulas using Markdown.

```latex
$$ f(x) = a_0 + \sum_{n=1}^{\infty} \left( a_n \cos(nx) + b_n \sin(nx) \right) $$
```

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

### Install @lobehub/ui Snippet

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

Install the @lobehub/ui package to use the Snippet component. This command is for pnpm users.

```bash
$ pnpm install @lobehub/ui
```

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

### LaTeX Taylor Series Example

Source: https://ui.lobehub.com/components/code-editor

A comprehensive example of a Taylor series expansion using LaTeX, including equation numbering.

```latex
$$ \begin{equation} f(x) = f(a) + f'(a)(x - a) + \frac{f''(a)}{2!}(x - a)^2 + \frac{f'''(a)}{3!}(x - a)^3 + \cdots + \frac{f^{(n)}(a)}{n!}(x - a)^n + R_n(x) \end{equation} $$
```

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

### Install Dependencies with pnpm

Source: https://ui.lobehub.com/components/code-editor

Use this command to install project dependencies using the pnpm package manager.

```bash
$ pnpm install 
```

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

### Default GuideCard Example

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

A basic GuideCard with a title and description. This is useful for displaying simple informational content.

```javascript
<GuideCard
  title="Title"
  desc="Description"
/>
```

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

### LaTeX Math with Integral Example

Source: https://ui.lobehub.com/components/code-editor

Illustrates the use of LaTeX for mathematical formulas involving integrals.

```latex
$$ a_0 = \frac{1}{2\pi} \int_{-\pi}^{\pi} f(x) \, dx $$
```

```latex
$$ a_n = \frac{1}{\pi} \int_{-\pi}^{\pi} f(x) \cos(nx) \, dx \quad \text{for} \quad n \geq 1 $$
```

```latex
$$ b_n = \frac{1}{\pi} \int_{-\pi}^{\pi} f(x) \sin(nx) \, dx \quad \text{for} \quad n \geq 1 $$
```

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

### Inline LaTeX Taylor Series Example

Source: https://ui.lobehub.com/components/code-editor

Demonstrates rendering a Taylor series formula inline using LaTeX.

```latex
$ f(x) = f(a) + f'(a)(x - a) + \frac{f''(a)}{2!}(x - a)^2 + \frac{f'''(a)}{3!}(x - a)^3 + \cdots + \frac{f^{(n)}(a)}{n!}(x - a)^n + R_n(x) $
```

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

### Collapse with Icons and Descriptions

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

Example showcasing collapse panels with custom icons and descriptions in their headers.

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

const App = () => (
  <Collapse
    items={[
      {
        key: '1',
        label: 'This is panel header 1',
        description: 'This is a description',
        icon: <Icon name="Heart" />,
        children: <p>Content 1</p>,
      },
      {
        key: '2',
        label: 'This is panel header 2',
        children: <p>Content 2</p>,
      },
      {
        key: '3',
        label: 'This is panel header 3',
        children: <p>Content 3</p>,
      },
    ]}
  />
);

```

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

### Using dayjs fromNow

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

Demonstrates how to use the `fromNow` function from the dayjs library to display relative time. Ensure dayjs is installed and imported.

```javascript
dayjs().fromNow(); // 获取当前时间的相对时间
dayjs('2021-05-01').fromNow(); // 获取给定时间的相对时间
```

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

### Code Editor Configuration Example

Source: https://ui.lobehub.com/components/code-editor

Illustrates the basic properties for configuring the Code Editor component, such as language, value, and placeholder.

```javascript
language: 'markdown',
value: 'Current value of the editor',
defaultValue: '',
onValueChange: '(value: string) => void',
placeholder: 'Placeholder text when no value is provided',
```

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

### Basic Lobe UI Kit Setup

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

Set up the basic Lobe UI components with ThemeProvider and I18nProvider. Ensure you import necessary components and resources.

```tsx
import { ThemeProvider, Button, I18nProvider } from '@lobehub/ui'
import allResources from '@lobehub/ui/i18n/resources/all'

export default () => (
  <I18nProvider resources={allResources}>
    <ThemeProvider>
      <Button>Hello AIGC</Button>
    </ThemeProvider>
  </I18nProvider>
)
```

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

### LaTeX Math with Tag Example

Source: https://ui.lobehub.com/components/code-editor

Shows how to add a tag or number to a LaTeX mathematical equation.

```latex
$$ q = a + bi + cj + dk \tag{1} $$
```

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

### Inline LaTeX Math Example

Source: https://ui.lobehub.com/components/code-editor

Demonstrates how to embed inline LaTeX mathematical expressions within Markdown text.

```latex
$E=mc^2$
```

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

### Simple Accordion Example

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

A simplified Accordion with two panels.

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

const App = () => (
  <Accordion>
    <Accordion.Item itemKey="1" title="Accordion Panel 1">
      This is the content of panel 1.
      You can put any React component here.
    </Accordion.Item>
    <Accordion.Item itemKey="2" title="Accordion Panel 2">
      This is the content of panel 2.
    </Accordion.Item>
  </Accordion>
);
```

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

### Nested Modals Example

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

Illustrates how to stack modals, ensuring correct overlay order. This is useful for multi-step processes or complex workflows.

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

const confirmModal = createModal(Modal, {
  title: 'Confirm Action',
  content: 'Are you sure you want to proceed?',
});

const verifyModal = createModal(Modal, {
  title: 'Verify Action',
  content: 'Please verify the details.',
});

// To trigger nested modals:
// createModal(Modal, {
//   title: 'Outer Modal',
//   content: (
//     <div>
//       <button onClick={() => confirmModal()}>Open Confirm Modal</button>
//       <button onClick={() => verifyModal()}>Open Verify Modal</button>
//     </div>
//   )
// });
```

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

### Code Editor Styling and Variants Example

Source: https://ui.lobehub.com/components/code-editor

Demonstrates how to customize the appearance of the Code Editor using variant styles and size properties.

```javascript
variant: "filled" | "outlined" | "borderless",
width: 'string | number',
height: 'string | number',
classNames: { highlight?: string; textarea?: string },
styles: { highlight?: CSSProperties; textarea?: CSSProperties }
```

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

### LaTeX Math Examples

Source: https://ui.lobehub.com/components/code-editor

Demonstrates inline and display modes for LaTeX math equations, including basic formulas, integrals, fractions, superscripts, subscripts, and tagged equations. This is useful for rendering mathematical content.

```latex
我是一个行内公式：$E=mc^2$

我是一个独立的傅里叶公式：
$$
f(x) = a_0 + \sum_{n=1}^{\infty} \left( a_n \cos(nx) + b_n \sin(nx) \right)
$$

其中，带有积分符号的项：
$$
a_0 = \frac{1}{2\pi} \int_{-\pi}^{\pi} f(x) \, dx
$$

$$ a_n = \frac{1}{\pi} \int_{-\pi}^{\pi} f(x) \cos(nx) \, dx \quad \text{for} \quad n \geq 1
$$

$$ b_n = \frac{1}{\pi} \int_{-\pi}^{\pi} f(x) \sin(nx) \, dx \quad \text{for} \quad n \geq 1
$$

我是一个带有分式、测试长度超长的泰勒公式：

$$
\begin{equation}
f(x) = f(a) + f'(a)(x - a) + \frac{f''(a)}{2!}(x - a)^2 + \frac{f'''(a)}{3!}(x - a)^3 + \cdots + \frac{f^{(n)}(a)}{n!}(x - a)^n + R_n(x)
\end{equation}
$$

我是上面公式的行内版本，看看我会不会折行：$ f(x) = f(a) + f'(a)(x - a) + \frac{f''(a)}{2!}(x - a)^2 + \frac{f'''(a)}{3!}(x - a)^3 + \cdots + \frac{f^{(n)}(a)}{n!}(x - a)^n + R_n(x) $


我是一个带有上下标的公式：
$$
q_1 q_2 = (w_1 w_2 - \vec{v}_1^T \vec{v}_2, \, w_1 \vec{v}_2 + w_2 \vec{v}_1 + \vec{v}_1 \times \vec{v}_2)
$$

我是一个带有 tag 的公式：
$$
q = a + bi + cj + dk \tag{1}
$$

```

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

### JavaScript Code Block Example

Source: https://ui.lobehub.com/components/chat/editable-message

This snippet demonstrates a simple JavaScript function for greeting a user, including console logging.

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

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

### Inline Code Example

Source: https://ui.lobehub.com/~demos/src-markdown-demo-code

Use backticks to format text as inline code.

```markdown
`backticks`
```

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

### Default Modal Usage

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

A basic example of how to render a modal with default settings. This is useful for simple confirmations or information display.

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

<Modal open title="Default Modal" onCancel={() => {}} onOk={() => {}}>
  <p>This is the content of the modal.</p>
</Modal>
```

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

### Streaming Mode: Defer

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

The 'defer' streaming mode always waits for the closing `</html>` tag before mounting. This is the safest option for demos involving complex JavaScript like p5.js or three.js, ensuring `setup()` runs only once.

```html
defer
```

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

### Import Switch Component

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

Import the Switch component from the @lobehub/ui/base-ui package. This is the initial setup required to use the component.

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

```

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

### Default Layout Structure

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

Demonstrates the default structure of the Layout component with header and content areas. This serves as a basic example of its usage.

```html
HEADER
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
```

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

### Inline Code Example

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

Render inline code or commands within a sentence using single backticks. The text inside will not be formatted.

```javascript
function greetUser(name) {
  console.log(`Hello, ${name}!`);
}

```

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

### Default Accordion Example

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

A basic Accordion with multiple panels, including a disabled panel and a non-expandable panel.

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

const App = () => (
  <Accordion>
    <Accordion.Item itemKey="1" title="Accordion Panel 1">
      This is the content of panel 1.
      You can put any React component here.
    </Accordion.Item>
    <Accordion.Item itemKey="2" title="Accordion Panel 2">
      This is the content of panel 2.
      You can put any React component here.
    </Accordion.Item>
    <Accordion.Item itemKey="3" title="Accordion Panel 3">
      This is the content of panel 3.
      You can put any React component here.
    </Accordion.Item>
    <Accordion.Item itemKey="4" title="Disabled Panel" disabled>
      This is the content of panel 4.
      You can put any React component here.
    </Accordion.Item>
    <Accordion.Item itemKey="5" title="Non-expandable Panel (allowExpand=false)" allowExpand={false}>
      This panel has allowExpand set to false.
      The indicator arrow is hidden.
    </Accordion.Item>
  </Accordion>
);
```

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

### Markdown Rendering Example

Source: https://ui.lobehub.com/components/code-editor

This snippet demonstrates various Markdown features including headings, links, blockquotes, emphasis, strikethrough, images, videos, lists, and tables. It's useful for understanding how the CodeEditor component might render Markdown content.

```markdown
# This is an H1
## This is an H2
### This is an H3
#### This is an H4
##### This is an H5

The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw `HTML`, it’s 234 characters. In the raw `HTML`, there’s more markup than there is text.

---

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

---

an example | *an example* | **an example**

~~这是删除线~~ (两个波浪线)

~这不会被渲染为删除线~ (单个波浪线)

---

![](https://github.com/user-attachments/assets/2428a136-38bf-488c-8033-d9f261d67f3d)

![](https://github.com/user-attachments/assets/625cf558-4c32-4489-970a-2723ebadbc23)

<video src="https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2"/>

---

1. Bird
1. McHale
1. Parish
    1. Bird
    1. McHale
        1. Parish

---

- Red
- Green
- Blue
    - Red
    - Green
        - Blue

---

This is [an example](http://example.com/ "Title") inline link.

<http://example.com/>


| title | title | title |
| --- | --- | --- |
| content | content | content |

```

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

### LaTeX Fourier Transform Formula

Source: https://ui.lobehub.com/~demos/src-markdown-demo-streamingprofiler

Demonstrates the rendering of a mathematical formula using LaTeX syntax within a markdown context. This example shows the Fourier Transform.

```latex
f(x)=∫−∞∞f^(ξ)e2πiξxdξf(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} d\xif(x)=∫−∞∞​f^​(ξ)e2πiξxdξ
```

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

### Markdown Alerts Example

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

Illustrates the use of different alert types (NOTE, TIP, IMPORTANT, WARNING, CAUTION) in Markdown. Alerts are based on blockquote syntax and are used to emphasize critical information with distinctive colors and icons.

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

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

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

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

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

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

### Show Context Menu with Items

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

Demonstrates how to show a context menu with basic menu items. The menu opens at the last pointer position.

```typescript
showContextMenu([
  { key: 'Undo', label: 'Undo' },
  { key: 'Redo', label: 'Redo' },
]);
```

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

### Nested Code Example

Source: https://ui.lobehub.com/components/code-editor

A simple code snippet demonstrating a nested structure, possibly for testing or a specific syntax example. The '$1' might represent a placeholder or a specific command.

```shell
$1

```

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

### Complex TypeScript Example with 'satisfies' and Default Generics

Source: https://ui.lobehub.com/~demos/src-highlighter-demo-demos

Combines `satisfies` for type checking with object literals and demonstrates a generic function that uses a default type parameter. This example highlights how to enforce structure while allowing extra properties and providing default behavior.

```typescript
// Complex example with 'satisfies' and default generics
type Task = {
  title: string;
  description?: string;
  completed: boolean;
};

const myTask = {
  title: "Learn TypeScript",
  completed: false,
  priority: "High",
} satisfies Task;  // Allows priority but ensures Task structure

// Generic function with default type
function wrapInArray<T = string>(value: T): T[] {
  return [value];
}

const stringArray = wrapInArray();  // Default to string
const numberArray = wrapInArray(42);  // T inferred as number
```

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

### Default BottomGradientButton

Source: https://ui.lobehub.com/components/awesome/bottom-gradient-button

Renders a default BottomGradientButton with the text 'Get a Demo'.

```html
<BottomGradientButton>Get a Demo</BottomGradientButton>
```

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

### Code in Lists

Source: https://ui.lobehub.com/~demos/src-markdown-demo-code

Code examples can be included within list items. Use backticks for formatting.

```bash
npm start
```

```bash
npm test
```

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

### Drawer with Navigation and Actions

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

Demonstrates a Drawer configured with navigation links and quick action buttons, suitable for sidebars or secondary menus.

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

// Example Usage:
<Drawer>
  <Drawer.Title>Navigation</Drawer.Title>
  <Drawer.Content>
    <Drawer.Item>Dashboard</Drawer.Item>
    <Drawer.Item>Settings</Drawer.Item>
    <Drawer.Item>Profile</Drawer.Item>
  </Drawer.Content>
  <Drawer.Title>Quick Actions</Drawer.Title>
  <Drawer.Content>
    <Drawer.Item>Create New</Drawer.Item>
    <Drawer.Item>Import Data</Drawer.Item>
    <Drawer.Item>Export</Drawer.Item>
  </Drawer.Content>
  <Drawer.Title>Recent Items</Drawer.Title>
  <Drawer.Content>
    <Drawer.Item>Project Alpha</Drawer.Item>
    <Drawer.Item>Document Beta</Drawer.Item>
    <Drawer.Item>Task Gamma</Drawer.Item>
  </Drawer.Content>
</Drawer>
```

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

### createModal

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

Imperatively open a modal and receive an instance to control it programmatically. Remember to render `<ModalHost />` once in your application.

```APIDOC
## createModal

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

### Usage
```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);
```

### Props for `createModal`

#### ImperativeModalProps

| Property | Description | Type | Default |
|---|---|---|---|
| title | Modal title | `ReactNode` | - |
| content | Modal body content | `ReactNode` | - |
| children | Alias for `content` | `ReactNode` | - |
| footer | Custom footer | `ReactNode` | - |
| open | Controlled open state | `boolean` | `true` |
| width | Modal width | `string | number` | - |
| maskClosable | Close on backdrop click | `boolean` | `true` |
| classNames | Semantic classNames | `BaseModalClassNames` | - |
| styles | Semantic styles | `BaseModalStyles` | - |
| onOpenChange | Called when open state changes | `(open: boolean) => void` | - |
| onOpenChangeComplete | Called after exit animation | `(open: boolean) => void` | - |

### `ModalInstance` Methods

| Method | Description |
|---|---|
| `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 |
```

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

### Mermaid Diagram Example

Source: https://ui.lobehub.com/components/code-editor

A basic Mermaid diagram illustrating a workflow with nodes and transitions. This is useful for visualizing processes.

```mermaid
graph TD
A[Enter Chart Definition] --> B(Preview)
B --> C{decide}
C --> D[Keep]
C --> E[Edit Definition]
E --> B
D --> F[Save Image and Code]
F --> B
```

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

### Import FileTree Components

Source: https://ui.lobehub.com/components/mdx/file-tree

Import the necessary components for creating a file tree structure.

```javascript
import { File, FileTree, Folder } from '@lobehub/ui/mdx';
```

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

### Import DropdownMenu

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

Import the DropdownMenu component from the base-ui package.

```javascript
import { DropdownMenu } from '@lobehub/ui/base-ui';
```

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

### Basic Flexbox Usage

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

Demonstrates the basic usage of the Flex component to arrange items.

```html
<Flex>Item 1
Item 2
Item 3</Flex>
```

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

### Import Cards Component

Source: https://ui.lobehub.com/components/mdx/cards

Import the Cards and Card components from the @lobehub/ui/mdx package. This is the primary setup for using the cards functionality.

```javascript
import { Cards, Card } from '@lobehub/ui/mdx';
```

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

### Import GuideCard Component

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

Import the GuideCard component from the '@lobehub/ui' library to use it in your project.

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

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

### showContextMenu API

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

The `showContextMenu` function opens a context menu at the last pointer position. It accepts an array of menu items and optional configuration options.

```APIDOC
## showContextMenu

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

### Signature
`showContextMenu(items: ContextMenuItem[], options?: ShowContextMenuOptions) => void`

### Parameters
#### items
- **items** (ContextMenuItem[]) - Required - The list of menu items to display.

#### options
- **options** (ShowContextMenuOptions) - Optional - Configuration options for the context 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`. Only effective with descriptions. Defaults to 'center'.
- **iconSpaceMode** ('global' | 'group') - Optional - Icon space reservation: `global` reserves for all items, `group` reserves per group with icons. Defaults to 'global'.
```

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

### Use MotionProvider with Default (motion)

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

Demonstrates the basic usage of MotionProvider with the default 'motion' component. This is typically used for standard animations.

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

const App = () => {
  return (
    <MotionProvider motion={motion}>
      <Your App Content />
    </MotionProvider>
  );
};

```

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

### Import Video Component

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

Import the Video component from the '@lobe/ui' library to use it in your project.

```javascript
import { Video } from '@lobe/ui';

```

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

### Mermaid Diagram Example

Source: https://ui.lobehub.com/components/code-editor

A Mermaid diagram illustrating a workflow for chart definition, preview, decision making, and saving. This can be used to visualize processes.

```mermaid
graph TD
A[Enter Chart Definition] --> B(Preview)
B --> C{decide}
C --> D[Keep]
C --> E[Edit Definition]
E --> B
D --> F[Save Image and Code]
F --> B

```

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

### Avatar with Error Fallback

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

Configure an error fallback for avatars, such as displaying initials when an image fails to load. This example shows 'JOAL' as a fallback.

```javascript
<Avatar avatar='https://example.com/nonexistent.jpg'>JOAL</Avatar>

```

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

### Import SpotlightCard Component

Source: https://ui.lobehub.com/components/awesome/spotlight-card

Import the SpotlightCard component from the '@lobehub/ui/awesome' library. This is the primary import needed to use the component.

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

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

### Import Dropdown Component

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

Import the Dropdown component from the '@lobehub/ui' library. This is the initial step before using the component.

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

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

### ScrollArea with Horizontal Fade

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

Configure ScrollArea to mask the start and end edges of a horizontally scrolled viewport using `scrollFade="horizontal"`.

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

<ScrollArea scrollFade="horizontal" style={{ width: 'fit-content' }}>
  {/* Content that overflows horizontally */}
</ScrollArea>;
```

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

### Modal with DropdownMenu z-index

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

This example addresses z-index issues when a modal is opened while a dropdown menu is active, ensuring the modal layers correctly above the dropdown.

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

// ... component setup ...

// Example usage within a component:
// <DropdownMenu trigger={<button>Open Dropdown</button>} items={[{ key: '1', label: 'Item 1' }]}>
//   <Modal open title="Modal Example" onCancel={() => {}} onOk={() => {}}>
//     <p>Content</p>
//   </Modal>
// </DropdownMenu>
```

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

### Import QQ Icon

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

Import the QQ icon component from the @lobehub/ui/icons package. This is the primary way to use the icon in your project.

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

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

### Import ContextMenu

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

Import the ContextMenu component from the library.

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

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

### Import GridBackground Component

Source: https://ui.lobehub.com/components/awesome/grid-background

Import the GridBackground component from the @lobehub/ui/awesome library. This is the primary step to use the component in your project.

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

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

### Markdown Footnotes Example

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

Demonstrates how to add footnotes to Markdown content using bracket syntax. Footnotes render at the bottom of the content regardless of their position in the source.

```markdown
Here is a simple footnote[^1].

[^1]: My reference.
```

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

### Import Hotkey Component

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

Import the Hotkey component from the '@lobe/ui' library.

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

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

### DropdownMenu with Icon Align

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

When items have descriptions, use `iconAlign` to control icon vertical alignment. 'center' (default) vertically centers the icon, while 'start' aligns it with the first line of text.

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

const App = () => {
  return (
    <DropdownMenu
      iconAlign="start"
      items={[
        {
          key: 'item-1',
          label: 'Item 1',
          desc: 'This is a description for item 1',
          icon: 'Smile',
        },
      ]}
    >
      Icon Align Start
    </DropdownMenu>
  );
};

```

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

### 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';
```

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

### Create Isolated Modal System

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

Create an isolated modal system with its own stack, separate from the global exports. Useful for micro-frontend setups or Shadow DOM environments where you need namespaced modal instances.

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

const { ModalHost, createModal, confirmModal } = createModalSystem();
```

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

### Import ThemeProvider

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

Import the ThemeProvider component from the @lobehub/ui library. This is the first step to using it in your application.

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

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

### Import Collapse Component

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

Import the Collapse component from the '@lobehub/ui' library to use it in your project.

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

```

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

### Collapse with Custom Padding

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

Demonstrates how to customize the padding for the header and content of collapse panels.

```javascript
const App = () => (
  <Collapse
    defaultActiveKey={['1']}
    padding={{
      body: 111,
      header: '111',
    }}
  >
    <Collapse.Panel header="This is panel header 1" key="1">
      <p>This is a description</p>
      <p>111</p>
    </Collapse.Panel>
    <Collapse.Panel header="This is panel header 2" key="2">
      <p>222</p>
    </Collapse.Panel>
    <Collapse.Panel header="This is panel header 3" key="3">
      <p>333</p>
    </Collapse.Panel>
  </Collapse>
);

```

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

### Import Steps Component

Source: https://ui.lobehub.com/components/mdx/steps

Import the Steps component from the @lobehub/ui/mdx package. This is typically the first step before using the component.

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

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

### Default Highlighter Usage

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

Demonstrates basic usage of TypeScript features like 'typeof', 'satisfies', and generics with 'extends' and default values. Useful for type inference and ensuring type compatibility.

```typescript
// Using 'typeof' to infer types
const person = { name: "Alice", age: 30 };
type PersonType = typeof person;  // { name: string; age: number }

// 'satisfies' to ensure a type matches but allows more specific types
type Animal = { name: string };
const dog = { name: "Buddy", breed: "Golden Retriever" } satisfies Animal;

// Generics with 'extends' and default values
function identity<T extends number | string = string>(arg: T): T {
  return arg;
}

let str = identity();  // Default type is string
let num = identity(42);  // T inferred as number

// 'extends' with interface and class
interface HasLength {
  length: number;
}

function logLength<T extends HasLength = string>(arg: T): void {
  console.log(arg.length);
}

logLength("Hello");    // OK: string has length (default is string)
logLength([1, 2, 3]);  // OK: array has length
// logLength(123);      // Error: number doesn't have length

// 'typeof' with functions
function add(x: number, y: number): number {
  return x + y;
}

type AddFunctionType = typeof add;  // (x: number, y: number) => number

// Generic interfaces with 'extends' and default types
interface Box<T extends object = { message: string }> {
  content: T;
}

let defaultBox: Box = { content: { message: "Hello" } };  // Uses default type
let customBox: Box<{ status: number }> = { content: { status: 200 } };

// Complex example with 'satisfies' and default generics
type Task = {
  title: string;
  description?: string;
  completed: boolean;
};

const myTask = {
  title: "Learn TypeScript",
  completed: false,
  priority: "High",
} satisfies Task;  // Allows priority but ensures Task structure

// Generic function with default type
function wrapInArray<T = string>(value: T): T[] {
  return [value];
}

const stringArray = wrapInArray();  // Default to string
const numberArray = wrapInArray(42);  // T inferred as number

/**
 * Combines two generic types into a tuple.
 *
 * @template T - The first type.
 * @template U - The second type.
 * @param {T} first - The first value.
 * @param {U} second - The second value.
 * @returns {[T, U]} A tuple containing both values.
 */
function combine<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}
```

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

### Import DropdownMenu Component

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

Import the DropdownMenu component from the '@lobehub/ui' library.

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

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

### Create Imperative Modal

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

Imperatively open a modal and receive an instance to control it programmatically. Render `<ModalHost />` once anywhere in your app tree. Use the instance to close, destroy, update, or modify dismissal behavior.

```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);
```

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

### Imperative Modal Usage

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

Use `createModal` for an imperative way to open and control modals. Remember to render `ModalHost` once in your application.

```javascript
import { Modal, ModalHost, createModal } from '@lobehub/ui';

// Render ModalHost once, usually near the root
const App = () => (
  <>
    <ModalHost />
    {/* ... other components */}
  </>
);

// To open a modal:
const controller = createModal(Modal, {
  title: 'Imperative Modal',
  content: 'This is content shown imperatively.',
});

// To close the modal later:
// controller.close();
```

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

### Import DownloadButton

Source: https://ui.lobehub.com/components/download-button

Import the DownloadButton component from the '@lobehub/ui' library.

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