Installation
Install and configure the Unified UI Laravel component library in your Laravel project.
Requirements
| Dependency | Minimum Version | Notes |
|---|---|---|
| PHP | 8.2+ | Required for modern language features |
| Laravel | 11.0+ | Required framework version |
| Node.js | 20.0+ | Required for front-end asset compilation |
| Tailwind CSS | 4.0+ | Required for utility classes |
Installation
Install the Composer package
composer require work-rjkashyap/unified-ui-laravelPublish the configuration
Publish the package configuration file to customize component defaults:
php artisan vendor:publish --tag=unified-ui-configThis creates a config/unified-ui.php file where you can set global defaults for component variants, sizes, and behavior.
return [
'prefix' => 'ui',
'theme' => 'default',
'default_variant' => 'primary',
'default_size' => 'md',
];Publish the assets (CSS)
php artisan vendor:publish --tag=unified-ui-assetsThen import the stylesheet in your main CSS file:
@import "tailwindcss";
@import "../../vendor/work-rjkashyap/unified-ui-laravel/resources/css/unified-ui.css";Configure Tailwind CSS
Make sure Tailwind scans the package's Blade views for classes. Add the package path to your tailwind.config.js or Vite config:
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
tailwindcss(),
],
});Start using components
Components are available as Blade components with the ui prefix (configurable):
<x-ui-button variant="primary" size="md">
Get Started
</x-ui-button>
<x-ui-card>
<x-ui-card-header>
<x-ui-heading level="3">Welcome</x-ui-heading>
</x-ui-card-header>
<x-ui-card-body>
<p>Start building with Unified UI for Laravel.</p>
</x-ui-card-body>
</x-ui-card>Alpine.js Integration
Some interactive components (dropdowns, modals, tabs, etc.) require Alpine.js. Install it if you haven't already:
npm install alpinejsimport Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();Static components like Button, Badge, Card, and Avatar work without Alpine.js. Only interactive components that manage open/close state require it.
Publishing Views
To customize component templates, publish the Blade views:
php artisan vendor:publish --tag=unified-ui-viewsThis copies all component views to resources/views/vendor/unified-ui/, where you can modify them freely.
After publishing views, you own the templates. Future package updates will
not overwrite your customizations. Use php artisan vendor:publish --tag=unified-ui-views --force
to reset to the latest version.
Livewire Support
Unified UI components are fully compatible with Livewire. Use them inside Livewire components just like regular Blade components:
<div>
<x-ui-heading level="2">Count: {{ $count }}</x-ui-heading>
<x-ui-button wire:click="increment" variant="primary">
Increment
</x-ui-button>
</div>Verifying Installation
Run the following Artisan command to verify everything is set up correctly:
php artisan unified-ui:checkThis checks for:
- ✅ Package configuration published
- ✅ CSS assets available
- ✅ Tailwind CSS configured
- ✅ Alpine.js detected (optional)
- ✅ Component prefix registered