Tutorials
Chat Docs
Chat Messaging UI Kit
Craft a beautiful chat app UI design with our high fidelity Chat UI kit for Sketch. Chat interfaces for live chat, team collaboration, messaging, customer support and gaming are included. Design your responsive chat interface with all the essential elements required for fully interactive chat experiences.
Chat UI kit that covers the five essential use cases for your chat ui design.
This Messaging UI kit includes designs for social chat, team collaboration, livestreams, in-game chat, sales and support. Each interface has light, dark, web and mobile versions to make designing your chat app straightforward.
Social Messenger UI
Design chat that looks like iMessage, WhatsApp or Facebook Messenger.
Team Chat UI
Design a messaginge app that feels like Slack or Twist with that classic email thread layout.
Live Chat UI
Livestream features a compact UI that is better suited for real-time events.
Game Chat UI
Gaming chat like Xbox live for multiplayer games.
Customer Support UI
Agent and chatbots messaging UI for sales and support use cases.
Flexible Chat UI Components
The design philosophy of this UI kit was to provide other designers with template to work off. This means that we needed to create a robust design system with relatively generic styling, while still showcasing the unique features of each use case. Our React Native Chat and React Chat SDKs have been built to offer the same styles as this UI Kit.
Chat message lists
The message list UI is for displaying attachments, messages, channels, typing indicators and date separators. Show accurate dates and message actions in the chat message lists.
Chat Channels and Lists
Display the active conversations with indicators of who has read along with any new messages received within the Channel List UI Component.
Chat Threads UI
Threads enable conversations to stay on topic and organized. Threads render a parent message with a list of replies, keeping everything in a single threaded conversation.
Chat Message UI
The chat message UI is not simply a what a user shares. There are many micro-interactions that revolve around a message. Editing, deleting, flagging, muting, reactions, retry and thread initiation are all attached to each individual message.
Chat Emoji Reactions UI
Select and show an emoji reaction to a message. Reactions allow users to quickly respond to any message, for any purpose.
Chat Message Input UI
Composing the perfect message takes a robust and flexible message input UI. Attaching images, videos, and files and select the perfect emoji. This UI Kit also has designs for the more advanced features like commands for mentioning a user, attach a gif or initiating chatbots.
Messenger Cards UI
Automatically format rich display of links with UI for OG scraping, and the OG-data. Customize the headers, images and interactions that are available in this chat ui kit.
Kickstart your design of the next great chat app!
I hope that this Messaging UI Kit goes a long way to helping you design the next great chat app. In the Sketch file you will find pages dedicated to each use case we believe are most relevant:
- Social messaging
- Email replacement for teams
- Live chat broadcasts
- Gaming
- Sales and support
Each example in the chat interface kit is designed for the specific demands of each use case. It is my hope that everyone who uses this chat design ui kit finds these examples to be flexible and adaptable to their own application.
Use each design along with our front end components. Design and build with React Native Chat, React Chat, iOS Swift Chat and Android Chat.
download for sketch 53
Stream Design
