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';

Scripts (Alpine.js)

KoreUI sirve sus plugins Alpine.js pre-compilados mediante una directiva Blade — no requiere configuración npm.

La directiva @koreScripts inyecta el bundle de plugins Alpine.js de KoreUI (~108 kB, ~30 kB gzip) directamente desde la ruta /vendor/kore-ui/kore-ui.js servida por Laravel. Alpine.js en sí lo provee Livewire 4 — no hay duplicación.

No necesitas importar nada en app.js ni instalar dependencias npm adicionales para el JS de KoreUI.

Layout base

Agrega los managers y directivas de KoreUI 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 />

    @koreScripts
    @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 />

    @koreScripts
    @livewireScripts
</body>
</html>

Orden importante: @koreScripts debe ir antes de @livewireScripts. Livewire inicializa Alpine.js y dispara el evento alpine:init — los plugins de KoreUI deben estar registrados en ese momento.

Directivas disponibles

KoreUI registra dos directivas Blade relacionadas con assets.

Directiva Dónde va Propósito
@koreThemeScript <head> Script inline (~200B) que aplica el tema antes del primer render, evitando el flash de tema incorrecto.
@koreScripts Antes de @livewireScripts Carga el bundle pre-compilado con todos los plugins Alpine.js de KoreUI.