PHPackages kyleclarkenz/manhattan - 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. [Framework](/categories/framework) 4. / 5. kyleclarkenz/manhattan ActiveLibrary[Framework](/categories/framework) kyleclarkenz/manhattan ====================== Manhattan — a server-rendered PHP + vanilla-JS UI component library. 1.13.0(1mo ago)09MITJavaScriptPHP >=7.4CI passing Since Mar 4Pushed 1mo agoCompare [ Source](https://github.com/KyleClarkeNZ/manhattan)[ Packagist](https://packagist.org/packages/kyleclarkenz/manhattan)[ RSS](/packages/kyleclarkenz-manhattan/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (4)Versions (30)Used By (0) Manhattan UI ============ [](#manhattan-ui) Manhattan is a server-rendered PHP + vanilla-JS UI component library. Drop it into any PHP project and get a consistent, themeable set of UI components without needing a build pipeline. **PHP 7.4+ · No build tools · jQuery ≥ 3.4.1 required · Font Awesome 6.x included** 📋 **[View Live Demo](https://manhattan.kyleclarke.co.nz)** — See all components in action with interactive examples and code samples. --- Requirements ------------ [](#requirements) DependencyVersionNotesPHP≥ 7.4Server-side renderingjQuery≥ 3.4.1Must be loaded by your application — not bundledFont Awesome6.xBundled via Composer, served automatically> jQuery is the only dependency you need to bring yourself. Everything else is handled by Manhattan. --- Components ---------- [](#components) ComponentPHP classJS moduleButton`Button``components/button.js`TextBox`TextBox``components/textbox.js`TextArea`TextArea``components/textarea.js`Dropdown`Dropdown``components/dropdown.js`DatePicker`DatePicker``components/datepicker.js`Checkbox`Checkbox`—Radio`Radio`—ToggleSwitch`ToggleSwitch``components/toggleswitch.js`Tabs / TabPanel`Tabs`, `TabPanel``components/tabs.js`DataGrid`DataGrid``components/datagrid.js`Dialog`Dialog``components/dialog.js`Window`Window``components/window.js`Toaster`Toaster``components/toaster.js`Rating`Rating``components/rating.js`ProgressBar`ProgressBar`—Badge`Badge`—Card`Card`—StatCard`StatCard`—PageHeader`PageHeader`—Breadcrumb`Breadcrumb`—Address`Address``components/address.js`MList`MList``components/list.js`Chart`Chart``components/chart.js`CodeArea`CodeArea``components/codearea.js`Validator`Validator``components/validator.js`Loader`Loader`—EmptyState`EmptyState`—Icon`Icon`—Label`Label`—NumberBox`NumberBox`—--- Installation ------------ [](#installation) Manhattan is a public Composer package hosted on GitHub. No authentication is required. ### 1 — Add Manhattan to your `composer.json` [](#1--add-manhattan-to-your-composerjson) ``` { "repositories": [ { "type": "vcs", "url": "https://github.com/KyleClarkeNZ/manhattan" } ], "require": { "kyleclarkenz/manhattan": "^1.0" }, "extra": { "manhattan": { "public-dir": "." } }, "scripts": { "post-install-cmd": ["Manhattan\\Installer::publishAssets"], "post-update-cmd": ["Manhattan\\Installer::publishAssets"] } } ``` > **`public-dir`** is the folder relative to your project root where web-accessible files live. Use `"."` for legacy PHP projects where `index.php` sits at the root, or `"public"` for Laravel/Symfony-style layouts. After install, assets (including Font Awesome) will be published to `/Manhattan/`. ### 2 — Install [](#2--install) ``` composer install ``` Manhattan's CSS, JS, and Font Awesome assets are copied to `/Manhattan/` automatically. ### 3 — Configure asset paths in your bootstrap [](#3--configure-asset-paths-in-your-bootstrap) Call this once before any views are rendered, adjusting the paths to match your `public-dir`: ``` use Manhattan\HtmlHelper; HtmlHelper::configure( '/Manhattan/assets/css', // web-root-relative path to Manhattan CSS '/Manhattan/assets/js' // web-root-relative path to Manhattan JS ); ``` If you're serving Font Awesome from a non-standard location, pass the path as a third argument: ``` HtmlHelper::configure( '/Manhattan/assets/css', '/Manhattan/assets/js', '/custom/fontawesome' // optional: override Font Awesome public path ); ``` ### 4 — Include styles & scripts in your layout [](#4--include-styles--scripts-in-your-layout) ``` // In — renders Manhattan CSS + Font Awesome automatically: // Before (or deferred in ): ``` --- Updating -------- [](#updating) ``` composer update kyleclarkenz/manhattan ``` Assets are re-published automatically on every update. --- Running the demo ---------------- [](#running-the-demo) ### View Online [](#view-online) Visit **[manhattan.kyleclarke.co.nz](https://manhattan.kyleclarke.co.nz)** to see all components with live examples and code samples. ### Run Locally [](#run-locally) ``` cd /path/to/manhattan composer install php -S localhost:8080 ``` Then open **** in your browser. --- Usage ----- [](#usage) Manhattan uses a simple singleton pattern — grab the `HtmlHelper` instance and start rendering components using the fluent API: ``` use Manhattan\HtmlHelper; $m = HtmlHelper::getInstance(); // Render a button echo $m->button('saveBtn', 'Save')->primary()->icon('fa-save'); // Render a dropdown echo $m->dropdown('priority') ->dataSource([ ['value' => '1', 'text' => 'Low'], ['value' => '2', 'text' => 'High'], ]) ->placeholder('Select priority…'); // Render a date picker echo $m->datepicker('dueDate')->value(date('Y-m-d'))->min(date('Y-m-d')); ``` --- Theming ------- [](#theming) Manhattan ships with a light theme (`manhattan.css`) and a dark theme (`manhattan-dark.css`). Both are included automatically via `renderStyles()` — toggle the `m-dark` class on `` (or ``) to switch themes at runtime. --- Icons ----- [](#icons) Font Awesome Free 6.x is bundled as a Composer dependency and published alongside Manhattan's assets. No CDN or separate download needed — just use Font Awesome class names in your components as normal: ``` echo $m->button('deleteBtn', 'Delete')->danger()->icon('fa-trash'); ``` Font Awesome is licensed under the [MIT License](https://opensource.org/licenses/MIT) (icons) and [SIL OFL 1.1](https://scripts.sil.org/OFL) (fonts). --- License ------- [](#license) Manhattan is open source and released under the [MIT License](LICENSE). © Kyle Clarke ### Health Score 39 — LowBetter than 86% of packages Maintenance90 Actively maintained with recent releases Popularity7 Limited adoption so far Community8 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 88.2% of commits — single point of failure 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 ~1 days Total 29 Last Release 51d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/aadde229286f02347115a0a24d0018287a9eaff9391823191bfab9b17db726cf?d=identicon)[KyleClarkeNZ](/maintainers/KyleClarkeNZ) --- Top Contributors [![KyleClarkeNZ](https://avatars.githubusercontent.com/u/63521392?v=4)](https://github.com/KyleClarkeNZ "KyleClarkeNZ (45 commits)")[![actions-user](https://avatars.githubusercontent.com/u/65916846?v=4)](https://github.com/actions-user "actions-user (6 commits)") --- Tags phpframeworkjavascriptuicomponents ### Embed Badge ![Health badge](/badges/kyleclarkenz-manhattan/health.svg) ``` [![Health](https://phpackages.com/badges/kyleclarkenz-manhattan/health.svg)](https://phpackages.com/packages/kyleclarkenz-manhattan) ``` ### Alternatives [kompo/kompo Laravel & Vue.js FullStack Components for Rapid Application Development 11812.4k21](/packages/kompo-kompo) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)