{"id":46636183,"url":"https://github.com/mohammadumar-dev/dwui-new-tab","last_synced_at":"2026-03-08T01:33:59.796Z","repository":{"id":327781912,"uuid":"1109386647","full_name":"mohammadumar-dev/dwui-new-tab","owner":"mohammadumar-dev","description":"Transform your Chrome new tab into a stunning, modern interface with glassmorphism design, dark theme, and Aurora background animations.","archived":false,"fork":false,"pushed_at":"2025-12-06T19:19:49.000Z","size":972,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-09T05:38:08.842Z","etag":null,"topics":["aurora-background","chrome-extension","custom-shortcuts","dark-theme","glassmorphism","new-tab","react","shadcn-ui","tailwind-css","typescript","vite","web-ui","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohammadumar-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-03T18:24:08.000Z","updated_at":"2025-12-06T19:19:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mohammadumar-dev/dwui-new-tab","commit_stats":null,"previous_names":["mohammadumar-dev/dwui-new-tab"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mohammadumar-dev/dwui-new-tab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadumar-dev%2Fdwui-new-tab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadumar-dev%2Fdwui-new-tab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadumar-dev%2Fdwui-new-tab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadumar-dev%2Fdwui-new-tab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohammadumar-dev","download_url":"https://codeload.github.com/mohammadumar-dev/dwui-new-tab/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadumar-dev%2Fdwui-new-tab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30240899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T00:58:18.660Z","status":"ssl_error","status_checked_at":"2026-03-08T00:55:48.608Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aurora-background","chrome-extension","custom-shortcuts","dark-theme","glassmorphism","new-tab","react","shadcn-ui","tailwind-css","typescript","vite","web-ui","webgl"],"created_at":"2026-03-08T01:33:59.257Z","updated_at":"2026-03-08T01:33:59.746Z","avatar_url":"https://github.com/mohammadumar-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/icons/logo-500x500.png\" width=\"120\" alt=\"DWUI Logo\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eDWUI - Dynamic Web User Interface\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eTransform your boring Chrome new tab into a stunning, modern interface with glassmorphism effects and smooth animations.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://choosealicense.com/licenses/mit/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-green.svg?style=flat\u0026logo=opensource\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://reactjs.org/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/React-19.2.0-blue.svg?style=flat\u0026logo=react\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.typescriptlang.org/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/TypeScript-5.9.3-blue.svg?style=flat\u0026logo=typescript\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://vitejs.dev/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Vite-7.2.4-purple.svg?style=flat\u0026logo=vite\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://ui.shadcn.com/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Shadcn%20UI-red.svg?style=flat\u0026logo=shadcn\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/mohammadumar-dev/dwui-new-tab/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/v/release/mohammadumar-dev/dwui-new-tab?style=flat\u0026logo=github\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## 🛒 **Browser Extension Availability**\n\n🚀 **Now Available**  \n- **Chrome Web Store** – Install here: *(https://chromewebstore.google.com/detail/dwui-new-tab/ngecoiihhnlpkkajpfpdnmbfhmhdknac)*\n\n⏳ **Coming Soon**  \n- **Microsoft Edge Add-ons Store**\n\nStay tuned for more platform releases! \n\n## 📸 Screenshots\n\n\u003c!-- Add your screenshots here --\u003e\n\n### 🌌 DWUI Preview\n![DWUI Preview](./screenshots/preview_1.webp)\n*A stunning glassmorphic interface enhanced with an aurora-style backdrop.*\n\n---\n\n### 🔍 Search Feature\n![Search Feature](./screenshots/preview_2.webp)\n*Integrated Chrome search with a sleek modern UI.*\n\n---\n\n### 🧩 Shortcuts Grid\n![Shortcuts Grid](./screenshots/preview_3.webp)\n*A customizable shortcuts grid with a minimal dark sidebar.*\n\n\n## ✨ Features\n\n- 🎨 **Modern UI Components** – Built with Shadcn UI and React Bits Aurora components  \n- ✨ **Glassmorphism Design** – Elegant, glass-like transparency across the interface  \n- 🌊 **Aurora Background** – Smooth, animated gradient background powered by WebGL  \n- 🔍 **Smart Search** – Integrated Chrome search API for fast, seamless web searching  \n- ⏰ **Digital Clock** – Real-time clock with accurate timezone handling  \n- 🔗 **Quick Access Sidebar** – Instant access to Google apps and essential tools  \n- 📱 **Shortcuts Grid** – Add or remove custom shortcuts for your favorite websites  \n- 🌙 **Dark Theme** – Fully optimized dark-only interface for a sleek, modern look  \n\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nBefore you begin, make sure you have the following installed:\n- [Node.js](https://nodejs.org/) (v18 or higher)\n- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)\n- Google Chrome browser\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/mohammadumar-dev/dwui-new-tab.git\n   cd dwui-new-tab\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Build the extension**\n   ```bash\n   npm run build\n   # or\n   yarn build\n   ```\n   This creates a `dist` folder with your extension files.\n\n4. **Load the extension in Chrome**\n   - Open Chrome and navigate to `chrome://extensions/`\n   - Enable **Developer mode** (toggle in the top-right corner)\n   - Click **Load unpacked**\n   - Select the `dist` folder from your project directory\n   - Your new tab is now active! 🎉\n\n## 🛠️ Development\n\n### Run in Development Mode\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nThis starts the Vite development server. You can view your changes at `http://localhost:5173`.\n\n\u003e **Note:** Some Chrome API features (like search) won't work in dev mode. Build and load the extension to test these features.\n\n### Project Structure\n\n```\ndwui-new-tab/\n├── public/\n│   ├── manifest.json      # Chrome extension manifest\n│   └── vite.svg\n├── src/\n│   ├── components/\n│   │   ├── ui/            # Shadcn UI components\n│   │   ├── Aurora.tsx     # Animated background\n│   │   ├── DigitalClock.tsx\n│   │   ├── SearchBar.tsx  # Chrome search integration\n│   │   ├── ShortcutsGrid.tsx\n│   │   └── app-sidebar.tsx\n│   ├── hooks/             # Custom React hooks\n│   ├── lib/               # Utility functions\n│   ├── App.tsx            # Main application component\n│   ├── main.tsx           # Application entry point\n│   └── globals.css        # Global styles\n├── package.json\n└── vite.config.ts\n```\n\n## 🎨 Customization\n\n### Change Aurora Colors\n\nEdit the color stops in `App.tsx`:\n\n```tsx\n\u003cAurora\n  colorStops={[\"#3A29FF\", \"#FF94B4\", \"#FF3232\"]} // Change these hex colors\n  blend={0.5}\n  amplitude={1}\n  speed={0.35}\n/\u003e\n```\n\n### Adjust Clock Timezone\n\nModify the timezone prop in `App.tsx`:\n\n```tsx\n\u003cDigitalClock \n  timezone=\"America/New_York\"  // Change to your timezone\n  hour12={true}                 // Set false for 24-hour format\n/\u003e\n```\n\n### Add Custom Shortcuts\n\nThe shortcuts are stored locally in the browser. You can add, edit, or delete shortcuts directly from the interface using the grid layout.\n\n## 🔧 Tech Stack\n\n| Technology | Purpose |\n|------------|---------|\n| [React 19](https://react.dev/) | UI framework |\n| [TypeScript](https://www.typescriptlang.org/) | Type safety |\n| [Vite](https://vitejs.dev/) | Build tool \u0026 dev server |\n| [Shadcn UI](https://ui.shadcn.com/) | UI component library |\n| [Tailwind CSS](https://tailwindcss.com/) | Styling |\n| [OGL](https://github.com/oframe/ogl) | WebGL for Aurora effect |\n| [dnd-kit](https://dndkit.com/) | Drag and drop functionality |\n| [Lucide Icons](https://lucide.dev/) | Icon library |\n\n## 📦 Build for Production\n\nTo create an optimized production build:\n\n```bash\nnpm run build\n```\n\nThe build artifacts will be in the `dist/` folder, ready to be loaded as an unpacked extension or packaged for distribution.\n\n## 🤝 Contributing\n\nContributions are welcome! Here's how you can help:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Shadcn UI](https://ui.shadcn.com/) for the beautiful component library\n- [OGL](https://github.com/oframe/ogl) for the WebGL aurora effect\n- The React and Vite communities for excellent tools\n\n## 📧 Contact\n\nMohammad Umar  \n- GitHub: [@mohammadumar-dev](https://github.com/mohammadumar-dev)  \n- Email: [mohammadumar.dev@gmail.com](mailto:mohammadumar.dev@gmail.com)  \n- Portfolio: [mohammadumar-dev](https://mohammadumar-dev.netlify.app)\n\nProject Link: [https://github.com/mohammadumar-dev/dwui-new-tab](https://github.com/mohammadumar-dev/dwui-new-tab)\n\n\n---\n\n\u003cp align=\"center\"\u003eMade with ❤️ by Mohammad Umar\u003c/p\u003e\n\u003cp align=\"center\"\u003eIf you find this project useful, please consider giving it a ⭐\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammadumar-dev%2Fdwui-new-tab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammadumar-dev%2Fdwui-new-tab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammadumar-dev%2Fdwui-new-tab/lists"}