Menu
Table of Contents

Livewire UI Components - v2.0.0

Components Overview

ArtisanPack UI Livewire Components provides a comprehensive set of UI components for Laravel applications. This page provides an overview of all available components, organized by category.

Component Categories

The components are organized into the following categories:

  1. Form Components - Components for building forms and collecting user input
  2. Layout Components - Components for structuring and organizing content
  3. Navigation Components - Components for navigation and menus
  4. Data Display Components - Components for displaying and visualizing data
  5. Dashboard Components - Components for building dashboards (v2.0+)
  6. Feedback Components - Components for providing feedback to users
  7. Utility Components - Miscellaneous utility components

Usage Patterns

All ArtisanPack UI components follow consistent usage patterns:

Basic Component Usage

<x-artisanpack-button>Click Me</x-artisanpack-button>

Components with Properties

<x-artisanpack-button color="primary" size="lg" outline>
    Large Primary Outline Button
</x-artisanpack-button>

Components with Slots

<x-artisanpack-card>
    <x-slot:header>Card Header</x-slot:header>
    Card Content
    <x-slot:footer>Card Footer</x-slot:footer>
</x-artisanpack-card>

Components with Events

<x-artisanpack-button @click="alert('Button clicked!')">
    Click Me
</x-artisanpack-button>

Common Props and Slots

Many components share common props and slots:

Common Props

  • class - Additional CSS classes to apply to the component
  • id - HTML ID attribute
  • disabled - Whether the component is disabled
  • color - The color variant (primary, secondary, accent, etc.)
  • size - The size variant (xs, sm, md, lg, xl)

Common Slots

  • default - The main content of the component
  • header - Content for the header section (for container components)
  • footer - Content for the footer section (for container components)
  • icon - Icon content for components that support icons

Component List

Form Components

Component Description Documentation
Button Interactive button element View Docs
Checkbox Checkbox input View Docs
CheckboxGroup Group of checkbox inputs View Docs
Choices Multi-select dropdown with search View Docs
ChoicesOffline Offline version of Choices View Docs
Colorpicker Color selection input View Docs
DatePicker Date selection input View Docs
DateTime Date and time selection input View Docs
Editor Rich text editor View Docs
Fieldset Styled container for form fields View Docs
File File upload input View Docs
Form Form container with validation View Docs
Group Group of form elements View Docs
Input Text input field View Docs
Password Password input with toggle View Docs
Pin PIN code input View Docs
Radio Radio button input View Docs
RadioGroup Group of radio button inputs View Docs
Range Range slider input View Docs
Rating Star rating input View Docs
Select Dropdown select input View Docs
SelectGroup Grouped select input View Docs
Signature Signature pad input View Docs
Tags Tags input View Docs
Textarea Multi-line text input View Docs
Toggle Toggle switch input View Docs

Layout Components

Component Description Documentation
Accordion Collapsible content panels View Docs
Card Content container with header and footer View Docs
Collapse Collapsible content View Docs
Drawer Side drawer/panel View Docs
Dropdown Dropdown menu View Docs
Separator Horizontal rule with styling View Docs
Main Main content container View Docs
Modal Modal dialog View Docs
Popover Popover tooltip View Docs
Tabs Tabbed interface View Docs
Tab Individual tab for Tabs component View Docs
Component Description Documentation
Breadcrumbs Breadcrumb navigation View Docs
Menu Navigation menu View Docs
MenuItem Menu item for Menu component View Docs
MenuSeparator Separator for Menu component View Docs
MenuSub Submenu for Menu component View Docs
MenuTitle Title for Menu component View Docs
Nav Navigation bar View Docs
Pagination Pagination controls View Docs
Spotlight Command palette/search View Docs

Data Display Components

Component Description Documentation
Avatar User avatar/profile image View Docs
Badge Small status indicator View Docs
Calendar Calendar display View Docs
CalendarEnhanced Enhanced calendar with events and views View Docs
Chart Data visualization charts View Docs
Code Code display with syntax highlighting View Docs
Diff Text difference display View Docs
EventModalContent Calendar event modal content View Docs
Heading Styled heading text View Docs
ImageGallery Image gallery display View Docs
ImageLibrary Image library/picker View Docs
ImageSlider Image slider/carousel component View Docs
Kbd Keyboard key display View Docs
Link Styled link element View Docs
ListItem List item with various layouts View Docs
Markdown Markdown content display View Docs
Profile User profile display View Docs
Progress Progress bar View Docs
ProgressRadial Radial progress indicator View Docs
Stat Statistics display View Docs
Steps Step indicator View Docs
Step Individual step for Steps component View Docs
Subheading Styled subheading text View Docs
Sparkline Inline sparkline charts View Docs
Table Data table with sorting, export, and more View Docs
Text Styled text component View Docs
TimelineItem Timeline item display View Docs

Dashboard Components (v2.0+)

Component Description Documentation
KpiCard KPI card with sparkline and trend indicator View Docs
WidgetGrid Responsive grid for dashboard layouts View Docs
StreamableContent Container for streaming content (AI responses) View Docs

Feedback Components

Component Description Documentation
Alert Alert/notification message View Docs
Errors Form validation errors display View Docs
Loading Loading indicator View Docs
Toast Toast notification View Docs

Utility Components

Component Description Documentation
Carousel Image/content carousel View Docs
Header Page header with actions View Docs
Icon SVG icon display View Docs
Swap Element that swaps content on interaction View Docs
ThemeToggle Light/dark theme toggle View Docs

Component Composition

ArtisanPack UI components are designed to work together seamlessly. Here are some examples of component composition:

Form with Validation

<x-artisanpack-form wire:submit="save">
    <x-artisanpack-input label="Name" wire:model="name" required />
    <x-artisanpack-input label="Email" wire:model="email" type="email" required />
    <x-artisanpack-textarea label="Message" wire:model="message" required />
    
    <x-slot:actions>
        <x-artisanpack-button type="submit">Submit</x-artisanpack-button>
    </x-slot:actions>
</x-artisanpack-form>

Card with Tabs

<x-artisanpack-card>
    <x-slot:header>
        <h3 class="text-lg font-bold">User Profile</h3>
    </x-slot:header>
    
    <x-artisanpack-tabs>
        <x-artisanpack-tab name="info" label="Information" active>
            <div class="p-4">User information content</div>
        </x-artisanpack-tab>
        
        <x-artisanpack-tab name="settings" label="Settings">
            <div class="p-4">User settings content</div>
        </x-artisanpack-tab>
    </x-artisanpack-tabs>
</x-artisanpack-card>

Data Table with Export (v2.0+)

<?php
use ArtisanPack\LivewireUiComponents\Traits\WithTableExport;
use Livewire\Volt\Component;

new class extends Component {
    use WithTableExport;

    public function with(): array
    {
        return [
            'headers' => [
                ['key' => 'name', 'label' => 'Name'],
                ['key' => 'email', 'label' => 'Email'],
                ['key' => 'role', 'label' => 'Role'],
            ],
            'users' => User::paginate(10),
        ];
    }

    public function getTableExportData(string $tableId = 'default'): array
    {
        return [
            'headers' => $this->with()['headers'],
            'rows' => User::all()->toArray(),
            'filename' => 'users-export',
        ];
    }
}; ?>

<x-artisanpack-table
    :headers="$headers"
    :rows="$users"
    exportable
    :export-formats="['csv', 'xlsx', 'pdf']"
    with-pagination />

Dashboard with KPI Cards (v2.0+)

<x-artisanpack-widget-grid :cols="4" :gap="4">
    <x-artisanpack-kpi-card
        title="Total Revenue"
        value="$45,231"
        icon="o-currency-dollar"
        :change="12.5"
        change-label="vs last month"
        :sparkline-data="[1200, 1350, 1100, 1500, 1400, 1600, 1800]" />

    <x-artisanpack-kpi-card
        title="Active Users"
        value="2,345"
        icon="o-users"
        :change="8.2"
        change-label="vs last month" />

    <x-artisanpack-kpi-card
        title="Orders"
        value="1,234"
        icon="o-shopping-cart"
        :change="-2.4"
        change-label="vs last month" />

    <x-artisanpack-kpi-card
        title="Conversion"
        value="3.24%"
        icon="o-arrow-path"
        :change="0.8"
        change-label="improvement" />
</x-artisanpack-widget-grid>

Next Steps

Explore the documentation for individual components to learn more about their specific features, props, slots, and usage examples.