README

Ui

Knppy UI is a robust Shadcn/ui port for Laravel applications.

Installation

You can install the package via Composer:

composer require knppy/ui

You may publish all of the package's resources at once:

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

Or, you may publish each resource individually:

Publishing the Configuration File

php artisan vendor:publish --tag="ui-config"

Usage

Install the Tailwind CSS entry point and choose a base color:

php artisan ui:install

Compile that CSS with your application's Vite build, then load Knppy UI's bundled Alpine runtime before the closing body tag:

@uiScripts
</body>

The directive includes and starts Alpine together with Knppy UI's required plugins. Do not load a second Alpine instance. Pass a CSP nonce when required with @uiScripts(['nonce' => $nonce]).

Components are available as anonymous Blade components under the ui namespace.

Livewire

Livewire is entirely optional. @uiScripts detects Livewire at runtime: if Livewire is present it lets Livewire's own bundled Alpine instance start, and registers Knppy UI's plugins, stores, and directives on that instance instead of starting a second one. If Livewire isn't installed, @uiScripts bundles and starts Alpine itself. Either way you only ever get a single Alpine instance, so @livewireScripts and @uiScripts can be loaded together in any order.

Interactive components (checkbox, switch, select, dialog, and similar) expose their state through Alpine's x-modelable, so wire:model binds to them the same way x-model does:

<x-ui.checkbox wire:model="terms" />

Components are also safe to optimize with Livewire Blaze if your application enables folding for them via Blaze::optimize()->in(...).

If your application manually bundles Alpine into its own Vite build instead of using @livewireScripts, don't load @uiScripts at all. Import registerUI from vendor/knppy/ui/resources/js/ui.js and register it on Livewire's Alpine export yourself:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import { registerUI } from '../../vendor/knppy/ui/resources/js/ui.js';

registerUI(Alpine, { darkMode: 'light' });

Livewire.start();

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Thank you for considering contributing to Ui! Please review our contributing guide to get started.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Michael Beers
• All Contributors

License

Ui is open-sourced software licensed under the MIT license.