Getting Started with Essential® UI Kit for React

2 Feb 20261 minute 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 repository: https://github.com/syncfusion/essential-ui-kit-for-react, and open the project 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 via Terminal > New Terminal.

Opening a new terminal

Step 3: Install dependencies and run the app

Run the following commands in the terminal:

  1. Install dependencies
    Install all required packages for the blocks, Syncfusion® React components, and the sample browser:

    Installing the required dependencies

    This downloads and installs all dependencies listed in the project’s package.json file.

  2. Serve the app locally
    After installing dependencies, start the React development server:

    Running the React development server

    The server will display a local host URL in the terminal, for example:

    Local development server running

    To view the app, Ctrl + Click (Windows) or Cmd + Click (macOS) the localhost URL displayed in the terminal to open the app in the default browser.

Step 4: License key requirement

The blocks include Syncfusion® React components that require an active license key for proper display and usage. Activate and register a license key as described below.

How to obtain the license key

Generate a license key from the Syncfusion account page: https://ej2.syncfusion.com/react/documentation/licensing/license-key-generation.

How to register the license key in the app

Register the license key using one of the methods on the registration guide: https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration#register-syncfusion-license-key-using-the-npx-command.

Registering the license key ensures components function without licensing warnings.

Get started by viewing the online demo

If you prefer a quick demo instead of downloading the app, explore the blocks directly via the online demo: https://ej2.syncfusion.com/react/essential-ui-kit/blocks.