Download the PHP package ihxnnxs/umbra-ui without Composer
On this page you can find all versions of the php package ihxnnxs/umbra-ui. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download ihxnnxs/umbra-ui
More information about ihxnnxs/umbra-ui
Files in ihxnnxs/umbra-ui
Package umbra-ui
Short Description Modern UI components library for Laravel applications
License MIT
Homepage https://github.com/ihxnnxs/UmbraUI
Informations about the package umbra-ui
UmbraUI
Essential UI components library for Laravel applications with Tailwind CSS
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
- 🎨 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
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.
📋 Requirements
- PHP 8.1 or higher
- Laravel 10.x or 11.x
- Tailwind CSS 4.x
- Alpine.js 3.x (for interactive components)
📦 Installation
Install via Composer:
Initialize UmbraUI and choose your theme:
This interactive command will:
- Let you choose from 4 color schemes (neutral, stone, zinc, gray)
- Create
components.jsonconfiguration - Set up your theme with CSS variables
- Create the components directory
Add Alpine.js (Required for Interactive Components)
Include Alpine.js in your layout for components like modals, dropdowns, tabs, etc:
Or install via npm:
Publishing Assets (Optional)
For JavaScript toast notifications:
🚀 Quick Start
Theme Customization
Every component supports custom classes with intelligent merging:
Installing Additional Components
Use the umbra:add command to install components on demand:
Usage
Basic Components
Advanced Components
Toast Notifications
Simple, elegant toast notifications for Laravel applications.
Installation
For JavaScript toasts only:
For server-side toasts (redirect()->with()):
For both:
Usage
Server-side (PHP):
Client-side (JavaScript):
Configuration Options
Data Attributes:
data-toast-type: success, error, warning, info, defaultdata-toast-message: Toast message textdata-toast-title: Optional titledata-toast-position: top-left, top-right, top-center, bottom-left, bottom-right, bottom-centerdata-toast-duration: Milliseconds (default: 5000, 0 = no auto-dismiss)
JavaScript Options:
Cards
Links
Tables
Testing
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
- ihxnnxs
- All Contributors
- Tabler Icons - Beautiful free SVG icons
License
The MIT License (MIT). Please see License File for more information.
All versions of umbra-ui with dependencies
spatie/laravel-package-tools Version ^1.16
illuminate/contracts Version ^11.0||^12.0