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.2.1(1mo ago)16.2kโ†‘210%[5 PRs](https://github.com/ui-awesome/html-core-component/pulls)BSD-3-ClausePHPPHP ^8.3CI passing Since Mar 31Pushed 1w 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 3d ago READMEChangelog (3)Dependencies (47)Versions (13)Used By (0) ![UI Awesome](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) **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.2 ``` ### 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(); ``` ### Cookbooks (Bootstrap5, Flowbite) [](#cookbooks-bootstrap5-flowbite) The core ships preconfigured cookbooks for popular CSS frameworks under `src/Cookbook/`. Each cookbook implements one of the provider interfaces shipped by `ui-awesome/html-core`: - `DefaultsProviderInterface::getDefaults(BaseTag $tag): array`; applied via `addDefaultProvider(ProviderClass::class)`. Used for cookbooks without variants. - `ThemeProviderInterface::apply(BaseTag $tag, string $theme): array`; applied via `addThemeProvider('variant', ProviderClass::class)`. Used for cookbooks with multiple variants (`danger`, `info`, `warning`, ...). ``` use UIAwesome\Html\Core\Component\Alert; use UIAwesome\Html\Core\Component\Cookbook\Bootstrap5\Alert\Defaults as BootstrapAlert; use UIAwesome\Html\Core\Component\Cookbook\Flowbite\Alert\Defaults as FlowbiteAlert; // 1. Bootstrap5 danger alert (theme provider variant is the theme name) echo Alert::tag() ->addThemeProvider('danger', BootstrapAlert::class) ->content('Watch out!') ->render(); // 2. Flowbite info alert echo Alert::tag() ->addThemeProvider('info', FlowbiteAlert::class) ->content('Heads up!') ->render(); // 3. Single-variant cookbook (default provider) use UIAwesome\Html\Core\Component\Cookbook\Bootstrap5\Breadcrumb\Defaults as BreadcrumbDefaults; echo Breadcrumb::tag() ->addDefaultProvider(BreadcrumbDefaults::class) ->items(/* ... */) ->render(); ``` Available cookbooks (all under `UIAwesome\Html\Core\Component\Cookbook`): - **Bootstrap5** `Alert\{Defaults, Dismissible}` (8 themes each), `Breadcrumb\Defaults`, `Dropdown\{Defaults, Language}`, `NavBar\{Defaults, AlignRight}`, `Toggle\{Alert, Dropdown, Menu, MenuDropdown, SelectorLanguage, SelectorTheme}`. - **Flowbite** `Alert\{Defaults, Dismissible}` (5 themes each), `Breadcrumb\Defaults`, `Dropdown\{Defaults, Language}` (5 themes each), `NavBar\Defaults`, `Toggle\{Alert, Dropdown, Menu, MenuDropdown, SelectorLanguage, SelectorTheme}`. Authoring a new cookbook is a `final class` implementing `DefaultsProviderInterface` (single variant) or `ThemeProviderInterface` (multiple variants); both return a cookbook-style associative array of fluent method names mapped to their arguments. Documentation ------------- [](#documentation) For detailed configuration options and advanced usage. - ๐Ÿงช [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) Quality code ------------ [](#quality-code) [![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)[![Super-Linter](https://camo.githubusercontent.com/4f8db42b55371ff5f610409d6c319d25ecfeb60beec99807e1c6f89f805ae512/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f75692d617765736f6d652f68746d6c2d636f72652d636f6d706f6e656e742f6c696e7465722e796d6c3f7374796c653d666f722d7468652d6261646765266c6162656c3d53757065722d4c696e746572266c6f676f3d676974687562)](https://github.com/ui-awesome/html-core-component/actions/workflows/linter.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/d92eada550857b3668fcf1fc5c71f766df5091c26ff96673f18c70753ee0b55d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6f70656e736f75726365696e6974696174697665266c6f676f436f6c6f723d7768697465266c6162656c436f6c6f723d353535353535)](LICENSE) ### Health Score 49 โ€” FairBetter than 94% of packages Maintenance95 Actively maintained with recent releases Popularity26 Limited adoption so far Community7 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~392 days Total 3 Last Release 40d 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 (14 commits)") --- Tags htmlhtml-core-componentphpui-awesomephphtmlfluentmenudropdownnavbarimmutabletogglealertbreadcrumbflowbitebootstrap5recipesui-awesomecore-componentcookbooks ### 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)