Chat Messenger App
Real-time messaging UI: conversation list, chat bubbles, typing indicator, sticker panel.
Install
npx shadcn@latest add "https://webberui.com/r/chat-messenger-app.json?t=<install token>"The whole page lands in app/templates/chat-messenger-app/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Hero and Live Chat Demo
Nav bar, headline pitch and an interactive two-pane chat mock-up, self-contained in a single section.
hero - 2
Features
Six icon cards covering the core features: speed, end-to-end encryption, groups and stickers.
features - 3
Sticker Store
A grid of four sticker packs showing the weekly drops, their artists and price tags.
gallery - 4
Privacy and Security
Plaintext and ciphertext side by side, showing how end-to-end encryption keeps a message readable only to you and the person you wrote to.
content - 5
Numbers and User Voices
A band of four key figures alongside three five-star reviews, backing up the product's reputation and scale.
testimonial - 6
Download Call to Action
A gradient card gathering the download buttons for every platform, with a prompt to scan the QR code.
cta - 7
Footer
A brand mark, social links and four nav columns for product, resources, company and legal.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →