Install NextUI with React Js in Laravel 9

Today we are going to learn how to Install NextUI with React Js in Laravel 9. This tutorial will cover on installing NextUI with React Js in Laravel 9 application.

NextUI allows you to make beautiful, modern, and fast websites/applications regardless of your design experience, created with React.js and Stitches, based on React Aria and inspired by Vuesax.

Steps on Install NextUI with React Js in Laravel 9:

• Step 1: Install fresh new Laravel 9 Application
• Step 2: Creating Database
• Step 3: Creating AUTH with Breeze + React Js
• Step 4: Installing NextUI
• Step 5: Creating React Page with NextUI Design
• Step 6: Testing
• Step 7: Conclusion

Also Read: Restrict User Access from IP Address in Laravel 9 Tutorial

Step 1: Install fresh new Laravel 9 Application

First step, is to install a fresh new Laravel application. To install a Laravel 9 Application using composer run the following command in terminal.

composer create-project laravel/laravel nextui-app

cd nextui-app

Note: “nextui-app” is the Laravel 9 application name.

Step 2: Creating Database and Configuration

Now, We are going to create a database. To create a database first open your phpmyadmin and create a new database with name nextui-app. You can use whatever you like.

Now Open .env file and enter the database details

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nextui-app
DB_USERNAME=root
DB_PASSWORD=

Also Read: How to create SEO friendly sluggable URL Laravel 9 Example

Step 3: Creating AUTH with Breeze + React Js

Now, We are going to install AUTH with Breeze with composer. To install the AUTH with Breeze run the following command into terminal.

composer require laravel/breeze --dev

Now, we need to install the authentication for register, login and logout. If you like to create a team management you have to pass addition parameter. you can see below commands:

php artisan breeze:install react

Now install node js package.

npm install

Now let run the vite by following command.

npm run dev

Its time you to run the migration. Follow the below command to do so.

php artisan migrate

Step 4: Installing NextUI

Now its time to install NextUI with npm. Run the following command to install NextUI to your laravel 9 application.

npm i @nextui-org/react

Also Read: Create Custom Artisan Command Laravel 9 Example

Step 5: Creating React Page with NextUI Design

Now we will make change to react js page to apply our nextui designs. We are going to update dashboard page when you login to this page.

resources/js/pages/Dashboard.jsx

import React from 'react';
import Authenticated from '@/Layouts/Authenticated';
import {Avatar, Grid, Text} from '@nextui-org/react';

export default function Dashboard(props) {
    return (
        <Authenticated
            auth={props.auth}
            errors={props.errors}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">NextUI | Create Next App - LaravelTuts.com</h2>}
        >
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg p-4 text-center">

                        <Text h1 size={50} css={{ textGradient: "45deg, $blue600 -20%, $pink600 50%", }} weight="bold">
                            Let's
                        </Text>

                        <Text h1 size={60} css={{ textGradient: "45deg, $purple600 -20%, $pink600 100%", }} weight="bold">
                            Learn Laravel with
                        </Text>

                        <Text h1 size={50} css={{ textGradient: "45deg, $yellow600 -20%, $red600 100%", }} weight="bold">
                            LaravelTuts.com
                        </Text>

                        <hr />

                        <Text h1 size={30} weight="bold" className="py-4">
                            Demo for NEXTUI Grid Container
                        </Text>

                        <Grid.Container gap={2} className="flex py-4 items-center justify-center">
                            <Grid>
                                <Avatar size="lg" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" color="primary" bordered/>
                            </Grid>
                            <Grid>
                                <Avatar size="lg" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" color="secondary" bordered/>
                            </Grid>
                            <Grid>
                                <Avatar size="lg" src="https://i.pravatar.cc/150?u=a04258114e29026702d" color="success" bordered/>
                            </Grid>
                            <Grid>
                                <Avatar size="lg" src="https://i.pravatar.cc/150?u=a048581f4e29026701d" color="warning" bordered/>
                            </Grid>
                            <Grid>
                                <Avatar size="lg" src="https://i.pravatar.cc/150?u=a092581d4ef9026700d" color="error" bordered/>
                            </Grid>
                            <Grid>
                                <Avatar size="lg" src="https://i.pravatar.cc/150?u=a042581f4e25056704b" color="gradient" bordered/>
                            </Grid>
                        </Grid.Container>
                    </div>
                </div>
            </div>
        </Authenticated>
    );
}

Read the NextUI Document to add you our design.

Also Read: React JS Image Upload using Vite in Laravel 9 Example

Step 6: Testing

Now its time to test our NextUI with React JS in laravel 9 application. Run the following command to start the laravel server.

php artisan serve

also run the following command in new terminal.

npm run dev

then open the following URL in any web browser.

http://127.0.0.1:8000/

So now, register a new user and login. Then you will redirected to dashboard page with NextUI design.

Preview:

Step 7: Conclusion

Today, We had learn Install NextUI with React Js in Laravel 9. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.

Also Read: Laravel 9 Install Vue JS Example