Start · Quick Start
Quick Start

1. Installation of Semi

2、Use components in a modular way 💫

It is recommended to introduce reset.css into the project, which can avoid introducing the default style of the browser.

Use UMD import in browser

We do not recommend using the built file directly, as this will introduce all components in full and cannot be loaded on demand. But if there is indeed a need for non-construction scenarios, you can quote in the following ways
Use script and link tags to import files directly in the browser, and use the global variable SemiUISemiIconsSemiIllustrations
  1. Please make sure you have import react and react-dom in advance
  2. Import the JS file, the following example URL 2.1.4 is the version identifier, if you want to use a different version of Semi, just replace the corresponding value in version
  1. Import the CSS style file of the Semi default theme

4、Use in Next.js


Install @douyinfe/semi-next in the project root directory.


Create next.config.js in the project root directory and configure it.
Detailed documentation of @douyinfe/semi-next.


Introduce the full amount of semi css in global.css. Currently, on-demand import is not supported.
Using theme in nextjs
You need to replace the path of the import statement in Step3, and replace the default theme CSS product with the CSS product in your customized theme package, for example, the theme package is @semi-bot/semi-theme-nyx-c