DWUI - Dynamic Web User Interface

Transform your boring Chrome new tab into a stunning, modern interface with glassmorphism effects and smooth animations.

🛒 Browser Extension Availability

🚀 Now Available

• Chrome Web Store – Install here: (https://chromewebstore.google.com/detail/dwui-new-tab/ngecoiihhnlpkkajpfpdnmbfhmhdknac)

⏳ Coming Soon

• Microsoft Edge Add-ons Store

Stay tuned for more platform releases!

📸 Screenshots

🌌 DWUI Preview

A stunning glassmorphic interface enhanced with an aurora-style backdrop.

---

🔍 Search Feature

Integrated Chrome search with a sleek modern UI.

---

🧩 Shortcuts Grid

A customizable shortcuts grid with a minimal dark sidebar.

✨ Features

• 🎨 Modern UI Components – Built with Shadcn UI and React Bits Aurora components
• ✨ Glassmorphism Design – Elegant, glass-like transparency across the interface
• 🌊 Aurora Background – Smooth, animated gradient background powered by WebGL
• 🔍 Smart Search – Integrated Chrome search API for fast, seamless web searching
• ⏰ Digital Clock – Real-time clock with accurate timezone handling
• 🔗 Quick Access Sidebar – Instant access to Google apps and essential tools
• 📱 Shortcuts Grid – Add or remove custom shortcuts for your favorite websites
• 🌙 Dark Theme – Fully optimized dark-only interface for a sleek, modern look

🚀 Getting Started

Prerequisites

Before you begin, make sure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Google Chrome browser

Installation

1. Clone the repository

   git clone https://github.com/mohammadumar-dev/dwui-new-tab.git
   cd dwui-new-tab

2. Install dependencies

   npm install
   # or
   yarn install

3. Build the extension

   npm run build
   # or
   yarn build

   This creates a dist folder with your extension files.

4. Load the extension in Chrome

   • Open Chrome and navigate to chrome://extensions/
   • Enable Developer mode (toggle in the top-right corner)
   • Click Load unpacked
   • Select the dist folder from your project directory
   • Your new tab is now active! 🎉

🛠️ Development

Run in Development Mode

npm run dev
# or
yarn dev

This starts the Vite development server. You can view your changes at http://localhost:5173.

Note: Some Chrome API features (like search) won't work in dev mode. Build and load the extension to test these features.

Project Structure

dwui-new-tab/
├── public/
│   ├── manifest.json      # Chrome extension manifest
│   └── vite.svg
├── src/
│   ├── components/
│   │   ├── ui/            # Shadcn UI components
│   │   ├── Aurora.tsx     # Animated background
│   │   ├── DigitalClock.tsx
│   │   ├── SearchBar.tsx  # Chrome search integration
│   │   ├── ShortcutsGrid.tsx
│   │   └── app-sidebar.tsx
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility functions
│   ├── App.tsx            # Main application component
│   ├── main.tsx           # Application entry point
│   └── globals.css        # Global styles
├── package.json
└── vite.config.ts

🎨 Customization

Change Aurora Colors

Edit the color stops in App.tsx:

<Aurora
  colorStops={["#3A29FF", "#FF94B4", "#FF3232"]} // Change these hex colors
  blend={0.5}
  amplitude={1}
  speed={0.35}
/>

Adjust Clock Timezone

Modify the timezone prop in App.tsx:

<DigitalClock 
  timezone="America/New_York"  // Change to your timezone
  hour12={true}                 // Set false for 24-hour format
/>

Add Custom Shortcuts

The shortcuts are stored locally in the browser. You can add, edit, or delete shortcuts directly from the interface using the grid layout.

🔧 Tech Stack

Technology	Purpose
React 19	UI framework
TypeScript	Type safety
Vite	Build tool & dev server
Shadcn UI	UI component library
Tailwind CSS	Styling
OGL	WebGL for Aurora effect
dnd-kit	Drag and drop functionality
Lucide Icons	Icon library

📦 Build for Production

To create an optimized production build:

npm run build

The build artifacts will be in the dist/ folder, ready to be loaded as an unpacked extension or packaged for distribution.

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Shadcn UI for the beautiful component library
• OGL for the WebGL aurora effect
• The React and Vite communities for excellent tools

📧 Contact

Mohammad Umar

• GitHub: @mohammadumar-dev
• Email: mohammadumar.dev@gmail.com
• Portfolio: mohammadumar-dev

Project Link: https://github.com/mohammadumar-dev/dwui-new-tab

---

Made with ❤️ by Mohammad Umar

If you find this project useful, please consider giving it a ⭐