Une bibliothèque de composants UI moderne et accessible construite avec Twig et Tailwind CSS, inspirée de shadcn/ui.
- 🎨 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
- PHP 8.0 ou supérieur
- Node.js 14+ et npm/yarn
- Composer
composer require looming/uinpm install --save-dev tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typographyCré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'),
],
}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'),
},
},
});- Incluez le CSS et le JavaScript dans votre template de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Application</title>
{# Inclure le CSS de Looming UI #}
<link rel="stylesheet" href="{{ asset('build/looming-ui.css') }}">
{# Votre CSS personnalisé #}
{{ encore_entry_link_tags('app') }}
</head>
<body class="bg-white dark:bg-gray-900">
{% block body %}{% endblock %}
{# Alpine.js est requis pour les composants interactifs #}
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
{# Votre JavaScript personnalisé #}
{{ encore_entry_script_tags('app') }}
</body>
</html>- Utilisez les composants dans vos templates Twig :
{% extends 'base.html.twig' %}
{% block body %}
<div class="container mx-auto p-4">
{# 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'
} %}
</div>
{% endblock %}| Composant | Description |
|---|---|
| Button | Bouton personnalisable avec différentes variantes et tailles |
| Combobox | Menu déroulant avec recherche et sélection |
| Sheet | Panneau coulissant (drawer) |
| Slider | Curseur de sélection de valeur |
| Plus à venir... |
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
},
},
},
},
// ...
}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 ... */
}- Clonez le dépôt :
git clone https://github.com/votre-utilisateur/looming-ui-components.git
cd looming-ui-components- Installez les dépendances :
npm install
composer install- Lancez le serveur de développement :
npm run dev- Construisez pour la production :
npm run buildLes contributions sont les bienvenues ! Voici comment contribuer :
- Forkez le projet
- Créez une branche pour votre fonctionnalité (
git checkout -b feature/AmazingFeature) - Committez vos changements (
git commit -m 'Add some AmazingFeature') - Poussez vers la branche (
git push origin feature/AmazingFeature) - Ouvrez une Pull Request
Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.
- Tailwind CSS
- Alpine.js
- shadcn/ui pour l'inspiration
{% include '@components/Button/Button.twig' with {
label: 'Cliquez-moi',
variant: 'default',
size: 'default'
} %}Consultez la documentation complète dans le dossier docs/ pour plus de détails sur l'utilisation des composants.
Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou à soumettre une pull request.
MIT