PHPackages ironflow/halo-ui - 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. [Templating & Views](/categories/templating) 4. / 5. ironflow/halo-ui ActiveLibrary[Templating & Views](/categories/templating) ironflow/halo-ui ================ Modern, composable Blade UI component library for Laravel 12+ powered by TailwindCSS, Alpine.js, and Blade Icons v3.0.0(6mo ago)3141MITBladePHP ^8.2CI passing Since Oct 18Pushed 6mo agoCompare [ Source](https://github.com/AureDulvresse/halo-ui)[ Packagist](https://packagist.org/packages/ironflow/halo-ui)[ RSS](/packages/ironflow-halo-ui/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (8)Versions (12)Used By (1) HaloUI ====== [](#haloui) [ ![Latest Version](https://camo.githubusercontent.com/d04fa6c1919be734efea3e348f5d0d16b583aeef136ef3a1e5a8d17e868184ed/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f69726f6e666c6f772f68616c6f2d7569) ](https://packagist.org/packages/ironflow/ironflow) [ ![Total Downloads](https://camo.githubusercontent.com/24dc1d017f90db123a7bafa2913c0254c41b5bb5ea0a006d6a0a2e51403cc2e0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f69726f6e666c6f772f68616c6f2d7569) ](https://packagist.org/packages/ironflow/halo-ui) [ ![License](https://camo.githubusercontent.com/76f5374e5252aaf3d1d1a7f84a1941335e404fdd3f34175e2afc30863e8aaaf0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f69726f6e666c6f772f68616c6f2d7569) ](https://packagist.org/packages/ironflow/halo-ui) [ ![GitHub issues](https://camo.githubusercontent.com/4be938bf4124d812945604cc7bbcd26d5688dec925f49a18f9ec6dbc00830461/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f4175726544756c7672657373652f68616c6f2d7569) ](https://github.com/AureDulvresse/halo-ui/issues) **Modern, Beautiful UI Components for Laravel** Built with Blade, TailwindCSS 3+, and Alpine.js 3+ [Installation](#installation) โ€ข [Features](#features) โ€ข [Components](#components) โ€ข [Documentation](#documentation) โ€ข [Examples](#examples) --- What's New in v2.1 ------------------ [](#whats-new-in-v21) **Modern Design System** - Gradient buttons, glassmorphism effects, smooth animations **Enhanced Icon Integration** - Full Blade UI Kit support with intelligent fallbacks **Alpine Stores** - Global state management for modals, toasts, and themes **49 Components** - Complete library with advanced form components **Performance Optimized** - Lazy loading, caching, and minification support **Dark Mode Ready** - Built-in theme switching with persistence **IronFlow Form Builder** - Integrated form builder package (coming soon) Features -------- [](#features) ### Modern Design Language [](#modern-design-language) - **Gradient-based variants** with glow effects - **Glassmorphism** support for modern UIs - **Smooth animations** with customizable timing - **Responsive** mobile-first design - **Accessible** ARIA-compliant components ### Developer Experience [](#developer-experience) - **Copy-and-own** philosophy - full component customization - **Interactive CLI** installer with dependency resolution - **TypeScript-ready** with full type definitions - **Hot reload** support for development - **Comprehensive testing** with PHPUnit/Pest - **Theme System** - CSS variables for dynamic theming - Gradient & Glass morphism effects - Dark mode with system detection - Component-level theme overrides ### Performance [](#performance) - **Lazy loading** for heavy components - **Minimal JavaScript** footprint with Alpine.js - **Optimized rendering** with Blade caching - **Production builds** with minification Installation ------------ [](#installation) ### Requirements [](#requirements) - PHP 8.2+ - Laravel 11+ or 12+ - TailwindCSS 3.0+ - Alpine.js 3.0+ - Blade UI Kit (optional, recommended) ### Quick Install [](#quick-install) ``` # 1. Install HaloUI composer require halo/ui # 2. Install Alpine.js & dependencies npm install alpinejs # 3. Install Blade UI Kit (recommended for icons) composer require blade-ui-kit/blade-heroicons # 4. Install components php artisan halo:install --all # 5. Configure Tailwind # Add to tailwind.config.js content array: './resources/views/components/halo/**/*.blade.php', ``` ### Configuration [](#configuration) ``` # Publish configuration php artisan vendor:publish --tag=halo-config # Publish assets php artisan vendor:publish --tag=halo-assets # Publish templates (optional) php artisan vendor:publish --tag=halo-templates ``` ### Setup Alpine.js [](#setup-alpinejs) ``` // resources/js/app.js import Alpine from "alpinejs"; // Import HaloUI import "../../../vendor/halo/ui/resources/js/halo.js"; window.Alpine = Alpine; Alpine.start(); ``` ### Include in Layout [](#include-in-layout) ``` @vite(['resources/css/app.css', 'resources/js/app.js']) {{ $slot }} {{-- Toast Container --}} ``` Components (49 Total) --------------------- [](#components-49-total) ### Form Components (8) [](#form-components-8) - **Button** - Gradient variants with glow effects - **Input** - Enhanced with icons and clearable option - **Textarea** - Auto-resize with character counter - **Select** - Custom styled dropdown - **Checkbox** - Modern toggle design - **Radio** - Styled radio buttons - **Toggle** - iOS-style toggle - **Rating** - Interactive star ratings ### Advanced Form Components (6) [](#advanced-form-components-6) - **FileUpload** - Drag & drop with preview - **DatePicker** - Calendar date selection - **TimePicker** - Time selection (12h/24h) - **RichText** - WYSIWYG editor - **ColorPicker** - Color selection - **SliderRange** - Range slider input ### Layout Components (7) [](#layout-components-7) - **Card** - Elevated, flat, bordered, glass variants - **Modal** - Animated dialogs with Alpine store - **Navbar** - Responsive navigation - **Sidebar** - Collapsible side navigation - **Breadcrumb** - Navigation trail - **Accordion** - Collapsible sections - **BottomSheet** - Mobile bottom drawer ### Feedback Components (8) [](#feedback-components-8) - **Alert** - Contextual messages - **Toast** - Gradient toasts with progress bar - **Badge** - Status indicators - **Spinner** - Loading indicators - **Progress** - Progress bars with animations - **Skeleton** - Loading placeholders - **EmptyState** - No data displays - **Notification** - Persistent notifications ### Navigation (5) & Data Display (11) [](#navigation-5--data-display-11) - Dropdown, Tab, Pagination, Timeline, Stepper - Table, Tooltip, Avatar, AvatarGroup, Divider - Stats, Chip, Kbd, Code, Popover, Icon ### Advanced Components (9) [](#advanced-components-9) - ContextMenu, CommandPalette, Carousel, Calendar - ImageCropper, TreeView, Kanban (Board/Column/Card) Usage Examples -------------- [](#usage-examples) ### Modern Button with Icon [](#modern-button-with-icon) ``` Add New Item Glassmorphism Processing... ``` ### Modal with Alpine Store [](#modal-with-alpine-store) ``` {{-- Trigger --}} Open Modal {{-- Modal --}} Create New User Cancel Create ``` ### Toast Notifications [](#toast-notifications) ``` {{-- In Blade --}} Show Toast {{-- In Controller --}} return redirect()->back()->with('toast', [ 'type' => 'success', 'title' => 'Saved!', 'message' => 'Changes have been saved successfully.' ]); {{-- In JavaScript --}} HaloUI.toast.error('Error!', 'Something went wrong'); HaloUI.toast.warning('Warning!', 'Please review your input'); HaloUI.toast.info('Info', 'New features available'); ``` ### Modern Card Design [](#modern-card-design) ``` Premium Feature Glassmorphism card with interactive hover effect Upgrade Now ``` ๐ŸŽฏ JavaScript API ---------------- [](#-javascript-api) ``` // Modal API HaloUI.modal.open("modal-name"); HaloUI.modal.close("modal-name"); HaloUI.modal.closeAll(); // Toast API HaloUI.toast.success("Title", "Message"); HaloUI.toast.error("Title", "Message"); HaloUI.toast.warning("Title", "Message"); HaloUI.toast.info("Title", "Message"); // Theme API HaloUI.theme.toggle(); HaloUI.theme.set("dark"); const mode = HaloUI.theme.get(); // Utilities HaloUI.utils.debounce(func, 300); HaloUI.utils.throttle(func, 100); HaloUI.utils.copyToClipboard(text); ``` ๐ŸŽจ Theming & Customization ----------------------------- [](#-theming--customization) ### Design Styles [](#design-styles) ``` // config/halo.php 'design' => [ 'style' => 'modern', // modern, minimal, brutalist, glassmorphism ] ``` ### Custom Colors [](#custom-colors) ``` 'colors' => [ 'primary' => [ 500 => '#your-color', 600 => '#your-hover-color', ], ] ``` ### Component Overrides [](#component-overrides) After installation, all components are in `resources/views/components/halo/` - modify freely! ๐Ÿงช Testing --------- [](#-testing) ``` # Run tests composer test # Run with coverage composer test-coverage # Run specific test php artisan test tests/Feature/ComponentRenderTest.php ``` Contributing ------------ [](#contributing) Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) Changelog --------- [](#changelog) See [CHANGELOG.md](CHANGELOG.md) for version history License ------- [](#license) MIT License - see [LICENSE.md](LICENSE.md) Credits ------- [](#credits) - Built with [Laravel](https://laravel.com/) - Styled with [TailwindCSS](https://tailwindcss.com/) - Powered by [Alpine.js](https://alpinejs.dev/) - Icons from [Blade UI Kit](https://blade-ui-kit.com/) - Inspired by [shadcn/ui](https://shadcn.com/) **HaloUI - Build with โค๏ธ by Aure Dulvresse** ### Health Score 37 โ€” LowBetter than 83% of packages Maintenance68 Regular maintenance activity Popularity9 Limited adoption so far Community8 Small or concentrated contributor base Maturity54 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 ~1 days Total 10 Last Release 191d ago Major Versions v1.2.0 โ†’ v2.0.02025-10-23 v2.3.1 โ†’ v3.0.02025-11-02 ### Community Maintainers ![](https://www.gravatar.com/avatar/34b2d64120e90ff9a631fe377dd251173cf50f8681674570b30fa0e1d9ed9576?d=identicon)[AureDulvresse](/maintainers/AureDulvresse) --- Top Contributors [![AureDulvresse](https://avatars.githubusercontent.com/u/147180124?v=4)](https://github.com/AureDulvresse "AureDulvresse (82 commits)") --- Tags laraveluicomponentsbladetailwindalpineblade-iconshalo-ui ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/ironflow-halo-ui/health.svg) ``` [![Health](https://phpackages.com/badges/ironflow-halo-ui/health.svg)](https://phpackages.com/packages/ironflow-halo-ui) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k438.5k29](/packages/tightenco-jigsaw)[area17/blast Storybook for Laravel Blade 308664.1k](/packages/area17-blast)[electrik/slate Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project 102.3k1](/packages/electrik-slate)[ddfsn/blade-components Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps. 193.1k](/packages/ddfsn-blade-components) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)