PHPackages lameco/craft-twig-components - 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. lameco/craft-twig-components ActiveCraft-plugin[Templating & Views](/categories/templating) lameco/craft-twig-components ============================ 1.1.7(3d ago)12.7k↑142.9%MITTwigCI passing Since Jan 2Pushed 3d ago1 watchersCompare [ Source](https://github.com/Lameco-Development/craft-twig-components)[ Packagist](https://packagist.org/packages/lameco/craft-twig-components)[ RSS](/packages/lameco-craft-twig-components/feed)WikiDiscussions main Synced 2d ago READMEChangelog (10)Dependencies (18)Versions (66)Used By (0) Requirements ============ [](#requirements) - Craft CMS 5.0+ - TailwindCSS 4.0+ - AlpineJS 3.0+ - PHP 8.4+ Steps to use the plugin ======================= [](#steps-to-use-the-plugin) 1. Define the themeConfig ``` {% set ComponentsThemeConfig = { gsapAnimations: false, ui: { breadcrumbs: { class: "", home: { html: "" }, back: { class: "", html: "" }, separator: { html: "" }, item: { class: "", current: { class: "" } } }, button: { class: "", overlay: { class: "", }, type: { [primary|primaryDark|secondary|secondaryDark|text|textDark]: { class: "", overlay: { class: "", }, icon : { class: "", html: "", } } } inner: { class: "" }, icon : { position: "[start|end]", class: "", html: "" } } collapse: { class: "", button: { class: "", title: { class: "" }, icon: { class: "", html: "", openHTML: "", closeHTML: "" } }, content: { class: "" } }, image: { picture: { class: "" }, img: { class: "", mobileBreakpoint: "" }, caption: { class: "" } }, modal: { class: "", overlay: { class: "" }, content: { class: "" }, title: { class: "" }, button: { class: "", html: "" } }, video: { mode: "[embed|lightbox]", embed: { class: "" }, lightbox: { class: "", button: { class: "", html: "" } }, consent: { class: "" } }, }, social: { follow: { class: "", text: "", items: [ "facebook", "linkedin", "twitter", "instagram", "pinterest", "youtube", "vimeo" ], list: { class: "", }, item: { class: "", } }, share: { class: "", text: "", items: [ "copy", "mail", "linkedin", "facebook", "twitter", "whatsapp" ], list: { class: "", }, item: { class: "", } } } sprig: { loader: { class: "", html: "" }, pagination: { class: "", neighbours: 1, list: { class: "", }, item: { class: "", active: { class: "" }, }, arrows: { class: "", disabled: { class: "" }, prev: { html: "" }, next: { html: "" }, }, ellipsis: { class: "", html: "" } } } } %} ``` 2. Add the themeConfig to the `_globals` so they are available most of the time. > If you are using Sprig for example the themeConfig will not be available in the Sprig templates. You can pass the themeConfig (or a portion of the stripped down themeConfig) to the Sprig template using the `sprig` function and passing the theme object into the `theme` attribute of a component. > > Be sure to `| json_encode` the themeConfig when passing it to Sprig, because Sprig only allows string, boolean, numbers or arrays. > > ``` > {{ sprig('path/to/template', { theme: ComponentsThemeConfig | json_encode }) }} > ``` ``` {% do _globals.set('lameco.components.theme', ComponentsThemeConfig) %} ``` 3. Register the assets to make sure the plugin's styles and scripts are loaded in your templates: ``` {% do view.registerAssetBundle( 'lameco\\crafttwigcomponents\\assetbundles\\CraftTwigComponents\\CraftTwigComponentsAsset' ) %} ``` 4. Include the Twig Components SCSS in your main SCSS file. ``` @use "../../../vendor/lameco/craft-twig-components/src/assets/scss/index"; ``` 5. Add the Twig Components template source to SCSS. ``` @source "../../../vendor/lameco/craft-twig-components/**/*.twig"; ``` FontAwesome ----------- [](#fontawesome) The Component Library uses FontAwesome for icons used in fallback logic if nothing in the themeConfig is defined. In the `fontawesome.ts` file import the pre-defined icons using: ``` import { twigComponentsFontAwesomeIcons } from "../../../vendor/lameco/craft-twig-components/src/assets/ts/fontAwesome"; library.add( ...twigComponentsFontAwesomeIcons, // other icons you want to add ) ``` AlpineJS -------- [](#alpinejs) The Component Library uses AlpineJS for the interactive components. Make sure to include AlpineJS in your project and initialize it properly. At least the following AlpineJS plugins are required: - collapse Sprig ----- [](#sprig) The Component Library uses Sprig for dynamic components. Make sure to include Sprig in your project and initialize it properly. ### Pagination [](#pagination) Since the pagination is a Sprig component, you need to pass the themeConfig to the Sprig template. You can do this by passing the `theme` attribute to the Sprig component: ``` {{ sprig('path/to/pagination', { theme: ComponentsThemeConfig }) }} ``` Then when rendering the pagination, you can access the themeConfig in the Sprig template like this: ``` ``` ### Health Score 50 — FairBetter than 95% of packages Maintenance99 Actively maintained with recent releases Popularity25 Limited adoption so far Community12 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 70.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 ~9 days Recently: every ~3 days Total 61 Last Release 3d ago Major Versions 0.0.25 → 1.0.02025-08-13 ### Community Maintainers ![](https://www.gravatar.com/avatar/3164ff0359d563458d895e4db0a8beadacd166a7106c6e73c4f97253bfcf7a1a?d=identicon)[Laméco Development B.V.](/maintainers/Lam%C3%A9co%20Development%20B.V.) --- Top Contributors [![sander-lameco](https://avatars.githubusercontent.com/u/25500086?v=4)](https://github.com/sander-lameco "sander-lameco (174 commits)")[![daryvsleeuwen](https://avatars.githubusercontent.com/u/45255492?v=4)](https://github.com/daryvsleeuwen "daryvsleeuwen (39 commits)")[![Stan-S-99](https://avatars.githubusercontent.com/u/217725808?v=4)](https://github.com/Stan-S-99 "Stan-S-99 (24 commits)")[![jasperlameco](https://avatars.githubusercontent.com/u/217722507?v=4)](https://github.com/jasperlameco "jasperlameco (5 commits)")[![development-lameco](https://avatars.githubusercontent.com/u/44967793?v=4)](https://github.com/development-lameco "development-lameco (4 commits)") --- Tags lameco ### Embed Badge ![Health badge](/badges/lameco-craft-twig-components/health.svg) ``` [![Health](https://phpackages.com/badges/lameco-craft-twig-components/health.svg)](https://phpackages.com/packages/lameco-craft-twig-components) ``` ### Alternatives [easycorp/easyadmin-bundle Admin generator for Symfony applications 4.3k17.9M388](/packages/easycorp-easyadmin-bundle)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9762.4M131](/packages/roots-acorn)[tempest/framework The PHP framework that gets out of your way. 2.2k34.4k15](/packages/tempest-framework)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 45444.2k1](/packages/pressbooks-pressbooks) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)