| Install | |
|---|---|
composer require artisanpack-ui/livewire-ui-components |
|
| Latest Version: | 2.0.2 |
ArtisanPack UI Livewire UI Components is a comprehensive set of UI components for Livewire powered by daisyUI and Tailwind CSS. This package provides a collection of beautiful, responsive, and customizable components to accelerate your Laravel application development.
# Install the package
composer require artisanpack-ui/livewire-ui-components
# Run the interactive installer
php artisan livewire-ui-components:install
# Compile your assets
npm run dev
<!-- Simple button -->
<x-artisanpack-button>Click Me</x-artisanpack-button>
<!-- Card with header and footer -->
<x-artisanpack-card>
<x-slot:header>
<h3 class="text-lg font-bold">Card Title</h3>
</x-slot:header>
<p>Card content goes here.</p>
<x-slot:footer>
<x-artisanpack-button color="primary">Action</x-artisanpack-button>
</x-slot:footer>
</x-artisanpack-card>
Input, Button, Checkbox, Select, DatePicker, File Upload, Rich Text Editor, and more.
Card, Modal, Tabs, Accordion, Drawer, Dropdown, and structural elements.
Menu, Breadcrumbs, Pagination, Spotlight Search, and navigation helpers.
Table, Chart, Calendar, Avatar, Badge, Progress indicators, and data visualization.
Alert, Toast, Loading states, and user feedback elements.
Icon, Theme Toggle, Carousel, and various utility components.
Comprehensive documentation is available in our Documentation Wiki:
Generate custom themes to match your brand:
php artisan artisanpack:generate-theme
This interactive command helps you create custom color schemes that work across all components.
Some features require optional packages:
# For Excel (XLSX) export
composer require phpoffice/phpspreadsheet
# For PDF export
composer require barryvdh/laravel-dompdf
CSV export works without any additional dependencies.
Some components require additional JavaScript packages and configuration.
The Chart and Sparkline components require ApexCharts:
npm install apexcharts
Then add to your resources/js/app.js:
import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts;
// Import sparkline Alpine component
import '../../vendor/artisanpack-ui/livewire-ui-components/resources/js/sparkline.js';
Note: For symlinked package development, use the path above. For production installations via Composer, the path would be different and you may need to adjust based on your setup.
The DatePicker component requires flatpickr:
npm install flatpickr
Configure in your app.js:
import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.min.css';
window.flatpickr = flatpickr;
Version 2.0 is fully backwards compatible with v1.x. All your existing code will continue to work without any modifications. Simply update the package:
composer require artisanpack-ui/livewire-ui-components:^2.0
See the complete v1.x to v2.0 Migration Guide for details on new features and optional enhancements.
Version 1.0.0 introduced standardized component naming. The duplicated prefix was removed:
Before (deprecated):
<x-artisanpack-artisanpack-button>Click Me</x-artisanpack-artisanpack-button>
After (v1.0.0+):
<x-artisanpack-button>Click Me</x-artisanpack-button>
Search and replace artisanpack-artisanpack- with artisanpack- in your Blade files.
ArtisanPack UI Livewire UI Components is a fork of the excellent MaryUI library, created by Robson Tenorio and contributors.
We extend our sincere gratitude to the MaryUI team for their incredible work and for making it available to the open-source community. This fork aims to adapt MaryUI to the specific coding standards and architectural patterns of the ArtisanPack UI ecosystem while adding new features.
Contributions are welcome! To contribute:
git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature')git push origin feature/amazing-feature)ArtisanPack UI Livewire UI Components is open-sourced software licensed under the MIT license.