Blog Detail

Jun

A Library of Components & Resources for Laravel & Livewire

WireUi is a simple, fast, and elegant way to add blade components made with alpine.js and tailwind, ready to use, enjoy the ease.
The WireUI is a library of components and resources to empower your application development with Laravel and Livewire. Starting a new project with Livewire can be time-consuming when you have to create all the components from scratch. Wire UI helps to skip this step and get you straight to the development phase.

Installing WireUI enriches your project with:

Form and UI components
Notifications
Confirmation notifications
All Heroicons

Requirements

PHP 8.x
Composer
Laravel 9.x
Livewire 2.10+
Alpine.js 3.x
Tailwindcss 3.x
@tailwindcss/aspect-ratio 0.4.x
@tailwindcss/forms 0.4.x
@tailwindcss/typography 0.5.x

Installation

Run the following command to add WireUI to your project:

composer require wireui/wireui

Add the WireUI tag above Alpinejs script tag in your page layout:

<html>
    <head>
        ...
        <wireui:scripts />
        <script src="//unpkg.com/alpinejs" defer></script>
    </head>
</html>

Alternatively, you can use the equivalent Blade directive:

...
@wireUiScripts
<script src="//unpkg.com/alpinejs" defer></script>
...

Add the following settings to your Tailwindcss config file, tailwind.config.js:

module.exports = {
    ...
    presets: [
        ...
        require('./vendor/wireui/wireui/tailwind.config.js')
    ],
    content: [
        ...
        './vendor/wireui/wireui/resources/**/*.blade.php',
        './vendor/wireui/wireui/ts/**/*.ts',
        './vendor/wireui/wireui/src/View/**/*.php'
    ],
    ...
}

Publishing

WireUI does not need any additional configuration, but you can publish the files and customize them to your preference.

php artisan vendor:publish --tag='wireui.config'
php artisan vendor:publish --tag='wireui.resources'
php artisan vendor:publish --tag='wireui.lang'

Others Options

This library has a lot of options.

Inputs
Textarea
Native Select
Select
Color Picker
Errors
Cards
Buttons
Toggle
Checkbox
Radio
Power Grid

For more details, Visit its complete documentation here.

Published at : 23-06-2022

AUTHOR

Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.