Semi Design

https://semi.design/zh-CN/
Admin
Semi Design is a modern design system maintained by ByteDance's frontend and UED teams that helps...
Tokens:501,592
Snippets:4,811
Trust Score:8.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Semi UI Package

Source: https://semi.design/zh-CN/navigation/tabs

Install the Semi Design UI package using yarn.

```bash
yarn add @douyinfe/semi-ui

```

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

### Basic Semi Design Button Usage

Source: https://semi.design/zh-CN/ai/aiChatDialogue

A simple example demonstrating how to import and use the Semi Design Button component. Ensure you have the `@douyinfe/semi-ui` package installed.

```jsx
import React from 'react';
import { Button } from '@douyinfe/semi-ui';

const MyComponent = () => {
  return (
    <Button>Click me</Button>
 );
};
export default MyComponent;
```

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

### Install Semi Design

Source: https://semi.design/zh-CN/ecosystem/react19

Install the Semi Design package using npm, yarn, or pnpm.

```bash
# npm
npm install @douyinfe/semi-ui

# yarn
yarn add @douyinfe/semi-ui

# pnpm
pnpm add @douyinfe/semi-ui
```

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

### Timeline Example

Source: https://semi.design/zh-CN/show/timeline

Example of how to use the Timeline component with basic items.

```APIDOC
```

<Timeline aria-label="xx事故处理过程时间线">

    <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>

    <Timeline.Item time="2015-09-02">初步排除网络异常</Timeline.Item>

    <Timeline.Item time="2015-09-03">技术测试异常</Timeline.Item>

    <Timeline.Item time="2015-09-05">网络异常正在修复</Timeline.Item>

</Timeline>

```
```

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

### Install Semi 2.0

Source: https://semi.design/zh-CN/ecosystem/update-to-v2

Install the latest version of Semi Design using npm.

```bash
npm i @douyinfe/semi-ui@latest
```

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

### Drag Sorting with dnd-kit

Source: https://semi.design/zh-CN/input/transfer

Example demonstrating drag-to-sort functionality using dnd-kit. This setup requires core dependencies like `@dnd-kit/sortable` and `@dnd-kit/core`, utilizing hooks such as `useSortable`.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Transfer, Input, Spin, Button } from '@douyinfe/semi-ui';
import { IconSearch, IconHandle } from '@douyinfe/semi-icons';
import { useSortable, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS as cssDndKit } from '@dnd-kit/utilities';
import { closestCenter, DragOverlay, DndContext, MouseSensor, TouchSensor, useSensor, useSensors, KeyboardSensor, TraversalOrder } from '@dnd-kit/core';
function SortableList({
items,
onSortEnd,
renderItem,
}) {
// ... component implementation
}

```

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

### MCPConfigure Component Usage Example

Source: https://semi.design/zh-CN/ai/sidebar

Demonstrates how to use the MCPConfigure component with default and custom options, including handling status changes, add clicks, and configuration clicks. This example also includes a modal for creating custom MCP options.

```jsx
import React from 'react'; import { Sidebar, MCPConfigure, Button, Modal, Form } from '@douyinfe/semi-ui'; import { IconSemiLogo, IconFigma } from '@douyinfe/semi-icons'; const defaultOptions = [
    { icon: <IconSemiLogo />, value: 'Semi mcp', label: "Semi", configure: true, desc: "支持 Semi 的文档、源码搜索，辅助开发" },
    { icon: <IconFigma />, value: 'figma', label: "Figma", desc: "Figma MCP Server 连接Figma与AI开发工具的功能。它通过标准化的模型上下文协MCP），将组件、变量等设计数据和上下文暴露给AI，从而实现从设计稿到代码的智能生成，显著提升开发效率。" }
]; const CustomOptionCreateModel = (props) => {
    const { visible, handleOk, handleCancel, formRef } = props;
    return (<Modal title="自定义 MCP" visible={visible} onOk={handleOk} onCancel={handleCancel} closeOnEsc={true} >
        <Form ref={formRef} layout='vertical' onValueChange={values=>console.log(values)} >
            <Form.Input rules={[{ required: true, message: '请输入 MCP 名称' }]} field='name' label='MCP 名称' style={{ width: '100%' }} />
            <Form.Input initValue={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'} rules={[ { required: true, message: '请输入 MCP 图标 URL' }, { validator: (rule, value) => {
                const urlRegex = /^(?:https?:\/\/)?(?:www\.)?[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+(?:\:\d+)?(?:\/[^\s]*)?$/i;
                return urlRegex.test(value);
            }, message: '请输入有效的 MCP 图标 URL' } ]} field='src' label='MCP 图标 URL' style={{ width: '100%' }} />
            <Form.TextArea rules={[{ required: true, message: '请输入 MCP 介绍' }]} field='desc' label="MCP 介绍" style={{ width: '100%' }} />
        </Form>
    </Modal>);
};

let index = 1;
const containerStyle = {
    display: 'flex',
    height: '500px',
    border: '1px solid var(--semi-color-border)',
    borderRadius: 8,
    overflow: 'hidden',
    boxSizing: 'border-box'
};

function McpConfigureDemo() {
    const [visible, setVisible] = useState(true);
    const toggleVisible = useCallback(() => {
        setVisible(visible => !visible);
    }, []);
    const [options, setOptions] = useState(defaultOptions);
    const [mVisible, setMVisible] = useState(false);
    const [customOptions, setCustomOptions] = useState([]);
    const formRef = useRef(null);

    const handleOk = useCallback(() => {
        formRef.current.formApi.validate().then(values => {
            const newOptions = [...customOptions, { label: values.name, icon: values.src, value: `mcp-${index++}`, desc: values.desc }];
            setCustomOptions(newOptions);
            setMVisible(false);
        }).catch(errors => {
            console.log('errors', errors);
        });
    }, [customOptions]);

    const showDialog = useCallback(() => {
        setMVisible(true);
    }, []);

    const handleCancel = useCallback(() => {
        setMVisible(false);
    }, []);

    const onStatusChange = useCallback((options, custom) => {
        if (custom) {
            setCustomOptions(options);
        } else {
            setOptions(options);
        }
    }, []);

    const onAddClick = useCallback((e) => {
        showDialog();
    }, []);

    const onConfigureClick = useCallback((e, option) => {
        console.log('configure click', option);
    }, []);

    const onEditClick = useCallback((e, option) => {
        console.log('edit click', option);
    }, []);

    return (
        <div style={containerStyle}>
            <div style={{ flexGrow: 1, flexShrink: 1, padding: 20 }}>
                <Button onClick={toggleVisible}>{visible ? '关闭' : '开始' } MCP 配置 </Button>
            </div>
            <MCPConfigure
                style={{ width: 500 }}
                resizable={false}
                visible={visible}
                onCancel={toggleVisible}
                options={options}
                customOptions={customOptions}
                onStatusChange={onStatusChange}
                onAddClick={onAddClick}
                onConfigureClick={onConfigureClick}
                onEditClick={onEditClick}
            />
            <CustomOptionCreateModel formRef={formRef} visible={mVisible} handleOk={handleOk} handleCancel={handleCancel} />
        </div>
    );
}

render(<McpConfigureDemo />); 

```

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

### Install Semi Codemod V2

Source: https://semi.design/zh-CN/ecosystem/update-to-v2

Globally install the codemod CLI tool for automatic upgrades to Semi 2.0. Ensure you are using the bnpm source.

```bash
npm i @ies/semi-codemod-v2@latest -g # bnpm源
```

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

### Install Semi Style-lint Package

Source: https://semi.design/zh-CN/ecosystem/update-to-v2

Install the Semi style-lint package for automatically updating CSS Variable usage. Ensure you specify the bnpm source.

```bash
# 需指定 npm 源为 bnpm

npm i -D @ies/stylelint-semi@2.0.0-alpha.1
```

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

### How to Import

Source: https://semi.design/zh-CN/show/cropper

Instructions on how to import the Cropper component starting from version v2.73.0.

```APIDOC
## How to Import

Cropper from v2.73.0 onwards is supported.

```javascript
import { Cropper } from '@douyinfe/semi-ui';
```
```

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

### Import Tooltip Component

Source: https://semi.design/zh-CN/show/tooltip

Import the Tooltip component from the Semi UI library. Ensure the component is correctly installed.

```javascript
import { Tooltip } from '@douyinfe/semi-ui';

```

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

### Custom Cascader Trigger Example

Source: https://semi.design/zh-CN/input/cascader

Demonstrates how to implement a custom trigger for the Cascader component using React hooks and Semi Design components like Button, Tag, and TagInput. This example shows basic setup with tree data.

```jsx
import React, { useState, useCallback, useMemo } from 'react';
import { Cascader, Button, Tag, TagInput } from '@douyinfe/semi-ui';
import { IconClose, IconChevronDown } from '@douyinfe/semi-icons';
function Demo() {
const treeData = useMemo(() => [
{
label: '浙江省',
value: 'zhejiang',
children: [
{
label: '杭州市',
value: 'hangzhou',
children: [
{
label: '西湖区',
value: 'xihu',
},
{
label: '萧山区',
value: 'xiaoshan',
},
{
label: '临安区',
value: 'linan',
},

```

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

### Basic InputNumber Examples

Source: https://semi.design/zh-CN/input/inputnumber

Demonstrates basic InputNumber configurations including step, shiftStep, min, and max values. Use these for standard numerical input scenarios.

```javascript
import React from 'react';
import { InputNumber } from '@douyinfe/semi-ui';
() => (
<div style={{ width: 280 }}>
<label>简单数字输入框</label>
<InputNumber />
<br/><br/>
<label>设置了步长 step=2 </label>
<InputNumber step={2} />
<br/><br/>
<label>设置 shiftStep=100， 按住 shift 同时点击按钮，可以一次增加/减少100 </label>
<InputNumber shiftStep={100} />
<br/><br/>
<label>设置了上下界 min=1,max=10</label>
<InputNumber min={1} max={10} defaultValue={1} />
<br/><br/>
</div>
);

```

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

### Basic Tree with Drag and Drop

Source: https://semi.design/zh-CN/navigation/tree

A basic implementation of a Tree component with drag and drop enabled. This example demonstrates the initial setup for draggable nodes.

```javascript
import React, { useState } from 'react';
import { Tree } from '@douyinfe/semi-ui';



const initialData = [
  {
    label: 'Asia',
    value: 'Asia',
    key: '0',
    children: [
      {
        label: 'China',
        value: 'China',
        key: '0-0',
        children: [
          {
            label: 'Beijing',
            value: 'Beijing',
            key: '0-0-0',
          },
          {
            label: 'Shanghai',
            value: 'Shanghai',
            key: '0-0-1',
          },
        ],
      }
    ]
  }
];



() => {
  const [expandedKeys, setExpandedKeys] = useState(['0']);
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [checkedKeys, setCheckedKeys] = useState(['0-0-0']);
  const [autoCheckParent, setAutoCheckParent] = useState(false);
  const [draggable, setDraggable] = useState(true);
  const [dropLine, setDropLine] = useState(true);

  const onExpand = expandedKeys => {
    setExpandedKeys(expandedKeys);
  };
  const onCheck = checkedKeys => {
    setCheckedKeys(checkedKeys);
  };

  return (
    <Tree
      draggable={draggable}
      dropLine={dropLine}
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      autoCheckParent={autoCheckParent}
      treeData={initialData}
    />
  );
};
```

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

### Import UserGuide Component

Source: https://semi.design/zh-CN/show/userGuide

Import the UserGuide component from the semi-ui library to use it in your project.

```javascript
import { UserGuide } from '@douyinfe/semi-ui';

```

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

### Manage Focus with blur() and focus()

Source: https://semi.design/zh-CN/input/taginput

Use the useRef hook to get a reference to the TagInput component and then call its focus() method to programmatically set focus on the input field. This is useful for guiding user interaction.

```javascript
import React, { useRef } from 'react';
import { TagInput, Button } from '@douyinfe/semi-ui';
function TagInputDemo() {
const ref = useRef();
const handleTagInputFocus = () => {
ref.current && ref.current.focus();
};
return (
<>
<TagInput ref={ref} />
<Button onClick={handleTagInputFocus}>Click to focus</Button>
</>
);
}
```

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

### Install Skills Manually

Source: https://semi.design/zh-CN/start/mcp-skills

If your tool is not listed, download the skills.zip file and extract it to the appropriate Skills directory for your programming tool.

```bash
# Example: For a generic standard, extract to .skills/
# For Trae, extract to .trae/skills/
```

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

### Drag and Drop Sorting Setup

Source: https://semi.design/zh-CN/input/transfer

Sets up sensors for drag-and-drop operations, including mouse, touch, and keyboard inputs. It also defines a utility to get the index of an item and calculates the active index for drag events.

```javascript
const [activeId, setActiveId] = useState(null);
// sensors 确定拖拽操作受哪些外部输入影响（如鼠标，键盘，触摸板）
const sensors = useSensors(
useSensor(MouseSensor),
useSensor(TouchSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
);
const getIndex = useCallback((id) => items.indexOf(id), [items]);
const activeIndex = useMemo(() => activeId ? getIndex(activeId) : -1, [getIndex, activeId]);
const onDragStart = useCallback(({ active }) => {
setActiveId(active.id);
}, []);
```

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

### Creating Toasts with Custom Configuration

Source: https://semi.design/zh-CN/feedback/toast

Demonstrates how to create Toast instances with specific configurations, such as a custom container for rendering. This is useful for overriding global settings.

```APIDOC
## ToastFactory.create(config)

### Description
Creates a new Toast instance with a custom configuration. This allows for overriding global Toast settings for specific instances.

### Method
`ToastFactory.create(config)`

### Parameters
#### config
- **getPopupContainer** (() => HTMLElement) - Optional - Specifies the DOM element where the toast should be rendered. Defaults to `document.body`.

### Request Example
```javascript
import { Button, ToastFactory } from '@douyinfe/semi-ui';

const ToastInCustomContainer = ToastFactory.create({
  getPopupContainer: () => document.getElementById('custom-toast-container'),
});

// Usage:
// ToastInCustomContainer.info('Toast in some container');
```

### Response
- Returns a Toast instance that can be used to display messages (e.g., `info`, `success`, `warning`, `error`, `close`).
```

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

### Configure Initial Volume and Mute

Source: https://semi.design/zh-CN/plus/videoPlayer

Set the initial volume level using the `volume` prop (0-100) and control mute state with the `muted` prop. Setting `muted` to `true` will start the video muted.

```javascript
import React from 'react';
import { VideoPlayer } from '@douyinfe/semi-ui';
() => {
const src = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4";
const poster = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg";
return (
<VideoPlayer
height={630} 
src={src}
poster={poster}
muted={true}
/>
);
};

```

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

### Basic Usage

Source: https://semi.design/zh-CN/show/empty

Demonstrates the basic usage of the Empty component, including setting a placeholder image and handling dark mode.

```APIDOC
import React from 'react';
import { Empty } from '@douyinfe/semi-ui';

const App = () => (
  <Empty image={<img src="your-image.png" alt="empty" />} />
);
```

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

### 如何引入

Source: https://semi.design/zh-CN/feedback/skeleton

Import the Skeleton component from the semi-ui library.

```APIDOC
## 如何引入

### Description
Import the Skeleton component from the semi-ui library.

### Code
```javascript
import { Skeleton } from '@douyinfe/semi-ui';
```
```

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

### UserGuide Component API

Source: https://semi.design/zh-CN/show/userGuide

The UserGuide component provides an API for creating step-by-step guides for users. It supports various configurations for appearance, behavior, and interaction.

```APIDOC
## UserGuide Component API Reference

### Properties

| Property Name | Description | Type | Default Value | Version |
|---|---|---|---|---|
| className | Custom CSS class name | string | - | |
| current | Index of the current step | number | 0 | |
| finishText | Text for the completion button on the last step | string | '完成' | |
| mask | Whether to display the mask layer | boolean | true | |
| mode | Guide mode, options: `popup` (bubble card) or `modal` (dialog) | string | popup | |
| nextButtonProps | Properties for the next button | ButtonProps | {} | |
| onChange | Callback when the step changes | function(current: number) | () => void | |
| onFinish | Callback when all steps are completed | function() | () => void | |
| onNext | Callback when the next button is clicked | function(current: number) | () => void | |
| onPrev | Callback when the previous button is clicked | function(current: number) | () => void | |
| onSkip | Callback when the skip button is clicked | function() | () => void | |
| position | Popup position relative to the target element, options: `top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight` | string | bottom | |
| prevButtonProps | Properties for the previous button | ButtonProps | {} | |
| showPrevButton | Whether to display the previous button | boolean | true | |
| showSkipButton | Whether to display the skip button | boolean | true | |
| spotlightPadding | Padding for the highlight area, in pixels | number | - | |
| steps | Configuration for guide steps, required | StepItem[] | [] | |
| style | Custom styles | React.CSSProperties | - | |
| theme | Theme style, options: `default` or `primary` | string | default | |
| visible | Whether to display the guide | boolean | false | |
| getPopupContainer | Specify the parent DOM for rendering the popup | () => HTMLElement | - | |
| zIndex | Popup layer level | number | 1030 | |

### Steps.Step Properties

| Property Name | Description | Type | Default Value | Version |
|---|---|---|---|---|
| className | Custom CSS class name for the step | string | - | |
| cover | Cover image for the step | ReactNode | - | |
| target | Target element for the highlight area | (() => Element) | Element | - |
| title | Step title | string | ReactNode | - |
| description | Step description | ReactNode | - |
| mask | Whether to display the mask for this step, overrides global configuration | boolean | - | |
| showArrow | Whether to display the arrow (only effective when mode=`popup`) | boolean | true | |
| spotlightPadding | Padding for the highlight area of this step, overrides global configuration | number | - | |
| theme | Theme for this step's popup, overrides global configuration | `default` | `primary` | - |
| position | Position of this step's popup, overrides global configuration | Position | - | |
```

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

### Custom Date Display Example

Source: https://semi.design/zh-CN/show/calendar

Example of how to use the `renderDateDisplay` prop to customize the date display in the calendar.

```APIDOC
```javascript
import React from 'react';
import { Avatar, Calendar } from '@douyinfe/semi-ui';

() => {
  const displayValue = new Date(2023, 4, 14);
  const renderDateDisplay = date => {
    const colors = ["amber", "blue", "cyan", "green", "grey", "indigo", "lime"];
    return <div><Avatar color={colors[date.getDay()]} size="small">{date.getDate()}</Avatar></div>;
  };
  return <Calendar height={400} mode="week" displayValue={displayValue} renderDateDisplay={renderDateDisplay} />;
};
```
```

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

### Install VChart using yarn

Source: https://semi.design/zh-CN/show/chart

Install the VChart package for React using yarn. This is an alternative to npm for dependency management.

```bash
yarn add @visactor/react-vchart
```

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

### Install VChart using npm

Source: https://semi.design/zh-CN/show/chart

Install the VChart package for React using npm. This is a prerequisite for using Semi DV.

```bash
npm install @visactor/react-vchart
```

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

### Basic Usage

Source: https://semi.design/zh-CN/show/cropper

Demonstrates the basic usage of the Cropper component, including setting the image source and defining the cropper shape.

```APIDOC
## Basic Usage

Set the `src` to specify the image to be cropped. Use `shape` to set the cropper box shape, which defaults to a rectangle.

Available shapes: `rect`, `round`, `roundRect`.

```javascript
import { Cropper, Button, RadioGroup, Radio } from '@douyinfe/semi-ui';
import React, { useState, useRef, useCallback } from 'react';

const containerStyle = {
  width: 550,
  height: 300,
  margin: 20,
};

function Demo() {
  const ref = useRef(null);
  const [shape, setShape] = useState('rect');
  const [cropperUrl, setCropperUrl] = useState('');

  const onButtonClick = useCallback(() => {
    const canvas = ref.current.getCropperCanvas();
    setCropperUrl(canvas.toDataURL());
  }, []);

  const onShapeChange = useCallback((e) => {
    setShape(e.target.value);
  }, []);

  return (
    <>
      <RadioGroup onChange={onShapeChange} value={shape}>
        <Radio value={'rect'}>rect</Radio>
        <Radio value={'round'}>round</Radio>
        <Radio value={'roundRect'}>roundRect</Radio>
      </RadioGroup>
      <Cropper
        ref={ref}
        src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/image.png'}
        shape={shape}
        style={containerStyle}
      />
      <Button onClick={onButtonClick}>裁切</Button>
      {cropperUrl && <img src={cropperUrl} alt="Cropped" />}
    </>
  );
}
```
```

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

### Nested ArrayField Example

Source: https://semi.design/zh-CN/input/form

Demonstrates multi-level nesting within ArrayField components. This example shows a nested structure for email rule configurations.

```javascript
import { Form, ArrayField, Button, Card, Typography, } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconMinusCircle } from "@douyinfe/semi-icons";
import React from "react";

const selectOption = [
  { label: '发件人地址', value: 'address' },
  { label: '邮件主题', value: 'title' },
  { label: '发送时间', value: 'sendTime' },
  { label: '接收时间', value: 'receiveTime' },
  { label: '正文', value: 'main' },
  { label: '附件名称', value: 'attachmentName' },
];

const initValue = {
  group: [
    {
      name: "收信规则1",
      rules: [
        { ruleType: "address", type: "include", text: "bytedance.com" },
        { ruleType: "title", type: "exclude", text: "更新日志" },
      ],
    },
    {
      name: "收信规则2",
      rules: [
        { ruleType: "sendTime", type: "include", text: "2019" }

```

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

### Custom Content Rendering Example

Source: https://semi.design/zh-CN/plus/chat

Illustrates how to customize the content area of chat messages using `renderChatBoxContent`. This example displays source information with links.

```jsx
import React, { useState, useCallback, useRef} from 'react';
import { Chat, MarkdownRender } from '@douyinfe/semi-ui';
const defaultMessage = [
{
role: 'assistant',
id: '3',
createAt: 1715676751919,
content: "Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千计平台产品，服务内外部 10 万+ 用户。",
source: [
{
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',
url: '/zh-CN/start/introduction',
title: 'semi Design',
subTitle: 'Semi design website',
content: 'Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。'
},
{
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',
url: '/dsm/landing',
subTitle: 'Semi DSM website',
title: 'Semi 设计系统',
content: '从 Semi Design，到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中'
},
{
avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',

```

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

### Check Node.js and npm Versions

Source: https://semi.design/zh-CN/start/mcp-skills

Verify your environment meets the recommended Node.js and npm versions for MCP compatibility. Upgrade if necessary.

```bash
node -v
npm -v
```

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

### How to Import

Source: https://semi.design/zh-CN/input/taginput

Import the TagInput component from the semi-ui library.

```APIDOC
## How to Import

### Description
Import the TagInput component from the semi-ui library.

### Code Example
```javascript
import { TagInput } from '@douyinfe/semi-ui';
```
```

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

### 基本使用

Source: https://semi.design/zh-CN/feedback/skeleton

Demonstrates the basic usage of the Skeleton component to display placeholder content while data is loading.

```APIDOC
## 基本使用

### Description
Display placeholder content while data is loading. The `loading` prop controls the visibility of the placeholder versus the actual content.

### Method
React Component

### Code Example
```jsx
import React, { useState } from 'react';
import { Skeleton, Switch, Avatar, Button } from '@douyinfe/semi-ui';

() => {
  const [loading, setLoading] = useState(true);
  const showContent = () => {
    setLoading(!loading);
  };
  return (
    <>
      <span style={{ display: 'flex', alignItems: 'center' }}>
        可实时编辑
        <Switch checked={!loading} onChange={showContent} style={{ marginLeft: 8 }} />
      </span>
      <Skeleton loading={loading} active >
        <div>
          <Skeleton.Avatar />
          <Skeleton.Title />
          <Skeleton.Paragraph rows={3} />
        </div>
      </Skeleton>
    </>
  );
};
```
```

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

### Custom Action Bar Rendering Example

Source: https://semi.design/zh-CN/plus/chat

Shows how to customize the action bar for chat messages using the `renderChatBoxAction` prop. This example includes a dropdown for actions.

```jsx
import React, {useState, useCallback} from 'react';
import { Chat, Dropdown } from '@douyinfe/semi-ui';
import { IconForward } from '@douyinfe/semi-icons';
const defaultMessage = [
{
role: 'system',
id: '1',
createAt: 1715676751919,
content: "Hello, I'm your AI assistant.", 
},
{
role: 'user',
id: '2',
createAt: 1715676751919,
content: "介绍一下 semi design", 
},
{
role: 'assistant',
id: '3',
createAt: 1715676751919,
content: 'Semi Design 是由抖音前端团队和MED产品设计团队设计、开发并维护的设计系统',
}
];
const roleInfo = {

```

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

### Install a custom VChart theme package

Source: https://semi.design/zh-CN/show/chart

Install a specific VChart theme package published by designers. Replace '@ies/semi-vchart-theme-test' with the actual theme package name.

```bash
npm install @ies/semi-vchart-theme-test
```

```bash
yarn add @ies/semi-vchart-theme-test
```

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

### Basic Usage

Source: https://semi.design/zh-CN/input/switch

Demonstrates the basic usage of the Switch component, including state changes via `onChange` and setting initial states with `defaultChecked` or `checked`.

```APIDOC
## Basic

You can listen for state changes using `onChange`, and specify the selected state with `defaultChecked` or a controlled `checked`.
Use `aria-label` to describe the specific function of the Switch.

```javascript
import React from 'react';
import { Switch } from '@douyinfe/semi-ui';

() => (
  <div>
    <Switch onChange={(v, e) => console.log(v)} aria-label="a switch for demo"></Switch>
    <br />
    <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label="a switch for semi demo"></Switch>
  </div>
);
```
```

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

### Install A11y Theme

Source: https://semi.design/zh-CN/experience/accessibility

Install the dedicated A11y theme for enhanced accessibility. This theme increases contrast and font sizes. Recommended for higher contrast requirements.

```bash
npm i @semi-bot/semi-theme-a11y
```

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

### How to Import

Source: https://semi.design/zh-CN/show/scrolllist

Import the ScrollList and ScrollItem components from the semi-ui library.

```APIDOC
import { ScrollList, ScrollItem } from '@douyinfe/semi-ui';
```

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

### Custom Avatar and Title Rendering Example

Source: https://semi.design/zh-CN/plus/chat

Demonstrates how to customize the avatar and title of chat messages using `renderChatBoxAvatar` and `renderChatBoxTitle` props. This example shows a user message with an image.

```jsx
import React, {useState, useCallback} from 'react';
import { Chat, Avatar, Tag } from '@douyinfe/semi-ui';
const defaultMessage = [
{
role: 'system',
id: '1',
createAt: 1715676751919,
content: "Hello, I'm your AI assistant.", 
},
{
role: 'user',
id: '2',
createAt: 1715676751919,
content: [
{
type: 'text',
text: '这张图片里有什么？'
},
{
type: 'image_url',
image_url: {
url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg'
}
}
]
```

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

### Custom Trigger Example

Source: https://semi.design/zh-CN/input/treeselect

Example demonstrating how to use `triggerRender` to customize the TreeSelect's trigger appearance. This requires setting `filterTreeNode` to false and `searchPosition` to 'trigger' when using `onSearch`.

```jsx
import React, { useState, useCallback, useMemo } from 'react';
import { TreeSelect, Button, Tag, TagInput } from '@douyinfe/semi-ui';
function Demo() {
const treeData = useMemo(() => [
{
label: '亚洲',
value: '亚洲',
key: '0',
children: [
{
label: '中国',
value: '中国',
key: '0-0',
children: [
{
label: '北京',
value: '北京',
key: '0-0-0',
},
{
label: '上海',
value: '上海',
key: '0-0-1',
},
],
}
```

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

### Set Week Start Day

Source: https://semi.design/zh-CN/show/calendar

Configure the starting day of the week for month and week views using the `weekStartsOn` prop. 0 for Sunday, 1 for Monday, and so on. Defaults to Sunday.

```javascript
import React, { useState } from 'react';
import { RadioGroup, Calendar, Radio } from '@douyinfe/semi-ui';

() => {
  const [v, setV] = useState(0);
  return (
    <div>
      <RadioGroup defaultValue={v} aria-label="周起始日" type="button" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
        <Radio value={0}>周日</Radio>
        <Radio value={1}>周一</Radio>
        <Radio value={2}>周二</Radio>
        <Radio value={3}>周三</Radio>
        <Radio value={4}>周四</Radio>
        <Radio value={5}>周五</Radio>
        <Radio value={6}>周六</Radio>
      </RadioGroup>
      <Calendar
        style={{ marginTop: 20 }}
        mode="month"
        weekStartsOn={v}
      ></Calendar>
    </div>
  );
};

```

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

### How to Import Input Component

Source: https://semi.design/zh-CN/input/input

Import the Input component from the '@douyinfe/semi-ui' package.

```javascript
import { Input } from '@douyinfe/semi-ui';

```

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

### How to Import

Source: https://semi.design/zh-CN/input/rating

Import the Rating component from the semi-ui library.

```APIDOC
## How to Import

```javascript
import { Rating } from '@douyinfe/semi-ui';
```
```

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

### Custom Search Button Example

Source: https://semi.design/zh-CN/plus/jsonviewer

Illustrates how to use the `renderSearchButton` prop to replace the default search button with a custom one. This example shows a custom button that toggles the search bar visibility.

```APIDOC
## Custom Search Button Example

### Description
This example demonstrates how to use the `renderSearchButton` prop to customize the search button in the `JsonViewer` component. It shows a scenario where a custom search button is rendered, and clicking it toggles the visibility of the search bar.

### Code
```javascript
import React from 'react';
import { JsonViewer, Button } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';

const data = `{
"name": "Semi",
"version": "0.0.0"
}`;

function CustomSearchButtonDemo() {
  return (
    <div style={{ marginBottom: 16 }}>
      <JsonViewer
        height={200}
        width={700}
        value={data}
        renderSearchButton={(defaultButton, controls) => (
          <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 10 }}>
            {!controls.showSearchBar ? (
              <Button icon={<IconSearch />} onClick={controls.onToggleSearchBar}>
                搜索
              </Button>
            ) : (
              defaultButton
            )}
          </div>
        )}
      />
    </div>
  );
}

export default CustomSearchButtonDemo;
```
```
Tokens:
Raw