Courses

React Laravel 12 Starter Kit: CRUD Project

Customize Layout with React/Tailwind

Summary of this lesson:
- Customize app name and logo with simple component edits
- Change colors using Tailwind CSS classes and variables
- Switch between sidebar and topbar navigation layouts
- Find and modify React components for visual customization

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...

The full lesson is only for Premium Members.
Want to access all 14 lessons of this course? (77 min read)

You also get:

  • 75 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord