Chat UI Kits

Quickly build fully customized chat apps

Focus on your feature set, not basic functionality, with our pre-built components and Sketch files.

Download UI Kit
designed with Sketch

Easily build and design chat with best practices baked in


Start with reusable components, not from scratch, to quickly get your chat app up and running.

Develop your app without needing to sacrifice customization for superior chat infrastructure and design.

Free up your time to focus on building the unique features that will delight and engage your users and keep them coming back.

Chat UI Kits to fit your unique use case and needs

Modular components in our Basic Chat Kit make it easy to create best-in-class chat with beautifully designed user interfaces for the most common scenarios: support, live events, and team chat.
Basic Chat Kit

Basic Chat Kit

Our Basic Chat Kit contains the foundational building blocks you need to create chat messaging apps for any use case. Our plugin React components, combined with Sketch files, allow you to easily build a chat app on PubNub and successfully work with your designer. By using these components with our Chat UI Kits, your UX team can easily customize the look and feel of your app to create a cohesive brand identity and beautiful interface designs. Use the components to structure how you design and build your application, as a starting place in React, or as a POC in just three easy steps:

  1. Clone the repo.

  2. Put in your keys.

  3. Send your first message in minutes.

Support Chat UI Kit

Support Chat UI Kit

Our Support Chat UI Kit leverages the pre-built React components of our Basic Chat Kit to allow you to develop effective and well-designed support chat between an agent and multiple clients. Use this kit to build chat that increases customer satisfaction, agent response rates, and business automation, all while protecting the privacy of each client. From e-commerce to telemedicine, this kit gets your chat app up and running quickly regardless of your use case.

  1. Separate agent dashboard and user view with routing for incoming requests.

  2. Private one-to-one messaging that ensures conversations are secure.

  3. Presence detection to track the online status of users.

Live Events Chat UI Kit

Live Events Chat UI Kit

Our Live Events Chat UI Kit also leverages the chat components of our Basic Chat Kit to allow you to build engaging, high-occupancy chat messaging apps that enrich everything from virtual conferences to digital concerts. Create truly captivating events and a sense of community by connecting audiences through chat, reactions, and more. Plus, having pre-built UI elements makes it easy for your designers and engineers to work effectively together on wireframes and mockups to perfect the UI design of your chat app.

  1. Broadcast live video simultaneously to all participants.

  2. Massive, real-time chat alongside your video, with no concurrency limits.

  3. User presence detection to show the occupancy and status of participants.

  4. Profanity filtering that keeps the language clean, prevents spam, and promotes healthy communities.

  5. Design resources and app UI components to make your chat just as beautiful as it is functional.

Team Chat Sample Application

Team Chat Sample Application

If you’re looking to build a more collaborative chat that supports additional complexity, then our Team Chat Sample Application is the one for you. This kit lets you develop responsive group chat for social and collaborative applications using pre-built chat components. While this kit doesn’t contain a dedicated UI kit or Sketch files, it does support a greater feature set and makes it easy to build messaging apps where teams can communicate, collaborate, and align on their goals.

  1. Group chat messaging that lets teams talk in real time, increasing productivity.

  2. User and channel metadata so you can view channel details, member’s lists, and more without storing data in a separate database.

  3. User presence detection to show who’s online or offline at any moment.

  4. Typing indicators that add responsiveness and improve communication.

  5. Rich media to share emojis, links, and more to help teammates connect.

Ready to build in-app chat?

Chat Documentation

Chat Documentation

Learn how to build rich chat apps with our comprehensive docs.

Read the docs
Chat Demo Apps

Chat Demo Apps

Visit the PubNub demo page and get inspired on all the ways you can use chat!

Try the chat demos

Talk to an expert

Contact Sales