Getting Started with Essential® UI Kit for React

20 Aug 20252 minutes to read

Follow the steps below to start using the Essential® UI Kit for React. You can begin in one of two ways:

  • Download the App from GitHub: Get the full source code and run the app locally to explore the blocks.
  • View the Online Demo: Interact with the blocks directly through the online demo without downloading any files.

Get Started by Downloading the App from GitHub

Step 1: Download and Open the App in Visual Studio Code

Download the app from the GitHub link, and then open the same in Visual Studio Code to start working with it.

Launching the downloaded app

Step 2: Open a New Terminal

In Visual Studio Code, open the integrated terminal by selecting Terminal > New Terminal.

Opening a new terminal

Step 3: Install Dependencies and Run the App

Run the following commands one after the other in the terminal:

  1. Install dependencies
    Run the command below to install all necessary packages related to the blocks, the Syncfusion® React components, and the sample browser.

    Installing the required dependencies

    This will download and install all the dependencies listed in the package.json file.

  2. Serve the App Locally
    Once the dependencies are installed, you can run the app locally by starting the React local development server. To do so, run the following command.

    Running the React development server

    This command will start the local development server, and you’ll see an output in the terminal indicating the app is running. Typically, it will display a local host URL like this:

    Local development server running

    To view the app in your browser, simply Ctrl + Click (or Cmd + Click on macOS) on the local host URL displayed in the terminal. This will open the app in your default browser, allowing you to interact with the blocks.

Step 4: License Key Requirement

The blocks include several Syncfusion® React components that require an active license key for proper display and usage. To activate the license, refer to the topics below:

How to Obtain the License Key

To obtain the license key, visit the following page: Syncfusion® License.

How to Register the License Key in the App

Register your license key using one of the methods described on this registration page.

Registering the license key ensures that the components function seamlessly without any licensing issues.

Get Started by Viewing the Online Demo

If you prefer a quick demo instead of downloading the app, you can explore the blocks directly through the online demo. Simply visit the official Essential® UI Kit for React website to interact with the blocks.