selli / ui
Selli UI — enterprise Blade & Livewire 4 component library built on the Selli Design System (Electric Violet, dark-first).
Maintainers
Fund package maintenance!
Requires
- php: ^8.3
- illuminate/contracts: ^11.0||^12.0
- spatie/laravel-package-tools: ^1.16
Requires (Dev)
- larastan/larastan: ^3.0
- laravel/pint: ^1.14
- livewire/livewire: ^4.0
- nunomaduro/collision: ^8.8
- orchestra/testbench: ^9.0||^10.0
- pestphp/pest: ^3.0
- pestphp/pest-plugin-arch: ^3.0
- pestphp/pest-plugin-laravel: ^3.0
- phpstan/extension-installer: ^1.4
- phpstan/phpstan-deprecation-rules: ^2.0
- phpstan/phpstan-phpunit: ^2.0
Suggests
- livewire/livewire: Required to use the interactive Livewire-powered components (^4.0).
This package is auto-updated.
Last update: 2026-06-28 06:21:27 UTC
README
Selli UI — Blade & Livewire 4 component library
An enterprise-grade UI component library for Laravel, built on the Selli Design System — Electric Violet, Instrument Sans, dark-first, with the brand's signature violet glow. Ships as a set of x-selli::* Blade components designed to drop straight into any Laravel + Livewire 4 application.
Every component is themeable through CSS custom properties (design tokens), works in light and dark mode, and ships with tests.
📖 Documentation
Full documentation, with live examples and screenshots of every component: selli-ui-livewire.selli.io
Requirements
- PHP
^8.3 - Laravel
^11.0 || ^12.0 - Livewire
^4.0(only required for the interactive components)
Installation
composer require selli/ui
Publish the stylesheet and JavaScript assets:
php artisan vendor:publish --tag=selli-ui-assets
(Optionally) publish the config file:
php artisan vendor:publish --tag=selli-ui-config
Add the design-system stylesheet to your layout <head>:
<link rel="stylesheet" href="{{ \Selli\Ui\Facades\SelliUi::css() }}">
The system is dark-first. Add the dark appearance by leaving <html> as-is, or switch to the light surface with <html class="light">.
Usage
All components are anonymous Blade components under the selli namespace:
<x-selli::button variant="primary" icon="rocket">Inizia ora</x-selli::button> <x-selli::card> <x-selli::card.icon name="sparkles" /> <x-selli::card.title>Componenti enterprise</x-selli::card.title> <x-selli::card.body>Pronti per la produzione, testati e documentati.</x-selli::card.body> </x-selli::card> <x-selli::badge tone="success" icon="circle-check">Attivo</x-selli::badge>
See the documentation for the full component reference.
Testing
composer test
Changelog
Please see CHANGELOG for what has changed recently.
License
The MIT License (MIT). Please see License File for more information.