Livewire UI Components - v1.0-beta2

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:

Form Components - Components for building forms and collecting user input
Layout Components - Components for structuring and organizing content
Navigation Components - Components for navigation and menus
Data Display Components - Components for displaying and visualizing data
Feedback Components - Components for providing feedback to users
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
Table	Data table	View Docs
Text	Styled text component	View Docs
TimelineItem	Timeline item display	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 Pagination

<x-artisanpack-table :headers="['Name', 'Email', 'Role', 'Actions']">
    @foreach($users as $user)
        <tr>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
            <td>{{ $user->role }}</td>
            <td>
                <x-artisanpack-button size="sm" wire:click="edit({{ $user->id }})">
                    Edit
                </x-artisanpack-button>
            </td>
        </tr>
    @endforeach
    
    <x-slot:pagination>
        {{ $users->links() }}
    </x-slot:pagination>
</x-artisanpack-table>

Next Steps

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