Frontend & Theming

Inertia Start's frontend is built with Vue.js 3, TypeScript 6, and Tailwind CSS 4, leveraging the popular shadcn-vue library. It relies on Laravel Vite for asset bundling.

Browse the component showcase

Preview the buttons, forms, overlays and more that ship with Inertia Start.

Open the demo

Components

We use shadcn-vue, which provides accessible, unstyled components that you can copy and paste into your apps. These components are fully typed and customizable.

Official shadcn-vue components

Shadcn-vue components are located in resources/js/components/ui.

You can find other components here.

Example adding the Switch component:

npx shadcn-vue@latest add switch

The command will publish the Switch component to resources/js/components/ui/Switch.vue.

Then, use it in your pages:

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
    <div>
        <Switch />
    </div>
</template>

Custom components

Inertia Start includes its own customized versions of several shadcn-vue components, extending them with new features and optimizing them for Inertia Start’s specific needs.

In addition to the shadcn-vue components, Inertia Start provides a variety of custom components, all located in resources/js/components.

Extend with third-party components

Here is a list of well-known component libraries, but there are many others:

Theming

Included themes

Theming is built on CSS variables, making it incredibly easy to customize. Inertia Start provides 27 primary colors and 26 secondary colors, based on the curated Tailwind palette.

Learn how to use built-in themes in the Colors section of the configuration docs.

Customizing

To change the look and feel, you can tweak the CSS variables in resources/css/app.css or use a tool like tweakcn to generate your theme.

Light & Dark Mode

Full support for Light and Dark modes is included. By default, the two modes are enabled.

You can configure which mode are enabled using the I_S_THEME environment variable. Possible values are:

null: The two mode will be enabled. By default, the mode will automatically match the preferences of the user's device, unless the user selects a specific theme via the theme selector component.
light or dark: only the Light or Dark mode will be enabled and forced, no matter the preferences of the user's device. The theme switcher will not be displayed.

Example, enabling only the Dark mode:

.env

I_S_THEME=dark

App layouts

Inertia Start ships with two authenticated application shells:

sidebar: the default navigation layout with the main navigation in a collapsible sidebar.
header: a top navigation layout that renders the navigation in the page header.

Switch between them with the I_S_APP_LAYOUT environment variable:

.env

I_S_APP_LAYOUT=header

resources/js/layouts/AppLayout.vue acts as the wrapper and chooses between resources/js/layouts/app/AppSidebarLayout.vue and resources/js/layouts/app/AppHeaderLayout.vue based on the shared appLayout prop.

Because the chosen layout is shared through Inertia, you can also branch on it from your own Vue components:

<script setup lang="ts">
import { computed } from 'vue'
import { usePage } from '@inertiajs/vue3'

const page = usePage()

const isHeaderLayout = computed(() => page.props.appLayout === 'header')
</script>