A modern, sleek redesign of Gmail built with Vue.js 3 and Tailwind CSS v4. This project showcases a dark-themed, responsive email client with smooth animations and a premium user experience.
- Elegant dark UI with carefully crafted color palette
- Smooth gradients and subtle borders
- Custom scrollbars matching the theme
- Premium glassmorphism effects
- Desktop: Side-by-side email list and detail view with collapsible sidebar
- Mobile: Full-screen list/detail views with intuitive back navigation
- Automatic layout adaptation based on screen size
- Touch-friendly interface
- Email List: Browse emails with sender avatars, subjects, and previews
- Email Detail: Full email view with images, attachments, and rich formatting
- Reply & Forward: Quick actions with pre-filled compose modal
- Folder Organization: Finance, Work, Personal folders with color coding
- Floating compose modal with minimize/maximize states
- Smooth morph animations between states
- Pre-fill support for replies
- Attachment toolbar (Paperclip, Image, Link, Emoji)
- Full-screen mode on mobile
- Switch between multiple connected accounts
- Dynamic avatar updates across the UI
- "Add another account" functionality
- Account management dropdown
- Real-time notification dropdown
- Unread count badge
- Different notification types (email, reminder, update)
- "Mark all as read" functionality
- Full-screen search overlay with backdrop blur
- Recent searches history
- Live search suggestions
- Quick filter buttons (has:attachment, is:unread, is:starred, from:me)
- Custom tooltips with arrow pointers
- Smooth sidebar collapse/expand transitions
- Compose modal morph animations
- Dropdown enter/leave transitions
- Hover effects on interactive elements
- Framework: Vue.js 3 with Composition API
- Styling: Tailwind CSS v4
- Icons: Lucide Vue Next
- Build Tool: Vite
- Language: JavaScript
-
Clone the repository
git clone https://github.com/Likeur/gmail_redesign.git cd gmail_redesign -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser
http://localhost:5173
gmail/
├── src/
│ ├── components/
│ │ ├── ComposeModal.vue # Email composition modal
│ │ ├── EmailDetail.vue # Email content display
│ │ ├── EmailList.vue # Email list with filters
│ │ ├── Sidebar.vue # Navigation sidebar
│ │ ├── Tooltip.vue # Custom tooltip component
│ │ └── TopBar.vue # Header with search & actions
│ ├── App.vue # Main application layout
│ ├── main.js # Vue app entry point
│ └── style.css # Global styles & custom scrollbar
├── index.html
├── package.json
├── tailwind.config.js
└── vite.config.js
- Collapsible navigation with smooth transitions
- Gmail logo and branding
- Navigation items with unread counts
- Folder organization with color-coded icons
- User profile with account switching dropdown
- Custom tooltips when collapsed
- Sidebar toggle button
- Inbox title with message count
- Search input triggering overlay
- Notification bell with dropdown
- Settings and user avatar
- Scrollable email items
- Custom filter dropdown (Primary, Social, Promotions, etc.)
- Per-email action menu (Archive, Star, Mark as unread, Delete)
- Selection highlighting
- Real email data with avatars
- Email header with subject and folder tag
- Sender info with avatar
- Full email body with paragraph support
- Inline images display
- Attachment cards with download
- Reply/Forward action buttons
- Custom tooltips on toolbar icons
- Teleported to body for proper z-index
- Minimize/Maximize/Close controls
- From/To/Subject/Body fields
- Attachment toolbar
- Send button with validation
- Full-screen on mobile
- Smooth morph animations
- Teleported to body (avoids overflow:hidden issues)
- Dynamic positioning (top, right, bottom, left)
- Arrow pointer
- Smooth enter/leave animations
- Configurable delay
- Background:
#121212(main),#1E1E1E(cards),#2B2B2B(elevated) - Primary: Blue-400 for active states and CTAs
- Accent: Red for delete, Green for success
- Text: White, Gray-300, Gray-500, Gray-600
- Font: Inter (Google Fonts)
- Headings: Bold, larger sizes
- Body: Regular weight, comfortable line height
- Consistent padding: 4, 6, 8 units
- Gap utilities for flexbox layouts
- Responsive adjustments (p-4 md:p-6)
| Breakpoint | Width | Behavior |
|---|---|---|
| Mobile | < 768px | Full-screen views, sidebar hidden, back navigation |
| Tablet | 768px - 1024px | Compact sidebar, narrower email list |
| Desktop | > 1024px | Full sidebar, side-by-side layout |
npm run buildThe built files will be in the dist/ directory.
This project is licensed under the MIT License - see the LICENSE file for details.
Likeur (Jack Simba) - GitHub
Made with ❤️ using Vue.js and Tailwind CSS