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:

Components

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

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

Install Options

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.