Wire

UI
Empower Your
Workflow with

Wire

UI
Unlock the Power of Simple, Fast, and Elegant Blade Components for Alpine.js, Tailwind, Livewire, and the Tall Stack. Ready to Use, Easy to Love.
$ 

composer require wireui/wireui

Get Started
Welcome to WireUI
A powerful toolkit designed to revolutionize your development workflow. Our library of components offers a comprehensive set of tools to enhance your productivity and deliver exceptional results.
Lightning-fast Development
Create web interfaces with pre-made Blade components for quick project delivery.
Highly Customizable Components
Easily tailor components to match your unique design and functionality requirements.
Seamless Integration
Seamlessly use our components with Alpine.js, Tailwind CSS, Livewire, and Tall Stack technologies.
Comprehensive Documentation
Access comprehensive guides and resources for a smooth onboarding process.
Our Premier Partners
Our Platinum Sponsors are the driving force behind WireUI, and we are proud to acknowledge their invaluable support. Their commitment to our project has significantly contributed to our success.
CircleLink
Powerful Form Components
Form components are essential in any project. WireUI has a variety of ready-to-use form components, enjoy the date picker, time picker, select, inputs and more.
Personal Information 
 1<x-card class="px-5 py-2" title="Personal Information" :color="[
 2    'root' => 'bg-white dark:bg-secondary-900',
 3    'footer' => 'bg-transparent',
 4    'text' => 'text-secondary-700 dark:text-secondary-400',
 5    'border' => 'border-secondary-200 dark:border-secondary-600',
 6]">
 7    <x-errors class="mb-4" />
 8 
 9    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
10        <x-input label="First Name" placeholder="First Name" wire:model="form.first_name" />
11 
12        <x-input label="Last Name" placeholder="Last Name" wire:model="form.last_name" />
13 
14        <div class="col-span-1 space-y-6 sm:col-span-2 sm:grid sm:grid-cols-7 sm:gap-5 sm:space-y-0">
15            <div class="col-span-1 sm:col-span-4">
16                <x-input label="Email" placeholder="[email protected]" wire:model="form.email" />
17            </div>
18 
19            <div class="col-span-1 sm:col-span-3">
20                <x-phone label="Phone" placeholder="Phone" wire:model="form.phone" />
21            </div>
22        </div>
23 
24        <x-select label="Country" placeholder="Country" wire:model="form.country" :options="$countries" />
25 
26        <x-datetime-picker label="Birthdate" placeholder="Birthdate" wire:model="form.birthdate" />
27 
28        <div class="col-span-1 sm:col-span-2">
29            <x-input label="Street Address" placeholder="Street Address" wire:model="form.street" />
30        </div>
31 
32        <div class="col-span-1 space-y-6 sm:space-y-0 sm:col-span-2 sm:grid sm:grid-cols-3 sm:gap-6">
33            <x-input label="City" placeholder="City" wire:model="form.city" />
34 
35            <x-input label="State" placeholder="State" wire:model="form.state" />
36 
37            <x-input label="Postal Code" placeholder="Postal Code" wire:model="form.postal_code" />
38        </div>
39 
40        <x-toggle label="Accept the terms and conditions" wire:model="form.terms" />
41    </div>
42 
43    <x-slot name="footer" class="flex items-center justify-end gap-x-3">
44        <x-button wire:click="cancel" label="Cancel" teal flat />
45 
46        <x-button wire:click="save" label="Save" spinner="save" teal />
47    </x-slot>
48</x-card>