PHPackages tipowerup/ti-theme-orange-tw - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. tipowerup/ti-theme-orange-tw ActiveTastyigniter-package[Templating & Views](/categories/templating) tipowerup/ti-theme-orange-tw ============================ Modern, mobile-first TastyIgniter theme with dark mode, SPA-style transitions, and full Tailwind v4 brand customization. v1.0.4(2mo ago)05↓66.7%MITPHP ^8.2 Since Apr 28Compare [ Source](https://github.com/tipowerup/ti-theme-orange-tw)[ Packagist](https://packagist.org/packages/tipowerup/ti-theme-orange-tw)[ RSS](/packages/tipowerup-ti-theme-orange-tw/feed)WikiDiscussions Synced 3w ago READMEChangelog (5)Dependencies (12)Versions (6)Used By (0) [![Tests](https://github.com/tipowerup/ti-theme-orange-tw/actions/workflows/tests.yml/badge.svg)](https://github.com/tipowerup/ti-theme-orange-tw/actions/workflows/tests.yml) [![Latest Stable Version](https://camo.githubusercontent.com/77cc31605983273751c813d3a91291078a6850951016e410a3dc50b1eab0f5ef/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7469706f77657275702f74692d7468656d652d6f72616e67652d7477)](https://packagist.org/packages/tipowerup/ti-theme-orange-tw) [![Total Downloads](https://camo.githubusercontent.com/f9528136a29001bc3808f7507e1e2de5f1e3f8e51f485d2f7cb3d6b91d58f813/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7469706f77657275702f74692d7468656d652d6f72616e67652d7477)](https://packagist.org/packages/tipowerup/ti-theme-orange-tw) [![GitHub Stars](https://camo.githubusercontent.com/5c6670314c65369f6c60accf81eea391c986f44b8bfb740f9537a4144e302d9c/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f7469706f77657275702f74692d7468656d652d6f72616e67652d74773f7374796c653d666c6174)](https://github.com/tipowerup/ti-theme-orange-tw/stargazers) [![PHP Version](https://camo.githubusercontent.com/6d4d47217bee923d88b201fbcc660dd5d411bb16e8b35084d7fb9dc55d0679db/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f7469706f77657275702f74692d7468656d652d6f72616e67652d7477)](https://packagist.org/packages/tipowerup/ti-theme-orange-tw) [![License](https://camo.githubusercontent.com/6b42896dd9c7cf3ce645447165ca8a84970dcc15880d4c010f9ec972dd9e1c67/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f7469706f77657275702f74692d7468656d652d6f72616e67652d7477)](LICENSE.md) [![Orange TW Theme](docs/screenshots/screenshot1.png)](docs/screenshots/screenshot1.png) Introduction ------------ [](#introduction) Orange TW is a modern, mobile-first TastyIgniter storefront theme — a Tailwind CSS rebuild of the popular [TastyIgniter Orange Theme](https://github.com/tastyigniter/ti-theme-orange). Drop-in replacement: same admin settings, same TastyIgniter extension support, faster and more customizable. Built for restaurants, cafes, bars, bistros, pizza shops, bakeries, food delivery services — any food business that wants a modern, professional storefront on TastyIgniter. What's New in Orange TW ----------------------- [](#whats-new-in-orange-tw) - **Tailwind CSS v4** — CSS-first design tokens, no separate config file - **TypeScript** — strict-mode frontend source - **Multi-banner hero** — multiple home-page slides with autoplay, hover-to-pause, and keyboard navigation; admin-configured - **Dark mode** — system-preference detection with manual toggle; persists across navigations - **Mobile bottom tab bar** — Uber Eats / DoorDash-style navigation - **Smart sticky header** — hides on scroll down, reveals on scroll up - **SPA-style page transitions** via Livewire navigate - **Runtime brand customization** — change colours, logo, banners, and fonts from the admin without rebuilding assets - **Performance optimized** — code splitting, responsive images, debounced inputs, content hashing Features -------- [](#features) - **Mobile-first ordering experience** — bottom tab bar, slide-in cart drawer, app-like sheets - **Dark mode** — system-preference detection with manual toggle; persists across page transitions - **Runtime brand customization** — change colours, logo, banners, and fonts from the admin without rebuilding assets - **SPA-style transitions** — instant page swaps via Livewire navigate - **Multi-slide hero banner** — autoplay, hover-to-pause, fully admin-configured - **Drop-in Orange replacement** — full feature parity with the original; works with every TastyIgniter extension …and many more. See the [documentation](docs/index.md) for the full list. Requirements ------------ [](#requirements) - TastyIgniter v4.0+ - PHP 8.2+ - Node.js 18+ (for asset compilation) - TypeScript 5+ (installed automatically as a dev dependency) Installation ------------ [](#installation) Install the theme via Composer: ``` composer require tipowerup/ti-theme-orange-tw ``` Activate the theme from **Design > Themes** in your TastyIgniter admin panel. The theme ships with pre-built CSS/JS assets, and the toolkit's auto-publish hook copies them into your project's `public/vendor/tipowerup-orange-tw/`on first activation — no manual build step required. If your favicon or logo doesn't appear after activation (rare, on locked-down shared hosting where the activation request can't write to `public/`), run the publish command manually from your project root: ``` php artisan igniter:theme-vendor-publish --force ``` Development ----------- [](#development) For development with hot reloading: ``` npm run dev ``` To build for production: ``` npm run build ``` To type-check the TypeScript sources without emitting: ``` npm run typecheck ``` After building assets, publish them into the host TastyIgniter project: ``` php artisan igniter:theme-vendor-publish --force ``` ### Tests [](#tests) The theme ships a Pest test suite under `tests/`: ``` composer test # Pint + Pest (Unit + Feature) vendor/bin/pest --compact # Pest only vendor/bin/pest tests/Unit # Fast unit tests vendor/bin/pest --filter=FlashMessage # Filter by name ``` - **Unit tests** — pure logic and helpers. - **Feature tests** — Livewire components, the Logout controller, error-page templates, and theme metadata. Customization ------------- [](#customization) ### Theme Colors [](#theme-colors) All theme colors can be customized from **Design > Themes > Orange TW > Customize**. The theme supports 15 customizable colors including: - Primary, Secondary, Accent colors - Success, Warning, Danger, Info states - Text, Background, Surface, Border colors - Light and dark mode variants Colors are applied via CSS variables, so changes take effect immediately without rebuilding assets. ### Dark Mode [](#dark-mode) Dark mode can be configured to: - Follow system preference (default) - Default to light mode - Default to dark mode Users can toggle dark mode using the switch in the header, and their preference is saved to localStorage. ### Fonts [](#fonts) Configure Google Fonts from the theme settings. The theme uses Inter as the default font family with optimized font loading. ### Hero Banners [](#hero-banners) Add multiple hero slides for the home page from **Design > Themes > Orange TW > Customize > Banners**. Each slide carries a heading, sub-heading, CTA label + URL, background image, and optional alignment. Autoplay, hover-to-pause, and keyboard navigation work out of the box — no code changes needed. Tech Stack ---------- [](#tech-stack) TechnologyPurposeTailwind CSS v4Styling and design tokensTypeScriptStrict-mode frontend sourceLivewire 3.xServer-driven dynamic componentsAlpine.js 3.xClient-side interactivityVite 5.xAsset bundlingChangelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Reporting Issues ---------------- [](#reporting-issues) Found a bug or have a feature request? Open an issue on the [issue tracker](https://github.com/tipowerup/ti-theme-orange-tw/issues). Before filing, please: - Search existing issues to avoid duplicates. - Include your TastyIgniter version, PHP version, and steps to reproduce. - Attach screenshots or browser console output for UI bugs. Contributing ------------ [](#contributing) Pull requests are welcome. To contribute: 1. Fork the repository and create a feature branch from `main`. 2. Make your change, add or update tests where appropriate, and run `composer test` to ensure the suite passes. 3. Open a pull request against `main` with a clear description of the change and the problem it solves. For larger changes, open an issue first to discuss the approach before investing time. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) If you discover a security vulnerability, please **do not** open a public issue. Email the maintainers directly so the issue can be addressed before public disclosure. Credits ------- [](#credits) - Inspired by [TastyIgniter Orange Theme](https://github.com/tastyigniter/ti-theme-orange) by TastyIgniter Dev Team - Built by [TI PowerUp Team](https://tipowerup.com) License ------- [](#license) Orange TW Theme is open-source software licensed under the [MIT license](LICENSE.md). ### Health Score 37 — LowBetter than 81% of packages Maintenance83 Actively maintained with recent releases Popularity4 Limited adoption so far Community2 Small or concentrated contributor base Maturity50 Maturing project, gaining track record How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 5 Last Release 87d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/23295310?v=4)[Obinna Elvis Okechukwu](/maintainers/obinnaelviso)[@obinnaelviso](https://github.com/obinnaelviso) --- Tags tastyignitertailwindvitethemeorange ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/tipowerup-ti-theme-orange-tw/health.svg) ``` [![Health](https://phpackages.com/badges/tipowerup-ti-theme-orange-tw/health.svg)](https://phpackages.com/packages/tipowerup-ti-theme-orange-tw) ``` ### Alternatives [tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 728176.2k14](/packages/tallstackui-tallstackui)[tanthammar/tall-forms A dynamic, responsive Laravel Livewire form generator with realtime validation, file uploads, array fields, and more. 68038.4k1](/packages/tanthammar-tall-forms)[mati365/ckeditor5-livewire CKEditor 5 integration for Laravel Livewire 447.9k](/packages/mati365-ckeditor5-livewire)[noerd/noerd 101.4k10](/packages/noerd-noerd) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)