How customizable is the Chat UIKit for web applications?

Web
1

I’m looking into using the Chat UIKit with an existing React application and after going through Amity’s documentation I have a few clarification questions.

It appears from both the documentation and sample web apps that the UI kit is a single component used to display a chat page. Is this the case, or are there individual components that can be used as well? For instance, if I only wanted to display the chat room without showing recent chats can you do that using the UI kit?

I was also wondering how customizable the UI kit is. I saw that colors and typography are customizable, but are there any other customizations that could be made to the components out of the box?

Let me know if I’m missing anything, and if so, where I can go to find this information.
Thank you!

2

Hello @nathan-tzgy our uikit is limited on customisation, we would recommend you to use our open source (Amity UIKit Open Source - Amity Docs) which will enable you to customise as you wish :blush::pray:

3

Hi… following the docs, I can only change the background color in 2 areas…here’s what I tried

const myTheme = {
  palette: {
    system: {
      borders: '#ebecef',
      background: 'green',

    },
    base: 'green',
    primary: '#5f467fcc',//#343232 // for right hand message blocks
    secondary: 'red', // not clear what this does
    tertiary: 'red', // not clear what this does
    neutral: '#333', // name of sender to me
    highlight: 'red',
    },
  }

and this is all it changed:
![image|553x500](upload://7587lCYWn6kWuLL3kBWopjSvjxM.png)

note that in the above example, the system.borders doesn’t impact anything visual.

it appears that the class .kuColor ignores the background color.

4

Hello @edddom are you using our open-source UIKit? If so, have you forked it for your project? This will allow you to customize it as you see fit.