Using Dumi for Component Library Development and Documentation

Dumi integrates component library engineering and static documentation site generation, offering three project modes: documentation mode (only component docs), site mode (full website with customizable pages), and pure static site (no source code). Each mode can be initialized with commands such as npx @umijs/create-dumi-lib or yarn create @umijs/dumi-lib --site .

The project structure for site mode includes configuration files (.editorconfig, .fatherrc.ts, .umirc.ts, etc.), a src directory for component source, and a docs folder for markdown documentation. A sample component Foo resides under src/Foo with index.md and index.tsx .

Documentation is written in MDX, allowing seamless insertion of JSX code within markdown. Dumi supports on‑demand loading of third‑party libraries (e.g., Ant Design) via the extraBabelPlugins option in .umirc.ts , and external demo imports using code tags.

By default, building the project with npm run build produces a dist folder containing bundled components in both CommonJS ( index.js ) and ES module ( index.esm.js ) formats, which does not support per‑component tree‑shaking. Switching the build tool from Rollup to Babel enables on‑demand loading, generating separate es (ESM) and lib (CJS) directories for each component.

Dumi’s configuration is split between documentation settings (logo, title, Algolia, locales, navigation, etc.) stored in .umirc.ts and engineering settings (entry, output files, esm/cjs formats, cssModules, extra Babel plugins/presets) stored in .fatherrc.ts . Over 60 configuration options are available.

The workflow also includes code formatting ( npm run prettier ), unit testing ( npm run test using Jest), and commands to build the component library ( npm run build ) and the documentation site ( npm run docs:build ). Publishing is done via npm run docs:deploy , which uses gh-pages to deploy the static site.