Dynamic UI

Build financial applications with React components and customizable templates designed for micro frontend integration.

Getting Started

Requirements

• Node.js >= 22.0.0

Browser Support

.browserslistrc declares the minimum supported browsers for both the JavaScript and the CSS of the library:

The floor comes from features the library already relies on: color-mix() in table variant colors and the file input button hover (Chrome 111, Safari 16.2), and :has() in form validation and input group styles (Firefox 121).

• The library ships modern JavaScript as is: tsc targets ES2017 syntax, but there is no API transpilation or polyfills (core-js). Dependencies such as React or framer-motion have their own minimums.
• npm run eslint checks src with eslint-plugin-compat against .browserslistrc. It detects global APIs (queueMicrotask, Object.fromEntries, …) but not instance methods (.at(), .flatMap(), MediaQueryList.addEventListener), so review those by hand.
• npm run stylelint:compat checks the compiled dist/css/dynamic-ui.min.css (run npm run build first). It ignores features no version of a target browser supports, such as cursor on iOS or scrollbar-width styling, because they only degrade the experience. caniuse-lite has no data for color-mix(), so this check does not catch it either.
• autoprefixer reads the same file when building the CSS.

Supporting older browsers requires refactoring that code and adding polyfills; open an issue first.

Installation

npm install @dynamic-framework/ui-react

For more details, visit the npm package page.

CSS Distribution Change

Important: Starting from version 2.3.0, only dynamic-ui.css and dynamic-ui.min.css are distributed. The previous variants dynamic-ui-root.css and dynamic-ui-non-root.css have been removed to simplify upgrades and avoid desynchronization issues.

• To customize design tokens or variables, include dynamic-ui.css and override the variables you need in your own stylesheet or snippet.
• All default variables are included in the main bundle, ensuring safe upgrades and consistent behavior.
• For advanced customization, refer to the Storybook design tokens documentation and docs.modyo.com.

Development Commands

For local development and testing, you can use the following commands after clone the project:

• Install deps: Install required deps for development

  npm install
  

• Build: Compiles the project for distribution.

  npm run build
  

• Test: Runs all unit tests.

  npm test
  

• Test with Coverage: Runs unit tests and generates a coverage report.

  npm run test:coverage
  

• Storybook: Starts the Storybook development server to browse components.

  npm run storybook
  

Documentation and Useful Links

• Official Documentation: Find guides and in-depth documentation at docs.modyo.com/en/dynamic.
• Framework Website: dynamicframework.dev.
• Component Catalog (Storybook): react.dynamicframework.dev.

Made with 💚 by Modyo