PHPackages vkm-apps/x-theme - 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. vkm-apps/x-theme ActiveLibrary[Templating & Views](/categories/templating) vkm-apps/x-theme ================ Theme layout and sidebar package for Laravel 13+, Livewire 4+, and Tailwind 4+ v1.0.7(4w ago)016↓50%MITBladePHP ^8.4 Since Jun 28Pushed 4w agoCompare [ Source](https://github.com/vkm-apps/x-theme)[ Packagist](https://packagist.org/packages/vkm-apps/x-theme)[ RSS](/packages/vkm-apps-x-theme/feed)WikiDiscussions main Synced 2w ago READMEChangelog (7)Dependencies (2)Versions (8)Used By (0) x-theme ======= [](#x-theme) [![Latest Version on Packagist](https://camo.githubusercontent.com/751abc191ffdfdff57c3f97d839bb4a16681f9257112b067fe3cc1e703d902a3/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f766b6d2d617070732f782d7468656d652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/vkm-apps/x-theme)[![Total Downloads](https://camo.githubusercontent.com/2d4f874561781dc87e2ecedeb30fe329044e7f3ef7f76ad20354f5fb76124657/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f766b6d2d617070732f782d7468656d652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/vkm-apps/x-theme)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE) A modern, highly polished, utility-driven Theme layout, responsive sidebar, and beautiful authentication layout component system built for **Laravel 13+**, **Livewire 4+**, and **Tailwind CSS v4+** with **Alpine.js**. --- 🌟 Key Features -------------- [](#-key-features) - **Three Specialized Layouts:** Choose between a **Base** empty layout, a **Hero** landing-page layout, or a full **Sidebar** dashboard layout. - **Responsive Sidebar Layout:** Seamlessly switches between **Full Width**, **Mini Sidebar**, and **Mobile Drawer** modes with smooth transitions. - **FOUC Prevention & Sync:** Built-in lightweight javascript to apply Light/Dark modes instantly before the first paint, matching browser preferences or saved localStorage configurations. - **Dynamic User Resolution:** Automatically resolves names, initials, role titles, and Gravatars for authenticated Laravel users in the Sidebar. - **SEO Best Practices:** Configurable meta tags, descriptions, keywords, canonical URLs, robot crawl tags (`noindex`), and favicon loading built directly into the layout. - **Auth Flow Layouts:** Clean, responsive, and stunning authorization screen templates supporting **Centered Card** and **Split-Screen** layouts with mesh/radial gradients and background parallax scaling. - **Tailwind v4 Optimized:** Uses cutting-edge Tailwind CSS v4 properties (such as HSL palettes, smooth backdrop filters, and CSS variables) for maximum style flexibility. - **Adaptive Rounded Overrides:** Allows overriding app-wide rounding aesthetics (`none`, `sm`, `lg`) dynamically from layout parameters. - **Importable JavaScript:** All layout JS logic is in `resources/js/theme.js` so you can import it into your own JS bundles. --- 🚀 Installation -------------- [](#-installation) ### 1. Require the Package via Composer [](#1-require-the-package-via-composer) Install the package using Composer: ``` composer require vkm-apps/x-theme ``` ### 2. Publish Views and Assets [](#2-publish-views-and-assets) To publish the package's customizable Blade views or its CSS/JS assets, run: ``` # Publish both views & assets php artisan vendor:publish --provider="VkmApps\XTheme\XThemeServiceProvider" # Or publish them selectively using tags php artisan vendor:publish --tag=x-theme-views php artisan vendor:publish --tag=x-theme-assets ``` Published files will be copied to: - Views: `resources/views/vendor/x-theme/` - CSS: `public/vendor/x-theme/css/theme.css` - JS: `public/vendor/x-theme/js/theme.js` --- 🎨 Styling & Asset Integration --------------------------------- [](#-styling--asset-integration) ### CSS (Tailwind CSS v4) [](#css-tailwind-css-v4) The package uses custom styles in `resources/css/theme.css` for advanced transitions, scrollbars, and teleported menus. #### Method A: Direct CSS Import (Recommended) [](#method-a-direct-css-import-recommended) Add the following line to your host application's main CSS entry point (usually `resources/css/app.css`): ``` @import "../../public/vendor/x-theme/css/theme.css"; ``` *Note: Make sure you publish the assets tag `x-theme-assets` so this file is available in the public directory.* #### Method B: Layout CSS Stack [](#method-b-layout-css-stack) Include the CSS file dynamically inside the layout's stylesheet stack: ``` @push('css') @endpush ``` ### JavaScript [](#javascript) The package's AlpineJS layout state and Theme controller are externalized to `resources/js/theme.js`. #### Method A: Direct Import (Recommended) [](#method-a-direct-import-recommended) Import the JS file in your application's main JS entry point (usually `resources/js/app.js`): ``` // Import directly from the vendor package import '../../vendor/vkm-apps/x-theme/resources/js/theme.js'; // Or if you published the assets: // import '../../public/vendor/x-theme/js/theme.js'; ``` #### Method B: Published Asset Script Tag [](#method-b-published-asset-script-tag) If not using a bundler, include the published JS file via a `` tag: ``` @push('page-js') @endpush ``` --- 🎨 Theme Variables & Body Customization ------------------------------------------ [](#-theme-variables--body-customization) The layout's body background and text colors are powered by CSS variables in `theme.css`. You can customize these variables in your host application's CSS entry point: ``` :root { --theme-light-bg: #f9fafb; /* Custom light background */ --theme-light-text: #111827; /* Custom light text color */ --theme-dark-bg: #0f172a; /* Custom dark background */ --theme-dark-text: #f8fafc; /* Custom dark text color */ } ``` Any class attribute passed directly to `` (e.g. `class="bg-zinc-100 font-sans"`) will merge into the `` element and take precedence over these variables. --- 🛠️ Component Catalog & Usage Guide -------------------------------------- [](#️-component-catalog--usage-guide) ### 1. Base Layout (``) [](#1-base-layout-x-layout) An empty layout wrapper with no sidebar or navigation by default. If a `menu` slot is provided, it renders a responsive top navigation bar with a mobile drawer. #### When to Use [](#when-to-use) - Simple content pages with optional top navigation. - Pages that need a clean, minimal wrapper. #### Available Properties [](#available-properties) PropertyTypeDefaultDescription`title``string``null`Appends page title ahead of your `app.name` configuration.`metaDescription``string``null`Custom description for SEO meta tag.`metaKeywords``string``null`Custom keywords for SEO.`noIndex``boolean``false`Injects `` when set to `true`.`canonicalUrl``string``current url`Canonical URL element. Defaults to the current request path.`favicon``string``null`Path to favicon asset file.`mobile``boolean``true`Allows enabling/disabling the drawer viewport toggle logic on smaller screens.`bottom``boolean``false`Switches the sticky navigation bar to the bottom of the viewport.`rounded``string``'lg'`Overrides UI component corners. Allowed options: `'none'`, `'sm'`, `'lg'`.`defaultTheme``string``'light'`The default landing theme if no selection is saved in localStorage (e.g. `'dark'`).`themeToggle``boolean``true`Show or hide the theme toggle buttons (and user switcher in sidebar).#### Code Example: With Menu [](#code-example-with-menu) ``` My App Docs Support Welcome! ``` #### Code Example: Without Menu (Bare Layout) [](#code-example-without-menu-bare-layout) ``` Hello World ``` --- ### 2. Hero Layout (``) [](#2-hero-layout-x-layouthero) A minimal layout with a transparent top bar containing the logo on the left and a dark/light mode toggle on the right. No sidebar or menus. #### When to Use [](#when-to-use-1) - Landing pages and marketing pages. - Hero sections with custom backgrounds. - Pages where you want full control over the body styling. #### Code Example [](#code-example) ``` Brand Hero Section Style the body and content however you need. © 2026 My Company ``` > **Tip:** The hero layout does not apply default background colors to the ``. Pass your own classes directly on the component (e.g. `class="bg-white dark:bg-zinc-950"`) to control the page background. --- ### 3. Sidebar Layout (``) [](#3-sidebar-layout-x-layoutsidebar) The full responsive sidebar dashboard layout. Supports collapsible sidebar, top navigation bar with hamburger toggle, and dark/light mode switching. #### When to Use [](#when-to-use-2) - Admin dashboards and panels. - Application layouts with sidebar navigation. #### Code Example [](#code-example-1) ``` Phobos Panel Documentation Help Desk Overview User Directory Roles & Permissions Welcome back! Here is what is happening with your projects today. ``` --- ### 4. The Sidebar Component (``) [](#4-the-sidebar-component-x-sidebar) Builds the collapsible navigation structure. Displays brand logo options, scrollable links, user profiles, and dropdown options. #### Automatic User Resolving [](#automatic-user-resolving) If a user is logged in via Laravel's Auth facade, the component will: - Parse `auth()->user()->name` for the display title. - Auto-generate name initials (e.g. "John Doe" $\\rightarrow$ "JD") if no image is available. - Scan for common profile image fields (like `avatar` or `profile_photo_url`) and fall back to Gravatar profile photos. - Auto-resolve roles from properties (e.g. `role_name`, `role->title`, `role->name`). #### Available Properties [](#available-properties-1) PropertyTypeDefaultDescription`photo``string``null`Overrides the profile picture source URL.`title``string``null`Overrides user name display.`role``string``null`Overrides user subtitle/role field.`showUserMenu``boolean``true`Show or hide the bottom user panel card.`homeUrl``string``'/'`Target redirect URL for the brand logos.#### Customizing User Dropdown Actions [](#customizing-user-dropdown-actions) You can define slots to appear inside the Alpine-anchored popup profile menu: ``` My Profile @csrf Sign Out ``` --- ### 5. Sidebar Navigation Group & Item (``, ``) [](#5-sidebar-navigation-group--item-x-sidebar-group-x-sidebar-item) These structural utility components build the menu lists. #### SVG Icon Injection Support [](#svg-icon-injection-support) Both `sidebar-group` and `sidebar-item` allow you to inject standard icon class definitions (like FontAwesome, Bootstrap, or Lucide Icons) or custom raw `` tags directly: ``` Statistics Billing Panel ``` --- ### 6. Auth Card Components [](#6-auth-card-components) Provides responsive layouts with full theme switcher support. Supports split-screen backgrounds or simple centered forms with blur overlays. #### `` Layout Options [](#x-authcard-layout-options) - **Centered Card Mode (Default):** A layout with glassmorphic backdrop filters, tech grids, and animated pulsing radial light blobs. - **Split-Screen Mode:** Left visual panel supporting customizable hero images or mesh-gradient loops; Right panel housing input fields. Enable this by passing the `split-screen` attribute. #### Components List [](#components-list) - `` - `` - `` - `` #### Configuration Properties [](#configuration-properties) PropertyTypeDefaultDescription`image``string``null`Background image asset URL for the visual hero section.`action``string``null`Action URL for the `` POST. Automatically loads a loading indicator.`btnStyles``string``null`Add custom utility overrides to style the submit button.`splitScreen``boolean``false`Toggle between centered-glass card and modern split screens.`title``string``'Welcome back'`Header title text.`subtitle``string``null`Header instructions subtitle.`submitText``string``'Sign in'`Label inside the submission button.#### Code Example (Split-Screen Login View) [](#code-example-split-screen-login-view) ``` MY APP Email Address Password Create Account Forgot Password? ``` --- 🔒 Security ---------- [](#-security) If you discover any security-related issues, please email instead of using the issue tracker. 📄 License --------- [](#-license) The MIT License (MIT). Please see [License File](LICENSE) for more information. ### Health Score 44 — FairBetter than 90% of packages Maintenance94 Actively maintained with recent releases Popularity8 Limited adoption so far Community6 Small or concentrated contributor base Maturity56 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 ~3 days Total 7 Last Release 29d ago PHP version history (2 changes)v1.0.1PHP ^8.2 v1.0.5PHP ^8.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/cd1cc3519b88df6f45c1768a7f88bcc95dbf82c4891d47ffbb3f2f11f0587fbe?d=identicon)[vmphobos](/maintainers/vmphobos) --- Top Contributors [![vkm-apps](https://avatars.githubusercontent.com/u/139857686?v=4)](https://github.com/vkm-apps "vkm-apps (8 commits)") ### Embed Badge ![Health badge](/badges/vkm-apps-x-theme/health.svg) ``` [![Health](https://phpackages.com/badges/vkm-apps-x-theme/health.svg)](https://phpackages.com/packages/vkm-apps-x-theme) ``` ### Alternatives [craftcms/cms Craft CMS 3.6k3.7M3.4k](/packages/craftcms-cms)[moonshine/moonshine Laravel administration panel 1.3k268.2k88](/packages/moonshine-moonshine)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 731189.9k16](/packages/tallstackui-tallstackui)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 45844.8k1](/packages/pressbooks-pressbooks)[hasinhayder/tyro-dashboard Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings 5495.1k](/packages/hasinhayder-tyro-dashboard)[ublabs/blade-simple-icons A package to easily make use of Simple Icons in your Laravel Blade views. 1866.3k](/packages/ublabs-blade-simple-icons) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)