Introduction

Zinc UI is A UI component library for Livewire , built with Tailwind CSS and Alpine.js.

Documentation

You can find the documentation here.

Installation

Package Status: Alpha Stage

Configure composer.json

Since Zinc UI is in its Alpha version, you need to modify the composer.json file. Open the file and ensure the following lines are present:

{
    "minimum-stability": "dev",
    "prefer-stable": true
}

Install Zinc UI

Run the following command to add Zinc UI to your project:

composer require arifbudimanar/zinc-ui

Set up Zinc UI

After installation, initialize the package by running:

php artisan zinc:install

Check installed version

To check the version of Zinc UI installed, run:

php artisan zinc:version

Create a Livewire Component

Generate a Livewire component by running:

php artisan make:livewire Home

Update the Home.php file with this content:

#[Layout('layouts.sidebar-header')]
#[Title('Home')]
class Home extends Component
{
    public function render()
    {
        return view('livewire.home');
    }
}

Layout Options

Zinc UI includes several layouts tailored to different page types:

• header : For public pages like home and about.
• header-sidebar : For user-facing pages like dashboards and profiles.
• without-header : For authentication pages like login and register.
• sidebar : For admin pages like admin dashboards.
• sidebar-header : Another option for admin dashboards.

Update routes

Open the web.php file and define a route for your component:

use App\Livewire\Home;

Route::get('/', Home::class);

Run the application

Start the development server and compile the assets using:

composer run dev

Visit http://localhost:8000 to see Zinc UI in action.

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Arif Budiman Arrosyid
• All Contributors

License

The MIT License (MIT). Please see License File for more information.