Menu
Table of Contents

Livewire UI Components - v2.0.5

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

Layout Components

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

Data Display Components

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

Dashboard Components (v2.0+)

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

Feedback Components

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

Utility Components

Component Description Documentation
Carousel Image/content carousel Carousel docs
Header Page header with actions Header docs
Icon SVG icon display Icon docs
Swap Element that swaps content on interaction Swap docs
ThemeToggle Light/dark theme toggle ThemeToggle 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.