WireUI Docs V1

WireUI

Documentation Heroicons
GitHub

Blade Components

A simple, fast and elegant way to add blade components made with alpine.js and tailwind, ready to use, enjoy the ease. Livewire components and Tall Stack components

Get started

WireUI Features

A set of reusable blade components for Tall Stack projects. Form components, icons, alerts, modals and much more. Simple, efficient and elegant

Heroicons

A set of 450+ free MIT-licensed high-quality SVG icons for you to use in your web projects. Available as basic SVG icons

Blade Components

Reusable blade components to increase usability in your project. Beautiful notifications, icons, and form components to improve your code

Simple Documentation

A simple documentation with real life examples and details of usage. Code example and UI example

Ready to enjoy Heroicons?

All heroicons are available in blade components, ready to use with same names of heroicons.

Get Started
Heroicons

Notifications Feature

The simple and complete api to create many notifications for all use cases, alert a completed action or ask if are sure to confirm action. Enjoy notifications.

Notifications use case

Use notifications to confirm a particular action, or to claim that the action was successful. Use as user or application notifications

Alert Notifications

Show an alert when the action to delete a record was successful, or even when a record was saved. Show an alert for anything

Confirm Notifications

Before taking an action, ask the user if they are sure of this, set up an action for confirmation or rejection.

Sponsors

JetBrains

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

Form Example

Personal Information

 1<x-card title="Personal Information">
 2    <x-errors class="mb-4" />
 3 
 4    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
 5        <x-input label="First Name" placeholder="First Name" wire:model.defer="user.first_name" />
 6        <x-input label="Last Name"  placeholder="Last Name" wire:model.defer="user.last_name" />
 7 
 8        <div class="col-span-1 sm:col-span-2 sm:grid sm:grid-cols-7 sm:gap-5">
 9            <div class="col-span-1 sm:col-span-4">
10                <x-input label="Email" placeholder="[email protected]" wire:model.defer="user.email" />
11            </div>
12 
13            <div class="col-span-1 sm:col-span-3">
14                <x-inputs.phone label="Phone" placeholder="Phone" wire:model.defer="user.phone" />
15            </div>
16        </div>
17 
18        <x-select
19            label="Country"
20            placeholder="Country"
21            wire:model.defer="user.country"
22            :options="$this->countries()"
23        />
24 
25        <x-datetime-picker label="Birthdate" placeholder="Birthdate" wire:model.defer="user.birthdate" />
26 
27        <div class="col-span-1 sm:col-span-2">
28            <x-input label="Street Address" placeholder="Street Address" wire:model.defer="user.street" />
29        </div>
30 
31        <div class="col-span-1 sm:col-span-2 sm:grid sm:grid-cols-3 sm:gap-6">
32            <x-input label="City" placeholder="City" wire:model.defer="user.city" />
33            <x-input label="State" placeholder="State" wire:model.defer="user.state" />
34            <x-input label="Postal Code" placeholder="Postal Code" wire:model.defer="user.postal_code" />
35        </div>
36 
37        <x-toggle label="Accept the terms and conditions" wire:model.defer="user.terms" />
38    </div>
39 
40    <x-slot name="footer">
41        <div class="flex items-center gap-x-3 justify-end">
42            <x-button wire:click="cancel" label="Cancel" flat />
43            <x-button wire:click="save" label="Save" spinner="save" primary />
44        </div>
45    </x-slot>
46</x-card>