K
KoreUI

Instalación

Guía paso a paso para instalar KoreUI en tu proyecto Laravel.

Requisitos

PHP
8.2+
Laravel
12.x
Livewire
4.x
Tailwind
v4

Instalación

Instala el paquete vía Composer.

Terminal 
composer require kore-ui/kore-ui
composer require kore-ui/kore-ui

Publicar assets

Publica el archivo de configuración.

Terminal 
php artisan vendor:publish --tag=kore-ui-config
php artisan vendor:publish --tag=kore-ui-config

Esto creará config/kore-ui.php con todos los defaults configurables.

Configurar Vite

Agrega los watchers de kore-ui en tu vite.config.js para hot-reload.

vite.config.js 
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: [
                'resources/views/**',
                'vendor/kore-ui/**',
            ],
        }),
        tailwindcss(),
    ],
});
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: [
                'resources/views/**',
                'vendor/kore-ui/**',
            ],
        }),
        tailwindcss(),
    ],
});

Importar CSS

Importa el theme de KoreUI y registra los sources de Tailwind.

resources/css/app.css 
@import 'tailwindcss';
@import '../../vendor/kore-ui/kore-ui/resources/css/kore-theme.css';

@source '../../vendor/kore-ui/kore-ui/resources/**/*.blade.php';
@source '../../vendor/kore-ui/kore-ui/src/**/*.php';
@import 'tailwindcss';
@import '../../vendor/kore-ui/kore-ui/resources/css/kore-theme.css';

@source '../../vendor/kore-ui/kore-ui/resources/**/*.blade.php';
@source '../../vendor/kore-ui/kore-ui/src/**/*.php';

Importar JS

Importa los plugins Alpine.js de KoreUI.

resources/js/app.js 
import './bootstrap';
import '../../vendor/kore-ui/kore-ui/resources/js';
import './bootstrap';
import '../../vendor/kore-ui/kore-ui/resources/js';

Layout base

Agrega los managers de overlay y feedback en tu layout principal.

resources/views/layouts/app.blade.php 
<!DOCTYPE html>
<html lang="es" x-data>
<head>
    @koreThemeScript
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="bg-kore-bg text-kore-fg antialiased">

    {{ $slot }}

    <livewire:kore-overlay-manager />
    <livewire:kore-feedback-manager />
    @livewireScripts
</body>
</html>
<!DOCTYPE html>
<html lang="es" x-data>
<head>
    @koreThemeScript
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="bg-kore-bg text-kore-fg antialiased">

    {{ $slot }}

    <livewire:kore-overlay-manager />
    <livewire:kore-feedback-manager />
    @livewireScripts
</body>
</html>

Nota: @koreThemeScript previene el flash de tema incorrecto (FOIT) aplicando el tema antes del render.