PHPackages chriskelemba/laravel-ui-kit - 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. chriskelemba/laravel-ui-kit ActiveLibrary[Templating & Views](/categories/templating) chriskelemba/laravel-ui-kit =========================== Blade-based UI components for Laravel v1.0.31(1mo ago)061MITBladePHP ^8.2 Since Apr 10Pushed 1mo agoCompare [ Source](https://github.com/chriskelemba/laravel-ui-kit)[ Packagist](https://packagist.org/packages/chriskelemba/laravel-ui-kit)[ RSS](/packages/chriskelemba-laravel-ui-kit/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (2)Versions (30)Used By (0) Laravel UI Kit ============== [](#laravel-ui-kit) Blade-first UI components for Laravel. Includes a full set of atoms, molecules, organisms, and templates with Tailwind + Alpine. Install ------- [](#install) ``` composer require chriskelemba/laravel-ui-kit ``` No publishing required. Components, Alpine, and the bundled UI Kit stylesheet are auto-registered. Usage ----- [](#usage) ### Hyphenated tags (recommended) [](#hyphenated-tags-recommended) ``` Primary Open Modal content here. ``` ### Namespaced tags [](#namespaced-tags) ``` Primary ``` Component Inventory ------------------- [](#component-inventory) ### Atoms [](#atoms) - `ui-kit-button` - `ui-kit-input` - `ui-kit-action-button` - `ui-kit-badge` - `ui-kit-avatar` - `ui-kit-tag` - `ui-kit-divider` ### Molecules [](#molecules) - `ui-kit-form-field` - `ui-kit-modal` - `ui-kit-alert` - `ui-kit-toast` - `ui-kit-tooltip` - `ui-kit-popover` - `ui-kit-dropdown` - `ui-kit-tabs` - `ui-kit-breadcrumb` - `ui-kit-pagination` - `ui-kit-steps` - `ui-kit-toggle` - `ui-kit-checkbox` - `ui-kit-radio-group` - `ui-kit-select` - `ui-kit-textarea` - `ui-kit-date-input` - `ui-kit-file-upload` - `ui-kit-search-bar` - `ui-kit-filter-chips` - `ui-kit-sort-control` ### Organisms [](#organisms) - `ui-kit-form` - `ui-kit-auth-form` - `ui-kit-panel` - `ui-kit-table` - `ui-kit-stat-card` - `ui-kit-primary-rail` - `ui-kit-sidebar` - `ui-kit-line-chart` - `ui-kit-bar-chart` - `ui-kit-pie-chart` - `ui-kit-calendar` - `ui-kit-drawer` - `ui-kit-empty-state` - `ui-kit-progress` - `ui-kit-skeleton` - `ui-kit-section-header` - `ui-kit-timeline` - `ui-kit-activity-list` - `ui-kit-task-list` ### Templates [](#templates) - `ui-kit-app-shell` - `ui-kit-dashboard` - `ui-kit-crud-page` - `ui-kit-resource-index` - `ui-kit-context-shell` - `ui-kit::templates.module-workspace` - `ui-kit-auth-page` Config (optional) ----------------- [](#config-optional) You can publish config and views if you want to customize: ``` php artisan vendor:publish --tag=ui-kit-config php artisan vendor:publish --tag=ui-kit-views ``` Theming ------- [](#theming) UI Kit supports per-project brand theming through config, so different consumers can use different color schemes without editing package views. Publish the config: ``` php artisan vendor:publish --tag=ui-kit-config ``` Then set your project colors in `config/ui-kit.php`: ``` 'theme' => [ 'colors' => [ 'primary' => '#ec4899', 'primary_hover' => '#db2777', 'primary_soft' => 'rgba(236, 72, 153, 0.14)', 'primary_contrast' => '#ffffff', 'accent' => '#f9a8d4', ], ], ``` If you use the package layout, theme styles load automatically. If you use your own app layout, add this once inside ``: ``` ``` Then package components like `primary` buttons, active steps, charts, progress bars, sidebars, and focus states will use your project colors automatically. Icon Aliases ------------ [](#icon-aliases) Navigation-style components can resolve simple icon names to Font Awesome automatically. ``` [ 'label' => 'Navigation', 'href' => route('showcase.navigation'), 'icon' => 'navigation', ] ``` If `icon` is omitted, UI Kit will also try to map the icon from the item label. Raw SVG or HTML icons still work and take precedence. Dual Sidebar Layouts -------------------- [](#dual-sidebar-layouts) The app shell supports optional left and right navigation regions. For a right-side mirrored setup, render the rail and sidebar using the right slots and pass `side="right"`: ``` ``` If the right side should behave like a contextual helper section instead of another nav list, switch the sidebar organism into `panel` mode: ``` ... Custom panel content Create action ``` Shell Templates --------------- [](#shell-templates) UI Kit also includes a higher-level shell template for multi-pane layouts where you want a primary rail, contextual navigation, a top bar, and an optional helper panel without wiring each region by hand: ``` {{-- Page content --}} ``` You can pass your own navigation arrays, branding, labels, badges, helper rail items, and helper panel blocks to shape the shell for any module in your app. ### Custom Profile Menu Actions [](#custom-profile-menu-actions) Consumers can customize the profile dropdown menu in `ui-kit::templates.module-workspace` instead of being limited to the built-in profile and logout links. ``` ... ``` Each menu item supports: - `label`: visible text - `href`: destination URL - `icon`: optional Font Awesome class - `tone`: use `'danger'` for destructive-style actions If `profileMenuItems` is not provided, the package keeps the current fallback behavior and builds the menu from `profileEditHref` and `profileLogoutHref`. ### Module Workspace [](#module-workspace) `x-ui-kit::templates.module-workspace` is the first-class Blade entry point for app-style modules like dashboards, inventory screens, and operations workspaces. The recommended pattern is to shape one page contract in your controller and let the Blade layout render it, instead of querying models or inferring route state inside the view. ``` return view('operations.index', [ 'workspacePage' => [ 'title' => 'Northwind Ops', 'subtitle' => 'operations workspace', 'section' => 'inventory', 'subnav' => 'catalog', 'page_eyebrow' => 'Operations workspace', 'page_heading' => 'Inventory and fulfillment', 'page_description' => 'Track catalog records, stock movement, and fulfillment tasks from one shared workspace.', 'navigation' => $navigation, 'navigation_badges' => $navigationBadges, 'theme_colors' => [ 'accent' => '#0f766e', 'accent_soft' => '#ccfbf1', ], 'brand' => [ 'initials' => 'NW', 'name' => 'Northwind Ops', 'tagline' => 'inventory, fulfillment, reporting', ], 'profile' => [ 'user' => auth()->user(), 'edit_href' => route('profile.edit'), 'logout_href' => route('logout'), ], ], 'spotlightCards' => $spotlightCards, 'asideBlocks' => $asideBlocks, ]); ``` Then render the shell from your layout: ``` {{ $slot }} ``` This keeps the frontend contract explicit, makes pages easier to hand off between backend and frontend teammates, and makes it easier to reuse the same backend data in Vue or another client later. ### Workspace Profile Menu [](#workspace-profile-menu) The workspace shell profile menu resolves the current authenticated user automatically when auth is available. If the host app has no logged-in user, it falls back to `Default User` and uses the first letter of the resolved name as the avatar. Consumers can support different user shapes by publishing and editing `config/ui-kit.php`: ``` 'workspace' => [ 'profile' => [ 'fields' => [ 'name' => ['name', 'username', 'full_name', 'display_name', 'Name', 'Username'], 'email' => ['email', 'Email', 'mail'], 'avatar_src' => ['avatar_src', 'avatar_url', 'profile_photo_url', 'photo_url'], ], 'fallback' => [ 'name' => 'Default User', 'email' => null, ], 'routes' => [ 'edit' => ['name' => 'profile.edit', 'href' => null, 'parameters' => []], 'logout' => ['name' => 'logout', 'href' => null, 'parameters' => []], ], ], ], ``` You can also override the profile per render: ``` ``` For apps without named routes, pass direct URLs instead: ``` ``` `workspace-shell` also supports two named slots for dynamic page controls: ``` Export Add record ``` Use `actions` for header controls and `floating` for pinned corner UI such as quick-create buttons. For a consumer-controlled details panel, `workspace-shell` also accepts a custom right sidebar body: ``` Anything can go here. ``` Use `rightSidebarContent` when the consumer wants to fully own the sidebar body instead of relying on the package block renderer. For consumers who do not want to build full `primaryRailItems` and `sidebarSections` arrays, UI Kit also includes a simpler workspace wrapper: ``` Select an item to see the details. {{-- Page content --}} ``` Use `module-workspace` when the consumer wants a simpler entrypoint built around one `navigation` array instead of assembling the lower-level shell structure manually. Auth Pages ---------- [](#auth-pages) UI Kit includes an auth template that gives consumers a flexible shell for login, register, forgot-password, and other auth views without forcing one fixed design. It supports: - solid or image backgrounds - left, center, or right auth card placement - shared branding from config or auth-specific branding - optional custom logo, custom background layer, and supporting content slots - fully custom form/card contents inside the main slot Set shared branding once in `config/ui-kit.php`: ``` 'branding' => [ 'logo' => asset('images/logo.svg'), 'name' => 'Acme', 'subtitle' => 'Workspace portal', 'href' => '/', ], ``` Then render an auth page: ``` @csrf Email Password Sign in Secure access Build an auth screen that still feels like your product. Consumers can swap the background, move the card, reuse their navbar logo, or inject a custom logo for auth only. ``` Placement and size are now package-level options, so a consumer can shift the auth content without rebuilding the template: ``` {{-- Right-side half-screen panel --}} {{-- Left floating bubble --}} {{-- Centered modal-style card --}} {{-- Full-screen auth surface --}} {{-- Flush left panel with custom CSS width --}} ``` If a consumer wants a different auth logo than the main app brand, they can override it per page: ``` ``` If they want total visual control, they can replace the background or logo regions with slots: ``` Custom brand block {{-- Custom auth form --}} ``` Requirements ------------ [](#requirements) - Laravel 12+ - Tailwind CSS is only required if you want to rebuild or override the package styles - Alpine.js (auto-loaded by package layout) ### Health Score 45 — FairBetter than 91% of packages Maintenance94 Actively maintained with recent releases Popularity10 Limited adoption so far Community6 Small or concentrated contributor base Maturity57 Maturing project, gaining track record 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 ~2 days Recently: every ~9 days Total 29 Last Release 32d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/151122714?v=4)[chriskelemba](/maintainers/chriskelemba)[@chriskelemba](https://github.com/chriskelemba) --- Top Contributors [![chriskelemba](https://avatars.githubusercontent.com/u/151122714?v=4)](https://github.com/chriskelemba "chriskelemba (32 commits)") --- Tags laraveluicomponentsbladekit ### Embed Badge ![Health badge](/badges/chriskelemba-laravel-ui-kit/health.svg) ``` [![Health](https://phpackages.com/badges/chriskelemba-laravel-ui-kit/health.svg)](https://phpackages.com/packages/chriskelemba-laravel-ui-kit) ``` ### Alternatives [moonshine/moonshine Laravel administration panel 1.3k253.1k86](/packages/moonshine-moonshine)[psalm/plugin-laravel Psalm plugin for Laravel 3345.3M347](/packages/psalm-plugin-laravel)[livewire/flux The official UI component library for Livewire. 9577.8M138](/packages/livewire-flux)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k570.6k23](/packages/robsontenorio-mary)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 728176.2k14](/packages/tallstackui-tallstackui)[hasinhayder/tyro-dashboard Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings 5443.8k](/packages/hasinhayder-tyro-dashboard) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)