PHPackages                             codeartlv/klementine-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. codeartlv/klementine-ui

ActiveLibrary[Utility & Helpers](/categories/utility)

codeartlv/klementine-ui
=======================

A collection of UI components for Laravel applications.

0.2.0(1mo ago)019↓45%MITJavaScript

Since Jun 15Pushed 1w agoCompare

[ Source](https://github.com/codeartlv/klementine-ui)[ Packagist](https://packagist.org/packages/codeartlv/klementine-ui)[ RSS](/packages/codeartlv-klementine-ui/feed)WikiDiscussions main Synced 2w ago

READMEChangelogDependenciesVersions (8)Used By (0)

Klementine UI
=============

[](#klementine-ui)

Laravel Blade component library built on [Web Awesome](https://webawesome.com/) and Alpine.js. Provides form controls, overlays, file uploads, and a shared design token layer for Laravel applications.

Requirements
------------

[](#requirements)

- PHP 8.3+
- Laravel 13+
- Node.js 20+ with npm
- Vite (via `laravel-vite-plugin`)

Installation
------------

[](#installation)

### 1. Composer

[](#1-composer)

Add the package to your Laravel project. For local development, use a path repository:

```
composer require codeartlv/klementine-ui
```

The service provider is auto-discovered via Laravel package discovery.

### 2. Publish configuration (optional)

[](#2-publish-configuration-optional)

```
php artisan vendor:publish --tag=klementine-config
```

This creates `config/klementine.php`:

```
return [
    'component_prefix' => 'ui', // Blade tags become , , etc.
];
```

If the config file is not published, the prefix defaults to `ui`.

### 3. Frontend dependencies

[](#3-frontend-dependencies)

After `composer require`, install the package's npm dependencies:

```
php artisan klementine-ui:install
```

This runs `npm install` in the package directory (works for path repos and `vendor/codeartlv/klementine-ui`). Node.js must be available on the machine.

### 4. Automate with Composer (optional)

[](#4-automate-with-composer-optional)

The install command does not run automatically when the package is required. To run it after every `composer install` or `composer update`, add hooks to your **application's** root `composer.json`:

```
{
	"scripts": {
		"post-install-cmd": ["@php artisan klementine-ui:install --ansi"],
		"post-update-cmd": ["@php artisan klementine-ui:install --ansi"]
	}
}
```

If you already have `post-install-cmd` or `post-update-cmd` entries, append the artisan line to those arrays instead of replacing them:

```
{
	"scripts": {
		"post-update-cmd": [
			"@php artisan vendor:publish --tag=laravel-assets --ansi --force",
			"@php artisan klementine-ui:install --ansi"
		]
	}
}
```

You can also call it from a custom setup script:

```
{
	"scripts": {
		"setup": [
			"composer install",
			"@php artisan klementine-ui:install --ansi",
			"npm install --ignore-scripts",
			"npm run build"
		]
	}
}
```

HookRuns when`post-install-cmd``composer install``post-update-cmd``composer update`, `composer require`, `composer remove`### 5. Vite alias

[](#5-vite-alias)

Add a path alias in `vite.config.mjs` so imports resolve to the package resources:

```
import path from 'path';

export default defineConfig({
	resolve: {
		alias: {
			'@klementine-ui': path.resolve('vendor/codeartlv/klementine-ui/resources'),
		},
	},
});
```

### 6. Application entry point

[](#6-application-entry-point)

Create or update `resources/js/app.js`:

```
import KlementineUI from '@klementine-ui/js';

KlementineUI.configureAlpine((Alpine) => {
	// Register custom Alpine components (optional)
}).configureWebAwesome((registerIconLibrary) => {
	// Configure Web Awesome settings (optional)
});

KlementineUI.start();
```

Include Vite assets in your layout:

```
@vite(['resources/js/app.js', 'resources/css/app.css'])
```

Add a CSRF meta tag for AJAX forms and overlays:

```

```

### 7. Styles

[](#7-styles)

Import Klementine styles in your app CSS (the preview app uses the parent `resources/css/app.css` which should import or mirror the package layer structure). The package stylesheet entry is:

```
@import '@klementine-ui/css/app.css';
```

It layers Web Awesome, design tokens (`variables.css`), form styles, and per-component CSS.

### 8. Web Awesome assets

[](#8-web-awesome-assets)

Web Awesome static assets must be available at `/build/webawesome` in production. Configure the base path in `KlementineUI.setupWebAwesome()` (handled automatically when using the package entry point).

Preview
-------

[](#preview)

When running locally, open the component preview at:

```
http://localhost/klementine-ui

```

(Requires the package dev routes — registered on the `localhost` domain.)

Each component demo lives in `resources/views/preview/components/`.

Architecture
------------

[](#architecture)

LayerLocationPurposeBlade components`src/View/Components/`Server-rendered UI tagsBlade views`resources/views/`Component markupAlpine components`resources/js/alpine-components/`Auto-registered as `Alpine.data()`UI factories`resources/js/ui-components/`Programmatic DOM buildersOverlay loader`resources/js/lib/overlay-loader.js`Shared dialog/drawer AJAX logicAlpine components are registered automatically from filenames:

FileAlpine nameUsage`dialog.js``dialog``x-data="dialog(url, caption, id)"``drawer.js``drawer``x-data="drawer(url, caption, id)"``form.js``form``x-data="form"` on ```fileUploader.js``fileUploader`Used by ```passwordField.js``passwordField`Used by ```datepicker.js``datepicker`Used by ``---

Components
----------

[](#components)

All examples use the default `ui` prefix: ``. Replace `ui` if you changed `component_prefix` in config.

### Avatar

[](#avatar)

```

```

Additional Web Awesome attributes (`shape`, `size`, etc.) can be passed through `{{ $attributes }}`.

### Badge

[](#badge)

```

```

Prop / attributeDescription`label`Badge text`variant``primary`, `success`, `neutral`, `warning`, `danger``appearance``filled`, `outlined`, `filled-outlined``pill`Rounded pill shape`attention`e.g. `pulse` for animation### Button

[](#button)

```

```

PropDescription`label`Button text`type``button`, `submit`, `reset``span`Full-width block buttonPass Web Awesome attributes (`variant`, `appearance`, `size`, `disabled`, `loading`) as HTML attributes.

### Callout

[](#callout)

```

```

PropDescription`title`Optional heading`message`Body text (supports HTML)`variant``brand`, `success`, `warning`, `neutral`, `danger``size``xs`, `s`, `m`, `l`, `xl`### Checkbox

[](#checkbox)

```

```

### Radio

[](#radio)

```

```

### Input

[](#input)

```

```

PropDescription`name`Field name`label`Label text`type`Input type (default `text`)`value`Initial value`hint`Helper text below the field`required`Shows required indicator on label### Textarea

[](#textarea)

```

```

### Select

[](#select)

```
@php
use Codeart\Klementine\View\Components\Select\Option;
use Codeart\Klementine\View\Components\Select\Group;

$options = [
    new Option('1', 'Option 1'),
    new Option('2', 'Option 2', selected: true),
];
@endphp

```

Options can also be `Group` instances for grouped `` lists.

### Datepicker

[](#datepicker)

```

```

Uses [Vanilla Calendar Pro](https://vanilla-calendar.pro/) with an Alpine `datepicker` component.

### Password

[](#password)

```

```

Policy is a comma-separated rule string consumed by the `passwordField` Alpine component (live strength meter and rule checklist).

### Form

[](#form)

Wrap fields in a form that submits via AJAX and displays validation errors inline.

```

```

**Server response** — return JSON using `FormResponse`:

```
use Codeart\Klementine\View\Components\Forms\FormError;
use Codeart\Klementine\View\Components\Forms\FormResponse;
use Codeart\Klementine\View\Components\Forms\FormSuccess;

$response = new FormResponse();
$response->addError(new FormError('Name is required', 'name'));
return response()->json($response);

// Or on success:
$response = new FormResponse();
$response->setSuccess(new FormSuccess('Saved successfully'));
$response->addSuccessAction('redirect', '/dashboard');
return response()->json($response);
```

### Dialog

[](#dialog)

**Declarative (Blade):**

```

    Are you sure?

Open
```

**Alpine (load content on click):**

```

    Edit

```

**JavaScript:**

```
import Dialog from '@klementine-ui/js/ui-components/dialog.js';

const dialog = new Dialog({ id: 'edit-item', caption: 'Edit item' });

// Load HTML from URL
await dialog.open('/items/1/edit');

// Or wrap an existing element
await dialog.open(document.getElementById('my-panel'));

// Options
await dialog.open('/items/1/edit', { autoclose: true, animations: false });

dialog.on('close', () => {
	/* … */
});
dialog.close();
```

Constructor paramDescription`id`CSS class suffix (`dialog--{id}`)`caption`Dialog title (maps to `label` on ``)`open()` optionDescription`autoclose`Enables `light-dismiss` on overlay click`animations`Set `false` to disable show/hide animation### Drawer

[](#drawer)

Same API as dialog, backed by ``:

```
Open menu
```

```
import Drawer from '@klementine-ui/js/ui-components/drawer.js';

const drawer = new Drawer({ id: 'menu', caption: 'Menu' });
await drawer.open('/navigation', { placement: 'start', autoclose: true });
```

Close buttons inside a drawer use `data-drawer="close"`.

### Uploader

[](#uploader)

```

```

AttributeDescription`data-uploadroute`POST endpoint for file chunks`data-deleteroute`DELETE endpoint for removing files`data-croproute`Optional crop endpoint`data-limit`Max number of files (default `1`)`data-submitbtn`Selector for submit button to disable during uploadTranslations for placeholders and error messages come from `lang/{locale}/components.php` under the `klementine-ui` namespace.

### Icon

[](#icon)

```

```

### Form group

[](#form-group)

Layout wrapper for stacking form fields:

```

```

---

JavaScript API
--------------

[](#javascript-api)

### KlementineUI

[](#klementineui)

```
import KlementineUI from '@klementine-ui/js';

KlementineUI.configureAlpine((Alpine) => {
	Alpine.data('myComponent', () => ({
		/* … */
	}));
})
	.configureWebAwesome((registerIconLibrary) => {
		// Register custom icon libraries
	})
	.start();
```

`start()` loads all Alpine components from `alpine-components/` and calls `Alpine.start()`.

### UI component factories

[](#ui-component-factories)

For dynamic DOM (used internally by forms and overlays):

```
import button from '@klementine-ui/js/ui-components/button.js';
import callout from '@klementine-ui/js/ui-components/callout.js';
import spinner from '@klementine-ui/js/ui-components/spinner.js';

document.body.appendChild(callout({ variant: 'danger', message: 'Error' }));
```

---

Translations
------------

[](#translations)

Publish or extend translation files at `lang/{locale}/components.php`:

```
return [
    'uploader' => [
        'upload_placeholder' => 'Upload files',
        'upload_max_filesize' => 'File exceeds the maximum size (:max MB)',
    ],
    'password_field' => [
        'password_hint' => [
            'lowercase' => 'Lowercase letter',
            // …
        ],
    ],
];
```

Loaded under the `klementine-ui::components.*` namespace.

---

Development
-----------

[](#development)

```
# In the package directory
npm run dev

# In the Laravel app
npm run dev
php artisan serve
```

Visit `http://localhost/klementine-ui` for the live component preview.

###  Health Score

35

—

LowBetter than 77% of packages

Maintenance95

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity28

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

6

Last Release

42d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/bc705ca342e8ab717cd8863291b92edd8ce17d9c6e6ccfd66ad4ef8992560058?d=identicon)[codeartlv](/maintainers/codeartlv)

---

Top Contributors

[![webmasterlv](https://avatars.githubusercontent.com/u/2886170?v=4)](https://github.com/webmasterlv "webmasterlv (12 commits)")

### Embed Badge

![Health badge](/badges/codeartlv-klementine-ui/health.svg)

```
[![Health](https://phpackages.com/badges/codeartlv-klementine-ui/health.svg)](https://phpackages.com/packages/codeartlv-klementine-ui)
```

###  Alternatives

[alexcrawford/lexorank-php

PHP Implementation of JIRA's LexoRank algorithm.

2987.2k2](/packages/alexcrawford-lexorank-php)[gonetone/laravel-boost-windsurf-extension

Laravel Boost extension package that provides Windsurf editor and Windsurf JetBrains plugin integration.

2513.6k](/packages/gonetone-laravel-boost-windsurf-extension)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)