Search by 
jeremykenedy / laravel-ui-kit
A multi-framework UI component library for Laravel. Supports Tailwind CSS, Bootstrap 5, and Bootstrap 4 with Blade, Vue, React, and Svelte frontends.
Maintainers
v1.1.0
2026-04-02 10:25 UTC
Requires
- php: ^8.2|^8.3
- illuminate/support: ^10.0|^11.0|^12.0|^13.0
- illuminate/view: ^10.0|^11.0|^12.0|^13.0
Requires (Dev)
- laravel/pint: ^1.0
- orchestra/testbench: ^8.0|^9.0|^10.0|^11.0
- pestphp/pest: ^2.0|^3.0|^4.0
- pestphp/pest-plugin-laravel: ^2.0|^3.0|^4.0
This package is auto-updated.
Last update: 2026-04-02 20:02:14 UTC
README
25+ adaptive UI components that render natively in Tailwind, Bootstrap 5,
and Bootstrap 4 with Blade, Livewire, Vue, React, and Svelte support.
Table of Contents
- Framework Support
- Components
- Installation
- Configuration
- Usage
- Changing Frameworks
- Artisan Commands
- Requirements
- Testing
- License
Framework Support
Every component renders identically across all CSS and frontend combinations:
| Blade + Alpine.js | Livewire 3 | Vue 3 | React 18 | Svelte 4 | |
|---|---|---|---|---|---|
| Tailwind v4 | ✅ | ✅ | ✅ | ✅ | ✅ |
| Bootstrap 5 | ✅ | ✅ | ✅ | ✅ | ✅ |
| Bootstrap 4 | ✅ | ✅ | ✅ | ✅ | ✅ |
Components
| Component | Blade | Livewire | Vue | React | Svelte |
|---|---|---|---|---|---|
| Alert | <x-ui::alert> |
<livewire:ui-alert> |
<UiAlert> |
<UiAlert> |
<UiAlert> |
| Avatar | <x-ui::avatar> |
<livewire:ui-avatar> |
- | - | - |
| Badge | <x-ui::badge> |
<livewire:ui-badge> |
<UiBadge> |
<UiBadge> |
<UiBadge> |
| Breadcrumbs | <x-ui::breadcrumbs> |
- | - | - | - |
| Button | <x-ui::button> |
<livewire:ui-button> |
<UiButton> |
<UiButton> |
<UiButton> |
| Card | <x-ui::card> |
<livewire:ui-card> |
<UiCard> |
<UiCard> |
<UiCard> |
| Checkbox | <x-ui::checkbox> |
<livewire:ui-checkbox> |
- | - | - |
| Confirm | <x-ui::confirm> |
<livewire:ui-confirm> |
- | - | - |
| Data Table | <x-ui::data-table> |
<livewire:ui-data-table> |
- | - | - |
| Dropdown | <x-ui::dropdown> |
<livewire:ui-dropdown> |
- | - | - |
| Form Group | <x-ui::form-group> |
<livewire:ui-form-group> |
- | - | - |
| Icon | <x-ui::icon> |
<livewire:ui-icon> |
- | - | - |
| Input | <x-ui::input> |
<livewire:ui-input> |
<UiInput> |
<UiInput> |
<UiInput> |
| Modal | <x-ui::modal> |
<livewire:ui-modal> |
<UiModal> |
<UiModal> |
<UiModal> |
| Nav | <x-ui::nav> |
<livewire:ui-nav> |
- | - | - |
| Pagination | <x-ui::pagination> |
<livewire:ui-pagination> |
- | - | - |
| Password Input | <x-ui::password-input> |
<livewire:ui-password-input> |
- | - | - |
| Search Input | <x-ui::search-input> |
<livewire:ui-search-input> |
- | - | - |
| Select | <x-ui::select> |
<livewire:ui-select> |
- | - | - |
| Stat Card | <x-ui::stat-card> |
<livewire:ui-stat-card> |
- | - | - |
| Status Panel | <x-ui::status-panel> |
<livewire:ui-status-panel> |
- | - | - |
| Tabs | <x-ui::tabs> |
<livewire:ui-tabs> |
- | - | - |
| Textarea | <x-ui::textarea> |
<livewire:ui-textarea> |
- | - | - |
| Theme Toggle | <x-ui::theme-toggle> |
<livewire:ui-theme-toggle> |
- | - | - |
| Toggle | <x-ui::toggle> |
<livewire:ui-toggle> |
<UiToggle> |
<UiToggle> |
<UiToggle> |
Installation
composer require jeremykenedy/laravel-ui-kit php artisan ui-kit:install
Configuration
php artisan vendor:publish --tag=ui-kit-config
UI_KIT_CSS=tailwind # tailwind, bootstrap5, bootstrap4 UI_KIT_FRONTEND=blade # blade, livewire, vue, react, svelte UI_KIT_ICONS=lucide # lucide, fontawesome UI_KIT_DARK_MODE=true
Usage
Blade Components
<x-ui::card title="Dashboard"> <x-ui::stat-card label="Users" value="1,234" icon="users" /> <x-ui::button variant="primary">Save</x-ui::button> <x-ui::alert variant="success" dismissible>Settings saved.</x-ui::alert> </x-ui::card> <x-ui::modal id="confirm-delete" title="Confirm"> <p>Are you sure?</p> </x-ui::modal> <x-ui::input name="email" label="Email" type="email" required /> <x-ui::select name="role" label="Role" :options="$roles" /> <x-ui::toggle name="active" label="Active" />
Livewire Components
<livewire:ui-data-table :rows="$users" :columns="['name', 'email', 'role']" /> <livewire:ui-theme-toggle /> <livewire:ui-confirm />
Vue / React / Svelte
<script setup> import UiButton from '@/ui-kit/vue/UiButton.vue' import UiCard from '@/ui-kit/vue/UiCard.vue' </script> <template> <UiCard title="Profile"> <UiButton variant="primary" @click="save">Save</UiButton> </UiCard> </template>
Changing Frameworks
After installation, use update or switch to change frameworks without losing configuration.
Update (Interactive)
The update command walks through framework selection with an interactive menu:
php artisan ui-kit:update
Or pass options directly:
php artisan ui-kit:update --css=bootstrap5 --frontend=vue
| Option | Values | Description |
|---|---|---|
--css |
tailwind, bootstrap5, bootstrap4 |
Change CSS framework |
--frontend |
blade, livewire, vue, react, svelte |
Change frontend framework |
Switch (Quick)
php artisan ui-kit:switch --css=bootstrap5 php artisan ui-kit:switch --frontend=livewire php artisan ui-kit:switch --css=tailwind --frontend=vue
To switch all packages globally:
php artisan ui:switch --css=bootstrap5 --frontend=vue
After switching, run npm run build.
Artisan Commands
| Command | Description |
|---|---|
ui-kit:install |
Fresh install with interactive prompts. Detects existing installation. |
ui-kit:update |
Update framework selection interactively. Does not overwrite config. |
ui-kit:switch |
Quick framework switch via flags. |
ui:switch |
Switch CSS/frontend globally for all packages. |
Install Options
| Flag | Description |
|---|---|
--css= |
CSS framework: tailwind, bootstrap5, bootstrap4 |
--frontend= |
Frontend: blade, livewire, vue, react, svelte |
--force |
Skip reinstall confirmation when already installed |
Requirements
- PHP 8.2+
- Laravel 12 or 13
- One of: Tailwind v4, Bootstrap 5, Bootstrap 4
- One of: Alpine.js (Blade), Livewire 3, Vue 3, React 18, Svelte 4
Testing
./vendor/bin/pest --ci
License
This package is open-sourced software licensed under the MIT license.