nowo-tech / ui-kit-bundle
Canonical Nowo admin UI kit for Symfony: Twig macros, semantic nowo-ui-* CSS, pagination/tabs/modals/toasts/confirm, shell chrome, multi-framework class helpers (REQ-UI-001).
Package info
github.com/nowo-tech/UiKitBundle
Language:TypeScript
Type:symfony-bundle
pkg:composer/nowo-tech/ui-kit-bundle
Requires
- php: >=8.1 <8.6
- symfony/asset: ^6.0 || ^7.0 || ^8.0
- symfony/config: ^6.0 || ^7.0 || ^8.0
- symfony/dependency-injection: ^6.0 || ^7.0 || ^8.0
- symfony/framework-bundle: ^6.0 || ^7.0 || ^8.0
- symfony/http-kernel: ^6.0 || ^7.0 || ^8.0
- symfony/translation: ^6.0 || ^7.0 || ^8.0
- symfony/twig-bundle: ^6.0 || ^7.0 || ^8.0
- twig/extra-bundle: ^3.12
- twig/string-extra: ^3.12
- twig/twig: ^3.8
Requires (Dev)
- friendsofphp/php-cs-fixer: ^3.0
- phpstan/extension-installer: ^1.0
- phpstan/phpstan: ^2.0
- phpstan/phpstan-phpunit: ^2.0
- phpstan/phpstan-symfony: ^2.0
- phpunit/phpunit: ^10.5 || ^11.0
- rector/rector: ^2.0
- symfony/yaml: ^6.0 || ^7.0 || ^8.0
- vincentlanglet/twig-cs-fixer: ^3.0
Suggests
- symfony/ux-icons: For icon_set: ux_icon in row actions and icons
README
⭐ Found this useful? Install from Packagist · Give it a star on GitHub so more developers can find it.
Canonical admin UI kit for Nowo Symfony bundles and host apps: Twig macros, semantic nowo-ui-* CSS, pagination/tabs/modals/toasts/confirm/loader, cards/filters, shell chrome (aside / nested nav / burger / avatar / user menu / footer / width toggle), theme/locale/kebab helpers, Thinking Orbs (local canvas, no CDN), and multi-framework class helpers (bootstrap5, tailwind, foundation, custom, …) per REQ-UI-001.
Compatible with Symfony 6.x, 7.4+, and 8.x (PHP 8.1+; Symfony 8 requires PHP 8.4+).
This bundle is FrankenPHP worker mode friendly.
Table of contents
- What this is / is not
- Features
- Installation
- Quick start
- Demos
- Documentation
- Tests and coverage
- License
- Contributing
What this is / is not
| Is | Is not |
|---|---|
| Buttons, toolbars, tables, lists, pagination, tabs, flashes/toasts, empty states, modal/confirm, cards/filters, icons, aside (nested) / burger / avatar / user menu / footer, theme/locale/kebab/width, Thinking Orbs | DashboardMenu / BreadcrumbKit navigation chrome |
Shared nowo-ui-* look-and-feel |
Domain CRUD pages / manage routes |
| Multi-framework class macros | Form widget themes (use FormKit) |
Features
- Twig macros (
@NowoUiKitBundle/macros/ui.html.twig) with optional per-callframeworkoverride - Semantic stylesheet
css/nowo-ui.css(asset packagenowo_ui_kit), including dark[data-theme="dark"]tokens - TypeScript → IIFEs: modal, shell, toast, confirm, page-loader, theme, orb
- Thinking Orbs:
_thinking_orb+nowo-ui-orb.js; page loadervisual: orb|spinner(THIRD_PARTY.md) - Config:
css_framework,icon_set,row_actions_display; i18n domainNowoUiKitBundle(en,es,it,fr,pt,de,nl) - Twig namespace overrides under
templates/bundles/NowoUiKitBundle/ - Adoption + Stimulus contracts: docs/ADOPTION.md, docs/STIMULUS.md
Installation
composer require nowo-tech/ui-kit-bundle php bin/console assets:install
With Flex, the recipe creates config/packages/nowo_ui_kit.yaml. See docs/INSTALLATION.md and docs/RECIPE.md.
Quick start
# config/packages/nowo_ui_kit.yaml nowo_ui_kit: css_framework: bootstrap5 # or: tailwind | foundation | custom icon_set: bootstrap-icons row_actions_display: icon # or: text | icon_text
{% import '@NowoUiKitBundle/macros/ui.html.twig' as ui %}
<link rel="stylesheet" href="{{ asset('css/nowo-ui.css', 'nowo_ui_kit') }}">
<button type="button" class="{{ ui.btn('primary') }}">Save</button>
See docs/USAGE.md and docs/CONFIGURATION.md.
Demos
FrankenPHP demos (Caddy + PHP). Runtime mode: FRANKENPHP_MODE (worker default; classic for per-request PHP). See docs/DEMO-FRANKENPHP.md.
| Demo | Port | Notes |
|---|---|---|
| demo/symfony8 | 8092 | Bootstrap 5 kitchen sink |
| demo/symfony8-tailwind | 8093 | Tailwind kitchen sink |
make -C demo up-symfony8
# open http://localhost:8092/
Documentation
Developer-facing docs are English only (Contributing — Language policy).
- Installation
- Configuration
- Usage
- Row actions (canonical kinds)
- Adoption (Beacon + bundles)
- Stimulus / data contracts
- Third-party notices
- Roadmap
- Flex recipe
- FrankenPHP demos
- Contributing
- Code of Conduct
- Security
- Changelog
- Upgrading
- Release
- Coverage
- GitHub Actions CI
- Spec-driven development
- Spec Kit
Tests and coverage
| Suite | Coverage |
|---|---|
| PHP (PHPUnit) | 100% lines (fail under 99% in CI) |
| TypeScript (Vitest) | ≥90% lines (Vitest thresholds) |
| Python | N/A |
composer install make test make test-coverage make test-ts pnpm install && pnpm run build
See docs/COVERAGE.md.
License
MIT — see LICENSE.
Contributing
See docs/CONTRIBUTING.md. Install hooks with make setup-hooks (REQ-GIT-001).
