PHPackages vardumper/slim-ux-twig-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. [Templating & Views](/categories/templating) 4. / 5. vardumper/slim-ux-twig-component ActiveLibrary[Templating & Views](/categories/templating) vardumper/slim-ux-twig-component ================================ Symfony UX Twig Component integration for Slim Framework 1.0.2(4mo ago)52[4 PRs](https://github.com/vardumper/slim-ux-twig-component/pulls)MITPHPPHP >=8.4CI failing Since Jan 3Pushed 1mo agoCompare [ Source](https://github.com/vardumper/slim-ux-twig-component)[ Packagist](https://packagist.org/packages/vardumper/slim-ux-twig-component)[ Fund](https://www.buymeacoffee.com/vardumper)[ Fund](https://paypal.me/vardumper)[ RSS](/packages/vardumper-slim-ux-twig-component/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (5)Versions (8)Used By (0) [ ![HTML5 Logo](https://camo.githubusercontent.com/185b17ed7395c5e9653b77d25dba60b91bb62aeaf48b512a30f9e068ccc8580a/68747470733a2f2f76617264756d7065722e6769746875622e696f2f657874656e6465642d68746d6c646f63756d656e742f68746d6c355f6c6f676f2d776974682d776f72646d61726b2e737667) ](https://www.w3.org/TR/2011/WD-html5-20110405/) [ ![Slim Framework Logo](https://camo.githubusercontent.com/ba87655e59e7b72d79615fb92f69d144f0e283d9f886fa5a1b0ec442d5918098/68747470733a2f2f76617264756d7065722e6769746875622e696f2f657874656e6465642d68746d6c646f63756d656e742f736c696d2e706e67) ](https://www.slimframework.com/) Slim UX Twig Component ====================== [](#slim-ux-twig-component) [![Latest Stable Version](https://camo.githubusercontent.com/1cb1d589a8e7dbd3b472c9aba54cb8249143d9ddb181d27b6b4d76b47e3dd752/68747470733a2f2f706f7365722e707567782e6f72672f76617264756d7065722f736c696d2d75782d747769672d636f6d706f6e656e742f762f737461626c65)](https://packagist.org/packages/vardumper/slim-ux-twig-component)[![Total Downloads](https://camo.githubusercontent.com/e1d931cd82d815f27573be5ab2809bbd081f04c80d63cc99c7b6c0ea1f4981d2/68747470733a2f2f706f7365722e707567782e6f72672f76617264756d7065722f736c696d2d75782d747769672d636f6d706f6e656e742f646f776e6c6f616473)](https://packagist.org/packages/vardumper/slim-ux-twig-component)[![](https://camo.githubusercontent.com/c1acdefd27838675382a226d07d830883c26e8d657c8c9040ca300f7da5f391a/68747470733a2f2f64747261636b2e6572696b706f65686c65722e75732f6170692f76312f62616467652f76756c6e732f70726f6a6563742f34643063643663382d366335392d346434612d383039362d6235303330343561303662393f6170694b65793d6f64745f6e473833575f454163515a6b6b3662354b716b6e49566f4b386e664e6a537a33384f6d706e6e)](https://dtrack.erikpoehler.us/projects/4d0cd6c8-6c59-4d4a-8096-b503045a06b9) A small integration to make building and using **[Twig Components](https://symfony.com/bundles/ux-twig-component/current/index.html)** easy in Slim Framework. It provides a custom Runtime and allows configuration of component paths as well as passing in more Twig namespaces/paths. As a caveat, installing this package, does pull in a number of Symfony packages. Makes use of [`vardumper/extended-htmldocument`](https://github.com/vardumper/extended-htmldocument) which adds improved HTML5 support to PHP - used for HTML5 attribute validation via Immutable Attribute Enums when using the pre-built Twig Components that are included in this package (for example `Inline Button`). Also uses [`vardumper/html5-twig-component-bundle`](https://github.com/vardumper/html5-twig-component-bundle) which holds these pre-built Twig Components for all HTML5 elements. Features -------- [](#features) - Works with Slim 4+ with and without DI Container - Includes pre-made Twig Components for all HTML5 elements that are fully typesafe and support Alpine.js, ARIA, WCAG and HTML Living Standards. - Supports class-based as well as anonymous Twig Components - Supports ``, `{{ component('Alert', { type: 'success'}) }}` and `{{ component 'Alert' with { type: 'success'} }}` syntaxes Requirements ------------ [](#requirements) - PHP 8.4+ - `slim/twig-view` for Twig Rendering Installation ------------ [](#installation) ``` composer require vardumper/slim-ux-twig-component ``` Slim Setup ---------- [](#slim-setup) After you register Twig (`slimphp/twig-view`) in your application bootstrap, call the register method of `SlimTwigComponent` like so: ``` use Slim\Views\Twig; use Vardumper\SlimTwigComponent\SlimTwigComponent; $twig = Twig::create(__DIR__ . '/../templates', [ 'cache' => __DIR__ . '/../var/cache/twig', ]); SlimTwigComponent::register( twig: $twig, // optional: namespacePaths: [ 'AdditionalNamespace' => __DIR__ . '../path/to/twig-component', ], // optional: componentPaths: [ 'App\\Twig\\Component\\' => __DIR__ . '/../src/Twig/Component', ], ); ``` By default, only Twig's main namepsace (usually a `templates/` or `view/` folder) is registered by the SlimTwigComponent class. Internally, the paths for the pre-made HTML5 Twig Components are registered. Use the optional `$namespacePaths` and `$componentPaths` to provide an array of additional folders and namespaces. You can now add Anonymous components inside `templates/components`. For example: add an `Alert.html.twig` file: ``` {{ message }} ``` Now inside your Twig templates you can render components: ``` {% component 'Alert' with { type: 'warning', message: 'Something happened!' } %} {% component('Alert', { type: 'success', message: 'All good!' }) %} ``` Besides from strings, you can also pass objects and arrays to Twig Components. Learn more about Twig Components in the [Symfony Documentation](https://symfony.com/bundles/ux-twig-component/current/index.html#component-html-syntax). ``` ``` ### Health Score 41 — FairBetter than 89% of packages Maintenance85 Actively maintained with recent releases Popularity7 Limited adoption so far Community8 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 96% 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 ~2 days Total 3 Last Release 124d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/50c8cdff5461214c7149cd8f1c55473b144ef0c3740a79e2d78eb9f2a1cfa4bc?d=identicon)[vardumper](/maintainers/vardumper) --- Top Contributors [![vardumper](https://avatars.githubusercontent.com/u/21208397?v=4)](https://github.com/vardumper "vardumper (24 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)") --- Tags slimslim-frameworkslim4slimphptwigtwig-components ### Embed Badge ![Health badge](/badges/vardumper-slim-ux-twig-component/health.svg) ``` [![Health](https://phpackages.com/badges/vardumper-slim-ux-twig-component/health.svg)](https://phpackages.com/packages/vardumper-slim-ux-twig-component) ``` ### Alternatives [symfony/form Allows to easily create, process and reuse HTML forms 2.8k152.1M2.8k](/packages/symfony-form)[symfony/ux-live-component Live components for Symfony 1635.6M72](/packages/symfony-ux-live-component)[symfony/ux-toolkit A tool to easily create a design system in your Symfony app with customizable, well-crafted Twig components 1432.0k](/packages/symfony-ux-toolkit)[iq2i/storia-bundle UI Storia bundle 144.6k](/packages/iq2i-storia-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)