PHPackages hawkiq/hwkui - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. hawkiq/hwkui ActiveLibrary[Utility & Helpers](/categories/utility) hawkiq/hwkui ============ Widgets library for Laravel Livewire 3 1.0.7(1mo ago)060MITPHP Since Jul 21Pushed 5mo agoCompare [ Source](https://github.com/hawkiq/livewire-hwkUI)[ Packagist](https://packagist.org/packages/hawkiq/hwkui)[ RSS](/packages/hawkiq-hwkui/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (7)DependenciesVersions (9)Used By (0) hwkUI ===== [](#hwkui) [![hwkUI Banner](assets/banner.png)](assets/banner.png) [![Packagist](https://camo.githubusercontent.com/39a044dd8082652c82c68bb82968a8a8f77bde08b254f8bfafe676b908a4f283/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6861776b69712f68776b75692e737667)](https://packagist.org/packages/hawkiq/hwkui) **hwkUI** is a Laravel package providing ready-to-use UI widgets built on top of **Livewire 3**, designed for simplicity and flexibility. It includes dynamic Select2 , Datetimepicker and Rich Text Editor components with easy to use components like cards and info boxes and more coming soon. 📑 Table of Contents ------------------- [](#-table-of-contents) - [📦 Requirements](#-requirements) - [🚀 Installation](#-installation) - [🚀 Update](#-update) - [⚙️ Configuration](#%EF%B8%8F-configuration) - [📁 Publish the Config File](#1-publish-the-config-file) - [🌐 Using CDN (Default)](#-using-cdn-default) - [🗂️ Using Local Assets (Optional)](#%EF%B8%8F-using-local-assets-optional) - [🧩 Usage](#-usage) - [Select2 Component](#select2-component) - [🗓️ DateTime Picker Component](#%EF%B8%8F-datetime-picker-component) - [✒️ Text Editor Component](#%EF%B8%8F-text-editor-component) - [🧩 Widgets](#-card-widget) - [📦 Card Widget](#-card-widget) - [📦 Info Box Widget](#-info-box-widget) - [📦 Small Box Widget](#-small-box-widget) - [🔧 Customization](#-customization) - [📝 License](#-license) - [👤 Author](#-author) 📦 Requirements ============== [](#-requirements) - Laravel **10.x** - Livewire **3.x** - PHP **8.1+** --- 🚀 Installation ============== [](#-installation) ``` composer require hawkiq/hwkui ``` 🚀 Publish Assets ---------------- [](#---publish-assets) ``` php artisan vendor:publish --tag=hwkui-assets ``` this will publish file `hwkui.css` to `resources/css/` needed to correct style widgets add this line to `app.css` after `@import "tailwindcss";` ``` @import './hwkui.css'; ``` 🚀 Update -------- [](#-update) if you want to update use ``` composer update hawkiq/hwkui ``` --- ⚙️ Configuration ================ [](#️-configuration) The config file `config/hwkui.php` defines which JS/CSS plugins to load and whether to use CDN or local assets. ### 1. Publish the Config File [](#1-publish-the-config-file) ``` php artisan vendor:publish --tag=hwkui-config ``` This will create `config/hwkui.php`. 🌐 Using CDN (Default) --------------------- [](#-using-cdn-default) By default, hwkUI uses CDN links for plugins like jQuery, Select2, and DataTables. Example from `config/hwkui.php`: ``` 'Select2' => [ 'active' => true, 'files' => [ [ 'type' => 'css', 'asset' => false, 'location' => '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css', ], [ 'type' => 'js', 'asset' => false, 'location' => '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', ], ], ], ``` 🗂️ Using Local Assets (Optional) -------------------------------- [](#️-using-local-assets-optional) If you prefer to serve local assets (for offline use or better performance), follow these steps: ### Step 1: Download Required JS/CSS Files [](#step-1-download-required-jscss-files) You must download the files manually: ``` jQuery: https://code.jquery.com/jquery-3.7.1.min.js Select2: CSS: https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css JS: https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js Place them under `public/vendor/hwkui/` or another folder of your choice. ``` ### Step 2: Update config/hwkui.php [](#step-2-update-confighwkuiphp) Change asset => true and point to your local file path: ``` 'Select2' => [ 'active' => true, 'files' => [ [ 'type' => 'css', 'asset' => true, 'location' => 'vendor/hwkui/select2.min.css', ], [ 'type' => 'js', 'asset' => true, 'location' => 'vendor/hwkui/select2.min.js', ], ], ], ``` Laravel will generate the full asset URL using `asset('vendor/hwkui/select2.min.css')`. --- 🗂️ Using NPM Assets (Optional) ------------------------------ [](#️-using-npm-assets-optional) if you prefer using npm packages you can set `false` to every plugin in config file then install packages to use for example ``` npm install @popperjs/core @eonasdan/tempus-dominus npm install jquery select2 ``` this will be used for Datetime and select2 plugins, then edit `app.js` to import ``` import $ from "jquery"; import * as Popper from "@popperjs/core"; import { TempusDominus } from "@eonasdan/tempus-dominus"; import "@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css"; import "select2/dist/js/select2.full.min.js"; import "select2/dist/css/select2.min.css"; window.Popper = Popper; window.TempusDominus = TempusDominus; window.$ = $; window.jQuery = $; window.Select2 = $.fn.select2; ``` --- 🧩 Usage ------- [](#-usage) Select2 Component ================= [](#select2-component) In your Blade view: ``` @forelse ($users as $user) {{ $user->name }} @empty No options available @endforelse ``` Make sure to include Livewire and the component's scripts on your page. you can pass options for Select2 like via component ``` ``` or direct array ``` ``` 🗓️ DateTime Picker Component ============================ [](#️-datetime-picker-component) This component provides an elegant datetime picker powered by Tempus Dominus v6, ready to use in your Laravel Livewire app with a clean, customizable Blade syntax. Enable in Configuration ``` 'Datetime' => [ 'active' => true, 'files' => [ [ 'type' => 'css', 'asset' => false, 'location' => '//cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css', ], [ 'type' => 'js', 'asset' => false, 'defer' => true, 'location' => '//cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js', ], [ 'type' => 'js', 'asset' => false, 'defer' => true, 'location' => '//cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js', ], ], ], ``` in your blade use it like this ✅ Basic Usage ------------- [](#-basic-usage) ``` ``` 🛠️ You can configure default picker options globally in `config/hwkui.php` ``` 'datetime' => [ 'defaultOptions' => [ 'display' => [ 'viewMode' => 'calendar', 'components' => [ 'calendar' => true, 'date' => true, 'year' => true, 'month' => true, 'clock' => true, ], 'calendarWeeks' => false, ], 'debug' => false, 'useCurrent' => true, 'stepping' => 1, 'localization' => [ 'format' => 'yyyy-MM-dd hh:mm', 'locale' => app()->getLocale(), ], ], ], ``` You can explore all available options on the [Options page](https://getdatepicker.com/6/options/) and see what you can add. ✏️ Override Options Per Component --------------------------------- [](#️-override-options-per-component) yOverride settings for individual instances using the `:options` attribute: ``` ``` ✒️ Text Editor Component ======================== [](#️-text-editor-component) A rich-text editor component powered by Quill.js, built for Laravel Livewire 3. Fully supports customization, toolbar control, themes, and Livewire model binding. In your `config/hwkui.php`, activate the editor plugin: ``` 'plugins' => [ 'Editor' => [ 'active' => true, 'files' => [ [ 'type' => 'css', 'asset' => false, 'location' => '//cdn.quilljs.com/1.3.6/quill.snow.css', ], [ 'type' => 'js', 'asset' => false, 'location' => '//cdn.quilljs.com/1.3.6/quill.min.js', ], ], ], ], ``` ✅ Basic Usage ------------- [](#-basic-usage-1) ``` Default content goes here... ``` 🛠 Toolbar Customization ----------------------- [](#-toolbar-customization) Use the toolbar attribute to define your desired tools. ``` ``` 🔹 You can customize the toolbar using Quill toolbar options separated by |. --- 📦 Card Widget ============= [](#-card-widget) A reusable friendly Card component built with Tailwind CSS v4, part of the hawkiq/hwkui widget library. It supports theme colors, outline and solid styles, optional icons, header tools, footer, and dark mode. [![Card Widget](assets/card-widget.PNG)](assets/card-widget.PNG) ✅ Basic Usage ------------- [](#-basic-usage-2) ``` Basic Card Usage Card Footer A card without header has red border ... A card with header using warning color but disabled... A card with full color... ``` 📦 Info Box Widget ================= [](#-info-box-widget) For display small infos with icons or progress bar [![Info Box Widget](assets/info-box-widget.PNG)](assets/info-box-widget.PNG) ✅ Basic Usage ------------- [](#-basic-usage-3) ``` ``` 📦 Small Box Widget ================== [](#-small-box-widget) For display one info with beautiful UI [![Info Box Widget](assets/small-box-widget.PNG)](assets/small-box-widget.PNG) ✅ Basic Usage ------------- [](#-basic-usage-4) ``` ``` 🔧 Customization =============== [](#-customization) Feel free to extend or publish views if needed: ``` php artisan vendor:publish --tag=hwkui-views ``` 📝 License ========= [](#-license) This project is open-sourced under the MIT license. 👤 Author ======== [](#-author) hawkiq Enjoy building awesome interfaces with hwkUI! 🚀 ### Health Score 36 — LowBetter than 82% of packages Maintenance80 Actively maintained with recent releases Popularity10 Limited adoption so far Community6 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~36 days Recently: every ~62 days Total 8 Last Release 44d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/e5d52036969caa92c68d062be6cee573b7a7e0f0f6c72582ea0dd10b48e342b3?d=identicon)[hawkiq](/maintainers/hawkiq) --- Top Contributors [![hawkiq](https://avatars.githubusercontent.com/u/7524502?v=4)](https://github.com/hawkiq "hawkiq (23 commits)") ### Embed Badge ![Health badge](/badges/hawkiq-hwkui/health.svg) ``` [![Health](https://phpackages.com/badges/hawkiq-hwkui/health.svg)](https://phpackages.com/packages/hawkiq-hwkui) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)