Installation

Zinc UI is a UI component library for your Livewire applications. It's built using Tailwind CSS and Alpine Js .

Prerequisites

Zinc UI requires the following before installing:

Laravel

Version 3.4.10 or later

Configuring `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": "stable", 
+    "minimum-stability": "dev", 
     "prefer-stable": true
 }

This configuration allows Alpha releases while preferring stable versions for other packages.

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.header')] 
+#[Title('Home')] 
 class Home extends Component
 {
     public function render()
     {
         return view('livewire.home');
     }
 }

The


    #[Layout]

attribute defines the layout to use, and


    #[Title]

specifies the page title.

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.

For more details, refer to the layouts page.

Update routes

Open the


    web.php

file and define a route for your component:

+use App\Livewire\Home; 
 use Illuminate\Support\Facades\Route;
  
-Route::get('/', function () { 
-    return view('welcome'); 
-}); 
  
+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.