Skip to main content

​
Installation

Get started with Dynamic UI by installing the package and configuring your project.

​
Prerequisites

Before installing Dynamic UI, ensure your development environment meets these requirements:
Dynamic UI requires Node.js 22.0.0 or higher.Check your Node.js version:
node --version
If you need to upgrade, visit nodejs.org or use a version manager like nvm.
Dynamic UI supports React 18.x and 19.x.
package.json
{
  "dependencies": {
    "react": ">=18 <20",
    "react-dom": ">=18 <20"
  }
}
While TypeScript is optional, Dynamic UI includes full TypeScript definitions.For the best development experience, use TypeScript 5.2+:
npm install --save-dev typescript@~5.2.2

​
Package Installation

Install Dynamic UI using your preferred package manager: 
npm install @dynamic-framework/ui-react
The package is published as @dynamic-framework/ui-react on npm with public access.

​
Peer Dependencies

Dynamic UI requires several peer dependencies for full functionality:
1

Required Peer Dependencies

Install the core required dependencies:
npm install react react-dom framer-motion i18next react-i18next react-hot-toast
2

Verify Versions

Ensure your peer dependencies meet the required version ranges:
package.json
{
  "dependencies": {
    "react": ">=18 <20",
    "react-dom": ">=18 <20",
    "framer-motion": ">=12 <13",
    "i18next": ">=25 <26",
    "react-i18next": ">=16 <17",
    "react-hot-toast": ">=2 <3"
  }
}

​
Importing Styles

Dynamic UI is built on Bootstrap 5 and requires CSS imports. You have two options: Import the Bootstrap CSS in your main application file:
App.tsx
import 'bootstrap/dist/css/bootstrap.min.css';
import { DButton, DCard } from '@dynamic-framework/ui-react';

function App() {
  return (
    <DCard>
      <DCard.Body>
        <DButton text="Hello Dynamic UI" />
      </DCard.Body>
    </DCard>
  );
}

export default App;

​
Option 2: Include in HTML

Alternatively, add the Bootstrap CSS via CDN in your index.html:
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Dynamic UI App</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
Dynamic UI requires Bootstrap 5.3.8 or compatible version. Using older versions may cause styling issues.

​
Setting Up Context Provider

Many Dynamic UI components require the DContextProvider for configuration. Wrap your application with it:
main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { DContextProvider } from '@dynamic-framework/ui-react';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <DContextProvider>
      <App />
    </DContextProvider>
  </React.StrictMode>
);

​
Context Configuration

You can customize the context provider with icon families and other settings: 
import { DContextProvider } from '@dynamic-framework/ui-react';

<DContextProvider
  iconFamilyClass="bi"
  iconFamilyPrefix="bi-"
>
  <App />
</DContextProvider>

​
TypeScript Configuration

If using TypeScript, ensure your tsconfig.json is configured correctly:
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"]
}
Dynamic UI includes TypeScript definitions at ./dist/types/index.d.ts, which are automatically picked up by TypeScript.

​
Starter Templates

The fastest way to get started is using an official template:

​
Dynamic React Base Template

The official starter template with Dynamic UI pre-configured: 
npx @modyo/cli@latest get dynamic-react-base-template
cd dynamic-react-base-template
npm install
npm run dev
The base template includes:
  • Pre-configured Dynamic UI setup
  • Bootstrap 5 integration
  • TypeScript configuration
  • Example components and layouts
  • Routing with React Router
  • Development server with Vite

​
Verification

Verify your installation by creating a simple component:
App.tsx
import { DButton, DCard, DAlert } from '@dynamic-framework/ui-react';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="container mt-5">
      <DCard>
        <DCard.Header>
          <h2>Dynamic UI Installed Successfully! 🎉</h2>
        </DCard.Header>
        <DCard.Body>
          <DAlert color="success" className="mb-3">
            Your Dynamic UI installation is working correctly.
          </DAlert>
          <DButton 
            text="Get Started" 
            color="primary" 
            iconEnd="ArrowRight"
          />
        </DCard.Body>
      </DCard>
    </div>
  );
}

export default App;
Run your development server: 
npm run dev
You should see a card with a success alert and a button.

​
Troubleshooting

Problem: Components render but have no styling.Solution: Ensure you’ve imported Bootstrap CSS:
import 'bootstrap/dist/css/bootstrap.min.css';
Or verify the Bootstrap CDN link is in your HTML.
Problem: npm warns about unmet peer dependencies.Solution: Install all required peer dependencies:
npm install react react-dom framer-motion i18next react-i18next react-hot-toast
Problem: TypeScript cannot find type definitions.Solution:
  1. Ensure TypeScript 5.2+ is installed
  2. Check that node_modules/@dynamic-framework/ui-react/dist/types exists
  3. Try deleting node_modules and reinstalling:
rm -rf node_modules package-lock.json
npm install
Problem: Icons in components are not showing.Solution: Install and configure an icon library, or set up the context provider with your preferred icon family:
import { DContextProvider } from '@dynamic-framework/ui-react';

<DContextProvider iconFamilyClass="bi" iconFamilyPrefix="bi-">
  <App />
</DContextProvider>
For Lucide React (recommended):
import { ArrowRight } from 'lucide-react';
import { DButton } from '@dynamic-framework/ui-react';

<DButton text="Next" iconEnd="ArrowRight" />
Problem: Build fails with Node.js version error.Solution: Dynamic UI requires Node.js 22.0.0+. Upgrade your Node.js:
# Using nvm
nvm install 22
nvm use 22

​
Build Configuration

Dynamic UI is distributed with multiple formats for maximum compatibility:
package.json exports
{
  "main": "./dist/index.js",        // CommonJS
  "module": "./dist/index.esm.js",  // ES Modules
  "types": "./dist/types/index.d.ts" // TypeScript definitions
}
Most modern bundlers (Vite, Webpack 5+, Rollup) will automatically use the optimal format.
Dynamic UI includes side effects for CSS files. This is properly configured in the package.json:
{
  "sideEffects": ["*.css"]
}
For quick prototyping, you can use the CDN version: 
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Dynamic UI from CDN -->
<script src="https://dynamicframework-cdn.s3.amazonaws.com/assets/latest/ui-react/index.esm.js" type="module"></script>
CDN usage is not recommended for production applications. Always use npm installation for production deployments.

​
Next Steps

Quick Start Guide

Build your first component with Dynamic UI

Component Documentation

Explore all available components in Storybook
Need help? Open an issue on GitHub or check the official documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us