Laravel Ui Kit

A multi-framework UI component library for Laravel. Provides 25+ reusable components with support for Tailwind CSS, Bootstrap 5, and Bootstrap 4, plus Blade, Livewire, Vue, React, and Svelte frontends.

Download

25+ adaptive UI components that render natively in Tailwind, Bootstrap 5,
and Bootstrap 4 with Blade, Livewire, Vue, React, and Svelte support.

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	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Bootstrap 5	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Bootstrap 4	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:

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.

Top categories