Start · Quick Start
Quick Start

1. Install Library

2. Use components in a modular way 💫

Semi provides esm format dist, and the css of the component is only imported by the corresponding js.
When used in Webpack, Rspack, create-react-app or Vite projects, there is no need to configure any compilation items.
All related resources are packaged on-demand at build process. Tree shaking will work without additional configuration.
It is recommended to import reset.css into the project, which can avoid introducing the default style of the browser.

3. Use in Next.js

  • If you only use the default theme, you can add Semi-related packages to transpilePackages (Next.js version requires >= v13.1) .
  • If you need to use a custom theme package or the version of Next.js is lower than v13.1, you need to use the compiling plugin @douyinfe/semi-next provided by Semi
    • First install the plugin npm i @douyinfe/semi-next (if you use yarn or pnpm, please replace it with the equivalent command)
    • Configured in next.config.js, the plugin will remove the default import CSS statement of the component. More configurations can be found @douyinfe/semi-nextDetail Config
    • import semi css in global.css (using this method in Next.js does not support on-demand import)
How to use theme packages with Next.js
You need to change the path of the import statement in globals.css, and replace the default theme CSS product with the CSS product in your customized theme package.
For example, when you want to use the theme package of the Douyin creation service platform @semi-bot/semi-theme-doucreator

4. Use in Remix

  • @remix related package version requirements > 1.11.0, and install @remix-run/css-bundle
  • Configure remix.config.js, refer to Remix Css Side-Effect Imports. Turn on unstable_cssSideEffectImports, and configure Semi related packages in serverDependenciesToBundle.
  • Configure in root.tsx,refer to Remix CSS Bundling. Import cssBundleHref and configure links
  • After completing the configuration, you can use Semi components normally
How to use theme packages with Remix
You can directly replace the cssBundleHref step with importing the built full css product in the theme package to replace the default theme css).
For example, when you want to apply the theme package @semi-bot/semi-theme-doucreator of the Douyin creation service platform Time

5. Use UMD import in browser

BUILD-JS BUILD-CSS
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.27.0 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