ramonymous/r-ui

A comprehensive Laravel Livewire UI component library with 60+ components, full dark mode support, and HyperUI design patterns

Maintainers

Details

github.com/Ramonymous/R-UI

Source

Issues

Installs: 0

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 0

Open Issues: 0

pkg:composer/ramonymous/r-ui

dev-main 2025-11-21 04:15 UTC

Requires

MIT 26c3fc56e48deba914481e5fe91b7405d12725f7

  • Rama Pamungkas <me.woop@r-dev.asia>

uicomponentslaravelvolttailwindlivewiredark-modehyperui

This package is auto-updated.

Last update: 2025-11-21 04:19:06 UTC

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 rdev/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:

  1. Publishes the config (rui-config tag).
  2. Verifies Tailwind presence; if missing it prints the commands to install.
  3. Checks (and suggests) adding the R-UI vendor path to tailwind.config.js content.
  4. Checks for Alpine.js in package.json; suggests npm install alpinejs if absent.
  5. Optionally installs Livewire Volt (composer require livewire/volt + runs volt:install).
  6. Optionally publishes example stubs (rui-stubs tag) including layout & welcome component.
  7. 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." />

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.