PHPackages michael-orenda/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. [Templating & Views](/categories/templating) 4. / 5. michael-orenda/ui ActiveLibrary[Templating & Views](/categories/templating) michael-orenda/ui ================= Atomic Design UI system for Laravel (Blade + Alpine) v1.1.1(1mo ago)03MITBladePHP ^8.2 Since Apr 24Pushed 1mo agoCompare [ Source](https://github.com/michael-orenda/ui)[ Packagist](https://packagist.org/packages/michael-orenda/ui)[ RSS](/packages/michael-orenda-ui/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (1)Versions (4)Used By (0) Michael Orenda UI ================= [](#michael-orenda-ui) Atomic Design UI system for Laravel (Blade + Alpine). --- โœจ Features ---------- [](#-features) - Atomic Design structure (Atoms โ†’ Molecules โ†’ Organisms) - Blade component-based - Alpine.js for interactivity - Framework-agnostic (works with Bootstrap, custom CSS, etc.) - No build tools (no npm required) --- ๐Ÿ“ฆ Installation -------------- [](#-installation) ``` composer require michael-orenda/ui ``` --- โš™๏ธ Setup -------- [](#๏ธ-setup) ### 1. Publish assets [](#1-publish-assets) ``` php artisan vendor:publish --tag=ui-assets ``` --- ### 2. Include scripts and styles [](#2-include-scripts-and-styles) Add this to your main layout: ``` ``` --- ๐Ÿš€ Usage ------- [](#-usage) --- ๐Ÿ”น Atoms ------- [](#-atoms) Atoms are the smallest UI elements. ### Button [](#button) ``` Save ``` --- ### Input [](#input) ``` ``` --- ### Checkbox [](#checkbox) ``` ``` --- ### Label [](#label) ``` Email ``` --- ### Badge [](#badge) ``` Active ``` --- ๐Ÿ”น Molecules ----------- [](#-molecules) Molecules combine atoms into reusable UI blocks. --- ### Form Field [](#form-field) ``` ``` --- ### Checkbox Group [](#checkbox-group) ``` I agree to terms ``` --- ### Input Group [](#input-group) ``` Go ``` --- ### Search Bar [](#search-bar) ``` ``` --- ### Alert [](#alert) ``` Operation successful ``` --- ### Stat Card [](#stat-card) ``` ``` --- ๐Ÿ”น Organisms ----------- [](#-organisms) Organisms are full UI sections composed of atoms and molecules. --- ### Navbar [](#navbar) ``` Login ``` --- ### Stats Grid [](#stats-grid) ``` @php $stats = [ ['label' => 'Users', 'value' => 1200], ['label' => 'Revenue', 'value' => '$12,000'], ]; @endphp ``` --- ### Form [](#form) ``` Submit ``` --- ### Modal [](#modal) ``` Open Modal This is a modal ``` --- ### Login Form [](#login-form) ``` Forgot password? ``` --- ### Register Form [](#register-form) ``` Already have an account? ``` --- ### Forgot Password Form [](#forgot-password-form) ``` Back to login ``` --- ๐Ÿงช UI Playground (Recommended) ----------------------------- [](#-ui-playground-recommended) Create routes to explore components: ``` Route::view('/ui/atoms', 'ui.atoms'); Route::view('/ui/molecules', 'ui.molecules'); ``` --- ๐Ÿง  Philosophy ------------ [](#-philosophy) - Atoms โ†’ raw elements (no layout) - Molecules โ†’ structured UI - Organisms โ†’ full UI sections --- โš ๏ธ Notes -------- [](#๏ธ-notes) - This package does NOT include CSS frameworks - Styling should be applied in your app (e.g. Bootstrap classes) - Alpine.js is required for interactive components --- ๐Ÿ“„ License --------- [](#-license) MIT ### Health Score 39 โ€” LowBetter than 84% of packages Maintenance90 Actively maintained with recent releases Popularity3 Limited adoption so far Community6 Small or concentrated contributor base Maturity48 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 ~0 days Total 3 Last Release 46d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/1303237?v=4)[Michael Philip Orenda](/maintainers/rminchrist)[@rminchrist](https://github.com/rminchrist) --- Top Contributors [![michael-orenda](https://avatars.githubusercontent.com/u/25703872?v=4)](https://github.com/michael-orenda "michael-orenda (3 commits)") ### Embed Badge ![Health badge](/badges/michael-orenda-ui/health.svg) ``` [![Health](https://phpackages.com/badges/michael-orenda-ui/health.svg)](https://phpackages.com/packages/michael-orenda-ui) ``` ### Alternatives [craftcms/cms Craft CMS 3.6k3.6M2.9k](/packages/craftcms-cms)[moonshine/moonshine Laravel administration panel 1.3k239.9k72](/packages/moonshine-moonshine)[illuminate/view The Illuminate View package. 13046.3M2.1k](/packages/illuminate-view)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 719160.4k12](/packages/tallstackui-tallstackui)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 45344.0k1](/packages/pressbooks-pressbooks)[hasinhayder/tyro-dashboard Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings 5222.7k](/packages/hasinhayder-tyro-dashboard) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)