ihxnnxs/umbra-ui

Modern UI components library for Laravel applications

Maintainers

Details

github.com/ihxnnxs/UmbraUI

Homepage

Source

Issues

Fund package maintenance!
ihxnnxs

Installs: 12

Dependents: 0

Suggesters: 0

Security: 0

Stars: 11

Watchers: 1

Forks: 0

Open Issues: 0

Language:Blade

V0.3 2025-09-06 13:00 UTC

Requires

Requires (Dev)

MIT b28bffd70372c53a0ec0cfa24b8a45cae36db9c1

  • ihxnnxs <jan555666.woop@yandex.ru>

laravelui-componentsUmbraUIumbra-ui

This package is auto-updated.

Last update: 2025-09-14 21:48:01 UTC

README

UmbraUI Light Theme

UmbraUI

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

Essential UI components library for Laravel applications with Tailwind CSS

UmbraUI Light Theme UmbraUI Dark Theme

UmbraUI focuses on providing the most essential UI components for modern web applications. Built with accessibility-first design, dark/light theme support, and seamless Laravel integration.

Essential Components

UmbraUI focuses on the most critical components for modern web applications, based on industry standards and popular libraries like shadcn/ui, Tailwind UI, and Chakra UI.

Core Form Components ✅

Component Status Description
Button ✅ Ready Primary, secondary, and variant styles
Input ✅ Ready Text, email, password, number inputs
Link ✅ Ready Styled anchor elements
Textarea ✅ Ready Multi-line text input
Select ✅ Ready Dropdown selection
Checkbox ✅ Ready Boolean selection
Radio ✅ Ready Single choice selection
Label ✅ Ready Form field labels
Field ✅ Ready Form field wrapper with validation
Switch ✅ Ready Toggle switch
Slider ✅ Ready Range input
Date Picker ✅ Ready Date selection

Navigation & Layout ✅

Component Status Description
Alert ✅ Ready Success, error, warning, info
Badge ✅ Ready Status indicators and labels
Avatar ✅ Ready User profile pictures and initials
Tabs ✅ Ready Tabbed navigation interface
Accordion ✅ Ready Collapsible content sections
Modal ✅ Ready Dialog/popup overlay
Card ✅ Ready Universal card with image support
Dropdown ✅ Ready Context menus with nested submenus
Popover ✅ Ready Contextual overlay with click/hover
Tooltip ✅ Ready Accessible hover/focus tooltip
Spinner ✅ Ready Loading animations and states
Divider ✅ Ready Content separators
Progress ✅ Ready Progress indicators
Breadcrumb ✅ Ready Navigation breadcrumbs

Data Display ✅

Component Status Description
Table ✅ Ready Data tables with sorting and selection support

Notifications ✅

Component Status Description
Toast ✅ Ready Elegant notification system

Icons

UmbraUI uses Tabler Icons - a beautiful set of 4,900+ free SVG icons designed for web interfaces. All components that require icons come with pre-integrated Tabler icons support for consistency and visual appeal.

{{-- Basic usage --}}
<x-umbra-ui::icons.home />
<x-umbra-ui::icons.user />
<x-umbra-ui::icons.heart />

{{-- Custom colors --}}
<x-umbra-ui::icons.heart class="text-red-500" />
<x-umbra-ui::icons.star class="text-yellow-400" />

{{-- Custom sizes --}}
<x-umbra-ui::icons.home class="w-4 h-4" />
<x-umbra-ui::icons.settings class="w-8 h-8" />

{{-- Combined customization --}}
<x-umbra-ui::icons.bell class="w-6 h-6 text-blue-600" />

🚀 Coming in v0.4

Component Status Description
Command 🔄 Planned Command palette/search
Pagination 🔄 Planned Page navigation controls

Installation

You can install the package via composer:

composer require ihxnnxs/umbra-ui

Publishing Assets

To use JavaScript toast notifications, you need to publish the assets:

php artisan vendor:publish --tag=umbra-ui-assets

This will publish the JavaScript files to public/vendor/umbra-ui/js/.

Usage

Basic Components

{{-- Buttons --}}
<x-umbra-ui::button>Primary Button</x-umbra-ui::button>
<x-umbra-ui::button type="submit" class="bg-blue-600">Custom Button</x-umbra-ui::button>

{{-- Form Inputs --}}
<x-umbra-ui::input type="email" placeholder="Enter email" />
<x-umbra-ui::textarea placeholder="Your message..." />
<x-umbra-ui::select>
    <option>Choose...</option>
    <option value="1">Option 1</option>
</x-umbra-ui::select>

{{-- Form Controls --}}
<x-umbra-ui::checkbox id="terms" />
<x-umbra-ui::label for="terms">Accept Terms</x-umbra-ui::label>

<x-umbra-ui::radio name="choice" value="a" id="choice-a" />
<x-umbra-ui::label for="choice-a">Choice A</x-umbra-ui::label>

<x-umbra-ui::switch id="notifications" />

Advanced Components

{{-- Form Fields with Validation --}}
<x-field label="Email Address" error="Email is required">
    <x-input type="email" />
</x-field>

<x-field label="Message" helper="Maximum 500 characters">
    <x-textarea />
</x-field>

{{-- Navigation --}}
<x-tabs default-tab="overview">
    <x-tabs.nav>
        <x-tabs.tab value="overview">Overview</x-tabs.tab>
        <x-tabs.tab value="settings">Settings</x-tabs.tab>
    </x-tabs.nav>
    
    <x-tabs.panel value="overview">
        <p>Overview content...</p>
    </x-tabs.panel>
    
    <x-tabs.panel value="settings">
        <p>Settings content...</p>
    </x-tabs.panel>
</x-tabs>

{{-- Badges --}}
<x-umbra-ui::badge>Default</x-umbra-ui::badge>
<x-umbra-ui::badge variant="success">Success</x-umbra-ui::badge>
<x-umbra-ui::badge variant="error" removable="true">Removable</x-umbra-ui::badge>
<x-umbra-ui::badge variant="primary" dot="true">With Dot</x-umbra-ui::badge>
<x-umbra-ui::badge size="lg">Large Badge</x-umbra-ui::badge>

{{-- Avatars --}}
<x-umbra-ui::avatar src="/path/to/image.jpg" alt="User Name" />
<x-umbra-ui::avatar initials="JD" size="lg" />
<x-umbra-ui::avatar status="online" size="md" />
<x-umbra-ui::avatar shape="square" initials="AB" />

{{-- Interactive Components --}}
<x-accordion>
    <x-slot name="title">FAQ Item</x-slot>
    Answer content goes here...
</x-accordion>

<x-slider min="0" max="100" value="50" />
<x-date-picker value="2025-01-15" />

Toast Notifications

Simple, elegant toast notifications for Laravel applications.

Installation

For JavaScript toasts only:

<script src="{{ asset('vendor/umbra-ui/js/toast.js') }}"></script>

For server-side toasts (redirect()->with()):

<x-umbra-ui::toast-container />

For both:

<x-umbra-ui::toast-container/>
<script src="{{ asset('vendor/umbra-ui/js/toast.js') }}"></script>

Usage

Server-side (PHP):

// Using redirect()->with()
return redirect()->back()
    ->with('success', 'User created successfully!');
    // Supports: success, error, warning, info

// Using Toast Facade
use Ihxnnxs\UmbraUI\Facades\Toast;

Toast::success('User created successfully!', 'Success Title');
Toast::error('Something went wrong!');
Toast::warning('Please review your data');
Toast::info('New updates available');

Client-side (JavaScript):

<!-- Data attributes on buttons -->
<button
    data-toast-trigger
    data-toast-type="success"
    data-toast-message="Operation completed!"
    data-toast-title="Success"
>
    Show Toast
</button>

<script>
    // Direct JavaScript calls
    umbraToast.success('Success message!', 'Title');
    umbraToast.error('Error message!');
    umbraToast.warning('Warning message!');
    umbraToast.info('Info message!');
</script>

Configuration Options

Data Attributes:

  • data-toast-type: success, error, warning, info, default
  • data-toast-message: Toast message text
  • data-toast-title: Optional title
  • data-toast-position: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center
  • data-toast-duration: Milliseconds (default: 5000, 0 = no auto-dismiss)

JavaScript Options:

umbraToast.show('Message', 'success', 'Title', {
    position: 'top-right',
    duration: 5000,
    dismissible: true
});

Cards

{{-- Simple Card --}}
<x-card>
    <h4>Card Title</h4>
    <p>Card content goes here...</p>
</x-card>

{{-- Card with Image --}}
<x-card>
    <x-slot name="image">
        <img src="image.jpg" alt="Description" class="w-full h-48 object-cover" />
    </x-slot>
    
    <x-slot name="header">
        <h4>Card with Image</h4>
    </x-slot>
    
    <p>Content with image and header.</p>
    
    <x-slot name="footer">
        <x-button>Action</x-button>
    </x-slot>
</x-card>

Links

<x-link href="https://example.com">External Link</x-link>
<x-link href="/dashboard" class="text-blue-600">Custom Styled Link</x-link>

Tables

{{-- Basic Table --}}
<x-umbra-ui::table>
    <x-umbra-ui::table.head>
        <x-umbra-ui::table.row>
            <x-umbra-ui::table.th>Name</x-umbra-ui::table.th>
            <x-umbra-ui::table.th>Email</x-umbra-ui::table.th>
            <x-umbra-ui::table.th align="right">Actions</x-umbra-ui::table.th>
        </x-umbra-ui::table.row>
    </x-umbra-ui::table.head>
    
    <x-umbra-ui::table.body>
        <x-umbra-ui::table.row>
            <x-umbra-ui::table.td>John Doe</x-umbra-ui::table.td>
            <x-umbra-ui::table.td>john@example.com</x-umbra-ui::table.td>
            <x-umbra-ui::table.td align="right">
                <x-button class="text-xs">Edit</x-button>
            </x-umbra-ui::table.td>
        </x-umbra-ui::table.row>
        
        <x-umbra-ui::table.row selected="true">
            <x-umbra-ui::table.td>Jane Smith</x-umbra-ui::table.td>
            <x-umbra-ui::table.td>jane@example.com</x-umbra-ui::table.td>
            <x-umbra-ui::table.td align="right">
                <x-button class="text-xs">Edit</x-button>
            </x-umbra-ui::table.td>
        </x-umbra-ui::table.row>
    </x-umbra-ui::table.body>
</x-umbra-ui::table>

{{-- Empty State Table --}}
<x-umbra-ui::table>
    <x-umbra-ui::table.head>
        <x-umbra-ui::table.row>
            <x-umbra-ui::table.th>Orders</x-umbra-ui::table.th>
            <x-umbra-ui::table.th>Customer</x-umbra-ui::table.th>
            <x-umbra-ui::table.th align="right">Total</x-umbra-ui::table.th>
        </x-umbra-ui::table.row>
    </x-umbra-ui::table.head>
    
    <x-umbra-ui::table.body>
        <x-umbra-ui::table.empty colspan="3">
            <x-slot name="title">No orders found</x-slot>
            You haven't received any orders yet.
            <x-slot name="action">
                <x-button class="text-sm">Create Order</x-button>
            </x-slot>
        </x-umbra-ui::table.empty>
    </x-umbra-ui::table.body>
</x-umbra-ui::table>

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.