README

CLI-first Blade component library for Laravel — the UI foundation of OrynCMS.

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

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

PHP 8.2+
Laravel 11+ or 12+
Tailwind CSS v4
Alpine.js v3

Installation

composer require oryn/ui

Quick Start

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

# 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

<x-oryn.button variant="primary">
    Click me
</x-oryn.button>

<x-oryn.card>
    <x-slot:header>
        <h3 class="text-lg font-semibold">Card Title</h3>
    </x-slot:header>
    Card content goes here.
</x-oryn.card>

<x-oryn.modal title="Confirm Action">
    Are you sure you want to proceed?
</x-oryn.modal>

CLI Commands

Command	Description
`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

# 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

Category	Count	Components
Core	11	`alert`, `avatar`, `badge`, `banner`, `button`, `icon`, `kbd`, `label`, `progress`, `separator`, `skeleton`
Form	19	`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`
Layout	18	`accordion`, `bottom-nav`, `breadcrumb`, `card`, `collapsible`, `header`, `heading`, `layout`, `link`, `mega-menu`, `navbar`, `navlist`, `resizable`, `scroll-area`, `sidebar`, `stepper`, `tabs`, `text`
Overlay	9	`command-menu`, `context-menu`, `dialog`, `dropdown`, `modal`, `popover`, `sheet`, `toast`, `tooltip`
Data Display	16	`avatar-group`, `calendar`, `carousel`, `chart`, `code-block`, `comment-thread`, `datatable`, `description`, `diff-viewer`, `empty`, `key-value`, `pagination`, `stat-card`, `table`, `timeline`, `tree-view`
Utility	7	`brand`, `copy-button`, `floating-action`, `notification-center`, `sortable-list`, `spotlight`, `theme-switcher`
CMS	12	`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

Pre-built admin page sections — install individual blocks or entire categories:

php artisan orynui:block dashboard-stats
php artisan orynui:block auth-login

Category	Count	Blocks
Dashboard	7	`dashboard-stats`, `dashboard-chart-row`, `dashboard-activity`, `dashboard-quick-actions`, `dashboard-recent-table`, `dashboard-overview`, `dashboard-welcome`
Auth	3	`auth-login`, `auth-register`, `auth-complete`
Data	6	`data-list`, `data-detail`, `data-form`, `data-grid-cards`, `data-import-export`, `data-kanban`
Settings	5	`settings-profile`, `settings-security`, `settings-notifications`, `settings-appearance`, `settings-layout`
Common	2	`admin-empty-state`, `admin-error-pages`

Total: 23 blocks

Templates

Complete admin panel templates — installs all required components, blocks, and pages:

php artisan orynui:template ecommerce

Template	Pages	Description
E-Commerce	7	Products, orders, customers management
SaaS	5	Users, billing, analytics, settings
CMS	4	Posts, comments, media, editor
Booking	3	Appointments, services, calendar
Project	3	Kanban board, tasks, team

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

Override CSS variables in your stylesheet:

:root {
  --oryn-primary: #8b5cf6;
  --oryn-radius-lg: 1rem;
  --oryn-font-sans: "Inter", system-ui, sans-serif;
}

Advanced Features

Livewire Integration

21 form components with Livewire wrappers for real-time validation and reactivity:

php artisan orynui:add select --livewire

Inertia Adapters

Vue and React adapters for seamless integration with Inertia.js:

php artisan orynui:add modal --inertia

Internationalization

Built-in English & Vietnamese translations, extensible to any locale:

php artisan orynui:lang vi

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

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

# Install dependencies
composer install

# Run tests
composer test

# PHP syntax check
find src -name "*.php" -exec php -l {} \;

Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-component)
Add tests for new components
Submit a pull request

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

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

MIT

oryn / ui

Maintainers

Package info

Statistics

Security