Amity Social Cloud UI Kit with social media features

How to easily integrate Amity Social Cloud Web UI Kit with your project

Italo Orihuela
Italo Orihuela
Aug 30, 2023

For web development and efficient implementation, open-source UI Kits have become a game-changer. They offer developers greater flexibility and customization options, allowing them to have complete control over the visual style of their projects. One such UI Kit is the Amity Web Open Source UI Kit, which provides the necessary UI for having Social and Chat features in your project. In this tutorial, we will guide you through the process of integrating this Open Source UI Kit through 2 different methods!


Before we begin, ensure that you have the following:

  • Node.js and npm installed on your machine.
  • An existing React project.
  • Git installed on your machine.
  • An Amity Social Cloud App instance.

Note: If you haven’t already registered for an Amity account, we recommend following our comprehensive step-by-step guide on how to create your new network.

Method 1: Installing via npm

Step 1: Clone the UI Kit Repository

First, we need to clone the UI Kit repository from GitHub. Open your terminal and run the following command:

Step 2: Navigate to the Directory

Next, navigate to the directory where the source code was installed:

Step 3: Install Package Dependencies

Now, we need to install the package dependencies. Run the following command:

Step 4: Build the Project

After installing the dependencies, build the project using the following command:

Step 5: Link the Project

Link the project using the npm link command:

Step 6: Import the UI Kit into Your Project

Lastly, import (link) the UI Kit into your project by running the following command:

Now you can run the following sample code to get you started with our UI Kit:

Method 2: Installing via git submodule

Step 1: Create a New React Project

First, create a new React project.

Step 2: Create a New Repository

Create a new repository using `git init` inside your root directory.

Step 3: Select the Path

Select the path where you want to clone the submodule or use `cd src`.

Step 4: Add AmityUIKit Open Source into Your Git Repository

Add Amity UI Kit open source into your git repository with git submodule command as shown below.

Step 5: Navigate to the Directory

Navigate to the directory where the source code was installed:

Step 6: Install Package Dependencies

Run `npm i` to install package dependencies.

Step 7: Build the Project

  • Run `npm run` build.
  • Install and configure babel transcompiler, then create babel.config.js at the root of your project.
  • Add “babelrcRoots” option into your babel.config.js file. If you installed the source code in a different path, replace “./src/ui-kit” with the path where you installed the UI Kit.

Once you’ve installed and created the babel configuration, your configuration may look like this:

Step 8: Link React from Root to UI Kit

Navigate back to your project’s root directory and link react from root to ui-kit:

Step 9: Link React in the UI Kit Folder

Go to the ui-kit folder and link react:

Step 10: Start the Project

Finally, go back to the root directory of your project and start the project:

After running these commands, you can import the UI Kit in your React components like this:

Final Thoughts

Integrating a Web Open Source UI Kit into your existing projects can significantly enhance your development experience. It not only provides you with greater flexibility and customization options but also allows for more transparency and visibility. By following the steps outlined in this tutorial, you can seamlessly integrate Amity’s UI Kit into your projects and take full advantage of its features. Further details can be found in our documentation and if you are ready to give it a try you can click contact sales.