PHPackages                             looming/ui - 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. looming/ui

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

looming/ui
==========

Une bibliothèque de composants UI moderne et accessible construite avec Twig et Tailwind CSS

v1.0.1(11mo ago)14MITTwigPHP ^8.0

Since Jun 5Pushed 11mo agoCompare

[ Source](https://github.com/LoomingPlatform/looming-ui)[ Packagist](https://packagist.org/packages/looming/ui)[ RSS](/packages/looming-ui/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (4)Versions (3)Used By (0)

Looming UI
==========

[](#looming-ui)

[![Latest Version on Packagist](https://camo.githubusercontent.com/60844915cbf7f0fec80fe979298b9089e7201a2055e3f9a5ce6c3d02a7bc6ebd/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6c6f6f6d696e672f75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/looming/ui)[![Total Downloads](https://camo.githubusercontent.com/6281d50afbc7e3d77c0aca473f204bb552bb389ed785461e555da7244787a33f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6c6f6f6d696e672f75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/looming/ui)

Une bibliothèque de composants UI moderne et accessible construite avec Twig et Tailwind CSS, inspirée de shadcn/ui.

🚀 Fonctionnalités
-----------------

[](#-fonctionnalités)

- 🎨 Composants accessibles et personnalisables
- 🌗 Support du mode sombre
- 🛠 Construit avec Tailwind CSS pour une personnalisation facile
- 📦 Légère et performante
- 🔍 Compatible avec les moteurs de recherche
- 🎯 Axée sur l'expérience développeur
- 🧩 Intégration facile avec les frameworks PHP populaires (Symfony, Laravel, etc.)
- 🔥 Hot-reload pendant le développement

📦 Installation
--------------

[](#-installation)

### Prérequis

[](#prérequis)

- PHP 8.0 ou supérieur
- Node.js 14+ et npm/yarn
- Composer

### Installation via Composer

[](#installation-via-composer)

```
composer require looming/ui
```

### Installation des dépendances frontend

[](#installation-des-dépendances-frontend)

```
npm install --save-dev tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography
```

🛠 Configuration
---------------

[](#-configuration)

### Configuration de Tailwind CSS

[](#configuration-de-tailwind-css)

Créez un fichier `tailwind.config.js` à la racine de votre projet :

```
// tailwind.config.js
module.exports = {
  content: [
    "./templates/**/*.html.twig",
    "./assets/**/*.js",
    "./vendor/looming/ui/src/**/*.twig",
    "./vendor/looming/ui/src/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}
```

### Configuration de Vite/Webpack

[](#configuration-de-vitewebpack)

Assurez-vous que votre configuration Vite ou Webpack inclut les fichiers de la bibliothèque :

```
// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@looming/ui': path.resolve(__dirname, './vendor/looming/ui/src'),
    },
  },
});
```

🎯 Utilisation
-------------

[](#-utilisation)

### Intégration dans un projet

[](#intégration-dans-un-projet)

1. Incluez le CSS et le JavaScript dans votre template de base :

```

    Mon Application

    {# Inclure le CSS de Looming UI #}

    {# Votre CSS personnalisé #}
    {{ encore_entry_link_tags('app') }}

    {% block body %}{% endblock %}

    {# Alpine.js est requis pour les composants interactifs #}

    {# Votre JavaScript personnalisé #}
    {{ encore_entry_script_tags('app') }}

```

2. Utilisez les composants dans vos templates Twig :

```
{% extends 'base.html.twig' %}

{% block body %}

        {# Exemple d'utilisation du composant Button #}
        {% include '@looming/components/Button/Button.twig' with {
            variant: 'primary',
            size: 'md',
            label: 'Cliquez-moi',
            icon: 'plus',
            disabled: false
        } %}

        {# Exemple d'utilisation du composant Combobox #}
        {% include '@looming/components/Combobox/Combobox.twig' with {
            name: 'my_combobox',
            options: [
                { value: '1', label: 'Option 1' },
                { value: '2', label: 'Option 2' },
                { value: '3', label: 'Option 3' }
            ],
            placeholder: 'Sélectionnez une option',
            variant: 'primary',
            size: 'md'
        } %}

{% endblock %}
```

📚 Composants disponibles
------------------------

[](#-composants-disponibles)

ComposantDescription[Button](src/components/Button/README.md)Bouton personnalisable avec différentes variantes et tailles[Combobox](src/components/Combobox/README.md)Menu déroulant avec recherche et sélection[Sheet](src/components/Sheet/README.md)Panneau coulissant (drawer)[Slider](src/components/Slider/README.md)Curseur de sélection de valeur*Plus à venir...*🎨 Personnalisation
------------------

[](#-personnalisation)

### Thèmes

[](#thèmes)

Vous pouvez personnaliser les couleurs, les espacements et plus en modifiant votre configuration Tailwind :

```
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... jusqu'à 900
        },
      },
    },
  },
  // ...
}
```

### Variables CSS personnalisées

[](#variables-css-personnalisées)

Toutes les variables CSS sont définies dans `src/styles/theme.css` et peuvent être écrasées dans votre propre CSS :

```
:root {
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  /* ... autres variables ... */
}
```

🚀 Développement
---------------

[](#-développement)

1. Clonez le dépôt :

```
git clone https://github.com/votre-utilisateur/looming-ui-components.git
cd looming-ui-components
```

2. Installez les dépendances :

```
npm install
composer install
```

3. Lancez le serveur de développement :

```
npm run dev
```

4. Construisez pour la production :

```
npm run build
```

🤝 Contribution
--------------

[](#-contribution)

Les contributions sont les bienvenues ! Voici comment contribuer :

1. Forkez le projet
2. Créez une branche pour votre fonctionnalité (`git checkout -b feature/AmazingFeature`)
3. Committez vos changements (`git commit -m 'Add some AmazingFeature'`)
4. Poussez vers la branche (`git push origin feature/AmazingFeature`)
5. Ouvrez une Pull Request

📄 Licence
---------

[](#-licence)

Ce projet est sous licence MIT. Voir le fichier [LICENSE](LICENSE) pour plus de détails.

🙏 Remerciements
---------------

[](#-remerciements)

- [Tailwind CSS](https://tailwindcss.com/)
- [Alpine.js](https://alpinejs.dev/)
- [shadcn/ui](https://ui.shadcn.com/) pour l'inspiration

```
{% include '@components/Button/Button.twig' with {
    label: 'Cliquez-moi',
    variant: 'default',
    size: 'default'
} %}
```

📚 Documentation
---------------

[](#-documentation)

Consultez la documentation complète dans le dossier `docs/` pour plus de détails sur l'utilisation des composants.

🤝 Contribution
--------------

[](#-contribution-1)

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou à soumettre une pull request.

📝 Licence
---------

[](#-licence-1)

MIT

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance51

Moderate activity, may be stable

Popularity5

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity43

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

Every ~0 days

Total

2

Last Release

347d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/9760d5d8d4c1abf3fb6f589b408f2535bc8c3c5393b6621b449debda7bae6509?d=identicon)[loomingquokka](/maintainers/loomingquokka)

---

Top Contributors

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

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Code StylePHP\_CodeSniffer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/looming-ui/health.svg)

```
[![Health](https://phpackages.com/badges/looming-ui/health.svg)](https://phpackages.com/packages/looming-ui)
```

###  Alternatives

[twig/extra-bundle

A Symfony bundle for extra Twig extensions

91492.0M315](/packages/twig-extra-bundle)[twig/intl-extra

A Twig extension for Intl

36763.2M221](/packages/twig-intl-extra)[rcrowe/twigbridge

Adds the power of Twig to Laravel

9105.9M50](/packages/rcrowe-twigbridge)[twig/string-extra

A Twig extension for Symfony String

22046.0M133](/packages/twig-string-extra)[twig/cssinliner-extra

A Twig extension to allow inlining CSS

23018.5M55](/packages/twig-cssinliner-extra)[symfony/ux-twig-component

Twig components for Symfony

21914.8M162](/packages/symfony-ux-twig-component)

PHPackages © 2026

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