Installation

Everything you need to start using ozi-ui in your project.

Requirements

Requirement	Minimum version
Modern browser	Support for `fetch`, `WeakMap` and `AbortController`
JS dependencies	None — ozi-ui v2 is pure JavaScript

For more details on framework and UI compatibility → see Compatibility

Method 1 — Composer + Laravel

Recommended installation for Laravel projects. Assets published automatically.

1. Install the package

composer require ozi-ui/core:^2.0

2. Publish the assets

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

3. Configure the layout

Add to your main layout — e.g. layouts/app.blade.php:

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

No jQuery <script> is required. In v2 ozi-ui neither loads nor needs jQuery.

4. Verify the installation

php artisan ozi:check

Expected output:

✔ ozi-ui  v2.0.0  OK

Tip: start with ozi-loaddata for form submission or ozi-select for advanced fields.

Method 2 — CDN

No installation required — ideal for prototypes, simple projects or any stack.

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

Method 3 — Manual

Full control — no Composer, no directives, just files copied to the project.

Download: access GitHub

Folder structure

After downloading, copy the folder to public/plugins/:

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

Basic HTML

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

Optional configuration

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

Without configuration, ozi-ui loads all plugins with the default theme and en language.

Themes — linking the CSS

@oziStyles emits the component CSS, not the theme CSS. If you use bootstrap5, tailwind or a custom theme, link the theme files manually in the <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>

The default theme is the source of fallback values — load it before your chosen theme. The same JS build serves any theme: oziConf({ theme }) only swaps the class map.

Via Blade directives (Laravel)

{{-- Everything --}}
@oziStyles
@oziScripts

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

Generated HTML

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

The ?v= matches the installed package version — automatic cache-busting on every release.