PHPackages                             pixeldev/uxmodal-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. pixeldev/uxmodal-bundle

ActiveLibrary[Templating & Views](/categories/templating)

pixeldev/uxmodal-bundle
=======================

A Ux Modal bundle for Twig width Tailwind CSS and Alpine JS

1.0.0(1y ago)041MITTwigPHP ^8.2

Since Nov 24Pushed 1y ago1 watchersCompare

[ Source](https://github.com/Pixel-Developpement/uxmodal-bundle)[ Packagist](https://packagist.org/packages/pixeldev/uxmodal-bundle)[ RSS](/packages/pixeldev-uxmodal-bundle/feed)WikiDiscussions develop Synced 2w ago

READMEChangelog (1)Dependencies (2)Versions (2)Used By (0)

Ux Modal Bundle with Twig, Alpine JS and Tailwind
=================================================

[](#ux-modal-bundle-with-twig-alpine-js-and-tailwind)

[![GitHub release (with filter)](https://camo.githubusercontent.com/4003d7d097f79d7fdda9d8ec875cc513a98184a47e89ab8226b62c4cf7b13393/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f506978656c2d446576656c6f7070656d656e742f75786d6f64616c2d62756e646c653f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/4003d7d097f79d7fdda9d8ec875cc513a98184a47e89ab8226b62c4cf7b13393/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f506978656c2d446576656c6f7070656d656e742f75786d6f64616c2d62756e646c653f7374796c653d666f722d7468652d6261646765)[![Dependency](https://camo.githubusercontent.com/33d9bcf932ec42dcb99a9de41153d0e757a72043c0b9203e32bf683bbf26e953/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f747769672d322f332d6363613030302e7376673f7374796c653d666f722d7468652d6261646765)](https://twig.symfony.com/)

Presentation
------------

[](#presentation)

[![](src/Resources/docs/img/screenshot.png)](src/Resources/docs/img/screenshot.png)

A modal component with Tailwind and Alpine JS for Twig from the Penguin UI site :

Requirements
------------

[](#requirements)

- PHP >= 8.0
- Twig >= 2.7
- Tailwind CSS >= 3.4
- Alpine JS >= 3
- Composer

Installation
------------

[](#installation)

### Install the bundle

[](#install-the-bundle)

Execute the following [composer](https://getcomposer.org/) command to add the bundle to the dependencies of your project:

```
composer require pixeldev/uxmodal-bundle
```

### Enable the bundle

[](#enable-the-bundle)

Enable the bundle by adding it to the list of registered bundles in the `config/bundles.php` file of your project:

```
return [
    /* ... */
    Pixel\UxModalBundle\UxModalBundle::class => ['all' => true],
];
```

### Install Tailwind CSS and Alpine JS

[](#install-tailwind-css-and-alpine-js)

See this documentation :

### Add bundle directory for Tailwind compilation

[](#add-bundle-directory-for-tailwind-compilation)

Open tailwind.config.js and add the following line to the content table

```
'./vendor/pixeldev/uxmodal-bundle/src/Resources/views/**/*.html.twig'
```

Use
---

[](#use)

General use
-----------

[](#general-use)

Here's an example of how to add a modal to your site:

```
{% embed '@UxModal/modal.html.twig' with {isFooterModal: true} %}
    {# Label for this button #}
    {% block buttonLabel %}Open Modal{% endblock %}
    {# Title for Modal #}
    {% block titleModal %}Title Modal{% endblock %}
    {# Body text for Modal #}
    {% block bodyModal %}
        Body text description
    {% endblock %}
    {# Add a button on a footer Modal #}
    {% block footerModal %}

           Purchase

    {% endblock %}
{% endembed %}
```

Configurations
--------------

[](#configurations)

Todo

###  Health Score

29

—

LowBetter than 57% of packages

Maintenance41

Moderate activity, may be stable

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity52

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

Unknown

Total

1

Last Release

632d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/56179468?v=4)[Angel Miranda](/maintainers/pixeldev)[@pixeldev](https://github.com/pixeldev)

---

Top Contributors

[![matthieu2607](https://avatars.githubusercontent.com/u/14790414?v=4)](https://github.com/matthieu2607 "matthieu2607 (4 commits)")

---

Tags

alpinejsmodalsymfony-bundletailwindcsstwig

###  Code Quality

Code StyleECS

### Embed Badge

![Health badge](/badges/pixeldev-uxmodal-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/pixeldev-uxmodal-bundle/health.svg)](https://phpackages.com/packages/pixeldev-uxmodal-bundle)
```

###  Alternatives

[craftcms/cms

Craft CMS

3.6k3.7M3.4k](/packages/craftcms-cms)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)