PHPackages mountainclans/livewire-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. mountainclans/livewire-ui ActiveLibrary[Utility & Helpers](/categories/utility) mountainclans/livewire-ui ========================= Set of UI components for Livewire 3 1.4.0(2mo ago)0451MITBladePHP ^8.2CI passing Since Jul 4Pushed 2mo agoCompare [ Source](https://github.com/mountainclans/livewire-ui)[ Packagist](https://packagist.org/packages/mountainclans/livewire-ui)[ Docs](https://github.com/mountainclans/livewire-ui)[ GitHub Sponsors]()[ RSS](/packages/mountainclans-livewire-ui/feed)WikiDiscussions main Synced 3w ago READMEChangelog (10)Dependencies (18)Versions (20)Used By (1) Set of UI components for Livewire 3 =================================== [](#set-of-ui-components-for-livewire-3) Установка --------- [](#установка) Установите пакет при помощи Composer: ``` composer require mountainclans/livewire-ui ``` *Обратите внимание, что для корректной стилизации в вашем проекте должен использоваться TailwindCSS.* Добавьте в `tailwind.config.js` в секцию `content`: ``` './vendor/mountainclans/livewire-ui/resources/views/**/*.blade.php' ``` --- Опционально, вы можете опубликовать `views` для их переопределения: ``` php artisan vendor:publish --tag="livewire-ui-views" ``` Использование ------------- [](#использование) ### Form [](#form) ``` Контент формы ``` Атрибут `wire:submit` обязателен для корректной работы формы. `id` рекомендуется. Атрибуты `wire:recaptcha`, `class`, `indicate-loading` опциональны. Если установлен `:indicate-loading="false"`, форма не будет "мигать" при ajax-запросах. Форма поддерживает обработку ошибок при использовании пакета [Livewire Recaptcha](https://github.com/DutchCodingCompany/livewire-recaptcha?ysclid=mcoxk9j1wk293939835). **Использование представленных ниже компонентов НЕ требует обязательного использования компонента ``!** ### Input [](#input) **Компонент может использоваться в качестве [<translatable>](https://github.com/mountainclans/livewire-translatable) поля.** ``` ``` Атрибут `type` может принимать любые варианты, доступные для обычного html-инпута. Опционально, вы можете передать `type="textarea"` для того, чтобы вместо input`а рендерился тег textarea. Атрибут `offset-class` задаёт класс для обёртки компонента. Если вы не передадите `name` или `id`, они будут автоматически сгенерированы на основе `wire:model`. Также атрибуты `prefix`, `placeholder`, `offset-class` опциональны. Рендер ошибок выполняется автоматически. ### Multiselect [](#multiselect) ``` ``` `wire:key` опционален. В примере используется запись значений в массив `modelArray`. Компонент автоматически синхронизируется с бэкендом при клике снаружи. **Не используйте `wire:model.live`.** ### Radio [](#radio) ``` ``` В примере `wire:model.live.debounce`, но использовать можно и просто через `wire:model`. ### Toggle [](#toggle) ``` ``` Атрибуты `wire:model`, `label` обязательны. Атрибут `vertical` со значением `true` меняет внешний вид компонента, располагая лейбл и переключатель вертикально. Атрибут `darker` со значением `true` делает фон переключателя на один шаг темнее — удобно использовать, когда компонент располагается на сером фоне (`bg-gray-50` / `dark:bg-gray-700`), чтобы он не сливался с подложкой. ### Submit Button [](#submit-button) Кнопка визуализирует процесс отправки формы. ``` {{ __('Save') }} ``` ### Modal [](#modal) ``` Контент модального окна ``` Атрибуты `size`, `title` опциональны. ### Confirm delete [](#confirm-delete) Модальное окно с запросом подтверждения выполнения действия. Чаще всего используется при удалении записей. ``` ``` Для использования в родительском компоненте нужно задать bool-атрибут и передать его имя в prop `control-attribute`. В момент необходимости показа данного окна установить этот контрольный атрибут в true. ### Form tabs [](#form-tabs) `DEPRECATED`, вместо этого компонента используйте [пакет от Spatie](https://github.com/spatie/laravel-livewire-wizard). Добавляет визуальные "вкладки", среди которых представлены нужные компоненты. Текущая страница будет подсвечена. **Внимание! Данный компонент не занимается менеджментом переходов между вкладками.** ``` ``` В родительском компоненте: ``` public string $modelId = ''; public array $tabs = []; public function mount(?string $modelId = null) { $this->modelId = $modelId; $this->tabs = [ [ 'title' => __('General'), 'title_long_before' => '', 'title_long_after' => '', 'match_routes' => ['purchases.create', 'purchases.edit'], 'route' => $modelId ? route('purchases.edit', $modelId) : null, ], [ 'title' => __('Items'), 'title_long_before' => __(''), 'title_long_after' => __(' & Publish'), 'match_routes' => ['purchases.items'], 'route' => $modelId ? route('purchases.items', $modelId) : null, ], ]; } ``` Авторы ------ [](#авторы) - [Vladimir Bajenov](https://github.com/mountainclans) - [Themesberg Flowbite](https://github.com/themesberg/flowbite) - этот пакет использует вёрстку базовых компонентов из Flowbite - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 42 — FairBetter than 89% of packages Maintenance85 Actively maintained with recent releases Popularity8 Limited adoption so far Community8 Small or concentrated contributor base Maturity58 Maturing project, gaining track record 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 ~15 days Recently: every ~48 days Total 19 Last Release 78d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/d363ad351540061c6f38586e772159863da3cfde29cfbd03c9ff5ba8b6b906aa?d=identicon)[VladimirBazhenov](/maintainers/VladimirBazhenov) --- Top Contributors [![VladimirBazhenov](https://avatars.githubusercontent.com/u/44696748?v=4)](https://github.com/VladimirBazhenov "VladimirBazhenov (6 commits)") --- Tags laravellivewire-uiMountain Clans ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/mountainclans-livewire-ui/health.svg) ``` [![Health](https://phpackages.com/badges/mountainclans-livewire-ui/health.svg)](https://phpackages.com/packages/mountainclans-livewire-ui) ``` ### Alternatives [wire-elements/spotlight Livewire component that provides Spotlight/Alfred-like functionality to your Laravel application. 9471.0M3](/packages/wire-elements-spotlight)[codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 328482.0k25](/packages/codewithdennis-filament-select-tree)[nativephp/desktop NativePHP for Desktop 38133.6k8](/packages/nativephp-desktop)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3913.7k](/packages/rawilk-profile-filament-plugin)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1126.0k](/packages/codebar-ag-laravel-filament-json-field)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.2k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)