inertiajs.com/

Inertiajs

inertiajs.com/

Inertia.js is an open-source framework letting developers build single-page apps in React, Vue, or Svelte while keeping routing and logic on the server, marketed as "the Modern Monolith." The homepage headline, "Build frontend experiences with the backend you love," is followed by a side-by-side code example pairing a Laravel controller with a Vue component, making the integration concrete rather than described in prose. It states explicit backend support for Laravel, Rails, Django, and Phoenix, with particular emphasis on Laravel branding throughout the footer. As an open-source project rather than a company, it has no customer logos or testimonials; its trust signals are GitHub, Discord, and X community links instead.

Visit website

Category

Engineering & Infrastructure

Style

Dark Colorful

Stack

Tailwind CSS

Fonts

Instrument Sans

Palette

Meta title

Inertia.js - The Modern Monolith

Sections

Updated

Oct 10, 2026

Inertiajs's landing page, section by section

Each section below is cropped straight from Inertiajs's live page — useful references for engineering & infrastructure landing page design.

Inertiajs design review: how the homepage is built

The Inertia page runs 5323 pixels at desktop width and opens straight on a full-bleed blue hero, with no header visible. It continues with a split code card, a "Features" block with counters, a nine-cell feature grid, a short closing call and a footer that carries Laravel branding rather than Inertia's, ending in a giant red "Laravel" wordmark. Colour is saturated blue, #155dfd, in the hero, giving way to white and grey for the body, with #3976fd on the closing button. Headings use Instrument Sans. Faint ASCII-art hearts and shapes sit behind the hero text.

Above the fold

With no header, the page opens on a blue field with a pill of seven small logos, four backend icons joined by a line to three frontend icons. The headline runs over two lines above a three-line paragraph naming React, Vue and Svelte. Two pill buttons follow, a white "Learn more" and a translucent "Read docs". A white two-pane code card, "UserController.php" beside "Users.vue", overlaps the bottom edge of the hero.

Counters and three feature columns

A "Features" tag leads "Elevate your application with the modern monolith". A four-cell strip follows, with "INERTIA BY NUMBERS" beside the figures 14, 159 and "8.1K". Three columns come next: "Server-based routing" over an isometric box drawing, "More than just Laravel" over a field of framework icons, and "Flexible frontend" over stacked "users.svelte", "users.tsx" and "users.vue" tabs. Two wider cells, "Forms" and "SEO", close the group, the second showing three circular scores of 100.

Nine-cell feature grid

A three-by-three grid of short entries follows, from "Partial reloads" and "Shared data" to "Prefetching", "Deferred props" and "Infinite scrolling". Hairline borders with small plus marks at the intersections separate the cells. Illustrations appear only in the bottom row, under the three last entries: a glowing "Get started" button, a contact card for "Mary Caldicott", and flight rows tagged "Cancelled" and "Arrived".

Closing section and footer

"Start using Inertia today" is centered, with a blue "Read docs" button beside an outlined "Explore starter kits". The footer shows a red Laravel logo, the red line "Laravel is the most productive way to build, deploy, and monitor software.", four social icons and "© 2026 Laravel". Four grey link columns, "Products", "Packages", "Resources" and "Partners", sit at right, and a red "Laravel" wordmark spans the full width at the bottom.

On mobile

At 390 pixels the headline wraps to three lines and the two hero buttons stack as full-width pills. The code card shows its two panes one above the other, with the lower pane overlapping the upper and both cut off at the right. The counters become a two-by-two grid, and every feature cell stacks into a single column. The footer links form two columns of two lists each, ahead of the large wordmark.

Worth borrowing

Overlapping a PHP and a Vue code pane onto the blue hero shows the backend and frontend pairing immediately.
Counting repos, contributors and stars in a labelled strip gives an open-source project credibility without testimonials.
Showing flight rows and a contact card as feature illustrations makes abstract props and scrolling concrete.