LiveChat Design System is an open-source library of React components for building LiveChat products and applications. It was originally created to help our teams work faster together, but it can be easily adapted to create applications with the look and feel of LiveChat experience.

How to use it

We recommend that while building a new app, you begin by following the system as closely as possible to suit LiveChat brand and experience.

For developers

Our Design System was created for React development, and it's available in the npm registry. If you are not working with React, then you can use our hosted styles.css file to get look and feel of LiveChat app in your vanilla JS project.

For designers

Every component in LiveChat Design System includes a documentation, code, and working examples (you can play with the component examples and see what happens). By getting the Figma library, you have access to all of the components and styles (colors, fonts, shadows).

Design System in use

Building apps is much more straigtforward with the ready-to-use compontents we provide in our Design System. This way, you can be sure your app integrates seamlessly with the LiveChat Application in terms of design.