PHPackages                             ihxnnxs/umbra-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. ihxnnxs/umbra-ui

ActiveLibrary[Templating & Views](/categories/templating)

ihxnnxs/umbra-ui
================

Modern UI components library for Laravel applications

V0.4(6mo ago)2388[2 issues](https://github.com/umbrahq/ui/issues)[2 PRs](https://github.com/umbrahq/ui/pulls)MITBladePHP ^8.3||^8.4CI passing

Since Aug 31Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/umbrahq/ui)[ Packagist](https://packagist.org/packages/ihxnnxs/umbra-ui)[ Docs](https://github.com/ihxnnxs/UmbraUI)[ GitHub Sponsors](https://github.com/ihxnnxs)[ RSS](/packages/ihxnnxs-umbra-ui/feed)WikiDiscussions main Synced today

READMEChangelog (4)DependenciesVersions (9)Used By (0)

 [![UmbraUI Light Theme](images/logo/LightLogo.png)](images/logo/LightLogo.png)

UmbraUI
=======

[](#umbraui)

 [![Latest Version on Packagist](https://camo.githubusercontent.com/0e8bab545ba2b00c840384a423c09642489b6b4acf472f49d7e0fc6fdd070a17/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6968786e6e78732f756d6272612d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ihxnnxs/umbra-ui) [![GitHub Tests Action Status](https://camo.githubusercontent.com/b56611cd97a61e4b2d090b9df8bfece26f86524c01cbb39d56624b6206f41daa/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6968786e6e78732f556d62726155492f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/ihxnnxs/UmbraUI/actions?query=workflow%3Arun-tests+branch%3Amain) [![GitHub Code Style Action Status](https://camo.githubusercontent.com/f1353953980f376f88863f71a4c80cd2b934468bf09c40ca7b8cb08a9e377c56/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6968786e6e78732f556d62726155492f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/ihxnnxs/UmbraUI/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain) [![Total Downloads](https://camo.githubusercontent.com/294d18e3ac843cd4bb35d5c400e7fc1e47dfadfcb8dee3af86d4afd2f9b313b7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6968786e6e78732f756d6272612d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ihxnnxs/umbra-ui)

**Essential UI components library for Laravel applications with Tailwind CSS**

 [![UmbraUI Light Theme](images/preview/previewLight.png)](images/preview/previewLight.png) [![UmbraUI Dark Theme](images/preview/previewDark.png)](images/preview/previewDark.png)

UmbraUI provides the most essential UI components for modern web applications with **full extensibility**, **4 beautiful themes**, and seamless Laravel integration. Every component supports custom classes with intelligent Tailwind class merging.

✨ Key Features
--------------

[](#-key-features)

- 🎨 **4 Color Schemes** - neutral, stone, zinc, gray with automatic light/dark mode
- 🔧 **Fully Extensible** - Override any component styles with custom classes
- 🚀 **CLI Commands** - Interactive setup and component installation
- ♿ **Accessibility First** - WCAG compliant components
- 📦 **30+ Components** - Everything you need for modern web apps

Essential Components
--------------------

[](#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 ✅

[](#core-form-components-)

ComponentStatusDescriptionButton✅ ReadyPrimary, secondary, and variant stylesInput✅ ReadyText, email, password, number inputsLink✅ ReadyStyled anchor elementsTextarea✅ ReadyMulti-line text inputSelect✅ ReadyDropdown selectionCheckbox✅ ReadyBoolean selectionRadio✅ ReadySingle choice selectionLabel✅ ReadyForm field labelsField✅ ReadyForm field wrapper with validationSwitch✅ ReadyToggle switchSlider✅ ReadyRange inputDate Picker✅ ReadyDate selection### Navigation & Layout ✅

[](#navigation--layout-)

ComponentStatusDescriptionAlert✅ ReadySuccess, error, warning, infoBadge✅ ReadyStatus indicators and labelsAvatar✅ ReadyUser profile pictures and initialsTabs✅ ReadyTabbed navigation interfaceAccordion✅ ReadyCollapsible content sectionsModal✅ ReadyDialog/popup overlayCard✅ ReadyUniversal card with image supportDropdown✅ ReadyContext menus with nested submenusPopover✅ ReadyContextual overlay with click/hoverTooltip✅ ReadyAccessible hover/focus tooltipSpinner✅ ReadyLoading animations and statesDivider✅ ReadyContent separatorsProgress✅ ReadyProgress indicatorsBreadcrumb✅ ReadyNavigation breadcrumbs### Data Display ✅

[](#data-display-)

ComponentStatusDescriptionTable✅ ReadyData tables with sorting and selection support### Notifications ✅

[](#notifications-)

ComponentStatusDescriptionToast✅ ReadyElegant notification system### Icons

[](#icons)

UmbraUI uses **[Tabler Icons](https://tabler.io/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 --}}

{{-- Custom colors --}}

{{-- Custom sizes --}}

{{-- Combined customization --}}

```

📋 Requirements
--------------

[](#-requirements)

- PHP 8.1 or higher
- Laravel 10.x or 11.x
- Tailwind CSS 4.x
- Alpine.js 3.x (for interactive components)

📦 Installation
--------------

[](#-installation)

Install via Composer:

```
composer require ihxnnxs/umbra-ui
```

Initialize UmbraUI and choose your theme:

```
php artisan umbra:init
```

This interactive command will:

- Let you choose from 4 color schemes (neutral, stone, zinc, gray)
- Create `components.json` configuration
- Set up your theme with CSS variables
- Create the components directory

### Add Alpine.js (Required for Interactive Components)

[](#add-alpinejs-required-for-interactive-components)

Include Alpine.js in your layout for components like modals, dropdowns, tabs, etc:

```

```

Or install via npm:

```
npm install alpinejs
```

### Publishing Assets (Optional)

[](#publishing-assets-optional)

For JavaScript toast notifications:

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

🚀 Quick Start
-------------

[](#-quick-start)

### Theme Customization

[](#theme-customization)

Every component supports custom classes with intelligent merging:

```
{{-- Override component styles --}}

    Custom Button

{{-- Classes are intelligently merged, last wins on conflicts --}}

    Rounded Badge

```

### Installing Additional Components

[](#installing-additional-components)

Use the `umbra:add` command to install components on demand:

```
# Install a single component
php artisan umbra:add button

# Install multiple components
php artisan umbra:add button input select

# Install all components
php artisan umbra:add --all
```

Usage
-----

[](#usage)

### Basic Components

[](#basic-components)

```
{{-- Buttons --}}
Primary Button
Custom Button

{{-- Form Inputs --}}

    Choose...
    Option 1

{{-- Form Controls --}}

Accept Terms

Choice A

```

### Advanced Components

[](#advanced-components)

```
{{-- Form Fields with Validation --}}

{{-- Navigation --}}

        Overview
        Settings

        Overview content...

        Settings content...

{{-- Badges --}}
Default
Success
Removable
With Dot
Large Badge

{{-- Avatars --}}

{{-- Interactive Components --}}

    FAQ Item
    Answer content goes here...

```

### Toast Notifications

[](#toast-notifications)

Simple, elegant toast notifications for Laravel applications.

#### Installation

[](#installation)

**For JavaScript toasts only:**

```

```

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

```

```

**For both:**

```

```

#### Usage

[](#usage-1)

**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):**

```

    Show Toast

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

```

#### Configuration Options

[](#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

[](#cards)

```
{{-- Simple Card --}}

    Card Title
    Card content goes here...

{{-- Card with Image --}}

        Card with Image

    Content with image and header.

        Action

```

### Links

[](#links)

```
External Link
Custom Styled Link
```

### Tables

[](#tables)

```
{{-- Basic Table --}}

            Name
            Email
            Actions

            John Doe
            john@example.com

                Edit

            Jane Smith
            jane@example.com

                Edit

{{-- Empty State Table --}}

            Orders
            Customer
            Total

            No orders found
            You haven't received any orders yet.

                Create Order

```

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [ihxnnxs](https://github.com/ihxnnxs)
- [All Contributors](../../contributors)
- [Tabler Icons](https://tabler.io/icons) - Beautiful free SVG icons

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

44

—

FairBetter than 90% of packages

Maintenance77

Regular maintenance activity

Popularity17

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 95.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~41 days

Total

4

Last Release

181d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/62433092?v=4)[hxnnxs](/maintainers/ihxnnxs)[@ihxnnxs](https://github.com/ihxnnxs)

---

Top Contributors

[![ihxnnxs](https://avatars.githubusercontent.com/u/62433092?v=4)](https://github.com/ihxnnxs "ihxnnxs (98 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)")

---

Tags

alpinejsbladelaravellaravel-frameworklaravel-packagetailwindcssuiui-componentsui-libraryuikitlaravelui-componentsUmbraUIumbra-ui

### Embed Badge

![Health badge](/badges/ihxnnxs-umbra-ui/health.svg)

```
[![Health](https://phpackages.com/badges/ihxnnxs-umbra-ui/health.svg)](https://phpackages.com/packages/ihxnnxs-umbra-ui)
```

###  Alternatives

[mkocansey/bladewind

BladewindUI — elegant Laravel Blade UI components powered by TailwindCSS

683123.5k](/packages/mkocansey-bladewind)[developermithu/tallcraftui

TallCraftUI is a Laravel blade UI components library built on TALL stack

1663.3k](/packages/developermithu-tallcraftui)[itstructure/laravel-grid-view

Grid view for laravel framework

2448.7k4](/packages/itstructure-laravel-grid-view)[ycs77/inertia-laravel-ssr-head

Simple SSR Head for Inertia Laravel

3414.1k](/packages/ycs77-inertia-laravel-ssr-head)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)