zivar/laravel-ui

Modern Blade & Livewire UI Components and Admin Templates for Laravel.

v1.0.2 2026-08-21 17:40 UTC

Requires

• php: ^8.2 | ^8.3 | ^8.4
• illuminate/support: ^11.0 | ^12.0 | ^13.0
• illuminate/view: ^11.0 | ^12.0 | ^13.0

MIT

• Ravi Zulfikar

• laravel
• blade
• tailwindcss
• admin-template
• livewire
• alpinejs
• ui-components
• zivar-ui

Published on Packagist.org on 2026-08-21 17:40 UTC

README

Zivar Laravel UI & Admin Templates

Modern, High-Performance Blade & Livewire UI Components and Admin Templates for Laravel.

🌟 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)

Component	Blade Tag	Highlights
Buttons	<z:button>	7 visual variants (solid, label, outline, text, glow, gradient, glass), 12 curated color palettes, social brand suite, 1-click clipboard copy.
Forms & Inputs	<z:input>, <z:select>	Floating labels, prefix/suffix icons, character counters, password toggles, input masks, validation states.
Autocomplete	<z:autocomplete>	Real-time search filter, keyboard navigation (Arrow/Enter/Esc), highlighting, badge metadata.
Avatar & Groups	<z:avatar>	5 size presets, status indicators, avatar stack group, initial letter fallbacks.
Badges & Counters	<z:badge>	Subtle, solid, outline, glow neon, gradient, pulsing dot radar, notification corner counters.
Modals & Slideover	<z:modal>	Smooth backdrop blur, focus trapping, header/footer slots, slideover drawer orientation.
Cards & Containers	<z:card>	KPI metrics, glassmorphism, advance action controls (collapse, reload, remove).
Data Tables	<z:table>	Responsive data tables with sortable column headers, search filters, and action dropdowns.
Charts	<z:chart>	ApexCharts & Chart.js integration with real-time dark/light theme observer.
Tabs & Pills	<z:tabs>	Line tabs, pill buttons, boxed segments, vertical orientation, badge integration.
Tooltips & Popovers	<z:tooltip>, <z:popover>	4-directional placement, custom trigger events, interactive rich HTML cards.
Typography	<z:header>, <z:blockquote>	Modern typographic hierarchy (Display & Heading scale, inline accents, lead paragraphs).
Progress & Gauges	<z:progress>	Striped animated bars, glowing indeterminate bars, radial percentage gauges, step trackers.
Carousel & Slider	<z:carousel>	Auto-play progress, touch swipe gestures, thumbnail ribbons, glass navigation buttons.
Dropdowns	<z:dropdown>	Split buttons, icon shortcuts, badge counters, glassmorphic dropdown panels.
Skeleton & Spinner	<z:skeleton>, <z:spinner>	Shimmer loading animations, 6 spinner styles (border, grow, bouncing dots, wave equalizer).

Komponen Extend (Advanced Suites)

Component	Blade Tag	Highlights
Kanban Task Board	<z:kanban>	Multi-column drag & drop task management, real-time search, category tags, modal drawer.
Digital Signature Pad	<z:signature>	Bézier smooth touch/pointer drawing, undo history, color palette, PNG export, read-only cert stamp.
Image Gallery & Lightbox	<z:image-gallery>	Masonry & grid layouts, full-screen lightbox, keyboard navigation, thumbnail strip ribbon.
Calendar Suite	<z:calendar>	Full monthly calendar, event category filters, mini-sidebar calendar, event scheduling modal.
Drag & Drop	<z:sortable>	SortableJS integration, multi-column reordering, custom drag handles, clone mode.
Tour Onboarding	<z:tour>	Multi-step interactive walkthrough with spotlight masking and auto-placement.
Treeview	<z:treeview>	Nested recursive directory tree, file extension colored icons, search filter, checkboxes.
Media Player	<z:media-player>	Custom HTML5 video & audio player with frosted glass controls and audio visualizer.
SweetAlert2	<z:sweetalert>	Interactive pop-up dialogs with Zivar UI theme styling and Livewire event triggers.
BlockUI	<z:blockui>	Viewport and card-level loading overlay with backdrop blur and custom messages.
Text Divider	<z:divider>	Horizontal & vertical section dividers with badges, icons, and dashed/gradient borders.

💻 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: [e-mail]

📄 License

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