Weave Code
Laravel Headless Ui Laravel Package
schaefersoft/laravel-headless-ui
Unstyled, accessible Laravel Blade UI components for building data-driven interfaces with traditional Blade. No extra JavaScript dependencies, performance-focused and easy to customize with your own CSS or utility classes. Requires PHP 8.2+ and Laravel 10–13.
Laravel HeadlessUI is a collection of completely unstyled, accessible Blade UI components for building data-driven interfaces with traditional Blade. Designed for performance, customization, and accessibility, it requires no additional JavaScript dependencies and works with PHP 8.2+ and Laravel 10–13.
Install via Composer, then import the package's CSS and JS assets—pre-built JS for zero tooling, or TypeScript source if you already have a build pipeline.
- Unstyled Blade components using the
x-hui::prefix, ready for your own CSS or utility classes - Accessible by default, with keyboard and ARIA behavior handled for you
- Zero JS dependencies; auto-discovered service provider, no manual registration
- TailwindCSS-friendly CSS, optionally imported into
layer(base) - Flexible asset options: pre-built JS or TypeScript source
Frequently asked questions about Laravel Headless Ui
- How do I install schaefersoft/laravel-headless-ui in a Laravel application?
- Install it with Composer using composer require schaefersoft/laravel-headless-ui. The package auto-discovers its service provider, so no manual registration is needed. After installation, import the package CSS and JavaScript assets into your application.
- Which Laravel and PHP versions does laravel-headless-ui support?
- The package requires PHP 8.2 or newer and supports Laravel 10, 11, 12, and 13. That makes it suitable for most modern Laravel applications, but older PHP or Laravel versions are not supported.
- Does laravel-headless-ui require Alpine.js, Livewire, or another JavaScript framework?
- No, it does not require Alpine.js, Livewire, React, or Vue. The components use native browser APIs and ship without external JavaScript dependencies. You still need to import the package's CSS and JavaScript assets through your build pipeline or a module script tag.
- How do I style the unstyled Blade components from laravel-headless-ui?
- Every component is completely unstyled, so you apply your own CSS classes or utility classes such as Tailwind. The package exposes data attributes like data-active and data-disabled as styling hooks. If you use Tailwind, import the package CSS with layer(base) for clean integration.
- Which UI components are included in laravel-headless-ui?
- The package provides accessible Blade components including dropdowns, dialogs, tabs, tooltips, and a range slider, with additional components available. They use the x-hui:: Blade prefix and can be adopted incrementally in existing views.
- Is laravel-headless-ui accessible and keyboard navigable?
- Yes, the components are built with accessibility in mind using ARIA attributes, semantic HTML, and keyboard navigation. This helps reduce compliance gaps in admin dashboards, portals, and other user-facing Laravel applications. You should still test your final UI with your own accessibility checks.
- How do I add the CSS and JS assets with Vite or Tailwind?
- Import the package CSS from vendor/schaefersoft/laravel-headless-ui/resources/css/hui.css in your stylesheet. For Tailwind projects, append layer(base) to that import. For JavaScript, import the pre-built dist/js/hui.js file or the TypeScript source if your project already has a TS build pipeline.
- Can I use laravel-headless-ui with Livewire or Inertia and dynamically loaded content?
- The package is Blade-centric and works best with server-rendered markup. For content that changes after page load in Livewire or Inertia applications, you may need additional client-side hydration or reactivity handling. Test dynamic states carefully before relying on these components for highly interactive UIs.
- How can I test accessibility and keyboard behavior for these Blade components?
- Use automated tools such as axe or Pa11y alongside manual keyboard testing for focus order, tab behavior, and dialog trapping. The components include ARIA attributes and semantic HTML, but automated checks should be combined with real browser testing. Include these checks in your Laravel test and QA workflow.
- Is laravel-headless-ui production-ready, and what alternatives should I consider?
- It is MIT licensed and actively maintained with recent releases, but current adoption is low, so evaluate long-term support risk for critical projects. Alternatives include building custom Blade components with Alpine.js or Livewire, or using framework-specific Headless UI libraries, though those typically add JavaScript dependencies.
Weaver
How can I help you explore Laravel packages today?