Messagly Freebie UI Kit
Last Updated on August 6, 2026 by Editorial Team
A mobile messenger chat UI kit that includes 15 screens:
- Splash
- Login
- Sign Up
- OTP
- OTP with keyboard
- Setup Profile
- Chats
- Side Menu
- Contacts
- Profile
- Settings
- About Us
- Chat
- Chat Typing
- Contact Profile
Thanks to Vivek Karthikeyan for creating and sharing this freebie.
The blue-to-purple gradient running through Messagly is the thread that ties the whole kit together. It shows up on the splash screen, on primary buttons like “Get Started” and “Send OTP”, on the side menu background, and in the chat bubbles themselves.
That consistency matters more than it seems. It means every screen in this messenger UI kit already reads as one coherent app rather than a pile of disconnected mockups, which saves real time when you are trying to prototype a chat app quickly.
Visually, this is a clean, rounded, mobile-first interface built on plenty of white space, soft gray dividers, and rounded avatar photos. The typography stays light and legible, with bold weight reserved for names and section headers so the eye knows where to land on screens like Contacts or the Chats list.
The onboarding flow, from splash to login to OTP verification with the numeric keypad already drawn in, is one of the more practical parts of the set. A lot of chat app concepts skip straight to the messaging screen and leave designers to build sign-up and verification flows from scratch.
Here, the OTP screen, the OTP-with-keyboard state, and the profile setup screen are all included, so you can present a believable end-to-end user journey in a portfolio piece or a client pitch without having to invent those in-between states yourself.
Where This UI Kit Saves the Most Time
The core messaging screens are the real payoff: Chats list, an open Chat thread, a Chat Typing state, Contact Profile, and the Side Menu.
Having a typing-indicator state already designed is a small but genuinely useful detail, since it is one of those micro-interactions that is easy to forget until late in a project.
This kit works well for:
- Case studies or portfolio pieces where you need a full messaging app flow, not just one screen
- Rapid prototyping of a chat, dating, or social messaging concept before committing to custom UI
- Client presentations where a believable settings, profile, and about-us screen round out the pitch
- Teaching or learning exercises around mobile app structure, navigation, and information hierarchy
If you are designing something adjacent, like a dating app, a customer support chat, or an in-app messaging feature bolted onto a larger product, this kit is close enough to the mark that adapting it will be faster than starting from a blank canvas.
Restyling it for your own brand is straightforward. Swap the gradient for your own brand colors first, since it appears so often that changing it instantly changes the personality of every screen.
From there, replace the placeholder names, avatars, and message text with content that matches your project, adjust the icon style if your product uses a different icon language, and check that button and input corner radii match the rest of your design system if you are dropping these screens into a larger product.
Because the screens already follow a logical flow, from splash through onboarding to core app screens, it also pairs well with a simple phone mockup or device frame when you want to present the work statically, and with an icon set if you need to extend beyond the 15 screens already included.
