The UI design language and React library for Conversational UI

Last update: Apr 1, 2022

ChatUI

The UI design language and React library for Conversational UI

Website:https://chatui.io

LICENSE NPM version NPM downloads Gzip Size Jsdelivr Hits

English | 简体中文

Features

  • 😎 Best Practices: The best practice for chat interaction based on our experience of Alime Chatbot
  • 🛡 TypeScript: Written in TypeScript with predictable static types
  • 📱 Responsive: Responsive design to adapt automatically to whatever device
  • Accessibility: Accessibility support and get the certification from Accessibility Research Association
  • 🎨 Theming: Powerful theme customization in every detail
  • 🌍 International: Internationalization support for dozens of languages

Environment Support

Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Android WebView
Android WebView
16+ 31+ 49+ 9.1+ 9.3+ 6+

Install

npm install @chatui/core --save
yarn add @chatui/core

Usage

import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/dist/index.css';

const App = () => {
  const { messages, appendMsg, setTyping } = useMessages([]);

  function handleSend(type, val) {
    if (type === 'text' && val.trim()) {
      appendMsg({
        type: 'text',
        content: { text: val },
        position: 'right',
      });

      setTyping(true);

      setTimeout(() => {
        appendMsg({
          type: 'text',
          content: { text: 'Bala bala' },
        });
      }, 1000);
    }
  }

  function renderMessageContent(msg) {
    const { content } = msg;
    return <Bubble content={content.text} />;
  }

  return (
    <Chat
      navbar={{ title: 'Assistant' }}
      messages={messages}
      renderMessageContent={renderMessageContent}
      onSend={handleSend}
    />
  );
};

DEMO

Development

cd storybook
npm i
npm run storybook

Theme

Visit Customize Theme for detail

Internationalization

Visit i18n for detail

Discussion

License

MIT

GitHub

https://github.com/SenDev001/R-T-Responsive-Chat
You might also like...

Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Jul 19, 2021

Dynamic Styles for React Native and Expo Web

Dynamic Styles for React Native and Expo Web

react-native-swag-styles Dynamic Styles for React Native and Expo Web Highlights Dynamic. Based on React Hook. It automatically re-renders when necess

May 17, 2022

CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid 🧹 What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021

🏠 Airbnb website using React, Next.js and Tailwind CSS

🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022

This repository allows you to create a React template component folder. It optionally includes scss and css files

Generate-React-Components - grc grc let you generate react components in typescript in a folder you specify and it will include .tsx, .scss, .css file

Nov 26, 2021

The simplest solution for content loading in React and styled-components.

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

Jul 13, 2021

Typograpy components for react and styled-components

Typograpy components for react and styled-components

styled-typography Typograpy components for react and styled-components styled-typography is a small set of components, using styled-components, to bet

May 1, 2022

A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

Aug 27, 2021

A networked multiplayer tetris game built using react and redux

A networked multiplayer tetris game built using react and redux

Red-tetris-42Network The objective of this project is to develop a networked mul

May 5, 2022
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

May 10, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

May 12, 2022
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

May 7, 2022
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Jan 3, 2022
A Simple Spinner and Loader Library for React
A Simple Spinner and Loader Library for React

React-Spinner A Simple Spinner and Loader Library Have a look How to use? The NPM package is not released yet. You can clone the project and try out t

Apr 12, 2022
👩‍🎤 CSS-in-JS library designed for high performance style composition
👩‍🎤 CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

May 14, 2022
Compile-time atomic CSS library.

pieces-js Compile-time atomic CSS library. Heavily inspired by stylex and linaria. Install Usage Dynamic styles Setup with bundler with Next.js with V

Mar 9, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
React visual primitives with first-class TypeScript support and a tiny footprint.

tsstyled React visual primitives with first-class TypeScript support and a tiny footprint. TL;DR: This library is a styled-components rewrite that is

Apr 7, 2022