PHPackages inertiathemes/inertiathemes - 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. inertiathemes/inertiathemes ActiveLibrary[Templating & Views](/categories/templating) inertiathemes/inertiathemes =========================== A theming system for Laravel/Inertia applications with base blocks and theme overrides v1.1.0(5mo ago)3196MITPHPPHP ^8.1 Since Jan 16Pushed 5mo agoCompare [ Source](https://github.com/InertiaThemes/InertiaThemes)[ Packagist](https://packagist.org/packages/inertiathemes/inertiathemes)[ RSS](/packages/inertiathemes-inertiathemes/feed)WikiDiscussions main Synced today READMEChangelogDependencies (2)Versions (3)Used By (0) InertiaThemes ============= [](#inertiathemes) A theming system for Laravel/Inertia apps. Works with Vue, React, and Svelte. Visit InertiaThemes.com for further information [![InertiaThemes](https://camo.githubusercontent.com/714793649a244b4eea31ad94d063178ac41c5380704c34e63c12959e8ef04e3d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f476f253230746f2d696e65727469617468656d65732e636f6d2d3235363345423f7374796c653d666f722d7468652d6261646765)](https://inertiathemes.com) Install ------- [](#install) ``` composer require inertiathemes/inertiathemes ``` Publish the component for your framework: ``` # Vue php artisan vendor:publish --tag=inertiathemes-vue # React php artisan vendor:publish --tag=inertiathemes-react # Svelte php artisan vendor:publish --tag=inertiathemes-svelte ``` How It Works ------------ [](#how-it-works) 1. You create **themes** (PHP classes with colors and settings) 2. You create **blocks** (PHP classes that define content schemas) 3. You create **block components** (Vue/React/Svelte files in theme folders) 4. Use the `` component to render them The active theme determines which components get rendered. Quick Start ----------- [](#quick-start) ### 1. Create a Theme [](#1-create-a-theme) ``` php artisan make:theme Default ``` This creates `app/Themes/DefaultTheme.php`: ``` namespace App\Themes; use InertiaThemes\BaseTheme; class DefaultTheme extends BaseTheme { protected string $id = 'default'; public function name(): string { return 'Default'; } public function colors(): array { return [ 'primary' => '#3B82F6', 'secondary' => '#1F2937', 'accent' => '#10B981', ]; } } ``` ### 2. Create a Block [](#2-create-a-block) ``` php artisan make:block Hero ``` This creates `app/Blocks/HeroBlock.php`: ``` namespace App\Blocks; use InertiaThemes\BaseBlock; class HeroBlock extends BaseBlock { protected string $type = 'Hero'; protected string $name = 'Hero'; protected string $category = 'Content'; protected string $component = 'Hero'; public function contentSchema(): array { return [ 'title' => ['type' => 'text', 'label' => 'Title'], ]; } public function defaultContent(): array { return [ 'title' => '', ]; } } ``` ### 3. Create Block Components [](#3-create-block-components) Put your components in theme folders: ``` resources/js/themes/ default/ blocks/ Hero.vue Footer.vue modern/ blocks/ Hero.vue Footer.vue ``` Example Vue component: ``` defineProps({ content: Object, settings: Object, }) {{ content.headline }} {{ content.subheadline }} ``` ### 4. Set Up Routes [](#4-set-up-routes) Use the theme middleware: ``` // routes/web.php Route::middleware('theme:default')->group(function () { Route::get('/', [PageController::class, 'home']); }); ``` Or create custom middleware to resolve theme dynamically: ``` // app/Http/Middleware/SetOrganizationTheme.php namespace App\Http\Middleware; use InertiaThemes\Middleware\SetTheme; use Illuminate\Http\Request; class SetOrganizationTheme extends SetTheme { protected function resolveFromRequest(Request $request): ?string { // Return theme ID from database, session, etc. return $request->user()?->organization?->theme_id; } } ``` ### 5. Pass Blocks from Controller [](#5-pass-blocks-from-controller) ``` use Inertia\Inertia; class PageController extends Controller { public function home() { return Inertia::render('Home', [ 'blocks' => [ [ 'id' => 'block-1', 'type' => 'Hero', 'area' => 'content', 'content' => ['headline' => 'Hello', 'subheadline' => 'World'], 'settings' => [], ], ], ]); } } ``` ### 6. Render Blocks [](#6-render-blocks) ``` import Blocks from '@/Components/Blocks.vue' ``` That's it. The `` component automatically: - Reads the theme from Inertia shared props - Reads the blocks from page props - Renders the right component for each block based on the active theme Block Placement (Areas) ----------------------- [](#block-placement-areas) Use the `area` prop to render blocks in specific sections: ``` ``` Blocks are filtered by their `area` property. Without the `area` prop, all blocks render. Theme Fallbacks --------------- [](#theme-fallbacks) Components are resolved in this order: 1. `themes/{current-theme}/blocks/{BlockType}.vue` 2. `themes/_base/blocks/{BlockType}.vue` 3. `themes/default/blocks/{BlockType}.vue` Use `_base` for shared components, theme folders for overrides. Artisan Commands ---------------- [](#artisan-commands) Generate themes and blocks using Artisan: ``` # Create a new theme php artisan make:theme ModernDark # Creates: app/Themes/ModernDarkTheme.php # Create a new block php artisan make:block Features # Creates: app/Blocks/FeaturesBlock.php ``` The commands automatically: - Add `Theme` or `Block` suffix if not present - Generate kebab-case IDs from class names - Create the directory if it doesn't exist To customize the stubs, publish them: ``` php artisan vendor:publish --tag=inertiathemes-stubs ``` Then edit the files in `stubs/inertiathemes/`. API Reference ------------- [](#api-reference) ### Theme Facade [](#theme-facade) ``` use InertiaThemes\Facades\Theme; Theme::use('theme-id'); // Set current theme Theme::current(); // Get current theme Theme::get('theme-id'); // Get specific theme Theme::list(); // Get all themes Theme::has('theme-id'); // Check if theme exists ``` ### Blocks Facade [](#blocks-facade) ``` use InertiaThemes\Facades\Blocks; Blocks::list(); // All blocks Blocks::get('hero'); // Get specific block Blocks::byCategory(); // Blocks grouped by category Blocks::has('hero'); // Check if block exists ``` ### useTheme Composable (Vue) [](#usetheme-composable-vue) ``` import { useTheme } from '@/composables/useTheme' const { theme, themeId, colors, themeStyles } = useTheme() Current theme: {{ themeId }} ``` Config ------ [](#config) Publish the config file: ``` php artisan vendor:publish --tag=inertiathemes-config ``` ``` // config/inertiathemes.php return [ 'default' => 'default', 'auto_discover' => true, 'paths' => [ 'themes' => app_path('Themes'), 'blocks' => app_path('Blocks'), ], ]; ``` License ------- [](#license) MIT ### Health Score 37 — LowBetter than 81% of packages Maintenance71 Regular maintenance activity Popularity17 Limited adoption so far Community6 Small or concentrated contributor base Maturity45 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 ~0 days Total 2 Last Release 170d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/1f1e8418623e51236a1fd63d1da722d2b15a8a8b067b10d520580fd3e9a6e509?d=identicon)[MatthewGross](/maintainers/MatthewGross) --- Top Contributors [![mpge](https://avatars.githubusercontent.com/u/3311227?v=4)](https://github.com/mpge "mpge (8 commits)") ### Embed Badge ![Health badge](/badges/inertiathemes-inertiathemes/health.svg) ``` [![Health](https://phpackages.com/badges/inertiathemes-inertiathemes/health.svg)](https://phpackages.com/packages/inertiathemes-inertiathemes) ``` ### Alternatives [craftcms/cms Craft CMS 3.6k3.6M3.1k](/packages/craftcms-cms)[moonshine/moonshine Laravel administration panel 1.3k253.1k81](/packages/moonshine-moonshine)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 725173.2k14](/packages/tallstackui-tallstackui)[erag/laravel-lang-sync-inertia A powerful Laravel package for syncing and managing language translations across backend and Inertia.js (Vue/React/Svelte) frontends, offering effortless localization, auto-sync features, and smooth multi-language support for modern Laravel applications. 4925.3k](/packages/erag-laravel-lang-sync-inertia)[emargareten/inertia-modal Inertia Modal is a Laravel package that lets you implement backend-driven modal dialogs for Inertia apps. 90142.9k](/packages/emargareten-inertia-modal)[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. 45444.2k1](/packages/pressbooks-pressbooks) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)