repository·main·Indexed 27 days ago
https://github.com/douyinfe/semi-designA modern, comprehensive, and flexible design system and UI library featuring over 80 high-quality React components. Semi-UI connects DesignOps and DevOps with Design-to-Code (D2C) and Code-to-Design (C2D) capabilities. The ecosystem includes @douyinfe/semi-animation for JS-based animations, @douyinfe/semi-animation-react for transition components, @douyinfe/semi-animation-styled for CSS-based effects, and a dedicated MCP server for component documentation exploration.
eslint-plugin-semi-design is a custom ESLint plugin used within the Semi Design repository to enforce architectural constraints and best practices across its monorepo packages.TreeSelect component is used for the structured display and selection of multi-level tree data. It is suitable for scenarios where selection options follow a hierarchical structure, such as department hierarchies, subject systems, category directories, or file/folder lists.The AIChatInput component is designed for AI chat scenarios. It supports rich text input, file uploads, referencing, suggestions, templates, functional configuration, and highly customizable displays.
It is built upon tiptap, a modern rich text editor framework. Semi's AIChatInput wraps tiptap to provide an out-of-the-box solution that can be extended or customized to fit complex AI interaction requirements.
Tooltip component is used to identify an element or attach a small amount of auxiliary information. Common use cases include explaining icon meanings, displaying truncated text, or providing descriptions for images.Tabs component is used to group content and allow users to switch between different modules or pages by clicking on tab headers.Select component allows users to select one or more options from a predefined set of options and displays the final selection result.navigation component is used for building navigation structures within applications. It supports hierarchical items including normal items and sub-items with nested children and titles.Tree component is a navigation component that presents a hierarchical list of items. It supports various modes including multi-choice, searching, and custom node rendering.Modal component is used to wait for user interaction, inform users of important information, or display additional information without losing the current context. It is part of the Show category in Semi Design.The Sidebar component is designed for AI-driven application scenarios. It is primarily used to display configuration details, reference sources, and functional information. Common use cases include:
The AIChatInput component is a specialized input box designed for AI chat scenarios. It supports advanced features such as rich text input, file uploading, quoting, suggestions, templates, and custom display configurations.
Its rich text capabilities are built upon tiptap, a modern editor framework. AIChatInput encapsulates tiptap, providing an out-of-the-box solution while allowing developers to extend it with custom nodes, commands, plugins, and menus to meet specific business requirements.