TallCraftUi

Laravel blade UI component library built on TALL stack (TailwindCSS, Alpine.js, Laravel, Livewire).

Documentation

Please refer to the TallCraftUI official website for complete documentation. 🚀

Basic Usage

@php
    $countries = App\Models\Country::pluck('name', 'id');
@endphp

<form wire:submit="create">
    <x-input label="Name *" wire:model="name" />
    <x-input label="Email *" wire:model="email" />
    <x-select label="Country" wire:model="country_id" :options="$countries" />
    
    <x-button label="Submit" spinner="create" />
</form>

Error will be automatically displayed after submitting the form if it exists. You can also display all errors in this way:

@if($errors->any())
    <x-alert :errors="$errors->all()" red />
@endif

Installation

composer require developermithu/tallcraftui

php artisan install:tallcraftui

Modify tailwind.config.js

    theme: {
        extend: {
            colors: {
                primary: "#6d28d9",
                secondary: "#a21caf",
            },
        },
    },

Publish the configuration file

To rename tallcraftui components with a custom prefix, first publish the configuration file:

php artisan vendor:publish --tag=tallcraftui-config

return [
    /**
     * Default prefix for all components
     * 
     * Note: After changing the prefix, clear the view cache 
     * using `php artisan view:clear`
     *
     * Examples:
     * prefix => ''         // <x-input />
     * prefix => 'tc-'    // <x-tc-input />
     *
     */
    'prefix' => '',
];

After renaming, ensure you clear the view cache:

php artisan view:clear