Getting Started with React Components via CDN – Zero Build Setup

This section explains how to add Syncfusion^® React components to a browser-based project using CDN services like esm.sh. It's a quick way to integrate components without build tools, perfect for demos or simple setups using modern ES modules.

What is esm.sh?

esm.sh is an ES Module CDN that turns npm packages into native ES modules. You can load Syncfusion^® React packages directly in the browser, enabling modern module use in HTML documents.

Prerequisites

System requirements for Syncfusion^® React UI components

Setting up import maps

This guide uses the React Message component as an example. To get started, set up your module paths for React and Syncfusion packages in the HTML file with this code:

<script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19",
          "react-dom/client": "https://esm.sh/react-dom@19/client?bundle",
          "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime",
          "@syncfusion/react-base": "https://esm.sh/@syncfusion/react-base@32.1.19?external=react",
          "@syncfusion/react-notifications": "https://esm.sh/@syncfusion/react-notifications@32.1.19?bundle&external=react,@syncfusion/react-base"
        }
      }
</script>

<script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19",
          "react-dom/client": "https://esm.sh/react-dom@19/client?bundle",
          "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime",
          "@syncfusion/react-base": "https://esm.sh/@syncfusion/react-base@32.1.19?external=react",
          "@syncfusion/react-notifications": "https://esm.sh/@syncfusion/react-notifications@32.1.19?bundle&external=react,@syncfusion/react-base"
        }
      }
</script>

Add Syncfusion® CSS styles

Syncfusion^® React components come with built-in themes. Add this CSS link to the HTML <head> tag:

<link href="https://unpkg.com/@syncfusion/react-base@32.1.19/styles/material.css" rel="stylesheet" />
<link href="https://unpkg.com/@syncfusion/react-notifications@32.1.19/styles/material.css" rel="stylesheet" />

<link href="https://unpkg.com/@syncfusion/react-base@32.1.19/styles/material.css" rel="stylesheet" />
<link href="https://unpkg.com/@syncfusion/react-notifications@32.1.19/styles/material.css" rel="stylesheet" />

Add Syncfusion® React component

Next, add a script to the HTML to render a Syncfusion^® component with React. Here's what the full HTML looks like:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>React 19 ESM + Syncfusion React Message Component</title>
      <!-- Import map -->
      <script type="importmap">
         {
           "imports": {
             "react": "https://esm.sh/react@19",
             "react-dom/client": "https://esm.sh/react-dom@19/client?bundle",
             "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime",
             "@syncfusion/react-base": "https://esm.sh/@syncfusion/react-base@32.1.19?external=react",
             "@syncfusion/react-notifications": "https://esm.sh/@syncfusion/react-notifications@32.1.19?bundle&external=react,@syncfusion/react-base"
           }
         }
      </script>
      <!-- Styles -->
      <link href="https://unpkg.com/@syncfusion/react-base@32.1.19/styles/material.css" rel="stylesheet" />
      <link href="https://unpkg.com/@syncfusion/react-notifications@32.1.19/styles/material.css" rel="stylesheet" />
   </head>
   <body style="margin: 100px">
      <div id="root"></div>
      <!-- Babel -->
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <!-- Your React App -->
      <script type="text/babel" data-type="module">
         import * as React from 'react';
         import { createRoot } from 'react-dom/client';
         import { registerLicense } from '@syncfusion/react-base';
         import { Message, Severity } from '@syncfusion/react-notifications';
         registerLicense("Your key");
         
         const App = () => {
           return (
             <Message severity={Severity.Success}>Your message has been sent successfully</Message>
           );
         }
         const root = createRoot(document.getElementById('root'));
         root.render(<App />);
      </script>
   </body>
</html>

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>React 19 ESM + Syncfusion React Message Component</title>
      <!-- Import map -->
      <script type="importmap">
         {
           "imports": {
             "react": "https://esm.sh/react@19",
             "react-dom/client": "https://esm.sh/react-dom@19/client?bundle",
             "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime",
             "@syncfusion/react-base": "https://esm.sh/@syncfusion/react-base@32.1.19?external=react",
             "@syncfusion/react-notifications": "https://esm.sh/@syncfusion/react-notifications@32.1.19?bundle&external=react,@syncfusion/react-base"
           }
         }
      </script>
      <!-- Styles -->
      <link href="https://unpkg.com/@syncfusion/react-base@32.1.19/styles/material.css" rel="stylesheet" />
      <link href="https://unpkg.com/@syncfusion/react-notifications@32.1.19/styles/material.css" rel="stylesheet" />
   </head>
   <body style="margin: 100px">
      <div id="root"></div>
      <!-- Babel -->
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <!-- Your React App -->
      <script type="text/babel" data-type="module">
         import * as React from 'react';
         import { createRoot } from 'react-dom/client';
         import { registerLicense } from '@syncfusion/react-base';
         import { Message, Severity } from '@syncfusion/react-notifications';
         registerLicense("Your key");
         
         const App = () => {
           return (
             <Message severity={Severity.Success}>Your message has been sent successfully</Message>
           );
         }
         const root = createRoot(document.getElementById('root'));
         root.render(<App />);
      </script>
   </body>
</html>

Open in the browser

Open the index.html file in a browser to see the Syncfusion^® React Message component render like this:

Your message has been sent successfully