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.
- 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
composer require rdev/r-uiThe service provider auto‑registers; no manual provider entry needed.
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 promptWhat the installer does:
- Publishes the config (
rui-configtag). - Verifies Tailwind presence; if missing it prints the commands to install.
- Checks (and suggests) adding the R-UI vendor path to
tailwind.config.jscontent. - Checks for Alpine.js in
package.json; suggestsnpm install alpinejsif absent. - Optionally installs Livewire Volt (
composer require livewire/volt+ runsvolt:install). - Optionally publishes example stubs (
rui-stubstag) 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 stubsEnsure Tailwind is installed. If not:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pSet 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: [],
}R-UI leverages Alpine for lightweight interactivity. Install if missing:
npm install alpinejsThen import it in your JS entry (e.g. resources/js/app.js):
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()To enable Volt class-based components:
composer require livewire/volt
php artisan volt:installOr simply run the installer with --volt.
npm install
npm run dev # or: npm run buildIn 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.
Render a page with sample components to confirm Tailwind classes and dark mode apply correctly.
| 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) |
- 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).
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>Buttons, Inputs, Selects, Textarea, Checkbox, Toggle, Card, Modal, Drawer, Tabs, Table, Badge, Alert, Toast utilities, Progress, Avatar, Pagination, Layout helpers.
prefix: Blade alias prefix (defaultx-)dark_mode: strategy & default themetoast: global toast behaviorcolors: semantic palette mapping
<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." />This README replaces earlier placeholder docs. Additional deep architecture notes live under docs/. Remove any unused legacy doc files at your discretion.
PRs welcome: keep components focused, accessible, and dark‑mode complete. Include concise examples and PHPDoc.
MIT
Minimal, practical, production‑ready. Build fast with R-UI.