PHPackages lmc/spirit-web-twig-bundle - 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. lmc/spirit-web-twig-bundle ActiveSymfony-bundle[Templating & Views](/categories/templating) lmc/spirit-web-twig-bundle ========================== This is Symfony bundle with twig implementation of the Spirit Design System components and extends the twig implementation with an HTML-like syntax. 5.0.0(4mo ago)115.5k↑50%[19 issues](https://github.com/alma-oss/spirit-web-twig-bundle/issues)[3 PRs](https://github.com/alma-oss/spirit-web-twig-bundle/pulls)MITTwigPHP ^8.1CI passing Since Jul 30Pushed 4mo ago8 watchersCompare [ Source](https://github.com/alma-oss/spirit-web-twig-bundle)[ Packagist](https://packagist.org/packages/lmc/spirit-web-twig-bundle)[ RSS](/packages/lmc-spirit-web-twig-bundle/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (17)Versions (91)Used By (0) Spirit Web Twig Bundle ====================== [](#spirit-web-twig-bundle) This is a Symfony bundle with Twig implementation of [Spirit Design System](https://github.com/lmc-eu/spirit-design-system) components, extended with JSX-like syntax. Requirements ------------ [](#requirements) - PHP >= 8.1 - Symfony 4.4+ || 5.4+ || ^6.1 - Twig >=2.12.5 || 3+ Changelog --------- [](#changelog) See [CHANGELOG](https://github.com/alma-oss/spirit-web-twig-bundle/blob/main/CHANGELOG.md) How to Install -------------- [](#how-to-install) ### Step 1 [](#step-1) Download using **composer** Install package ``` composer require lmc/spirit-web-twig-bundle ``` ### Step 2 [](#step-2) Add `SpiritWebTwigBundle` into bundles (under `all` bundles). If you use Symfony flex, it will be configured automatically. **bundles.php** ``` return [ ..., Lmc\SpiritWebTwigBundle\SpiritWebTwigBundle::class => ['all' => true], ]; ``` ### Step 3 (optional) [](#step-3-optional) If you want to change the default settings, create a config **config/packages/spirit\_web\_twig.yml** ``` # all parameters are optional spirit_web_twig: # define one or more paths to expand or overload components (uses glob patterns) paths: - '%kernel.project_dir%/templates/components' paths_alias: 'jobs-ui' # default is 'spirit' html_syntax_lexer: false # default is true spirit_css_class_prefix: 'jobs' # default is null spirit_css_variable_prefix: 'jobs-' # default is 'spirit-' icons: # optional settings for svg assets paths: - '%kernel.project_dir%/assets/icons' # define paths for svg icons set alias: 'jobs-icons' # default is 'icons-assets' ``` Usage ----- [](#usage) For detailed usage see [TwigX bundle](https://github.com/lmc-eu/twigx-bundle/blob/main/README.md#usage) ### Unescaped Props [](#unescaped-props) All props that internally uses the [raw](https://twig.symfony.com/doc/3.x/filters/raw.html) filter are prefixed with `UNSAFE_`. This is considered a way how you can pass down HTML strings. ``` ``` Spirit Components ----------------- [](#spirit-components) For available components see the [components directory](https://github.com/alma-oss/spirit-web-twig-bundle/tree/main/src/Resources/components). if you want to extend these components, an example guide is [here](https://github.com/alma-oss/spirit-web-twig-bundle/blob/main/docs/extend-components.md). if you want to contribute, read the guide [here](https://github.com/alma-oss/spirit-web-twig-bundle/blob/main/CONTRIBUTING.md). Additional Attributes --------------------- [](#additional-attributes) All components accept additional attributes that are passed down to the root element of the component. This is useful for adding custom event handlers, accessibility attributes, or other attributes that are not supported by the component API. ℹ️ If you need to pass down event handlers to the native form elements in our form components, you can use the `inputProps` prop. Supported attributes are: - `on*` (eg. `onclick`) - `data-*` - `aria-*` - `id` If the component sets a value for any of these attributes, the value passed in will be overwritten. Styling ------- [](#styling) Spirit components are designed to be consistent across all Alma Career applications. They include built-in styling that has been considered carefully, and extensively tested. In general, customizing Spirit design is discouraged, but most components do offer control over layout and other aspects. In addition, you can use Spirit defined design tokens to ensure your application conforms to your design requirements, and is adaptive across platform scales and color schemes. ### Style Props [](#style-props) All Spirit components accept a set of props that can be used to control their outer spacing. The props are: - `margin` - `marginTop` - `marginRight` - `marginBottom` - `marginLeft` - `marginX` - `marginY` These props accept a spacing token (eg. `space-100`), `auto` or an object with breakpoint keys and spacing token values or `auto`. We use these props to set global CSS utility classes on the root element of the component. Examples: ``` ``` If you need more control over the styling of a component, you can use [escape hatches](#escape-hatches). ### Escape Hatches [](#escape-hatches) While we encourage teams to utilize Spirit design as it is, we do realize that sometimes product specific customizations may be needed. In these cases, we encourage you or your designers to **talk to us**. We may be able to suggest an alternative implementation strategy, or perhaps your design can help propose future Spirit additions. While the traditional class and style props are not supported in Spirit Web Twig components, there are two escape hatches that you can **use at your own risk**. These are UNSAFE\_className and UNSAFE\_style. Use of these props should be considered **a last resort**. They can be used to work around bugs or limitations in Spirit Web Twig, but should not be used in the long term. The reasoning behind this is that future updates to Spirit design may cause unintended breaking changes in products. If the internal DOM structure or CSS properties of a Spirit Web Twig component change, this may lead to conflicts with CSS overrides in products. For this reason, className and style are unsafe, and if you use them know that you are doing so at your own risk. Please consult additional styling with [web package documentation](https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#rebranding). ### Class Prefix [](#class-prefix) If you want to use a custom class prefix for Spirit components, you can set the `spirit_css_class_prefix` parameter in the configuration. This will prefix all Spirit component classes with the given value. Please note that you need to [configure the web package](https://github.com/alma-oss/spirit-web-twig-bundle/blob/main/README.md#prefixing-css-class-names) to use the same prefix. ### CSS Variable Prefix [](#css-variable-prefix) Our components use CSS variables. We prefix these variables with the `css-variable-prefix` token. However, in Twig, we cannot read our tokens easily, so we provided a way to set the prefix in the configuration using `spirit_css_variable_prefix` parameter. The default of this parameter is `spirit-`, but if your `css-variable-prefix` token is different; you can set it here to match. Deprecations ------------ [](#deprecations) This package uses the deprecation warnings for props, functions and components that will be removed or replaced in the next major release. Check your Symfony console or log to see if you are using any of the deprecated functionality. [![Deprecations in Symfony's console](https://github.com/lmc-eu/spirit-design-system/raw/main/static/deprecations-symfony-console.png?raw=true)](https://github.com/lmc-eu/spirit-design-system/blob/main/static/deprecations-symfony-console.png?raw=true) 👉 [See a DEPRECATIONS file](https://github.com/alma-oss/spirit-web-twig-bundle/tree/main/DEPRECATIONS.md) for a list of all deprecations. ### Health Score 45 — FairBetter than 92% of packages Maintenance54 Moderate activity, may be stable Popularity25 Limited adoption so far Community19 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 ~14 days Recently: every ~30 days Total 85 Last Release 148d ago Major Versions 1.34.1 → 2.0.02023-07-21 2.16.0 → 3.0.02024-06-10 3.4.1 → 4.0.02024-11-25 2.17.0 → 3.x-dev2025-08-18 3.6.0 → 5.0.02025-12-15 PHP version history (4 changes)0.0.1PHP ^7.3 0.1.0PHP ^7.4 1.12.0PHP ^7.4 || ^8.1 3.0.0PHP ^8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/33097e4a9d0e5dd13b5dd7dd01ba89e7a0bbf2b7be8fed2df24426f4175593e4?d=identicon)[literat](/maintainers/literat) --- Top Contributors [![literat](https://avatars.githubusercontent.com/u/2481010?v=4)](https://github.com/literat "literat (255 commits)")[![crishpeen](https://avatars.githubusercontent.com/u/7041807?v=4)](https://github.com/crishpeen "crishpeen (190 commits)")[![janicekt](https://avatars.githubusercontent.com/u/25146453?v=4)](https://github.com/janicekt "janicekt (68 commits)")[![adamkudrna](https://avatars.githubusercontent.com/u/5614085?v=4)](https://github.com/adamkudrna "adamkudrna (65 commits)")[![pavelklibani](https://avatars.githubusercontent.com/u/26870554?v=4)](https://github.com/pavelklibani "pavelklibani (53 commits)")[![dlouhak](https://avatars.githubusercontent.com/u/33354913?v=4)](https://github.com/dlouhak "dlouhak (41 commits)")[![curdaj](https://avatars.githubusercontent.com/u/148949959?v=4)](https://github.com/curdaj "curdaj (24 commits)")[![tomassychra](https://avatars.githubusercontent.com/u/106800054?v=4)](https://github.com/tomassychra "tomassychra (22 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![vmilersky](https://avatars.githubusercontent.com/u/9672439?v=4)](https://github.com/vmilersky "vmilersky (4 commits)")[![katerinarehorkova](https://avatars.githubusercontent.com/u/149075264?v=4)](https://github.com/katerinarehorkova "katerinarehorkova (4 commits)")[![OndraM](https://avatars.githubusercontent.com/u/793041?v=4)](https://github.com/OndraM "OndraM (4 commits)")[![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4)](https://github.com/renovate[bot] "renovate[bot] (1 commits)")[![alma-design-system-bot](https://avatars.githubusercontent.com/u/247997454?v=4)](https://github.com/alma-design-system-bot "alma-design-system-bot (1 commits)") --- Tags bundlephpspirit-design-systemsymfonytwig ### Code Quality TestsPHPUnit Static AnalysisPHPStan Type Coverage Yes ### Embed Badge ![Health badge](/badges/lmc-spirit-web-twig-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/lmc-spirit-web-twig-bundle/health.svg)](https://phpackages.com/packages/lmc-spirit-web-twig-bundle) ``` ### Alternatives [simplesamlphp/simplesamlphp A PHP implementation of a SAML 2.0 service provider and identity provider. 1.1k12.4M193](/packages/simplesamlphp-simplesamlphp)[sulu/sulu Core framework that implements the functionality of the Sulu content management system 1.3k1.3M152](/packages/sulu-sulu)[prestashop/prestashop PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers. 9.0k15.4k](/packages/prestashop-prestashop)[contao/core-bundle Contao Open Source CMS 1231.6M2.4k](/packages/contao-core-bundle)[netgen/layouts-core Netgen Layouts enables you to build and manage complex web pages in a simpler way and with less coding. This is the core of Netgen Layouts, its heart and soul. 3689.4k10](/packages/netgen-layouts-core)[iq2i/storia-bundle UI Storia bundle 144.6k](/packages/iq2i-storia-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)