- What is WireKit and how does it fit into a Laravel Livewire project?
- WireKit is an open-source UI component library designed specifically for Laravel Livewire applications. It provides pre-built, themeable components like forms, navigation, overlays, and layouts, all built with Tailwind CSS v4 and Alpine.js. It integrates seamlessly with Livewire’s reactivity model, making it ideal for TALL stack projects where you need a polished frontend without heavy JavaScript frameworks.
- Can I use WireKit in a Laravel project that doesn’t use Livewire?
- WireKit is optimized for Livewire, but you can still use its Alpine.js-powered components for static or non-Livewire parts of your app. However, features like `wire:model` or Livewire-specific interactivity won’t work. For marketing pages or non-interactive sections, WireKit’s Tailwind and Alpine components can still be useful.
- What Laravel and Livewire versions does WireKit support?
- WireKit requires **Laravel 12+**, **Livewire 4+**, **PHP 8.4+**, and **Tailwind CSS v4**. If you’re using older versions, you’ll need to upgrade or consider alternatives like older Tailwind versions or custom components. The package is built for modern Laravel ecosystems.
- How do I install and set up WireKit in my Laravel project?
- Install WireKit via Composer: `composer require pushery/wirekit`. Then, add `@wirekitStyles` in your `<head>` and `@wirekitScripts` before `</body>` in your Blade layout. Finally, configure Blade to resolve WireKit’s component paths by adding `@source` directives in your CSS file. Follow the [official docs](https://docs.wirekit.app) for step-by-step guidance.
- Does WireKit support dark mode, and how do I customize it?
- Yes, WireKit is dark-mode aware by default. Customization is handled via CSS variables (e.g., `--color-wk-*`). Override these in your `tailwind.config.js` or global CSS to match your theme. The library also provides theming tools to ensure consistency across components.
- Are WireKit’s components accessible (a11y-compliant)?
- WireKit components are built with WCAG compliance in mind. The package includes a CLI tool (`wirekit:doctor:a11y`) to audit accessibility issues. However, always test your custom implementations, as accessibility depends on proper usage of ARIA attributes and semantic HTML.
- Will WireKit slow down my Livewire app due to Alpine.js or Tailwind?
- WireKit is designed to be lightweight. Alpine.js adds minimal overhead, and Tailwind’s utility classes are optimized for performance. For high-frequency Livewire updates (e.g., sliders), use `wire:model.debounce` or `wire:model.lazy` to reduce server load. Test performance in your staging environment.
- Can I use WireKit with custom icons or charts?
- WireKit supports multiple icon presets (Heroicons, Lucide, etc.) and integrates with Chart.js (MIT-licensed) by default. For charts, avoid ApexCharts if licensing is a concern, as it requires a commercial license for high-revenue projects. Configure icons/charts via the provided presets in the documentation.
- What browsers does WireKit support, and what if my users need older browsers?
- WireKit follows Tailwind CSS v4’s browser support, targeting modern browsers (Chrome 111+, Safari 16.4+, Firefox 128+). It ships no polyfills or fallbacks for older browsers. If you need broader support, consider adding custom CSS or JavaScript shims, but this may require additional maintenance.
- Are there alternatives to WireKit for Laravel Livewire projects?
- Alternatives include **Livewire UI** (by the Livewire team), **Filament UI**, or **Tailwind UI** (paid). WireKit stands out for its **free, open-source** nature, **TALL stack focus**, and **Alpine.js integration**. If you need more enterprise features, consider paid options, but WireKit is a strong choice for cost-effective, modern UI development.