ArtisanPack UI Livewire UI Components

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.

🚀 Quick Start

Installation

# 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

Basic Usage

<!-- 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>

✨ Key Features

• 🎯 70+ Pre-built Components: From simple inputs to complex data tables and charts
• ⚡ TALL Stack Integration: Built specifically for Tailwind CSS, Alpine.js, Laravel, and Livewire
• 🎨 DaisyUI Powered: Leverages the beautiful daisyUI component library for consistent styling
• 🔧 Livewire 3 & 4 Compatible: Fully compatible with Livewire 3 and 4
• 🎨 Customizable Theming: Generate custom color themes with a simple Artisan command
• 📱 Responsive Design: All components are fully responsive out of the box
• ♿ Accessibility Focused: Components designed with accessibility best practices
• 📚 Comprehensive Documentation: Detailed documentation with examples for every component

🧩 Component Categories

📝 Form Components

Input, Button, Checkbox, Select, DatePicker, File Upload, Rich Text Editor, and more.

🏗️ Layout Components

Card, Modal, Tabs, Accordion, Drawer, Dropdown, and structural elements.

🧭 Navigation Components

Menu, Breadcrumbs, Pagination, Spotlight Search, and navigation helpers.

📊 Data Display Components

Table, Chart, Calendar, Avatar, Badge, Progress indicators, and data visualization.

💬 Feedback Components

Alert, Toast, Loading states, and user feedback elements.

🛠️ Utility Components

Icon, Theme Toggle, Carousel, and various utility components.

📖 Documentation

Comprehensive documentation is available in our Documentation Wiki:

• Installation Guide - Detailed setup instructions
• Components Overview - Complete component reference
• Customization Guide - Theming and customization options
• Advanced Topics - Color system, custom components, and more

🎨 Theming

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.

📦 Optional Dependencies

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.

📊 JavaScript Dependencies

Some components require additional JavaScript packages and configuration.

Charts & Sparklines

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.

Date Pickers

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;

🔌 Extension Hooks

This package fires a small set of cross-cutting hooks — powered by artisanpack-ui/hooks — that let applications and other packages extend rendered UI without editing individual components. All hook names follow the ecosystem convention: ap. + camelCase segments joined by periods.

Registering callbacks

use ArtisanPackUI\Hooks\Facades\Action;
use ArtisanPackUI\Hooks\Facades\Filter;

// Add a class to every rendered button
Filter::add('ap.livewireUiComponents.componentClasses', function (array $classes, string $name) {
    if ('Button' === $name) {
        $classes[] = 'analytics-hook';
    }

    return $classes;
});

// Swap Font Awesome names for Heroicon names package-wide
Filter::add('ap.livewireUiComponents.iconAlias', function (string $name) {
    return match ($name) {
        'fa-home' => 'o-home',
        'fa-user' => 'o-user',
        default   => $name,
    };
});

// Log toasts to your analytics pipeline
Action::add('ap.livewireUiComponents.toastDispatched', function (string $type, string $title) {
    analytics()->track('toast_shown', ['type' => $type, 'title' => $title]);
});

Firing modal lifecycle hooks

Modals open through Alpine on the client, so the server has no automatic signal. Call the bridge from your Livewire actions when you open or close a modal to invoke the modalWillOpen / modalWillClose hooks:

use ArtisanPack\LivewireUiComponents\Support\ModalBridge;

public function openConfirmDialog(): void
{
    ModalBridge::willOpen('confirm-delete');
    $this->dispatch('open-modal', id: 'confirm-delete');
}

Performance

Filters short-circuit inside applyFilters() when no callback is registered, so idle hooks add only a facade dispatch plus a hash-map lookup per render. componentClasses is opt-in per component (route class lists through $this->getClasses($classes)); componentAttributes fires on every render but is cheap when nothing is subscribed. The base component name is cached per subclass so it is not recomputed each render.

🚀 Migration Guides

Upgrading to v2.0

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.

Upgrading to v1.0

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.

Acknowledgements

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.

Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

ArtisanPack UI Livewire UI Components is open-sourced software licensed under the MIT license.