Instalação

Tudo que você precisa para começar a usar o ozi-ui no seu projeto.

Requisitos

Requisito	Versão mínima
Navegador moderno	Suporte a `fetch`, `WeakMap` e `AbortController`
Dependências JS	Nenhuma — o ozi-ui v2 é JavaScript puro

Para mais detalhes de compatibilidade com frameworks e UI → ver Compatibilidade

Método 1 — Composer + Laravel

Instalação recomendada para projetos Laravel. Assets publicados automaticamente.

1. Instale o pacote

composer require ozi-ui/core:^2.0

2. Publique os assets

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

3. Configure o layout

Adicione no seu layout principal — ex: layouts/app.blade.php:

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

Nenhum <script> de jQuery é necessário. Na v2 o ozi-ui não carrega nem exige jQuery.

4. Verifique a instalação

php artisan ozi:check

Saída esperada:

✔ ozi-ui  v2.0.0  OK

Dica: comece pelo ozi-loaddata para envio de formulários ou pelo ozi-select para campos avançados.

Método 2 — CDN

Sem instalação — ideal para protótipos, projetos simples ou qualquer stack.

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

Método 3 — Manual

Controle total — sem Composer, sem diretivas, só arquivos copiados para o projeto.

Faça o download: acesse o GitHub

Estrutura de pastas

Após o download, copie a pasta para 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>

Configuração opcional

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

Sem configuração, o ozi-ui carrega todos os plugins com tema default e idioma en.

Temas — linkar o CSS

O @oziStyles emite o CSS dos componentes, não o do tema. Se você usa bootstrap5, tailwind ou um tema próprio, linke os arquivos do tema manualmente no <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>

O tema default é a fonte dos valores de fallback — carregue-o antes do tema escolhido. O mesmo build JS serve qualquer tema: oziConf({ theme }) troca apenas o mapa de classes.

Via diretivas Blade (Laravel)

{{-- Tudo --}}
@oziStyles
@oziScripts

{{-- Só alguns plugins --}}
@oziStyles(['select', 'editor'])
@oziScripts(['loaddata', 'select', 'editor'])

HTML gerado

<!-- @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>

O ?v= acompanha a versão instalada do pacote — serve de cache-bust automático a cada release.