PHPackages oryn/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. oryn/ui ActiveLibrary[Templating & Views](/categories/templating) oryn/ui ======= CLI-first Blade component library for Laravel — the UI foundation of OrynCMS v1.0.0(1mo ago)00MITBladePHP ^8.2CI passing Since Mar 27Pushed 1mo agoCompare [ Source](https://github.com/ptnghia/OrynUI)[ Packagist](https://packagist.org/packages/oryn/ui)[ RSS](/packages/oryn-ui/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (6)Versions (2)Used By (0) OrynUI ====== [](#orynui) **CLI-first Blade component library for Laravel** — the UI foundation of [OrynCMS](https://github.com/ptnghia/OrynUI). Built with **Alpine.js v3** + **Tailwind CSS v4**. No runtime dependency — components are copied into your project via CLI and become yours to customize. --- Features -------- [](#features) - **92 components** across 7 categories — from atoms to full CMS layouts - **23 admin blocks** — pre-built page sections (dashboard, auth, data, settings) - **5 template packs** — complete admin panels (e-commerce, SaaS, CMS, booking, project) - **21 Livewire wrappers** — reactive form components with real-time validation - **Inertia adapters** — Vue & React adapters for 6 core components - **5 built-in themes** — default, emerald, rose, midnight, corporate - **i18n support** — English & Vietnamese, extensible to any language - **CLI-driven** — `php artisan orynui:add button` copies component files into your project - **Zero runtime dependency** — Blade + Alpine + Tailwind, no JS framework lock-in - **Automatic dependency resolution** — adding `modal` auto-installs `button` - **Design token system** — semantic CSS variables (`--oryn-*`), theming via CSS overrides - **Dark mode ready** — built-in light/dark theme support - **Accessible** — ARIA attributes, keyboard navigation, focus management Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11+ or 12+ - Tailwind CSS v4 - Alpine.js v3 Installation ------------ [](#installation) ``` composer require oryn/ui ``` Quick Start ----------- [](#quick-start) ### 1. Initialize OrynUI [](#1-initialize-orynui) ``` php artisan orynui:init ``` This creates: - `resources/css/oryn.css` — Design tokens and base styles - `resources/js/oryn/index.js` — Alpine.js component registry - `oryn.lock` — Tracks installed components ### 2. Install components [](#2-install-components) ``` # Install a single component php artisan orynui:add button # Install multiple components php artisan orynui:add button badge modal card # Install all core components php artisan orynui:add --all-core ``` > **Note:** After installing components with Alpine.js interactivity, run `npm run build` (or `npm run dev`) to compile the JS assets. ### 3. Use in Blade templates [](#3-use-in-blade-templates) ``` Click me Card Title Card content goes here. Are you sure you want to proceed? ``` CLI Commands ------------ [](#cli-commands) CommandDescription`orynui:init`Initialize OrynUI in your project`orynui:add {components}`Install components (auto-resolves dependencies)`orynui:list`List all available components with install status`orynui:remove {component}`Remove an installed component`orynui:update [component]`Update components to latest stub version`orynui:diff {component}`Show diff between installed and latest stub`orynui:block {name}`Install admin block templates`orynui:template {name}`Install full template packs`orynui:theme`Interactive theme configuration`orynui:icon {set}`Install icon sets`orynui:lang {locale}`Install/manage language files### Useful flags [](#useful-flags) ``` # List only installed components php artisan orynui:list --installed # Filter by category php artisan orynui:list --category=form # Output as JSON php artisan orynui:list --json # Force overwrite existing files php artisan orynui:add button --force # Install Livewire wrapper variant php artisan orynui:add select --livewire # Install Inertia adapter (Vue/React) php artisan orynui:add modal --inertia # Dry-run update check php artisan orynui:update --dry-run # Skip backup during update php artisan orynui:update --no-backup ``` Component Library ----------------- [](#component-library) CategoryCountComponentsCore11`alert`, `avatar`, `badge`, `banner`, `button`, `icon`, `kbd`, `label`, `progress`, `separator`, `skeleton`Form19`autocomplete`, `checkbox`, `combobox`, `date-picker`, `error-message`, `field`, `fieldset`, `file-upload`, `input`, `number-input`, `otp-input`, `radio-group`, `rating`, `select`, `slider`, `switch`, `tags-input`, `textarea`, `time-picker`Layout18`accordion`, `bottom-nav`, `breadcrumb`, `card`, `collapsible`, `header`, `heading`, `layout`, `link`, `mega-menu`, `navbar`, `navlist`, `resizable`, `scroll-area`, `sidebar`, `stepper`, `tabs`, `text`Overlay9`command-menu`, `context-menu`, `dialog`, `dropdown`, `modal`, `popover`, `sheet`, `toast`, `tooltip`Data Display16`avatar-group`, `calendar`, `carousel`, `chart`, `code-block`, `comment-thread`, `datatable`, `description`, `diff-viewer`, `empty`, `key-value`, `pagination`, `stat-card`, `table`, `timeline`, `tree-view`Utility7`brand`, `copy-button`, `floating-action`, `notification-center`, `sortable-list`, `spotlight`, `theme-switcher`CMS12`auth-pages`, `cms-layout`, `cms-page`, `cms-section`, `color-picker`, `data-grid`, `error-pages`, `icon-picker`, `image-crop`, `media-picker`, `rich-editor`, `search-palette`**Total: 92 components** Blocks ------ [](#blocks) Pre-built admin page sections — install individual blocks or entire categories: ``` php artisan orynui:block dashboard-stats php artisan orynui:block auth-login ``` CategoryCountBlocksDashboard7`dashboard-stats`, `dashboard-chart-row`, `dashboard-activity`, `dashboard-quick-actions`, `dashboard-recent-table`, `dashboard-overview`, `dashboard-welcome`Auth3`auth-login`, `auth-register`, `auth-complete`Data6`data-list`, `data-detail`, `data-form`, `data-grid-cards`, `data-import-export`, `data-kanban`Settings5`settings-profile`, `settings-security`, `settings-notifications`, `settings-appearance`, `settings-layout`Common2`admin-empty-state`, `admin-error-pages`**Total: 23 blocks** Templates --------- [](#templates) Complete admin panel templates — installs all required components, blocks, and pages: ``` php artisan orynui:template ecommerce ``` TemplatePagesDescriptionE-Commerce7Products, orders, customers managementSaaS5Users, billing, analytics, settingsCMS4Posts, comments, media, editorBooking3Appointments, services, calendarProject3Kanban board, tasks, teamTheming ------- [](#theming) OrynUI ships with **5 built-in themes** and a semantic token system: ``` # Interactive theme configuration php artisan orynui:theme # Or pass options directly php artisan orynui:theme --primary=purple --gray=slate --radius=pill --font=system ``` Built-in themes: `default`, `emerald`, `rose`, `midnight`, `corporate` ### Manual theming [](#manual-theming) Override CSS variables in your stylesheet: ``` :root { --oryn-primary: #8b5cf6; --oryn-radius-lg: 1rem; --oryn-font-sans: "Inter", system-ui, sans-serif; } ``` Advanced Features ----------------- [](#advanced-features) ### Livewire Integration [](#livewire-integration) 21 form components with Livewire wrappers for real-time validation and reactivity: ``` php artisan orynui:add select --livewire ``` ### Inertia Adapters [](#inertia-adapters) Vue and React adapters for seamless integration with Inertia.js: ``` php artisan orynui:add modal --inertia ``` ### Internationalization [](#internationalization) Built-in English & Vietnamese translations, extensible to any locale: ``` php artisan orynui:lang vi ``` ### Design Philosophy [](#design-philosophy) **Refined Minimalism** — generous spacing (`p-5`/`p-6`), larger border radius (`rounded-xl`), subtle shadows (`shadow-sm`), smooth transitions (`duration-150`). Project Structure ----------------- [](#project-structure) ``` oryn/ui ├── src/ │ ├── Commands/ # 11 Artisan commands │ ├── Registry/ # Component registry, resolver, installer │ └── Support/ # Path utilities ├── stubs/ # 92 component stubs (Blade + JS + meta.json) ├── blocks/ # 23 admin block templates ├── templates/ # 5 industry template packs ├── livewire/ # 21 Livewire component wrappers ├── inertia/ # Vue & React adapters ├── themes/ # 5 built-in theme presets ├── lang/ # i18n translations (en, vi) ├── vite-plugin/ # Vite integration plugin ├── registry.json # Component catalog ├── tests/ # PHPUnit test suite (60 tests) └── composer.json ``` Development ----------- [](#development) ``` # Install dependencies composer install # Run tests composer test # PHP syntax check find src -name "*.php" -exec php -l {} \; ``` Contributing ------------ [](#contributing) 1. Fork the repository 2. Create a feature branch (`git checkout -b feature/amazing-component`) 3. Add tests for new components 4. Submit a pull request ### Component structure [](#component-structure) Each component lives in `stubs/{name}/` with: - `{name}.blade.php` — Blade template with `@props`, semantic tokens, accessibility - `{name}.js` — Alpine.js data function (if interactive) - `meta.json` — Metadata: name, version, category, files, requires ### Conventions [](#conventions) - **Blade:** `@props` declaration, `$attributes->merge()`, semantic classes only - **Alpine:** `export function oryn{Name}()` + `Alpine.data()` registration - **CSS:** Semantic tokens (`text-foreground`, `bg-card`), never hardcode colors - **Accessibility:** ARIA attributes on interactive elements, keyboard support License ------- [](#license) [MIT](LICENSE) ### Health Score 37 — LowBetter than 83% of packages Maintenance90 Actively maintained with recent releases Popularity0 Limited adoption so far Community6 Small or concentrated contributor base Maturity46 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 Unknown Total 1 Last Release 46d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/10464619?v=4)[Matt Ryan](/maintainers/oryn)[@oryn](https://github.com/oryn) --- Top Contributors [![ptnghia](https://avatars.githubusercontent.com/u/23566941?v=4)](https://github.com/ptnghia "ptnghia (18 commits)") --- Tags laraveluicomponentsbladetailwindalpine ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/oryn-ui/health.svg) ``` [![Health](https://phpackages.com/badges/oryn-ui/health.svg)](https://phpackages.com/packages/oryn-ui) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k438.5k29](/packages/tightenco-jigsaw)[area17/blast Storybook for Laravel Blade 308664.1k](/packages/area17-blast)[electrik/slate Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project 102.3k1](/packages/electrik-slate)[ddfsn/blade-components Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps. 193.1k](/packages/ddfsn-blade-components) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)