🌟 Overview

Zivar Laravel UI is an extensive, elegant, and production-ready UI component kit and administration dashboard built specifically for Laravel 11+, Livewire 4, Tailwind CSS v4, and Alpine.js 3.

Featuring over 25+ handcrafted components, seamless dark mode support, and an ergonomic <z:...> custom Blade tag compiler, Zivar UI accelerates your development workflow with clean code and polished aesthetics.

✨ Key Features

• 🎨 25+ Interactive Components: Buttons, Forms, Autocomplete, Badges, Modals, Cards, Charts, Tables, Tabs, Tooltips, Typography, Calendars, Kanban Boards, Digital Signature Pad, Image Lightbox Gallery, Tour Guides, Treeviews, Media Players, SweetAlert2, Text Dividers, BlockUI, Spinners, Skeletons, and more.
• ⚡ First-Class <z:...> Blade Tag Compiler: Write clean, modern tags like <z:button color="sky"> or <z:signature wire:model="signature">.
• 🌙 Curated Light & Dark Mode: Deep navy & soft slate color schemes with zero Flash of Unstyled Content (FOUC).
• 🚀 Powered by Tailwind CSS v4 & Alpine.js: Instant hot-module reloading and zero bloated runtime CSS.
• 📱 Fully Responsive: Collapsible desktop sidebar, mobile touch drawer, responsive tables, and adaptable viewports.
• 🔄 Livewire 4 Ready: Built-in auto-loading states, real-time wire-model syncing, and seamless server-rendered reactivity.

🚀 Installation & Quick Start

Option A: Install into an Existing Laravel Project

Run the following command in your terminal:

# 1. Require the package
composer require zivar/laravel-ui

# 2. Run the interactive installer (publishes components & updates dependencies)
php artisan zivar:install

# 3. Install frontend packages and run Vite
npm install
npm run dev

Optional: To publish documentation views and templates, run:

php artisan zivar:install --views

Option B: Create a Fresh Project Template

composer create-project zivar/laravel-ui my-admin-app
cd my-admin-app

npm install
npm run dev
php artisan serve

Visit http://127.0.0.1:8000/docs/dashboard to explore the interactive component documentation and live workspace.

📦 Component Library

Komponen UI (Core UI)

Komponen Extend (Advanced Suites)

💻 Usage Example

Modern Tag Syntax (<z:...>)

{{-- Page Header --}}
<z:header 
    category="KOMPONEN UI"
    title="Button Component" 
    subtitle="Komponen tombol terpadu Zivar UI dengan 7 varian visual dan tema warna terkurasi."
/>

{{-- Action Button with Icon & Glow --}}
<z:button variant="glow" color="sky" icon="sparkles">
    Generate Report
</z:button>

{{-- Interactive Digital Signature Pad --}}
<z:signature 
    wire:model="signatureData" 
    color="sky" 
    clearable 
    downloadable 
/>

{{-- Metric Card --}}
<z:card title="Total Revenue" subtitle="Monthly billing cycle" icon="chart-bar" iconColor="emerald">
    <div class="text-2xl font-black text-slate-900 dark:text-white">$48,290.00</div>
</z:card>

👨‍💻 Author

• Ravi Zulfikar
  • Website: https://zivar.my.id
  • Email: ravizulfikar17@gmail.com

📄 License

Zivar Laravel UI is open-sourced software licensed under the MIT license.