README

R-UI is a modern, dark‑mode ready UI component library for Laravel + Livewire 3 (Volt compatible) built on Tailwind CSS and HyperUI design patterns. It provides a cohesive set of reactive Blade components designed to feel native to your Livewire workflow.

Why R-UI

Native Livewire reactivity (including wire:model, loading & navigate states)
Volt class-based component support out of the box
Dark / light mode via Tailwind dark: strategy
Consistent HyperUI‑inspired styling & accessible semantics
Simple publishing & zero boilerplate to get started

Install

1. Require the package

composer require ramonymous/r-ui

The service provider auto‑registers; no manual provider entry needed.

2. Run the installer (recommended)

R-UI ships with an artisan installer that guides you through setup:

php artisan rui:install            # Interactive (asks about Volt + stubs)
php artisan rui:install --volt     # Force Volt install without prompt

What the installer does:

Publishes the config (rui-config tag).
Verifies Tailwind presence; if missing it prints the commands to install.
Checks (and suggests) adding the R-UI vendor path to tailwind.config.js content.
Checks for Alpine.js in package.json; suggests npm install alpinejs if absent.
Optionally installs Livewire Volt (composer require livewire/volt + runs volt:install).
Optionally publishes example stubs (rui-stubs tag) including layout & welcome component.
Prints next steps (build assets, add <x-toast />).

If you prefer manual steps, skip the installer and publish directly:

php artisan vendor:publish --tag=rui-config   # config/rui.php
php artisan vendor:publish --tag=rui-views    # views/vendor/rui/* (if any exist)
php artisan vendor:publish --tag=rui-stubs    # Optional example stubs

3. Tailwind CSS setup

Ensure Tailwind is installed. If not:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Set darkMode: 'class' and include R-UI sources (Blade + PHP components) so utility classes are discovered:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './vendor/rdev/r-ui/src/**/*.php',
  ],
  theme: { extend: {} },
  plugins: [],
}

4. Alpine.js

R-UI leverages Alpine for lightweight interactivity. Install if missing:

npm install alpinejs

Then import it in your JS entry (e.g. resources/js/app.js):

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

5. Optional: Livewire Volt

To enable Volt class-based components:

composer require livewire/volt
php artisan volt:install

Or simply run the installer with --volt.

6. Build assets

npm install
npm run dev   # or: npm run build

7. Add Toast root & theme handling

In your main layout (e.g. resources/views/layouts/app.blade.php) include:

<x-toast />

Ensure your <html> tag toggles the dark class (via stored preference or media query) early to avoid FOUC.

8. Verify

Render a page with sample components to confirm Tailwind classes and dark mode apply correctly.

Command Reference

Command	Purpose
`php artisan rui:install`	Interactive install & environment checks
`php artisan rui:install --volt`	Install including Volt without prompt
`php artisan vendor:publish --tag=rui-config`	Publish configuration file
`php artisan vendor:publish --tag=rui-stubs`	Publish example stubs
`php artisan vendor:publish --tag=rui-views`	Publish package views (if provided)

After Install Checklist

Config file created: config/rui.php (adjust prefix, theme defaults).
Tailwind content updated (includes vendor/rdev/r-ui/src/**/*.php).
Alpine available and initialized.
Volt installed (if desired) and test Volt component renders.
Layout contains <x-toast /> for global toasts.
Dark mode toggling strategy decided (localStorage or system).

Quick Start (Volt Example)

Create resources/volt/welcome.php (or publish the stub) and a route:

// routes/web.php
use Livewire\Volt\Volt;
Volt::route('/', 'welcome');

Example Volt component file:

<?php
use Livewire\Volt\Component;
new class extends Component {
    public string $search = '';
}; ?>
<div class="space-y-6">
  <h1 class="text-3xl font-bold text-gray-900 dark:text-white">R-UI Welcome</h1>
  <x-input label="Search" wire:model.live.debounce.300ms="search" placeholder="Type..." />
  <x-button label="Get Started" />
  <div class="text-sm text-gray-600 dark:text-gray-400">Value: {{ $search }}</div>
</div>

Core Components (Growing Set)

Buttons, Inputs, Selects, Textarea, Checkbox, Toggle, Card, Modal, Drawer, Tabs, Table, Badge, Alert, Toast utilities, Progress, Avatar, Pagination, Layout helpers.

Configuration Highlights (`config/rui.php`)

prefix: Blade alias prefix (default x-)
dark_mode: strategy & default theme
toast: global toast behavior
colors: semantic palette mapping

Usage Patterns

<x-button label="Save" wire:click="save" />
<x-input label="Name" wire:model.defer="name" required />
<x-alert variant="success" title="Saved" description="Your changes are stored." />

Upgrading from Previous Versions

From v1.x to v2.x (Stubs Reorganization)

If you installed R-UI before the stubs reorganization, note these changes:

What changed:

Demo stubs moved from resources/volt/*.php → resources/views/demo/*.blade.php
Auth stubs are now published separately via rui-auth-stubs tag
Main layout moved to stubs/layouts/app.blade.php
Auth pages now use Volt class-in-Blade pattern (no separate resources/volt needed)

Migration steps:

Republish stubs with --force:

php artisan vendor:publish --tag=rui-stubs --force
php artisan vendor:publish --tag=rui-auth-stubs --force

Update your routes if using old Volt paths:

// Old
Volt::route('/', 'welcome');

// New (Blade views)
Route::view('/', 'demo.getting-started');

// Auth (Volt class-in-Blade)
Volt::route('/login', 'auth.login')->name('login');
Volt::route('/register', 'auth.register')->name('register');

Clean up old files (optional):

rm resources/volt/getting-started.php
rm resources/volt/forms-demo.php
rm resources/volt/table-demo.php
rm resources/volt/charts-demo.php
rm resources/volt/theme-demo.php

The installer will detect and offer to clean up old stubs automatically.

Configuration Override: Package Manager

You can override the package manager used by the installer:

CLI flag: php artisan rui:install --pm="pnpm add -D"
Environment: Add RUI_PM="yarn add -D" to .env
Config: Set 'pm' => 'bun add -D' in config/rui.php

Precedence: CLI flag > config > env > default (npm)

Updating / Removing Extras

This README replaces earlier placeholder docs. Additional deep architecture notes live under docs/. Remove any unused legacy doc files at your discretion.

Contributing

PRs welcome: keep components focused, accessible, and dark‑mode complete. Include concise examples and PHPDoc.

License

MIT

Minimal, practical, production‑ready. Build fast with R-UI.

ramonymous/r-ui

包简介

关键字：

README 文档

README

Why R-UI

Install

1. Require the package

2. Run the installer (recommended)

3. Tailwind CSS setup

4. Alpine.js

5. Optional: Livewire Volt

6. Build assets

7. Add Toast root & theme handling

8. Verify

Command Reference

After Install Checklist

Quick Start (Volt Example)

Core Components (Growing Set)

Configuration Highlights (`config/rui.php`)

Usage Patterns

Upgrading from Previous Versions

From v1.x to v2.x (Stubs Reorganization)

Configuration Override: Package Manager

Updating / Removing Extras

Contributing

License

统计信息

GitHub 信息

其他信息

ramonymous/r-ui

包简介

关键字：

README 文档

README

Why R-UI

Install

1. Require the package

2. Run the installer (recommended)

3. Tailwind CSS setup

4. Alpine.js

5. Optional: Livewire Volt

6. Build assets

7. Add Toast root & theme handling

8. Verify

Command Reference

After Install Checklist

Quick Start (Volt Example)

Core Components (Growing Set)

Configuration Highlights (config/rui.php)

Usage Patterns

Upgrading from Previous Versions

From v1.x to v2.x (Stubs Reorganization)

Configuration Override: Package Manager

Updating / Removing Extras

Contributing

License

统计信息

GitHub 信息

其他信息

Configuration Highlights (`config/rui.php`)