Email Client
Three-column mail app: folders, message list, reading pane, compose modal.
Install
npx webberui@latest add "https://webberui.com/r/email-client-app.en.json?t=<install token>"The whole page lands in app/templates/email-client-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 & Live Inbox
A sticky nav bar, headline and a genuinely clickable three-pane inbox demo that lands the product's value at a glance.
hero - 2
Core Features
Four cards covering smart triage, snoozing, tracking-pixel blocking and one-tap unsubscribe.
features - 3
Keyboard Shortcuts
A dark split layout demonstrating keyboard-first archiving, replying and snoozing.
misc - 4
Results Band
Four figures backing up how much faster — and quieter — an inbox gets.
stats - 5
User Testimonials
Three quotes from real users on what reaching inbox zero actually felt like.
testimonial - 6
Pricing
A two-column comparison of the Carry-On and Aviator plans, flagging the most popular one and the end-to-end encryption guarantee.
pricing - 7
Closing Call to Action
A soft-lit background and aviation stamp motif pointing to a free download and a finished mailbox migration.
cta - 8
Footer
The wordmark, three link columns and social icons to close the page.
footer
Email Client is a React email app UI template: a marketing page with a working three-column mail interface embedded in it, including folders, a message list, a reading pane and a compose window. It is built with Next.js App Router, Tailwind CSS and Motion, and the emails are sample data written in the code.
When to use it
- Website for an email, messaging or support-inbox product
- SaaS marketing pages that show a clickable product UI on the homepage
- A front-end starting point for an inbox-style admin interface
- Interactive prototypes for product pitches or demos
What to change after installing
- Replace `INITIAL_EMAILS` in page.tsx with your sample messages; sender, subject, preview, tags and folder are all set per item.
- Folders are in `FOLDER_DEFS` and tag styles in constants such as `TAG_WORK` and `TAG_SUB`; read, starred and folder switching are only component state in `AppDemo`.
- To turn it into a real mail app, load `AppDemo` data from your own API; there is no backend today.
- Marketing copy lives in the `FEATURES`, `SHORTCUTS`, `STATS`, `TESTIMONIALS`, `PLANS` and `FOOTER_COLS` arrays, and the brand name is in `Navbar`.
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 →