Système de design complet pour Laravel & Livewire 4
70+ composants Blade · 5 composants Livewire · Tailwind CSS v4 · Mode sombre natif
Wirestack UI est un système de design clé en main pour les applications Laravel & Livewire. Il fournit une bibliothèque de composants cohérents, accessibles et entièrement personnalisables, propulsés par Tailwind CSS v4 et Alpine.js.
- 70+ composants Blade — boutons, formulaires, cartes, navigation, tableaux, modales…
- 5 composants Livewire — Modal, Drawer, Toast, DataTable, CommandPalette
- Design tokens — personnalisation globale via variables CSS sans toucher aux composants
- Mode sombre natif — prise en charge complète light / dark / system
- Auto-découverte — aucune configuration manuelle du service provider
composer require darken10/wirestackLe service provider est auto-découvert par Laravel. Aucune déclaration manuelle n'est nécessaire.
Consultez le guide d'installation complet → pour configurer les assets CSS, les directives Blade et les composants Livewire globaux.
Ajoutez les directives dans votre layout principal :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@wsStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
{{ $slot }}
<livewire:ws::toast />
@wsScripts
</body>
</html>Puis utilisez les composants dans vos vues :
<x-ws::button variant="solid" color="primary" icon="plus">
Créer un projet
</x-ws::button>
<x-ws::alert color="success" dismissible>
Vos modifications ont été enregistrées.
</x-ws::alert>
<x-ws::card variant="elevated">
<x-ws::card-header title="Tableau de bord" />
<x-ws::card-body>
Contenu de la carte...
</x-ws::card-body>
</x-ws::card>| Sujet | Lien |
|---|---|
| Installation | docs/installation.md |
| Configuration | docs/configuration.md |
| Design Tokens | docs/design-tokens.md |
| Directives Blade | docs/directives.md |
| API JavaScript | docs/javascript-api.md |
| Théming & Mode sombre | docs/theming.md |
| Catégorie | Documentation |
|---|---|
| Atomes — Button, Badge, Avatar, Spinner… | docs/components/atoms.md |
| Formulaires — Input, Select, Toggle… | docs/components/forms.md |
| Mise en page — Card, Container, Stack… | docs/components/layout.md |
| Navigation — Breadcrumb, Pagination, Nav… | docs/components/navigation.md |
| Feedback — Alert, Progress, Skeleton… | docs/components/feedback.md |
| Données — Table, Stat, Timeline, Code… | docs/components/data-display.md |
| Interactifs — Dropdown, Tabs, Accordion… | docs/components/interactive.md |
| Composant | Documentation |
|---|---|
| Modal | docs/livewire/modal.md |
| Drawer | docs/livewire/drawer.md |
| Toast | docs/livewire/toast.md |
| DataTable | docs/livewire/datatable.md |
| CommandPalette | docs/livewire/command-palette.md |
| Dépendance | Version minimale |
|---|---|
| PHP | 8.2+ |
| Laravel | 11.x ou 12.x |
| Livewire | 4.x |
| Tailwind CSS | v4 |
| Alpine.js | inclus avec Livewire 4 |
Les contributions sont les bienvenues. Merci de consulter CHANGELOG.md pour l'historique des versions et d'ouvrir une issue avant de soumettre une pull request majeure.
Wirestack UI est un logiciel open-source distribué sous licence MIT. Voir LICENSE.md.