PHPackages ui-awesome/html-core-component - 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. [Utility & Helpers](/categories/utility) 4. / 5. ui-awesome/html-core-component ActiveLibrary[Utility & Helpers](/categories/utility) ui-awesome/html-core-component ============================== Fluent, immutable component primitives for PHP: alerts, breadcrumbs, dropdowns, navbars, toggles, and menu items. 0.4.0(2w ago)16.8k↑425%BSD-3-ClausePHPPHP ^8.3CI passing Since Mar 31Pushed 2w ago1 watchersCompare [ Source](https://github.com/ui-awesome/html-core-component)[ Packagist](https://packagist.org/packages/ui-awesome/html-core-component)[ RSS](/packages/ui-awesome-html-core-component/feed)WikiDiscussions main Synced 2w ago READMEChangelog (5)Dependencies (64)Versions (15)Used By (0) [![UI Awesome](https://raw.githubusercontent.com/ui-awesome/.github/refs/heads/main/logo/ui_awesome.png)](https://raw.githubusercontent.com/ui-awesome/.github/refs/heads/main/logo/ui_awesome.png) Html Core Component =================== [](#html-core-component) [ ![PHPUnit](https://camo.githubusercontent.com/543df9b182bb3b766e1bb0f2a0cadc25d4dcf8a0b931c19879cce9df478e63ef/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f75692d617765736f6d652f68746d6c2d636f72652d636f6d706f6e656e742f6275696c642e796d6c3f7374796c653d666f722d7468652d6261646765266c6162656c3d504850556e6974266c6f676f3d676974687562) ](https://github.com/ui-awesome/html-core-component/actions/workflows/build.yml) [ ![Mutation Testing](https://camo.githubusercontent.com/c16817bc20870459ea8b41986d48898ef4b52d9c7c743c758a1d4eca4fd98ad4/68747470733a2f2f696d672e736869656c64732e696f2f656e64706f696e743f7374796c653d666f722d7468652d62616467652675726c3d687474707325334125324625324662616467652d6170692e737472796b65722d6d757461746f722e696f2532466769746875622e636f6d25324675692d617765736f6d6525324668746d6c2d636f72652d636f6d706f6e656e742532466d61696e) ](https://dashboard.stryker-mutator.io/reports/github.com/ui-awesome/html-core-component/main) [ ![PHPStan](https://camo.githubusercontent.com/864c09db395f8a1c74cb003ea2347873a0e2f5ee97597f16915615794b24a2d8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f75692d617765736f6d652f68746d6c2d636f72652d636f6d706f6e656e742f7374617469632e796d6c3f7374796c653d666f722d7468652d6261646765266c6162656c3d5048505374616e266c6f676f3d676974687562) ](https://github.com/ui-awesome/html-core-component/actions/workflows/static.yml) [ ![Security](https://camo.githubusercontent.com/cfe8475ea717f67adbbc151c2408e96a8544e5fd54c6ab81fa78de2fab397522/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f75692d617765736f6d652f68746d6c2d636f72652d636f6d706f6e656e742f73656375726974792e796d6c3f7374796c653d666f722d7468652d6261646765266c6162656c3d5365637572697479266c6f676f3d676974687562) ](https://github.com/ui-awesome/html-core-component/actions/workflows/security.yml) **Composable, immutable PHP primitives for building UI components: alerts, breadcrumbs, dropdowns, navbars, toggles, and menu items.** *Accessible by default, fluent API, framework-friendly data hooks, and rendering powered by html-core.* Features -------- [](#features) ![Feature Overview](./docs/svgs/features.svg)### Installation [](#installation) ``` composer require ui-awesome/html-core-component:^0.4 ``` ### Quick start [](#quick-start) This package ships both abstract base classes (for subclassing) and ready-to-use concrete classes (`Alert`, `Breadcrumb`, `Dropdown`, `NavBar`, `Toggle`, `Item`, `Menu`). The concrete classes can be used directly via `::tag()` without any subclassing. The exposed abstractions are: - `BaseAlert` / `Alert` dismissible alerts with prefix/suffix containers and an optional toggle. - `BaseBreadcrumb` / `Breadcrumb` accessible breadcrumb navigation with active-path detection. - `BaseDropdown` / `Dropdown` dropdown menus with toggles, dividers, and active-link wiring. - `BaseNavBar` / `NavBar` navigation bars with brand, menu, and collapsible toggle. - `BaseToggle` / `Toggle` button or link toggles with full data-attribute coverage (Bootstrap, Flowbite, Tailwind UI). #### Custom breadcrumb [](#custom-breadcrumb) ``` use UIAwesome\Html\Core\Component\{BaseBreadcrumb, Item}; final class Breadcrumb extends BaseBreadcrumb {} echo Breadcrumb::tag() ->items( Item::tag()->label('Home')->link('/'), Item::tag()->label('Library')->link('/library'), Item::tag()->label('Data')->active(true), ) ->currentPath('/library') ->render(); ``` #### Custom dropdown [](#custom-dropdown) ``` use UIAwesome\Html\Core\Component\{BaseDropdown, Item}; final class Dropdown extends BaseDropdown {} echo Dropdown::tag() ->items( Item::tag()->label('Profile')->link('/profile'), Item::tag()->label('Settings')->link('/settings'), Item::tag()->divider(''), Item::tag()->label('Sign out')->link('/logout'), ) ->render(); ``` #### Custom navbar with toggle [](#custom-navbar-with-toggle) ``` use UIAwesome\Html\Core\Component\{BaseNavBar, BaseToggle, Item}; final class NavBar extends BaseNavBar {} final class Toggle extends BaseToggle {} echo NavBar::tag() ->brandText('My App') ->brandLink('/') ->menu( Item::tag()->label('Home')->link('/'), Item::tag()->label('About')->link('/about'), ) ->render(); ``` #### Menu with wrapped labels [](#menu-with-wrapped-labels) Each item label can be wrapped in its own element (for styling or truncation) via `labelTag`/`labelClass`. Without `labelTag`, the label renders as plain text. ``` use UIAwesome\Html\Core\Component\{Item, Menu}; use UIAwesome\Html\Interop\Inline; echo Menu::tag() ->type('nav') ->linkClass('nav-link') ->linkActiveClass('is-active') ->items( Item::tag() ->label('Request') ->link('/request') ->active() ->labelTag(Inline::SPAN) ->labelClass('nav-link-label'), Item::tag() ->label('Logs') ->link('/logs') ->labelTag(Inline::SPAN) ->labelClass('nav-link-label'), ) ->render(); ``` #### Application-scoped styling [](#application-scoped-styling) Framework styling is supplied by a `ThemeInterface` implementation resolved through `Config` and applied with `BaseTag::config()`. The theme reads the `ComponentContext` to pick the recipe, so variants (`danger`, `info`, `warning`, ...) travel with the context instead of being hard-coded on the component. ``` use UIAwesome\Html\Core\Component\Alert; use UIAwesome\Html\Core\Config\{Call, ComponentContext, Config, Cookbook, Recipe}; use UIAwesome\Html\Core\Theme\ThemeInterface; final class AppTheme implements ThemeInterface { public function getName(): string { return 'app'; } public function getRecipes(ComponentContext $context): iterable { if ($context->component !== 'alert' || $context->variant === null) { return; } yield new Recipe( 'app.alert', new Cookbook(new Call('class', "alert alert-{$context->variant}")), ); } } $config = new Config(new AppTheme()); echo Alert::tag() ->config($config, new ComponentContext('alert', variant: 'danger')) ->content('Watch out!') ->render(); ``` `config()` applies recipes immediately. Call it before fluent setters that must remain local overrides. For per-instance defaults that do not belong to a theme, pass them to the factory: ``` use UIAwesome\Html\Core\Component\Alert; echo Alert::tag(['class' => 'alert alert-danger'])->content('Watch out!')->render(); ``` Note The `Bootstrap5` and `Flowbite` cookbooks were removed in `0.3.0`. Flowbite is discontinued, and the Bootstrap 5 presets are being republished as standalone theme packages. See the [Upgrade Guide](UPGRADE.md) for the migration. Documentation ------------- [](#documentation) For detailed testing, migration, and quality workflows. - [Testing Guide](docs/testing.md) - [Upgrade Guide](UPGRADE.md) Package information ------------------- [](#package-information) [![PHP](https://camo.githubusercontent.com/f04357fef9ebcd99ed76d5414552bcd1ce849df0ee1d4faf8e991f54c966d508/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f253345253344382e332d3737374242342e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://www.php.net/releases/8.3/en.php)[![Latest Stable Version](https://camo.githubusercontent.com/7b5f3e750c3771b332e75207163e4fee7f9c17f7e9cbdbc5ef09d90e47b5dba1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f75692d617765736f6d652f68746d6c2d636f72652d636f6d706f6e656e742e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d7061636b6167697374266c6f676f436f6c6f723d7768697465266c6162656c3d537461626c65)](https://packagist.org/packages/ui-awesome/html-core-component)[![Total Downloads](https://camo.githubusercontent.com/c984560f3878a900108cb464865e46c908c9cf750f6998ba034d53bf6ff4e96c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f75692d617765736f6d652f68746d6c2d636f72652d636f6d706f6e656e742e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d636f6d706f736572266c6f676f436f6c6f723d7768697465266c6162656c3d446f776e6c6f616473)](https://packagist.org/packages/ui-awesome/html-core-component) Project status -------------- [](#project-status) [![Codecov](https://camo.githubusercontent.com/b29285bef4590234ffa9195db4691090a0d18854473ac416ba3f861c751cbe84/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f6769746875622f75692d617765736f6d652f68746d6c2d636f72652d636f6d706f6e656e742e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d636f6465636f76266c6f676f436f6c6f723d7768697465266c6162656c3d436f766572616765)](https://codecov.io/github/ui-awesome/html-core-component)[![PHPStan Level Max](https://camo.githubusercontent.com/b1aeb44257ce46737d1787123b534aab9dded28219f828e4ae13a1e3b460f53c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048505374616e2d4c6576656c2532304d61782d3446354439352e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465)](https://github.com/ui-awesome/html-core-component/actions/workflows/static.yml)[![Quality](https://camo.githubusercontent.com/2c2340f31eaf27afe5c1c8f9d59a85a54a3b372554e31cba81ade05d8f73171b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f75692d617765736f6d652f68746d6c2d636f72652d636f6d706f6e656e742f7175616c6974792e796d6c3f7374796c653d666f722d7468652d6261646765266c6162656c3d5175616c697479266c6f676f3d676974687562)](https://github.com/ui-awesome/html-core-component/actions/workflows/quality.yml)[![StyleCI](https://camo.githubusercontent.com/2e44ba381d6c9ab95b548566772bd17337dc56f8a6a646974bf7277720e5be9d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5374796c6543492d5061737365642d3434434331312e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465)](https://github.styleci.io/repos/776381948?branch=main) Our social networks ------------------- [](#our-social-networks) [![Follow on X](https://camo.githubusercontent.com/332c1b1e043dfb940b95825f7863dc473f6924ddacdd6738cbbbba08f49e1862/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d466f6c6c6f772532306f6e253230582d3144413146322e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d78266c6f676f436f6c6f723d7768697465266c6162656c436f6c6f723d303030303030)](https://x.com/Terabytesoftw) License ------- [](#license) [![License](https://camo.githubusercontent.com/680c8d62ba2d5a71d7099b6e81114fb0b22d99086c121fd178e1149afc669d44/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4253442d2d332d2d436c617573652d627269676874677265656e2e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6f70656e736f75726365696e6974696174697665266c6f676f436f6c6f723d7768697465266c6162656c436f6c6f723d353535353535)](LICENSE) ### Health Score 50 — FairBetter than 95% of packages Maintenance96 Actively maintained with recent releases Popularity26 Limited adoption so far Community9 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 91.7% 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 ~213 days Total 5 Last Release 18d ago PHP version history (2 changes)0.1.0PHP ^8.1 0.2.0PHP ^8.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/524d2b46690f41fce7188d369488a35e7624e6c5a264d82aacd08548bfd156ab?d=identicon)[terabytesoftw](/maintainers/terabytesoftw) --- Top Contributors [![terabytesoftw](https://avatars.githubusercontent.com/u/42547589?v=4)](https://github.com/terabytesoftw "terabytesoftw (22 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)") --- Tags htmlhtml-core-componentphpui-awesomephphtmlfluentmenudropdownnavbarimmutabletogglealertbreadcrumbthemingui-awesomecore-component ### Code Quality TestsPHPUnit Static AnalysisPHPStan, Psalm Code StyleECS Type Coverage Yes ### Embed Badge ![Health badge](/badges/ui-awesome-html-core-component/health.svg) ``` [![Health](https://phpackages.com/badges/ui-awesome-html-core-component/health.svg)](https://phpackages.com/packages/ui-awesome-html-core-component) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)