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
WireUI
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
A set of reusable blade components for Tall Stack projects. Form components, icons, alerts, modals and much more. Simple, efficient and elegant
A set of 450+ free MIT-licensed high-quality SVG icons for you to use in your web projects. Available as basic SVG icons
Reusable blade components to increase usability in your project. Beautiful notifications, icons, and form components to improve your code
A simple documentation with real life examples and details of usage. Code example and UI example
All heroicons are available in blade components, ready to use with same names of heroicons.
Get StartedThe 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.
Use notifications to confirm a particular action, or to claim that the action was successful. Use as user or application notifications
Alert Notifications
Confirm Notifications
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
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">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-select19 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>