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!
Pre-requisites
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 account.
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: Install Via NPM Package Manager
The first method involves installing the Amity Web Open Source UI Kit via the NPM package manager. This is the recommended method as it allows for easier updates and maintenance.
Step 1: Install Amity Web Open Source UI Kit
To install the UIKit via NPM, navigate to your React project root and run the following command:
Step 2: Wrap Your Application with AmityUiKitProvider
After installing the UI Kit, you need to wrap your application with the AmityUiKitProvider. This sets up the necessary context for the UI components.
Step 3: Run Your Application
After wrapping your application, you can run it to see the UI Kit in action.
Method 2: Install Via Forking and Cloning The Repo
The second method involves forking and cloning the Amity Web Open Source UI Kit repository. This method allows for more customization, as you have direct access to the source code.
Step 1: Fork and Clone the Repository
First, fork the Amity Web Open Source UI Kit repository on GitHub. Then, clone your forked repository to your local machine.
Step 2: Build The UI Kit
Navigate to the cloned repository and build the UI Kit.
Step 3: Link the Package
After building, you can link the package to your project. Navigate to your React project root and run the following command, replacing the path with the actual path to your cloned repository.
Step 4: Wrap Your Application with AmityUiKitProvider
Similar to method 1, wrap your application with the AmityUiKitProvider.
Step 5: Run Your Application
After wrapping your application, you can run it to see the UI Kit in action.
Final Thoughts
Integrating the Amity Web Open Source UI Kit into your social project has been made easy with these two methods. Whether you choose to install via NPM or fork and clone the repository, you'll have a powerful set of UI components at your disposal. Explore the full range 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.