PHPackages rajeshwar/unified-ui-laravel - 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. rajeshwar/unified-ui-laravel ActiveLibrary[Templating & Views](/categories/templating) rajeshwar/unified-ui-laravel ============================ A scalable, token-driven Blade component library for Laravel — 75+ components built on Tailwind CSS, Alpine.js & Livewire. Install the Composer package or copy-paste with Artisan CLI. 0.0.5(3mo ago)08[6 issues](https://github.com/imrj05/unified-ui-laravel/issues)MITBladePHP ^8.1 Since Mar 8Pushed 3mo agoCompare [ Source](https://github.com/imrj05/unified-ui-laravel)[ Packagist](https://packagist.org/packages/rajeshwar/unified-ui-laravel)[ Docs](https://unified-ui.space)[ GitHub Sponsors](https://github.com/sponsors/imrj05)[ RSS](/packages/rajeshwar-unified-ui-laravel/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (6)Versions (6)Used By (0) [![Unified UI Logo](https://camo.githubusercontent.com/274a489308bc5a5e46b5aec5e91564b864d81bca92c157a858f8d43f35da0edc/68747470733a2f2f7777772e756e69666965642d75692e73706163652f6f70656e67726170682d696d6167653f37366330653333663264333931336132)](https://camo.githubusercontent.com/274a489308bc5a5e46b5aec5e91564b864d81bca92c157a858f8d43f35da0edc/68747470733a2f2f7777772e756e69666965642d75692e73706163652f6f70656e67726170682d696d6167653f37366330653333663264333931336132) Unified UI for Laravel ====================== [](#unified-ui-for-laravel) A scalable, token-driven Blade component library for Laravel. 75+ components built on Tailwind CSS & Alpine.js. Install the Composer package **or** copy-paste with the Artisan CLI. [![Latest Version on Packagist](https://camo.githubusercontent.com/14ffe21f0276f3eee60bbe5ea1b1e1cabab6283eb3d8fc2377424da4d01c79b0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f72616a6573687761722f756e69666965642d75692d6c61726176656c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rajeshwar/unified-ui-laravel) [![Total Downloads](https://camo.githubusercontent.com/61737ac62cdc3ba7b2a23089adec2ea98d05db69a161bcc51b920e0b34db1d90/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f72616a6573687761722f756e69666965642d75692d6c61726176656c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rajeshwar/unified-ui-laravel) [![License](https://camo.githubusercontent.com/942e017bf0672002dd32a857c95d66f28c5900ab541838c6c664442516309c8a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e7376673f7374796c653d666c61742d737175617265)](https://github.com/imrj05/unified-ui-laravel/blob/main/LICENSE) [![Documentation](https://camo.githubusercontent.com/cc480015fc40b93274832ac80786c6787d2b64a90ac6b6bc8d401e01189bcc59/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f63732d756e69666965642d2d75692e73706163652d626c756576696f6c65743f7374796c653d666c61742d737175617265)](https://unified-ui.space) --- About ----- [](#about) **Unified UI for Laravel** is the server-side counterpart to the [Unified UI React design system](https://unified-ui.space). It brings the same token-driven architecture, consistent visual language, and developer experience to the Laravel ecosystem using Blade components and Alpine.js. ### Key Features [](#key-features) - **Token-driven** — Every color, spacing, radius, shadow, and motion value comes from CSS custom properties. Override a few variables, retheme everything. - **Two distribution modes** — Install the full Composer package for zero-config convenience, or copy-paste individual components with the Artisan CLI for full source ownership. - **75+ components** — Buttons, Cards, Modals, Tables, Inputs, Badges, Tabs, Accordions, Dropdowns, and more. - **Dark mode native** — All tokens and components respect light/dark mode via CSS custom properties with zero config. - **Tailwind CSS v4** — First-class support with native `@theme` integration for seamless token mapping. - **Alpine.js powered** — Interactive components use Alpine.js for lightweight, declarative client-side behavior with zero build step. - **Accessible** — Proper ARIA attributes, keyboard navigation, and focus management baked into every component. - **Laravel 10, 11 & 12** — Supports all actively maintained Laravel versions. --- Requirements ------------ [](#requirements) DependencyVersionPHP^8.1Laravel^10.0 | ^11.0 | ^12.0Tailwind CSSv4.xAlpine.js^3.0 *(optional — required for interactive components)*--- Installation ------------ [](#installation) ### Option A: Composer Package (Recommended) [](#option-a-composer-package-recommended) Install the package — all components are immediately available as `` tags: ``` composer require rajeshwar/unified-ui-laravel ``` The service provider is auto-discovered. Components are registered under the `ui` prefix and work out of the box: ``` Click me Active Hello World Card content goes here. ``` ### Option B: Artisan CLI (Copy & Paste) [](#option-b-artisan-cli-copy--paste) Like shadcn/ui — components are copied directly into your project. You own the source and can modify anything. #### 1. Install the package [](#1-install-the-package) ``` composer require rajeshwar/unified-ui-laravel --dev ``` #### 2. Initialize your project [](#2-initialize-your-project) ``` php artisan ui:init ``` This creates: - `unified-ui.json` — configuration file with path aliases - `resources/css/unified-ui.css` — design token CSS custom properties - Tailwind CSS `@theme` integration instructions #### 3. Add components [](#3-add-components) ``` php artisan ui:add button php artisan ui:add button badge card input php artisan ui:add --all ``` The CLI automatically resolves and installs all dependencies (other components, Composer packages, npm packages). #### 4. Use in your Blade templates [](#4-use-in-your-blade-templates) ``` Submit ``` --- Artisan Commands ---------------- [](#artisan-commands) CommandDescription`php artisan ui:init`Initialize project — creates config, CSS tokens, Tailwind integration`php artisan ui:add `Add one or more components with automatic dependency resolution`php artisan ui:add --all`Add all available components`php artisan ui:list`List all available components in a formatted table`php artisan ui:diff `Compare local file against the registry version### Command Options [](#command-options) ``` # Force overwrite existing config/CSS php artisan ui:init --force # Overwrite existing component files php artisan ui:add button --overwrite # Preview what would be installed without writing files php artisan ui:add button --dry-run # Skip external dependency installation prompts php artisan ui:add modal --no-deps # Use only the local bundled registry (offline mode) php artisan ui:add button --offline # Filter component list php artisan ui:list --search=form php artisan ui:list --type=blade php artisan ui:list --installed php artisan ui:list --not-installed # Output as JSON php artisan ui:list --json php artisan ui:diff button --json # Diff all installed components at once php artisan ui:diff --all # Summary-only diff (no full output) php artisan ui:diff --all --summary ``` --- Configuration ------------- [](#configuration) After running `php artisan ui:init`, a `unified-ui.json` file is created at your project root: ``` { "$schema": "https://unified-ui.space/schema/laravel.json", "aliases": { "components": "resources/views/components/ui", "css": "resources/css", "js": "resources/js" }, "registry": "https://raw.githubusercontent.com/imrj05/unified-ui-laravel/main/registry.json" } ``` ### Configuration Options [](#configuration-options) KeyDescriptionDefault`aliases.components`Where Blade component files are written`resources/views/components/ui``aliases.css`Where CSS files are written`resources/css``aliases.js`Where JavaScript files are written`resources/js``registry`URL to the component registry JSONGitHub raw URL--- Design Tokens ------------- [](#design-tokens) Unified UI uses CSS custom properties (design tokens) as the single source of truth for all visual values. These are defined in `resources/css/unified-ui.css` and power every component. ### Color Tokens (oklch) [](#color-tokens-oklch) All colors use the [oklch color space](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) for perceptual uniformity: ``` :root { --ui-primary: 0.637 0.237 262.12; --ui-primary-foreground: 0.985 0.002 247.84; --ui-destructive: 0.577 0.245 27.33; --ui-success: 0.627 0.194 149.21; /* ... */ } ``` Use them in your own styles: ``` .my-element { background: oklch(var(--ui-primary)); color: oklch(var(--ui-primary-foreground)); /* With alpha */ border-color: oklch(var(--ui-primary) / 0.5); } ``` ### Token Categories [](#token-categories) CategoryExamples**Colors**`--ui-primary`, `--ui-secondary`, `--ui-destructive`, `--ui-success`, `--ui-warning`, `--ui-info`, `--ui-muted`, `--ui-background`, `--ui-foreground`, `--ui-card`, `--ui-popover`, `--ui-border`, `--ui-ring`**Spacing**`--ui-spacing-0` through `--ui-spacing-24`**Radius**`--ui-radius-sm`, `--ui-radius-md`, `--ui-radius-lg`, `--ui-radius-xl`, `--ui-radius-2xl`, `--ui-radius-full`**Shadows**`--ui-shadow-xs`, `--ui-shadow-sm`, `--ui-shadow-md`, `--ui-shadow-lg`, `--ui-shadow-xl`**Typography**`--ui-font-sans`, `--ui-font-mono`, `--ui-font-size-*`, `--ui-line-height-*`, `--ui-font-weight-*`**Motion**`--ui-duration-fast`, `--ui-duration-normal`, `--ui-duration-slow`, `--ui-ease-default`, `--ui-ease-bounce`**Z-Index**`--ui-z-dropdown`, `--ui-z-modal`, `--ui-z-popover`, `--ui-z-toast`, `--ui-z-tooltip`### Dark Mode [](#dark-mode) Dark mode works automatically via three methods: 1. **Class-based** — Add the `dark` class to `` or any ancestor element 2. **Data attribute** — Add `data-theme="dark"` to `` or any ancestor 3. **System preference** — Automatically detects `prefers-color-scheme: dark` unless overridden ### Tailwind CSS Integration [](#tailwind-css-integration) The CSS file includes a `@theme` block that automatically registers all tokens as Tailwind utilities: ``` @import "tailwindcss"; @import "./unified-ui.css"; ``` Now you can use `bg-primary`, `text-muted-foreground`, `rounded-lg`, etc. directly in your Blade templates. --- Components ---------- [](#components) ### Component Categories [](#component-categories) CategoryComponents**Form Controls**`button`, `input`, `textarea`, `select`, `checkbox`, `radio`, `toggle`, `switch`, `slider`, `label`, `form`, `form-group`**Data Display**`card`, `badge`, `avatar`, `table`, `stat`, `accordion`, `collapsible`**Feedback**`alert`, `spinner`, `skeleton`, `progress`, `empty-state`, `banner`**Overlays**`modal`, `dropdown`, `tooltip`, `popover`, `sheet`, `alert-dialog`, `command`**Navigation**`tabs`, `breadcrumb`, `pagination`**Layout**`stack`, `container`, `separator`, `aspect-ratio`, `scroll-area`**Typography**`heading`, `text`, `kbd`, `code`**Alpine**`alpine-counter` *(example integration)*### Component Examples [](#component-examples) #### Button [](#button) ``` {{-- Variants --}} Primary Secondary Danger Outline Ghost Link {{-- Sizes --}} Extra Small Small Medium Large {{-- States --}} Saving… Disabled Full Width {{-- As anchor --}} Dashboard ``` #### Card [](#card) ``` Team Members Manage your team and permissions. Invite Card content goes here. 3 members Save Changes ``` #### Input [](#input) ``` {{-- Basic input with label and validation --}} {{-- With icons --}} {{-- As textarea --}} ``` #### Badge [](#badge) ``` Default Active Critical Online Beta ``` #### Alert [](#alert) ``` Your payment of $49.99 has been processed successfully. Something went wrong. Please try again. ``` #### Avatar [](#avatar) ``` {{-- With image --}} {{-- With initials --}} {{-- With status --}} {{-- Avatar group --}} ``` --- Project Structure ----------------- [](#project-structure) ### Composer Package (installed via `composer require`) [](#composer-package-installed-via-composer-require) ``` your-laravel-app/ ├── vendor/ │ └── rajeshwar/unified-ui-laravel/ │ ├── src/ │ │ ├── UnifiedUiServiceProvider.php │ │ ├── Registry.php │ │ └── Console/ │ │ ├── InitCommand.php │ │ ├── AddComponentCommand.php │ │ ├── ListComponentsCommand.php │ │ └── DiffComponentCommand.php │ ├── stubs/ ← Blade component templates │ │ ├── button.blade.php │ │ ├── badge.blade.php │ │ ├── card.blade.php │ │ ├── card/ │ │ │ ├── header.blade.php │ │ │ ├── body.blade.php │ │ │ ├── title.blade.php │ │ │ ├── description.blade.php │ │ │ └── footer.blade.php │ │ └── ... │ ├── resources/css/ ← Design token CSS │ ├── registry.json ← Component registry │ └── composer.json ``` ### After `php artisan ui:init` + `php artisan ui:add button card` [](#after-php-artisan-uiinit--php-artisan-uiadd-button-card) ``` your-laravel-app/ ├── unified-ui.json ← Project config ├── resources/ │ ├── css/ │ │ └── unified-ui.css ← Design tokens │ └── views/ │ └── components/ │ └── ui/ ← Your owned components │ ├── button.blade.php │ ├── card.blade.php │ └── card/ │ ├── header.blade.php │ ├── body.blade.php │ ├── title.blade.php │ ├── description.blade.php │ └── footer.blade.php ``` --- How It Works ------------ [](#how-it-works) ### Two Distribution Modes [](#two-distribution-modes) **Composer Package****Artisan CLI****Install**`composer require rajeshwar/unified-ui-laravel``php artisan ui:add button`**Updates**Composer updateRe-run CLI or `ui:diff`**File location**`vendor/` (read-only)Your project (editable)**Customization**Override via CSS tokensEdit source directly**Best for**Zero-config consistencyFull control & customization### Component Resolution Priority [](#component-resolution-priority) When both the Composer package and local files exist, Laravel resolves components in this order: 1. **Local project** — `resources/views/components/ui/button.blade.php` 2. **Package stubs** — `vendor/rajeshwar/unified-ui-laravel/stubs/button.blade.php` This means you can install the full package via Composer and then selectively override individual components by copying them with `php artisan ui:add button`. ### Registry System [](#registry-system) The CLI fetches component definitions from a JSON registry: - **Remote registry** — fetched from GitHub and cached for 1 hour - **Local registry** — bundled with the package as `registry.json` - **Fallback** — if the remote is unavailable, the local registry is used automatically Each registry entry defines: - Component name and description - File entries with type, path, and remote URL - Composer and npm dependencies - Internal component dependencies (auto-resolved) ### Safety [](#safety) - The CLI will **never overwrite** existing files unless you pass `--overwrite` - Use `php artisan ui:diff ` to review changes before updating - The `--dry-run` flag previews what would be installed without writing anything --- Alpine.js Integration --------------------- [](#alpinejs-integration) Alpine.js components (modals, dropdowns, tabs, counters, etc.) declare `alpinejs` as an npm dependency. The CLI will: 1. Detect whether Alpine.js is in your `package.json` 2. If missing, prompt you to install it 3. Auto-detect your package manager (npm, pnpm, yarn, bun) --- Customization ------------- [](#customization) ### Override Design Tokens [](#override-design-tokens) Add your overrides after importing the Unified UI CSS: ``` @import "tailwindcss"; @import "./unified-ui.css"; :root { /* Override primary color to green */ --ui-primary: 0.627 0.194 149.21; /* Increase border radius */ --ui-radius-md: 0.5rem; --ui-radius-lg: 0.75rem; /* Faster animations */ --ui-duration-normal: 150ms; } ``` ### Edit Copied Components [](#edit-copied-components) After running `php artisan ui:add button`, the source file is yours: ``` resources/views/components/ui/button.blade.php ``` Edit variants, add sizes, change animations — whatever you need. The CLI will warn you if the registry has updates via `php artisan ui:diff button`. --- Comparison ---------- [](#comparison) FeatureCopy-paste onlyUnified UI LaravelProduction-ready components✅✅Accessible (ARIA, keyboard)✅✅Single Composer install❌✅Semantic versioning❌✅Token-driven theming❌✅Dark mode native❌✅Full source ownership✅✅Diff against registry❌✅Dependency auto-resolution❌✅Alpine.js detection❌✅Tailwind v4 support❌✅--- Contributing ------------ [](#contributing) Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-component`) 3. Commit your changes (`git commit -m 'Add amazing component'`) 4. Push to the branch (`git push origin feature/amazing-component`) 5. Open a Pull Request ### Adding a New Component [](#adding-a-new-component) 1. Create the Blade stub in `stubs/` 2. Add the component entry to `registry.json` 3. Test both distribution modes (Composer and CLI) 4. Update the README component list --- Changelog --------- [](#changelog) Please see [CHANGELOG.md](CHANGELOG.md) for information on recent changes. --- Security -------- [](#security) If you discover any security related issues, please email instead of using the issue tracker. --- Credits ------- [](#credits) - [Rajeshwar Kashyap](https://github.com/work-rjkashyap) - Inspired by [shadcn/ui](https://ui.shadcn.com) and the [Unified UI React design system](https://unified-ui.space) - Built on [Laravel](https://laravel.com), [Tailwind CSS](https://tailwindcss.com), and [Alpine.js](https://alpinejs.dev) --- License ------- [](#license) The MIT License (MIT). Please see [LICENSE](LICENSE) for more information. ### Health Score 33 — LowBetter than 72% of packages Maintenance79 Regular maintenance activity Popularity4 Limited adoption so far Community6 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 100% 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 ~0 days Total 5 Last Release 109d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/673a16d5ae132d3b7f4bc2138d7ec98d9b71cef97123c790063bb294467b2a50?d=identicon)[work-rjkashyap](/maintainers/work-rjkashyap) --- Top Contributors [![imrj05](https://avatars.githubusercontent.com/u/76556671?v=4)](https://github.com/imrj05 "imrj05 (11 commits)") --- Tags laraveluicomponentsbladelivewiretailwindalpinedesign-systemunified-ui ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/rajeshwar-unified-ui-laravel/health.svg) ``` [![Health](https://phpackages.com/badges/rajeshwar-unified-ui-laravel/health.svg)](https://phpackages.com/packages/rajeshwar-unified-ui-laravel) ``` ### Alternatives [moonshine/moonshine Laravel administration panel 1.3k239.9k76](/packages/moonshine-moonshine)[tightenco/jigsaw Simple static sites with Laravel's Blade. 2.3k449.3k30](/packages/tightenco-jigsaw)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9742.3M121](/packages/roots-acorn)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k531.0k21](/packages/robsontenorio-mary)[livewire/flux The official UI component library for Livewire. 9476.8M121](/packages/livewire-flux)[laravel/ai The official AI SDK for Laravel. 9782.1M162](/packages/laravel-ai) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)