Instalación

Todo lo que necesitas para empezar a usar ozi-ui en tu proyecto.

Requisitos

Requisito	Versión mínima
Navegador moderno	Soporte para `fetch`, `WeakMap` y `AbortController`
Dependencias JS	Ninguna — ozi-ui v2 es JavaScript puro

Para más detalles de compatibilidad con frameworks y UI → ver Compatibilidad

Método 1 — Composer + Laravel

Instalación recomendada para proyectos Laravel. Assets publicados automáticamente.

1. Instala el paquete

composer require ozi-ui/core:^2.0

2. Publica los assets

php artisan vendor:publish --tag=ozi-ui

3. Configura el layout

Agrega en tu layout principal — ej: layouts/app.blade.php:

<head>
    @oziStyles
    @oziScripts
    <script>oziConf({ theme: 'bootstrap5', lang: 'es' });</script>
</head>
<body>
    {{-- ... --}}
    @livewireScripts
</body>

No hace falta ningún <script> de jQuery. En la v2 ozi-ui no carga ni requiere jQuery.

4. Verifica la instalación

php artisan ozi:check

Salida esperada:

✔ ozi-ui  v2.0.0  OK

Consejo: empieza con ozi-loaddata para el envío de formularios o con ozi-select para campos avanzados.

Método 2 — CDN

Sin instalación — ideal para prototipos, proyectos simples o cualquier stack.

<head>
    <script src="https://cdn.oziui.com/v2.0.0/ozi.js"></script>
</head>

Método 3 — Manual

Control total — sin Composer, sin directivas, solo archivos copiados al proyecto.

Descarga: accede a GitHub

Estructura de carpetas

Tras la descarga, copia la carpeta en public/plugins/:

public/
└── plugins/
    └── ozi-ui/
        ├── ozi.js
        ├── core/
        ├── modules/
        ├── components/
        ├── behaviors/
        ├── integrations/
        └── themes/

HTML básico

<head>
    <script src="/plugins/ozi-ui/ozi.js"></script>
</head>

Configuración opcional

<script>
    oziConf({
        theme:   'bootstrap5',
        lang:    'es',
        plugins: ['loaddata', 'select', 'toggle']
    });
</script>

Sin configuración, ozi-ui carga todos los plugins con el tema default y el idioma en.

Temas — enlazar el CSS

@oziStyles emite el CSS de los componentes, no el del tema. Si usas bootstrap5, tailwind o un tema propio, enlaza los archivos del tema manualmente en el <head>:

<link rel="stylesheet" href="/plugins/ozi-ui/themes/default/tokens.css">
<link rel="stylesheet" href="/plugins/ozi-ui/themes/default/overrides.css">

<link rel="stylesheet" href="/plugins/ozi-ui/themes/tailwind/tokens.css">
<link rel="stylesheet" href="/plugins/ozi-ui/themes/tailwind/overrides.css">
<link rel="stylesheet" href="/plugins/ozi-ui/themes/tailwind/dark.css">

<script>oziConf({ theme: 'tailwind' });</script>

El tema default es la fuente de los valores de fallback — cárgalo antes del tema elegido. El mismo build JS sirve cualquier tema: oziConf({ theme }) solo cambia el mapa de clases.

Vía directivas Blade (Laravel)

{{-- Todo --}}
@oziStyles
@oziScripts

{{-- Solo algunos plugins --}}
@oziStyles(['select', 'editor'])
@oziScripts(['loaddata', 'select', 'editor'])

HTML generado

<!-- @oziStyles(['select', 'editor']) -->
<link rel="stylesheet" href="/plugins/ozi-ui/components/ozi-select/css/ozi-select.css">
<link rel="stylesheet" href="/plugins/ozi-ui/components/ozi-editor/css/ozi-editor.css">

<!-- @oziScripts(['loaddata', 'select', 'editor']) -->
<script src="/plugins/ozi-ui/core/helpers/ozi-helpers.js?v=2.0.0"></script>
<script src="/plugins/ozi-ui/core/ozi-conf.js?v=2.0.0"></script>
<script src="/plugins/ozi-ui/modules/ozi-loaddata/js/ozi-loaddata.js?v=2.0.0"></script>
<script src="/plugins/ozi-ui/components/ozi-select/js/ozi-select.js?v=2.0.0"></script>
<script src="/plugins/ozi-ui/components/ozi-editor/js/ozi-editor.js?v=2.0.0"></script>

El ?v= acompaña la versión instalada del paquete — cache-bust automático en cada release.