Customize Layout with React/Tailwind

In this lesson, we will explore how to change the look of the page's main elements: the logo, colors, layout, and navigation.

Changing the App Name

Your application's default name at the top left, beside the logo, is "Laravel Starter Kit". You can change it in the logo component file.

resources/js/components/app-logo.tsx

BEFORE:

<span className="mb-0.5 truncate leading-none font-semibold">Laravel Starter Kit</span>

AFTER:

<span className="mb-0.5 truncate leading-none font-semibold">React Tasks</span>

Changing the Name COLOR

With the same example, let's change the color with Tailwind, adding a text-blue-800 class.

resources/js/components/app-logo.tsx

BEFORE:

<span className="mb-0.5 truncate leading-none font-semibold">React Tasks</span>

AFTER:

<span className="mb-0.5 truncate leading-none font-semibold text-blue-800">React Tasks</span>

Here's the visual result:

Notice: we're running npm run dev in the background to re-compile CSS styles automatically after every change.

Changing the Logo Icon

The logo icon is SVG, so we can change it with any other SVG we want.

resources/js/components/app-logo-icon.tsx

BEFORE:

<svg {...props} viewBox="0 0 40 42" xmlns="http://www.w3.org/2000/svg">
    <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M17.2 5.63325L8.6 0.855469L0 5.63325V32.1434L16.2 41.1434L32.4 32.1434V23.699L40 19.4767V9.85547L31.4 5.07769L22.8 9.85547V18.2999L17.2 21.411V5.63325ZM38 18.2999L32.4 21.411V15.2545L38 12.1434V18.2999ZM36.9409 10.4439L31.4 13.5221L25.8591 10.4439L31.4 7.36561L36.9409 10.4439ZM24.8 18.2999V12.1434L30.4 15.2545V21.411L24.8 18.2999ZM23.8 20.0323L29.3409 23.1105L16.2 30.411L10.6591 27.3328L23.8 20.0323ZM7.6 27.9212L15.2 32.1434V38.2999L2 30.9666V7.92116L7.6 11.0323V27.9212ZM8.6 9.29991L3.05913 6.22165L8.6 3.14339L14.1409 6.22165L8.6 9.29991ZM30.4 24.8101L17.2 32.1434V38.2999L30.4 30.9666V24.8101ZM9.6 11.0323L15.2 7.92117V22.5221L9.6 25.6333V11.0323Z"
    />
</svg>

AFTER:

<svg {...props} viewBox="0 0 30 32" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.015 25.238V0H0v32h12.303c7.387 0 12.223-2.902 14.854-7.028l-14.854.266H7.015Z" fill="#fff" />
    <path
        d="M13.95 6.416h2.445c4.384 0 7.44 3.168 7.44 8.146 0 1.278-.212 2.423-.558 3.435h6.351c.24-1.092.372-2.237.372-3.435C30 6.336 24.128.027 16.422.027h-2.445l-.027 6.389Z"
        fill="#fff"
    />
</svg>

Visual result:

Changing the Logo Color

There are two different component files: app-logo-icon.tsx and app-logo.tsx. We can change the Tailwind CSS color for the logo from text-white to text-blue-100 and add a few CSS classes to the main div.

resources/js/components/app-logo.tsx

BEFORE:

<>
    <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
        <AppLogoIcon className="size-5 fill-current text-white dark:text-black" />
    </div>
    <div className="ml-1 grid flex-1 text-left text-sm">
        <span className="mb-0.5 truncate leading-none font-semibold text-blue-800">React Tasks</span>
    </div>
</>

AFTER:

<>
    <div className="bg-linear-to-r from-blue-500 to-blue-600 text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
        <AppLogoIcon className="size-5 fill-current text-blue-100 dark:text-black" />
    </div>
    <div className="ml-1 grid flex-1 text-left text-sm">
        <span className="mb-0.5 truncate leading-none font-semibold text-blue-800">React Tasks</span>
    </div>
</>

Visual result:

The Tailwind structure we've used here is called Linear background gradient.

Changing Sidebar Active Color

Quite a few CSS styles are defined in the resources/css/app.css file.

For example, let's change the styling of the active menu item.

resources/css/app.css

BEFORE:

:root {
    --sidebar-accent: oklch(0.97 0 0);
}

AFTER:

:root {
    --sidebar-accent: oklch(0.846 0.076 269.861 / 0.19);
}

Visual result:

There's also a .dark version below in the same file:

.dark {
    --sidebar-accent: oklch(0.269 0 0);
}

Notice: If you're not familiar with the oklch color format, I suggest you read this article.

Changing from Sidebar to Topbar layout

Laravel starter kits allow us to easily change the navigation from the sidebar to the topbar. Two layouts are available, and you just need to change which one you're using.

resources/js/layouts/app-layout.tsx

BEFORE:

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

AFTER:

import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Visual result:

For the rest of this course, we will stay with the header layout and the navigation on top.

Changing TopBar Active Menu Item Color

The final change in this lesson is for the active menu item.

resources/js/components/app-header.tsx

BEFORE:

<div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"></div>

AFTER:

<div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-blue-600 dark:bg-white"></div>

And now we have a blue color for the active menu item:

These are just a few examples of customizations.

Here's the GitHub commit for these visual changes.

The main logic is this:

• You need to find the .tsx component where the element is located
• Figure out if there are options for different values on the JS side
• Be familiar with Tailwind to customize the styling

If you're new to Tailwind, we have a separate course called Tailwind CSS for Laravel Developers.

In the next lesson, we will move beyond the default starter kit and start building our own Laravel + React CRUD on top of it.